@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/Switch-K1p9h3aF.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var Switch = React__default.default.forwardRef(function Switch(props, ref) {
+    var className = props.className, set = props.set, size = props.size, id = props.id, checked = props.checked, disabled = props.disabled, onChange = props.onChange;
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntime.jsxRuntimeExports.jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
+                // @ts-expect-error
+                ref: ref, type: "checkbox", onChange: onChange }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+});
+
+exports.Switch = Switch;

package/dist/cjs/SwitchField-CdpEiqFv.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var _tslib = require('./_tslib-CKiUdo7p.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var Radio = require('./Radio-Cvbuwkx3.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var index = require('./components/Select.js');
+var Divider = require('./Divider-D92wY8Fn.js');
+var Text = require('./Text-C8vlKWNN.js');
+var Icon = require('./Icon-DzJtiBBk.js');
+var useStyles = require('./hooks/useStyles.js');
+var Switch = require('./Switch-K1p9h3aF.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function FormField(props) {
+    var id = props.id, children = props.children, afterItem = props.afterItem, dataTestId = props.dataTestId, beforeItem = props.beforeItem, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, set = props.set, className = props.className, dividerSize = props.dividerSize, dividerFill = props.dividerFill, descSize = props.descSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelSize = props.labelSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, clearIconFill = props.clearIconFill, clearIcon = props.clearIcon, clearIconSize = props.clearIconSize, messageSize = props.messageSize, messageTextWeight = props.messageTextWeight, messageTextColor = props.messageTextColor, message = props.message;
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'form-field_size_',
+        propsKey: 'size',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'form-field_shape_',
+        propsKey: 'shape',
+    });
+    var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'form-field__item-value_shape_',
+        propsKey: 'inputShape',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var formFieldStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'form-field', set && "form-field_set_".concat(set), sizeClass, fillClass, shapeClass, directionClass), "data-test-id": dataTestId, style: formFieldStyles, children: [label && (jsxRuntime.jsxRuntimeExports.jsx("label", { htmlFor: id, className: "form-field__label", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: labelSize, textWeight: labelTextWeight, textColor: labelTextColor, children: label }) })), desc && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "form-field__desc", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: descSize, textWeight: descTextWeight, textColor: descTextColor, children: desc }) })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('form-field__item', inputFillClass, inputShapeClass), children: [jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('form-field__item-wrapper'), children: [beforeItem, children, clearIcon && jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { fill: clearIconFill, SvgImage: clearIcon, size: clearIconSize }), afterItem] }), jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { className: "form-field__item-divider", direction: dividerDirection, fill: dividerFill, size: dividerSize, width: dividerWidth })] }), message && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "form-field__message", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { size: messageSize, textWeight: messageTextWeight, textColor: messageTextColor, children: message }) }))] }));
+}
+FormField.defaultProps = {
+    dividerWidth: 'fill',
+    dividerDirection: 'horizontal',
+};
+
+function ChoiceField(props) {
+    var radioId = props.radioId, radioClassName = props.radioClassName, radioFillCheckmark = props.radioFillCheckmark, radioFillChecked = props.radioFillChecked, radioFill = props.radioFill, radioFillDisabled = props.radioFillDisabled, radioShape = props.radioShape, radioBorder = props.radioBorder;
+    return (jsxRuntime.jsxRuntimeExports.jsx(FormField, _tslib.__assign({}, props, { children: jsxRuntime.jsxRuntimeExports.jsx(Radio.Radio, { border: radioBorder, className: radioClassName, fill: radioFill, id: radioId, shape: radioShape, stateCheckmarkFill: radioFillCheckmark, stateFillChecked: radioFillChecked, stateFillDisabled: radioFillDisabled }) })));
+}
+ChoiceField.defaultProps = {
+    radioClassName: 'form-field__item-radio',
+};
+
+function PasswordField(props) {
+    var placeholder = props.placeholder, passwordClassName = props.passwordClassName, value = props.value;
+    var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderColor',
+    });
+    var valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text text-color_',
+        propsKey: 'valueTextColor',
+    });
+    var valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'valueTextSize',
+    });
+    return (jsxRuntime.jsxRuntimeExports.jsx(FormField, _tslib.__assign({}, props, { children: jsxRuntime.jsxRuntimeExports.jsx("input", { type: "text", value: value, placeholder: placeholder, className: clsx__default.default(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass) }) })));
+}
+PasswordField.defaultProps = {
+    set: 'password',
+    passwordClassName: 'form-field__item-password',
+};
+
+function SelectField(props) {
+    var className = props.className, selectInputClass = props.selectInputClass, selectFill = props.selectFill, selectShape = props.selectShape, selectBorder = props.selectBorder, selectSize = props.selectSize, selectOptionFill = props.selectOptionFill, selectOptionTextSize = props.selectOptionTextSize, selectOptionTextColor = props.selectOptionTextColor, selectOptionBefore = props.selectOptionBefore, selectOptionAfter = props.selectOptionAfter, selectInputBefore = props.selectInputBefore, selectInputAfter = props.selectInputAfter, selectInputFill = props.selectInputFill, selectInputTextSize = props.selectInputTextSize, selectInputTextColor = props.selectInputTextColor;
+    return (jsxRuntime.jsxRuntimeExports.jsx(FormField, _tslib.__assign({}, props, { children: jsxRuntime.jsxRuntimeExports.jsx(index.SelectInput
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            className: clsx__default.default(selectInputClass, className), borderColor: selectBorder, fill: selectFill, inputAfter: selectInputAfter, inputBefore: selectInputBefore, inputFill: selectInputFill, inputTextColor: selectInputTextColor, inputTextSize: selectInputTextSize, optionAfter: selectOptionAfter, optionBefore: selectOptionBefore, optionFill: selectOptionFill, optionTextColor: selectOptionTextColor, optionTextSize: selectOptionTextSize, shape: selectShape, size: selectSize }) })));
+}
+SelectField.defaultProps = {
+    set: 'select',
+    selectInputClass: 'form-field__item-select',
+};
+
+function SwitchField(props) {
+    var className = props.className;
+    return (jsxRuntime.jsxRuntimeExports.jsx(FormField, _tslib.__assign({}, props, { children: jsxRuntime.jsxRuntimeExports.jsx(Switch.Switch, { className: clsx__default.default('form-field__item-switch', className) }) })));
+}
+SwitchField.defaultProps = {
+    set: 'switch',
+};
+
+exports.ChoiceField = ChoiceField;
+exports.FormField = FormField;
+exports.PasswordField = PasswordField;
+exports.SelectField = SelectField;
+exports.SwitchField = SwitchField;

