@alfalab/core-components 41.6.0 → 41.7.0-beta.1

package/grid/modern/gutters.module-8ac7335b.js

@@ -0,0 +1,4 @@
+const guttersStyles = {"row":"grid__row_1iws3","gutter-8":"grid__gutter-8_1iws3","col":"grid__col_1iws3","gutter-16":"grid__gutter-16_1iws3","gutter-24":"grid__gutter-24_1iws3","gutter-mobile-8":"grid__gutter-mobile-8_1iws3","gutter-mobile-16":"grid__gutter-mobile-16_1iws3","gutter-mobile-24":"grid__gutter-mobile-24_1iws3","gutter-mobile-xs-8":"grid__gutter-mobile-xs-8_1iws3","gutter-mobile-xs-16":"grid__gutter-mobile-xs-16_1iws3","gutter-mobile-xs-24":"grid__gutter-mobile-xs-24_1iws3","gutter-mobile-s-8":"grid__gutter-mobile-s-8_1iws3","gutter-mobile-s-16":"grid__gutter-mobile-s-16_1iws3","gutter-mobile-s-24":"grid__gutter-mobile-s-24_1iws3","gutter-mobile-m-8":"grid__gutter-mobile-m-8_1iws3","gutter-mobile-m-16":"grid__gutter-mobile-m-16_1iws3","gutter-mobile-m-24":"grid__gutter-mobile-m-24_1iws3","gutter-mobile-l-8":"grid__gutter-mobile-l-8_1iws3","gutter-mobile-l-16":"grid__gutter-mobile-l-16_1iws3","gutter-mobile-l-24":"grid__gutter-mobile-l-24_1iws3","gutter-tablet-8":"grid__gutter-tablet-8_1iws3","gutter-tablet-16":"grid__gutter-tablet-16_1iws3","gutter-tablet-24":"grid__gutter-tablet-24_1iws3","gutter-tablet-s-8":"grid__gutter-tablet-s-8_1iws3","gutter-tablet-s-16":"grid__gutter-tablet-s-16_1iws3","gutter-tablet-s-24":"grid__gutter-tablet-s-24_1iws3","gutter-tablet-m-8":"grid__gutter-tablet-m-8_1iws3","gutter-tablet-m-16":"grid__gutter-tablet-m-16_1iws3","gutter-tablet-m-24":"grid__gutter-tablet-m-24_1iws3","gutter-desktop-8":"grid__gutter-desktop-8_1iws3","gutter-desktop-16":"grid__gutter-desktop-16_1iws3","gutter-desktop-24":"grid__gutter-desktop-24_1iws3","gutter-desktop-s-8":"grid__gutter-desktop-s-8_1iws3","gutter-desktop-s-16":"grid__gutter-desktop-s-16_1iws3","gutter-desktop-s-24":"grid__gutter-desktop-s-24_1iws3","gutter-desktop-m-8":"grid__gutter-desktop-m-8_1iws3","gutter-desktop-m-16":"grid__gutter-desktop-m-16_1iws3","gutter-desktop-m-24":"grid__gutter-desktop-m-24_1iws3","gutter-desktop-l-8":"grid__gutter-desktop-l-8_1iws3","gutter-desktop-l-16":"grid__gutter-desktop-l-16_1iws3","gutter-desktop-l-24":"grid__gutter-desktop-l-24_1iws3","gutter-desktop-xl-8":"grid__gutter-desktop-xl-8_1iws3","gutter-desktop-xl-16":"grid__gutter-desktop-xl-16_1iws3","gutter-desktop-xl-24":"grid__gutter-desktop-xl-24_1iws3"};
+require('./gutters.css');
+
+export { guttersStyles as g };

package/grid/modern/index.js

@@ -2,6 +2,6 @@ export { Grid } from './Component.js';
 import './col/Component.js';
 import 'react';
 import 'classnames';
-import './gutters.module-2d76c12c.js';
+import './gutters.module-8ac7335b.js';
 import './row/Component.js';
 import './utils/index.js';

package/grid/modern/row/Component.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 import { createClassNames } from '../utils/index.js';
-import { g as guttersStyles } from '../gutters.module-2d76c12c.js';
+import { g as guttersStyles } from '../gutters.module-8ac7335b.js';
 
