@itcase/ui-web 1.9.111 → 1.9.113

package/dist/types/components/AvatarStack/stories/__mock__/index.js

@@ -1,25 +1,31 @@
 const avatarsListMock = [
     {
-        id: '0',
+        id: '1',
         src: '/avatar/Man.png',
         firstName: 'firstName',
         lastName: 'lastName',
     },
     {
-        id: '1',
+        id: '2',
         src: '/avatar/Woman.png',
         firstName: 'firstName',
         lastName: 'lastName',
     },
     {
-        id: '2',
+        id: '3',
         src: '',
         firstName: 'firstName',
         lastName: 'lastName',
     },
     {
-        id: '3',
-        src: '',
+        id: '4',
+        src: '/avatar/Woman2.png',
+        firstName: 'firstName',
+        lastName: 'lastName',
+    },
+    {
+        id: '5',
+        src: '/avatar/Woman2.png',
         firstName: 'firstName',
         lastName: 'lastName',
     },

package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.d.ts

@@ -4,22 +4,21 @@ declare const meta: {
     title: string;
     component: typeof Badge;
     args: {
+        appearance: "accentPrimary sizeXXL solid rounded";
+        dataTestId: string;
         dot: true;
         icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         value: number;
     };
     parameters: {
         layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
     };
+    tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Accent: Story;
-export declare const Special: Story;
-export declare const Extra: Story;
-export declare const Surface: Story;
-export declare const Success: Story;
-export declare const Warning: Story;
-export declare const Danger: Story;
-export declare const Info: Story;
-export declare const Disabled: Story;
+export declare const DotIconCounter: Story;

package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.js

@@ -1,88 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { icons24 } from '@itcase/icons-default';
 import { Badge } from '../Badge';
 const meta = {
-    title: 'Atoms / Badge / Dot + Icon + Counter',
+    title: 'Atoms / Badge',
     component: Badge,
     args: {
+        appearance: 'accentPrimary sizeXXL solid rounded',
+        dataTestId: 'badgeDotIconCounterTestId',
         dot: true,
         icon: icons24.Placeholder.Default,
         value: 3,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=0-1&t=n7EGLyP33amnXKYl-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
-export const Accent = {
-    args: {
-        appearance: 'accentPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Special = {
-    args: {
-        appearance: 'specialPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Extra = {
-    args: {
-        appearance: 'extraPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Surface = {
-    args: {
-        appearance: 'surfacePrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Success = {
-    args: {
-        appearance: 'successPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Warning = {
-    args: {
-        appearance: 'warningPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Danger = {
-    args: {
-        appearance: 'dangerPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Info = {
-    args: {
-        appearance: 'infoPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Disabled = {
-    args: {
-        appearance: 'disabledPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
+export const DotIconCounter = {
+    name: 'Dot + Icon + Counter',
+    play: async ({ args, canvas, step }) => {
+        await step('Badge: dot, icon and counter', async () => {
+            const badge = canvas.getByTestId(args.dataTestId);
+            await step(`Badge has class "badge_type_dot-icon-counter"`, async () => {
+                await storybookTest
+                    .expect(badge)
+                    .toHaveClass('badge_type_dot-icon-counter');
+            });
+            await step(`Badge has counter value is ${args.value}`, async () => {
+                await storybookTest.expect(badge).toHaveTextContent(String(args.value));
+            });
+            await step('Badge has icon', async () => {
+                await storybookTest.expect(badge.querySelector('.icon')).toBeTruthy();
+            });
+            await step('Badge has dot', async () => {
+                await storybookTest
+                    .expect(badge.querySelector('.badge__dot'))
+                    .toBeTruthy();
+            });
+        });
+    },
+    render: (args) => _jsx(Badge, { ...args }),
 };

package/dist/types/components/DatePicker/DatePicker.interface.d.ts

@@ -6,14 +6,13 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import { ButtonProps } from 'src/components/Button/Button.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { InputProps } from 'src/components/Input/Input.interface';
-import { LabelProps } from 'src/components/Label/Label.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
 type DatePickerInputAppearanceProps = {
     appearance?: CompositeAppearanceKeys;
-    clearLabel?: LabelProps['label'];
-    clearLabelTextColor?: LabelProps['labelTextColor'];
-    clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
-    clearLabelTextSize?: TextSizeProps;
+    clearButton?: ButtonProps['label'];
+    clearButtonAppearance?: ButtonProps['appearance'];
+    clearIcon?: IconProps['SvgImage'];
+    clearIconAppearance?: IconProps['appearance'];
     daySize?: ButtonProps['size'];
     dayTextColor?: ButtonProps['labelTextColor'];
     dayTextShape?: ButtonProps['shape'];
@@ -40,32 +39,12 @@ type DatePickerInputAppearanceProps = {
     yearTextSize?: TextProps['size'];
     yearTextWeight?: TextProps['textWeight'];
 };
-type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
-    className?: string;
-    dataTestId?: string;
-    dataTour?: string;
-    datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
-        selectsRange?: boolean;
-    };
-    endValue?: string | Date | DateIso;
-    onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
-    popperPlacement?: ReactNode;
-    value?: string | Date | DateIso;
-};
 type DatePickerCustomInput = {
+    clearButton?: ButtonProps['label'];
+    clearButtonAppearance?: ButtonProps['appearance'];
     clearIcon?: IconProps['SvgImage'];
-    clearIconFill?: IconProps['fill'];
-    clearIconFillHover?: IconProps['fillHover'];
-    clearIconFillSize?: IconProps['fillSize'];
-    clearIconItemFill?: IconProps['iconFill'];
-    clearIconItemFillHover?: IconProps['iconFillHover'];
-    clearIconShape?: IconProps['shape'];
-    clearIconSize?: IconProps['size'];
+    clearIconAppearance?: IconProps['appearance'];
     clearIconSrc?: IconProps['imageSrc'];
-    clearLabel?: LabelProps['label'];
-    clearLabelTextColor?: LabelProps['labelTextColor'];
-    clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
-    clearLabelTextSize?: LabelProps['labelTextSize'];
     datepickerRef?: RefObject<DatePicker | null>;
     inputIcon?: IconProps['SvgImage'];
     inputIconFill?: IconProps['fill'];
@@ -80,6 +59,21 @@ type DatePickerCustomInput = {
     labelTextSize?: TextSizeProps;
     value?: string;
 };
+type DatePickerInputClearProps = Pick<DatePickerCustomInput, 'clearButton' | 'clearButtonAppearance' | 'clearIcon' | 'clearIconAppearance' | 'clearIconSrc'>;
+type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
+    className?: string;
+    dataTestId?: string;
+    dataTour?: string;
+    datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
+        isClearable?: boolean;
+        selectsRange?: boolean;
+    };
+    endValue?: string | Date | DateIso;
+    inputProps?: DatePickerInputClearProps & InputProps;
+    onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
+    popperPlacement?: ReactNode;
+    value?: string | Date | DateIso;
+};
 type DatePickerInputIcon = {
     inputIcon?: IconProps['SvgImage'];
     inputIconFill?: IconProps['fill'];

package/dist/types/components/DatePicker/DatePicker.js

@@ -7,7 +7,6 @@ import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcas
 import { Button } from 'src/components/Button';
 import { Icon } from 'src/components/Icon';
 import { Input } from 'src/components/Input';
-import { Label } from 'src/components/Label';
 import { Text } from 'src/components/Text';
 import { datePickerAppearance } from './DatePicker.appearance';
 import { getWeekRange } from './DatePicker.utils';
@@ -90,16 +89,16 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && _jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && (_jsx(DatePickerClearButton, { datepickerRef: props.datepickerRef, ...inputProps }))] }));
 });
 function DatePickerClearButton(props) {
-    const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;
+    const { clearButton, clearButtonAppearance, clearIcon, clearIconAppearance, clearIconSrc, datepickerRef, } = props;
     const onClick = useCallback((event) => {
         datepickerRef?.current?.onClearClick(event);
         datepickerRef?.current?.handleFocus(event);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (_jsx(React.Fragment, { children: clearLabel ? (_jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (_jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
+    return (_jsx(React.Fragment, { children: clearButton ? (_jsx(Button, { appearance: clearButtonAppearance, className: clsx('react-datepicker__clear-button', 'cursor_type_pointer'), label: clearButton, onClick: onClick })) : ((clearIcon || clearIconSrc) && (_jsx(Icon, { appearance: clearIconAppearance, className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), imageSrc: clearIconSrc, SvgImage: clearIcon, onClick: onClick }))) }));
 }
 function DatePickerInputIcon(props) {
     const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;

package/dist/types/components/DatePicker/stories/DatePicker.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;
@@ -12,7 +20,8 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Date: Story;
+export declare const Default: Story;
+export declare const WithInitialDate: Story;
 export declare const DateTime: Story;
 export declare const DateRange: Story;
 export declare const DateWeek: Story;

package/dist/types/components/DatePicker/stories/DatePicker.stories.js

@@ -1,82 +1,80 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+        },
+        inputProps: {
+            appearance: 'defaultPrimary sizeM solid rounded',
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
-export const Date = {
+const DatePickerStory = createDatePickerStory(meta.args);
+export const Default = {
+    render: DatePickerStory,
+};
+export const WithInitialDate = {
     args: {
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
+            placeholderText: 'Дата с начальным значением',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const DateTime = {
     args: {
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            dateFormat: 'dd-MM-yyyy hh:mm',
+            dateFormat: 'dd.MM.yyyy HH:mm',
+            placeholderText: 'Дата и время',
             popperPlacement: 'bottom',
             showTimeSelect: true,
             timeCaption: 'Время',
-            timeFormat: 'p',
+            timeFormat: 'HH:mm',
             timeIntervals: 15,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        value: '2025-06-15T14:30:00',
     },
+    render: DatePickerStory,
 };
 export const DateRange = {
     args: {
         width: '360px',
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
             monthsShown: 2,
-            placeholderText: 'Start – End (m/d/yyyy)',
+            placeholderText: 'Начало – конец',
             selectsRange: true,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        endValue: '2025-06-20',
+        value: '2025-06-01',
     },
+    render: DatePickerStory,
 };
 export const DateWeek = {
     args: {
+        width: '360px',
         datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
             dateFormat: 'I неделя',
             monthsShown: 2,
+            placeholderText: 'Выберите неделю',
             readOnly: false,
             selectsRange: true,
             showWeekNumbers: true,
             showWeekPicker: false,
             isClearable: false,
         },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
+        endValue: '2025-06-15',
+        value: '2025-06-09',
     },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerClear.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+            readOnly: false;
+            isClearable: true;
+            onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+        };
     };
     parameters: {
         layout: string;
@@ -13,4 +21,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const ClearIcon: Story;
-export declare const ClearLabel: Story;
+export declare const ClearButton: Story;

package/dist/types/components/DatePicker/stories/DatePickerClear.stories.js

@@ -1,50 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { icons24 } from '@itcase/icons-default';
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / Clear',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+            readOnly: false,
+            isClearable: true,
+            onKeyDown: (event) => event.preventDefault(),
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
 export const ClearIcon = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            readOnly: false,
-            isClearable: true,
-            onKeyDown: (e) => {
-                e.preventDefault();
-            },
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
+            clearIcon: icons24.Action.Clear,
+            clearIconAppearance: 'surfaceTertiary size24_24 ghost circular',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
-export const ClearLabel = {
+export const ClearButton = {
     args: {
         width: '360px',
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-            readOnly: false,
-            isClearable: true,
-            onKeyDown: (e) => {
-                e.preventDefault();
-            },
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeM solid rounded',
+            clearButton: 'Очистить',
+            clearButtonAppearance: 'surfaceSecondary sizeM solid rounded',
         },
+        value: '2025-06-15',
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerSize.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;

package/dist/types/components/DatePicker/stories/DatePickerSize.stories.js

@@ -1,52 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput } from '../DatePicker';
+import { createDatePickerStory } from './DatePickerStory';
 const meta = {
     title: 'Molecules / DatePicker / Size',
     component: DatePickerInput,
     args: {
         width: '220px',
+        datePickerProps: {
+            appearance: 'surfacePrimary sizeM solid rounded',
+            dateFormat: 'dd.MM.yyyy',
+            placeholderText: 'Выберите дату',
+        },
+        inputProps: {
+            appearance: 'defaultPrimary sizeM solid rounded',
+        },
     },
     parameters: {
         layout: 'centered',
     },
 };
 export default meta;
+const DatePickerStory = createDatePickerStory(meta.args);
 export const SizeL = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeL solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const SizeM = {
-    args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
-        inputProps: {
-            appearance: 'defaultPrimary sizeM solid rounded',
-        },
-    },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };
 export const SizeS = {
     args: {
-        datePickerProps: {
-            appearance: 'surfacePrimary sizeM solid rounded',
-        },
         inputProps: {
             appearance: 'defaultPrimary sizeS solid rounded',
         },
     },
-    render: (args) => {
-        return _jsx(DatePickerInput, { ...args });
-    },
+    render: DatePickerStory,
 };

package/dist/types/components/DatePicker/stories/DatePickerStory.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerInputProps } from '../DatePicker.interface';
+export declare function createDatePickerStory(defaultArgs?: Partial<DatePickerInputProps>): (args: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/stories/DatePickerStory.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePickerInput } from '../DatePicker';
+export function createDatePickerStory(defaultArgs = {}) {
+    return function DatePickerStory(args) {
+        const [dates, setDates] = useState(() => ({
+            end: args.endValue ? new Date(args.endValue) : null,
+            start: args.value ? new Date(args.value) : null,
+        }));
+        return (_jsx(DatePickerInput, { ...defaultArgs, ...args, datePickerProps: {
+                ...defaultArgs.datePickerProps,
+                ...args.datePickerProps,
+            }, endValue: dates.end?.toISOString(), inputProps: {
+                ...defaultArgs.inputProps,
+                ...args.inputProps,
+            }, value: dates.start?.toISOString(), onChange: (start, end) => setDates({ end, start }) }));
+    };
+}

package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.d.ts

@@ -5,6 +5,14 @@ declare const meta: {
     component: typeof DatePickerInput;
     args: {
         width: "220px";
+        datePickerProps: {
+            appearance: "surfacePrimary sizeM solid rounded";
+            dateFormat: string;
+            placeholderText: string;
+        };
+        inputProps: {
+            appearance: "defaultPrimary sizeM solid rounded";
+        };
     };
     parameters: {
         layout: string;