package/dist/cjs/TabGroup-Vn5oELiY.js

@@ -0,0 +1,153 @@
+'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 Badge = require('./Badge-zYZKun4n.js');
+var Divider = require('./Divider-D92wY8Fn.js');
+var Link = require('./Link-3qPujNn9.js');
+var Text = require('./Text-C8vlKWNN.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var tabConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        tabConfig.appearance = newComponent;
+    },
+};
+function Tab(props) {
+    var isActive = props.isActive, isDisabled = props.isDisabled, isHover = props.isHover, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, children = props.children, className = props.className, dataTour = props.dataTour, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, onClick = props.onClick, onMouseEnter = props.onMouseEnter, rel = props.rel, reset = props.reset, set = props.set, target = props.target;
+    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 fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tab_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var tab = useStyles.useStyles(props).styles;
+    var appearanceConfig = React.useMemo(function () { return appearance && tabConfig.appearance && tabConfig.appearance[appearance]; }, [appearance, tabConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass ||
+            (isDisabled
+                ? fillDisabledClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillDisabled) &&
+                        "fill_".concat(appearanceConfig.fillDisabled).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 ||
+            (isDisabled
+                ? null
+                : (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                    "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "tab_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, shapeClass, typeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.type) &&
+                "tab_type_".concat(appearanceConfig.type).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass, reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass, onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxRuntimeExports.jsx(Link.Link, { className: clsx__default.default('tab__link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxRuntimeExports.jsxs(React__default.default.Fragment, { children: [before, children || (jsxRuntime.jsxRuntimeExports.jsxs(React__default.default.Fragment, { children: [jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: isDisabled
+                                            ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
+                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: [dividerFillActive, " ", label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)] })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsxRuntimeExports.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { direction: dividerDirection, fill: isDisabled
+                                    ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
+                                    : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), size: dividerSize, width: "fill" })] })), after] }) }) }));
+}
+Tab.defaultProps = {
+    size: 'normal',
+    LinkComponent: 'a',
+    direction: 'horizontal',
+};
+
+function TabGroup(props) {
+    var id = props.id, dataTour = props.dataTour, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
+    var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_content-align_',
+        propsKey: 'contentAlign',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'group_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    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',
+    });
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), id: id, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+}
+
+exports.Tab = Tab;
+exports.TabGroup = TabGroup;
+exports.tabConfig = tabConfig;

