@itcase/ui 1.1.25 → 1.2.1

package/dist/Cell-3We_qMvM.js

@@ -1,68 +0,0 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { I as Icon } from './Icon-BLqnXYOO.js';
-import { L as Label } from './Label-c3hONOHC.js';
-import { T as Text } from './Text-Dz-KPI5I.js';
-import { useStyles } from './hooks/useStyles.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(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_shape_',
-        propsKey: 'shape',
-    });
-    var bgFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'bgFill',
-    });
-    var bgFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'bgFillHover',
-    });
-    var bgFillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'bgFillActive',
-    });
-    var bgFillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'bgFillDisabled',
-    });
-    var bgShapeClass = useDeviceTargetClass(props, {
-        prefix: 'cell_shape_',
-        propsKey: 'bgShape',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'cell__wrapper_direction_',
-        propsKey: 'direction',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var cellStyles = useStyles(props).styles;
-    return (jsxRuntimeExports.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 && jsxRuntimeExports.jsx("div", { className: "cell__before", children: before }), jsxRuntimeExports.jsxs("div", { className: clsx('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass), children: [title && (jsxRuntimeExports.jsxs("div", { className: "cell__data", children: [jsxRuntimeExports.jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntimeExports.jsx(Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntimeExports.jsxs("div", { className: "cell__data", children: [jsxRuntimeExports.jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntimeExports.jsx(Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntimeExports.jsx("div", { className: "cell__after", children: after })] }));
-}
-Cell.defaultProps = {
-    isDisabled: false,
-    textSize: 'p',
-};
-
-export { Cell as C };

package/dist/Checkbox-0h4YosTW.js

@@ -1,87 +0,0 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { T as Text } from './Text-Dz-KPI5I.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(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'checkbox_shape_',
-        propsKey: 'shape',
-    });
-    var stateShapeClass = useDeviceTargetClass(props, {
-        prefix: 'checkbox__state_shape_',
-        propsKey: 'stateShape',
-    });
-    var stateFillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillChecked' : 'stateFill',
-    });
-    var stateFillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled',
-    });
-    var stateCheckmarkFillClass = useDeviceTargetClass(props, {
-        prefix: 'checkbox_checkmark_fill_',
-        propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill',
-    });
-    var stateBorderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'stateBorderWidth',
-    });
-    var stateBorderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor',
-    });
-    var stateBorderColorDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // prettier-ignore
-    var appearanceConfig = (appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance]);
-    return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxRuntimeExports.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: [jsxRuntimeExports.jsx("input", { checked: checked, className: "checkbox__input", disabled: disabled, 
-                        // @ts-expect-error
-                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntimeExports.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" }), jsxRuntimeExports.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntimeExports.jsx(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 && (jsxRuntimeExports.jsx(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 && jsxRuntimeExports.jsx("div", { className: "checkbox__after", children: after })] }));
-}
-Checkbox.defaultProps = {
-    tag: 'label',
-};
-
-export { Checkbox as C, checkboxConfig as c };

package/dist/Chips-Bd3ZFosY.js

@@ -1,76 +0,0 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-Dz-KPI5I.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(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'chips_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'chips_shape_',
-        propsKey: 'shape',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var cursorClass = useDeviceTargetClass(props, {
-        prefix: 'cursor_',
-        propsKey: 'cursor',
-    });
-    // @ts-expect-error
-    var chipsStyles = useStyles(props).styles;
-    // prettier-ignore
-    var appearanceConfig = (appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]);
-    return (jsxRuntimeExports.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: jsxRuntimeExports.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntimeExports.jsx(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 })) : (jsxRuntimeExports.jsx("div", { className: "chips__label", children: label })), children] }) }));
-}
-
-export { Chips as C, chipsConfig as c };

package/dist/Choice-CeQ9Il98.js

