@itcase/ui 1.8.72 → 1.8.73

package/dist/Group_cjs_GqR99U0L.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+var groupAppearance = {
+    dev: {
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        borderWidth: 1,
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (appearanceConfig) {
+        groupConfig.appearance = appearanceConfig;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, isDisabled = props.isDisabled, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
+    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillDisabledClass = propsGenerator.fillDisabledClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var groupStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isDisabled
+            ? !isActive
+                ? fillClass && "fill_".concat(fillClass)
+                : fillActiveClass && "fill_active_".concat(fillActiveClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
+            ? !isActive
+                ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+                : fillActiveHoverClass &&
+                    "fill_active_hover_".concat(fillActiveHoverClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isDisabled
+            ? !isActive
+                ? borderColorClass && "border-color_".concat(borderColorClass)
+                : borderColorActiveClass &&
+                    "border-color_active_".concat(borderColorActiveClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
+            ? !isActive
+                ? borderColorHoverClass &&
+                    "border-color_hover_".concat(borderColorHoverClass)
+                : borderColorActiveHoverClass &&
+                    "border-color_active_hover_".concat(borderColorActiveHoverClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, dataTestId: dataTestId, dataTour: dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+});
+
+exports.Group = Group;
+exports.groupAppearance = groupAppearance;
+exports.groupConfig = groupConfig;

package/dist/Group_es_Bo7Y6JwT.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+var groupAppearance = {
+    dev: {
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        borderWidth: 1,
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (appearanceConfig) {
+        groupConfig.appearance = appearanceConfig;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, isDisabled = props.isDisabled, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
+    var appearanceConfig = useAppearanceConfig(appearance, groupConfig);
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillDisabledClass = propsGenerator.fillDisabledClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var groupStyles = useStyles(props).styles;
+    return (jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isDisabled
+            ? !isActive
+                ? fillClass && "fill_".concat(fillClass)
+                : fillActiveClass && "fill_active_".concat(fillActiveClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
+            ? !isActive
+                ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+                : fillActiveHoverClass &&
+                    "fill_active_hover_".concat(fillActiveHoverClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isDisabled
+            ? !isActive
+                ? borderColorClass && "border-color_".concat(borderColorClass)
+                : borderColorActiveClass &&
+                    "border-color_active_".concat(borderColorActiveClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), !isDisabled
+            ? !isActive
+                ? borderColorHoverClass &&
+                    "border-color_hover_".concat(borderColorHoverClass)
+                : borderColorActiveHoverClass &&
+                    "border-color_active_hover_".concat(borderColorActiveHoverClass)
+            : fillDisabledClass && "fill_".concat(fillDisabledClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, dataTestId: dataTestId, dataTour: dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+});
+
+export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_CUv4th9V.js');
+var Avatar = require('../../Avatar_cjs_BHvgPTAY.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/AvatarStack.js

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_CUv4th9V.js');
-var Group = require('../../Group_cjs_D4QLNgcC.js');
+var Avatar = require('../../Avatar_cjs_BHvgPTAY.js');
+var Group = require('../../Group_cjs_GqR99U0L.js');
 var Text = require('../../Text_cjs_B8nNXWBA.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');

package/dist/cjs/components/Checkmark.js

@@ -89,6 +89,15 @@ var checkmarkAppearanceSurface = {
         borderWidth: '2',
         checkmarkFill: 'surfaceItemPrimary',
     },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'surfacePrimary',
+        fillHover: 'surfaceHover',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
+        checkmarkFill: 'surfaceItemPrimary',
+    },
 };
 
 var checkmarkAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface), checkmarkAppearanceSize);

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group_cjs_D4QLNgcC.js');
+var Group = require('../../Group_cjs_GqR99U0L.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Response.js

@@ -10,7 +10,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Button = require('../../Button_cjs_CF3wei05.js');
-var Group = require('../../Group_cjs_D4QLNgcC.js');
+var Group = require('../../Group_cjs_GqR99U0L.js');
 var Text = require('../../Text_cjs_B8nNXWBA.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Text = require('../../Text_cjs_B8nNXWBA.js');
-var Group = require('../../Group_cjs_D4QLNgcC.js');
+var Group = require('../../Group_cjs_GqR99U0L.js');
 var Divider = require('../../Divider_cjs_rxMMBfLC.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');

package/dist/cjs/components/Switch.js

@@ -119,30 +119,20 @@ var switchConfig = {
     },
 };
 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, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, isActive = props.isActive, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
-    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: disabled, checked: checked || isActive, 
+    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked', 
                         // @ts-expect-error
-                        ref: ref, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !checked
+                        ref: ref, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !checked
+                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
                             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
                             : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass), !isActive
-                            ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-                            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-                            : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !checked
-                            ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !checked
-                            ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
-                            : fillToggleActiveHoverClass &&
-                                "fill_active_hover_".concat(fillToggleActiveHoverClass), !isActive
+                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
                             ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
+                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
                             ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
                             : fillToggleActiveHoverClass &&
                                 "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_CZbxsfMv.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_DnqQ0yn6.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/AvatarStack.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_CZbxsfMv.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { A as Avatar } from '../Avatar_es_DnqQ0yn6.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/components/Checkmark.js

@@ -87,6 +87,15 @@ var checkmarkAppearanceSurface = {
         borderWidth: '2',
         checkmarkFill: 'surfaceItemPrimary',
     },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'surfacePrimary',
+        fillHover: 'surfaceHover',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
+        checkmarkFill: 'surfaceItemPrimary',
+    },
 };
 
 var checkmarkAppearance = __assign(__assign(__assign(__assign(__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface), checkmarkAppearanceSize);

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_CruwH8Al.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_Bo7Y6JwT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Response.js

@@ -8,7 +8,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_3cCwdJcQ.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Switch.js

@@ -117,30 +117,20 @@ var switchConfig = {
     },
 };
 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, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, isActive = props.isActive, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig(appearance, switchConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
-    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: disabled, checked: checked || isActive, 
+    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked', 
                         // @ts-expect-error
-                        ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !checked
+                        ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !checked
+                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
                             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
                             : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass), !isActive
-                            ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-                            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-                            : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !checked
-                            ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !checked
-                            ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
-                            : fillToggleActiveHoverClass &&
-                                "fill_active_hover_".concat(fillToggleActiveHoverClass), !isActive
+                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
                             ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
+                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
                             ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
                             : fillToggleActiveHoverClass &&
                                 "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));

package/dist/types/components/Avatar/appearance/avatarShape.d.ts

@@ -5,7 +5,7 @@ declare const avatarAppearanceShape: {
     rounded: {
         shape: string;
     };
-    roundedL: {
+    roundedS: {
         shape: string;
         shapeStrength: string;
     };
@@ -13,7 +13,7 @@ declare const avatarAppearanceShape: {
         shape: string;
         shapeStrength: string;
     };
-    roundedS: {
+    roundedL: {
         shape: string;
         shapeStrength: string;
     };

package/dist/types/components/Checkmark/appearance/checkmarkSurface.d.ts

@@ -8,5 +8,14 @@ declare const checkmarkAppearanceSurface: {
         borderWidth: string;
         checkmarkFill: string;
     };
+    surfaceSecondary: {
+        fill: string;
+        fillActive: string;
+        fillHover: string;
+        borderColor: string;
+        borderColorHover: string;
+        borderWidth: string;
+        checkmarkFill: string;
+    };
 };
 export { checkmarkAppearanceSurface };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.72",
+  "version": "1.8.73",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,7 +103,7 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.28",
     "@itcase/icons": "^1.2.16",
-    "@itcase/storybook-config": "^1.1.61",
+    "@itcase/storybook-config": "^1.1.64",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.11",
@@ -143,7 +143,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.54",
-    "@itcase/lint": "^1.1.27",
+    "@itcase/lint": "^1.1.29",
     "@itcase/types": "^1.0.6",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",

package/dist/Group_cjs_D4QLNgcC.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-var groupAppearance = {
-    dev: {
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: 1,
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (appearanceConfig) {
-        groupConfig.appearance = appearanceConfig;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var groupStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx(Tag, { id: id, dataTestId: dataTestId, dataTour: dataTour, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
-            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isActive
-            ? borderColorClass && "border-color_".concat(borderColorClass)
-            : borderColorActiveClass &&
-                "border-color_active_".concat(borderColorActiveClass), !isActive
-            ? borderColorHoverClass &&
-                "border-color_hover_".concat(borderColorHoverClass)
-            : borderColorActiveHoverClass &&
-                "border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
-});
-
-exports.Group = Group;
-exports.groupAppearance = groupAppearance;
-exports.groupConfig = groupConfig;

package/dist/Group_es_CruwH8Al.js

@@ -1,46 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-var groupAppearance = {
-    dev: {
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: 1,
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (appearanceConfig) {
-        groupConfig.appearance = appearanceConfig;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, groupConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var groupStyles = useStyles(props).styles;
-    return (jsx(Tag, { id: id, dataTestId: dataTestId, dataTour: dataTour, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
-            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isActive
-            ? borderColorClass && "border-color_".concat(borderColorClass)
-            : borderColorActiveClass &&
-                "border-color_active_".concat(borderColorActiveClass), !isActive
-            ? borderColorHoverClass &&
-                "border-color_hover_".concat(borderColorHoverClass)
-            : borderColorActiveHoverClass &&
-                "border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
-});
-
-export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/{Avatar_cjs_CUv4th9V.js → Avatar_cjs_BHvgPTAY.js}

@@ -37,17 +37,17 @@ var avatarAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedL: {
+    roundedS: {
         shape: 'rounded',
-        shapeStrength: '1_5m',
+        shapeStrength: '0_5m',
     },
     roundedM: {
         shape: 'rounded',
         shapeStrength: '1m',
     },
-    roundedS: {
+    roundedL: {
         shape: 'rounded',
-        shapeStrength: '0_5m',
+        shapeStrength: '1_5m',
     },
     roundedXL: {
         shape: 'rounded',

package/dist/{Avatar_es_CZbxsfMv.js → Avatar_es_DnqQ0yn6.js}

@@ -35,17 +35,17 @@ var avatarAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedL: {
+    roundedS: {
         shape: 'rounded',
-        shapeStrength: '1_5m',
+        shapeStrength: '0_5m',
     },
     roundedM: {
         shape: 'rounded',
         shapeStrength: '1m',
     },
-    roundedS: {
+    roundedL: {
         shape: 'rounded',
-        shapeStrength: '0_5m',
+        shapeStrength: '1_5m',
     },
     roundedXL: {
         shape: 'rounded',