package/dist/cjs/{Text-D7Aq1i5R.js → Text-C8vlKWNN.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+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');
@@ -16,7 +17,7 @@ var textConfig = {
     },
 };
 function Text(props) {
-    var after = props.after, appearance = props.appearance, dataTestId = props.dataTestId, before = props.before, children = props.children, className = props.className, cursor = props.cursor, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick;
+    var after = props.after, appearance = props.appearance, dataTestId = props.dataTestId, before = props.before, children = props.children, className = props.className, cursor = props.cursor, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
     var cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
@@ -67,12 +68,12 @@ function Text(props) {
     });
     // @ts-expect-error
     var textStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && textConfig.appearance && textConfig.appearance[appearance];
+    var appearanceConfig = React.useMemo(function () { return appearance && textConfig.appearance && textConfig.appearance[appearance]; }, [appearance, textConfig]);
     return (jsxRuntime.jsxRuntimeExports.jsxs(Tag, { className: clsx__default.default(className, 'text', sizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, "data-test-id": dataTestId, children: [before, children, after] }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, "data-test-id": dataTestId, children: [before, children, after] }));
 }
 Text.defaultProps = {
     tag: 'span',

package/dist/cjs/Textarea-WIGhhrgu.js

@@ -0,0 +1,103 @@
+'use strict';
+
+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 clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var textareaConfig = {
+    state: {},
+    setState: function (newComponent) {
+        textareaConfig.state = newComponent;
+    },
+    appearance: {},
+    setAppearance: function (newComponent) {
+        textareaConfig.appearance = newComponent;
+    },
+};
+function Textarea(props) {
+    var appearance = props.appearance, id = props.id, className = props.className, placeholder = props.placeholder, disabled = props.disabled, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderHover',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'textarea_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'textarea_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = React.useMemo(function () { return appearance && textareaConfig.appearance && textareaConfig.appearance[appearance]; }, [appearance, textareaConfig]);
+    var stateConfig = React.useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("textarea", { className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
+                "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderHover) &&
+                "border-color_hover_".concat(appearanceConfig.borderHover)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), placeholderTextColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
+                "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
+                "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), sizeClass, shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "textarea_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
+                "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorClass ||
+            ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
+                "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass), id: id, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+}
+Textarea.defaultProps = {
+    size: 'm',
+};
+
+exports.Textarea = Textarea;
+exports.textareaConfig = textareaConfig;

package/dist/cjs/Tile-j8EfyWDg.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Badge = require('./Badge-zYZKun4n.js');
+var Text = require('./Text-C8vlKWNN.js');
+var Title = require('./Title-C3lN-EvU.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Tile(props) {
+    var after = props.after, badge = props.badge, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, children = props.children, className = props.className, direction = props.direction, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'tile_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderColorHover',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var tileStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsxRuntime.jsxRuntimeExports.jsx(Title.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsxRuntime.jsxRuntimeExports.jsx(Badge.Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+}
+Tile.defaultProps = {
+    textTag: 'span',
+    alignDirection: 'vertical',
+};
+
+exports.Tile = Tile;

package/dist/cjs/Title-C3lN-EvU.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var UIContext = require('./context/UIContext.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var titleConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        titleConfig.appearance = newComponent;
+    },
+};
+function Title(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var _b = UIContext.useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_active_',
+        propsKey: 'textColorActive',
+    });
+    var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_hover_',
+        propsKey: 'textColorHover',
+    });
+    var textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-align_',
+        propsKey: 'textAlign',
+    });
+    var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'title_type_',
+        propsKey: 'type',
+    });
+    var fillColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-gradient_',
+        propsKey: 'textColorGradient',
+    });
+    var textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-style_',
+        propsKey: 'textStyle',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-truncate_',
+        propsKey: 'textTruncate',
+    });
+    // @ts-expect-error
+    var titleStyles = useStyles.useStyles(props).styles;
+    var appearanceConfig = React.useMemo(function () { return appearance && titleConfig.appearance && titleConfig.appearance[appearance]; }, [appearance, titleConfig]);
+    // Element type (h1, h2, ..., h6)
+    var Tag = React.useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxRuntime.jsxRuntimeExports.jsx(Tag, { className: clsx__default.default(className, 'title', fillColorClass, size && "title_size_".concat(size), mode && "title_mode_".concat(mode), textColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, onClick: onClick, style: titleStyles, children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx__default.default(textAlignClass, 'title__wrapper', textTruncateClass), children: children || text }) }));
+}
+Title.defaultProps = {
+    size: 'h3',
+};
+
+exports.Title = Title;
+exports.titleConfig = titleConfig;