@itcase/ui 1.2.35 → 1.3.0

package/dist/components/Textarea.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
+import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -75,80 +76,18 @@ var textareaConfig = {
     },
 };
 function Textarea(props) {
-    var id = props.id, appearance = props.appearance, className = props.className, disabled = props.disabled, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'borderHover',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'textarea_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'textarea_shape_',
-        propsKey: 'shape',
-    });
-    var textSizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'textSize',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'textColor',
-    });
-    var caretClass = useDeviceTargetClass(props, {
-        prefix: 'caret-color_',
-        propsKey: 'caret',
-    });
-    var placeholderTextColorClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'placeholderTextColor',
-    });
-    var weightClass = useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'textWeight',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var appearanceConfig = appearance && textareaConfig.appearance && textareaConfig.appearance[appearance];
-    var stateConfig = useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
-    return (jsx("textarea", { className: clsx(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass ||
-            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
-                "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderColorHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderHover) &&
-                "border-color_hover_".concat(appearanceConfig.borderHover)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), placeholderTextColorClass ||
-            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
-                "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()) ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
-                "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), sizeClass, shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "textarea_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
-                "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorClass ||
-            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), disabled: disabled, id: id, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+    var id = props.id, appearance = props.appearance, className = props.className, disabled = props.disabled, placeholder = props.placeholder, 
+    // state,
+    value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
+    // const stateConfig = useMemo(
+    //   () => state && textareaConfig.state && textareaConfig.state[state],
+    //   [state, textareaConfig],
+    // )
+    // @ts-expect-error
+    var appearanceConfig = textareaConfig.appearance && textareaConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderHoverClass = classGenerator.borderHoverClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    return (jsx("textarea", { className: clsx(className, 'textarea', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass), sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: disabled, id: id, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
 }
 Textarea.defaultProps = {
     size: 'm',

package/dist/components/Tile.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-MPtjfQS8.js';
-import { T as Text } from '../Text-DGEJa_FL.js';
-import { T as Title } from '../Title-Bp-4wxkT.js';
+import { B as Badge } from '../Badge-DMRagi5O.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import { T as Title } from '../Title-CHgrIarR.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -27,50 +28,13 @@ var tileConfig = {
 };
 function Tile(props) {
     var children = props.children, direction = props.direction, after = props.after, appearance = props.appearance, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'tile_shape_',
-        propsKey: 'shape',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'borderColorHover',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
+    // @ts-expect-error
+    var appearanceConfig = tileConfig.appearance && tileConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass;
     // @ts-expect-error
     var tileStyles = useStyles(props).styles;
-    var appearanceConfig = appearance && tileConfig.appearance && tileConfig.appearance[appearance];
-    return (jsx("div", { className: clsx('tile', className, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "tile_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textAlign: titleTextAlign, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "tile_shape_".concat(shapeClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textAlign: titleTextAlign, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
 }
 Tile.defaultProps = {
     alignDirection: 'vertical',

package/dist/components/Title.js

@@ -1,11 +1,12 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Bp-4wxkT.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-CHgrIarR.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../hooks/useStyles.js';

package/dist/components/Tooltip.js

@@ -1,8 +1,9 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-BsMYxi_I.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-1Jbub0K6.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -12,5 +13,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-DGEJa_FL.js';
-import '../Title-Bp-4wxkT.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';

package/dist/components/Video.js

@@ -11,16 +11,16 @@ import 'react-responsive';
 import '../hooks/styleAttributes.js';
 
 function Video(props) {
-    var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
+    var id = props.id, children = props.children, position = props.position, className = props.className, mp4 = props.mp4, ogv = props.ogv, poster = props.poster, type = props.type, webm = props.webm;
     // @ts-expect-error
     var videoStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, muted: true, loop: true, poster: poster, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
+    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && (jsx("source", { 
                         // @ts-expect-error
-                        codecs: "vp8, vorbis" })), ogv && (jsx("source", { src: ogv, type: "video/ogg", 
+                        codecs: "vp8, vorbis", src: webm, type: "video/webm" })), ogv && (jsx("source", { 
                         // @ts-expect-error
-                        codecs: "theora, vorbis" })), mp4 && (jsx("source", { src: mp4, type: "video/mp4", 
+                        codecs: "theora, vorbis", src: ogv, type: "video/ogg" })), mp4 && (jsx("source", { 
                         // @ts-expect-error
-                        codecs: "avc1.42E01E, mp4a.40.2" }))] }), children] }));
+                        codecs: "avc1.42E01E, mp4a.40.2", src: mp4, type: "video/mp4" }))] }), children] }));
 }
 
 export { Video };

