@itcase/ui 1.3.31 → 1.3.33

package/dist/{DropdownItem-FNOztnTT.js → DropdownItem-BiiEhR49.js}

@@ -3,11 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Divider = require('./Divider-Goh6mpPK.js');
-var Link = require('./Link-CxWmYMyL.js');
-var Text = require('./Text-Beslj4Ns.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Divider = require('./Divider-ImOOytuN.js');
+var Link = require('./Link-B38Hn4G2.js');
+var Text = require('./Text-C49zj3jO.js');
 
 function Dropdown(props) {
     var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
@@ -56,8 +56,8 @@ function Dropdown(props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
-    var alignmentClass = classGenerator.alignmentClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
@@ -76,20 +76,16 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // prettier-ignore
     var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'l' : _a, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, _b = propsGenerator.widthClass, widthClass = _b === void 0 ? 'fixed' : _b;
     // @ts-expect-error
     var dropdownItem = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass && "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize }))] }));
 }
-DropdownItem.defaultProps = {
-    width: 'fixed',
-    LinkComponent: 'a',
-    size: 'l',
-};
 
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;

package/dist/{DropdownItem-Bq-oPnWX.js → DropdownItem-g5jWbyJy.js}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
-import { D as Divider } from './Divider-DBvDCUqP.js';
-import { a as Link } from './Link-DN2LhPjD.js';
-import { T as Text } from './Text-JayJa3hj.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { D as Divider } from './Divider-BQcBkzt1.js';
+import { a as Link } from './Link-BhJ5BdyS.js';
+import { T as Text } from './Text-C6NSmetx.js';
 
 function Dropdown(props) {
     var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
@@ -54,8 +54,8 @@ function Dropdown(props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var alignmentClass = classGenerator.alignmentClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
@@ -74,19 +74,15 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // prettier-ignore
     var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'l' : _a, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, _b = propsGenerator.widthClass, widthClass = _b === void 0 ? 'fixed' : _b;
     // @ts-expect-error
     var dropdownItem = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass && "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
+    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize }))] }));
 }
-DropdownItem.defaultProps = {
-    width: 'fixed',
-    LinkComponent: 'a',
-    size: 'l',
-};
 
 export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };

package/dist/Group-Chtnas-J.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, children = props.children, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass &&
+            "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+exports.Group = Group;
+exports.groupAppearance = groupAppearance;
+exports.groupConfig = groupConfig;

package/dist/Group-DiMnEfge.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, children = props.children, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass &&
+            "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/{Icon-pUvizy3W.js → Icon-GVGrUu_Z.js}

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Link = require('./Link-CxWmYMyL.js');
-var Tooltip = require('./Tooltip-BDEyAnd-.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Link = require('./Link-B38Hn4G2.js');
+var Tooltip = require('./Tooltip-DpBQQoNo.js');
 
 var iconAppearance = {
     accent: {
@@ -50,8 +50,8 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
-    var alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, fillSizeClass = classGenerator.fillSizeClass, iconFillClass = classGenerator.iconFillClass, iconFillDisabledClass = classGenerator.iconFillDisabledClass, iconFillHoverClass = classGenerator.iconFillHoverClass, iconSizeClass = classGenerator.iconSizeClass, shapeClass = classGenerator.shapeClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillClass = propsGenerator.iconFillClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var iconStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));

package/dist/{Icon-BdHr6E6M.js → Icon-htF_V35Y.js}

@@ -1,12 +1,12 @@
-import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
-import { L as LinkWrapper } from './Link-DN2LhPjD.js';
-import { T as Tooltip } from './Tooltip-AodzD-7D.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { L as LinkWrapper } from './Link-BhJ5BdyS.js';
+import { T as Tooltip } from './Tooltip-BYgzNVYI.js';
 
 var iconAppearance = {
     accent: {
@@ -48,8 +48,8 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, fillSizeClass = classGenerator.fillSizeClass, iconFillClass = classGenerator.iconFillClass, iconFillDisabledClass = classGenerator.iconFillDisabledClass, iconFillHoverClass = classGenerator.iconFillHoverClass, iconSizeClass = classGenerator.iconSizeClass, shapeClass = classGenerator.shapeClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillClass = propsGenerator.iconFillClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var iconStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));

package/dist/{Image-BbBG_UGI.js → Image-BEGwuGBM.js}

@@ -2,13 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 function Image(props) {
     var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
-    var borderColorClass = classGenerator.borderColorClass, borderColorImageClass = classGenerator.borderColorImageClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, horizontalAlignClass = classGenerator.horizontalAlignClass, imageHeightClass = classGenerator.imageHeightClass, imageWidthClass = classGenerator.imageWidthClass, resizeModeClass = classGenerator.resizeModeClass, shapeClass = classGenerator.shapeClass, verticalAlignClass = classGenerator.verticalAlignClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt || title, src: src, style: imageStyles, title: title || alt, onError: onError }), overlay, caption, children] }), after] }));

package/dist/{Image-D-QHhsrC.js → Image-DWfyapuD.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
-import { useStyles } from './hooks/useStyles.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
 
 function Image(props) {
     var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
-    var classGenerator = useDeviceTargetClassGenerator(props);
-    var borderColorClass = classGenerator.borderColorClass, borderColorImageClass = classGenerator.borderColorImageClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, horizontalAlignClass = classGenerator.horizontalAlignClass, imageHeightClass = classGenerator.imageHeightClass, imageWidthClass = classGenerator.imageWidthClass, resizeModeClass = classGenerator.resizeModeClass, shapeClass = classGenerator.shapeClass, verticalAlignClass = classGenerator.verticalAlignClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
     return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt || title, src: src, style: imageStyles, title: title || alt, onError: onError }), overlay, caption, children] }), after] }));

package/dist/{Input-BrV5_NoV.js → Input-COFdaiTe.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 
 var inputAppearance = {
     dev: {
@@ -74,8 +74,8 @@ var Input = React.forwardRef(function Input(props, ref) {
     // @ts-expect-error
     var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
     // const stateConfig = state && inputConfig.state && inputConfig.state[state]
-    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderColorDisabledClass = classGenerator.borderColorDisabledClass, borderWidthClass = classGenerator.borderWidthClass, borderWidthDisabledClass = classGenerator.borderWidthDisabledClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = classGenerator.placeholderTextColorDisabledClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textColorDisabledClass = classGenerator.textColorDisabledClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, caretClass = propsGenerator.caretClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, widthClass = propsGenerator.widthClass;
     return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
             ? fillClass && "fill_".concat(fillClass)
             : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled

package/dist/{Input-ffioh1sj.js → Input-Dwvk-poq.js}

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 
 var inputAppearance = {
     dev: {
@@ -76,8 +76,8 @@ var Input = React.forwardRef(function Input(props, ref) {
     // @ts-expect-error
     var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
     // const stateConfig = state && inputConfig.state && inputConfig.state[state]
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderColorDisabledClass = classGenerator.borderColorDisabledClass, borderWidthClass = classGenerator.borderWidthClass, borderWidthDisabledClass = classGenerator.borderWidthDisabledClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = classGenerator.placeholderTextColorDisabledClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textColorDisabledClass = classGenerator.textColorDisabledClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, caretClass = propsGenerator.caretClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, widthClass = propsGenerator.widthClass;
     return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
             ? fillClass && "fill_".concat(fillClass)
             : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled