@itcase/ui 1.8.94 → 1.8.96

package/dist/components/Notification.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons20 } from '@itcase/icons/default';

package/dist/components/Pagination.js

@@ -6,8 +6,8 @@ import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_Dp7-DGkV.js';
-import { I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_DURwA4mR.js';
+import { I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons14, icons24, icons16 } from '@itcase/icons/default';
@@ -23,7 +23,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Divider_es_CiRU0sTz.js';
+import '../Divider_es_CCLBFIx6.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Response.js

@@ -7,7 +7,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_DgLivwXd.js';
+import { B as Button } from '../Button_es_DCM3C_2S.js';
 import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import '@itcase/common';
@@ -23,10 +23,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_MOmiy9nF.js';
+import '../Icon_es_CTKPPrrC.js';
 import 'react-inlinesvg';
 import '../Link_es_BnUIX0QT.js';
-import '../Loader_es_tNV0bjm_.js';
+import '../Loader_es_DGMpRDMk.js';
 
 var responseAppearanceConfirm = {
     confirm: {

package/dist/components/Search.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';

package/dist/components/Segmented.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon, B as Badge } from '../Icon_es_MOmiy9nF.js';
+import { I as Icon, B as Badge } from '../Icon_es_CTKPPrrC.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -10,8 +10,8 @@ import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { L as Loader } from '../Loader_es_tNV0bjm_.js';
-import { D as Divider } from '../Divider_es_CiRU0sTz.js';
+import { L as Loader } from '../Loader_es_DGMpRDMk.js';
+import { D as Divider } from '../Divider_es_CCLBFIx6.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';

package/dist/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_MOmiy9nF.js';
+import { b as Title } from '../Icon_es_CTKPPrrC.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Tab.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge, I as Icon } from '../Icon_es_MOmiy9nF.js';
-import { D as Divider } from '../Divider_es_CiRU0sTz.js';
+import { B as Badge, I as Icon } from '../Icon_es_CTKPPrrC.js';
+import { D as Divider } from '../Divider_es_CCLBFIx6.js';
 import { L as Link } from '../Link_es_BnUIX0QT.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
@@ -31,21 +31,21 @@ var tileAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -153,7 +153,7 @@ var tileAppearanceSurface = {
     },
 };
 
-var tileAppearance = __assign(__assign(__assign(__assign({}, tileAppearanceSize), tileAppearanceSurface), tileAppearanceShape), tileAppearanceStyle);
+var tileAppearance = __assign(__assign(__assign(__assign({}, tileAppearanceShape), tileAppearanceSize), tileAppearanceStyle), tileAppearanceSurface);
 
 var tileConfig = {
     appearance: tileAppearance,
@@ -162,13 +162,13 @@ var tileConfig = {
     },
 };
 function Tile(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, title = props.title, desc = props.desc, badgeValue = props.badgeValue, reverse = props.reverse, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+    var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, badgeValue = props.badgeValue, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
     var appearanceConfig = useAppearanceConfig(appearance, tileConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
+    var dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, directionClass = propsGenerator.directionClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tileStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', sizeClass && "tile_size_".concat(sizeClass), type && "tile_type_".concat(type), badgeValue && "tile_state_badge", isSkeleton && "tile_skeleton"), dataTestId: dataTestId, dataTour: dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { className: "tile__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tile__icon'), appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), alignClass && "align_".concat(alignClass), directionClass && "direction_".concat(directionClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "tile_size_".concat(sizeClass), type && "tile_type_".concat(type), badgeValue && "tile_state_badge", widthClass && "width_".concat(widthClass), isSkeleton && "tile_skeleton"), "data-test-id": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { className: "tile__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: "tile__icon", appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
 }
 
 export { Tile, tileAppearance, tileConfig };

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_MOmiy9nF.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_CTKPPrrC.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_MOmiy9nF.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_CTKPPrrC.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Warning.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_MOmiy9nF.js';
+import { I as Icon } from '../Icon_es_CTKPPrrC.js';
 import { T as Text } from '../Text_es_DIU5ySvf.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

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

@@ -25,35 +25,6 @@
     }
   }
 }
-.accordion {
-  &_shape {
-    &_rounded {
-      border-radius: var(--accordion-shape-rounded);
-      ^^&-item {
-        &:first-child {
-          border-radius: var(--accordion-shape-rounded)
-            var(--accordion-shape-rounded) 0 0;
-        }
-        &:last-child {
-          border-radius: 0 0 var(--accordion-shape-rounded)
-            var(--accordion-shape-rounded);
-        }
-      }
-    }
-  }
-}
-.accordion-item {
-  &&_zero-padding {
-    ^&__header {
-      padding: 0;
-    }
-  }
-  &&_zero-gap {
-    ^&__wrapper {
-      padding: 0;
-    }
-  }
-}
 .accordion-item {
   width: 100%;
   display: flex;
@@ -83,13 +54,6 @@
     width: 100%;
   }
 }
