@itcase/ui 1.8.74 → 1.8.76

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_p5BbbozF.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BLUYSr4v.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/Choice.js

@@ -98,6 +98,31 @@ var choiceAppearanceRequire = {
     },
 };
 
+var choiceAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var choiceAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -152,7 +177,7 @@ var choiceAppearanceSuccess = {
     },
 };
 
-var choiceAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize);
+var choiceAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceShape), choiceAppearanceSize);
 
 var choiceConfig = {
     appearance: choiceAppearance,
@@ -172,13 +197,13 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, choiceConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeItemClass = propsGenerator.shapeItemClass, wrapClass = propsGenerator.wrapClass;
+    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, wrapClass = propsGenerator.wrapClass;
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsxRuntime.jsx("div", { className: "choice__before", children: before }), isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
                     var isActive = typeof active === 'object'
                         ? String(item.value) === String(active.value)
                         : String(item.value) === String(active);
-                    return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
+                    return (jsxRuntime.jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
                             ? fillItemClass && "fill_".concat(fillItemClass)
                             : fillItemDisabledClass &&
                                 "fill_disabled_".concat(fillItemDisabledClass), !isDisabled &&
@@ -196,7 +221,7 @@ function Choice(props) {
                                 : fillItemDisabledClass &&
                                     "fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
                             isDisabled &&
-                            'choice__item_active_state_disabled', isActive && 'choice__item_active', shapeItemClass && "choice__item_shape_".concat(shapeItemClass)), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
                                             : item.iconBefore, isActive: isActive })), item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter

package/dist/cjs/components/Code.js

@@ -65,6 +65,31 @@ var codeAppearanceRequire = {
     },
 };
 
+var codeAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var codeAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -106,7 +131,7 @@ var codeAppearanceSuccess = {
     },
 };
 