package/dist/components/Wrapper.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,37 +15,11 @@ import '../hooks/styleAttributes.js';
 
 function Wrapper(props) {
     var id = props.id, children = props.children, after = props.after, before = props.before, _a = props.className, className = _a === void 0 ? 'wrapper' : _a, _b = props.tag, Tag = _b === void 0 ? 'div' : _b, type = props.type;
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var resizeHorizontalClass = useDeviceTargetClass(props, {
-        prefix: 'wrapper_resize-horizontal_',
-        propsKey: 'horizontalResizing',
-    });
-    var resizeVerticalClass = useDeviceTargetClass(props, {
-        prefix: 'wrapper_resize-vertical_',
-        propsKey: 'verticalResizing',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var positionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    var wrapperPositionClass = useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'wrapperPosition',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, fillClass = classGenerator.fillClass, horizontalResizingClass = classGenerator.horizontalResizingClass, positionClass = classGenerator.positionClass, verticalResizingClass = classGenerator.verticalResizingClass, wrapperPositionClass = classGenerator.wrapperPositionClass;
     // @ts-expect-error
     var _c = useStyles(props), innerStyles = _c.inner, wrapperStyles = _c.styles;
-    return (jsx(Tag, { className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), id: id, style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass, alignClass, wrapperPositionClass), style: innerStyles, children: [before, children, after] }) }));
+    return (jsx(Tag, { className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass && "fill_".concat(fillClass), horizontalResizingClass && "wrapper_resize-horizontal_".concat(horizontalResizingClass), verticalResizingClass && "wrapper_resize-vertical_".concat(verticalResizingClass), positionClass && "position_".concat(positionClass)), id: id, style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), wrapperPositionClass && "position_".concat(wrapperPositionClass)), style: innerStyles, children: [before, children, after] }) }));
 }
 
 export { Wrapper };

package/dist/css/components/Avatar/Avatar.css

@@ -71,22 +71,23 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size) px;
-          height: $(size) px;
+          width: $(size)px;
+          height: $(size)px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__image {
-            width: $(size) px;
-            height: $(size) px;
+            width: $(size)px;
+            height: $(size)px;
             & .image__item {
-              width: $(size) px;
-              height: $(size) px;
+              width: $(size)px;
+              height: $(size)px;
             }
           }
         }

package/dist/css/components/Code/Code.css

@@ -36,11 +36,3 @@
     }
   }
 }
-:root {
-  --code-input-size-compact-width: 36px;
-  --code-input-size-compact-height: 36px;
-  --code-input-size-compact-padding: 5px;
-  --code-input-size-normal-width: 48px;
-  --code-input-size-normal-height: 48px;
-  --code-input-size-normal-padding: 10px 12px;
-}

package/dist/css/components/Code/Code.tokens.css

