@itcase/ui 1.2.35 → 1.3.1

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-export interface IVideoProps extends iStyleAttributes {
+export interface iVideoProps extends iStyleAttributes {
     id?: string;
     children?: ReactNode;
     className?: string;

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

@@ -1,3 +1,3 @@
-import { IWrapperProps } from './Wrapper.interface';
-declare function Wrapper(props: IWrapperProps): import("react/jsx-runtime").JSX.Element;
+import type { iWrapperProps } from './Wrapper.interface';
+declare function Wrapper(props: iWrapperProps): import("react/jsx-runtime").JSX.Element;
 export { Wrapper };

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

@@ -1,7 +1,9 @@
 import { CSSProperties, ElementType, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tAlignDirectionProps, tAlignProps, tFillProps, horizontalResizeModePropsType, positionPropsType, verticalResizeModePropsType } from '../../types';
-export interface IWrapperProps extends iStyleAttributes {
+import { horizontalResizeModePropsType, positionPropsType, tAlignDirectionProps, tAlignProps, tFillProps, verticalResizeModePropsType } from '../../types';
+export interface iWrapperProps extends iStyleAttributes {
+    id?: string;
+    [key: number | string | symbol]: any;
     after?: ReactNode;
     align?: tAlignProps;
     alignDirection?: tAlignDirectionProps;
@@ -10,7 +12,6 @@ export interface IWrapperProps extends iStyleAttributes {
     className?: string;
     fill?: tFillProps;
     horizontalResizing?: horizontalResizeModePropsType;
-    id?: string;
     position?: positionPropsType;
     style?: CSSProperties;
     tag?: ElementType;

package/dist/types/hooks/useDeviceTargetClassGenerator.d.ts

@@ -0,0 +1,3 @@
+import type { iAppearanceConfig, iComponentProps, iDeviceTargetClassGenerator } from './useDeviceTargetClassGenerator.interface';
+declare function useDeviceTargetClassGenerator(componentProps: iComponentProps, appearanceConfig?: iAppearanceConfig): iDeviceTargetClassGenerator;
+export { useDeviceTargetClassGenerator };

package/dist/types/hooks/useDeviceTargetClassGenerator.interface.d.ts

@@ -0,0 +1,20 @@
+interface iComponentProps {
+    [key: string]: number | string;
+}
+interface iAppearanceConfig {
+    [key: string]: number | string;
+}
+interface iGeneratorGetClassParams {
+    prefix?: string;
+    replace?: [RegExp, string];
+}
+type tGetClass = (propsKey: keyof iComponentProps, params?: iGeneratorGetClassParams) => string;
+interface iDeviceTargetClassGenerator {
+    [key: string]: string;
+    /**
+     * Function to create class from props or appearance config by passing key and prefix(optional)
+     * @return string: `${prefix}${formattedPropsValue}.toLowerCase()` like "border-color_item-primary"
+     */
+    getClass: tGetClass;
+}
+export type { iComponentProps, iAppearanceConfig, iGeneratorGetClassParams, iDeviceTargetClassGenerator, };

package/dist/types/types/componentProps/appearanceKeys.d.ts

@@ -1 +1 @@
-export type tAppearanceKeysDefault = 'accent' | 'accentSecondary' | 'any' | 'cantLoadData' | 'custom' | 'default' | 'dev' | 'disabled' | 'error' | 'fail' | 'gradientPrimary' | 'l' | 'm' | 'primary' | 'refresh' | 's' | 'search' | 'secondary' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'warning' | 'xl' | 'xs';
+export type tAppearanceKeysDefault = 'accent' | 'accentSecondary' | 'accentTertiary' | 'any' | 'cantLoadData' | 'custom' | 'default' | 'dev' | 'disabled' | 'error' | 'fail' | 'gradientPrimary' | 'l' | 'm' | 'primary' | 'refresh' | 's' | 'search' | 'secondary' | 'success' | 'surface' | 'surfaceDisabled' | 'surfacePrimary' | 'surfaceQuaternary' | 'surfaceSecondary' | 'surfaceTertiary' | 'warning' | 'xl' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.35",
+  "version": "1.3.1",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -41,9 +41,9 @@
       "import": "./dist/appearance/*.js",
       "require": "./dist/cjs/appearance/*.js"
     },
-    "./types/components/*/*.interface": {
-      "import": "./dist/types/components/*/*.interface.d.ts",
-      "types": "./dist/types/components/*/*.interface.d.ts"
+    "./types": {
+      "import": "./dist/types/types/index.d.ts",
+      "types": "./dist/types/types/index.d.ts"
     },
     "./components/*": {
       "types": "./dist/types/components/*/index.d.ts",
@@ -97,9 +97,10 @@
   },
   "dependencies": {
     "@itcase/common": "^1.2.17",
-    "@itcase/icons": "^1.0.7",
+    "@itcase/icons": "^1.0.8",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^11.13.5",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "rc-slider": "^11.1.7",
@@ -126,7 +127,7 @@
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
@@ -142,17 +143,17 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-interactions": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/addon-onboarding": "^8.4.6",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.4.6",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-webpack5": "^8.4.6",
-    "@storybook/test": "^8.4.6",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18",
@@ -166,8 +167,8 @@
     "conventional-changelog-conventionalcommits": "^8.0.0",
     "eslint": "9.16.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.2.10",
-    "npm": "^10.9.1",
+    "lint-staged": "^15.2.11",
+    "npm": "^10.9.2",
     "postcss": "^8.4.49",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
@@ -190,13 +191,13 @@
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.4.2",
-    "rollup": "^4.28.0",
+    "rollup": "^4.28.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.0",
-    "storybook": "^8.4.6",
+    "storybook": "^8.4.7",
     "stylelint": "^16.11.0",
     "typescript": "^5.7.2"
   }

package/dist/Badge-BZf2D83-.js

@@ -1,114 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-C-scXvy7.js');
-
-var badgeAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        textColor: 'accentTextPrimary',
-    },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        textColor: 'primaryTextPrimary',
-    },
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextInverse',
-    },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        textColor: 'secondaryTextPrimary',
-    },
-    disabled: {
-        fill: 'accentDisabled',
-        fillHover: 'none',
-        textColor: 'accentTextDisabled',
-    },
-};
-
-var badgeConfig = {
-    appearance: badgeAppearance,
-    setAppearance: function (newComponent) {
-        badgeConfig.appearance = newComponent;
-    },
-};
-function Badge(props) {
-    var _a, _b;
-    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode, textColor = props.textColor, textSize = props.textSize, value = props.value;
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'borderColorHover',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'badge_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'badge_shape_',
-        propsKey: 'shape',
-    });
-    // @ts-expect-error
-    var badgeStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && badgeConfig.appearance && badgeConfig.appearance[appearance];
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'badge', !value && 'badge_type_status', mode && "badge_mode_".concat(mode), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                ((_a = "fill_".concat(appearanceConfig.fill)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase())), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
-            (value && (jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
-}
-Badge.defaultProps = {
-    shape: 'circular',
-    size: 'm',
-};
-
-exports.Badge = Badge;
-exports.badgeAppearance = badgeAppearance;
-exports.badgeConfig = badgeConfig;

package/dist/Button-BmE4TGuv.js

@@ -1,154 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-gTZ0QO8I.js');
-var Link = require('./Link-CqWzwh8V.js');
-var Loader = require('./Loader-1ZnukBPK.js');
-var Text = require('./Text-C-scXvy7.js');
-
-var buttonAppearance = {
-    dev: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        label: 'Button',
-        labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'l',
-        shape: 'rounded',
-        size: 'xxl',
-    },
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        labelTextColor: 'accentTextPrimary',
-        labelTextColorHover: 'accentTextPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
-    },
-    accentSecondary: {
-        fill: 'accentSecondary',
-        fillHover: 'accentPrimaryHover',
-        labelTextColor: 'accentTextPrimary',
-        labelTextColorHover: 'accentTextPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
-    },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
-    },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelTextColor: 'secondaryTextPrimary',
-    },
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceDisabled: {
-        fill: 'surfaceDisabled',
-        fillHover: 'surfaceDisabled',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-};
-
-var buttonConfig = {
-    appearance: buttonAppearance,
-    setAppearance: function (newComponent) {
-        buttonConfig.appearance = newComponent;
-    },
-};
-var Button = React.forwardRef(function Button(props, ref) {
-    var children = props.children; props.width; var isDisabled = props.isDisabled, after = props.after, appearance = props.appearance, Badge = props.Badge, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, href = props.href, _b = props.htmlType, htmlType = _b === void 0 ? 'button' : _b, icon = props.icon, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterShape = props.iconAfterShape, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconBeforeShape = props.iconBeforeShape, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconShape = props.iconShape, iconSize = props.iconSize, iconSrc = props.iconSrc, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextSizeMobile = props.labelTextSizeMobile, 
-    // @ts-expect-error
-    labelTextTruncate = props.labelTextTruncate, labelTextWeight = props.labelTextWeight, 
-    // @ts-expect-error
-    labelTextWidth = props.labelTextWidth, labelTextWrap = props.labelTextWrap, link = props.link, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, _c = props.loaderSet, loaderSet = _c === void 0 ? 'simple' : _c, _d = props.loading, loading = _d === void 0 ? false : _d, rel = props.rel, set = props.set; props.size; var target = props.target, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'button_width_',
-        propsKey: 'width',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'button_size_',
-        propsKey: 'size',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'button_shape_',
-        propsKey: 'shape',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    // @ts-expect-error
-    var _f = useStyles.useStyles(props), labelStyles = _f.label, buttonStyles = _f.styles;
-    var appearanceConfig = appearance && buttonConfig.appearance && buttonConfig.appearance[appearance];
-    return (jsxRuntime.jsx(Link.LinkWrapper, { className: clsx(className, 'button', label && 'button_type_label', borderColorClass ? 'button_set_outlined' : set ? "button_set_".concat(set) : 'button_set_filled', borderWidthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
-                "border-width_".concat(appearanceConfig.borderWidth)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderType) &&
-                "border-type_".concat(appearanceConfig.borderType).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', !label &&
-            (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) &&
-            'button_type_icon', label &&
-            (after ||
-                before ||
-                icon ||
-                iconAfter ||
-                iconAfterSrc ||
-                iconBefore ||
-                iconBeforeSrc ||
-                iconSrc) &&
-            'button_type_with-icon', loading && 'button_state_loading'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsxRuntime.jsx(Loader.Loader, { className: clsx(className, 'button__loader', shapeClass), fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, sizeMobile: labelTextSizeMobile, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
-});
-
-exports.Button = Button;
-exports.buttonAppearance = buttonAppearance;
-exports.buttonConfig = buttonConfig;

package/dist/Button-f0zWwezF.js

@@ -1,150 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-21rsw8YW.js';
-import { a as LinkWrapper } from './Link-CeQuavin.js';
-import { L as Loader } from './Loader-CuxFXcNG.js';
-import { T as Text } from './Text-DGEJa_FL.js';
-
-var buttonAppearance = {
-    dev: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        label: 'Button',
-        labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'l',
-        shape: 'rounded',
-        size: 'xxl',
-    },
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        labelTextColor: 'accentTextPrimary',
-        labelTextColorHover: 'accentTextPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
-    },
-    accentSecondary: {
-        fill: 'accentSecondary',
-        fillHover: 'accentPrimaryHover',
-        labelTextColor: 'accentTextPrimary',
-        labelTextColorHover: 'accentTextPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
-    },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
-    },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelTextColor: 'secondaryTextPrimary',
-    },
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
-    },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceDisabled: {
-        fill: 'surfaceDisabled',
-        fillHover: 'surfaceDisabled',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-};
-
-var buttonConfig = {
-    appearance: buttonAppearance,
-    setAppearance: function (newComponent) {
-        buttonConfig.appearance = newComponent;
-    },
-};
-var Button = React.forwardRef(function Button(props, ref) {
-    var children = props.children; props.width; var isDisabled = props.isDisabled, after = props.after, appearance = props.appearance, Badge = props.Badge, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, href = props.href, _b = props.htmlType, htmlType = _b === void 0 ? 'button' : _b, icon = props.icon, iconAfter = props.iconAfter, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterShape = props.iconAfterShape, iconAfterSize = props.iconAfterSize, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconBeforeShape = props.iconBeforeShape, iconBeforeSize = props.iconBeforeSize, iconBeforeSrc = props.iconBeforeSrc, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconShape = props.iconShape, iconSize = props.iconSize, iconSrc = props.iconSrc, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextSizeMobile = props.labelTextSizeMobile, 
-    // @ts-expect-error
-    labelTextTruncate = props.labelTextTruncate, labelTextWeight = props.labelTextWeight, 
-    // @ts-expect-error
-    labelTextWidth = props.labelTextWidth, labelTextWrap = props.labelTextWrap, link = props.link, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, _c = props.loaderSet, loaderSet = _c === void 0 ? 'simple' : _c, _d = props.loading, loading = _d === void 0 ? false : _d, rel = props.rel, set = props.set; props.size; var target = props.target, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'button_width_',
-        propsKey: 'width',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'button_size_',
-        propsKey: 'size',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'button_shape_',
-        propsKey: 'shape',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var elevationClass = useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    // @ts-expect-error
-    var _f = useStyles(props), labelStyles = _f.label, buttonStyles = _f.styles;
-    var appearanceConfig = appearance && buttonConfig.appearance && buttonConfig.appearance[appearance];
-    return (jsx(LinkWrapper, { className: clsx(className, 'button', label && 'button_type_label', borderColorClass ? 'button_set_outlined' : set ? "button_set_".concat(set) : 'button_set_filled', borderWidthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
-                "border-width_".concat(appearanceConfig.borderWidth)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderType) &&
-                "border-type_".concat(appearanceConfig.borderType).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', !label &&
-            (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) &&
-            'button_type_icon', label &&
-            (after ||
-                before ||
-                icon ||
-                iconAfter ||
-                iconAfterSrc ||
-                iconBefore ||
-                iconBeforeSrc ||
-                iconSrc) &&
-            'button_type_with-icon', loading && 'button_state_loading'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsx(Loader, { className: clsx(className, 'button__loader', shapeClass), fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, sizeMobile: labelTextSizeMobile, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
-});
-
-export { Button as B, buttonAppearance as a, buttonConfig as b };