@itcase/ui 1.1.25 → 1.2.0

package/dist/cjs/components/Card.js

@@ -1,23 +1,41 @@
 'use strict';
 
-var Card = require('../Card-BhnTRJN5.js');
-require('../jsx-runtime-BBxmckJR.js');
+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-_YhyTsQ1.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Image-CCx6QWZj.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Text-B0SULA92.js');
 
+function Card(props) {
+    var children = props.children, className = props.className, size = props.size, src = props.src, text = props.text, textSize = props.textSize, textColor = props.textColor, textTag = props.textTag, title = props.title, titleSize = props.titleSize, titleTag = props.titleTag, titleColor = props.titleColor, image = props.image, imageShape = props.imageShape, 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, textColor: titleColor, tag: titleTag, children: title })), text && (jsxRuntime.jsx(Text.Text, { size: textSize, tag: textTag, textColor: textColor, className: "card__data-desc", children: text }))] }), children] }) }));
+}
+Card.defaultProps = {
+    textSize: 'p',
+    titleColor: 'surfaceTextPrimary',
+    titleTag: 'span',
+    titleSize: 'h5',
+    imageShape: 'rounded',
+    textColor: 'surfaceTextPrimary',
+};
 
-
-exports.Card = Card.Card;
+exports.Card = Card;

package/dist/cjs/components/Cell.js

@@ -1,29 +1,85 @@
 'use strict';
 
-var Cell = require('../Cell-Bc4BC1e3.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Icon = require('../../Icon-Co5Mtpt_.js');
+var Label = require('../../Label-CpSzGRtr.js');
+var Text = require('../../Text-_YhyTsQ1.js');
+var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
-require('../hooks/useStyles.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
-require('../Label-C2uLpNrU.js');
 
+function Cell(props) {
+    var after = props.after, before = props.before, className = props.className, isActive = props.isActive, isDisabled = props.isDisabled, 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, 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',
+    });
+    // @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, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), onClick: onClick, onMouseEnter: onMouseEnter, style: cellStyles, 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), 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, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, 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, 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, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+}
+Cell.defaultProps = {
+    isDisabled: false,
+    textSize: 'p',
+};
 
-
-exports.Cell = Cell.Cell;
+exports.Cell = Cell;

package/dist/cjs/components/Checkbox.js

@@ -1,23 +1,101 @@
 'use strict';
 
-var Checkbox = require('../Checkbox-C5EikmBn.js');
-require('../jsx-runtime-BBxmckJR.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('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Text-B0SULA92.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
+var checkboxConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        checkboxConfig.appearance = newComponent;
+    },
+    state: undefined,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        checkboxConfig.state = newComponent;
+    },
+};
+function Checkbox(props) {
+    var id = props.id, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, 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, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        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',
+    });
+    // prettier-ignore
+    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", { checked: checked, className: "checkbox__input", 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 })] }));
+}
+Checkbox.defaultProps = {
+    tag: 'label',
+};
 
-
-exports.Checkbox = Checkbox.Checkbox;
-exports.checkboxConfig = Checkbox.checkboxConfig;
+exports.Checkbox = Checkbox;
+exports.checkboxConfig = checkboxConfig;

package/dist/cjs/components/Chips.js

@@ -1,23 +1,89 @@
 'use strict';
 
-var Chips = require('../Chips-wl8WgeWZ.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Text-B0SULA92.js');
 
+var chipsConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        chipsConfig.appearance = newComponent;
+    },
+};
+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 chipsStyles = useStyles.useStyles(props).styles;
+    // prettier-ignore
+    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
+                        ? 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] }) }));
+}
 
-
-exports.Chips = Chips.Chips;
-exports.chipsConfig = Chips.chipsConfig;
+exports.Chips = Chips;
+exports.chipsConfig = chipsConfig;

package/dist/cjs/components/Choice.js

@@ -1,30 +1,115 @@
 'use strict';
 
