@itcase/ui 1.8.158 → 1.8.160

package/dist/{DatePicker_cjs_CccRZSjc.js → DatePicker_cjs_BtYlDJ7u.js}

@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Button = require('./Button_cjs_CGIzPuXo.js');
 var Icon = require('./Icon_cjs_B5o0K55R.js');
-var Input = require('./Input_cjs_DDi5JVAV.js');
+var Input = require('./Input_cjs_IhuIPBIq.js');
 var Label = require('./Label_cjs_DRIwteHh.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 var _default = require('@itcase/icons/default');
@@ -92,6 +92,7 @@ const datePickerConfig = {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
+const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
     const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
@@ -160,7 +161,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -173,7 +174,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{DatePicker_es_54jl8guQ.js → DatePicker_es_D3lQ83Q6.js}

@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { B as Button } from './Button_es_CtAnUzZA.js';
 import { I as Icon } from './Icon_es_BEhzKfrD.js';
-import { I as Input } from './Input_es_BnCXATnh.js';
+import { I as Input } from './Input_es_CifTvE3z.js';
 import { L as Label } from './Label_es_DYd2RwDK.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 import { icons14 } from '@itcase/icons/default';
@@ -90,6 +90,7 @@ const datePickerConfig = {
         datePickerConfig.appearance = appearanceConfig;
     },
 };
+const INPUT_CLASSNAME = 'datepicker__input';
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
     const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
@@ -158,7 +159,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: INPUT_CLASSNAME, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }
@@ -171,7 +172,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, INPUT_CLASSNAME), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{Input_cjs_DDi5JVAV.js → Input_cjs_IhuIPBIq.js}

@@ -209,12 +209,12 @@ const inputConfig = {
     },
 };
 const Input = React.forwardRef(function Input(props, ref) {
-    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
-            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), disabled: isDisabled, index: index, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 exports.Input = Input;

package/dist/{Input_es_BnCXATnh.js → Input_es_CifTvE3z.js}

@@ -207,12 +207,12 @@ const inputConfig = {
     },
 };
 const Input = React.forwardRef(function Input(props, ref) {
-    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
-            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, disabled: isDisabled, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), index: index, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            `placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: type, ref: ref, autoComplete: autocomplete, "data-test-id": dataTestId || (name ? `${name}Input` : 'input'), disabled: isDisabled, index: index, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 export { Input as I, inputAppearance as a, inputConfig as i };

package/dist/cjs/components/Dadata.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input_cjs_DDi5JVAV.js');
+var Input = require('../../Input_cjs_IhuIPBIq.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');

package/dist/cjs/components/DatePeriod.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_CccRZSjc.js');
+var DatePicker = require('../../DatePicker_cjs_BtYlDJ7u.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_DVizkQ4v.js');
@@ -31,7 +31,7 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Text_cjs_DaH5tVvz.js');
 require('../../Loader_cjs_CRiUlTC3.js');
-require('../../Input_cjs_DDi5JVAV.js');
+require('../../Input_cjs_IhuIPBIq.js');
 require('../../Label_cjs_DRIwteHh.js');
 require('@itcase/icons/default');
 require('lodash/castArray');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_CccRZSjc.js');
+var DatePicker = require('../../DatePicker_cjs_BtYlDJ7u.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -30,7 +30,7 @@ require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_qKXVfU8e.js');
 require('../../Text_cjs_DaH5tVvz.js');
 require('../../Loader_cjs_CRiUlTC3.js');
-require('../../Input_cjs_DDi5JVAV.js');
+require('../../Input_cjs_IhuIPBIq.js');
 require('../../Label_cjs_DRIwteHh.js');
 require('@itcase/icons/default');
 

package/dist/cjs/components/Input.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Input = require('../../Input_cjs_DDi5JVAV.js');
+var Input = require('../../Input_cjs_IhuIPBIq.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/Dadata.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_BnCXATnh.js';
+import { I as Input } from '../Input_es_CifTvE3z.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';

package/dist/components/DatePeriod.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_54jl8guQ.js';
+import { D as DatePickerInput } from '../DatePicker_es_D3lQ83Q6.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_D3eiXGyK.js';
@@ -29,7 +29,7 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_BnCXATnh.js';
+import '../Input_es_CifTvE3z.js';
 import '../Label_es_DYd2RwDK.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_54jl8guQ.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_D3lQ83Q6.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 import '../Loader_es_Dq2-7sn2.js';
-import '../Input_es_BnCXATnh.js';
+import '../Input_es_CifTvE3z.js';
 import '../Label_es_DYd2RwDK.js';
 import '@itcase/icons/default';

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_BnCXATnh.js';
+export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_CifTvE3z.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/css/components/Accordion/Accordion.css

@@ -15,14 +15,30 @@
         flex-direction: column;
       }
     }
-    @each $val in row, row-reverse, column, column-reverse {
-      &_$(val) {
+      &_row {
         ^^&__wrapper {
           display: flex;
-          flex-direction: $(val);
+          flex-direction: row;
+        }
+      }
+      &_row-reverse {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+      }
+      &_column {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+      &_column-reverse {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: column-reverse;
         }
       }
-    }
   }
 }
 .accordion-item {
@@ -56,19 +72,83 @@
 }
 .accordion-item {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         ^^&__header {
-          padding: var(--accordion-item-header-$(size)-padding);
-          gap: var(--accordion-item-header-$(size)-gap);
+          padding: var(--accordion-item-header-xxl-padding);
+          gap: var(--accordion-item-header-xxl-gap);
         }
         ^^&__content {
           &-inner {
-            padding: var(--accordion-item-content-$(size)-padding);
+            padding: var(--accordion-item-content-xxl-padding);
+          }
+        }
+      }
+      &_xl {
+        ^^&__header {
+          padding: var(--accordion-item-header-xl-padding);
+          gap: var(--accordion-item-header-xl-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xl-padding);
+          }
+        }
+      }
+      &_l {
+        ^^&__header {
+          padding: var(--accordion-item-header-l-padding);
+          gap: var(--accordion-item-header-l-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-l-padding);
+          }
+        }
+      }
+      &_m {
+        ^^&__header {
+          padding: var(--accordion-item-header-m-padding);
+          gap: var(--accordion-item-header-m-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-m-padding);
+          }
+        }
+      }
+      &_s {
+        ^^&__header {
+          padding: var(--accordion-item-header-s-padding);
+          gap: var(--accordion-item-header-s-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-s-padding);
+          }
+        }
+      }
+      &_xs {
+        ^^&__header {
+          padding: var(--accordion-item-header-xs-padding);
+          gap: var(--accordion-item-header-xs-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xs-padding);
+          }
+        }
+      }
+      &_xxs {
+        ^^&__header {
+          padding: var(--accordion-item-header-xxs-padding);
+          gap: var(--accordion-item-header-xxs-gap);
+        }
+        ^^&__content {
+          &-inner {
+            padding: var(--accordion-item-content-xxs-padding);
           }
         }
       }
-    }
   }
 }
 .accordion-item {

package/dist/css/components/Avatar/Avatar.css

@@ -53,30 +53,237 @@
 /* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
-    @each $size in 16, 20, 24, 32, 40, 48, 56, 96, 144, 240,
-      240 {
-      &_$(size) {
+      &_16 {
         ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
+          width: 16px;
+          height: 16px;
           display: flex;
           justify-content: center;
           align-items: center;
           ^^^&__badge {
-            right: var(--avatar-badge-$(size)-position-right);
-            bottom: var(--avatar-badge-$(size)-position-bottom);
+            right: var(--avatar-badge-16-position-right);
+            bottom: var(--avatar-badge-16-position-bottom);
           }
           ^^^&__image {
-            width: $(size)px;
-            height: $(size)px;
+            width: 16px;
+            height: 16px;
             & .image__item {
-              width: $(size)px;
-              height: $(size)px;
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+      }
+      &_20 {
+        ^^&__wrapper {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-20-position-right);
+            bottom: var(--avatar-badge-20-position-bottom);
+          }
+          ^^^&__image {
+            width: 20px;
+            height: 20px;
+            & .image__item {
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+      }
+      &_24 {
+        ^^&__wrapper {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-24-position-right);
+            bottom: var(--avatar-badge-24-position-bottom);
+          }
+          ^^^&__image {
+            width: 24px;
+            height: 24px;
+            & .image__item {
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
+      }
+      &_32 {
+        ^^&__wrapper {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-32-position-right);
+            bottom: var(--avatar-badge-32-position-bottom);
+          }
+          ^^^&__image {
+            width: 32px;
+            height: 32px;
+            & .image__item {
+              width: 32px;
+              height: 32px;
+            }
+          }
+        }
+      }
+      &_40 {
+        ^^&__wrapper {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-40-position-right);
+            bottom: var(--avatar-badge-40-position-bottom);
+          }
+          ^^^&__image {
+            width: 40px;
+            height: 40px;
+            & .image__item {
+              width: 40px;
+              height: 40px;
+            }
+          }
+        }
+      }
+      &_48 {
+        ^^&__wrapper {
+          width: 48px;
+          height: 48px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-48-position-right);
+            bottom: var(--avatar-badge-48-position-bottom);
+          }
+          ^^^&__image {
+            width: 48px;
+            height: 48px;
+            & .image__item {
+              width: 48px;
+              height: 48px;
+            }
+          }
+        }
+      }
+      &_56 {
+        ^^&__wrapper {
+          width: 56px;
+          height: 56px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-56-position-right);
+            bottom: var(--avatar-badge-56-position-bottom);
+          }
+          ^^^&__image {
+            width: 56px;
+            height: 56px;
+            & .image__item {
+              width: 56px;
+              height: 56px;
+            }
+          }
+        }
+      }
+      &_96 {
+        ^^&__wrapper {
+          width: 96px;
+          height: 96px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-96-position-right);
+            bottom: var(--avatar-badge-96-position-bottom);
+          }
+          ^^^&__image {
+            width: 96px;
+            height: 96px;
+            & .image__item {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+      &_144 {
+        ^^&__wrapper {
+          width: 144px;
+          height: 144px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-144-position-right);
+            bottom: var(--avatar-badge-144-position-bottom);
+          }
+          ^^^&__image {
+            width: 144px;
+            height: 144px;
+            & .image__item {
+              width: 144px;
+              height: 144px;
+            }
+          }
+        }
+      }
+      &_240 {
+        ^^&__wrapper {
+          width: 240px;
+          height: 240px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-240-position-right);
+            bottom: var(--avatar-badge-240-position-bottom);
+          }
+          ^^^&__image {
+            width: 240px;
+            height: 240px;
+            & .image__item {
+              width: 240px;
+              height: 240px;
+            }
+          }
+        }
+      }
+      &_240 {
+        ^^&__wrapper {
+          width: 240px;
+          height: 240px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__badge {
+            right: var(--avatar-badge-240-position-right);
+            bottom: var(--avatar-badge-240-position-bottom);
+          }
+          ^^^&__image {
+            width: 240px;
+            height: 240px;
+            & .image__item {
+              width: 240px;
+              height: 240px;
             }
           }
         }
       }
-    }
   }
 }
 .avatar_status {

package/dist/css/components/AvatarStack/AvatarStack.css

@@ -41,26 +41,72 @@ div.avatar {
         align-items: flex-start;
       }
     }
-    @each $val in row, row-reverse, column, column-reverse {
-      &_$(val) {
+      &_row {
         display: flex;
-        flex-direction: $(val);
+        flex-direction: row;
+        align-items: flex-start;
+      }
+      &_row-reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+      }
+      &_column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      &_column-reverse {
+        display: flex;
+        flex-direction: column-reverse;
         align-items: flex-start;
       }
-    }
   }
 }
 div.avatar-stack {
   &_size {
-    @each $size in 56, 40, 32, 24, 20, 16 {
-      &_$(size) {
+      &_56 {
         & .avatar-stack__item {
           &:not(:first-child) {
-            margin: 0 0 0 var(--avatar-stack-size-$(size)-gap);
+            margin: 0 0 0 var(--avatar-stack-size-56-gap);
+          }
+        }
+      }
+      &_40 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-40-gap);
+          }
+        }
+      }
+      &_32 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-32-gap);
+          }
+        }
+      }
+      &_24 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-24-gap);
+          }
+        }
+      }
+      &_20 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-20-gap);
+          }
+        }
+      }
+      &_16 {
+        & .avatar-stack__item {
+          &:not(:first-child) {
+            margin: 0 0 0 var(--avatar-stack-size-16-gap);
           }
         }
       }
-    }
   }
 }
 .avatar-stack {