@itcase/ui 1.1.8 → 1.1.10

package/dist/cjs/Checkbox-C1HH9ut8.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var Text = require('./Text-CgYNdSwY.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var checkboxConfig = {
+    state: undefined,
+    setState: function (newComponent) {
+        checkboxConfig.state = newComponent;
+    },
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        checkboxConfig.appearance = newComponent;
+    },
+};
+function Checkbox(props) {
+    var appearance = props.appearance, before = props.before, after = props.after, id = props.id, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, className = props.className, checked = props.checked, disabled = props.disabled, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, value = props.value;
+    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',
+    });
+    var appearanceConfig = React.useMemo(function () { return appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance]; }, [appearance, checkboxConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(Tag, { className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('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.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 }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('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.jsxRuntimeExports.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsxRuntimeExports.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.jsxRuntimeExports.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.jsxRuntimeExports.jsx("div", { className: "checkbox__after", children: after })] }));
+}
+Checkbox.defaultProps = {
+    tag: 'label',
+};
+
+exports.Checkbox = Checkbox;
+exports.checkboxConfig = checkboxConfig;

package/dist/cjs/Chips-DkUdk6Zs.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Text = require('./Text-CgYNdSwY.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var chipsConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        chipsConfig.appearance = newComponent;
+    },
+};
+function Chips(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, label = props.label, labelSize = props.labelSize, labelTextColor = props.labelTextColor, 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 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;
+    var appearanceConfig = React.useMemo(function () { return appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]; }, [appearance, chipsConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'chips', 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), style: chipsStyles, onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "chips__label", textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, size: labelSize, children: label })) : (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "chips__label", children: label })), children] }) }));
+}
+Chips.defaultProps = {
+    label: 'Chips',
+};
+
+exports.Chips = Chips;
+exports.chipsConfig = chipsConfig;

package/dist/cjs/Choice-CJqMvK5I.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var Icon = require('./Icon-D1v73UhR.js');
+var Text = require('./Text-CgYNdSwY.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var choiceConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        choiceConfig.appearance = newComponent;
+    },
+};
+var Choice = React__default.default.forwardRef(function Choice(props, ref) {
+    var active = props.active, 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, isDisabled = props.isDisabled, isMultiple = props.isMultiple, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, name = props.name, options = props.options, set = props.set, _a = props.size, size = _a === void 0 ? 'normal' : _a, type = props.type, setActiveSegment = props.setActiveSegment;
+    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 = isMultiple ? event.target.checked : true;
+        setActiveSegment && setActiveSegment(item, isChecked);
+    }, [isMultiple, setActiveSegment]);
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'choice_shape_',
+        propsKey: 'shape',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_disabled_',
+        propsKey: 'fillActiveDisabled',
+    });
+    var appearanceConfig = React.useMemo(function () { return appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]; }, [appearance, choiceConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(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)), ref: controlRef, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: "choice__wrapper", children: options === null || options === void 0 ? void 0 : options.map(function (item, i) { return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('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'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsxRuntimeExports.jsx("input", { checked: item.value === active.value, className: "choice__item-radio", id: "".concat(name, "-").concat(item.value), name: name, disabled: isDisabled, type: isMultiple ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), 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.jsxRuntimeExports.jsx(Icon.Icon, { className: "choice__item-icon", iconFill: item.value === active.value ? activeIconItemFill : iconItemFill, iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === active.value ? activeIcon : icon })), after] })] }, item.value)); }) }) }));
+});
+Choice.defaultProps = {
+    active: { value: undefined },
+    options: [],
+    size: 'normal',
+};
+
+exports.Choice = Choice;
+exports.choiceConfig = choiceConfig;

package/dist/cjs/Code-ByEr4h2R.js

@@ -0,0 +1,280 @@
+'use strict';
+
+var _tslib = require('./_tslib-CKiUdo7p.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+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.default.useState(0), activeInput = _g[0], setActiveInput = _g[1];
+    var inputRefs = React__default.default.useRef([]);
+    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
+    var isInputNum = inputType === 'number' || inputType === 'tel';
+    React__default.default.useEffect(function () {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React__default.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.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.default.createElement(React__default.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 = 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.jsxRuntimeExports.jsx("input", _tslib.__assign({}, otpInputProps, { autoComplete: "one-time-code", className: clsx__default.default('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.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'code', widthClass), children: [before, jsxRuntime.jsxRuntimeExports.jsx(OTPInput, { containerStyle: clsx__default.default(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,
+    gap: 12,
+    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;

package/dist/cjs/ContextMenuItem-DocbJZKp.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var Divider = require('./Divider-doetVRw0.js');
+var Icon = require('./Icon-D1v73UhR.js');
+var Text = require('./Text-CgYNdSwY.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function ContextMenu(props) {
+    var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'context-menu_shape_',
+        propsKey: 'shape',
+    });
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'context-menu', set && "context-menu_set_".concat(set), shapeClass, fillClass), id: id, onClick: onClick, children: children }));
+}
+ContextMenu.defaultProps = {
+    tag: 'div',
+};
+
+function ContextMenuItem(props) {
+    var id = props.id, className = props.className, label = props.label, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, dividerSize = props.dividerSize, dividerFill = props.dividerFill, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, iconBeforeBgFill = props.iconBeforeBgFill, iconBeforeFill = props.iconBeforeFill, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight;
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextSize',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextColor',
+    });
+    useDeviceTargetClass.useDeviceTargetClass(props, {
+        propsKey: 'labelTextWeight',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'), id: id, onClick: onClick, children: [jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "context-menu__item-wrapper", children: [iconBefore && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "context-menu__item-icon-before", SvgImage: iconBefore, size: iconBeforeSize, bgFill: iconBeforeBgFill, fill: iconBeforeFill })), label && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "context-menu__item-title", textColor: labelTextColor, size: labelTextSize, textWeight: labelTextWeight, children: label })), iconAfter && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "context-menu__item-icon-after", SvgImage: iconAfter, size: iconAfterSize, bgFill: iconAfterBgFill, fill: iconAfterFill }))] }), jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { className: "context-menu__item-divider", width: dividerWidth, direction: dividerDirection, size: dividerSize, fill: dividerFill })] }));
+}
+
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuItem = ContextMenuItem;