@itcase/ui-web 1.9.104 → 1.9.106

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

@@ -18,20 +18,20 @@ declare const paginationAppearance: {
         pageCountDropdownShape: "rounded";
     };
     roundedXL: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedXL";
+        pageCountDropdownShape: "roundedXL";
     };
     roundedL: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedL";
+        pageCountDropdownShape: "roundedL";
     };
     roundedM: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedM";
+        pageCountDropdownShape: "roundedM";
     };
     roundedS: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedS";
+        pageCountDropdownShape: "roundedS";
     };
     sizeL: {
         size: "l";

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

@@ -5,6 +5,7 @@ import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { DropdownItemProps, DropdownProps } from 'src/components/Dropdown/Dropdown.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type PaginationAppearanceProps = {
     borderColor?: BorderColorProps;
     builderIcon?: IconProps['SvgImage'];
@@ -107,4 +108,6 @@ type PaginationAppearance = PaginationConfig['appearance'];
 type PaginationAppearanceStyle = AppearanceRecord<AppearanceStyleKey, PaginationAppearanceProps, 'borderColor' | 'fill'>;
 type PaginationAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, PaginationAppearanceProps, 'fillInputShape' | 'pageCountDropdownShape' | 'shape'>;
 type PaginationAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, PaginationAppearanceProps, 'builderIcon' | 'labelTextSize' | 'nextIcon' | 'pageCountDescTextSize' | 'pageCountDropdownItemDividerSize' | 'pageCountDropdownItemLabelSize' | 'pageCountDropdownItemSize' | 'pageCountDropdownItemWidth' | 'pageCountInputIcon' | 'pageCountInputIconFillSize' | 'pageCountInputTextSize' | 'previousIcon' | 'size' | 'textSize'>;
-export type { PaginationAppearance, PaginationAppearanceShape, PaginationAppearanceSize, PaginationAppearanceStyle, PaginationConfig, PaginationProps, };
+type PaginationAppearanceKey = NonNullable<PaginationProps['appearance']>;
+type PaginationGalleryStory = ComponentGalleryArgs & Pick<PaginationProps, 'allItemsCount' | 'isPageCount' | 'onChangePage' | 'onChangePerPageCount' | 'pageNumber' | 'perPageCount'>;
+export type { PaginationAppearance, PaginationAppearanceKey, PaginationAppearanceShape, PaginationAppearanceSize, PaginationAppearanceStyle, PaginationConfig, PaginationGalleryStory, PaginationProps, };

package/dist/types/components/Pagination/appearance/paginationShape.d.ts

@@ -7,20 +7,20 @@ declare const paginationAppearanceShape: {
         pageCountDropdownShape: "rounded";
     };
     roundedXL: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedXL";
+        pageCountDropdownShape: "roundedXL";
     };
     roundedL: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedL";
+        pageCountDropdownShape: "roundedL";
     };
     roundedM: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedM";
+        pageCountDropdownShape: "roundedM";
     };
     roundedS: {
-        fillInputShape: "rounded";
-        pageCountDropdownShape: "rounded";
+        fillInputShape: "roundedS";
+        pageCountDropdownShape: "roundedS";
     };
 };
 export { paginationAppearanceShape };

package/dist/types/components/Pagination/appearance/paginationShape.js

@@ -7,20 +7,20 @@ const paginationAppearanceShape = {
         pageCountDropdownShape: 'rounded',
     },
     roundedXL: {
-        fillInputShape: 'rounded',
-        pageCountDropdownShape: 'rounded',
+        fillInputShape: 'roundedXL',
+        pageCountDropdownShape: 'roundedXL',
     },
     roundedL: {
-        fillInputShape: 'rounded',
-        pageCountDropdownShape: 'rounded',
+        fillInputShape: 'roundedL',
+        pageCountDropdownShape: 'roundedL',
     },
     roundedM: {
-        fillInputShape: 'rounded',
-        pageCountDropdownShape: 'rounded',
+        fillInputShape: 'roundedM',
+        pageCountDropdownShape: 'roundedM',
     },
     roundedS: {
-        fillInputShape: 'rounded',
-        pageCountDropdownShape: 'rounded',
+        fillInputShape: 'roundedS',
+        pageCountDropdownShape: 'roundedS',
     },
 };
 export { paginationAppearanceShape };