@@ -1,4 +1,7 @@
 :root {
+  --code-input-size-compact-width: 36px;
+  --code-input-size-compact-height: 36px;
+  --code-input-size-compact-padding: 5px;
   --code-input-size-normal-width: 48px;
   --code-input-size-normal-height: 48px;
   --code-input-size-normal-padding: 10px 12px;

package/dist/hooks/useDeviceTargetClassGenerator.interface.js

@@ -0,0 +1 @@
+

package/dist/hooks/useDeviceTargetClassGenerator.js

@@ -0,0 +1,95 @@
+import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
+import { useMemo } from 'react';
+import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import 'react/jsx-runtime';
+import './useMediaQueries.js';
+import 'react-responsive';
+
+function useDeviceTargetClassGenerator(componentProps, appearanceConfig) {
+    /** Generate a class depending on the user's device.
+     * Props:
+     *   - "componentProps" - "props" from component
+     *   - "appearanceConfig" - special appearance dictionary with styles presets
+     *
+     * Usage:
+     *   const appearanceConfig = (
+     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
+     *   )
+     *   const classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig)
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill')
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.getClass('fill', { prefix: 'fill_' })
+     *   "fillClass" - is "fill_surface-secondary"
+     *   ---------
+     *   const fillClass = classGenerator.fill / classGenerator.fillClass
+     *   "fill" / "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const { fill / fillClass } = classGenerator
+     *   "fill" / "fillClass" - is "surface-secondary"
+     **/
+    var _a = useUserDeviceContext(), isMobile = _a.isMobile, isTablet = _a.isTablet, isDesktop = _a.isDesktop;
+    var deviceTargetClassGenerator = useMemo(function () {
+        var classGenerator = {
+            getClass: function (propsKey, params) {
+                if (params === void 0) { params = {}; }
+                var _a = params.prefix, prefix = _a === void 0 ? '' : _a, _b = params.replace, replace = _b === void 0 ? [/([A-Z])/g, '-$1'] : _b;
+                // prettier-ignore
+                var deviceBasePart = ((isMobile && 'Mobile') ||
+                    (isTablet && 'Tablet') ||
+                    (isDesktop && 'Desktop') ||
+                    '');
+                var valueForDevice = componentProps["".concat(propsKey).concat(deviceBasePart)];
+                var valueDefault = componentProps[propsKey];
+                var appearanceForDevice = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig["".concat(propsKey).concat(deviceBasePart)];
+                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsKey];
+                // prettier-ignore
+                var targetClassValue = (
+                // Value for device from props is first priority
+                valueForDevice ||
+                    // Value without device from props is second priority
+                    valueDefault ||
+                    // Value for device from appearance config is third priority
+                    appearanceForDevice ||
+                    // Value without device from appearance config is last priority
+                    appearanceDefault);
+                if (targetClassValue) {
+                    var cleanClassValue = camelCase(String(targetClassValue));
+                    if (replace) {
+                        var replaceList = castArray(replace);
+                        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+                    }
+                    return "".concat(prefix).concat(cleanClassValue).toLowerCase();
+                }
+                // If target key not exists in props and appearance config - return empty class
+                return '';
+            },
+        };
+        var generatorProxyHandler = {
+            get: function (target, prop, receiver) {
+                var args = [];
+                for (var _i = 3; _i < arguments.length; _i++) {
+                    args[_i - 3] = arguments[_i];
+                }
+                if (typeof prop === 'string') {
+                    if (!Reflect.has(target, prop)) {
+                        if (prop.endsWith('Class')) {
+                            var shortProp = prop.substring(0, prop.lastIndexOf('Class'));
+                            return target.getClass(shortProp);
+                        }
+                        return target.getClass(prop);
+                    }
+                    return Reflect.get.apply(Reflect, __spreadArray([target, prop, receiver], args, false));
+                }
+                return prop;
+            },
+        };
+        return new Proxy(classGenerator, generatorProxyHandler);
+    }, [componentProps, appearanceConfig, isDesktop, isMobile, isTablet]);
+    return deviceTargetClassGenerator;
+}
+
+export { useDeviceTargetClassGenerator };

package/dist/stories/Appearance.stories.js

@@ -1,11 +1,10 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'
 
-tabConfig.setAppearance(tabAppearance)
 badgeConfig.setAppearance(badgeAppearance)
