Selection Card Group

                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { Icon, SelectionCardGroup } from '@optimus-web/core';
                                                        import { IconName } from '@optimus-web/icons';
                                                        
                                                        const options = [
                                                            {
                                                                media: <Icon value={IconName.Security} variant="basic" />,
                                                                label: 'Admin',
                                                                value: 'admin',
                                                                name: 'admin',
                                                                description: 'Give full access',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Employees} variant="basic" />,
                                                                label: 'Roles',
                                                                value: 'roles',
                                                                name: 'roles',
                                                                description: 'Quicky assign permission sets',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Settings} variant="basic" />,
                                                                label: 'Individual',
                                                                value: 'individual',
                                                                name: 'individual',
                                                                description: 'Set up specific permissions',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Lock} variant="basic" />,
                                                                label: 'No permissons',
                                                                value: 'no-permissons',
                                                                name: 'no-permissons',
                                                                description: 'No access',
                                                            },
                                                        ];
                                                        
                                                        const CheckboxSelectionCardGroup = () => {
                                                            const [selected, setSelected] = useState<string[]>([]);
                                                        
                                                            return (
                                                                <SelectionCardGroup
                                                                    helper="Helper text"
                                                                    label="Label"
                                                                    variant="vertical"
                                                                    inputValue={selected}
                                                                    onChange={(_, value) => setSelected(value)}
                                                                    type="checkbox"
                                                                    options={options}
                                                                />
                                                            );
                                                        };