-const styles = {"component":"grid__component_2o068","top":"grid__top_2o068","middle":"grid__middle_2o068","bottom":"grid__bottom_2o068","left":"grid__left_2o068","center":"grid__center_2o068","right":"grid__right_2o068","around":"grid__around_2o068","between":"grid__between_2o068"};
+const styles = {"component":"grid__component_1buzb","top":"grid__top_1buzb","middle":"grid__middle_1buzb","bottom":"grid__bottom_1buzb","left":"grid__left_1buzb","center":"grid__center_1buzb","right":"grid__right_1buzb","around":"grid__around_1buzb","between":"grid__between_1buzb"};
 require('./index.css');
 
 const Row = ({ tag: Component = 'div', className, gutter = {

package/grid/modern/row/index.css

@@ -1,5 +1,5 @@
 /* hash: smm5o */
-.grid__component_2o068 {
+.grid__component_1buzb {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_2o068 {
+.grid__top_1buzb {
     align-items: flex-start;
 }
 
-.grid__middle_2o068 {
+.grid__middle_1buzb {
     align-items: center;
 }
 
-.grid__bottom_2o068 {
+.grid__bottom_1buzb {
     align-items: flex-end;
 }
 
-.grid__left_2o068 {
+.grid__left_1buzb {
     justify-content: flex-start;
 }
 
-.grid__center_2o068 {
+.grid__center_1buzb {
     justify-content: center;
 }
 
-.grid__right_2o068 {
+.grid__right_1buzb {
     justify-content: flex-end;
 }
 
-.grid__around_2o068 {
+.grid__around_1buzb {
     justify-content: space-around;
 }
 
-.grid__between_2o068 {
+.grid__between_1buzb {
     justify-content: space-between;
 }

package/grid/modern/row/index.js

@@ -1,5 +1,5 @@
 export { Row } from './Component.js';
 import 'react';
 import 'classnames';
-import '../gutters.module-2d76c12c.js';
+import '../gutters.module-8ac7335b.js';
 import '../utils/index.js';

package/grid/row/Component.js

@@ -4,14 +4,14 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var utils_index = require('../utils/index.js');
-var gutters_module = require('../gutters.module-005640ba.js');
+var gutters_module = require('../gutters.module-0314e1f7.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"grid__component_2o068","top":"grid__top_2o068","middle":"grid__middle_2o068","bottom":"grid__bottom_2o068","left":"grid__left_2o068","center":"grid__center_2o068","right":"grid__right_2o068","around":"grid__around_2o068","between":"grid__between_2o068"};
+var styles = {"component":"grid__component_1buzb","top":"grid__top_1buzb","middle":"grid__middle_1buzb","bottom":"grid__bottom_1buzb","left":"grid__left_1buzb","center":"grid__center_1buzb","right":"grid__right_1buzb","around":"grid__around_1buzb","between":"grid__between_1buzb"};
 require('./index.css');
 
 var Row = function (_a) {

package/grid/row/index.css

@@ -1,5 +1,5 @@
 /* hash: smm5o */
-.grid__component_2o068 {
+.grid__component_1buzb {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_2o068 {
+.grid__top_1buzb {
     align-items: flex-start;
 }
 
-.grid__middle_2o068 {
+.grid__middle_1buzb {
     align-items: center;
 }
 
-.grid__bottom_2o068 {
+.grid__bottom_1buzb {
     align-items: flex-end;
 }
 
-.grid__left_2o068 {
+.grid__left_1buzb {
     justify-content: flex-start;
 }
 
-.grid__center_2o068 {
+.grid__center_1buzb {
     justify-content: center;
 }
 
-.grid__right_2o068 {
+.grid__right_1buzb {
     justify-content: flex-end;
 }
 
-.grid__around_2o068 {
+.grid__around_1buzb {
     justify-content: space-around;
 }
 
-.grid__between_2o068 {
+.grid__between_1buzb {
     justify-content: space-between;
 }

package/grid/row/index.js

@@ -5,7 +5,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('../utils/index.js');
-require('../gutters.module-005640ba.js');
+require('../gutters.module-0314e1f7.js');
 
 
 

package/hatching-progress-bar/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"container":"hatching-progress-bar__container_lnmru","hatch":"hatching-progress-bar__hatch_lnmru","filled":"hatching-progress-bar__filled_lnmru","positive":"hatching-progress-bar__positive_lnmru","attention":"hatching-progress-bar__attention_lnmru","negative":"hatching-progress-bar__negative_lnmru","link":"hatching-progress-bar__link_lnmru","tertiary":"hatching-progress-bar__tertiary_lnmru","secondary":"hatching-progress-bar__secondary_lnmru","primary":"hatching-progress-bar__primary_lnmru","accent":"hatching-progress-bar__accent_lnmru"};
+var styles = {"container":"hatching-progress-bar__container_gi5kv","hatch":"hatching-progress-bar__hatch_gi5kv","filled":"hatching-progress-bar__filled_gi5kv","positive":"hatching-progress-bar__positive_gi5kv","attention":"hatching-progress-bar__attention_gi5kv","negative":"hatching-progress-bar__negative_gi5kv","link":"hatching-progress-bar__link_gi5kv","tertiary":"hatching-progress-bar__tertiary_gi5kv","secondary":"hatching-progress-bar__secondary_gi5kv","primary":"hatching-progress-bar__primary_gi5kv","accent":"hatching-progress-bar__accent_gi5kv"};
 require('./index.css');
 
 var HatchingProgressBar = React__default.default.forwardRef(function (_a, ref) {

package/hatching-progress-bar/cssm/index.module.css

@@ -254,6 +254,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -406,6 +410,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/hatching-progress-bar/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"container":"hatching-progress-bar__container_lnmru","hatch":"hatching-progress-bar__hatch_lnmru","filled":"hatching-progress-bar__filled_lnmru","positive":"hatching-progress-bar__positive_lnmru","attention":"hatching-progress-bar__attention_lnmru","negative":"hatching-progress-bar__negative_lnmru","link":"hatching-progress-bar__link_lnmru","tertiary":"hatching-progress-bar__tertiary_lnmru","secondary":"hatching-progress-bar__secondary_lnmru","primary":"hatching-progress-bar__primary_lnmru","accent":"hatching-progress-bar__accent_lnmru"};
+var styles = {"container":"hatching-progress-bar__container_gi5kv","hatch":"hatching-progress-bar__hatch_gi5kv","filled":"hatching-progress-bar__filled_gi5kv","positive":"hatching-progress-bar__positive_gi5kv","attention":"hatching-progress-bar__attention_gi5kv","negative":"hatching-progress-bar__negative_gi5kv","link":"hatching-progress-bar__link_gi5kv","tertiary":"hatching-progress-bar__tertiary_gi5kv","secondary":"hatching-progress-bar__secondary_gi5kv","primary":"hatching-progress-bar__primary_gi5kv","accent":"hatching-progress-bar__accent_gi5kv"};
 require('./index.css');
 
 var HatchingProgressBar = React.forwardRef(function (_a, ref) {

package/hatching-progress-bar/esm/index.css

@@ -255,6 +255,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -407,6 +411,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -524,7 +532,7 @@
 :root {
     --border-radius-m: 8px;
 }
-.hatching-progress-bar__container_lnmru {
+.hatching-progress-bar__container_gi5kv {
     background: var(--color-light-bg-primary-inverted-alpha-10);
     display: flex;
     overflow: hidden;
@@ -532,7 +540,7 @@
     height: 8px;
     position: relative;
 }
-.hatching-progress-bar__hatch_lnmru {
+.hatching-progress-bar__hatch_gi5kv {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_lnmru {
+.hatching-progress-bar__filled_gi5kv {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_lnmru {
+.hatching-progress-bar__positive_gi5kv {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_lnmru {
+.hatching-progress-bar__attention_gi5kv {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_lnmru {
+.hatching-progress-bar__negative_gi5kv {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_lnmru {
+.hatching-progress-bar__link_gi5kv {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_lnmru {
+.hatching-progress-bar__tertiary_gi5kv {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_lnmru {
+.hatching-progress-bar__secondary_gi5kv {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_lnmru {
+.hatching-progress-bar__primary_gi5kv {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_lnmru {
+.hatching-progress-bar__accent_gi5kv {
     background: var(--color-light-graphic-accent);
 }

package/hatching-progress-bar/index.css

@@ -255,6 +255,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -407,6 +411,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -524,7 +532,7 @@
 :root {
     --border-radius-m: 8px;
 }
-.hatching-progress-bar__container_lnmru {
+.hatching-progress-bar__container_gi5kv {
     background: var(--color-light-bg-primary-inverted-alpha-10);
     display: flex;
     overflow: hidden;
@@ -532,7 +540,7 @@
     height: 8px;
     position: relative;
 }
-.hatching-progress-bar__hatch_lnmru {
+.hatching-progress-bar__hatch_gi5kv {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_lnmru {
+.hatching-progress-bar__filled_gi5kv {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_lnmru {
+.hatching-progress-bar__positive_gi5kv {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_lnmru {
+.hatching-progress-bar__attention_gi5kv {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_lnmru {
+.hatching-progress-bar__negative_gi5kv {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_lnmru {
+.hatching-progress-bar__link_gi5kv {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_lnmru {
+.hatching-progress-bar__tertiary_gi5kv {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_lnmru {
+.hatching-progress-bar__secondary_gi5kv {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_lnmru {
+.hatching-progress-bar__primary_gi5kv {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_lnmru {
+.hatching-progress-bar__accent_gi5kv {
     background: var(--color-light-graphic-accent);
 }

package/hatching-progress-bar/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"container":"hatching-progress-bar__container_lnmru","hatch":"hatching-progress-bar__hatch_lnmru","filled":"hatching-progress-bar__filled_lnmru","positive":"hatching-progress-bar__positive_lnmru","attention":"hatching-progress-bar__attention_lnmru","negative":"hatching-progress-bar__negative_lnmru","link":"hatching-progress-bar__link_lnmru","tertiary":"hatching-progress-bar__tertiary_lnmru","secondary":"hatching-progress-bar__secondary_lnmru","primary":"hatching-progress-bar__primary_lnmru","accent":"hatching-progress-bar__accent_lnmru"};
+const styles = {"container":"hatching-progress-bar__container_gi5kv","hatch":"hatching-progress-bar__hatch_gi5kv","filled":"hatching-progress-bar__filled_gi5kv","positive":"hatching-progress-bar__positive_gi5kv","attention":"hatching-progress-bar__attention_gi5kv","negative":"hatching-progress-bar__negative_gi5kv","link":"hatching-progress-bar__link_gi5kv","tertiary":"hatching-progress-bar__tertiary_gi5kv","secondary":"hatching-progress-bar__secondary_gi5kv","primary":"hatching-progress-bar__primary_gi5kv","accent":"hatching-progress-bar__accent_gi5kv"};
 require('./index.css');
 
 const HatchingProgressBar = React.forwardRef(({ className, value, hatchValue, view = 'positive', dataTestId }, ref) => (React.createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn(styles.container, className), "data-test-id": dataTestId, ref: ref },

package/hatching-progress-bar/modern/index.css

@@ -255,6 +255,10 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
+    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
+    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -407,6 +411,10 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
+    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
+    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
+    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
+    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -524,7 +532,7 @@
 :root {
     --border-radius-m: 8px;
 }
-.hatching-progress-bar__container_lnmru {
+.hatching-progress-bar__container_gi5kv {
     background: var(--color-light-bg-primary-inverted-alpha-10);
     display: flex;
     overflow: hidden;
@@ -532,7 +540,7 @@
     height: 8px;
     position: relative;
 }
-.hatching-progress-bar__hatch_lnmru {
+.hatching-progress-bar__hatch_gi5kv {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_lnmru {
+.hatching-progress-bar__filled_gi5kv {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_lnmru {
+.hatching-progress-bar__positive_gi5kv {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_lnmru {
+.hatching-progress-bar__attention_gi5kv {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_lnmru {
+.hatching-progress-bar__negative_gi5kv {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_lnmru {
+.hatching-progress-bar__link_gi5kv {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_lnmru {
+.hatching-progress-bar__tertiary_gi5kv {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_lnmru {
+.hatching-progress-bar__secondary_gi5kv {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_lnmru {
+.hatching-progress-bar__primary_gi5kv {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_lnmru {
+.hatching-progress-bar__accent_gi5kv {
     background: var(--color-light-graphic-accent);
 }

package/icon-button/Component.d.ts

@@ -21,6 +21,11 @@ type IconButtonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: 'left' | 'center' | 'right';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -49,6 +54,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: "left" | "center" | "right" | undefined;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/icon-button/Component.js

@@ -10,13 +10,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"primary":"icon-button__primary_a00x8","secondary":"icon-button__secondary_a00x8","transparent":"icon-button__transparent_a00x8","negative":"icon-button__negative_a00x8","tertiary":"icon-button__tertiary_a00x8","component":"icon-button__component_a00x8","loader":"icon-button__loader_a00x8"};
+var defaultColors = {"primary":"icon-button__primary_1q44r","secondary":"icon-button__secondary_1q44r","transparent":"icon-button__transparent_1q44r","negative":"icon-button__negative_1q44r","tertiary":"icon-button__tertiary_1q44r","component":"icon-button__component_1q44r","loader":"icon-button__loader_1q44r"};
 require('./default.css');
 
-var styles = {"xxs":"icon-button__xxs_15006","xs":"icon-button__xs_15006","s":"icon-button__s_15006","iconWrapper":"icon-button__iconWrapper_15006","icon":"icon-button__icon_15006"};
+var styles = {"xxs":"icon-button__xxs_1dqyc","xs":"icon-button__xs_1dqyc","s":"icon-button__s_1dqyc","iconWrapper":"icon-button__iconWrapper_1dqyc","center":"icon-button__center_1dqyc","left":"icon-button__left_1dqyc","right":"icon-button__right_1dqyc","icon":"icon-button__icon_1dqyc"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_lr27k","secondary":"icon-button__secondary_lr27k","transparent":"icon-button__transparent_lr27k","negative":"icon-button__negative_lr27k","tertiary":"icon-button__tertiary_lr27k","component":"icon-button__component_lr27k","loader":"icon-button__loader_lr27k"};
+var invertedColors = {"primary":"icon-button__primary_2u1zz","secondary":"icon-button__secondary_2u1zz","transparent":"icon-button__transparent_2u1zz","negative":"icon-button__negative_2u1zz","tertiary":"icon-button__tertiary_2u1zz","component":"icon-button__component_2u1zz","loader":"icon-button__loader_2u1zz"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -25,11 +25,11 @@ var colorStyles = {
 };
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'ghost', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[size]) },
+        React__default.default.createElement("span", { className: cn__default.default(styles.iconWrapper, styles[size], styles[alignIcon]) },
             React__default.default.createElement(Icon, { className: styles.icon }))));
 });
 

package/icon-button/cssm/Component.d.ts

@@ -21,6 +21,11 @@ type IconButtonProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: 'left' | 'center' | 'right';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -49,6 +54,11 @@ declare const IconButton: React.ForwardRefExoticComponent<{
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: "left" | "center" | "right" | undefined;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/icon-button/cssm/Component.js

@@ -22,11 +22,11 @@ var colorStyles = {
 };
 var IconButton = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors"]);
+    var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, restProps = tslib.__rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon"]);
     return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, restProps, { ref: ref, view: 'ghost', className: cn__default.default('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b)), size: 's' }),
-        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[size]) },
+        React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconWrapper, styles__default.default[size], styles__default.default[alignIcon]) },
             React__default.default.createElement(Icon, { className: styles__default.default.icon }))));
 });
 

package/icon-button/cssm/index.module.css

@@ -28,9 +28,14 @@
     height: var(--icon-button-s-size);
 } .iconWrapper {
     display: flex;
-    align-items: center;
-    justify-content: center;
-} .icon {
+    align-items: center
+} .iconWrapper.center {
+        justify-content: center;
+    } .iconWrapper.left {
+        justify-content: left;
+    } .iconWrapper.right {
+        justify-content: right;
+    } .icon {
     max-width: 100%;
     max-height: 100%;
 } /* Для иконок с заливкой (icons-classic) */ .icon *[fill-rule] {