package/dist/types/components/Pagination/stories/PaginationDefault.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const AccentPrimary = {
     args: {
-        appearance: 'accentPrimary sizeM',
+        appearance: 'accentPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -24,7 +24,7 @@ export const AccentPrimary = {
 };
 export const SurfacePrimary = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });

package/dist/types/components/Pagination/stories/PaginationDemo.stories.d.ts

@@ -1,21 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Pagination } from '..';
-declare const meta: {
-    title: string;
-    component: typeof Pagination;
-    args: {
-        appearance: "surfacePrimary sizeM";
-        allItemsCount: number;
-        marginPagesDisplayed: number;
-        pageNumber: number;
-        pageRangeDisplayed: number;
-        perPageCount: number;
-        isPageCount: true;
-        onChangePage: () => void;
-        onChangePerPageCount: () => void;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { PaginationGalleryStory } from '../Pagination.interface';
+declare const meta: Meta<PaginationGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PaginationGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Pagination/stories/PaginationDemo.stories.js

@@ -1,45 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
-import { Pagination } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { paginationAppearanceAccent } from '../appearance/paginationAccent';
+import { paginationAppearanceShape } from '../appearance/paginationShape';
+import { paginationAppearanceSize } from '../appearance/paginationSize';
+import { paginationAppearanceStyle } from '../appearance/paginationStyle';
+import { paginationAppearanceSurface } from '../appearance/paginationSurface';
+import { Pagination } from '../Pagination';
+const gallery = createComponentGallery({
+    size: paginationAppearanceSize,
+    appearanceGroups: {
+        accent: paginationAppearanceAccent,
+        surface: paginationAppearanceSurface,
+    },
+    shape: paginationAppearanceShape,
+    style: paginationAppearanceStyle,
+});
 const meta = {
     title: 'Molecules / Pagination',
     component: Pagination,
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         allItemsCount: 200,
-        marginPagesDisplayed: 3,
         pageNumber: 1,
-        pageRangeDisplayed: 3,
         perPageCount: 5,
         isPageCount: true,
         onChangePage: () => { },
         onChangePerPageCount: () => { },
     },
+    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) => {
-        const [pageNumber, setPageNumber] = React.useState(1);
-        const [perPageCount, setPerPageCount] = React.useState(5);
-        const [allItemsCount, setAllItemsCount] = React.useState(100);
-        const valuesList = React.useMemo(() => {
-            return Array.from({ length: allItemsCount })
-                .fill(null)
-                .map((_, index) => index + 1);
-        }, [allItemsCount]);
-        return (_jsxs(React.Fragment, { children: [_jsx("div", { children: JSON.stringify({ allItemsCount, pageNumber, perPageCount }) }), _jsx("button", { onClick: () => setAllItemsCount(100), children: "set allItemsCount to 100" }), _jsx("button", { onClick: () => setAllItemsCount(200), children: "set allItemsCount to 200" }), _jsx(Pagination, { ...args, allItemsCount: allItemsCount, pageCountList: [5, 10, 20, 50], pageNumber: pageNumber, perPageCount: perPageCount, onChangePage: ({ selected }) => {
-                        setPageNumber(selected + 1);
-                    }, onChangePerPageCount: setPerPageCount }), valuesList
-                    .slice((pageNumber - 1) * perPageCount, (pageNumber - 1) * perPageCount + perPageCount)
-                    .map((value) => (_jsxs("div", { children: ["Item #", value] }, value)))] }));
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Pagination, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Pagination, { appearance: appearance, allItemsCount: storyArgs.allItemsCount, pageNumber: storyArgs.pageNumber, perPageCount: storyArgs.perPageCount, isPageCount: storyArgs.isPageCount, onChangePage: storyArgs.onChangePage, onChangePerPageCount: storyArgs.onChangePerPageCount }))),
 };