@@ -1,97 +0,0 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useRef, useMemo, createRef, useCallback } from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { I as Icon } from './Icon-BLqnXYOO.js';
-import { L as Loader } from './Loader-VCP1ZNcb.js';
-import { T as Text } from './Text-Dz-KPI5I.js';
-
-var choiceConfig = {
-    appearance: {},
-    setAppearance: function (newComponent) {
-        choiceConfig.appearance = newComponent;
-    },
-};
-var Choice = React__default.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 = useRef(null);
-    var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
-    var onChange = useCallback(function (event, item) {
-        var isChecked = isCheckbox ? event.target.checked : true;
-        setActiveSegment && setActiveSegment(item, isChecked);
-    }, [isCheckbox, setActiveSegment]);
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'choice_shape_',
-        propsKey: 'shape',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_disabled_',
-        propsKey: 'fillActiveDisabled',
-    });
-    // prettier-ignore
-    var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
-    return (jsxRuntimeExports.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 ? (jsxRuntimeExports.jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntimeExports.jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxRuntimeExports.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: [jsxRuntimeExports.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); } }), jsxRuntimeExports.jsxs("label", { htmlFor: "".concat(name, "-").concat(item.value), className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), children: [before, item.label && (jsxRuntimeExports.jsx(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) && (jsxRuntimeExports.jsx(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)); }) })) }));
-});
-
-export { Choice as C, choiceConfig as c };

package/dist/Code-1WUXVzfb.js