+tabConfig.setAppearance(tabAppearance)
 
 export default {
   argTypes: {

package/dist/stories/Badge.stories.js

@@ -9,7 +9,7 @@ import {
   textColorProps,
 } from '../../../constants'
 import { Badge, badgeConfig } from '../Badge'
-import { badgeAppearance } from '../Badge.appearance.'
+import { badgeAppearance } from '../Badge.appearance'
 
 badgeConfig.setAppearance(badgeAppearance)
 

package/dist/stories/Button.stories.js

@@ -1,6 +1,5 @@
 // import { icon24 } from '../../../___icons'
-import { Badge, badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
 import { Button, buttonConfig } from '../Button'
 import { buttonAppearance } from '../Button.appearance'
 import { argTypes } from './args'

package/dist/stories/Group.stories.js

@@ -6,14 +6,13 @@ import {
   widthProps,
   wrapProps,
 } from '../../../constants'
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { TabGroup } from '../TabGroup'
 
-tabConfig.setAppearance(tabAppearance)
 badgeConfig.setAppearance(badgeAppearance)
+tabConfig.setAppearance(tabAppearance)
 
 const tabs = {
   1: {

package/dist/stories/Icon.stories.js

@@ -8,14 +8,12 @@ import {
   shapeProps,
   sizePXProps,
 } from '../../../constants'
-import { Badge, badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { Badge, badgeAppearance, badgeConfig } from '../../Badge'
 import { Icon, iconConfig } from '../Icon'
 import { iconAppearance } from '../Icon.appearance'
 
-iconConfig.setAppearance(iconAppearance)
-
 badgeConfig.setAppearance(badgeAppearance)
+iconConfig.setAppearance(iconAppearance)
 
 export default {
   argTypes: {

package/dist/stories/Size.stories.js

@@ -1,5 +1,4 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'

package/dist/stories/State.stories.js

@@ -1,5 +1,4 @@
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Tab, tabConfig } from '../Tab'
 import { tabAppearance } from '../Tab.appearance'
 import { argTypes } from './args'

package/dist/stories/Tile.stories.js

@@ -17,8 +17,7 @@ import {
   titleSizeProps,
 } from '../../../constants'
 // import { icon24 } from '../../../___icons'
-import { badgeConfig } from '../../Badge'
-import { badgeAppearance } from '../../Badge/Badge.appearance.'
+import { badgeAppearance, badgeConfig } from '../../Badge'
 import { Button, buttonConfig } from '../../Button'
 import { buttonAppearance } from '../../Button/Button.appearance'
 import { Tile } from '../Tile'

package/dist/stories/appearance.mdx

@@ -14,7 +14,7 @@ import { Meta } from '@storybook/blocks'
 - а также конфиг:
 
 ```
-const badgeConfig: IBadgeConfig = {
+const badgeConfig: iBadgeConfig = {
   appearance: badgeAppearance,
   setAppearance: (newComponent) => {
     badgeConfig.appearance = newComponent
@@ -25,28 +25,23 @@ const badgeConfig: IBadgeConfig = {
 - записать в переменную сокращенное название для дальнейшего использования в коде компонента:
 
 ```
-const appearanceConfig =
-  appearance && badgeConfig.appearance && badgeConfig.appearance[appearance]
+const appearanceConfig = badgeConfig.appearance && badgeConfig.appearance[appearance]
 ```
 
 - использовать для пропсов:
 
 ```
-	fillClass ||
-	(appearanceConfig?.fill &&
-		`fill_${appearanceConfig.fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
+	fillClass && `fill_${fillClass}`,
 
-fillHoverClass ||
-	(appearanceConfig?.fillHover &&
-		`fill_hover_${appearanceConfig.fillHover}`?.replace(/([A-Z])/g, '-$1').toLowerCase()),
+fillHoverClass && `fill_hover_${fillHoverClass}`,
 
 textColor={textColor || appearanceConfig?.textColor}
 ```
 
-- описать варианты `Appearance` необходимо в `src/appearance/Badge/index.ts`
+- описать варианты `Appearance` необходимо в `src/components/Badge/Badge.appearance.ts`
 
 ```
-	import { badgeAppearanceType } from '../../components/Badge/Badge.interface'
+	import { badgeAppearanceType } from './Badge.interface'
 
 export const badgeAppearance: badgeAppearanceType = {
 	surfacePrimary: {

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

@@ -8,6 +8,7 @@ interface iAccordionItemEventData {
     isExpanded: boolean;
 }
 interface iAccordionProps extends iStyleAttributes {
+    [key: number | string | symbol]: any;
     borderColor?: tBorderColorProps;
     children?: Element | React.ReactNode;
     className?: string;
@@ -28,6 +29,7 @@ interface iAccordionProps extends iStyleAttributes {
 }
 interface iAccordionItemProps extends iStyleAttributes {
     id: number | string;
+    [key: number | string | symbol]: any;
     afterContent?: ReactNode;
     beforeContent?: ReactNode;
     borderColor?: tBorderColorProps;

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

@@ -1,4 +1,4 @@
-import { iAvatarConfig, IAvatarProps } from './Avatar.interface';
+import type { iAvatarConfig, iAvatarProps } from './Avatar.interface';
 declare const avatarConfig: iAvatarConfig;
-declare function Avatar(props: IAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar(props: iAvatarProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, avatarConfig };