@itcase/ui 1.8.5 → 1.8.10

package/dist/cjs/components/Select.js

@@ -3,13 +3,13 @@
 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_cjs_DSzfNqif.js');
+var Icon = require('../../Icon_cjs_BaWMPaAR.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_cjs_D4xG0cKD.js');
-var Badge = require('../../Badge_cjs_DrG2tUjI.js');
+var Badge = require('../../Badge_cjs_CeqDdbMs.js');
 var Group = require('../../Group_cjs_DFmNT5Mq.js');
 var Divider = require('../../Divider_cjs_DakITdTv.js');
 require('react-inlinesvg');
@@ -26,8 +26,8 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 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');
 require('lodash/castArray');
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
@@ -40,29 +40,40 @@ var SelectClearIndicator = function (props) {
     return (jsxRuntime.jsx(Select.components.ClearIndicator, tslib_es6.__assign({}, props, { children: clearIcon ? (jsxRuntime.jsx(Icon.Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) })));
 };
 
-var selectAppearance = {
-    dev: {
-        size: 'normal',
+var selectAppearanceDefault = {
+    defaultPrimary: {
         elevation: 8,
         inputBorderColor: 'surfaceBorderTertiary',
         inputBorderColorHover: 'surfaceBorderQuaternary',
         inputFill: 'surfacePrimary',
         inputShape: 'rounded',
         inputTextColor: 'surfaceTextPrimary',
-        inputTextSize: 'm',
+        multipleItemFill: 'surfaceSecondary',
+        multipleItemFillHover: 'surfaceHover',
+        multipleTextColor: 'accentTextPrimary',
         noOptionsText: 'Ничего не найдено...',
         noOptionsTextColor: 'surfaceTextPrimary',
-        noOptionsTextSize: 'm',
         optionFill: 'surfacePrimary',
-        optionFillHover: 'surfacePrimaryHover',
+        optionFillHover: 'surfaceHover',
         optionTextColor: 'surfaceTextPrimary',
-        optionTextSize: 'm',
         placeholder: 'Выбрать...',
-        placeholderTextColor: 'surfaceTextSecondary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+};
+
+var selectAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        inputTextSize: 'm',
+        multipleItemTextSize: 'm',
+        noOptionsTextSize: 'm',
+        optionTextSize: 'm',
         placeholderTextSize: 'm',
     },
 };
 
+var selectAppearance = tslib_es6.__assign(tslib_es6.__assign({}, selectAppearanceDefault), selectAppearanceSize);
+
 var SelectControl = function (props) {
     var _a = props.selectProps, inputBorderColor = _a.inputBorderColor, inputBorderColorHover = _a.inputBorderColorHover, inputFill = _a.inputFill, inputShape = _a.inputShape, before = _a.before, after = _a.after;
     return (jsxRuntime.jsxs(React.Fragment, { children: [before, jsxRuntime.jsx(Select.components.Control, tslib_es6.__assign({}, props, { className: clsx('select__control', inputFill, inputShape, inputBorderColor && "border-color_".concat(inputBorderColor), inputBorderColorHover &&
@@ -219,8 +230,8 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         return {};
     }, [appearance]);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
-    return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), elevation: elevation, isDisabled: isDisabled, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, sizeClass = propsGenerator.sizeClass;
+    return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set), widthClass && "select_width_".concat(widthClass)), elevation: elevation, isDisabled: isDisabled, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: function () { return null; },
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,

package/dist/cjs/components/Swiper.js

@@ -6,7 +6,7 @@ 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_cjs_iuyln-ab.js');
+var Title = require('../../Title_cjs_ByPcFb15.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/Switch.js

@@ -34,7 +34,7 @@ var Switch = React.forwardRef(function Switch(props, ref) {
     var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, size = props.size, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, onChange = props.onChange;
     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 = segmentedConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = switchConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;

package/dist/cjs/components/Tab.js

@@ -6,7 +6,7 @@ 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_cjs_DrG2tUjI.js');
+var Badge = require('../../Badge_cjs_CeqDdbMs.js');
 var Divider = require('../../Divider_cjs_DakITdTv.js');
 var Link = require('../../Link_cjs_yht44xJv.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
@@ -22,10 +22,10 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_DSzfNqif.js');
+require('../../Icon_cjs_BaWMPaAR.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');
 
 var tabAppearanceSize = {
     sizeL: {

package/dist/cjs/components/Tile.js

@@ -5,9 +5,9 @@ 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_cjs_DrG2tUjI.js');
+var Badge = require('../../Badge_cjs_CeqDdbMs.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
-var Title = require('../../Title_cjs_iuyln-ab.js');
+var Title = require('../../Title_cjs_ByPcFb15.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_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');
 
 var tileAppearance = {
     dev: {},

package/dist/cjs/components/Title.js

@@ -1,21 +1,21 @@
 'use strict';
 
-var Title = require('../../Title_cjs_iuyln-ab.js');
+var Title = require('../../Title_cjs_ByPcFb15.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
 require('../context/UIContext.js');
-require('lodash/camelCase');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-require('lodash/castArray');
-require('lodash/upperFirst');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');

package/dist/cjs/components/Tooltip.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip_cjs_CTwksdFk.js');
+var Tooltip = require('../../Tooltip_cjs_CY4HOzhz.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -20,7 +20,7 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_iuyln-ab.js');
+require('../../Title_cjs_ByPcFb15.js');
 
 
 

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -44,6 +44,9 @@ function useStyles(props) {
     const resultStylesGroups = {};
     for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
       let value = null;
+      console.log('propKey');
+      console.log(propKey);
+      console.log('propKey=======');
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
 

package/dist/components/Accordion.js

@@ -7,7 +7,7 @@ import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDev
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { icon16 } from '@itcase/icons/default';
 import { D as Divider } from '../Divider_es_CWsDM2Rm.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';
 import 'lodash/camelCase';
 import 'lodash/upperFirst';
@@ -22,8 +22,8 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.js';
 
 var accordionAppearance = {
     dev: {},

package/dist/components/Avatar.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_BBmoZ7_3.js';
+import { I as Icon } from '../Icon_es_B0sySEUu.js';
 import { I as Image } from '../Image_es_CSzHhlA1.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'lodash/camelCase';
@@ -21,8 +21,8 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.js';
 
 var avatarAppearance = {
     dev: {},

package/dist/components/Badge.js

@@ -1,4 +1,4 @@
-export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge_es_Bx0NsdST.js';
+export { B as Badge, b as badgeAppearance, a as badgeConfig } from '../Badge_es_uDX0eyDM.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';
@@ -17,9 +17,9 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_BBmoZ7_3.js';
+import '../Icon_es_B0sySEUu.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
+import '../Tooltip_es_B9hN4Zlm.js';
 import '../Text_es_FJGduy7Z.js';
-import '../Title_es_ke3YylFm.js';
+import '../Title_es_eejUqSJf.js';

package/dist/components/Breadcrumbs.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
 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 { a as LinkWrapper } from '../Link_es_DkW06IM-.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'lodash/castArray';
@@ -20,8 +20,8 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.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/components/Button.js

@@ -1,9 +1,9 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_CBbHMy1v.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_H15aBFcg.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../Icon_es_BBmoZ7_3.js';
+import '../Icon_es_B0sySEUu.js';
 import 'react-inlinesvg';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -20,7 +20,7 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
+import '../Tooltip_es_B9hN4Zlm.js';
 import '../Text_es_FJGduy7Z.js';
-import '../Title_es_ke3YylFm.js';
+import '../Title_es_eejUqSJf.js';
 import '../Loader_es_BE4nyzXi.js';

package/dist/components/Cell.js

@@ -3,8 +3,8 @@ 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 { L as Label } from '../Label_es_CZpanSdR.js';
+import { I as Icon } from '../Icon_es_B0sySEUu.js';
+import { L as Label } from '../Label_es_BCpDqP3q.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'react';
 import 'lodash/camelCase';
@@ -21,8 +21,8 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.js';
 
 var cellAppearance = {
     dev: {},

package/dist/components/Checkbox.js

@@ -18,44 +18,175 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../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 = __assign(__assign(__assign(__assign(__assign(__assign(__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 (__assign(__assign({}, resultConfig), (_a = checkboxConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = 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_',
     });
@@ -63,9 +194,7 @@ 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 (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, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", { 
-                        // @ts-expect-error
-                        id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), 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" }), jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
+    return (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, jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: disabled, checked: checked, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), 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" }), jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
-export { Checkbox, checkboxAppearance, checkboxConfig, checkboxState };
+export { Checkbox, checkboxAppearance, checkboxConfig };

package/dist/components/Chips.js

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 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';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -20,8 +20,8 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.js';
 
 var chipsAppearanceAccent = {
     accent: {
@@ -66,7 +66,12 @@ var chipsAppearanceSecondary = {
     },
 };
 
-var chipsAppearanceSize = {};
+var chipsAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        labelTextSize: 's',
+    },
+};
 
 var chipsAppearanceStyle = {};
 
@@ -82,6 +87,7 @@ var chipsAppearanceSurface = {
         labelTextColor: 'surfaceTextPrimary',
         labelTextHoverColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
+        activeIconItemFill: 'surfaceItemSecondary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
@@ -133,7 +139,7 @@ function Chips(props) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColor: labelTextColor, textColorActive: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
+            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
                         ? labelTextHoverColor
                         : labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
 }

package/dist/components/Choice.js

@@ -4,7 +4,7 @@ import React, { useRef, useMemo, createRef, useCallback } from 'react';
 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 { L as Loader } from '../Loader_es_BE4nyzXi.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'lodash/camelCase';
@@ -21,8 +21,8 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_H976MIb7.js';
-import '../Title_es_ke3YylFm.js';
+import '../Tooltip_es_B9hN4Zlm.js';
+import '../Title_es_eejUqSJf.js';
 
 var choiceAppearanceAccent = {
     accentPrimary: {