@itcase/ui 1.1.8 → 1.1.10

package/dist/Switch-0BHqovLA.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import React__default from 'react';
+import clsx from 'clsx';
+
+var Switch = React__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 (jsxRuntimeExports.jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size), set && "switch_set_".concat(set)), children: [jsxRuntimeExports.jsx("input", { checked: checked, className: "switch__checkbox", disabled: disabled, id: id, 
+                // @ts-expect-error
+                ref: ref, type: "checkbox", onChange: onChange }), jsxRuntimeExports.jsx("div", { className: "switch__bg", children: "\u00A0" }), jsxRuntimeExports.jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
+});
+
+export { Switch as S };

package/dist/SwitchField-W4_o97BR.js

@@ -0,0 +1,98 @@
+import { _ as __assign } from './_tslib-S-VPg1Cw.js';
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { R as Radio } from './Radio-DFeWsO4E.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { SelectInput } from './components/Select.js';
+import { D as Divider } from './Divider-D0TEKxHr.js';
+import { T as Text } from './Text-edtauAM6.js';
+import { I as Icon } from './Icon-C1j6rkeI.js';
+import { useStyles } from './hooks/useStyles.js';
+import { S as Switch } from './Switch-0BHqovLA.js';
+
+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(props, {
+        prefix: 'form-field_size_',
+        propsKey: 'size',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var inputFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'form-field_shape_',
+        propsKey: 'shape',
+    });
+    var inputShapeClass = useDeviceTargetClass(props, {
+        prefix: 'form-field__item-value_shape_',
+        propsKey: 'inputShape',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var formFieldStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'form-field', set && "form-field_set_".concat(set), sizeClass, fillClass, shapeClass, directionClass), "data-test-id": dataTestId, style: formFieldStyles, children: [label && (jsxRuntimeExports.jsx("label", { htmlFor: id, className: "form-field__label", children: jsxRuntimeExports.jsx(Text, { size: labelSize, textWeight: labelTextWeight, textColor: labelTextColor, children: label }) })), desc && (jsxRuntimeExports.jsx("div", { className: "form-field__desc", children: jsxRuntimeExports.jsx(Text, { size: descSize, textWeight: descTextWeight, textColor: descTextColor, children: desc }) })), jsxRuntimeExports.jsxs("div", { className: clsx('form-field__item', inputFillClass, inputShapeClass), children: [jsxRuntimeExports.jsxs("div", { className: clsx('form-field__item-wrapper'), children: [beforeItem, children, clearIcon && jsxRuntimeExports.jsx(Icon, { fill: clearIconFill, SvgImage: clearIcon, size: clearIconSize }), afterItem] }), jsxRuntimeExports.jsx(Divider, { className: "form-field__item-divider", direction: dividerDirection, fill: dividerFill, size: dividerSize, width: dividerWidth })] }), message && (jsxRuntimeExports.jsx("div", { className: "form-field__message", children: jsxRuntimeExports.jsx(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 (jsxRuntimeExports.jsx(FormField, __assign({}, props, { children: jsxRuntimeExports.jsx(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(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderColor',
+    });
+    var valueTextColorClass = useDeviceTargetClass(props, {
+        prefix: 'text text-color_',
+        propsKey: 'valueTextColor',
+    });
+    var valueTextSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'valueTextSize',
+    });
+    return (jsxRuntimeExports.jsx(FormField, __assign({}, props, { children: jsxRuntimeExports.jsx("input", { type: "text", value: value, placeholder: placeholder, className: clsx(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 (jsxRuntimeExports.jsx(FormField, __assign({}, props, { children: jsxRuntimeExports.jsx(SelectInput
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            className: clsx(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 (jsxRuntimeExports.jsx(FormField, __assign({}, props, { children: jsxRuntimeExports.jsx(Switch, { className: clsx('form-field__item-switch', className) }) })));
+}
+SwitchField.defaultProps = {
+    set: 'switch',
+};
+
+export { ChoiceField as C, FormField as F, PasswordField as P, SelectField as S, SwitchField as a };

package/dist/TabGroup-DRiFyK3Z.js

@@ -0,0 +1,144 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import React__default, { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { B as Badge } from './Badge-DPM6qrjA.js';
+import { D as Divider } from './Divider-D0TEKxHr.js';
+import { L as Link } from './Link-CbCqej5B.js';
+import { T as Text } from './Text-edtauAM6.js';
+
+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(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 fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'tab_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass(props, {
+        prefix: 'tab_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var tab = useStyles(props).styles;
+    var appearanceConfig = useMemo(function () { return appearance && tabConfig.appearance && tabConfig.appearance[appearance]; }, [appearance, tabConfig]);
+    return (jsxRuntimeExports.jsx("div", { className: clsx('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: jsxRuntimeExports.jsx(Link, { className: clsx('tab__link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntimeExports.jsxs(React__default.Fragment, { children: [before, children || (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntimeExports.jsxs(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)) && (jsxRuntimeExports.jsx(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) }))] }), jsxRuntimeExports.jsx(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(props, {
+        prefix: 'group_content-align_',
+        propsKey: 'contentAlign',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'group_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'group_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    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',
+    });
+    // @ts-expect-error
+    var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
+    return (jsxRuntimeExports.jsx("div", { className: clsx(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 ? (jsxRuntimeExports.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+}
+
+export { Tab as T, TabGroup as a, tabConfig as t };

package/dist/{Text-BcGbRc14.js → Text-edtauAM6.js}

@@ -1,4 +1,5 @@
-import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
@@ -61,7 +62,7 @@ function Text(props) {
     });
     // @ts-expect-error
     var textStyles = useStyles(props).styles;
-    var appearanceConfig = appearance && textConfig.appearance && textConfig.appearance[appearance];
+    var appearanceConfig = useMemo(function () { return appearance && textConfig.appearance && textConfig.appearance[appearance]; }, [appearance, textConfig]);
     return (jsxRuntimeExports.jsxs(Tag, { className: clsx(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 ||

package/dist/Textarea-Cie6SPyp.js

@@ -0,0 +1,96 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+
+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(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderHover',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'textarea_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'textarea_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = useMemo(function () { return appearance && textareaConfig.appearance && textareaConfig.appearance[appearance]; }, [appearance, textareaConfig]);
+    var stateConfig = useMemo(function () { return state && textareaConfig.state && textareaConfig.state[state]; }, [state, textareaConfig]);
+    return (jsxRuntimeExports.jsx("textarea", { className: clsx(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',
+};
+
+export { Textarea as T, textareaConfig as t };

package/dist/Tile-CQ5L7pja.js

@@ -0,0 +1,52 @@
+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 { B as Badge } from './Badge-DPM6qrjA.js';
+import { T as Text } from './Text-edtauAM6.js';
+import { T as Title } from './Title-BUN57fWw.js';
+
+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(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'tile_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderColorHover',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var tileStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxRuntimeExports.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsxRuntimeExports.jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsxRuntimeExports.jsx(Badge, { className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+}
+Tile.defaultProps = {
+    textTag: 'span',
+    alignDirection: 'vertical',
+};
+
+export { Tile as T };

package/dist/Title-BUN57fWw.js

@@ -0,0 +1,84 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useUserDeviceContext } from './context/UIContext.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+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 = useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var textColorActiveClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_active_',
+        propsKey: 'textColorActive',
+    });
+    var textColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_hover_',
+        propsKey: 'textColorHover',
+    });
+    var textAlignClass = useDeviceTargetClass(props, {
+        prefix: 'text-align_',
+        propsKey: 'textAlign',
+    });
+    var typeClass = useDeviceTargetClass(props, {
+        prefix: 'title_type_',
+        propsKey: 'type',
+    });
+    var fillColorClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var textGradientClass = useDeviceTargetClass(props, {
+        prefix: 'text-gradient_',
+        propsKey: 'textColorGradient',
+    });
+    var textStyleClass = useDeviceTargetClass(props, {
+        prefix: 'text-style_',
+        propsKey: 'textStyle',
+    });
+    var weightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var textTruncateClass = useDeviceTargetClass(props, {
+        prefix: 'text-truncate_',
+        propsKey: 'textTruncate',
+    });
+    // @ts-expect-error
+    var titleStyles = useStyles(props).styles;
+    var appearanceConfig = useMemo(function () { return appearance && titleConfig.appearance && titleConfig.appearance[appearance]; }, [appearance, titleConfig]);
+    // Element type (h1, h2, ..., h6)
+    var Tag = 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 (jsxRuntimeExports.jsx(Tag, { className: clsx(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: jsxRuntimeExports.jsx("span", { className: clsx(textAlignClass, 'title__wrapper', textTruncateClass), children: children || text }) }));
+}
+Title.defaultProps = {
+    size: 'h3',
+};
+
+export { Title as T, titleConfig as t };

package/dist/Tooltip-jT5A43he.js

@@ -0,0 +1,108 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import React__default, { useRef, useState, useCallback, useImperativeHandle, useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { T as Text } from './Text-edtauAM6.js';
+import { T as Title } from './Title-BUN57fWw.js';
+
+var tooltipConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        tooltipConfig.appearance = newComponent;
+    },
+};
+var Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
+    var before = props.before, after = props.after, appearance = props.appearance, children = props.children, className = props.className, text = props.text, title = props.title, type = props.type, set = props.set, arrowPosition = props.arrowPosition, titleTextColor = props.titleTextColor, titleSize = props.titleSize, textColor = props.textColor, textSize = props.textSize, initialIsVisible = props.initialIsVisible;
+    var tooltipTimeoutHideRef = useRef(null);
+    var tooltipTimeoutShowRef = useRef(null);
+    var isTooltipCloseAnimationInProgressRef = useRef(false);
+    var _a = useState(initialIsVisible), isTooltipVisible = _a[0], setIsTooltipVisible = _a[1];
+    var openTooltip = useCallback(function () {
+        if (!isTooltipCloseAnimationInProgressRef.current) {
+            if (tooltipTimeoutHideRef.current) {
+                clearTimeout(tooltipTimeoutHideRef.current);
+            }
+            tooltipTimeoutShowRef.current = setTimeout(function () {
+                setIsTooltipVisible(true);
+            }, 500);
+        }
+    }, []);
+    var closeTooltip = useCallback(function () {
+        if (tooltipTimeoutShowRef.current) {
+            clearTimeout(tooltipTimeoutShowRef.current);
+        }
+        // Make a small delay to be able to move cursor on the tooltip without
+        // triggering a close, because the label and the tooltip have  space between
+        tooltipTimeoutHideRef.current = setTimeout(function () {
+            // @ts-expect-error
+            setIsTooltipVisible(function (prevState) {
+                var newState = false;
+                if (prevState === true) {
+                    isTooltipCloseAnimationInProgressRef.current = true;
+                }
+                return newState;
+            });
+        }, 250);
+    }, []);
+    var onAnimationEnd = useCallback(function () {
+        isTooltipCloseAnimationInProgressRef.current = false;
+    }, []);
+    // @ts-expect-error
+    useImperativeHandle(ref, function () { return ({ openTooltip: openTooltip, closeTooltip: closeTooltip }); }, [openTooltip, closeTooltip]);
+    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 shapeClass = useDeviceTargetClass(props, {
+        prefix: 'tooltip_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'tooltip_size_',
+        propsKey: 'size',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var alignmentClass = useDeviceTargetClass(props, {
+        prefix: 'alignment_',
+        propsKey: 'alignment',
+    });
+    // @ts-expect-error
+    var tooltipStyles = useStyles(props).styles;
+    var appearanceConfig = useMemo(function () { return appearance && tooltipConfig.appearance && tooltipConfig.appearance[appearance]; }, [appearance, tooltipConfig]);
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && "tooltip_type_arrow tooltip_arrow_position_".concat(arrowPosition), type && "tooltip_type_".concat(type), set && "tooltip_set_".concat(set), widthClass), style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [before, jsxRuntimeExports.jsxs("div", { className: "tooltip__inner", children: [title && (jsxRuntimeExports.jsx(Title, { className: "tooltip__title", size: titleSize, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), children] }), after] }));
+});
+Tooltip.defaultProps = {
+    initialIsVisible: null,
+};
+
+export { Tooltip as T, tooltipConfig as t };

package/dist/Video-0z4mNz4P.js

@@ -0,0 +1,18 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import clsx from 'clsx';
+import { useStyles } from './hooks/useStyles.js';
+
+function Video(props) {
+    var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
+    // @ts-expect-error
+    var videoStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxRuntimeExports.jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsxRuntimeExports.jsx("source", { src: webm, type: "video/webm", 
+                        // @ts-expect-error
+                        codecs: "vp8, vorbis" }), ogv && jsxRuntimeExports.jsx("source", { src: ogv, type: "video/ogg", 
+                        // @ts-expect-error
+                        codecs: "theora, vorbis" }), mp4 && jsxRuntimeExports.jsx("source", { src: mp4, type: "video/mp4", 
+                        // @ts-expect-error
+                        codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
+}
+
+export { Video as V };