@itcase/ui 1.8.9 → 1.8.10

package/dist/{Badge_cjs_DrG2tUjI.js → Badge_cjs_CeqDdbMs.js}

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_DSzfNqif.js');
+var Icon = require('./Icon_cjs_BaWMPaAR.js');
 var Text = require('./Text_cjs_D4xG0cKD.js');
 
 var badgeAppearanceAccent = {

package/dist/{Badge_es_Bx0NsdST.js → Badge_es_uDX0eyDM.js}

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon_es_BBmoZ7_3.js';
+import { I as Icon } from './Icon_es_B0sySEUu.js';
 import { T as Text } from './Text_es_FJGduy7Z.js';
 
 var badgeAppearanceAccent = {

package/dist/{Button_cjs_B7OmqizJ.js → Button_cjs_BKQLT7oE.js}

@@ -4,7 +4,7 @@ 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 Icon = require('./Icon_cjs_DSzfNqif.js');
+var Icon = require('./Icon_cjs_BaWMPaAR.js');
 var Link = require('./Link_cjs_yht44xJv.js');
 var Loader = require('./Loader_cjs_D753D3li.js');
 var Text = require('./Text_cjs_D4xG0cKD.js');

package/dist/{Button_es_CBbHMy1v.js → Button_es_H15aBFcg.js}

@@ -2,7 +2,7 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Icon_es_BBmoZ7_3.js';
+import { I as Icon } from './Icon_es_B0sySEUu.js';
 import { a as LinkWrapper } from './Link_es_DkW06IM-.js';
 import { L as Loader } from './Loader_es_BE4nyzXi.js';
 import { T as Text } from './Text_es_FJGduy7Z.js';

package/dist/{Icon_cjs_DSzfNqif.js → Icon_cjs_BaWMPaAR.js}

@@ -8,7 +8,7 @@ var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Link = require('./Link_cjs_yht44xJv.js');
-var Tooltip = require('./Tooltip_cjs_CTwksdFk.js');
+var Tooltip = require('./Tooltip_cjs_CY4HOzhz.js');
 
 var iconAppearance = {
     accent: {

package/dist/{Icon_es_BBmoZ7_3.js → Icon_es_B0sySEUu.js}

@@ -6,7 +6,7 @@ import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { a as LinkWrapper } from './Link_es_DkW06IM-.js';
-import { T as Tooltip } from './Tooltip_es_H976MIb7.js';
+import { T as Tooltip } from './Tooltip_es_B9hN4Zlm.js';
 
 var iconAppearance = {
     accent: {

package/dist/{Input_cjs_C8RWS1SD.js → Input_cjs_BAVggtkk.js}

@@ -11,22 +11,22 @@ var inputAppearanceDefault = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
         textColor: 'surfaceTextPrimary',
         textColorDisabled: 'surfaceTextDisabled',
         caret: 'secondaryItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
     },
     defaultSecondary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
         textColor: 'surfaceTextPrimary',
         textColorDisabled: 'surfaceTextDisabled',
         caret: 'secondaryItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
 };
 

package/dist/{Input_es_FXxp51gq.js → Input_es_CNduH28G.js}

@@ -9,22 +9,22 @@ var inputAppearanceDefault = {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
         textColor: 'surfaceTextPrimary',
         textColorDisabled: 'surfaceTextDisabled',
         caret: 'secondaryItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
     },
     defaultSecondary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
         textColor: 'surfaceTextPrimary',
         textColorDisabled: 'surfaceTextDisabled',
         caret: 'secondaryItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
 };
 

package/dist/{Label_cjs_BCjB-mxC.js → Label_cjs_CbcENlSZ.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text_cjs_D4xG0cKD.js');
-var Tooltip = require('./Tooltip_cjs_CTwksdFk.js');
+var Tooltip = require('./Tooltip_cjs_CY4HOzhz.js');
 
 var labelAppearanceAccent = {
     accent: {

package/dist/{Label_es_CZpanSdR.js → Label_es_BCpDqP3q.js}

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { T as Text } from './Text_es_FJGduy7Z.js';
-import { T as Tooltip } from './Tooltip_es_H976MIb7.js';
+import { T as Tooltip } from './Tooltip_es_B9hN4Zlm.js';
 
 var labelAppearanceAccent = {
     accent: {

package/dist/{Title_cjs_iuyln-ab.js → Title_cjs_ByPcFb15.js}

@@ -4,8 +4,6 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-require('./cjs/context/Notifications.js');
-var UIContext = require('./cjs/context/UIContext.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
@@ -22,41 +20,22 @@ var titleConfig = {
     },
 };
 function Title(props) {
-    var className = props.className, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'h3' : _a, text = props.text, textWrap = props.textWrap, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
+    var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
     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 = titleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
     // @ts-expect-error
-    var _d = useStyles.useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
+    var _b = useStyles.useStyles(props), titleStyles = _b.styles, titleWrapperStyles = _b.wrapper;
     // 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';
-    }, [
-        tag,
-        isMobile,
-        sizeMobile,
-        isTablet,
-        sizeTablet,
-        isDesktop,
-        sizeDesktop,
-        size,
-    ]);
+    }, [tag, size]);
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 

package/dist/{Title_es_ke3YylFm.js → Title_es_eejUqSJf.js}

@@ -2,8 +2,6 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import './context/Notifications.js';
-import { useUserDeviceContext } from './context/UIContext.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 
@@ -20,41 +18,22 @@ var titleConfig = {
     },
 };
 function Title(props) {
-    var className = props.className, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'h3' : _a, text = props.text, textWrap = props.textWrap, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
+    var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = titleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
     // @ts-expect-error
-    var _d = useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
+    var _b = useStyles(props), titleStyles = _b.styles, titleWrapperStyles = _b.wrapper;
     // 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';
-    }, [
-        tag,
-        isMobile,
-        sizeMobile,
-        isTablet,
-        sizeTablet,
-        isDesktop,
-        sizeDesktop,
-        size,
-    ]);
+    }, [tag, size]);
     return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 

package/dist/{Tooltip_cjs_CTwksdFk.js → Tooltip_cjs_CY4HOzhz.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text_cjs_D4xG0cKD.js');
-var Title = require('./Title_cjs_iuyln-ab.js');
+var Title = require('./Title_cjs_ByPcFb15.js');
 
 var tooltipAppearance = {
     surfacePrimary: {

package/dist/{Tooltip_es_H976MIb7.js → Tooltip_es_B9hN4Zlm.js}

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { T as Text } from './Text_es_FJGduy7Z.js';
-import { T as Title } from './Title_es_ke3YylFm.js';
+import { T as Title } from './Title_es_eejUqSJf.js';
 
 var tooltipAppearance = {
     surfacePrimary: {

package/dist/cjs/components/Accordion.js

@@ -9,7 +9,7 @@ var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevic
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var _default = require('@itcase/icons/default');
 var Divider = require('../../Divider_cjs_DakITdTv.js');
-var Icon = require('../../Icon_cjs_DSzfNqif.js');
+var Icon = require('../../Icon_cjs_BaWMPaAR.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');
 require('lodash/upperFirst');
@@ -24,8 +24,8 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CTwksdFk.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 var accordionAppearance = {
     dev: {},

package/dist/cjs/components/Avatar.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('../../Icon_cjs_DSzfNqif.js');
+var Icon = require('../../Icon_cjs_BaWMPaAR.js');
 var Image = require('../../Image_cjs_DuIBtUq5.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');
@@ -23,8 +23,8 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CTwksdFk.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 var avatarAppearance = {
     dev: {},

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Badge = require('../../Badge_cjs_DrG2tUjI.js');
+var Badge = require('../../Badge_cjs_CeqDdbMs.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');
@@ -19,12 +19,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_DSzfNqif.js');
+require('../../Icon_cjs_BaWMPaAR.js');
 require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CTwksdFk.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
 require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_DSzfNqif.js');
+var Icon = require('../../Icon_cjs_BaWMPaAR.js');
 var Link = require('../../Link_cjs_yht44xJv.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/castArray');
@@ -22,8 +22,8 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Tooltip_cjs_CTwksdFk.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 function BreadcrumbsItem(props) {
     var className = props.className, text = props.text, textColor = props.textColor, textColorHover = props.textColorHover, textSize = props.textSize, cursor = props.cursor, href = props.href, iconAfter = props.iconAfter, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, _a = props.set, set = _a === void 0 ? 'default' : _a, onClick = props.onClick, children = props.children;

package/dist/cjs/components/Button.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Button = require('../../Button_cjs_B7OmqizJ.js');
+var Button = require('../../Button_cjs_BKQLT7oE.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../../Icon_cjs_DSzfNqif.js');
+require('../../Icon_cjs_BaWMPaAR.js');
 require('react-inlinesvg');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
@@ -22,9 +22,9 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CTwksdFk.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
 require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Title_cjs_ByPcFb15.js');
 require('../../Loader_cjs_D753D3li.js');
 
 

package/dist/cjs/components/Cell.js

@@ -5,8 +5,8 @@ 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 Icon = require('../../Icon_cjs_DSzfNqif.js');
-var Label = require('../../Label_cjs_BCjB-mxC.js');
+var Icon = require('../../Icon_cjs_BaWMPaAR.js');
+var Label = require('../../Label_cjs_CbcENlSZ.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('react');
 require('lodash/camelCase');
@@ -23,8 +23,8 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CTwksdFk.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Tooltip_cjs_CY4HOzhz.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 var cellAppearance = {
     dev: {},

package/dist/cjs/components/Checkbox.js

@@ -20,44 +20,175 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 
-var checkboxAppearance = {
-    dev: {
+var checkboxAppearanceDefault = {
+    defaultPrimary: {
         labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'm',
-        descTextColor: 'surfaceTextPrimary',
-        descTextSize: 'm',
-        stateBorderColor: 'surfaceBorderQuaternary',
-        stateBorderWidth: '1',
+        descTextColor: 'surfaceTextTertiary',
+        errorStateBorderColor: 'errorBorderSecondary',
+        stateBorderColorDisabled: 'surfaceBorderTertiary',
+        stateBorderColorDisabledChecked: 'surfaceBorderTertiary',
+        stateCheckmarkFillDisabled: 'accentItemPrimary',
+        stateFillDisabled: 'surfaceTertiary',
+        stateFillDisabledChecked: 'surfaceTertiary',
+        requiredStateBorderColor: 'warningBorderPrimary',
+        stateBorderColor: 'surfaceBorderTertiary',
+        stateBorderColorChecked: 'surfaceBorderAccent',
         stateCheckmarkFill: 'accentItemPrimary',
         stateFillChecked: 'accentPrimary',
-        stateShape: 'rounded',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var checkboxAppearanceDisabled = {
+    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',
+    },
+};
+
+var checkboxAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    errorSecondary: {
+        fill: 'errorSecondary',
+        borderColor: 'errorBorderTertiary',
+        borderHover: 'errorBorderQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'errorTextSecondary',
+    },
+};
+
+var checkboxAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var checkboxAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'l',
+    },
+    sizeXL: {
+        size: 'xl',
+        textSize: 's',
+    },
+    sizeL: {
+        size: 'l',
+        textSize: 's',
+    },
+    sizeM: {
+        labelTextSize: 'm',
+        descTextSize: 'xxs',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 's',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 's',
     },
 };
-var checkboxState = {
-    normal: {
-        borderColor: 'surfaceBorderQuaternary',
-        placeholderTextColor: 'secondaryTextSecondary',
+
+var checkboxAppearanceStyle = {
+    full: {
+    /* border / fill */
+    },
+    ghost: {
+        fill: 'none',
+        borderWidth: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderWidth: '0',
+    },
+};
+
+var checkboxAppearanceSuccess = {
+    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 checkboxAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, checkboxAppearanceDefault), checkboxAppearanceError), checkboxAppearanceSuccess), checkboxAppearanceRequire), checkboxAppearanceDisabled), checkboxAppearanceSize), checkboxAppearanceStyle);
+
 var checkboxConfig = {
     appearance: checkboxAppearance,
-    state: checkboxState,
     setAppearance: function (appearanceConfig) {
         checkboxConfig.appearance = appearanceConfig;
     },
-    setState: function (appearanceConfig) {
-        checkboxConfig.state = appearanceConfig;
-    },
 };
 function Checkbox(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, checked = props.checked, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, disabled = props.disabled, checked = props.checked, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     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 = checkboxConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateShapeClass = propsGenerator.stateShapeClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, shapeClass = propsGenerator.shapeClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateShapeClass = propsGenerator.stateShapeClass, widthClass = propsGenerator.widthClass;
     var stateFillClass = propsGenerator.getClassName(checked ? 'stateFillChecked' : 'stateFill', {
         prefix: 'fill_',
     });
@@ -65,12 +196,9 @@ function Checkbox(props) {
     var stateCheckmarkFillClass = propsGenerator.getClassName(disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill', { prefix: 'checkbox_checkmark_fill_' });
     var stateBorderColorClass = propsGenerator.getClassName(checked ? 'stateBorderColorChecked' : 'stateBorderColor', { prefix: 'border-color_' });
     var stateBorderColorDisabledClass = propsGenerator.getClassName(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsxRuntime.jsx("input", { 
-                        // @ts-expect-error
-                        id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), isSkeleton && "checkbox_skeleton"), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;
 exports.checkboxAppearance = checkboxAppearance;
 exports.checkboxConfig = checkboxConfig;
-exports.checkboxState = checkboxState;