@@ -1,272 +0,0 @@
-import { _ as __assign } from './_tslib-S-VPg1Cw.js';
-import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
-import React__default, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-
-var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
-var OTPInput = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, onPaste = _a.onPaste, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
-    var _g = React__default.useState(0), activeInput = _g[0], setActiveInput = _g[1];
-    var inputRefs = React__default.useRef([]);
-    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
-    var isInputNum = inputType === 'number' || inputType === 'tel';
-    React__default.useEffect(function () {
-        inputRefs.current = inputRefs.current.slice(0, numInputs);
-    }, [numInputs]);
-    React__default.useEffect(function () {
-        var _a;
-        if (shouldAutoFocus) {
-            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [shouldAutoFocus]);
-    var getPlaceholderValue = function () {
-        if (typeof placeholder === 'string') {
-            if (placeholder.length === numInputs) {
-                return placeholder;
-            }
-            if (placeholder.length > 0) {
-                console.error('Length of the placeholder should be equal to the number of inputs.');
-            }
-        }
-        return undefined;
-    };
-    var isInputValueValid = function (value) {
-        var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
-        return isTypeValid && value.trim().length === 1;
-    };
-    var handleChange = function (event) {
-        var value = event.target.value;
-        if (isInputValueValid(value)) {
-            changeCodeAtFocus(value);
-            focusInput(activeInput + 1);
-        }
-    };
-    var handleInputChange = function (event) {
-        var nativeEvent = event.nativeEvent;
-        var value = event.target.value;
-        if (!isInputValueValid(value)) {
-            // Pasting from the native autofill suggestion on a mobile device can pass
-            // the pasted string as one long input to one of the cells. This ensures
-            // that we handle the full input and not just the first character.
-            if (value.length === numInputs) {
-                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
-                if (!hasInvalidInput) {
-                    handleOTPChange(value.split(''));
-                    focusInput(numInputs - 1);
-                }
-            }
-            // @ts-expect-error - This was added previously to handle and edge case
-            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
-            // still needed.
-            if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
-                event.preventDefault();
-                changeCodeAtFocus('');
-                focusInput(activeInput - 1);
-            }
-            // Clear the input if it's not valid value because firefox allows
-            // pasting non-numeric characters in a number type input
-            event.target.value = '';
-        }
-    };
-    var handleFocus = function (event) { return function (index) {
-        setActiveInput(index);
-        event.target.select();
-    }; };
-    var handleBlur = function () {
-        setActiveInput(activeInput - 1);
-    };
-    var handleKeyDown = function (event) {
-        var otp = getOTPValue();
-        if ([event.code, event.key].includes('Backspace')) {
-            event.preventDefault();
-            changeCodeAtFocus('');
-            focusInput(activeInput - 1);
-        }
-        else if (event.code === 'Delete') {
-            event.preventDefault();
-            changeCodeAtFocus('');
-        }
-        else if (event.code === 'ArrowLeft') {
-            event.preventDefault();
-            focusInput(activeInput - 1);
-        }
-        else if (event.code === 'ArrowRight') {
-            event.preventDefault();
-            focusInput(activeInput + 1);
-        }
-        // React does not trigger onChange when the same value is entered
-        // again. So we need to focus the next input manually in this case.
-        else if (event.key === otp[activeInput]) {
-            event.preventDefault();
-            focusInput(activeInput + 1);
-        }
-        else if (event.code === 'Spacebar' ||
-            event.code === 'Space' ||
-            event.code === 'ArrowUp' ||
-            event.code === 'ArrowDown') {
-            event.preventDefault();
-        }
-    };
-    var focusInput = function (index) {
-        var _a, _b;
-        var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
-        if (inputRefs.current[activeInput]) {
-            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
-            setActiveInput(activeInput);
-        }
-    };
-    var changeCodeAtFocus = function (value) {
-        var otp = getOTPValue();
-        otp[activeInput] = value[0];
-        handleOTPChange(otp);
-    };
-    var handleOTPChange = function (otp) {
-        var otpValue = otp.join('');
-        onChange(otpValue);
-    };
-    var handlePaste = function (event) {
-        var _a;
-        event.preventDefault();
-        var otp = getOTPValue();
-        var nextActiveInput = activeInput;
-        // Get pastedData in an array of max size (num of inputs - current position)
-        var pastedData = event.clipboardData
-            .getData('text/plain')
-            .slice(0, numInputs - activeInput)
-            .split('');
-        // Prevent pasting if the clipboard data contains non-numeric values for number inputs
-        if (isInputNum && pastedData.some(function (value) { return isNaN(Number(value)); })) {
-            return;
-        }
-        // Paste data from focused input onwards
-        for (var pos = 0; pos < numInputs; ++pos) {
-            if (pos >= activeInput && pastedData.length > 0) {
-                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
-                nextActiveInput++;
-            }
-        }
-        focusInput(nextActiveInput);
-        handleOTPChange(otp);
-    };
-    return (React__default.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
-        var _a, _b, _c;
-        return (React__default.createElement(React__default.Fragment, { key: index },
-            renderInput({
-                value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
-                placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
-                ref: function (element) { return (inputRefs.current[index] = element); },
-                onChange: handleChange,
-                onFocus: function (event) { return handleFocus(event)(index); },
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDown,
-                onPaste: handlePaste,
-                autoComplete: 'off',
-                'aria-label': "Please enter OTP character ".concat(index + 1),
-                style: Object.assign(!skipDefaultStyles ? { width: '1em', textAlign: 'center' } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
-                className: typeof inputStyle === 'string' ? inputStyle : undefined,
-                type: inputType,
-                inputMode: isInputNum ? 'numeric' : 'text',
-                onInput: handleInputChange,
-            }, index),
-            index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)));
-    })));
-};
-
-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 = useState(''), otp = _a[0], setOtp = _a[1];
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'inputFill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'inputFillHover',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'code__input_size_',
-        propsKey: 'inputSize',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'code__input_shape_',
-        propsKey: 'inputShape',
-    });
-    var textSizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'inputTextSize',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'inputTextColor',
-    });
-    var caretClass = useDeviceTargetClass(props, {
-        prefix: 'caret-color_',
-        propsKey: 'inputCaretColor',
-    });
-    var placeholderClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'inputPlaceholderTextColor',
-    });
-    var weightClass = useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'inputTextWeight',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'inputBorderWidth',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'inputBorderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'inputBorderColorHover',
-    });
-    var borderColorFocusClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_focus_',
-        propsKey: 'inputBorderFocusColor',
-    });
-    var gapClass = useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    // NOTE: too many dependencies for "useCallback" and possible too many checks
-    var renderInput = function (otpInputProps) {
-        return (jsxRuntimeExports.jsx("input", __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);
-            } })));
-    };
-    useEffect(function () {
-        onChange && onChange(otp);
-    }, [otp]);
-    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntimeExports.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',
-};
-
-export { Code as C };