@itcase/ui-web 1.9.104 → 1.9.106

package/dist/types/components/Button/stories/ButtonDefault.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -24,7 +24,7 @@ export const Accent = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXXL',
+        appearance: 'specialPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -32,7 +32,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXXL',
+        appearance: 'extraPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -40,7 +40,7 @@ export const Extra = {
 };
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -48,7 +48,7 @@ export const Surface = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -56,7 +56,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -64,7 +64,7 @@ export const Success = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXXL',
+        appearance: 'warningPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -72,7 +72,7 @@ export const Warning = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXXL',
+        appearance: 'dangerPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -80,7 +80,7 @@ export const Danger = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXXL',
+        appearance: 'infoPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });

package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts

@@ -1,96 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types-ui").AlignProps;
-        borderColor?: import("@itcase/types-ui").BorderColorProps;
-        borderType?: import("@itcase/types-ui").BorderTypeProps;
-        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
-        fill?: import("@itcase/types-ui").FillProps;
-        fillHover?: import("@itcase/types-ui").FillHoverProps;
-        icon?: import("../../Icon").IconProps["SvgImage"];
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
-        iconAfterAppearance?: import("../../Icon").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
-        iconAfterFill?: import("../../Icon").IconProps["fill"];
-        iconAfterFillIcon?: import("../../Icon").IconProps["iconFill"];
-        iconAfterFillSize?: import("../../Icon").IconProps["fillSize"];
-        iconAfterShape?: import("../../Icon").IconProps["shape"];
-        iconAfterSize?: import("../../Icon").IconProps["iconSize"];
-        iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
-        iconAppearance?: import("../../Icon").IconProps["appearance"];
-        iconAppearanceSize?: import("../../Icon").IconProps["iconSize"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
-        iconBeforeAppearance?: import("../../Icon").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
-        iconBeforeFill?: import("../../Icon").IconProps["fill"];
-        iconBeforeFillIcon?: import("../../Icon").IconProps["iconFill"];
-        iconBeforeFillSize?: import("../../Icon").IconProps["fillSize"];
-        iconBeforeShape?: import("../../Icon").IconProps["shape"];
-        iconBeforeSize?: import("../../Icon").IconProps["iconSize"];
-        iconBeforeSrc?: import("../../Icon").IconProps["imageSrc"];
-        iconFill?: import("../../Icon").IconProps["fill"];
-        iconFillHover?: import("../../Icon").IconProps["fillHover"];
-        iconFillIcon?: import("../../Icon").IconProps["iconFill"];
-        iconFillSize?: import("../../Icon").IconProps["fillSize"];
-        iconShape?: import("../../Icon").IconProps["shape"];
-        iconSize?: import("../../Icon").IconProps["iconSize"];
-        iconSrc?: import("../../Icon").IconProps["imageSrc"];
-        labelTextColor?: import("../../Text").TextProps["textColor"];
-        labelTextColorHover?: import("../../Text").TextProps["textColorHover"];
-        labelTextSize?: import("../../Text").TextProps["size"];
-        labelTextWeight?: import("../../Text").TextProps["textWeight"];
-        labelTextWrap?: import("../../Text").TextProps["textWrap"];
-        loaderAppearance?: import("../../Loader").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
-        loaderFill?: import("../../Loader").LoaderProps["fill"];
-        loaderItemFill?: import("../../Loader").LoaderProps["itemFill"];
-        loaderShape?: import("../../Loader").LoaderProps["shape"];
-        loaderSize?: import("../../Loader").LoaderProps["size"];
-        loaderType?: import("../../Loader").LoaderProps["type"];
-        shape?: import("@itcase/types-ui").ShapeProps;
-        size?: import("@itcase/types-ui").SizeProps;
-        wrap?: import("@itcase/types-ui").WrapProps;
-        zeroGap?: boolean;
-        zeroPadding?: boolean;
-    } & import("@itcase/ui-core/hooks").StyleAttributes & {
-        after?: string;
-        appearance?: import("@itcase/types-ui").CompositeAppearanceKeys;
-        Badge?: import("react").ReactNode;
-        before?: string;
-        children?: import("react").ReactNode;
-        className?: string;
-        dataTestId?: string;
-        dataTour?: string;
-        elevation?: import("@itcase/types-ui").ElevationProps;
-        href?: import("../../Link").LinkWrapperProps["href"];
-        htmlType?: import("../../Link").LinkWrapperProps["type"];
-        isDisabled?: import("../../Link").LinkWrapperProps["disabled"];
-        isHolding?: boolean;
-        isLoading?: boolean;
-        isSkeleton?: boolean;
-        label?: string;
-        labelTextTruncate?: import("../../Text").TextProps["textTruncate"];
-        labelTextWidth?: import("../../Text").TextProps["width"];
-        link?: import("../../Link").LinkWrapperProps["href"];
-        onClick?: import("react").MouseEventHandler<HTMLButtonElement>;
-        onHoldComplete?: () => void;
-        onMouseDown?: () => void;
-        rel?: import("../../Link").LinkWrapperProps["rel"];
-        style?: import("react").CSSProperties;
-        target?: import("../../Link").LinkWrapperProps["target"];
-        tooltip?: string;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    args: {
-        appearance: "surfaceSecondary sizeXXL";
-        label: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ButtonGalleryStory } from '../Button.interface';
+declare const meta: Meta<ButtonGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ButtonGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;
-export declare const Hold: Story;

package/dist/types/components/Button/stories/ButtonDemo.stories.js

@@ -1,36 +1,75 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { icons14, icons16, icons20, icons24 } from '@itcase/icons-default';
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { buttonAppearanceAccent } from '../appearance/buttonAccent';
+import { buttonAppearanceDanger } from '../appearance/buttonDanger';
+import { buttonAppearanceError } from '../appearance/buttonError';
+import { buttonAppearanceExtra } from '../appearance/buttonExtra';
+import { buttonAppearanceInfo } from '../appearance/buttonInfo';
+import { buttonAppearanceShape } from '../appearance/buttonShape';
+import { buttonAppearanceSize } from '../appearance/buttonSize';
+import { buttonAppearanceSpecial } from '../appearance/buttonSpecial';
+import { buttonAppearanceStyle } from '../appearance/buttonStyle';
+import { buttonAppearanceSuccess } from '../appearance/buttonSuccess';
+import { buttonAppearanceSurface } from '../appearance/buttonSurface';
+import { buttonAppearanceWarning } from '../appearance/buttonWarning';
 import { Button } from '../Button';
+const galleryIconsBySizeKey = {
+    sizeXXL: icons24.Placeholder.Default,
+    sizeXL: icons24.Placeholder.Default,
+    sizeL: icons24.Placeholder.Default,
+    sizeM: icons24.Placeholder.Default,
+    sizeS: icons20.Placeholder.Default,
+    sizeXS: icons16.Placeholder.Default,
+    sizeXXS: icons14.Placeholder.Default,
+};
+const gallery = createComponentGallery({
+    size: buttonAppearanceSize,
+    appearanceGroups: {
+        accent: buttonAppearanceAccent,
+        error: buttonAppearanceError,
+        danger: buttonAppearanceDanger,
+        extra: buttonAppearanceExtra,
+        info: buttonAppearanceInfo,
+        special: buttonAppearanceSpecial,
+        success: buttonAppearanceSuccess,
+        surface: buttonAppearanceSurface,
+        warning: buttonAppearanceWarning,
+    },
+    shape: buttonAppearanceShape,
+    style: buttonAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Button',
     component: Button,
     args: {
-        appearance: 'surfaceSecondary sizeXXL',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         label: 'Button',
+        iconBefore: false,
+        icon: false,
+        iconAfter: true,
+        isDisabled: false,
+        isSkeleton: false,
+        isHolding: true,
+        isLoading: 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(Button, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Button, { ...args });
-    },
-};
-export const Hold = {
-    args: {
-        isHolding: true,
-        onHoldComplete: () => alert('Hold complete'),
-    },
-    render: (args) => {
-        return _jsx(Button, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args, sizeKey }) => {
+        const icon = galleryIconsBySizeKey[sizeKey];
+        return (_jsx(Button, { appearance: appearance, label: args.label, icon: args.icon && icon, iconAfter: args.iconAfter && icon, iconBefore: args.iconBefore && icon, isDisabled: args.isDisabled, isSkeleton: args.isSkeleton, isHolding: args.isHolding, isLoading: args.isLoading }));
+    }),
 };

package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts

@@ -8,8 +8,8 @@ declare const meta: {
         borderWidth?: import("@itcase/types-ui").BorderWidthProps;
         fill?: import("@itcase/types-ui").FillProps;
         fillHover?: import("@itcase/types-ui").FillHoverProps;
-        icon?: import("../../Icon").IconProps["SvgImage"];
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        icon?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        iconAfter?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconAfterAppearance?: import("../../Icon").IconProps["appearance"];
         iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon").IconProps["fill"];
@@ -20,7 +20,7 @@ declare const meta: {
         iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
         iconAppearance?: import("../../Icon").IconProps["appearance"];
         iconAppearanceSize?: import("../../Icon").IconProps["iconSize"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBefore?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconBeforeAppearance?: import("../../Icon").IconProps["appearance"];
         iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon").IconProps["fill"];
@@ -41,7 +41,7 @@ declare const meta: {
         labelTextSize?: import("../../Text").TextProps["size"];
         labelTextWeight?: import("../../Text").TextProps["textWeight"];
         labelTextWrap?: import("../../Text").TextProps["textWrap"];
-        loaderAppearance?: import("../../Loader").LoaderProps["appearance"];
+        loaderAppearance?: import("@itcase/types-ui").CompositeAppearanceWithoutSizeAndShapeKeys;
         loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader").LoaderProps["itemFill"];

package/dist/types/components/Button/stories/ButtonIcon.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -22,7 +22,7 @@ export const Accent = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXXL',
+        appearance: 'specialPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -30,7 +30,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXXL',
+        appearance: 'extraPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -38,7 +38,7 @@ export const Extra = {
 };
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -46,7 +46,7 @@ export const Surface = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -54,7 +54,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -62,7 +62,7 @@ export const Success = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXXL',
+        appearance: 'warningPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -70,7 +70,7 @@ export const Warning = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXXL',
+        appearance: 'dangerPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -78,7 +78,7 @@ export const Danger = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXXL',
+        appearance: 'infoPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });

package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts

@@ -8,8 +8,8 @@ declare const meta: {
         borderWidth?: import("@itcase/types-ui").BorderWidthProps;
         fill?: import("@itcase/types-ui").FillProps;
         fillHover?: import("@itcase/types-ui").FillHoverProps;
-        icon?: import("../../Icon").IconProps["SvgImage"];
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        icon?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        iconAfter?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconAfterAppearance?: import("../../Icon").IconProps["appearance"];
         iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon").IconProps["fill"];
@@ -20,7 +20,7 @@ declare const meta: {
         iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
         iconAppearance?: import("../../Icon").IconProps["appearance"];
         iconAppearanceSize?: import("../../Icon").IconProps["iconSize"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBefore?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconBeforeAppearance?: import("../../Icon").IconProps["appearance"];
         iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon").IconProps["fill"];
@@ -41,7 +41,7 @@ declare const meta: {
         labelTextSize?: import("../../Text").TextProps["size"];
         labelTextWeight?: import("../../Text").TextProps["textWeight"];
         labelTextWrap?: import("../../Text").TextProps["textWrap"];
-        loaderAppearance?: import("../../Loader").LoaderProps["appearance"];
+        loaderAppearance?: import("@itcase/types-ui").CompositeAppearanceWithoutSizeAndShapeKeys;
         loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader").LoaderProps["itemFill"];

package/dist/types/components/Button/stories/ButtonLabel.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -21,7 +21,7 @@ export const Accent = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXXL',
+        appearance: 'specialPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -29,7 +29,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXXL',
+        appearance: 'extraPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -37,7 +37,7 @@ export const Extra = {
 };
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -45,7 +45,7 @@ export const Surface = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -53,7 +53,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -61,7 +61,7 @@ export const Success = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXXL',
+        appearance: 'warningPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -69,7 +69,7 @@ export const Warning = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXXL',
+        appearance: 'dangerPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -77,7 +77,7 @@ export const Danger = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXXL',
+        appearance: 'infoPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });

package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts

@@ -8,8 +8,8 @@ declare const meta: {
         borderWidth?: import("@itcase/types-ui").BorderWidthProps;
         fill?: import("@itcase/types-ui").FillProps;
         fillHover?: import("@itcase/types-ui").FillHoverProps;
-        icon?: import("../../Icon").IconProps["SvgImage"];
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        icon?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        iconAfter?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconAfterAppearance?: import("../../Icon").IconProps["appearance"];
         iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon").IconProps["fill"];
@@ -20,7 +20,7 @@ declare const meta: {
         iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
         iconAppearance?: import("../../Icon").IconProps["appearance"];
         iconAppearanceSize?: import("../../Icon").IconProps["iconSize"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBefore?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconBeforeAppearance?: import("../../Icon").IconProps["appearance"];
         iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon").IconProps["fill"];
@@ -41,7 +41,7 @@ declare const meta: {
         labelTextSize?: import("../../Text").TextProps["size"];
         labelTextWeight?: import("../../Text").TextProps["textWeight"];
         labelTextWrap?: import("../../Text").TextProps["textWrap"];
-        loaderAppearance?: import("../../Loader").LoaderProps["appearance"];
+        loaderAppearance?: import("@itcase/types-ui").CompositeAppearanceWithoutSizeAndShapeKeys;
         loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader").LoaderProps["itemFill"];

package/dist/types/components/Button/stories/ButtonLoading.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -22,7 +22,7 @@ export const Accent = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXXL',
+        appearance: 'specialPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -30,7 +30,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXXL',
+        appearance: 'extraPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -38,7 +38,7 @@ export const Extra = {
 };
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -46,7 +46,7 @@ export const Surface = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -54,7 +54,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -62,7 +62,7 @@ export const Success = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXXL',
+        appearance: 'warningPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -70,7 +70,7 @@ export const Warning = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXXL',
+        appearance: 'dangerPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });
@@ -78,7 +78,7 @@ export const Danger = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXXL',
+        appearance: 'infoPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Button, { ...args });

package/dist/types/components/Button/stories/ButtonMuted.stories.d.ts

@@ -8,8 +8,8 @@ declare const meta: {
         borderWidth?: import("@itcase/types-ui").BorderWidthProps;
         fill?: import("@itcase/types-ui").FillProps;
         fillHover?: import("@itcase/types-ui").FillHoverProps;
-        icon?: import("../../Icon").IconProps["SvgImage"];
-        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        icon?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        iconAfter?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconAfterAppearance?: import("../../Icon").IconProps["appearance"];
         iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon").IconProps["fill"];
@@ -20,7 +20,7 @@ declare const meta: {
         iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
         iconAppearance?: import("../../Icon").IconProps["appearance"];
         iconAppearanceSize?: import("../../Icon").IconProps["iconSize"];
-        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBefore?: string | false | import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
         iconBeforeAppearance?: import("../../Icon").IconProps["appearance"];
         iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon").IconProps["fill"];
@@ -41,7 +41,7 @@ declare const meta: {
         labelTextSize?: import("../../Text").TextProps["size"];
         labelTextWeight?: import("../../Text").TextProps["textWeight"];
         labelTextWrap?: import("../../Text").TextProps["textWrap"];
-        loaderAppearance?: import("../../Loader").LoaderProps["appearance"];
+        loaderAppearance?: import("@itcase/types-ui").CompositeAppearanceWithoutSizeAndShapeKeys;
         loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader").LoaderProps["itemFill"];