-.accordion-item {
-  &_shape {
-    &_rounded {
-      border-radius: var(--accordion-item-shape-rounded);
-    }
-  }
-}
 .accordion-item {
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
@@ -114,6 +78,18 @@
     }
   }
 }
+.accordion-item {
+  &&_zero-padding {
+    ^&__header {
+      padding: 0;
+    }
+  }
+  &&_zero-gap {
+    ^&__wrapper {
+      padding: 0;
+    }
+  }
+}
 :root {
   --accordion-item-header-xxl-padding: 14px 12px;
   --accordion-item-header-xl-padding: 14px 12px;

package/dist/css/components/Loader/Loader.css

@@ -103,10 +103,4 @@
   --loader-s-min-height: 24px;
   --loader-s-item: 6px;
   --loader-s-gap: 8px;
-
-  /* Rounded */
-  --loader-shape-rounded-default: 0;
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs), (0, 0, 0, 0, 0, 0, 0) {
-    --loader-$(size)-shape-rounded: $value;
-  }
 }

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

@@ -6,78 +6,60 @@
 .align {
   &_horizontal {
     &_top {
-      @extend %align-horizontal;
       align-items: flex-start;
+      @extend %align-horizontal;
       &-left {
-        @extend %align-horizontal;
         align-items: flex-start;
+        @extend %align-horizontal;
       }
       &-center {
-        @extend %align-horizontal;
         text-align: center;
         justify-content: center;
         align-items: flex-start;
+        @extend %align-horizontal;
       }
       &-right {
-        @extend %align-horizontal;
         text-align: right;
         justify-content: flex-end;
         align-items: flex-start;
-      }
-      &-auto {
-        @extend %align-horizontal;
-        text-align: right;
-        justify-content: space-between;
-        align-items: flex-start;
-      }
-    }
-    &-left {
-      @extend %align-horizontal;
-      align-items: center;
-    }
-    &-center {
-      @extend %align-horizontal;
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      &-auto {
         @extend %align-horizontal;
-        text-align: center;
-        justify-content: space-between;
-        align-items: center;
       }
     }
-    &-right {
-      @extend %align-horizontal;
-      text-align: right;
-      justify-content: flex-end;
-      align-items: center;
-    }
     &_bottom {
-      @extend %align-horizontal;
       align-items: flex-end;
+      @extend %align-horizontal;
       &-left {
-        @extend %align-horizontal;
         align-items: flex-end;
+        @extend %align-horizontal;
       }
       &-center {
-        @extend %align-horizontal;
         text-align: center;
         justify-content: center;
         align-items: flex-end;
+        @extend %align-horizontal;
       }
       &-right {
         text-align: right;
-        @extend %align-horizontal;
         justify-content: flex-end;
         align-items: flex-end;
-      }
-      &-auto {
         @extend %align-horizontal;
-        text-align: right;
-        justify-content: space-between;
-        align-items: flex-end;
       }
     }
+    &-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.css

@@ -7,72 +7,54 @@
   &_vertical {
     &-top {
       &-left {
-        @extend %align-vertical;
         align-items: flex-start;
+        @extend %align-vertical;
       }
       &-center {
-        @extend %align-vertical;
         text-align: center;
         align-items: center;
+        @extend %align-vertical;
       }
       &-right {
-        @extend %align-vertical;
         text-align: right;
         align-items: flex-end;
-      }
-      &-auto {
         @extend %align-vertical;
-        text-align: center;
-        justify-content: space-between;
-        align-items: center;
       }
     }
     &-left {
-      @extend %align-vertical;
       justify-content: center;
       align-items: flex-start;
+      @extend %align-vertical;
     }
     &-center {
-      @extend %align-vertical;
       text-align: center;
       justify-content: center;
       align-items: center;
-      &-auto {
-        @extend %align-vertical;
-        text-align: center;
-        justify-content: space-between;
-        align-items: center;
-      }
+      @extend %align-vertical;
     }
     &-right {
-      @extend %align-vertical;
       text-align: right;
       justify-content: center;
       align-items: flex-end;
+      @extend %align-vertical;
     }
     &-bottom {
       &-left {
-        @extend %align-vertical;
         justify-content: flex-end;
         align-items: flex-start;
+        @extend %align-vertical;
       }
       &-center {
-        @extend %align-vertical;
         text-align: center;
         justify-content: flex-end;
         align-items: center;
+        @extend %align-vertical;
       }
       &-right {
-        @extend %align-vertical;
         text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
-      }
-      &-auto {
         @extend %align-vertical;
-        text-align: center;
-        justify-content: space-between;
-        align-items: center;
       }
     }
   }

package/dist/css/styles/alignment/alignment.css

@@ -4,19 +4,16 @@
       position: absolute;
       right: 100%;
       bottom: 100%;
-      transform: translate(calc(0% - 12px), calc(0% - 12px));
     }
     &-center {
       position: absolute;
       left: 50%;
       bottom: 100%;
-      transform: translate(-50%, calc(0% - 12px));
     }
     &-right {
       position: absolute;
       left: 100%;
       bottom: 100%;
-      transform: translate(calc(0% + 12px), calc(0% - 12px));
     }
   }
   &_bottom {
@@ -24,31 +21,26 @@
       position: absolute;
       top: 100%;
       right: 100%;
-      transform: translate(calc(0% - 12px), calc(0% + 12px));
     }
     &-center {
       position: absolute;
       left: 50%;
       top: 100%;
-      transform: translate(-50%, calc(0% + 12px));
     }
     &-right {
       position: absolute;
       left: 100%;
       top: 100%;
-      transform: translate(calc(0% + 12px), calc(0% + 12px));
     }
   }
   &_left-center {
     position: absolute;
     top: 50%;
     right: 100%;
-    transform: translate(calc(0% - 12px), -50%);
   }
   &_right-center {
     position: absolute;
     left: 100%;
     top: 50%;
-    transform: translate(calc(0% + 12px), -50%);
   }
 }

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

