@itcase/ui-web 1.9.89 → 1.9.91

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

@@ -1,3 +1,318 @@
-import { ButtonAppearance } from './Button.interface';
-declare const buttonAppearance: ButtonAppearance;
+declare const buttonAppearance: {
+    warningMutedPrimary: {
+        fill: "warningTertiary";
+        fillHover: "warningHoverPrimary";
+        labelTextColor: "warningTextSecondary";
+        labelTextColorHover: "warningTextPrimary";
+        borderColor: "warningBorderPrimary";
+        iconAfterFillIcon: "warningItemSecondary";
+        iconBeforeFillIcon: "warningItemSecondary";
+        iconFillIcon: "warningItemSecondary";
+        loaderAppearance: "warningTertiary";
+    };
+    warningPrimary: {
+        fill: "warningPrimary";
+        fillHover: "warningHoverPrimary";
+        labelTextColor: "warningTextPrimary";
+        labelTextColorHover: "warningTextPrimary";
+        iconAfterFillIcon: "warningItemPrimary";
+        iconBeforeFillIcon: "warningItemPrimary";
+        iconFillIcon: "warningItemPrimary";
+        loaderAppearance: "warningPrimary";
+    };
+    surfaceMutedPrimary: {
+        fill: "surfaceTertiary";
+        fillHover: "surfaceTertiary";
+        labelTextColor: "surfaceTextQuaternary";
+        borderColor: "surfaceBorderQuaternary";
+        iconAfterFillIcon: "surfaceItemQuaternary";
+        iconBeforeFillIcon: "surfaceItemQuaternary";
+        iconFillIcon: "surfaceItemQuaternary";
+        loaderAppearance: "surfaceTertiary";
+    };
+    surfacePrimary: {
+        fill: "surfacePrimary";
+        fillHover: "surfaceSecondary";
+        labelTextColor: "surfaceTextPrimary";
+        borderColor: "surfaceBorderTertiary";
+        iconAfterFillIcon: "surfaceItemPrimary";
+        iconBeforeFillIcon: "surfaceItemPrimary";
+        iconFillIcon: "surfaceItemPrimary";
+        loaderAppearance: "surfacePrimary";
+    };
+    surfaceQuaternary: {
+        fill: "surfaceTertiary";
+        fillHover: "surfaceTertiary";
+        labelTextColor: "surfaceTextPrimary";
+        borderColor: "surfaceBorderTertiary";
+        iconAfterFillIcon: "surfaceItemPrimary";
+        iconBeforeFillIcon: "surfaceItemPrimary";
+        iconFillIcon: "surfaceItemPrimary";
+        loaderAppearance: "surfacePrimary";
+    };
+    surfaceSecondary: {
+        fill: "surfaceSecondary";
+        fillHover: "surfaceTertiary";
+        labelTextColor: "surfaceTextPrimary";
+        borderColor: "surfaceBorderTertiary";
+        iconAfterFillIcon: "surfaceItemPrimary";
+        iconBeforeFillIcon: "surfaceItemPrimary";
+        iconFillIcon: "surfaceItemPrimary";
+        loaderAppearance: "surfacePrimary";
+    };
+    surfaceTertiary: {
+        fill: "surfaceTertiary";
+        fillHover: "surfaceSecondary";
+        labelTextColor: "surfaceTextPrimary";
+        iconAfterFillIcon: "surfaceItemPrimary";
+        iconBeforeFillIcon: "surfaceItemPrimary";
+        iconFillIcon: "surfaceItemPrimary";
+        loaderAppearance: "surfacePrimary";
+    };
+    successMutedPrimary: {
+        fill: "successTertiary";
+        fillHover: "successHoverPrimary";
+        labelTextColor: "successTextQuaternary";
+        labelTextColorHover: "successTextQuaternary";
+        borderColor: "successBorderQuaternary";
+        iconAfterFillIcon: "successItemQuaternary";
+        iconBeforeFillIcon: "successItemQuaternary";
+        iconFillIcon: "successItemQuaternary";
+        loaderAppearance: "successTertiary";
+    };
+    successPrimary: {
+        fill: "successPrimary";
+        fillHover: "successHoverPrimary";
+        labelTextColor: "successTextPrimary";
+        labelTextColorHover: "successTextPrimary";
+        iconAfterFillIcon: "successItemPrimary";
+        iconBeforeFillIcon: "successItemPrimary";
+        iconFillIcon: "successItemPrimary";
+        loaderAppearance: "successPrimary";
+    };
+    extraMutedPrimary: {
+        fill: "extraTertiary";
+        fillHover: "extraHoverPrimary";
+        labelTextColor: "extraTextQuaternary";
+        borderColor: "extraBorderSecondary";
+        iconAfterFillIcon: "extraItemQuaternary";
+        iconBeforeFillIcon: "extraItemQuaternary";
+        iconFillIcon: "extraItemQuaternary";
+        loaderAppearance: "extraPrimary";
+    };
+    extraPrimary: {
+        fill: "extraPrimary";
+        fillHover: "extraHoverPrimary";
+        labelTextColor: "extraTextPrimary";
+        iconAfterFillIcon: "extraItemPrimary";
+        iconBeforeFillIcon: "extraItemPrimary";
+        iconFillIcon: "extraItemPrimary";
+        loaderAppearance: "extraPrimary";
+    };
+    specialMutedPrimary: {
+        fill: "specialTertiary";
+        fillHover: "specialHoverPrimary";
+        labelTextColor: "specialTextSecondary";
+        borderColor: "specialBorderTertiary";
+        iconAfterFillIcon: "specialItemSecondary";
+        iconBeforeFillIcon: "specialItemSecondary";
+        iconFillIcon: "specialItemSecondary";
+        loaderAppearance: "specialTertiary";
+    };
+    specialPrimary: {
+        fill: "specialPrimary";
+        fillHover: "specialHoverPrimary";
+        labelTextColor: "specialTextPrimary";
+        iconAfterFillIcon: "specialItemPrimary";
+        iconBeforeFillIcon: "specialItemPrimary";
+        iconFillIcon: "specialItemPrimary";
+        loaderAppearance: "specialPrimary";
+    };
+    infoMutedPrimary: {
+        fill: "infoTertiary";
+        fillHover: "infoHoverTertiary";
+        labelTextColor: "infoTextSecondary";
+        labelTextColorHover: "infoTextSecondary";
+        borderColor: "infoBorderSecondary";
+        iconAfterFillIcon: "infoItemSecondary";
+        iconBeforeFillIcon: "infoItemSecondary";
+        iconFillIcon: "infoItemSecondary";
+        loaderAppearance: "infoTertiary";
+    };
+    infoPrimary: {
+        fill: "infoPrimary";
+        fillHover: "infoHoverPrimary";
+        labelTextColor: "infoTextPrimary";
+        labelTextColorHover: "infoTextPrimary";
+        borderColor: "infoBorderPrimary";
+        iconAfterFillIcon: "infoItemPrimary";
+        iconBeforeFillIcon: "infoItemPrimary";
+        iconFillIcon: "infoItemPrimary";
+        loaderAppearance: "infoPrimary";
+    };
+    infoSecondary: {
+        fill: "infoPrimary";
+        fillHover: "infoHoverPrimary";
+        labelTextColor: "infoTextSecondary";
+        labelTextColorHover: "infoTextSecondary";
+        borderColor: "infoBorderPrimary";
+        iconAfterFillIcon: "infoItemPrimary";
+        iconBeforeFillIcon: "infoItemPrimary";
+        iconFillIcon: "infoItemPrimary";
+        loaderAppearance: "infoPrimary";
+    };
+    errorMutedPrimary: {
+        fill: "errorTertiary";
+        fillHover: "errorHoverPrimary";
+        labelTextColor: "errorTextQuaternary";
+        labelTextColorHover: "errorTextQuaternary";
+        borderColor: "errorBorderSecondary";
+        iconAfterFillIcon: "errorItemQuaternary";
+        iconBeforeFillIcon: "errorItemQuaternary";
+        iconFillIcon: "errorItemQuaternary";
+        loaderAppearance: "errorTertiary";
+    };
+    errorPrimary: {
+        fill: "errorPrimary";
+        fillHover: "errorHoverPrimary";
+        labelTextColor: "errorTextPrimary";
+        labelTextColorHover: "errorTextPrimary";
+        iconAfterFillIcon: "errorItemPrimary";
+        iconBeforeFillIcon: "errorItemPrimary";
+        iconFillIcon: "errorItemPrimary";
+        loaderAppearance: "errorPrimary";
+    };
+    dangerMutedPrimary: {
+        fill: "dangerTertiary";
+        fillHover: "dangerHoverPrimary";
+        labelTextColor: "dangerTextQuaternary";
+        labelTextColorHover: "dangerTextQuaternary";
+        borderColor: "dangerBorderSecondary";
+        iconAfterFillIcon: "dangerItemQuaternary";
+        iconBeforeFillIcon: "dangerItemQuaternary";
+        iconFillIcon: "dangerItemQuaternary";
+        loaderAppearance: "dangerTertiary";
+    };
+    dangerPrimary: {
+        fill: "dangerPrimary";
+        fillHover: "dangerHoverPrimary";
+        labelTextColor: "dangerTextPrimary";
+        labelTextColorHover: "dangerTextPrimary";
+        iconAfterFillIcon: "dangerItemPrimary";
+        iconBeforeFillIcon: "dangerItemPrimary";
+        iconFillIcon: "dangerItemPrimary";
+        loaderAppearance: "dangerPrimary";
+    };
+    accentMutedPrimary: {
+        fill: "accentTertiary";
+        fillHover: "accentHoverTertiary";
+        labelTextColor: "accentTextQuaternary";
+        labelTextColorHover: "accentTextQuaternary";
+        borderColor: "accentBorderSecondary";
+        iconAfterFillIcon: "accentItemQuaternary";
+        iconBeforeFillIcon: "accentItemQuaternary";
+        iconFillIcon: "accentItemQuaternary";
+        loaderAppearance: "accentTertiary";
+    };
+    accentPrimary: {
+        fill: "accentPrimary";
+        fillHover: "accentHoverPrimary";
+        labelTextColor: "accentTextPrimary";
+        labelTextColorHover: "accentTextPrimary";
+        borderColor: "accentBorderPrimary";
+        iconAfterFillIcon: "accentItemPrimary";
+        iconBeforeFillIcon: "accentItemPrimary";
+        iconFillIcon: "accentItemPrimary";
+        loaderAppearance: "accentPrimary";
+    };
+    accentSecondary: {
+        fill: "accentPrimary";
+        fillHover: "accentHoverPrimary";
+        labelTextColor: "accentTextSecondary";
+        labelTextColorHover: "accentTextSecondary";
+        borderColor: "accentBorderPrimary";
+        iconAfterFillIcon: "accentItemPrimary";
+        iconBeforeFillIcon: "accentItemPrimary";
+        iconFillIcon: "accentItemPrimary";
+        loaderAppearance: "accentPrimary";
+    };
+    solid: {
+        borderColor: "none";
+    };
+    outlined: {
+        fill: "none";
+    };
+    full: {};
+    ghost: {
+        fill: "none";
+        borderColor: "none";
+    };
+    circular: {
+        shape: "circular";
+    };
+    rounded: {
+        shape: "rounded";
+    };
+    roundedXL: {
+        shape: "rounded";
+    };
+    roundedL: {
+        shape: "rounded";
+    };
+    roundedM: {
+        shape: "rounded";
+    };
+    roundedS: {
+        shape: "rounded";
+    };
+    sizeXXL: {
+        size: "xxl";
+        labelTextSize: "xl";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXL: {
+        size: "xl";
+        labelTextSize: "l";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeL: {
+        size: "l";
+        labelTextSize: "l";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeM: {
+        size: "m";
+        labelTextSize: "m";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeS: {
+        size: "s";
+        labelTextSize: "s";
+        iconAfterAppearanceSize: "size20_20";
+        iconBeforeAppearanceSize: "size20_20";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXS: {
+        size: "xs";
+        labelTextSize: "xs";
+        iconAfterAppearanceSize: "size16_16";
+        iconBeforeAppearanceSize: "size16_16";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXXS: {
+        size: "xxs";
+        labelTextSize: "xs";
+        iconAfterAppearanceSize: "size14_14";
+        iconBeforeAppearanceSize: "size14_14";
+        loaderAppearanceSize: "sizeL";
+    };
+};
 export { buttonAppearance };

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

@@ -1,5 +1,6 @@
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { AlignProps, AppearanceConfig, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceSizeKey, 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, 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 { IconProps } from '../Icon/Icon.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
@@ -88,4 +89,7 @@ type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
 };
 type ButtonConfig = AppearanceConfig<AppearanceKeysDefault, ButtonAppearanceProps>;
 type ButtonAppearance = ButtonConfig['appearance'];
-export type { ButtonAppearance, ButtonConfig, ButtonProps };
+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, };

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

@@ -11,8 +11,8 @@ import { useHoldProgress } from 'src/hooks';
 import { buttonAppearance } from './Button.appearance';
 const buttonConfig = {
     appearance: buttonAppearance,
-    setAppearance: function (appearanceConfig) {
-        this.appearance = appearanceConfig;
+    setAppearance: (appearanceConfig) => {
+        buttonConfig.appearance = appearanceConfig;
     },
 };
 const Button = React.forwardRef(function Button(props, ref) {
@@ -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 && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "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 && `${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] }) }));
 });
 export { Button, buttonConfig };

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

@@ -1,3 +1,36 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceAccent: ButtonAppearance;
+declare const buttonAppearanceAccent: {
+    accentMutedPrimary: {
+        fill: "accentTertiary";
+        fillHover: "accentHoverTertiary";
+        labelTextColor: "accentTextQuaternary";
+        labelTextColorHover: "accentTextQuaternary";
+        borderColor: "accentBorderSecondary";
+        iconAfterFillIcon: "accentItemQuaternary";
+        iconBeforeFillIcon: "accentItemQuaternary";
+        iconFillIcon: "accentItemQuaternary";
+        loaderAppearance: "accentTertiary";
+    };
+    accentPrimary: {
+        fill: "accentPrimary";
+        fillHover: "accentHoverPrimary";
+        labelTextColor: "accentTextPrimary";
+        labelTextColorHover: "accentTextPrimary";
+        borderColor: "accentBorderPrimary";
+        iconAfterFillIcon: "accentItemPrimary";
+        iconBeforeFillIcon: "accentItemPrimary";
+        iconFillIcon: "accentItemPrimary";
+        loaderAppearance: "accentPrimary";
+    };
+    accentSecondary: {
+        fill: "accentPrimary";
+        fillHover: "accentHoverPrimary";
+        labelTextColor: "accentTextSecondary";
+        labelTextColorHover: "accentTextSecondary";
+        borderColor: "accentBorderPrimary";
+        iconAfterFillIcon: "accentItemPrimary";
+        iconBeforeFillIcon: "accentItemPrimary";
+        iconFillIcon: "accentItemPrimary";
+        loaderAppearance: "accentPrimary";
+    };
+};
 export { buttonAppearanceAccent };

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

@@ -1,3 +1,24 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceDanger: ButtonAppearance;
+declare const buttonAppearanceDanger: {
+    dangerMutedPrimary: {
+        fill: "dangerTertiary";
+        fillHover: "dangerHoverPrimary";
+        labelTextColor: "dangerTextQuaternary";
+        labelTextColorHover: "dangerTextQuaternary";
+        borderColor: "dangerBorderSecondary";
+        iconAfterFillIcon: "dangerItemQuaternary";
+        iconBeforeFillIcon: "dangerItemQuaternary";
+        iconFillIcon: "dangerItemQuaternary";
+        loaderAppearance: "dangerTertiary";
+    };
+    dangerPrimary: {
+        fill: "dangerPrimary";
+        fillHover: "dangerHoverPrimary";
+        labelTextColor: "dangerTextPrimary";
+        labelTextColorHover: "dangerTextPrimary";
+        iconAfterFillIcon: "dangerItemPrimary";
+        iconBeforeFillIcon: "dangerItemPrimary";
+        iconFillIcon: "dangerItemPrimary";
+        loaderAppearance: "dangerPrimary";
+    };
+};
 export { buttonAppearanceDanger };

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

@@ -1,3 +1,24 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceError: ButtonAppearance;
+declare const buttonAppearanceError: {
+    errorMutedPrimary: {
+        fill: "errorTertiary";
+        fillHover: "errorHoverPrimary";
+        labelTextColor: "errorTextQuaternary";
+        labelTextColorHover: "errorTextQuaternary";
+        borderColor: "errorBorderSecondary";
+        iconAfterFillIcon: "errorItemQuaternary";
+        iconBeforeFillIcon: "errorItemQuaternary";
+        iconFillIcon: "errorItemQuaternary";
+        loaderAppearance: "errorTertiary";
+    };
+    errorPrimary: {
+        fill: "errorPrimary";
+        fillHover: "errorHoverPrimary";
+        labelTextColor: "errorTextPrimary";
+        labelTextColorHover: "errorTextPrimary";
+        iconAfterFillIcon: "errorItemPrimary";
+        iconBeforeFillIcon: "errorItemPrimary";
+        iconFillIcon: "errorItemPrimary";
+        loaderAppearance: "errorPrimary";
+    };
+};
 export { buttonAppearanceError };

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

@@ -1,3 +1,22 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceExtra: ButtonAppearance;
+declare const buttonAppearanceExtra: {
+    extraMutedPrimary: {
+        fill: "extraTertiary";
+        fillHover: "extraHoverPrimary";
+        labelTextColor: "extraTextQuaternary";
+        borderColor: "extraBorderSecondary";
+        iconAfterFillIcon: "extraItemQuaternary";
+        iconBeforeFillIcon: "extraItemQuaternary";
+        iconFillIcon: "extraItemQuaternary";
+        loaderAppearance: "extraPrimary";
+    };
+    extraPrimary: {
+        fill: "extraPrimary";
+        fillHover: "extraHoverPrimary";
+        labelTextColor: "extraTextPrimary";
+        iconAfterFillIcon: "extraItemPrimary";
+        iconBeforeFillIcon: "extraItemPrimary";
+        iconFillIcon: "extraItemPrimary";
+        loaderAppearance: "extraPrimary";
+    };
+};
 export { buttonAppearanceExtra };

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

@@ -1,3 +1,36 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceInfo: ButtonAppearance;
+declare const buttonAppearanceInfo: {
+    infoMutedPrimary: {
+        fill: "infoTertiary";
+        fillHover: "infoHoverTertiary";
+        labelTextColor: "infoTextSecondary";
+        labelTextColorHover: "infoTextSecondary";
+        borderColor: "infoBorderSecondary";
+        iconAfterFillIcon: "infoItemSecondary";
+        iconBeforeFillIcon: "infoItemSecondary";
+        iconFillIcon: "infoItemSecondary";
+        loaderAppearance: "infoTertiary";
+    };
+    infoPrimary: {
+        fill: "infoPrimary";
+        fillHover: "infoHoverPrimary";
+        labelTextColor: "infoTextPrimary";
+        labelTextColorHover: "infoTextPrimary";
+        borderColor: "infoBorderPrimary";
+        iconAfterFillIcon: "infoItemPrimary";
+        iconBeforeFillIcon: "infoItemPrimary";
+        iconFillIcon: "infoItemPrimary";
+        loaderAppearance: "infoPrimary";
+    };
+    infoSecondary: {
+        fill: "infoPrimary";
+        fillHover: "infoHoverPrimary";
+        labelTextColor: "infoTextSecondary";
+        labelTextColorHover: "infoTextSecondary";
+        borderColor: "infoBorderPrimary";
+        iconAfterFillIcon: "infoItemPrimary";
+        iconBeforeFillIcon: "infoItemPrimary";
+        iconFillIcon: "infoItemPrimary";
+        loaderAppearance: "infoPrimary";
+    };
+};
 export { buttonAppearanceInfo };

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

@@ -1,3 +1,21 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceShape: ButtonAppearance;
+declare const buttonAppearanceShape: {
+    circular: {
+        shape: "circular";
+    };
+    rounded: {
+        shape: "rounded";
+    };
+    roundedXL: {
+        shape: "rounded";
+    };
+    roundedL: {
+        shape: "rounded";
+    };
+    roundedM: {
+        shape: "rounded";
+    };
+    roundedS: {
+        shape: "rounded";
+    };
+};
 export { buttonAppearanceShape };

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

@@ -1,3 +1,52 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceSize: ButtonAppearance;
+declare const buttonAppearanceSize: {
+    sizeXXL: {
+        size: "xxl";
+        labelTextSize: "xl";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXL: {
+        size: "xl";
+        labelTextSize: "l";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeL: {
+        size: "l";
+        labelTextSize: "l";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeM: {
+        size: "m";
+        labelTextSize: "m";
+        iconAfterAppearanceSize: "size24_24";
+        iconBeforeAppearanceSize: "size24_24";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeS: {
+        size: "s";
+        labelTextSize: "s";
+        iconAfterAppearanceSize: "size20_20";
+        iconBeforeAppearanceSize: "size20_20";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXS: {
+        size: "xs";
+        labelTextSize: "xs";
+        iconAfterAppearanceSize: "size16_16";
+        iconBeforeAppearanceSize: "size16_16";
+        loaderAppearanceSize: "sizeL";
+    };
+    sizeXXS: {
+        size: "xxs";
+        labelTextSize: "xs";
+        iconAfterAppearanceSize: "size14_14";
+        iconBeforeAppearanceSize: "size14_14";
+        loaderAppearanceSize: "sizeL";
+    };
+};
 export { buttonAppearanceSize };

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

@@ -1,3 +1,22 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceSpecial: ButtonAppearance;
+declare const buttonAppearanceSpecial: {
+    specialMutedPrimary: {
+        fill: "specialTertiary";
+        fillHover: "specialHoverPrimary";
+        labelTextColor: "specialTextSecondary";
+        borderColor: "specialBorderTertiary";
+        iconAfterFillIcon: "specialItemSecondary";
+        iconBeforeFillIcon: "specialItemSecondary";
+        iconFillIcon: "specialItemSecondary";
+        loaderAppearance: "specialTertiary";
+    };
+    specialPrimary: {
+        fill: "specialPrimary";
+        fillHover: "specialHoverPrimary";
+        labelTextColor: "specialTextPrimary";
+        iconAfterFillIcon: "specialItemPrimary";
+        iconBeforeFillIcon: "specialItemPrimary";
+        iconFillIcon: "specialItemPrimary";
+        loaderAppearance: "specialPrimary";
+    };
+};
 export { buttonAppearanceSpecial };

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

@@ -1,3 +1,14 @@
-import { ButtonAppearance } from '../Button.interface';
-declare const buttonAppearanceStyle: ButtonAppearance;
+declare const buttonAppearanceStyle: {
+    solid: {
+        borderColor: "none";
+    };
+    outlined: {
+        fill: "none";
+    };
+    full: {};
+    ghost: {
+        fill: "none";
+        borderColor: "none";
+    };
+};
 export { buttonAppearanceStyle };