@itcase/ui 1.2.18 → 1.2.20

package/dist/{Group-BDuYmoBK.js → Group-B2oTJg0t.js}

@@ -122,7 +122,7 @@ var Group = React.forwardRef(function Group(props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass, onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 });
 
 exports.Group = Group;

package/dist/{Group-12uup5mu.js → Group-CVUfaHaS.js}

@@ -120,7 +120,7 @@ var Group = React.forwardRef(function Group(props, ref) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass, onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 });
 
 export { Group as G, groupConfig as g };

package/dist/cjs/components/Accordion.js

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var castArray = require('lodash/castArray');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
+var Divider = require('../../Divider-BjB5MD6u.js');
 var Icon = require('../../Icon-D-zjcPll.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/camelCase');
@@ -52,7 +53,7 @@ const icon16 = {
 };
 
 function AccordionItem(props) {
-    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
     var onClickTitle = React.useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -101,7 +102,7 @@ function AccordionItem(props) {
     });
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
                     (content && (jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 

package/dist/cjs/components/Choice.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -20,6 +19,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('../../Tooltip-DkTKx9n-.js');
 require('../../Title-zwP6c2U2.js');
 
@@ -30,7 +30,7 @@ var choiceConfig = {
     },
 };
 var Choice = React.forwardRef(function Choice(props, ref) {
-    var gap = props.gap, _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = React.useRef(null);
     var optionsRefs = React.useMemo(function () { return new Map(options.map(function (item) { return [item.value, React.createRef()]; })); }, [options]);
     var onChange = React.useCallback(function (event, item) {
@@ -73,6 +73,14 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         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',
+    });
     // prettier-ignore
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass ||
@@ -81,7 +89,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
             ((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: "choice__wrapper", style: tslib_es6.__assign({}, (gap && { gap: gap })), children: options.map(function (item) {
+                    .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, wrapClass), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)

package/dist/cjs/components/CookiesWarning.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Button = require('../../Button-D1PnF1C-.js');
-var Group = require('../../Group-BDuYmoBK.js');
+var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group-BDuYmoBK.js');
+var Group = require('../../Group-B2oTJg0t.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/InputPassword.js

@@ -23,17 +23,17 @@ require('../../Text-_YhyTsQ1.js');
 require('../../Title-zwP6c2U2.js');
 
 var inputPasswordConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        inputPasswordConfig.state = newComponent;
-    },
     appearance: undefined,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
+    setState: function (newComponent) {
+        inputPasswordConfig.state = newComponent;
+    },
+    state: undefined,
 };
 function InputPassword(props) {
-    var appearance = props.appearance, state = props.state, id = props.id, iconFill = props.iconFill, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconFillHover = props.iconFillHover, iconShape = props.iconShape, iconSize = props.iconSize, isRevealable = props.isRevealable, className = props.className, placeholder = props.placeholder, disabled = props.disabled, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var id = props.id, isRevealable = props.isRevealable, appearance = props.appearance, className = props.className, disabled = props.disabled, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconShape = props.iconShape, iconSize = props.iconSize, imageRevealableHide = props.imageRevealableHide, imageRevealableShow = props.imageRevealableShow, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -116,7 +116,7 @@ function InputPassword(props) {
                     ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
                         "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                        "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), type: inputType, id: String(id), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsxRuntime.jsx(Icon.Icon, { className: "input-password__icon", iconFill: iconFill, iconFillHover: iconFillHover, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow, shape: iconShape, size: iconSize, onClick: revealeHandler }))] }));