@@ -5,9 +5,8 @@
     border-style: solid;
   }
   @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-    error, success, warning, info, danger, gradient, disabled, hover, inverse {
-    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
-      hover, inverse {
+    error, success, warning, info, danger {
+    @each $color in primary, secondary, tertiary, quaternary {
       &_$(type) {
         &-border {
           &-$(color) {

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

@@ -1,9 +1,8 @@
 .border-color {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
-      @each $color in primary, secondary, tertiary, quaternary, accent,
-        disabled, hover, inverse {
+      error, success, warning, info, danger {
+      @each $color in primary, secondary, tertiary, quaternary {
         &_$(type) {
           &-border {
             &-$(color) {

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

@@ -1,9 +1,8 @@
 .border-color {
   &_focus {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
-      @each $color in primary, secondary, tertiary, quaternary, accent,
-        disabled, hover, inverse {
+      error, success, warning, info, danger {
+      @each $color in primary, secondary, tertiary, quaternary {
         &_$(type) {
           &-border {
             &-$(color) {

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

@@ -4,9 +4,8 @@
       border-color: transparent;
     }
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
-      @each $color in primary, secondary, tertiary, quaternary, accent,
-        disabled, hover, inverse {
+      error, success, warning, info, danger {
+      @each $color in primary, secondary, tertiary, quaternary {
         &_$(type) {
           &-border {
             &-$(color) {

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

@@ -1,10 +1,8 @@
 .fill {
   &_active {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, danger, warning, info, danger, gradient, disabled, hover,
-      inverse {
-      @each $color in primary, secondary, tertiary, quaternary, accent,
-        disabled, hover, inverse {
+      error, success, danger, warning, info, danger {
+      @each $color in primary, secondary, tertiary, quaternary {
         &_$(type) {
           &-item {
             &-$(color) {

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

@@ -2,10 +2,8 @@
   &_active {
     &_hover {
       @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-        error, success, warning, info, danger, gradient, disabled, hover,
-        inverse {
-        @each $color in primary, secondary, tertiary, quaternary, accent,
-          disabled, hover, inverse {
+        error, success, warning, info, danger {
+        @each $color in primary, secondary, tertiary, quaternary {
           /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
           &_$(type) {
             &-item {

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

@@ -3,9 +3,8 @@
 .fill {
   &_hover {
     @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-      error, success, warning, info, danger, gradient, disabled, hover, inverse {
-      @each $color in primary, secondary, tertiary, quaternary, accent,
-        disabled, hover, inverse {
+      error, success, warning, info, danger {
+      @each $color in primary, secondary, tertiary, quaternary {
         /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
         &_$(type) {
           &-item {

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

@@ -2,10 +2,8 @@
   &&-color {
     &_active {
       @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-        error, success, warning, info, danger, gradient, disabled, hover,
-        inverse {
-        @each $color in primary, secondary, tertiary, quaternary, accent,
-          disabled, hover, inverse {
+        error, success, warning, info, danger {
+        @each $color in primary, secondary, tertiary, quaternary {
           &_$(type) {
             &-text {
               &-$(color) {

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

@@ -3,10 +3,8 @@
     &_active {
       &_hover {
         @each $type in accent, primary, secondary, tertiary, quaternary,
-          surface, error, success, warning, info, danger, gradient, disabled,
-          hover, inverse {
-          @each $color in primary, secondary, tertiary, quaternary, accent,
-            disabled, hover, inverse {
+          surface, error, success, warning, info, danger {
+          @each $color in primary, secondary, tertiary, quaternary {
             &_$(type) {
               &-text {
                 &-$(color) {