@itcase/ui 1.2.35 → 1.3.0

package/dist/cjs/components/Caption.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,21 +17,11 @@ require('../hooks/styleAttributes.js');
 
 function Caption(props) {
     var children = props.children, className = props.className;
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill-gradient_',
-        propsKey: 'fillGradient',
-    });
-    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'caption_position_',
-        propsKey: 'position',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, positionClass = classGenerator.positionClass;
     // @ts-expect-error
     var captionStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'caption', positionClass, fillClass, fillGradientClass), style: captionStyles, children: children }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'caption', positionClass && "caption_position_".concat(positionClass), fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), style: captionStyles, children: children }));
 }
 
 exports.Caption = Caption;

package/dist/cjs/components/Card.js

@@ -2,9 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Image = require('../../Image-DrUlRMHa.js');
-var Text = require('../../Text-C-scXvy7.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var Image = require('../../Image-6dFSePnG.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -18,15 +19,9 @@ require('../hooks/styleAttributes.js');
 
 function Card(props) {
     var children = props.children, className = props.className, image = props.image, _a = props.imageShape, imageShape = _a === void 0 ? 'rounded' : _a, size = props.size, src = props.src, text = props.text, _b = props.textColor, textColor = _b === void 0 ? 'surfaceTextPrimary' : _b, _c = props.textSize, textSize = _c === void 0 ? 'p' : _c, textTag = props.textTag, title = props.title, _d = props.titleColor, titleColor = _d === void 0 ? 'surfaceTextPrimary' : _d, _e = props.titleSize, titleSize = _e === void 0 ? 'h5' : _e, _f = props.titleTag, titleTag = _f === void 0 ? 'span' : _f, type = props.type, onClick = props.onClick;
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'card_shape_',
-        propsKey: 'shape',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'resize-horizontal_',
-        propsKey: 'width',
-    });
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'card', shapeClass, size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass), onClick: onClick, children: jsxRuntime.jsxs("div", { className: "card__wrapper", children: [image, src && jsxRuntime.jsx(Image.Image, { className: "card__image", shape: imageShape, src: src }), jsxRuntime.jsxs("div", { className: "card__data", children: [title && (jsxRuntime.jsx(Text.Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'card', shapeClass && "card_shape_".concat(shapeClass), size && "card_size_".concat(size), type && "card_type_".concat(type), widthClass && "resize-horizontal_".concat(widthClass)), onClick: onClick, children: jsxRuntime.jsxs("div", { className: "card__wrapper", children: [image, src && jsxRuntime.jsx(Image.Image, { className: "card__image", shape: imageShape, src: src }), jsxRuntime.jsxs("div", { className: "card__data", children: [title && (jsxRuntime.jsx(Text.Text, { className: "card__data-title", size: titleSize, tag: titleTag, textColor: titleColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "card__data-desc", size: textSize, tag: textTag, textColor: textColor, children: text }))] }), children] }) }));
 }
 
 exports.Card = Card;

package/dist/cjs/components/Cell.js

@@ -2,11 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-gTZ0QO8I.js');
-var Label = require('../../Label-Ddjf4F18.js');
-var Text = require('../../Text-C-scXvy7.js');
+var Icon = require('../../Icon-hqYZoh4h.js');
+var Label = require('../../Label-HKRKV3mn.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,69 +17,18 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-CUL79Nsx.js');
-require('../../Title-BatSai-G.js');
+require('../../Link-DGj-cNje.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 function Cell(props) {
     var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_shape_',
-        propsKey: 'shape',
-    });
-    var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'bgFill',
-    });
-    var bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'bgFillHover',
-    });
-    var bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'bgFillActive',
-    });
-    var bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'bgFillDisabled',
-    });
-    var bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cell_shape_',
-        propsKey: 'bgShape',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_direction_',
-        propsKey: 'direction',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var bgFillActiveClass = classGenerator.bgFillActiveClass, bgFillClass = classGenerator.bgFillClass, bgFillDisabledClass = classGenerator.bgFillDisabledClass, bgFillHoverClass = classGenerator.bgFillHoverClass, bgShapeClass = classGenerator.bgShapeClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var cellStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, gapClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass, isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Checkbox.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-C-scXvy7.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -48,68 +49,19 @@ var checkboxConfig = {
 };
 function Checkbox(props) {
     var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    var appearanceConfig = checkboxConfig.appearance && checkboxConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, stateBorderWidthClass = classGenerator.stateBorderWidthClass, stateShapeClass = classGenerator.stateShapeClass, widthClass = classGenerator.widthClass;
+    var stateFillClass = classGenerator.getClass(checked ? 'stateFillChecked' : 'stateFill', {
         prefix: 'fill_',
-        propsKey: 'fill',
     });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'checkbox_shape_',
-        propsKey: 'shape',
-    });
-    var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'checkbox__state_shape_',
-        propsKey: 'stateShape',
-    });
-    var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillChecked' : 'stateFill',
-    });
-    var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled',
-    });
-    var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'checkbox_checkmark_fill_',
-        propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill',
-    });
-    var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'stateBorderWidth',
-    });
-    var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor',
-    });
-    var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var appearanceConfig = appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance];
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass ||
-                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
-                        "checkbox_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
-                            .replace(/([A-Z])/g, '-$1')
-                            .toLowerCase())), children: [jsxRuntime.jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
+    var stateFillDisabledClass = classGenerator.getClass(checked ? 'stateFillDisabledChecked' : 'stateFillDisabled', { prefix: 'fill_' });
+    var stateCheckmarkFillClass = classGenerator.getClass(disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill', { prefix: 'checkbox_checkmark_fill_' });
+    var stateBorderColorClass = classGenerator.getClass(checked ? 'stateBorderColorChecked' : 'stateBorderColor', { prefix: 'border-color_' });
+    var stateBorderColorDisabledClass = classGenerator.getClass(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsxRuntime.jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
-                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
-                            ? stateBorderColorDisabledClass
-                            : stateBorderColorClass ||
-                                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderColor) &&
-                                    "border-color_".concat(appearanceConfig.stateBorderColor)
-                                        .replace(/([A-Z])/g, '-$1')
-                                        .toLowerCase()), stateShapeClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateShape) &&
-                                "checkbox__state_shape_".concat(appearanceConfig.stateShape)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase()), stateBorderWidthClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateBorderWidth) &&
-                                "border-width_".concat(appearanceConfig.stateBorderWidth)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase())), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Chips.js