-var codeAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, codeAppearanceDisabled), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
+var codeAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, codeAppearanceDisabled), codeAppearanceShape), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
 
 var codeConfig = {
     appearance: codeAppearance,
@@ -119,11 +144,11 @@ function Code(props) {
     var _c = React.useState(''), otp = _c[0], setOtp = _c[1];
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, codeConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputShapeClass = propsGenerator.inputShapeClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps, index) {
         return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
-                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
+                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
                 "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass &&
                 "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), name: "code-".concat(index), autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: function (event) {
                 onBlur && onBlur(event);

package/dist/cjs/components/DatePeriod.js

@@ -7,7 +7,7 @@ var common = require('@itcase/common');
 var DatePicker = require('../../DatePicker_cjs_DPe3TnXs.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_p5BbbozF.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BLUYSr4v.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('date-fns/locale');
 require('react-datepicker');

package/dist/cjs/components/Drawer.js

@@ -4,39 +4,45 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDrawer = require('react-modern-drawer');
+var Divider = require('../../Divider_cjs_rxMMBfLC.js');
 var Icon = require('../../Icon_cjs_BdX_3y6P.js');
 var Text = require('../../Text_cjs_B8nNXWBA.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
-require('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/styleAttributes.js');
+require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_BqT6eVl6.js');
 require('lodash/castArray');
 
+var drawerAppearanceSize = {
+    sizeH3: {
+        titleTextSize: 'h3',
+        descTextSize: 's',
+        iconSize: 24,
+    },
+};
+
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h3',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 's',
-        iconSize: 24,
         closeIcon: _default.icons24.Action.Close,
         closeIconFillIcon: 'surfaceItemPrimary',
     },
@@ -59,7 +65,7 @@ var drawerAppearanceSurface = {
     },
 };
 
-var drawerAppearance = tslib_es6.__assign({}, drawerAppearanceSurface);
+var drawerAppearance = tslib_es6.__assign(tslib_es6.__assign({}, drawerAppearanceSize), drawerAppearanceSurface);
 
 var drawerConfig = {
     appearance: drawerAppearance,
@@ -81,7 +87,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CSRBUuRU.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_DSwPxBuZ.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/components/Choice.js

@@ -96,6 +96,31 @@ var choiceAppearanceRequire = {
     },
 };
 
+var choiceAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var choiceAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -150,7 +175,7 @@ var choiceAppearanceSuccess = {
     },
 };
 
-var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceSize);
+var choiceAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, choiceAppearanceError), choiceAppearanceDisabled), choiceAppearanceDefault), choiceAppearanceSuccess), choiceAppearanceRequire), choiceAppearanceStyle), choiceAppearanceShape), choiceAppearanceSize);
 
 var choiceConfig = {
     appearance: choiceAppearance,
@@ -170,13 +195,13 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     var appearanceConfig = useAppearanceConfig(appearance, choiceConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeItemClass = propsGenerator.shapeItemClass, wrapClass = propsGenerator.wrapClass;
+    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, wrapClass = propsGenerator.wrapClass;
     var styles = useStyles(props).styles;
-    return (jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map(function (item) {
+    return (jsxs("div", { id: id, className: clsx(className, 'choice', size && "choice_size_".concat(size), fillClass && "fill_".concat(fillClass), wrapClass && "choice_wrap_".concat(wrapClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), isSkeleton && "choice_skeleton"), dataTestId: dataTestId && "".concat(dataTestId, "Choice"), dataTour: dataTour, ref: controlRef, style: styles, children: [before && jsx("div", { className: "choice__before", children: before }), isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent" })) : (jsx(React.Fragment, { children: options.map(function (item) {
                     var isActive = typeof active === 'object'
                         ? String(item.value) === String(active.value)
                         : String(item.value) === String(active);
-                    return (jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
+                    return (jsxs("div", { className: clsx('choice__item', size && "choice__item_size_".concat(size), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), !isDisabled
                             ? fillItemClass && "fill_".concat(fillItemClass)
                             : fillItemDisabledClass &&
                                 "fill_disabled_".concat(fillItemDisabledClass), !isDisabled &&
@@ -194,7 +219,7 @@ function Choice(props) {
                                 : fillItemDisabledClass &&
                                     "fill_disabled_".concat(fillItemDisabledClass), !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
                             isDisabled &&
-                            'choice__item_active_state_disabled', isActive && 'choice__item_active', shapeItemClass && "choice__item_shape_".concat(shapeItemClass)), ref: optionsRefs.get(item.value), children: [jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { id: "".concat(name, "-").concat(item.value), className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, disabled: isDisabled, checked: isActive, value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconBeforeFillDisabled, isDisabled: isDisabled, iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconSize: iconBeforeSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
                                             : item.iconBefore, isActive: isActive })), item.label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconFillDisabled, iconFill: iconFill, iconFillActive: iconFillActive, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: iconAfterFillDisabled, iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconSize: iconAfterSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter

package/dist/components/Code.js

@@ -63,6 +63,31 @@ var codeAppearanceRequire = {
     },
 };
 
+var codeAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var codeAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -104,7 +129,7 @@ var codeAppearanceSuccess = {
     },
 };
 
-var codeAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, codeAppearanceDisabled), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
+var codeAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, codeAppearanceDisabled), codeAppearanceShape), codeAppearanceRequire), codeAppearanceSize), codeAppearanceDefault), codeAppearanceStyle), codeAppearanceError), codeAppearanceSuccess);
 
 var codeConfig = {
     appearance: codeAppearance,
@@ -117,11 +142,11 @@ function Code(props) {
     var _c = useState(''), otp = _c[0], setOtp = _c[1];
     var appearanceConfig = useAppearanceConfig(appearance, codeConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputShapeClass = propsGenerator.inputShapeClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps, index) {
         return (jsx("input", __assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
-                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
+                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
                 "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass &&
                 "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), name: "code-".concat(index), autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: function (event) {
                 onBlur && onBlur(event);

package/dist/components/DatePeriod.js

@@ -5,7 +5,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { D as DatePickerInput } from '../DatePicker_es_DIFs7Wgs.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CSRBUuRU.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_DSwPxBuZ.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'date-fns/locale';
 import 'react-datepicker';

package/dist/components/Drawer.js

@@ -2,39 +2,45 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
+import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import { I as Icon, b as Title } from '../Icon_es_Xh3eVHNS.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24 } from '@itcase/icons/default';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '@itcase/common';
-import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
 import 'lodash/castArray';
 
+var drawerAppearanceSize = {
+    sizeH3: {
+        titleTextSize: 'h3',
+        descTextSize: 's',
+        iconSize: 24,
+    },
+};
+
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h3',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 's',
-        iconSize: 24,
         closeIcon: icons24.Action.Close,
         closeIconFillIcon: 'surfaceItemPrimary',
     },
@@ -57,7 +63,7 @@ var drawerAppearanceSurface = {
     },
 };
 
-var drawerAppearance = __assign({}, drawerAppearanceSurface);
+var drawerAppearance = __assign(__assign({}, drawerAppearanceSize), drawerAppearanceSurface);
 
 var drawerConfig = {
     appearance: drawerAppearance,
@@ -79,7 +85,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/css/components/Code/Code.css

@@ -5,15 +5,11 @@
     justify-content: space-between;
   }
 }
-.code {
-  &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        ^^&__wrapper {
-          gap: var(--code-size-$(size)-gap);
-        }
-      }
-    }
+.code__input {
+  border: none;
+  outline: none;
+  &:focus {
+    outline: none;
   }
 }
 .code__input {
@@ -36,18 +32,14 @@
     appearance: textfield;
   }
 }
-.code__input {
-  border: none;
-  outline: none;
-  &:focus {
-    outline: none;
-  }
-  &_shape {
-    &_rounded {
-      border-radius: var(--code-input-shape-rounded);
-    }
-    &_circular {
-      border-radius: 50%;
+.code {
+  &_size {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        ^^&__wrapper {
+          gap: var(--code-size-$(size)-gap);
+        }
+      }
     }
   }
 }

package/dist/css/components/Drawer/Drawer.css

@@ -46,7 +46,9 @@
   }
   &__wrapper {
     padding: 3m;
+    display: flex;
     flex: 1;
+    flex-direction: column;
   }
   &__after {
     z-index: 10;

package/dist/types/components/Chips/appearance/chipsShape.d.ts

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

package/dist/types/components/Choice/appearance/choiceShape.d.ts

@@ -0,0 +1,25 @@
+declare const choiceAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { choiceAppearanceShape };

package/dist/types/components/Code/appearance/codeShape.d.ts

@@ -0,0 +1,25 @@
+declare const codeAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { codeAppearanceShape };

package/dist/types/components/Drawer/appearance/drawerSize.d.ts

@@ -0,0 +1,8 @@
+declare const drawerAppearanceSize: {
+    sizeH3: {
+        titleTextSize: string;
+        descTextSize: string;
+        iconSize: number;
+    };
+};
+export { drawerAppearanceSize };

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -3,10 +3,7 @@ declare const drawerAppearanceSurface: {
         fill: string;
         fillHover: string;
         titleTextColor: string;
-        titleTextSize: string;
         descTextColor: string;
-        descTextSize: string;
-        iconSize: number;
         closeIcon: string;
         closeIconFillIcon: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.74",
+  "version": "1.8.76",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

package/dist/{ChipsGroup_cjs_p5BbbozF.js → ChipsGroup_cjs_BLUYSr4v.js}

@@ -134,17 +134,17 @@ var chipsAppearanceShape = {
     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/{ChipsGroup_es_CSRBUuRU.js → ChipsGroup_es_DSwPxBuZ.js}

@@ -132,17 +132,17 @@ var chipsAppearanceShape = {
     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',