@itcase/ui 1.8.106 → 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/Button/Button.css

@@ -1,9 +1,9 @@
 .button {
   text-decoration: none;
-  /* background: none; */
+  background: none;
   padding: 0;
   margin: 0;
-  /* border-width: solid 0 #fff; */
+  border: solid 0 #fff;
   position: relative;
   display: flex;
   justify-content: center;

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,5 +1,8 @@
-.align {
-  &_center {
-    margin: 0 auto;
+@each $selector in div, button, input, textarea {
+  .align,
+  $(selector).align {
+    &_center {
+      margin: 0 auto;
+    }
   }
 }

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

@@ -3,63 +3,66 @@
   flex-direction: row-reverse;
 }
 
-.align {
-  &_horizontal-reverse {
-    display: flex;
-    flex-direction: row-reverse;
-    @extend %align-horizontal-reverse;
-    &-top {
-      &-left {
-        align-items: flex-start;
-        @extend %align-horizontal-reverse;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
-        align-items: flex-start;
-        @extend %align-horizontal-reverse;
-      }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: flex-start;
-        @extend %align-horizontal-reverse;
-      }
-    }
-    &-left {
-      align-items: center;
-      @extend %align-horizontal-reverse;
-    }
-    &-center {
-      text-align: center;
-      justify-content: center;
-      align-items: center;
+@each $selector in div, button, input, textarea {
+  .align,
+  $(selector).align {
+    &_horizontal-reverse {
+      display: flex;
+      flex-direction: row-reverse;
       @extend %align-horizontal-reverse;
-    }
-    &-right {
-      text-align: right;
-      justify-content: flex-end;
-      align-items: center;
-      @extend %align-horizontal-reverse;
-    }
-    &-bottom {
+      &-top {
+        &-left {
+          align-items: flex-start;
+          @extend %align-horizontal-reverse;
+        }
+        &-center {
+          text-align: center;
+          justify-content: center;
+          align-items: flex-start;
+          @extend %align-horizontal-reverse;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-start;
+          @extend %align-horizontal-reverse;
+        }
+      }
       &-left {
-        flex-direction: row;
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal-reverse;
       }
       &-center {
         text-align: center;
         justify-content: center;
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal-reverse;
       }
       &-right {
         text-align: right;
         justify-content: flex-end;
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal-reverse;
       }
+      &-bottom {
+        &-left {
+          flex-direction: row;
+          align-items: flex-end;
+          @extend %align-horizontal-reverse;
+        }
+        &-center {
+          text-align: center;
+          justify-content: center;
+          align-items: flex-end;
+          @extend %align-horizontal-reverse;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-end;
+          @extend %align-horizontal-reverse;
+        }
+      }
     }
   }
 }

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

@@ -3,63 +3,66 @@
   flex-direction: row;
 }
 
-.align {
-  &_horizontal {
-    &_top {
-      align-items: flex-start;
-      @extend %align-horizontal;
-      &-left {
-        align-items: flex-start;
-        @extend %align-horizontal;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
+@each $selector in div, button, input, textarea {
+  .align,
+  $(selector).align {
+    &_horizontal {
+      &_top {
         align-items: flex-start;
         @extend %align-horizontal;
+        &-left {
+          align-items: flex-start;
+          @extend %align-horizontal;
+        }
+        &-center {
+          text-align: center;
+          justify-content: center;
+          align-items: flex-start;
+          @extend %align-horizontal;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-start;
+          @extend %align-horizontal;
+        }
       }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: flex-start;
+      &_bottom {
+        align-items: flex-end;
         @extend %align-horizontal;
+        &-left {
+          align-items: flex-end;
+          @extend %align-horizontal;
+        }
+        &-center {
+          text-align: center;
+          justify-content: center;
+          align-items: flex-end;
+          @extend %align-horizontal;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-end;
+          @extend %align-horizontal;
+        }
       }
-    }
-    &_bottom {
-      align-items: flex-end;
-      @extend %align-horizontal;
       &-left {
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal;
       }
       &-center {
         text-align: center;
         justify-content: center;
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal;
       }
       &-right {
         text-align: right;
         justify-content: flex-end;
-        align-items: flex-end;
+        align-items: center;
         @extend %align-horizontal;
       }
     }
-    &-left {
-      align-items: center;
-      @extend %align-horizontal;
-    }
-    &-center {
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      @extend %align-horizontal;
-    }
-    &-right {
-      text-align: right;
-      justify-content: flex-end;
-      align-items: center;
-      @extend %align-horizontal;
-    }
   }
 }

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

@@ -3,58 +3,61 @@
   flex-direction: column-reverse;
 }
 
-.align {
-  &_vertical-reverse {
-    &-top {
+@each $selector in div, button, input, textarea {
+  .align,
+  $(selector).align {
+    &_vertical-reverse {
+      &-top {
+        &-left {
+          align-items: flex-start;
+          @extend %align-horizontal-reverse;
+        }
+        &-center {
+          text-align: center;
+          align-items: center;
+          @extend %align-horizontal-reverse;
+        }
+        &-right {
+          text-align: right;
+          align-items: flex-end;
+          @extend %align-horizontal-reverse;
+        }
+      }
       &-left {
-        @extend %align-horizontal-reverse;
+        justify-content: center;
         align-items: flex-start;
+        @extend %align-horizontal-reverse;
       }
       &-center {
-        @extend %align-horizontal-reverse;
         text-align: center;
+        justify-content: center;
         align-items: center;
+        @extend %align-horizontal-reverse;
       }
       &-right {
-        @extend %align-horizontal-reverse;
         text-align: right;
+        justify-content: center;
         align-items: flex-end;
-      }
-    }
-    &-left {
-      @extend %align-horizontal-reverse;
-      justify-content: center;
-      align-items: flex-start;
-    }
-    &-center {
-      @extend %align-horizontal-reverse;
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-    }
-    &-right {
-      @extend %align-horizontal-reverse;
-      text-align: right;
-      justify-content: center;
-      align-items: flex-end;
-    }
-    &-bottom {
-      &-left {
         @extend %align-horizontal-reverse;
-        justify-content: flex-end;
-        align-items: flex-start;
       }
-      &-center {
-        @extend %align-horizontal-reverse;
-        text-align: center;
-        justify-content: flex-end;
-        align-items: center;
-      }
-      &-right {
-        @extend %align-horizontal-reverse;
-        text-align: right;
-        justify-content: flex-end;
-        align-items: flex-end;
+      &-bottom {
+        &-left {
+          justify-content: flex-end;
+          align-items: flex-start;
+          @extend %align-horizontal-reverse;
+        }
+        &-center {
+          text-align: center;
+          justify-content: flex-end;
+          align-items: center;
+          @extend %align-horizontal-reverse;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-end;
+          @extend %align-horizontal-reverse;
+        }
       }
     }
   }

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

@@ -3,59 +3,62 @@
   flex-direction: column;
 }
 
-.align {
-  &_vertical {
-    &-top {
-      &-left {
-        align-items: flex-start;
-        @extend %align-vertical;
-      }
-      &-center {
-        text-align: center;
-        align-items: center;
-        @extend %align-vertical;
-      }
-      &-right {
-        text-align: right;
-        align-items: flex-end;
-        @extend %align-vertical;
+@each $selector in div, button, input, textarea {
+  .align,
+  $(selector).align {
+    &_vertical {
+      &-top {
+        &-left {
+          align-items: flex-start;
+          @extend %align-vertical;
+        }
+        &-center {
+          text-align: center;
+          align-items: center;
+          @extend %align-vertical;
+        }
+        &-right {
+          text-align: right;
+          align-items: flex-end;
+          @extend %align-vertical;
+        }
       }
-    }
-    &-left {
-      justify-content: center;
-      align-items: flex-start;
-      @extend %align-vertical;
-    }
-    &-center {
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      @extend %align-vertical;
-    }
-    &-right {
-      text-align: right;
-      justify-content: center;
-      align-items: flex-end;
-      @extend %align-vertical;
-    }
-    &-bottom {
       &-left {
-        justify-content: flex-end;
+        justify-content: center;
         align-items: flex-start;
         @extend %align-vertical;
       }
       &-center {
         text-align: center;
-        justify-content: flex-end;
+        justify-content: center;
         align-items: center;
         @extend %align-vertical;
       }
       &-right {
         text-align: right;
-        justify-content: flex-end;
+        justify-content: center;
         align-items: flex-end;
         @extend %align-vertical;
       }
+      &-bottom {
+        &-left {
+          justify-content: flex-end;
+          align-items: flex-start;
+          @extend %align-vertical;
+        }
+        &-center {
+          text-align: center;
+          justify-content: flex-end;
+          align-items: center;
+          @extend %align-vertical;
+        }
+        &-right {
+          text-align: right;
+          justify-content: flex-end;
+          align-items: flex-end;
+          @extend %align-vertical;
+        }
+      }
     }
   }
 }