-var Choice = require('../Choice-DJOKyu8I.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Icon = require('../../Icon-Co5Mtpt_.js');
+var Loader = require('../../Loader-fA11tUEJ.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Icon-C7ZJyN5o.js');
-require('../_tslib-CKiUdo7p.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Link-DRV1vzHd.js');
-require('../Tooltip-DREz-tP6.js');
-require('../Text-B0SULA92.js');
-require('../Title-Ckp30YSI.js');
-require('../Loader-C2D6fJk1.js');
+require('../../Link-DQxoFKhI.js');
+require('../../Tooltip-DkTKx9n-.js');
+require('../../Title-zwP6c2U2.js');
 
+var choiceConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        choiceConfig.appearance = newComponent;
+    },
+};
+var Choice = React.forwardRef(function Choice(props, ref) {
+    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) {
+        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',
+    });
+    // prettier-ignore
+    var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
+    return (jsxRuntime.jsx("div", { ref: controlRef, 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()), !isDisabled
+            ? fillClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : fillDisabledClass, 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)), children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxRuntime.jsxs("div", { ref: optionsRefs.get(item.value), className: clsx('choice__item', !isDisabled &&
+                    (fillHoverClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                            "fill_active_".concat(appearanceConfig.fillHover)
+                                .replace(/([A-Z])/g, '-$1')
+                                .toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
+                    ? !isDisabled
+                        ? fillActiveClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
+                                "fill_active_".concat(appearanceConfig.fillActive)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())
+                        : fillActiveDisabledClass
+                    : !isDisabled
+                        ? fillClass
+                        : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), children: [jsxRuntime.jsx("input", { checked: item.value === active.value, className: "choice__item-radio", disabled: isDisabled, id: "".concat(name, "-").concat(item.value), name: name, type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { htmlFor: "".concat(name, "-").concat(item.value), className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === active.value
+                                    ? !isDisabled
+                                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                                        : labelTextActiveColorDisabled
+                                    : !isDisabled
+                                        ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
+                                        : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, { SvgImage: item.value === active.value ? activeIcon : icon, className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, iconFill: item.value === active.value
+                                    ? activeIconItemFill || item.activeIconItemFill
+                                    : iconItemFill || item.iconItemFill })), after] })] }, item.value)); }) })) }));
+});
 
-
-exports.Choice = Choice.Choice;
-exports.choiceConfig = Choice.choiceConfig;
+exports.Choice = Choice;
+exports.choiceConfig = choiceConfig;

package/dist/cjs/components/Code.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Code = require('../Code-BJFoJBYh.js');
-require('../_tslib-CKiUdo7p.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
+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');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -13,6 +13,99 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
+function Code(props) {
+    var className = props.className, inputPlaceholder = props.inputPlaceholder, inputAutoFocus = props.inputAutoFocus, inputCount = props.inputCount, inputType = props.inputType, before = props.before, after = props.after, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var _a = React.useState(''), otp = _a[0], setOtp = _a[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',
+    });
+    // NOTE: too many dependencies for "useCallback" and possible too many checks
+    var renderInput = function (otpInputProps) {
+        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { autoComplete: "one-time-code", className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass), onBlur: function (event) {
+                onBlur && onBlur(event);
+                otpInputProps.onBlur(event);
+            }, onFocus: function (event) {
+                onFocus && onFocus(event);
+                otpInputProps.onFocus(event);
+            } })));
+    };
+    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] }));
+}
+Code.defaultProps = {
+    inputCount: 6,
+    inputType: 'number',
+    inputSize: 'normal',
+    inputBorderWidth: 1,
+    inputPlaceholder: 0,
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputBorderFocusColor: 'surfaceBorderAccent',
+    inputFill: 'surfacePrimary',
+    inputFillHover: 'surfaceSecondary',
+    inputShape: 'rounded',
+    inputTextColor: 'surfaceTextPrimary',
+    inputTextSize: 'xxl',
+    inputCaretColor: 'surfaceItemAccent',
+};
 
-
-exports.Code = Code.Code;
+exports.Code = Code;