@itcase/ui 1.8.1 → 1.8.3

package/dist/cjs/components/Segmented.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text-DwIx33-P.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -20,29 +20,36 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 
-var segmentedAppearance = {
-    default: {
+var segmentedAppearanceSize = {
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+    },
+    sizeM: {
         size: 's',
-        fill: 'surfacePrimary',
-        fillHover: 'surfaceSecondary',
-        labelTextActiveColor: 'accentTextPrimary',
-        labelTextColor: 'surfaceTextPrimary',
         labelTextSize: 's',
-        indicatorFill: 'accentPrimary',
-        shape: 'rounded',
     },
-    dev: {
-        width: 'fill',
-        fill: 'surfaceSecondary',
-        fillHover: 'surfacePrimaryHover',
+    sizeL: {
+        size: 's',
+        labelTextSize: 's',
+    },
+};
+
+var segmentedAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'm',
         indicatorFill: 'accentPrimary',
         shape: 'rounded',
     },
 };
 
+var segmentedAppearance = tslib_es6.__assign(tslib_es6.__assign({}, segmentedAppearanceSurface), segmentedAppearanceSize);
+
 var segmentedConfig = {
     appearance: segmentedAppearance,
     setAppearance: function (appearanceConfig) {
@@ -50,7 +57,7 @@ var segmentedConfig = {
     },
 };
 var Segmented = React.forwardRef(function (props) {
-    var className = props.className, type = props.type, name = props.name, appearance = props.appearance, size = props.size, isDisabled = props.isDisabled, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, segments = props.segments, setActiveSegment = props.setActiveSegment, onChange = props.onChange;
+    var className = props.className, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, segments = props.segments, setActiveSegment = props.setActiveSegment, onChange = props.onChange;
     var controlRef = React.useRef(null);
     var segmentsRefs = React.useMemo(function () {
         return new Map(segments.map(function (item) { return [item.value, React.createRef()]; }));
@@ -77,8 +84,13 @@ var Segmented = React.forwardRef(function (props) {
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = segmentedConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWrap = propsGenerator.labelTextWrap, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, indicatorFillClass = propsGenerator.indicatorFillClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && "segmented_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "segmented_width_".concat(widthClass), size && "segmented_size_".concat(size), type && "segmented_type_".concat(type), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item) { return (jsxRuntime.jsxs("div", { className: clsx('segmented__item', fillHoverClass && "fill_hover_".concat(fillHoverClass), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active', onChange && 'cursor_type_pointer', isDisabled && 'cursor_type_default'), ref: segmentsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: item.label, className: "segmented__item-radio", type: "radio", name: name, checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), value: item.value, onChange: function () { return onChangeValue(item); } }), jsxRuntime.jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsxRuntime.jsx(Text.Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize, textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+    var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, size = propsGenerator.size, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWrap = propsGenerator.labelTextWrap, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, indicatorFillClass = propsGenerator.indicatorFillClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && "segmented_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), widthClass && "segmented_width_".concat(widthClass), size && "segmented_size_".concat(size), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item) { return (jsxRuntime.jsxs("div", { className: clsx('segmented__item', item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                            ? fillActiveHoverClass &&
+                                "fill_active_hover_".concat(fillActiveHoverClass)
+                            : fillHoverClass && "fill_hover_".concat(fillHoverClass), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
+                            : fillClass && "fill_".concat(fillClass), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active', onChange && 'cursor_type_pointer', isDisabled && 'cursor_type_default'), ref: segmentsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: item.label, className: "segmented__item-radio", type: "radio", name: name, checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), value: item.value, onChange: function () { return onChangeValue(item); } }), jsxRuntime.jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsxRuntime.jsx(Text.Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize, textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
                                         ? labelTextActiveColor
                                         : labelTextColor, textColorHover: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
                                         ? labelTextActiveHoverColor

package/dist/cjs/components/Select.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-D_BDlSSb.js');
+var Icon = require('../../Icon_cjs_DSzfNqif.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text-DwIx33-P.js');
-var Badge = require('../../Badge-Df7Zxjnk.js');
-var Group = require('../../Group-utjnjUDZ.js');
-var Divider = require('../../Divider-BQIfjvPR.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
+var Badge = require('../../Badge_cjs_DrG2tUjI.js');
+var Group = require('../../Group_cjs_DFmNT5Mq.js');
+var Divider = require('../../Divider_cjs_DakITdTv.js');
 require('react-inlinesvg');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/camelCase');
@@ -25,9 +25,9 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link-CZ8o5lGW.js');
-require('../../Tooltip-hznDyLwa.js');
-require('../../Title-ByfOyy-n.js');
+require('../../Link_cjs_yht44xJv.js');
+require('../../Tooltip_cjs_CTwksdFk.js');
+require('../../Title_cjs_iuyln-ab.js');
 require('lodash/castArray');
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
@@ -112,7 +112,7 @@ var SelectMenu = function (props) {
 
 var SelectMultiValueContainer = function (props) {
     var _a = props.selectProps, multipleItemFill = _a.multipleItemFill, multipleItemFillHover = _a.multipleItemFillHover;
-    return (jsxRuntime.jsx(Select.components.MultiValueContainer, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Group.Group, { className: "select__multi-value-wrapper", fill: multipleItemFill, fillHover: multipleItemFillHover, alignItems: "center", direction: "horizontal", gap: "4", children: props.children }) })));
+    return (jsxRuntime.jsx(Select.components.MultiValueContainer, tslib_es6.__assign({}, props, { children: jsxRuntime.jsx(Group.Group, { className: "select__multi-value-wrapper", direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, gap: "4", children: props.children }) })));
 };
 
 var SelectMultiValueLabel = function (props) {

package/dist/cjs/components/Swiper.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var react = require('swiper/react');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Title = require('../../Title-ByfOyy-n.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+var Title = require('../../Title_cjs_iuyln-ab.js');
+require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');

package/dist/cjs/components/Switch.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text-DwIx33-P.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');

package/dist/cjs/components/Tab.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Badge = require('../../Badge-Df7Zxjnk.js');
-var Divider = require('../../Divider-BQIfjvPR.js');
-var Link = require('../../Link-CZ8o5lGW.js');
-var Text = require('../../Text-DwIx33-P.js');
+var Badge = require('../../Badge_cjs_DrG2tUjI.js');
+var Divider = require('../../Divider_cjs_DakITdTv.js');
+var Link = require('../../Link_cjs_yht44xJv.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -22,110 +22,90 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon-D_BDlSSb.js');
+require('../../Icon_cjs_DSzfNqif.js');
 require('react-inlinesvg');
-require('../../Tooltip-hznDyLwa.js');
-require('../../Title-ByfOyy-n.js');
+require('../../Tooltip_cjs_CTwksdFk.js');
+require('../../Title_cjs_iuyln-ab.js');
 
-var tabAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        labelColor: 'accentTextPrimary',
-        labelColorActive: 'accentTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'surfacePrimary',
-        dividerFillHover: 'surfaceTertiary',
+var tabAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        dividerSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xxs',
     },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelColor: 'primaryTextPrimary',
-        labelColorActive: 'primaryTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
+};
+
+var tabAppearanceStyle = {
+    full: {
+    /* border / fill */
     },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelColor: 'secondaryTextPrimary',
-        labelColorActive: 'secondaryTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
+    ghost: {
+        fill: 'none',
+        borderWidth: '0',
+    },
+    outlined: {
+        fill: 'none',
     },
+    solid: {
+        borderWidth: '0',
+    },
+};
+
+var tabAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillDisabled: 'surfaceDisabled',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
         dividerFillDisabled: 'accentDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillHover: 'accentPrimary',
+        badgeAppearance: 'accentPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
         fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextInverse',
+        labelColorActive: 'surfaceTextInverse',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
+        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceSecondaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelColor: 'surfaceTextPrimary',
-        labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
         fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
         fillHover: 'surfaceTertiaryHover',
-        labelColor: 'surfaceTextInverse',
-        labelColorActive: 'surfaceTextInverse',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
-    },
-    any: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
 };
 
+var tabAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, tabAppearanceSurface), tabAppearanceSize), tabAppearanceStyle);
+
 var tabConfig = {
     appearance: tabAppearance,
     setAppearance: function (appearanceConfig) {

package/dist/cjs/components/Text.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Text = require('../../Text-DwIx33-P.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
+require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/components/Textarea.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
@@ -16,90 +16,171 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 
-var textareaAppearance = {
-    dev: {
-        size: 'm',
+var textareaAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
-        textSize: 'm',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
     },
 };
-var textareaState = {
-    filled: {
-        borderColor: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
+
+var textareaAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceFillDisabled',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
-    disabled: {
-        borderColor: 'surfaceBorderDisabled',
+};
+
+var textareaAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        placeholderTextColor: 'surfaceTextDisabled',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
-    error: {
-        borderColor: 'errorBorderPrimary',
-        placeholderTextColor: 'secondaryTextSecondary',
+    errorSecondary: {
+        fill: 'errorSecondary',
+        borderColor: 'errorBorderTertiary',
+        borderHover: 'errorBorderQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'errorTextSecondary',
     },
-    errorFilled: {
-        borderColor: 'errorBorderPrimary',
+};
+
+var textareaAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
-    success: {
-        borderColor: 'successBorderPrimary',
-        textColor: 'surfaceTextPrimary',
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
-    active: {
-        borderColor: 'surfaceBorderActive',
-        placeholderTextColor: 'secondaryTextSecondary',
+};
+
+var textareaAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'l',
     },
-    activeFilled: {
-        borderColor: 'surfaceBorderActive',
-        textColor: 'surfaceTextPrimary',
+    sizeXL: {
+        size: 'xl',
+        textSize: 's',
     },
-    normal: {
-        borderColor: 'surfaceBorderQuaternary',
-        placeholderTextColor: 'secondaryTextSecondary',
+    sizeL: {
+        size: 'l',
+        textSize: 's',
     },
-    readonly: {
-        borderColor: 'surfaceBorderDisabled',
-        textColor: 'surfaceTextPrimary',
+    sizeM: {
+        size: 'm',
+        textSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 's',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 's',
+    },
+};
+
+var textareaAppearanceStyle = {
+    full: {
+    /* border / fill */
+    },
+    ghost: {
+        fill: 'none',
+        borderWidth: '0',
     },
-    require: {
-        borderColor: 'surfaceBorderActive',
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderWidth: '0',
+    },
+};
+
+var textareaAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        borderColor: 'successBorderQuaternary',
+        borderHover: 'successBorderQuaternary',
         textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'successItemQuaternary',
+        iconClearFill: 'successItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    successSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
 };
 
+var textareaAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, textareaAppearanceDefault), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
+
 var textareaConfig = {
     appearance: textareaAppearance,
-    state: textareaState,
     setAppearance: function (appearanceConfig) {
         textareaConfig.appearance = appearanceConfig;
     },
-    setState: function (newComponent) {
-        textareaConfig.state = newComponent;
-    },
 };
 function Textarea(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, disabled = props.disabled, placeholder = props.placeholder, 
-    // state,
-    value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
-    // const stateConfig = useMemo(
-    //   () => state && textareaConfig.state && textareaConfig.state[state],
-    //   [state, textareaConfig],
-    // )
+    var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = textareaConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'm' : _a, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("textarea", { id: id, className: clsx(className, 'textarea', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&
-            "placeholder-text-color_".concat(placeholderTextColorClass), sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass)), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&
+                "placeholder-text-color_".concat(placeholderTextColorClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }) }));
 }
 
 exports.Textarea = Textarea;
 exports.textareaAppearance = textareaAppearance;
 exports.textareaConfig = textareaConfig;
-exports.textareaState = textareaState;

package/dist/cjs/components/Tile.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Badge = require('../../Badge-Df7Zxjnk.js');
-var Text = require('../../Text-DwIx33-P.js');
-var Title = require('../../Title-ByfOyy-n.js');
+var Badge = require('../../Badge_cjs_DrG2tUjI.js');
+var Text = require('../../Text_cjs_D4xG0cKD.js');
+var Title = require('../../Title_cjs_iuyln-ab.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -21,10 +21,10 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon-D_BDlSSb.js');
+require('../../Icon_cjs_DSzfNqif.js');
 require('react-inlinesvg');
-require('../../Link-CZ8o5lGW.js');
-require('../../Tooltip-hznDyLwa.js');
+require('../../Link_cjs_yht44xJv.js');
+require('../../Tooltip_cjs_CTwksdFk.js');
 
 var tileAppearance = {
     dev: {},

package/dist/cjs/components/Title.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Title = require('../../Title-ByfOyy-n.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+var Title = require('../../Title_cjs_iuyln-ab.js');
+require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');