@itcase/ui-web 1.9.104 → 1.9.106

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

@@ -10,6 +10,7 @@ type SVGContentProps = StyleAttributes & SVGContentAppearanceProps & {
     className?: string;
     dataTestId?: string;
     dataTour?: string;
+    isSkeleton?: boolean;
     src?: string;
     SvgImage?: ComponentType<SVGProps<SVGSVGElement>> | IconProps['SvgImage'];
 };

package/dist/types/components/SVGContent/SVGContent.js

@@ -5,10 +5,10 @@ import SVG from 'react-inlinesvg';
 import { urlWithAssetPrefix } from '@itcase/ui-core/hoc';
 import { useDevicePropsGenerator, useStyles } from '@itcase/ui-core/hooks';
 const SVGContent = urlWithAssetPrefix(forwardRef(function SVGContent(props, ref) {
-    const { className, dataTestId, dataTour, src, SvgImage } = props;
+    const { className, dataTestId, dataTour, src, SvgImage, isSkeleton } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { svgFillClass, svgFillHoverClass } = propsGenerator;
     const { styles: svgContentStyles } = useStyles(props);
-    return (_jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: svgContentStyles, children: [src && _jsx(SVG, { src: src }), SvgImage && _jsx(SvgImage, {})] }));
+    return (_jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, isSkeleton && 'skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: svgContentStyles, children: [src && _jsx(SVG, { src: src }), SvgImage && _jsx(SvgImage, {})] }));
 }));
 export { SVGContent };