package/dist/types/components/Pagination/stories/PaginationDot.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const AccentPrimary = {
     args: {
-        appearance: 'accentPrimary sizeM',
+        appearance: 'accentPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -24,7 +24,7 @@ export const AccentPrimary = {
 };
 export const SurfacePrimary = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });

package/dist/types/components/Pagination/stories/PaginationNumber.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -24,7 +24,7 @@ export const Default = {
 };
 export const WithCount = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
         isPageCount: true,
     },
     render: (args) => {

package/dist/types/components/Pagination/stories/PaginationSize.stories.js

@@ -17,7 +17,7 @@ const meta = {
 export default meta;
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL',
+        appearance: 'surfacePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -25,7 +25,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -33,7 +33,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS',
+        appearance: 'surfacePrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });
@@ -41,7 +41,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'surfacePrimary sizeXS',
+        appearance: 'surfacePrimary sizeXS solid rounded',
     },
     render: (args) => {
         return _jsx(Pagination, { ...args });

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

@@ -27,16 +27,16 @@ declare const radioAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     sizeM: {
         size: "m";

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

@@ -3,6 +3,7 @@ import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSi
 import type { AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type RadioAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorHover?: BorderColorHoverProps;
@@ -47,4 +48,6 @@ type RadioAppearance = RadioConfig['appearance'];
 type RadioAppearanceStyle = AppearanceRecord<AppearanceStyleKey, RadioAppearanceProps, Extract<keyof RadioAppearanceProps, 'borderColor' | 'borderColorHover' | 'borderRadioColor' | 'borderRadioColorActive' | 'borderRadioColorActiveHover' | 'borderRadioColorHover' | 'fill' | 'fillHover'>>;
 type RadioAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<RadioAppearanceProps, 'shape'>>>>;
 type RadioAppearanceSize = Partial<Record<AppearanceSizeKey, Partial<Pick<RadioAppearanceProps, 'descTextSize' | 'labelTextSize' | 'size'>>>>;
-export type { RadioAppearance, RadioAppearanceShape, RadioAppearanceSize, RadioAppearanceStyle, RadioConfig, RadioProps, };
+type RadioAppearanceKey = NonNullable<RadioProps['appearance']>;
+type RadioGalleryStory = ComponentGalleryArgs & Pick<RadioProps, 'checked' | 'desc' | 'isDisabled' | 'isSkeleton' | 'label'>;
+export type { RadioAppearance, RadioAppearanceKey, RadioAppearanceShape, RadioAppearanceSize, RadioAppearanceStyle, RadioConfig, RadioGalleryStory, RadioProps, };

package/dist/types/components/Radio/appearance/radioShape.d.ts

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

package/dist/types/components/Radio/appearance/radioShape.js

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

package/dist/types/components/Radio/stories/RadioDefault.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";

package/dist/types/components/Radio/stories/RadioDefault.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Radio / Default',
     component: Radio,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
         label: 'Radio',
         desc: 'Description',
         shape: 'circular',

package/dist/types/components/Radio/stories/RadioDemo.stories.d.ts

@@ -1,19 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Radio } from '../Radio';
-declare const meta: {
-    title: string;
-    component: typeof Radio;
-    args: {
-        appearance: "defaultPrimary sizeM";
-        label: string;
-        desc: string;
-        shape: "circular";
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { RadioGalleryStory } from '../Radio.interface';
+declare const meta: Meta<RadioGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<RadioGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Radio/stories/RadioDemo.stories.js

@@ -1,32 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { radioAppearanceDefault } from '../appearance/radioDefault';
+import { radioAppearanceDisabled } from '../appearance/radioDisabled';
+import { radioAppearanceError } from '../appearance/radioError';
+import { radioAppearanceRequire } from '../appearance/radioRequire';
+import { radioAppearanceShape } from '../appearance/radioShape';
+import { radioAppearanceSize } from '../appearance/radioSize';
+import { radioAppearanceStyle } from '../appearance/radioStyle';
+import { radioAppearanceSuccess } from '../appearance/radioSuccess';
 import { Radio } from '../Radio';
+const gallery = createComponentGallery({
+    size: radioAppearanceSize,
+    appearanceGroups: {
+        default: radioAppearanceDefault,
+        disabled: radioAppearanceDisabled,
+        error: radioAppearanceError,
+        require: radioAppearanceRequire,
+        success: radioAppearanceSuccess,
+    },
+    shape: radioAppearanceShape,
+    style: radioAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Radio',
     component: Radio,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'circular',
         label: 'Radio',
         desc: 'Description',
-        shape: 'circular',
+        checked: true,
+        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 = {
-    args: {
-        checked: true,
-    },
-    render: (args) => {
-        return _jsx(Radio, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Radio, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Radio, { appearance: appearance, label: storyArgs.label, desc: storyArgs.desc || undefined, checked: storyArgs.checked, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Radio/stories/RadioDisabled.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "disabledPrimary sizeM";
+        appearance: "disabledPrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";

package/dist/types/components/Radio/stories/RadioDisabled.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Radio / Disabled',
     component: Radio,
     args: {
-        appearance: 'disabledPrimary sizeM',
+        appearance: 'disabledPrimary sizeM solid rounded',
         label: 'Radio',
         desc: 'Description',
         shape: 'circular',

package/dist/types/components/Radio/stories/RadioError.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "errorPrimary sizeM";
+        appearance: "errorPrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";

package/dist/types/components/Radio/stories/RadioError.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Radio / Error',
     component: Radio,
     args: {
-        appearance: 'errorPrimary sizeM',
+        appearance: 'errorPrimary sizeM solid rounded',
         label: 'Radio',
         desc: 'Description',
         shape: 'circular',

package/dist/types/components/Radio/stories/RadioRequire.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "requirePrimary sizeM";
+        appearance: "requirePrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";

package/dist/types/components/Radio/stories/RadioRequire.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Radio / Require',
     component: Radio,
     args: {
-        appearance: 'requirePrimary sizeM',
+        appearance: 'requirePrimary sizeM solid rounded',
         label: 'Radio',
         desc: 'Description',
         shape: 'circular',

package/dist/types/components/Radio/stories/RadioSize.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
         checked: true,
     },
     render: (args) => {
@@ -24,7 +24,7 @@ export const SizeM = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'defaultPrimary sizeXS',
+        appearance: 'defaultPrimary sizeXS solid rounded',
         checked: true,
     },
     render: (args) => {
@@ -33,7 +33,7 @@ export const SizeXS = {
 };
 export const SizeXXS = {
     args: {
-        appearance: 'defaultPrimary sizeXXS',
+        appearance: 'defaultPrimary sizeXXS solid rounded',
         checked: true,
     },
     render: (args) => {

package/dist/types/components/Radio/stories/RadioState.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";

package/dist/types/components/Radio/stories/RadioState.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Radio / State',
     component: Radio,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
         label: 'Radio',
         desc: 'Description',
         shape: 'circular',

package/dist/types/components/Radio/stories/RadioStyle.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'defaultPrimary sizeM solid',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Radio, { ...args });
@@ -23,7 +23,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'defaultPrimary sizeM outlined',
+        appearance: 'defaultPrimary sizeM outlined rounded',
     },
     render: (args) => {
         return _jsx(Radio, { ...args });
@@ -31,7 +31,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'defaultPrimary sizeM full',
+        appearance: 'defaultPrimary sizeM full rounded',
     },
     render: (args) => {
         return _jsx(Radio, { ...args });
@@ -39,7 +39,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'defaultPrimary sizeM ghost',
+        appearance: 'defaultPrimary sizeM ghost rounded',
     },
     render: (args) => {
         return _jsx(Radio, { ...args });

package/dist/types/components/Radio/stories/RadioSuccess.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Radio;
     args: {
-        appearance: "successPrimary sizeM";
+        appearance: "successPrimary sizeM solid rounded";
         label: string;
         desc: string;
         shape: "circular";