@itcase/ui 1.8.107 → 1.8.108

package/dist/{Group_cjs_CHcrOFx0.js → Group_cjs_BxBk5T7A.js}

@@ -27,10 +27,10 @@ var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, 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, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, 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;
+    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, fillDisabledClass = propsGenerator.fillDisabledClass, 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 &&
+    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), justifyContentClass && "justify-content_".concat(justifyContentClass), 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)

package/dist/{Group_es_DHJcG2MA.js → Group_es_DIfmrMSM.js}

@@ -25,10 +25,10 @@ var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, 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, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, 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;
+    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, fillDisabledClass = propsGenerator.fillDisabledClass, 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 &&
+    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), justifyContentClass && "justify-content_".concat(justifyContentClass), 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)

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Avatar = require('../../Avatar_cjs_bOSuIjlv.js');
-var Group = require('../../Group_cjs_CHcrOFx0.js');
+var Group = require('../../Group_cjs_BxBk5T7A.js');
 var Text = require('../../Text_cjs_CeJHeRfI.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');

package/dist/cjs/components/Group.js

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

package/dist/cjs/components/Radio.js

@@ -147,11 +147,11 @@ var radioConfig = {
     },
 };
 function Radio(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked || !isActive
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "radio__item", children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', !checked || !isActive
                             ? fillRadioClass && "fill_".concat(fillRadioClass)
                             : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
                             ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)

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_eGfgY2Dz.js');
-var Group = require('../../Group_cjs_CHcrOFx0.js');
+var Group = require('../../Group_cjs_BxBk5T7A.js');
 var Text = require('../../Text_cjs_CeJHeRfI.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -7,7 +7,7 @@ var Icon = require('../../Icon_cjs_LSfBwmrG.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('../../Group_cjs_CHcrOFx0.js');
+var Group = require('../../Group_cjs_BxBk5T7A.js');
 var Text = require('../../Text_cjs_CeJHeRfI.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { A as Avatar } from '../Avatar_es_CEiiRkAd.js';
-import { G as Group } from '../Group_es_DHJcG2MA.js';
+import { G as Group } from '../Group_es_DIfmrMSM.js';
 import { T as Text } from '../Text_es_BXh9Y3hR.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/components/Group.js

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

package/dist/components/Radio.js

@@ -145,11 +145,11 @@ var radioConfig = {
     },
 };
 function Radio(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig(appearance, radioConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
-    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxs("div", { className: "radio__item", children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', !checked || !isActive
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxs("div", { className: "radio__item", children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', !checked || !isActive
                             ? fillRadioClass && "fill_".concat(fillRadioClass)
                             : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
                             ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)

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_CEXL2diU.js';
-import { G as Group } from '../Group_es_DHJcG2MA.js';
+import { G as Group } from '../Group_es_DIfmrMSM.js';
 import { T as Text } from '../Text_es_BXh9Y3hR.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -5,7 +5,7 @@ import { I as Icon, B as Badge } from '../Icon_es_BYO1LdXJ.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_DHJcG2MA.js';
+import { G as Group } from '../Group_es_DIfmrMSM.js';
 import { T as Text } from '../Text_es_BXh9Y3hR.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/css/components/Radio/Radio.css

@@ -6,7 +6,6 @@
   &__item {
     font-size: 0;
     line-height: 0;
-    margin: 2px 0 0 0;
     position: relative;
     display: flex;
     align-self: start;

package/dist/css/styles/align/align.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_center {

package/dist/css/styles/align/align_horizontal-reverse.css

@@ -3,7 +3,7 @@
   flex-direction: row-reverse;
 }
 
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_horizontal-reverse {

package/dist/css/styles/align/align_horizontal.css

@@ -3,7 +3,7 @@
   flex-direction: row;
 }
 
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_horizontal {

package/dist/css/styles/align/align_vertical-reverse.css

@@ -3,7 +3,7 @@
   flex-direction: column-reverse;
 }
 
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_vertical-reverse {

package/dist/css/styles/align/align_vertical.css

@@ -3,7 +3,7 @@
   flex-direction: column;
 }
 
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_vertical {

package/dist/css/styles/border-color/border-color.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_none {

package/dist/css/styles/border-color/border-color_active.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_active {

package/dist/css/styles/border-color/border-color_active_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_active {

package/dist/css/styles/border-color/border-color_focus.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_focus {

package/dist/css/styles/border-color/border-color_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_hover {

package/dist/css/styles/bundle.css

@@ -12,7 +12,7 @@
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_center {
@@ -24,7 +24,7 @@
   display: flex;
   flex-direction: row-reverse;
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_horizontal-reverse {
@@ -91,7 +91,7 @@
   display: flex;
   flex-direction: row;
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_horizontal {
@@ -158,7 +158,7 @@
   display: flex;
   flex-direction: column-reverse;
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_vertical-reverse {
@@ -221,7 +221,7 @@
   display: flex;
   flex-direction: column;
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .align,
   $(selector).align {
     &_vertical {
@@ -338,7 +338,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_none {
@@ -381,7 +381,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_active {
@@ -426,7 +426,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_active {
@@ -475,7 +475,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_focus {
@@ -526,7 +526,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .border-color,
   $(selector).border-color {
     &_hover {
@@ -791,7 +791,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_none {
@@ -847,7 +847,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {
@@ -897,7 +897,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {
@@ -1016,7 +1016,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill_gradient,
   $(selector).fill_gradient {
     @each $type in primary, secondary, tertiary, quaternary {
@@ -1034,7 +1034,7 @@ div.alignment {
     }
   }
 }
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_hover {

package/dist/css/styles/fill/fill.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_none {

package/dist/css/styles/fill/fill_active.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {

package/dist/css/styles/fill/fill_gradient.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill_gradient,
   $(selector).fill_gradient {
     @each $type in primary, secondary, tertiary, quaternary {

package/dist/css/styles/fill/fill_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_hover {

package/package.json

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