package/dist/types/components/SVGContent/__test__/SVGContentTest.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("@itcase/ui-core/hooks").StyleAttributes & {
+        svgFill?: import("@itcase/types-ui").SvgFillProps;
+        svgFillHover?: import("@itcase/types-ui").SvgFillProps;
+    } & {
+        className?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isSkeleton?: boolean;
+        src?: string;
+        SvgImage?: import("react").ComponentType<import("react").SVGProps<SVGSVGElement>> | import("../../Icon").IconProps["SvgImage"];
+    } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    args: {
+        dataTestId: string;
+        src: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const Children: Story;

package/dist/types/components/SVGContent/__test__/SVGContentTest.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { SVGContent } from '../SVGContent';
+const meta = {
+    title: 'Wrappers / SVGContent / __test__',
+    component: SVGContent,
+    args: {
+        dataTestId: 'sVGContentTestId',
+        src: 'icons/placeholder.svg',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('SVGContent renders with skeleton class', async () => {
+            const sVGContent = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(sVGContent).toBeInTheDocument();
+            await storybookTest.expect(sVGContent).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(SVGContent, { ...args }),
+};
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('SVGContent renders with children s vg', async () => {
+            const sVGContent = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(sVGContent).toBeInTheDocument();
+            const svgContent = sVGContent.querySelector('svg');
+            await storybookTest.expect(svgContent).toBeInTheDocument();
+        });
+    },
+    render: (args) => _jsx(SVGContent, { ...args }),
+};

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

@@ -8,6 +8,7 @@ declare const meta: {
         className?: string;
         dataTestId?: string;
         dataTour?: string;
+        isSkeleton?: boolean;
         src?: string;
         SvgImage?: import("react").ComponentType<import("react").SVGProps<SVGSVGElement>> | import("../../Icon").IconProps["SvgImage"];
     } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Search/Search.appearance.d.ts

@@ -6,16 +6,16 @@ declare const searchAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     disabledPrimary: {
         fill: "surfaceDisabled";

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

@@ -3,6 +3,7 @@ import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSi
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import { TextProps } from '../Text/Text.interface';
 type SearchAppearanceProps = {
     borderColor?: BorderColorProps;
@@ -73,4 +74,6 @@ type SearchAppearance = SearchConfig['appearance'];
 type SearchAppearanceStyle = AppearanceRecord<AppearanceStyleKey, SearchAppearanceProps, Extract<keyof SearchAppearanceProps, 'borderColor' | 'borderColorHover' | 'fill'>>;
 type SearchAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<SearchAppearanceProps, 'shape'>>>>;
 type SearchAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, SearchAppearanceProps, Extract<keyof SearchAppearanceProps, 'iconBefore' | 'iconClear' | 'inputTextSize' | 'placeholderTextSize' | 'size'>>;
-export type { SearchAppearance, SearchAppearanceShape, SearchAppearanceSize, SearchAppearanceStyle, SearchConfig, SearchProps, SearchResultProps, };
+type SearchAppearanceKey = NonNullable<SearchProps['appearance']>;
+type SearchGalleryStory = ComponentGalleryArgs & Pick<SearchProps, 'isDisabled' | 'isSkeleton' | 'placeholder' | 'value'>;
+export type { SearchAppearance, SearchAppearanceKey, SearchAppearanceShape, SearchAppearanceSize, SearchAppearanceStyle, SearchConfig, SearchGalleryStory, SearchProps, SearchResultProps, };

package/dist/types/components/Search/SearchInput.js

@@ -31,7 +31,7 @@ const SearchInput = React.forwardRef(function SearchInput(props, ref) {
                             inputTextWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&
-                            'text', inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextStyleClass && `text-style_${inputTextStyleClass}`), type: "text", ref: ref, required: true, value: value || '', onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx("div", { className: "search-input__placeholder", children: _jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (_jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
+                            'text', inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextStyleClass && `text-style_${inputTextStyleClass}`), type: "text", ref: ref, disabled: isDisabled, required: true, value: value || '', onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx("div", { className: "search-input__placeholder", children: _jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor, textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder }) }), value && (_jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer', isActive && `fill_${iconClearFill}`), size: iconClearSize, iconFill: iconClearFill, imageSrc: iconClearSrc, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: "search-input__icon-after", size: iconAfterSize, iconFill: iconAfterFill, imageSrc: iconAfterSrc, SvgImage: iconAfter })), after] }));
 });
 // @ts-expect-error
 SearchInput.DEFAULT_REF_STATE = {

package/dist/types/components/Search/__test__/SearchInputTest.stories.d.ts

@@ -0,0 +1,70 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
+        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        iconAfterFill?: import("../../Icon").IconProps["iconFill"];
+        iconAfterSize?: import("../../Icon").IconProps["size"];
+        iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBeforeFill?: import("../../Icon").IconProps["iconFill"];
+        iconBeforeSize?: import("../../Icon").IconProps["size"];
+        iconBeforeSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconClear?: import("../../Icon").IconProps["SvgImage"];
+        iconClearFill?: import("../../Icon").IconProps["iconFill"];
+        iconClearSize?: import("../../Icon").IconProps["size"];
+        iconClearSrc?: import("../../Icon").IconProps["imageSrc"];
+        inputFill?: import("@itcase/types-ui").FillProps;
+        inputTextColor?: import("../../Text").TextProps["textColor"];
+        inputTextSize?: import("../../Text").TextProps["size"];
+        inputTextStyle?: import("../../Text").TextProps["textStyle"];
+        inputTextWeight?: import("@itcase/types-ui").TextWeightProps;
+        placeholderTextColor?: import("../../Text").TextProps["textColor"];
+        placeholderTextSize?: import("../../Text").TextProps["size"];
+        placeholderTextStyle?: import("../../Text").TextProps["textStyle"];
+        placeholderTextWeight?: import("../../Text").TextProps["textWeight"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        width?: import("@itcase/types-ui").WidthProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
+        before?: import("react").ReactNode;
+        className?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        isSkeleton?: boolean;
+        onChange?: (targetValue: string) => void;
+        onClickClean?: () => void;
+        onFocus?: (() => void) | undefined;
+        onKeyDown?: (() => void) | undefined;
+        placeholder?: string;
+        style?: import("react").CSSProperties;
+        value?: string;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    args: {
+        appearance: "defaultPrimary sizeXL solid rounded";
+        dataTestId: string;
+        placeholder: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disabled: Story;
+export declare const Filled: Story;
+export declare const Blank: Story;
+export declare const Skeleton: Story;
+export declare const ClearValue: Story;

package/dist/types/components/Search/__test__/SearchInputTest.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { SearchInput } from '..';
+const meta = {
+    title: 'Atoms / Search / __test__',
+    component: SearchInput,
+    args: {
+        appearance: 'defaultPrimary sizeXL solid rounded',
+        dataTestId: 'searchInputTestId',
+        placeholder: 'Placeholder',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Disabled = {
+    play: async ({ args, canvas, step, userEvent }) => {
+        const searchInput = canvas.getByRole('textbox');
+        await step('SearchInput is disabled', async () => {
+            await storybookTest.expect(searchInput).toBeDisabled();
+        });
+        await step('Click does not invoke onClick', async () => {
+            await userEvent.click(searchInput);
+            const onClick = args?.onChange;
+            await storybookTest.expect(onClick).not.toHaveBeenCalled();
+        });
+    },
+    args: {
+        isDisabled: true,
+        onChange: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(SearchInput, { ...args }),
+};
+export const Filled = {
+    play: async ({ args, canvas, step }) => {
+        await step('Filled SearchInput', async () => {
+            const searchInput = canvas.getByRole('textbox');
+            await storybookTest.expect(searchInput).toBeInTheDocument();
+            await storybookTest.expect(searchInput).toHaveValue(args.value);
+        });
+    },
+    args: {
+        value: 'text value',
+    },
+    render: (args) => _jsx(SearchInput, { ...args }),
+};
+export const Blank = {
+    play: async ({ canvas, step }) => {
+        await step('Filled SearchInput', async () => {
+            const searchInput = canvas.getByRole('textbox');
+            await storybookTest.expect(searchInput).toBeInTheDocument();
+            await storybookTest.expect(searchInput).not.toHaveValue();
+        });
+    },
+    render: (args) => _jsx(SearchInput, { ...args }),
+};
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('SearchInput renders with skeleton class', async () => {
+            const searchInput = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(searchInput).toBeInTheDocument();
+            await storybookTest.expect(searchInput).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(SearchInput, { ...args }),
+};
+export const ClearValue = {
+    play: async ({ args, canvas, step }) => {
+        await step('SearchInput clear button clears value in field', async () => {
+            const searchInput = canvas.getByTestId(args.dataTestId);
+            await step('Fill of SearchInput field', async () => {
+                await storybookTest.expect(searchInput).toBeInTheDocument();
+                await storybookTest.userEvent.type(searchInput, 'new value');
+            });
+            await step('Clear Value in field', async () => {
+                const clearButton = searchInput.querySelector('.search-input__clear');
+                await storybookTest.userEvent.click(clearButton);
+                await storybookTest.expect(searchInput).not.toHaveValue();
+            });
+        });
+    },
+    render: (args) => _jsx(SearchInput, { ...args }),
+};

package/dist/types/components/Search/appearance/searchShape.d.ts

@@ -6,16 +6,16 @@ declare const searchAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { searchAppearanceShape };

package/dist/types/components/Search/appearance/searchShape.js

@@ -6,16 +6,16 @@ const searchAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { searchAppearanceShape };

package/dist/types/components/Search/stories/SearchInputDefault.stories.d.ts

@@ -52,7 +52,7 @@ declare const meta: {
         value?: string;
     } & import("react").RefAttributes<HTMLInputElement>>;
     args: {
-        appearance: "defaultPrimary sizeXXL";
+        appearance: "defaultPrimary sizeXXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Search/stories/SearchInputDefault.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Search / Default',
     component: SearchInput,
     args: {
-        appearance: 'defaultPrimary sizeXXL',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Search/stories/SearchInputDemo.stories.d.ts

@@ -1,65 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        borderColor?: import("@itcase/types-ui").BorderColorProps;
-        borderColorHover?: import("@itcase/types-ui").BorderColorHoverProps;
-        borderHover?: import("@itcase/types-ui").BorderColorHoverProps;
-        borderType?: import("@itcase/types-ui").BorderTypeProps;
-        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
-        fill?: import("@itcase/types-ui").FillProps;
-        fillHover?: import("@itcase/types-ui").FillHoverProps;
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
-        iconAfterFill?: import("../../Icon").IconProps["iconFill"];
-        iconAfterSize?: import("../../Icon").IconProps["size"];
-        iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
-        iconBeforeFill?: import("../../Icon").IconProps["iconFill"];
-        iconBeforeSize?: import("../../Icon").IconProps["size"];
-        iconBeforeSrc?: import("../../Icon").IconProps["imageSrc"];
-        iconClear?: import("../../Icon").IconProps["SvgImage"];
-        iconClearFill?: import("../../Icon").IconProps["iconFill"];
-        iconClearSize?: import("../../Icon").IconProps["size"];
-        iconClearSrc?: import("../../Icon").IconProps["imageSrc"];
-        inputFill?: import("@itcase/types-ui").FillProps;
-        inputTextColor?: import("../../Text").TextProps["textColor"];
-        inputTextSize?: import("../../Text").TextProps["size"];
-        inputTextStyle?: import("../../Text").TextProps["textStyle"];
-        inputTextWeight?: import("@itcase/types-ui").TextWeightProps;
-        placeholderTextColor?: import("../../Text").TextProps["textColor"];
-        placeholderTextSize?: import("../../Text").TextProps["size"];
-        placeholderTextStyle?: import("../../Text").TextProps["textStyle"];
-        placeholderTextWeight?: import("../../Text").TextProps["textWeight"];
-        shape?: import("@itcase/types-ui").ShapeProps;
-        size?: import("@itcase/types-ui").SizeProps;
-        width?: import("@itcase/types-ui").WidthProps;
-    } & import("@itcase/ui-core/hooks").StyleAttributes & {
-        after?: import("react").ReactNode;
-        appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
-        before?: import("react").ReactNode;
-        className?: string;
-        dataTestId?: string;
-        dataTour?: string;
-        isActive?: boolean;
-        isDisabled?: boolean;
-        isSkeleton?: boolean;
-        onChange?: (targetValue: string) => void;
-        onClickClean?: () => void;
-        onFocus?: (() => void) | undefined;
-        onKeyDown?: (() => void) | undefined;
-        placeholder?: string;
-        style?: import("react").CSSProperties;
-        value?: string;
-    } & import("react").RefAttributes<HTMLInputElement>>;
-    args: {
-        appearance: "defaultPrimary sizeXXL";
-        placeholder: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { SearchGalleryStory } from '../Search.interface';
+declare const meta: Meta<SearchGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<SearchGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Search/stories/SearchInputDemo.stories.js

@@ -1,27 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
 import { SearchInput } from '..';
+import { searchAppearanceDefault } from '../appearance/searchDefault';
+import { searchAppearanceDisabled } from '../appearance/searchDisabled';
+import { searchAppearanceError } from '../appearance/searchError';
+import { searchAppearanceRequire } from '../appearance/searchRequire';
+import { searchAppearanceShape } from '../appearance/searchShape';
+import { searchAppearanceSize } from '../appearance/searchSize';
+import { searchAppearanceStyle } from '../appearance/searchStyle';
+import { searchAppearanceSuccess } from '../appearance/searchSuccess';
+const gallery = createComponentGallery({
+    size: searchAppearanceSize,
+    appearanceGroups: {
+        default: searchAppearanceDefault,
+        disabled: searchAppearanceDisabled,
+        error: searchAppearanceError,
+        require: searchAppearanceRequire,
+        success: searchAppearanceSuccess,
+    },
+    shape: searchAppearanceShape,
+    style: searchAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Search',
     component: SearchInput,
     args: {
-        appearance: 'defaultPrimary sizeXXL',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         placeholder: 'Search',
+        value: '',
+        isDisabled: false,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
+    },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        return _jsx(SearchInput, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(SearchInput, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(SearchInput, { appearance: appearance, placeholder: storyArgs.placeholder, value: storyArgs.value, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Search/stories/SearchInputDisabled.stories.d.ts

@@ -52,7 +52,7 @@ declare const meta: {
         value?: string;
     } & import("react").RefAttributes<HTMLInputElement>>;
     args: {
-        appearance: "disabledPrimary sizeXXL";
+        appearance: "disabledPrimary sizeXXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Search/stories/SearchInputDisabled.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Search / Disabled',
     component: SearchInput,
     args: {
-        appearance: 'disabledPrimary sizeXXL',
+        appearance: 'disabledPrimary sizeXXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Search/stories/SearchInputError.stories.d.ts

@@ -52,7 +52,7 @@ declare const meta: {
         value?: string;
     } & import("react").RefAttributes<HTMLInputElement>>;
     args: {
-        appearance: "errorPrimary sizeXXL";
+        appearance: "errorPrimary sizeXXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Search/stories/SearchInputError.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Search / Error',
     component: SearchInput,
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Search/stories/SearchInputRequire.stories.d.ts

@@ -52,7 +52,7 @@ declare const meta: {
         value?: string;
     } & import("react").RefAttributes<HTMLInputElement>>;
     args: {
-        appearance: "requirePrimary sizeXXL";
+        appearance: "requirePrimary sizeXXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Search/stories/SearchInputRequire.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Search / Require',
     component: SearchInput,
     args: {
-        appearance: 'requirePrimary sizeXXL',
+        appearance: 'requirePrimary sizeXXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Search/stories/SearchInputShape.stories.d.ts

@@ -52,7 +52,7 @@ declare const meta: {
         value?: string;
     } & import("react").RefAttributes<HTMLInputElement>>;
     args: {
-        appearance: "defaultPrimary sizeXXL";
+        appearance: "defaultPrimary sizeXXL solid rounded";
         placeholder: string;
     };
     parameters: {

package/dist/types/components/Search/stories/SearchInputShape.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Search / Shape',
     component: SearchInput,
     args: {
-        appearance: 'defaultPrimary sizeXXL',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
         placeholder: 'Search',
     },
     parameters: {

package/dist/types/components/Search/stories/SearchInputSize.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const SizeXXL = {
     args: {
-        appearance: 'defaultPrimary sizeXXL',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -21,7 +21,7 @@ export const SizeXXL = {
 };
 export const SizeXL = {
     args: {
-        appearance: 'defaultPrimary sizeXL',
+        appearance: 'defaultPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -29,7 +29,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -37,7 +37,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -45,7 +45,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'defaultPrimary sizeS',
+        appearance: 'defaultPrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -53,7 +53,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'defaultPrimary sizeXS',
+        appearance: 'defaultPrimary sizeXS solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });