@itcase/ui-web 1.9.103 → 1.9.105

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

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

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

@@ -1,11 +1,13 @@
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { AlignProps, AppearanceConfig, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKeys, ElevationProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WrapProps } from '@itcase/types-ui';
+import { AlignProps, AppearanceConfig, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKeys, CompositeAppearanceWithoutSizeAndShapeKeys, ElevationProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WrapProps } from '@itcase/types-ui';
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import { IconProps } from '../Icon/Icon.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
 import { LoaderProps } from '../Loader/Loader.interface';
 import { TextProps } from '../Text/Text.interface';
+type ButtonIconProp = false | IconProps['SvgImage'];
 type ButtonAppearanceProps = {
     align?: AlignProps;
     borderColor?: BorderColorProps;
@@ -13,8 +15,8 @@ type ButtonAppearanceProps = {
     borderWidth?: BorderWidthProps;
     fill?: FillProps;
     fillHover?: FillHoverProps;
-    icon?: IconProps['SvgImage'];
-    iconAfter?: IconProps['SvgImage'];
+    icon?: ButtonIconProp;
+    iconAfter?: ButtonIconProp;
     iconAfterAppearance?: IconProps['appearance'];
     iconAfterAppearanceSize?: AppearanceIconSizeKey;
     iconAfterFill?: IconProps['fill'];
@@ -25,7 +27,7 @@ type ButtonAppearanceProps = {
     iconAfterSrc?: IconProps['imageSrc'];
     iconAppearance?: IconProps['appearance'];
     iconAppearanceSize?: IconProps['iconSize'];
-    iconBefore?: IconProps['SvgImage'];
+    iconBefore?: ButtonIconProp;
     iconBeforeAppearance?: IconProps['appearance'];
     iconBeforeAppearanceSize?: AppearanceIconSizeKey;
     iconBeforeFill?: IconProps['fill'];
@@ -46,7 +48,7 @@ type ButtonAppearanceProps = {
     labelTextSize?: TextProps['size'];
     labelTextWeight?: TextProps['textWeight'];
     labelTextWrap?: TextProps['textWrap'];
-    loaderAppearance?: LoaderProps['appearance'];
+    loaderAppearance?: CompositeAppearanceWithoutSizeAndShapeKeys;
     loaderAppearanceSize?: AppearanceSizeKey;
     loaderFill?: LoaderProps['fill'];
     loaderItemFill?: LoaderProps['itemFill'];
@@ -92,4 +94,10 @@ type ButtonAppearance = ButtonConfig['appearance'];
 type ButtonAppearanceStyle = AppearanceRecord<AppearanceStyleKey, ButtonAppearanceProps, 'borderColor' | 'fill'>;
 type ButtonAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<ButtonAppearanceProps, 'shape'>>>>;
 type ButtonAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, ButtonAppearanceProps, Extract<keyof ButtonAppearanceProps, 'iconAfterAppearanceSize' | 'iconBeforeAppearanceSize' | 'labelTextSize' | 'loaderAppearanceSize' | 'size'>>;
-export type { ButtonAppearance, ButtonAppearanceShape, ButtonAppearanceSize, ButtonAppearanceStyle, ButtonConfig, ButtonProps, };
+type ButtonAppearanceKey = NonNullable<ButtonProps['appearance']>;
+type ButtonGalleryStory = ComponentGalleryArgs & Pick<ButtonProps, 'isDisabled' | 'isHolding' | 'isLoading' | 'isSkeleton' | 'label'> & {
+    icon: boolean;
+    iconAfter: boolean;
+    iconBefore: boolean;
+};
+export type { ButtonAppearance, ButtonAppearanceKey, ButtonAppearanceShape, ButtonAppearanceSize, ButtonAppearanceStyle, ButtonConfig, ButtonGalleryStory, ButtonProps, };

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

@@ -40,6 +40,6 @@ const Button = React.forwardRef(function Button(props, ref) {
                 ? 'button_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId?.endsWith('Button') ? dataTestId : `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link ?? href, LinkComponent: (link ?? href) ? 'a' : 'button', rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: _jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (_jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: _jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (_jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId?.endsWith('Button') ? dataTestId : `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link ?? href, LinkComponent: (link ?? href) ? 'a' : 'button', rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: _jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (_jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: _jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore ? iconBefore : undefined })), (icon || iconSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon ? icon : undefined })), (children || label) && (_jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter ? iconAfter : undefined })), Badge, after] }) }));
 });
 export { Button, buttonConfig };

package/dist/types/components/Button/__test__/ButtonTest.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"];
@@ -82,7 +82,7 @@ declare const meta: {
         tooltip?: string;
     } & import("react").RefAttributes<HTMLDivElement>>;
     args: {
-        appearance: "surfaceSecondary sizeXXL";
+        appearance: "surfaceSecondary sizeXXL solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Button/__test__/ButtonTest.stories.js

@@ -6,7 +6,7 @@ const meta = {
     title: 'Atoms / Button / __test__',
     component: Button,
     args: {
-        appearance: 'surfaceSecondary sizeXXL',
+        appearance: 'surfaceSecondary sizeXXL solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Button/appearance/buttonAccent.d.ts

@@ -8,7 +8,7 @@ declare const buttonAppearanceAccent: {
         iconAfterFillIcon: "accentItemQuaternary";
         iconBeforeFillIcon: "accentItemQuaternary";
         iconFillIcon: "accentItemQuaternary";
-        loaderAppearance: "accentTertiary";
+        loaderAppearance: "accentTertiary solid";
     };
     accentPrimary: {
         fill: "accentPrimary";
@@ -19,7 +19,7 @@ declare const buttonAppearanceAccent: {
         iconAfterFillIcon: "accentItemPrimary";
         iconBeforeFillIcon: "accentItemPrimary";
         iconFillIcon: "accentItemPrimary";
-        loaderAppearance: "accentPrimary";
+        loaderAppearance: "accentPrimary solid";
     };
     accentSecondary: {
         fill: "accentPrimary";
@@ -30,7 +30,7 @@ declare const buttonAppearanceAccent: {
         iconAfterFillIcon: "accentItemPrimary";
         iconBeforeFillIcon: "accentItemPrimary";
         iconFillIcon: "accentItemPrimary";
-        loaderAppearance: "accentPrimary";
+        loaderAppearance: "accentPrimary solid";
     };
 };
 export { buttonAppearanceAccent };

package/dist/types/components/Button/appearance/buttonAccent.js

@@ -8,7 +8,7 @@ const buttonAppearanceAccent = {
         iconAfterFillIcon: 'accentItemQuaternary',
         iconBeforeFillIcon: 'accentItemQuaternary',
         iconFillIcon: 'accentItemQuaternary',
-        loaderAppearance: 'accentTertiary',
+        loaderAppearance: 'accentTertiary solid',
     },
     accentPrimary: {
         fill: 'accentPrimary',
@@ -19,7 +19,7 @@ const buttonAppearanceAccent = {
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         iconFillIcon: 'accentItemPrimary',
-        loaderAppearance: 'accentPrimary',
+        loaderAppearance: 'accentPrimary solid',
     },
     accentSecondary: {
         fill: 'accentPrimary',
@@ -30,7 +30,7 @@ const buttonAppearanceAccent = {
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         iconFillIcon: 'accentItemPrimary',
-        loaderAppearance: 'accentPrimary',
+        loaderAppearance: 'accentPrimary solid',
     },
 };
 export { buttonAppearanceAccent };

package/dist/types/components/Button/appearance/buttonDanger.d.ts

@@ -8,7 +8,7 @@ declare const buttonAppearanceDanger: {
         iconAfterFillIcon: "dangerItemQuaternary";
         iconBeforeFillIcon: "dangerItemQuaternary";
         iconFillIcon: "dangerItemQuaternary";
-        loaderAppearance: "dangerTertiary";
+        loaderAppearance: "dangerTertiary solid";
     };
     dangerPrimary: {
         fill: "dangerPrimary";
@@ -18,7 +18,7 @@ declare const buttonAppearanceDanger: {
         iconAfterFillIcon: "dangerItemPrimary";
         iconBeforeFillIcon: "dangerItemPrimary";
         iconFillIcon: "dangerItemPrimary";
-        loaderAppearance: "dangerPrimary";
+        loaderAppearance: "dangerPrimary solid";
     };
 };
 export { buttonAppearanceDanger };

package/dist/types/components/Button/appearance/buttonDanger.js

@@ -8,7 +8,7 @@ const buttonAppearanceDanger = {
         iconAfterFillIcon: 'dangerItemQuaternary',
         iconBeforeFillIcon: 'dangerItemQuaternary',
         iconFillIcon: 'dangerItemQuaternary',
-        loaderAppearance: 'dangerTertiary',
+        loaderAppearance: 'dangerTertiary solid',
     },
     dangerPrimary: {
         fill: 'dangerPrimary',
@@ -18,7 +18,7 @@ const buttonAppearanceDanger = {
         iconAfterFillIcon: 'dangerItemPrimary',
         iconBeforeFillIcon: 'dangerItemPrimary',
         iconFillIcon: 'dangerItemPrimary',
-        loaderAppearance: 'dangerPrimary',
+        loaderAppearance: 'dangerPrimary solid',
     },
 };
 export { buttonAppearanceDanger };

package/dist/types/components/Button/appearance/buttonError.d.ts

@@ -8,7 +8,7 @@ declare const buttonAppearanceError: {
         iconAfterFillIcon: "errorItemQuaternary";
         iconBeforeFillIcon: "errorItemQuaternary";
         iconFillIcon: "errorItemQuaternary";
-        loaderAppearance: "errorTertiary";
+        loaderAppearance: "errorTertiary solid";
     };
     errorPrimary: {
         fill: "errorPrimary";
@@ -18,7 +18,7 @@ declare const buttonAppearanceError: {
         iconAfterFillIcon: "errorItemPrimary";
         iconBeforeFillIcon: "errorItemPrimary";
         iconFillIcon: "errorItemPrimary";
-        loaderAppearance: "errorPrimary";
+        loaderAppearance: "errorPrimary solid";
     };
 };
 export { buttonAppearanceError };

package/dist/types/components/Button/appearance/buttonError.js

@@ -8,7 +8,7 @@ const buttonAppearanceError = {
         iconAfterFillIcon: 'errorItemQuaternary',
         iconBeforeFillIcon: 'errorItemQuaternary',
         iconFillIcon: 'errorItemQuaternary',
-        loaderAppearance: 'errorTertiary',
+        loaderAppearance: 'errorTertiary solid',
     },
     errorPrimary: {
         fill: 'errorPrimary',
@@ -18,7 +18,7 @@ const buttonAppearanceError = {
         iconAfterFillIcon: 'errorItemPrimary',
         iconBeforeFillIcon: 'errorItemPrimary',
         iconFillIcon: 'errorItemPrimary',
-        loaderAppearance: 'errorPrimary',
+        loaderAppearance: 'errorPrimary solid',
     },
 };
 export { buttonAppearanceError };

package/dist/types/components/Button/appearance/buttonExtra.d.ts

@@ -7,7 +7,7 @@ declare const buttonAppearanceExtra: {
         iconAfterFillIcon: "extraItemQuaternary";
         iconBeforeFillIcon: "extraItemQuaternary";
         iconFillIcon: "extraItemQuaternary";
-        loaderAppearance: "extraPrimary";
+        loaderAppearance: "extraPrimary solid";
     };
     extraPrimary: {
         fill: "extraPrimary";
@@ -16,7 +16,7 @@ declare const buttonAppearanceExtra: {
         iconAfterFillIcon: "extraItemPrimary";
         iconBeforeFillIcon: "extraItemPrimary";
         iconFillIcon: "extraItemPrimary";
-        loaderAppearance: "extraPrimary";
+        loaderAppearance: "extraPrimary solid";
     };
 };
 export { buttonAppearanceExtra };

package/dist/types/components/Button/appearance/buttonExtra.js

@@ -7,7 +7,7 @@ const buttonAppearanceExtra = {
         iconAfterFillIcon: 'extraItemQuaternary',
         iconBeforeFillIcon: 'extraItemQuaternary',
         iconFillIcon: 'extraItemQuaternary',
-        loaderAppearance: 'extraPrimary',
+        loaderAppearance: 'extraPrimary solid',
     },
     extraPrimary: {
         fill: 'extraPrimary',
@@ -16,7 +16,7 @@ const buttonAppearanceExtra = {
         iconAfterFillIcon: 'extraItemPrimary',
         iconBeforeFillIcon: 'extraItemPrimary',
         iconFillIcon: 'extraItemPrimary',
-        loaderAppearance: 'extraPrimary',
+        loaderAppearance: 'extraPrimary solid',
     },
 };
 export { buttonAppearanceExtra };

package/dist/types/components/Button/appearance/buttonInfo.d.ts

@@ -8,7 +8,7 @@ declare const buttonAppearanceInfo: {
         iconAfterFillIcon: "infoItemSecondary";
         iconBeforeFillIcon: "infoItemSecondary";
         iconFillIcon: "infoItemSecondary";
-        loaderAppearance: "infoTertiary";
+        loaderAppearance: "infoTertiary solid";
     };
     infoPrimary: {
         fill: "infoPrimary";
@@ -19,7 +19,7 @@ declare const buttonAppearanceInfo: {
         iconAfterFillIcon: "infoItemPrimary";
         iconBeforeFillIcon: "infoItemPrimary";
         iconFillIcon: "infoItemPrimary";
-        loaderAppearance: "infoPrimary";
+        loaderAppearance: "infoPrimary solid";
     };
     infoSecondary: {
         fill: "infoPrimary";
@@ -30,7 +30,7 @@ declare const buttonAppearanceInfo: {
         iconAfterFillIcon: "infoItemPrimary";
         iconBeforeFillIcon: "infoItemPrimary";
         iconFillIcon: "infoItemPrimary";
-        loaderAppearance: "infoPrimary";
+        loaderAppearance: "infoPrimary solid";
     };
 };
 export { buttonAppearanceInfo };

package/dist/types/components/Button/appearance/buttonInfo.js

@@ -8,7 +8,7 @@ const buttonAppearanceInfo = {
         iconAfterFillIcon: 'infoItemSecondary',
         iconBeforeFillIcon: 'infoItemSecondary',
         iconFillIcon: 'infoItemSecondary',
-        loaderAppearance: 'infoTertiary',
+        loaderAppearance: 'infoTertiary solid',
     },
     infoPrimary: {
         fill: 'infoPrimary',
@@ -19,7 +19,7 @@ const buttonAppearanceInfo = {
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
-        loaderAppearance: 'infoPrimary',
+        loaderAppearance: 'infoPrimary solid',
     },
     infoSecondary: {
         fill: 'infoPrimary',
@@ -30,7 +30,7 @@ const buttonAppearanceInfo = {
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
         iconFillIcon: 'infoItemPrimary',
-        loaderAppearance: 'infoPrimary',
+        loaderAppearance: 'infoPrimary solid',
     },
 };
 export { buttonAppearanceInfo };

package/dist/types/components/Button/appearance/buttonShape.d.ts

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

package/dist/types/components/Button/appearance/buttonShape.js

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

package/dist/types/components/Button/appearance/buttonSize.d.ts

@@ -18,35 +18,35 @@ declare const buttonAppearanceSize: {
         labelTextSize: "l";
         iconAfterAppearanceSize: "size24_24";
         iconBeforeAppearanceSize: "size24_24";
-        loaderAppearanceSize: "sizeL";
+        loaderAppearanceSize: "sizeM";
     };
     sizeM: {
         size: "m";
         labelTextSize: "m";
         iconAfterAppearanceSize: "size24_24";
         iconBeforeAppearanceSize: "size24_24";
-        loaderAppearanceSize: "sizeL";
+        loaderAppearanceSize: "sizeM";
     };
     sizeS: {
         size: "s";
         labelTextSize: "s";
         iconAfterAppearanceSize: "size20_20";
         iconBeforeAppearanceSize: "size20_20";
-        loaderAppearanceSize: "sizeL";
+        loaderAppearanceSize: "sizeS";
     };
     sizeXS: {
         size: "xs";
         labelTextSize: "xs";
         iconAfterAppearanceSize: "size16_16";
         iconBeforeAppearanceSize: "size16_16";
-        loaderAppearanceSize: "sizeL";
+        loaderAppearanceSize: "sizeS";
     };
     sizeXXS: {
         size: "xxs";
         labelTextSize: "xs";
         iconAfterAppearanceSize: "size14_14";
         iconBeforeAppearanceSize: "size14_14";
-        loaderAppearanceSize: "sizeL";
+        loaderAppearanceSize: "sizeS";
     };
 };
 export { buttonAppearanceSize };

package/dist/types/components/Button/appearance/buttonSize.js

@@ -18,35 +18,35 @@ const buttonAppearanceSize = {
         labelTextSize: 'l',
         iconAfterAppearanceSize: 'size24_24',
         iconBeforeAppearanceSize: 'size24_24',
-        loaderAppearanceSize: 'sizeL',
+        loaderAppearanceSize: 'sizeM',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 'm',
         iconAfterAppearanceSize: 'size24_24',
         iconBeforeAppearanceSize: 'size24_24',
-        loaderAppearanceSize: 'sizeL',
+        loaderAppearanceSize: 'sizeM',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
         iconAfterAppearanceSize: 'size20_20',
         iconBeforeAppearanceSize: 'size20_20',
-        loaderAppearanceSize: 'sizeL',
+        loaderAppearanceSize: 'sizeS',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
         iconAfterAppearanceSize: 'size16_16',
         iconBeforeAppearanceSize: 'size16_16',
-        loaderAppearanceSize: 'sizeL',
+        loaderAppearanceSize: 'sizeS',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xs',
         iconAfterAppearanceSize: 'size14_14',
         iconBeforeAppearanceSize: 'size14_14',
-        loaderAppearanceSize: 'sizeL',
+        loaderAppearanceSize: 'sizeS',
     },
 };
 export { buttonAppearanceSize };

package/dist/types/components/Button/appearance/buttonSpecial.d.ts

@@ -7,7 +7,7 @@ declare const buttonAppearanceSpecial: {
         iconAfterFillIcon: "specialItemSecondary";
         iconBeforeFillIcon: "specialItemSecondary";
         iconFillIcon: "specialItemSecondary";
-        loaderAppearance: "specialTertiary";
+        loaderAppearance: "specialTertiary solid";
     };
     specialPrimary: {
         fill: "specialPrimary";
@@ -16,7 +16,7 @@ declare const buttonAppearanceSpecial: {
         iconAfterFillIcon: "specialItemPrimary";
         iconBeforeFillIcon: "specialItemPrimary";
         iconFillIcon: "specialItemPrimary";
-        loaderAppearance: "specialPrimary";
+        loaderAppearance: "specialPrimary solid";
     };
 };
 export { buttonAppearanceSpecial };

package/dist/types/components/Button/appearance/buttonSpecial.js

@@ -7,7 +7,7 @@ const buttonAppearanceSpecial = {
         iconAfterFillIcon: 'specialItemSecondary',
         iconBeforeFillIcon: 'specialItemSecondary',
         iconFillIcon: 'specialItemSecondary',
-        loaderAppearance: 'specialTertiary',
+        loaderAppearance: 'specialTertiary solid',
     },
     specialPrimary: {
         fill: 'specialPrimary',
@@ -16,7 +16,7 @@ const buttonAppearanceSpecial = {
         iconAfterFillIcon: 'specialItemPrimary',
         iconBeforeFillIcon: 'specialItemPrimary',
         iconFillIcon: 'specialItemPrimary',
-        loaderAppearance: 'specialPrimary',
+        loaderAppearance: 'specialPrimary solid',
     },
 };
 export { buttonAppearanceSpecial };

package/dist/types/components/Button/appearance/buttonSuccess.d.ts

@@ -8,7 +8,7 @@ declare const buttonAppearanceSuccess: {
         iconAfterFillIcon: "successItemQuaternary";
         iconBeforeFillIcon: "successItemQuaternary";
         iconFillIcon: "successItemQuaternary";
-        loaderAppearance: "successTertiary";
+        loaderAppearance: "successTertiary solid";
     };
     successPrimary: {
         fill: "successPrimary";
@@ -18,7 +18,7 @@ declare const buttonAppearanceSuccess: {
         iconAfterFillIcon: "successItemPrimary";
         iconBeforeFillIcon: "successItemPrimary";
         iconFillIcon: "successItemPrimary";
-        loaderAppearance: "successPrimary";
+        loaderAppearance: "successPrimary solid";
     };
 };
 export { buttonAppearanceSuccess };

package/dist/types/components/Button/appearance/buttonSuccess.js

@@ -8,7 +8,7 @@ const buttonAppearanceSuccess = {
         iconAfterFillIcon: 'successItemQuaternary',
         iconBeforeFillIcon: 'successItemQuaternary',
         iconFillIcon: 'successItemQuaternary',
-        loaderAppearance: 'successTertiary',
+        loaderAppearance: 'successTertiary solid',
     },
     successPrimary: {
         fill: 'successPrimary',
@@ -18,7 +18,7 @@ const buttonAppearanceSuccess = {
         iconAfterFillIcon: 'successItemPrimary',
         iconBeforeFillIcon: 'successItemPrimary',
         iconFillIcon: 'successItemPrimary',
-        loaderAppearance: 'successPrimary',
+        loaderAppearance: 'successPrimary solid',
     },
 };
 export { buttonAppearanceSuccess };

package/dist/types/components/Button/appearance/buttonSurface.d.ts

@@ -7,7 +7,7 @@ declare const buttonAppearanceSurface: {
         iconAfterFillIcon: "surfaceItemQuaternary";
         iconBeforeFillIcon: "surfaceItemQuaternary";
         iconFillIcon: "surfaceItemQuaternary";
-        loaderAppearance: "surfaceTertiary";
+        loaderAppearance: "surfaceTertiary solid";
     };
     surfacePrimary: {
         fill: "surfacePrimary";
@@ -17,17 +17,17 @@ declare const buttonAppearanceSurface: {
         iconAfterFillIcon: "surfaceItemPrimary";
         iconBeforeFillIcon: "surfaceItemPrimary";
         iconFillIcon: "surfaceItemPrimary";
-        loaderAppearance: "surfacePrimary";
+        loaderAppearance: "surfacePrimary solid";
     };
     surfaceQuaternary: {
-        fill: "surfaceTertiary";
+        fill: "surfaceQuaternary";
         fillHover: "surfaceTertiary";
         labelTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
         iconAfterFillIcon: "surfaceItemPrimary";
         iconBeforeFillIcon: "surfaceItemPrimary";
         iconFillIcon: "surfaceItemPrimary";
-        loaderAppearance: "surfacePrimary";
+        loaderAppearance: "surfaceQuaternary solid";
     };
     surfaceSecondary: {
         fill: "surfaceSecondary";
@@ -37,7 +37,7 @@ declare const buttonAppearanceSurface: {
         iconAfterFillIcon: "surfaceItemPrimary";
         iconBeforeFillIcon: "surfaceItemPrimary";
         iconFillIcon: "surfaceItemPrimary";
-        loaderAppearance: "surfacePrimary";
+        loaderAppearance: "surfaceSecondary solid";
     };
     surfaceTertiary: {
         fill: "surfaceTertiary";
@@ -46,7 +46,7 @@ declare const buttonAppearanceSurface: {
         iconAfterFillIcon: "surfaceItemPrimary";
         iconBeforeFillIcon: "surfaceItemPrimary";
         iconFillIcon: "surfaceItemPrimary";
-        loaderAppearance: "surfacePrimary";
+        loaderAppearance: "surfaceTertiary solid";
     };
 };
 export { buttonAppearanceSurface };