@itcase/ui-web 1.9.104 → 1.9.106

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

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'defaultPrimary sizeXXL solid',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -21,7 +21,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'defaultPrimary sizeXXL outlined',
+        appearance: 'defaultPrimary sizeXXL outlined rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -29,7 +29,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'defaultPrimary sizeXXL ghost',
+        appearance: 'defaultPrimary sizeXXL ghost rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });
@@ -37,7 +37,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'defaultPrimary sizeXXL full',
+        appearance: 'defaultPrimary sizeXXL full rounded',
     },
     render: (args) => {
         return _jsx(SearchInput, { ...args });

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

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

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

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

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

@@ -1,23 +1,22 @@
 declare const segmentedAppearance: {
     requirePrimary: {
         fill: "warningTertiary";
-        fillActive: "accentPrimary";
-        fillActiveHover: "accentPrimary";
+        fillActive: "warningPrimary";
+        fillActiveHover: "warningPrimary";
         fillHover: "warningSecondary";
         labelTextActiveColor: "warningTextPrimary";
-        labelTextColor: "warningTextPrimary";
+        labelTextColor: "warningTextSecondary";
         labelTextColorHover: "warningTextSecondary";
         borderColor: "warningBorderSecondary";
         iconFill: "warningItemSecondary";
-        iconFillActive: "warningItemTertiary";
     };
     defaultPrimary: {
         fill: "surfacePrimary";
         fillActive: "accentPrimary";
-        fillActiveHover: "accentActiveHoverPrimary";
+        fillActiveHover: "accentPrimary";
         fillHover: "surfaceHoverSecondary";
         labelTextActiveColor: "accentTextPrimary";
-        labelTextActiveColorHover: "accentTextActiveHoverPrimary";
+        labelTextActiveColorHover: "accentTextPrimary";
         labelTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderQuaternary";
         iconFill: "surfaceItemQuaternary";
@@ -40,18 +39,21 @@ declare const segmentedAppearance: {
     successPrimary: {
         fill: "successTertiary";
         fillActive: "successSecondary";
+        fillActiveHover: "successSecondary";
         fillHover: "successSecondary";
         labelTextActiveColor: "successTextPrimary";
-        labelTextColor: "successTextSecondary";
+        labelTextActiveColorHover: "successTextPrimary";
+        labelTextColor: "successTextQuaternary";
         labelTextColorHover: "successTextPrimary";
         borderColor: "successBorderSecondary";
         iconFill: "successItemSecondary";
+        indicatorFill: "accentPrimary";
     };
     errorPrimary: {
         fill: "errorTertiary";
         fillActive: "errorPrimary";
         fillHover: "errorHoverPrimary";
-        labelTextActiveColor: "errorTextActivePrimary";
+        labelTextActiveColor: "errorTextPrimary";
         labelTextColor: "errorTextSecondary";
         labelTextColorHover: "errorTextPrimary";
         borderColor: "errorBorderQuaternary";
@@ -78,16 +80,16 @@ declare const segmentedAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     sizeL: {
         size: "l";

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

@@ -3,6 +3,7 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type SegmentedAppearanceProps = {
     borderColor?: BorderColorProps;
     borderType?: BorderTypeProps;
@@ -55,4 +56,6 @@ type SegmentedAppearance = SegmentedConfig['appearance'];
 type SegmentedAppearanceStyle = AppearanceRecord<AppearanceStyleKey, SegmentedAppearanceProps, 'borderColor' | 'fill' | 'fillActive'>;
 type SegmentedAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, SegmentedAppearanceProps, 'shape'>;
 type SegmentedAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, SegmentedAppearanceProps, 'iconSize' | 'labelTextSize' | 'size'>;
-export type { Segment, SegmentedAppearance, SegmentedAppearanceShape, SegmentedAppearanceSize, SegmentedAppearanceStyle, SegmentedConfig, SegmentedProps, };
+type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>;
+type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'isDisabled' | 'isSkeleton' | 'segments'>;
+export type { Segment, SegmentedAppearance, SegmentedAppearanceKey, SegmentedAppearanceShape, SegmentedAppearanceSize, SegmentedAppearanceStyle, SegmentedConfig, SegmentedGalleryStory, SegmentedProps, };

package/dist/types/components/Segmented/__test__/SegmentedTest.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import type { SegmentedProps } from '../Segmented.interface';
+declare const meta: {
+    title: string;
+    component: (props: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        appearance: "defaultPrimary sizeL solid rounded";
+        dataTestId: string;
+        activeSegment: {
+            value: string;
+        };
+        segments: {
+            label: string;
+            value: string;
+        }[];
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disabled: Story;
+export declare const Skeleton: Story;
+export declare const WithIcon: Story;

package/dist/types/components/Segmented/__test__/SegmentedTest.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Segmented } from '..';
+import { segmentedIconMock, segmentedLabelMock } from '../stories/__mock__';
+const meta = {
+    title: 'Atoms / Segmented / __test__',
+    component: Segmented,
+    args: {
+        appearance: 'defaultPrimary sizeL solid rounded',
+        dataTestId: 'segmentedTestId',
+        activeSegment: { value: '0' },
+        segments: segmentedLabelMock,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Disabled = {
+    play: async ({ args, canvas, step, userEvent }) => {
+        const segmented = canvas.getByTestId(args.dataTestId);
+        await step('Segmented items is disabled', async () => {
+            const segmentedItems = segmented.querySelectorAll('.segmented__item');
+            segmentedItems.forEach((segmented) => {
+                storybookTest
+                    .expect(segmented)
+                    .toHaveClass('segmented__item_state_disabled');
+            });
+        });
+        await step('Click does not invoke onClick', async () => {
+            await userEvent.click(segmented);
+            const setActiveSegment = args?.setActiveSegment;
+            await storybookTest.expect(setActiveSegment).not.toHaveBeenCalled();
+        });
+    },
+    args: {
+        isDisabled: true,
+        setActiveSegment: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(Segmented, { ...args }),
+};
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Segmented renders with skeleton class', async () => {
+            const segmented = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(segmented).toBeInTheDocument();
+            await storybookTest.expect(segmented).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Segmented, { ...args }),
+};
+export const WithIcon = {
+    play: async ({ args, canvas, step }) => {
+        await step('Segmented with icon in DOM', async () => {
+            const segmented = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(segmented).toBeInTheDocument();
+            const iconEl = segmented.querySelector('.segmented__item_icon');
+            await storybookTest.expect(iconEl).toBeTruthy();
+            await storybookTest.expect(iconEl).toBeInTheDocument();
+        });
+    },
+    args: {
+        segments: segmentedIconMock,
+    },
+    render: (args) => _jsx(Segmented, { ...args }),
+};

package/dist/types/components/Segmented/appearance/segmentedDefault.d.ts

@@ -2,10 +2,10 @@ declare const segmentedAppearanceDefault: {
     defaultPrimary: {
         fill: "surfacePrimary";
         fillActive: "accentPrimary";
-        fillActiveHover: "accentActiveHoverPrimary";
+        fillActiveHover: "accentPrimary";
         fillHover: "surfaceHoverSecondary";
         labelTextActiveColor: "accentTextPrimary";
-        labelTextActiveColorHover: "accentTextActiveHoverPrimary";
+        labelTextActiveColorHover: "accentTextPrimary";
         labelTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderQuaternary";
         iconFill: "surfaceItemQuaternary";

package/dist/types/components/Segmented/appearance/segmentedDefault.js

@@ -2,10 +2,10 @@ const segmentedAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentActiveHoverPrimary',
+        fillActiveHover: 'accentPrimary',
         fillHover: 'surfaceHoverSecondary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconFill: 'surfaceItemQuaternary',

package/dist/types/components/Segmented/appearance/segmentedError.d.ts

@@ -3,7 +3,7 @@ declare const segmentedAppearanceError: {
         fill: "errorTertiary";
         fillActive: "errorPrimary";
         fillHover: "errorHoverPrimary";
-        labelTextActiveColor: "errorTextActivePrimary";
+        labelTextActiveColor: "errorTextPrimary";
         labelTextColor: "errorTextSecondary";
         labelTextColorHover: "errorTextPrimary";
         borderColor: "errorBorderQuaternary";

package/dist/types/components/Segmented/appearance/segmentedError.js

@@ -3,7 +3,7 @@ const segmentedAppearanceError = {
         fill: 'errorTertiary',
         fillActive: 'errorPrimary',
         fillHover: 'errorHoverPrimary',
-        labelTextActiveColor: 'errorTextActivePrimary',
+        labelTextActiveColor: 'errorTextPrimary',
         labelTextColor: 'errorTextSecondary',
         labelTextColorHover: 'errorTextPrimary',
         borderColor: 'errorBorderQuaternary',

package/dist/types/components/Segmented/appearance/segmentedRequire.d.ts

@@ -1,15 +1,14 @@
 declare const segmentedAppearanceRequire: {
     requirePrimary: {
         fill: "warningTertiary";
-        fillActive: "accentPrimary";
-        fillActiveHover: "accentPrimary";
+        fillActive: "warningPrimary";
+        fillActiveHover: "warningPrimary";
         fillHover: "warningSecondary";
         labelTextActiveColor: "warningTextPrimary";
-        labelTextColor: "warningTextPrimary";
+        labelTextColor: "warningTextSecondary";
         labelTextColorHover: "warningTextSecondary";
         borderColor: "warningBorderSecondary";
         iconFill: "warningItemSecondary";
-        iconFillActive: "warningItemTertiary";
     };
 };
 export { segmentedAppearanceRequire };

package/dist/types/components/Segmented/appearance/segmentedRequire.js

@@ -1,15 +1,14 @@
 const segmentedAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
-        fillActive: 'accentPrimary',
-        fillActiveHover: 'accentPrimary',
+        fillActive: 'warningPrimary',
+        fillActiveHover: 'warningPrimary',
         fillHover: 'warningSecondary',
         labelTextActiveColor: 'warningTextPrimary',
-        labelTextColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextSecondary',
         labelTextColorHover: 'warningTextSecondary',
         borderColor: 'warningBorderSecondary',
         iconFill: 'warningItemSecondary',
-        iconFillActive: 'warningItemTertiary',
     },
 };
 export { segmentedAppearanceRequire };

package/dist/types/components/Segmented/appearance/segmentedShape.d.ts

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

package/dist/types/components/Segmented/appearance/segmentedShape.js

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

package/dist/types/components/Segmented/appearance/segmentedSuccess.d.ts

@@ -2,12 +2,15 @@ declare const segmentedAppearanceSuccess: {
     successPrimary: {
         fill: "successTertiary";
         fillActive: "successSecondary";
+        fillActiveHover: "successSecondary";
         fillHover: "successSecondary";
         labelTextActiveColor: "successTextPrimary";
-        labelTextColor: "successTextSecondary";
+        labelTextActiveColorHover: "successTextPrimary";
+        labelTextColor: "successTextQuaternary";
         labelTextColorHover: "successTextPrimary";
         borderColor: "successBorderSecondary";
         iconFill: "successItemSecondary";
+        indicatorFill: "accentPrimary";
     };
 };
 export { segmentedAppearanceSuccess };

package/dist/types/components/Segmented/appearance/segmentedSuccess.js

@@ -2,12 +2,15 @@ const segmentedAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillActive: 'successSecondary',
+        fillActiveHover: 'successSecondary',
         fillHover: 'successSecondary',
         labelTextActiveColor: 'successTextPrimary',
-        labelTextColor: 'successTextSecondary',
+        labelTextActiveColorHover: 'successTextPrimary',
+        labelTextColor: 'successTextQuaternary',
         labelTextColorHover: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconFill: 'successItemSecondary',
+        indicatorFill: 'accentPrimary',
     },
 };
 export { segmentedAppearanceSuccess };

package/dist/types/components/Segmented/stories/SegmenetedIcon.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const DefaultPrimary = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -24,7 +24,7 @@ export const DefaultPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -32,7 +32,7 @@ export const ErrorPrimary = {
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successPrimary sizeL',
+        appearance: 'successPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -40,7 +40,7 @@ export const SuccessPrimary = {
 };
 export const RequirePrimary = {
     args: {
-        appearance: 'requirePrimary sizeL',
+        appearance: 'requirePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -48,7 +48,7 @@ export const RequirePrimary = {
 };
 export const DisabledPrimary = {
     args: {
-        appearance: 'disabledPrimary sizeL',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });

package/dist/types/components/Segmented/stories/SegmentedDemo.stories.d.ts

@@ -1,24 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { SegmentedProps } from '../Segmented.interface';
-declare const meta: {
-    title: string;
-    component: (props: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
-    args: {
-        appearance: "defaultPrimary sizeL solid";
-        activeSegment: {
-            value: string;
-        };
-        segments: {
-            label: string;
-            value: string;
-        }[];
-        shape: "rounded";
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { SegmentedGalleryStory } from '../Segmented.interface';
+declare const meta: Meta<SegmentedGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<SegmentedGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Segmented/stories/SegmentedDemo.stories.js

@@ -1,30 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { segmentedAppearanceDefault } from '../appearance/segmentedDefault';
+import { segmentedAppearanceDisabled } from '../appearance/segmentedDisabled';
+import { segmentedAppearanceError } from '../appearance/segmentedError';
+import { segmentedAppearanceRequire } from '../appearance/segmentedRequire';
+import { segmentedAppearanceShape } from '../appearance/segmentedShape';
+import { segmentedAppearanceSize } from '../appearance/segmentedSize';
+import { segmentedAppearanceStyle } from '../appearance/segmentedStyle';
+import { segmentedAppearanceSuccess } from '../appearance/segmentedSuccess';
 import { Segmented } from '../Segmented';
 import { segmentedLabelMock, segmentedMock } from './__mock__';
+const gallery = createComponentGallery({
+    size: segmentedAppearanceSize,
+    appearanceGroups: {
+        default: segmentedAppearanceDefault,
+        disabled: segmentedAppearanceDisabled,
+        error: segmentedAppearanceError,
+        require: segmentedAppearanceRequire,
+        success: segmentedAppearanceSuccess,
+    },
+    shape: segmentedAppearanceShape,
+    style: segmentedAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Segmented',
     component: Segmented,
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         activeSegment: segmentedMock.activeSegment,
         segments: segmentedLabelMock,
-        shape: 'rounded',
+        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(Segmented, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Segmented, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Segmented, { appearance: appearance, activeSegment: storyArgs.activeSegment, segments: storyArgs.segments, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Segmented/stories/SegmentedLabel.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const DefaultPrimary = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -24,7 +24,7 @@ export const DefaultPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL solid',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -32,7 +32,7 @@ export const ErrorPrimary = {
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successPrimary sizeL solid',
+        appearance: 'successPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -40,7 +40,7 @@ export const SuccessPrimary = {
 };
 export const DisabledPrimary = {
     args: {
-        appearance: 'disabledPrimary sizeL solid',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });

package/dist/types/components/Segmented/stories/SegmentedLabelIcon.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const DefaultPrimary = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -24,7 +24,7 @@ export const DefaultPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL solid',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -32,7 +32,7 @@ export const ErrorPrimary = {
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successPrimary sizeL solid',
+        appearance: 'successPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });
@@ -40,7 +40,7 @@ export const SuccessPrimary = {
 };
 export const DisabledPrimary = {
     args: {
-        appearance: 'disabledPrimary sizeL solid',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Segmented, { ...args });