@@ -2,9 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-C-scXvy7.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -62,62 +63,15 @@ var chipsConfig = {
 };
 function Chips(props) {
     var children = props.children, isActive = props.isActive, appearance = props.appearance, className = props.className, _a = props.label, label = _a === void 0 ? '' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
-    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'chips_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'chips_shape_',
-        propsKey: 'shape',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
+    // @ts-expect-error
+    var appearanceConfig = chipsConfig.appearance && chipsConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, cursorClass = classGenerator.cursorClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;
     // @ts-expect-error
     var chipsStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && chipsConfig.appearance && chipsConfig.appearance[appearance];
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
-            ? fillActiveClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
-                    "fill_".concat(appearanceConfig.fillActive).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, borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "chips_type_".concat(type), cursorClass, onClick && 'cursor_type_pointer'), style: chipsStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textWeight: labelTextWeight, textColor: isActive
+            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
+            : fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), type && "chips_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), style: chipsStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textWeight: labelTextWeight, textColor: isActive
                         ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                         : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children] }) }));
 }

package/dist/cjs/components/Choice.js

@@ -3,24 +3,24 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-gTZ0QO8I.js');
-var Loader = require('../../Loader-1ZnukBPK.js');
-var Text = require('../../Text-C-scXvy7.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var Icon = require('../../Icon-hqYZoh4h.js');
+var Loader = require('../../Loader-Dn036JwE.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-CUL79Nsx.js');
-require('../../Title-BatSai-G.js');
+require('../../Link-DGj-cNje.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 var choiceAppearance = {
     dev: {
@@ -50,90 +50,24 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         var isChecked = isCheckbox ? event.target.checked : true;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'choice_shape_',
-        propsKey: 'shape',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_disabled_',
-        propsKey: 'fillActiveDisabled',
-    });
-    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'choice_wrap_',
-        propsKey: 'wrap',
-    });
-    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'row-gap_',
-        propsKey: 'rowGap',
-    });
-    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'column-gap_',
-        propsKey: 'columnGap',
-    });
-    var appearanceConfig = appearance && choiceConfig.appearance && choiceConfig.appearance[appearance];
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "choice_shape_".concat(appearanceConfig.shape).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()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: clsx(className, 'choice__wrapper', gapClass, rowGapClass, columnGapClass, wrapClass), children: options.map(function (item) {
+    // @ts-expect-error
+    var appearanceConfig = choiceConfig.appearance && choiceConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, columnGapClass = classGenerator.columnGapClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveDisabledClass = classGenerator.fillActiveDisabledClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, rowGapClass = classGenerator.rowGapClass, shapeClass = classGenerator.shapeClass, wrapClass = classGenerator.wrapClass;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: clsx(className, 'choice__wrapper', gapClass && "gap_".concat(gapClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass), wrapClass && "choice_wrap_".concat(wrapClass)), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)
                     : String(item.value) === String(active);
                 return (jsxRuntime.jsxs("div", { className: clsx('choice__item', !isDisabled
-                        ? fillClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
-                        : fillDisabledClass, !isDisabled &&
-                        (fillHoverClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                                "fill_hover_".concat(appearanceConfig.fillHover)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase())), !isActive && isDisabled && 'choice__item_state_disabled', isActive
+                        ? fillClass && "fill_".concat(fillClass)
+                        : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, !isActive && isDisabled && 'choice__item_state_disabled', isActive
                         ? !isDisabled
-                            ? fillActiveClass ||
-                                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
-                                    "fill_active_".concat(appearanceConfig.fillActive)
-                                        .replace(/([A-Z])/g, '-$1')
-                                        .toLowerCase())
-                            : fillActiveDisabledClass
+                            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
+                            : fillActiveDisabledClass && "fill_active_disabled_".concat(fillActiveDisabledClass)
                         : !isDisabled
-                            ? fillClass
-                            : fillDisabledClass, isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
+                            ? fillClass && "fill_".concat(fillClass)
+                            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
                                         ? !isDisabled
                                             ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                             : labelTextActiveColorDisabled

package/dist/cjs/components/Code.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var OtpInput = require('react-otp-input');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -25,86 +25,14 @@ var codeConfig = {
 function Code(props) {
     var after = props.after, appearance = props.appearance, before = props.before, className = props.className, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === void 0 ? 6 : _a, _b = props.inputPlaceholder, inputPlaceholder = _b === void 0 ? 0 : _b, _c = props.inputType, inputType = _c === void 0 ? 'number' : _c, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var _d = React.useState(''), otp = _d[0], setOtp = _d[1];
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'inputFill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'inputFillHover',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'code__input_size_',
-        propsKey: 'inputSize',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'code__input_shape_',
-        propsKey: 'inputShape',
-    });
-    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'inputTextSize',
-    });
-    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'inputTextColor',
-    });
-    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'caret-color_',
-        propsKey: 'inputCaretColor',
-    });
-    var placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'inputPlaceholderTextColor',
-    });
-    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'inputTextWeight',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'inputBorderWidth',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'inputBorderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'inputBorderColorHover',
-    });
-    var borderColorFocusClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_focus_',
-        propsKey: 'inputBorderFocusColor',
-    });
-    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var appearanceConfig = appearance && choiceConfig.appearance && choiceConfig.appearance[appearance];
+    // @ts-expect-error
+    var appearanceConfig = codeConfig.appearance && codeConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var gapClass = classGenerator.gapClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = classGenerator.inputBorderFocusColorClass, inputBorderWidthClass = classGenerator.inputBorderWidthClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputFillHoverClass = classGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = classGenerator.inputPlaceholderTextColorClass, inputShapeClass = classGenerator.inputShapeClass, inputSizeClass = classGenerator.inputSizeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, inputTextWeightClass = classGenerator.inputTextWeightClass, widthClass = classGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps) {
-        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', caretClass, 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()), placeholderClass, shapeClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                    "code__input_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 ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                    "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, borderWidthClass, borderColorClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                    "border-color_".concat(appearanceConfig.borderColor)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase()), borderColorHoverClass, borderColorFocusClass, sizeClass), autoComplete: "one-time-code", onBlur: function (event) {
+        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
+                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass && "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass && "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass)), autoComplete: "one-time-code", onBlur: function (event) {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
             }, onFocus: function (event) {
@@ -115,7 +43,7 @@ function Code(props) {
     React.useEffect(function () {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass && "gap_".concat(gapClass)), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
 }
 Code.defaultProps = {
     inputBorderColor: 'surfaceBorderTertiary',