+                        "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), disabled: disabled, id: String(id), placeholder: placeholder, type: inputType, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsxRuntime.jsx(Icon.Icon, { className: "input-password__icon", iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, size: iconSize, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: revealeHandler }))] }));
 }
 InputPassword.defaultProps = {
     size: 'm',

package/dist/cjs/components/Panel.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-BDuYmoBK.js');
+var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/Radio.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var Radio = require('../../Radio-BQo97TZL.js');
-require('react/jsx-runtime');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -11,13 +11,90 @@ require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../../Text-_YhyTsQ1.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
+var radioConfig = {
+    state: undefined,
+    setState: function (newComponent) {
+        radioConfig.state = newComponent;
+    },
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        radioConfig.appearance = newComponent;
+    },
+};
+function Radio(props) {
+    var appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, id = props.id, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'radio_shape_',
+        propsKey: 'shape',
+    });
+    var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'radio__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: 'radio_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 stateBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover',
+    });
+    var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
+    });
+    var appearanceConfig = appearance && radioConfig.appearance && radioConfig.appearance[appearance];
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass, shapeClass), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
+                        "radio_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase())), children: [jsxRuntime.jsx("input", { checked: checked, className: "radio__input", disabled: disabled, 
+                        // @ts-expect-error
+                        id: id, type: "radio", onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__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()), stateBorderColorHoverClass, stateShapeClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateShape) &&
+                                "radio__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: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__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: "radio__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 }))] }));
+}
+Radio.defaultProps = {
+    shape: 'circular',
+    tag: 'label',
+};
 
-
-exports.Radio = Radio.Radio;
-exports.radioConfig = Radio.radioConfig;
+exports.Radio = Radio;
+exports.radioConfig = radioConfig;

package/dist/cjs/components/Response.js

@@ -7,7 +7,7 @@ var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Button = require('../../Button-D1PnF1C-.js');
-var Group = require('../../Group-BDuYmoBK.js');
+var Group = require('../../Group-B2oTJg0t.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Title = require('../../Title-zwP6c2U2.js');
 require('lodash/castArray');

package/dist/cjs/components/Select.js

@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Badge = require('../../Badge-2JkquAEb.js');
-var Group = require('../../Group-BDuYmoBK.js');
+var Group = require('../../Group-B2oTJg0t.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');

package/dist/cjs/components/Switch.js

@@ -1,10 +1,14 @@
 'use strict';
 
-var Switch = require('../../Switch-B5yVEqxz.js');
-require('react/jsx-runtime');
-require('react');
-require('clsx');
-
-
-
-exports.Switch = Switch.Switch;
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+
+var Switch = React.forwardRef(function Switch(props, ref) {
+    var className = props.className, set = props.set, size = props.size, id = props.id, checked = props.checked, disabled = props.disabled, onChange = props.onChange;
+    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntime.jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
+                // @ts-expect-error
+                ref: ref, type: "checkbox", onChange: onChange }), jsxRuntime.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntime.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+});
+
+exports.Switch = Switch;

package/dist/cjs/components/Tile.js

@@ -19,7 +19,7 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
 function Tile(props) {
-    var children = props.children, after = props.after, badge = props.badge, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, direction = props.direction, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
+    var children = props.children, direction = props.direction, after = props.after, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -54,11 +54,11 @@ function Tile(props) {
     });
     // @ts-expect-error
     var tileStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsxRuntime.jsx(Title.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsxRuntime.jsx(Badge.Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsxRuntime.jsx(Title.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsxRuntime.jsx(Badge.Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
 }
 Tile.defaultProps = {
-    textTag: 'span',
     alignDirection: 'vertical',
+    textTag: 'span',
 };
 
 exports.Tile = Tile;

package/dist/cjs/constants/componentProps/textColor.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const textColorProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert', 'surfaceTextInverse'];
+const textColorProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInverse'];
 
 exports.default = textColorProps;

package/dist/cjs/constants/componentProps/textColorHover.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const textColorHoverProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
+const textColorHoverProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInverse'];
 
 exports.default = textColorHoverProps;

package/dist/cjs/hooks/useViewportFix.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+
+function useViewportFix() {
+    React.useEffect(function () {
+        // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+        var setViewportProperty = function () {
+            // "vh" unit is equal to 1% of the height of the initial containing block
+            // https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
+            var vh = window.innerHeight * 0.01;
+            /** NOTE:
+             * In JavaScript, you can always get the value of the current viewport
+             * by using the global variable window.innerHeight. This value takes
+             * the browser’s interface into account and is updated when its
+             * visibility changes. The trick is to store the viewport value
+             * in a CSS variable and apply that to the element instead of the vh unit.
+             * Let’s say our CSS custom variable is --vh for this example.
+             * That means we will want to apply it in our CSS like this:
+             * ```
+             * .my-element {
+             *   height: 100vh; (Fallback for browsers that do not support Custom Properties)
+             *   height: calc(var(--vh, 1vh) * 100);
+             * }
+             * ```
+             * We told JavaScript to grab the height of the viewport and then
+             * drilled it down into 1/100th of that total so we have a value
+             * to assign as our viewport height unit value.
+             * Then we politely asked JS to create the CSS variable "--vh" at the ":root":
+             */
+            document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
+        };
+        // Update the value of "--vh" after render
+        setViewportProperty();
+        // Update the value of "--vh" by listening to the window resize event
+        window.addEventListener('resize', setViewportProperty);
+        return function () {
+            window.removeEventListener('resize', setViewportProperty);
+        };
+    }, []);
+}
+
+exports.useViewportFix = useViewportFix;

package/dist/components/Accordion.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import castArray from 'lodash/castArray';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
+import { D as Divider } from '../Divider-U5UdY-ef.js';
 import { I as Icon } from '../Icon-DD_Vyrw0.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/camelCase';
@@ -50,7 +51,7 @@ const icon16 = {
 };
 
 function AccordionItem(props) {
-    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
     var onClickTitle = useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -99,7 +100,7 @@ function AccordionItem(props) {
     });
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
                     (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 

package/dist/components/Choice.js

@@ -1,4 +1,3 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
@@ -18,6 +17,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 
@@ -28,7 +28,7 @@ var choiceConfig = {
     },
 };
 var Choice = React.forwardRef(function Choice(props, ref) {
-    var gap = props.gap, _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = useRef(null);
     var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
     var onChange = useCallback(function (event, item) {
@@ -71,6 +71,14 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         prefix: 'fill_active_disabled_',
         propsKey: 'fillActiveDisabled',
     });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'choice_wrap_',
+        propsKey: 'wrap',
+    });
+    var gapClass = useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
     // prettier-ignore
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
     return (jsx("div", { className: clsx(className, 'choice', shapeClass ||
@@ -79,7 +87,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
             ((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 ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", style: __assign({}, (gap && { gap: gap })), children: options.map(function (item) {
+                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: clsx(className, 'choice__wrapper', gapClass, wrapClass), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)

package/dist/components/CookiesWarning.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { B as Button } from '../Button--5mnRJi2.js';
-import { G as Group } from '../Group-12uup5mu.js';
+import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, g as groupConfig } from '../Group-12uup5mu.js';
+export { G as Group, g as groupConfig } from '../Group-CVUfaHaS.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/InputPassword.js

@@ -21,17 +21,17 @@ import '../Text-CG3xPG27.js';
 import '../Title-BfSFPJtJ.js';
 
 var inputPasswordConfig = {
-    state: undefined,
-    setState: function (newComponent) {
-        inputPasswordConfig.state = newComponent;
-    },
     appearance: undefined,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
+    setState: function (newComponent) {
+        inputPasswordConfig.state = newComponent;
+    },
+    state: undefined,
 };
 function InputPassword(props) {
-    var appearance = props.appearance, state = props.state, id = props.id, iconFill = props.iconFill, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconFillHover = props.iconFillHover, iconShape = props.iconShape, iconSize = props.iconSize, isRevealable = props.isRevealable, className = props.className, placeholder = props.placeholder, disabled = props.disabled, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var id = props.id, isRevealable = props.isRevealable, appearance = props.appearance, className = props.className, disabled = props.disabled, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconShape = props.iconShape, iconSize = props.iconSize, imageRevealableHide = props.imageRevealableHide, imageRevealableShow = props.imageRevealableShow, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -114,7 +114,7 @@ function InputPassword(props) {
                     ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
                         "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                        "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), type: inputType, id: String(id), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsx(Icon, { className: "input-password__icon", iconFill: iconFill, iconFillHover: iconFillHover, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow, shape: iconShape, size: iconSize, onClick: revealeHandler }))] }));
+                        "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), disabled: disabled, id: String(id), placeholder: placeholder, type: inputType, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsx(Icon, { className: "input-password__icon", iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, size: iconSize, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: revealeHandler }))] }));
 }
 InputPassword.defaultProps = {
     size: 'm',

package/dist/components/Panel.js

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-12uup5mu.js';
+import { G as Group } from '../Group-CVUfaHaS.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';