@alfalab/core-components 41.10.0 → 41.11.0-beta.0

package/grid/modern/gutters.module-324694ed.js

@@ -0,0 +1,4 @@
+const guttersStyles = {"row":"grid__row_uayw2","gutter-8":"grid__gutter-8_uayw2","col":"grid__col_uayw2","gutter-16":"grid__gutter-16_uayw2","gutter-24":"grid__gutter-24_uayw2","gutter-mobile-8":"grid__gutter-mobile-8_uayw2","gutter-mobile-16":"grid__gutter-mobile-16_uayw2","gutter-mobile-24":"grid__gutter-mobile-24_uayw2","gutter-mobile-xs-8":"grid__gutter-mobile-xs-8_uayw2","gutter-mobile-xs-16":"grid__gutter-mobile-xs-16_uayw2","gutter-mobile-xs-24":"grid__gutter-mobile-xs-24_uayw2","gutter-mobile-s-8":"grid__gutter-mobile-s-8_uayw2","gutter-mobile-s-16":"grid__gutter-mobile-s-16_uayw2","gutter-mobile-s-24":"grid__gutter-mobile-s-24_uayw2","gutter-mobile-m-8":"grid__gutter-mobile-m-8_uayw2","gutter-mobile-m-16":"grid__gutter-mobile-m-16_uayw2","gutter-mobile-m-24":"grid__gutter-mobile-m-24_uayw2","gutter-mobile-l-8":"grid__gutter-mobile-l-8_uayw2","gutter-mobile-l-16":"grid__gutter-mobile-l-16_uayw2","gutter-mobile-l-24":"grid__gutter-mobile-l-24_uayw2","gutter-tablet-8":"grid__gutter-tablet-8_uayw2","gutter-tablet-16":"grid__gutter-tablet-16_uayw2","gutter-tablet-24":"grid__gutter-tablet-24_uayw2","gutter-tablet-s-8":"grid__gutter-tablet-s-8_uayw2","gutter-tablet-s-16":"grid__gutter-tablet-s-16_uayw2","gutter-tablet-s-24":"grid__gutter-tablet-s-24_uayw2","gutter-tablet-m-8":"grid__gutter-tablet-m-8_uayw2","gutter-tablet-m-16":"grid__gutter-tablet-m-16_uayw2","gutter-tablet-m-24":"grid__gutter-tablet-m-24_uayw2","gutter-desktop-8":"grid__gutter-desktop-8_uayw2","gutter-desktop-16":"grid__gutter-desktop-16_uayw2","gutter-desktop-24":"grid__gutter-desktop-24_uayw2","gutter-desktop-s-8":"grid__gutter-desktop-s-8_uayw2","gutter-desktop-s-16":"grid__gutter-desktop-s-16_uayw2","gutter-desktop-s-24":"grid__gutter-desktop-s-24_uayw2","gutter-desktop-m-8":"grid__gutter-desktop-m-8_uayw2","gutter-desktop-m-16":"grid__gutter-desktop-m-16_uayw2","gutter-desktop-m-24":"grid__gutter-desktop-m-24_uayw2","gutter-desktop-l-8":"grid__gutter-desktop-l-8_uayw2","gutter-desktop-l-16":"grid__gutter-desktop-l-16_uayw2","gutter-desktop-l-24":"grid__gutter-desktop-l-24_uayw2","gutter-desktop-xl-8":"grid__gutter-desktop-xl-8_uayw2","gutter-desktop-xl-16":"grid__gutter-desktop-xl-16_uayw2","gutter-desktop-xl-24":"grid__gutter-desktop-xl-24_uayw2"};
+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-70170e9d.js';
+import './gutters.module-324694ed.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-70170e9d.js';
+import { g as guttersStyles } from '../gutters.module-324694ed.js';
 
-const styles = {"component":"grid__component_1xwi4","top":"grid__top_1xwi4","middle":"grid__middle_1xwi4","bottom":"grid__bottom_1xwi4","left":"grid__left_1xwi4","center":"grid__center_1xwi4","right":"grid__right_1xwi4","around":"grid__around_1xwi4","between":"grid__between_1xwi4"};
+const styles = {"component":"grid__component_ndu5m","top":"grid__top_ndu5m","middle":"grid__middle_ndu5m","bottom":"grid__bottom_ndu5m","left":"grid__left_ndu5m","center":"grid__center_ndu5m","right":"grid__right_ndu5m","around":"grid__around_ndu5m","between":"grid__between_ndu5m"};
 require('./index.css');
 
 const Row = ({ tag: Component = 'div', className, gutter = {

package/grid/modern/row/index.css

@@ -1,5 +1,5 @@
 /* hash: smm5o */
-.grid__component_1xwi4 {
+.grid__component_ndu5m {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_1xwi4 {
+.grid__top_ndu5m {
     align-items: flex-start;
 }
 
-.grid__middle_1xwi4 {
+.grid__middle_ndu5m {
     align-items: center;
 }
 
-.grid__bottom_1xwi4 {
+.grid__bottom_ndu5m {
     align-items: flex-end;
 }
 
-.grid__left_1xwi4 {
+.grid__left_ndu5m {
     justify-content: flex-start;
 }
 
-.grid__center_1xwi4 {
+.grid__center_ndu5m {
     justify-content: center;
 }
 
-.grid__right_1xwi4 {
+.grid__right_ndu5m {
     justify-content: flex-end;
 }
 
-.grid__around_1xwi4 {
+.grid__around_ndu5m {
     justify-content: space-around;
 }
 
-.grid__between_1xwi4 {
+.grid__between_ndu5m {
     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-70170e9d.js';
+import '../gutters.module-324694ed.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-aeead04c.js');
+var gutters_module = require('../gutters.module-e06ffec1.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_1xwi4","top":"grid__top_1xwi4","middle":"grid__middle_1xwi4","bottom":"grid__bottom_1xwi4","left":"grid__left_1xwi4","center":"grid__center_1xwi4","right":"grid__right_1xwi4","around":"grid__around_1xwi4","between":"grid__between_1xwi4"};
+var styles = {"component":"grid__component_ndu5m","top":"grid__top_ndu5m","middle":"grid__middle_ndu5m","bottom":"grid__bottom_ndu5m","left":"grid__left_ndu5m","center":"grid__center_ndu5m","right":"grid__right_ndu5m","around":"grid__around_ndu5m","between":"grid__between_ndu5m"};
 require('./index.css');
 
 var Row = function (_a) {

package/grid/row/index.css

@@ -1,5 +1,5 @@
 /* hash: smm5o */
-.grid__component_1xwi4 {
+.grid__component_ndu5m {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -7,34 +7,34 @@
     box-sizing: border-box;
 }
 
-.grid__top_1xwi4 {
+.grid__top_ndu5m {
     align-items: flex-start;
 }
 
-.grid__middle_1xwi4 {
+.grid__middle_ndu5m {
     align-items: center;
 }
 
-.grid__bottom_1xwi4 {
+.grid__bottom_ndu5m {
     align-items: flex-end;
 }
 
-.grid__left_1xwi4 {
+.grid__left_ndu5m {
     justify-content: flex-start;
 }
 
-.grid__center_1xwi4 {
+.grid__center_ndu5m {
     justify-content: center;
 }
 
-.grid__right_1xwi4 {
+.grid__right_ndu5m {
     justify-content: flex-end;
 }
 
-.grid__around_1xwi4 {
+.grid__around_ndu5m {
     justify-content: space-around;
 }
 
-.grid__between_1xwi4 {
+.grid__between_ndu5m {
     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-aeead04c.js');
+require('../gutters.module-e06ffec1.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_1caza","hatch":"hatching-progress-bar__hatch_1caza","filled":"hatching-progress-bar__filled_1caza","positive":"hatching-progress-bar__positive_1caza","attention":"hatching-progress-bar__attention_1caza","negative":"hatching-progress-bar__negative_1caza","link":"hatching-progress-bar__link_1caza","tertiary":"hatching-progress-bar__tertiary_1caza","secondary":"hatching-progress-bar__secondary_1caza","primary":"hatching-progress-bar__primary_1caza","accent":"hatching-progress-bar__accent_1caza"};
+var styles = {"container":"hatching-progress-bar__container_1ahjy","hatch":"hatching-progress-bar__hatch_1ahjy","filled":"hatching-progress-bar__filled_1ahjy","positive":"hatching-progress-bar__positive_1ahjy","attention":"hatching-progress-bar__attention_1ahjy","negative":"hatching-progress-bar__negative_1ahjy","link":"hatching-progress-bar__link_1ahjy","tertiary":"hatching-progress-bar__tertiary_1ahjy","secondary":"hatching-progress-bar__secondary_1ahjy","primary":"hatching-progress-bar__primary_1ahjy","accent":"hatching-progress-bar__accent_1ahjy"};
 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_1caza","hatch":"hatching-progress-bar__hatch_1caza","filled":"hatching-progress-bar__filled_1caza","positive":"hatching-progress-bar__positive_1caza","attention":"hatching-progress-bar__attention_1caza","negative":"hatching-progress-bar__negative_1caza","link":"hatching-progress-bar__link_1caza","tertiary":"hatching-progress-bar__tertiary_1caza","secondary":"hatching-progress-bar__secondary_1caza","primary":"hatching-progress-bar__primary_1caza","accent":"hatching-progress-bar__accent_1caza"};
+var styles = {"container":"hatching-progress-bar__container_1ahjy","hatch":"hatching-progress-bar__hatch_1ahjy","filled":"hatching-progress-bar__filled_1ahjy","positive":"hatching-progress-bar__positive_1ahjy","attention":"hatching-progress-bar__attention_1ahjy","negative":"hatching-progress-bar__negative_1ahjy","link":"hatching-progress-bar__link_1ahjy","tertiary":"hatching-progress-bar__tertiary_1ahjy","secondary":"hatching-progress-bar__secondary_1ahjy","primary":"hatching-progress-bar__primary_1ahjy","accent":"hatching-progress-bar__accent_1ahjy"};
 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_1caza {
+.hatching-progress-bar__container_1ahjy {
     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_1caza {
+.hatching-progress-bar__hatch_1ahjy {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_1caza {
+.hatching-progress-bar__filled_1ahjy {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_1caza {
+.hatching-progress-bar__positive_1ahjy {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_1caza {
+.hatching-progress-bar__attention_1ahjy {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_1caza {
+.hatching-progress-bar__negative_1ahjy {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_1caza {
+.hatching-progress-bar__link_1ahjy {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_1caza {
+.hatching-progress-bar__tertiary_1ahjy {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_1caza {
+.hatching-progress-bar__secondary_1ahjy {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_1caza {
+.hatching-progress-bar__primary_1ahjy {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_1caza {
+.hatching-progress-bar__accent_1ahjy {
     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_1caza {
+.hatching-progress-bar__container_1ahjy {
     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_1caza {
+.hatching-progress-bar__hatch_1ahjy {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_1caza {
+.hatching-progress-bar__filled_1ahjy {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_1caza {
+.hatching-progress-bar__positive_1ahjy {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_1caza {
+.hatching-progress-bar__attention_1ahjy {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_1caza {
+.hatching-progress-bar__negative_1ahjy {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_1caza {
+.hatching-progress-bar__link_1ahjy {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_1caza {
+.hatching-progress-bar__tertiary_1ahjy {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_1caza {
+.hatching-progress-bar__secondary_1ahjy {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_1caza {
+.hatching-progress-bar__primary_1ahjy {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_1caza {
+.hatching-progress-bar__accent_1ahjy {
     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_1caza","hatch":"hatching-progress-bar__hatch_1caza","filled":"hatching-progress-bar__filled_1caza","positive":"hatching-progress-bar__positive_1caza","attention":"hatching-progress-bar__attention_1caza","negative":"hatching-progress-bar__negative_1caza","link":"hatching-progress-bar__link_1caza","tertiary":"hatching-progress-bar__tertiary_1caza","secondary":"hatching-progress-bar__secondary_1caza","primary":"hatching-progress-bar__primary_1caza","accent":"hatching-progress-bar__accent_1caza"};
+const styles = {"container":"hatching-progress-bar__container_1ahjy","hatch":"hatching-progress-bar__hatch_1ahjy","filled":"hatching-progress-bar__filled_1ahjy","positive":"hatching-progress-bar__positive_1ahjy","attention":"hatching-progress-bar__attention_1ahjy","negative":"hatching-progress-bar__negative_1ahjy","link":"hatching-progress-bar__link_1ahjy","tertiary":"hatching-progress-bar__tertiary_1ahjy","secondary":"hatching-progress-bar__secondary_1ahjy","primary":"hatching-progress-bar__primary_1ahjy","accent":"hatching-progress-bar__accent_1ahjy"};
 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_1caza {
+.hatching-progress-bar__container_1ahjy {
     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_1caza {
+.hatching-progress-bar__hatch_1ahjy {
     position: absolute;
     left: 0;
     top: 0;
@@ -546,34 +554,34 @@
         var(--color-light-specialbg-nulled) 10px 18px
     );
 }
-.hatching-progress-bar__filled_1caza {
+.hatching-progress-bar__filled_1ahjy {
     position: relative;
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease;
     z-index: 1;
 }
-.hatching-progress-bar__positive_1caza {
+.hatching-progress-bar__positive_1ahjy {
     background: var(--color-light-graphic-positive);
 }
-.hatching-progress-bar__attention_1caza {
+.hatching-progress-bar__attention_1ahjy {
     background: var(--color-light-graphic-attention);
 }
-.hatching-progress-bar__negative_1caza {
+.hatching-progress-bar__negative_1ahjy {
     background: var(--color-light-graphic-negative);
 }
-.hatching-progress-bar__link_1caza {
+.hatching-progress-bar__link_1ahjy {
     background: var(--color-light-graphic-link);
 }
-.hatching-progress-bar__tertiary_1caza {
+.hatching-progress-bar__tertiary_1ahjy {
     background: var(--color-light-graphic-tertiary);
 }
-.hatching-progress-bar__secondary_1caza {
+.hatching-progress-bar__secondary_1ahjy {
     background: var(--color-light-graphic-secondary);
 }
-.hatching-progress-bar__primary_1caza {
+.hatching-progress-bar__primary_1ahjy {
     background: var(--color-light-graphic-primary);
 }
-.hatching-progress-bar__accent_1caza {
+.hatching-progress-bar__accent_1ahjy {
     background: var(--color-light-graphic-accent);
 }

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_ysu2q","secondary":"icon-button__secondary_ysu2q","transparent":"icon-button__transparent_ysu2q","negative":"icon-button__negative_ysu2q","tertiary":"icon-button__tertiary_ysu2q","component":"icon-button__component_ysu2q","loader":"icon-button__loader_ysu2q"};
+var defaultColors = {"primary":"icon-button__primary_1hmnw","secondary":"icon-button__secondary_1hmnw","transparent":"icon-button__transparent_1hmnw","negative":"icon-button__negative_1hmnw","tertiary":"icon-button__tertiary_1hmnw","component":"icon-button__component_1hmnw","loader":"icon-button__loader_1hmnw"};
 require('./default.css');
 
-var styles = {"xxs":"icon-button__xxs_12d7v","xs":"icon-button__xs_12d7v","s":"icon-button__s_12d7v","iconWrapper":"icon-button__iconWrapper_12d7v","center":"icon-button__center_12d7v","left":"icon-button__left_12d7v","right":"icon-button__right_12d7v","icon":"icon-button__icon_12d7v"};
+var styles = {"xxs":"icon-button__xxs_ay72d","xs":"icon-button__xs_ay72d","s":"icon-button__s_ay72d","iconWrapper":"icon-button__iconWrapper_ay72d","center":"icon-button__center_ay72d","left":"icon-button__left_ay72d","right":"icon-button__right_ay72d","icon":"icon-button__icon_ay72d"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_oduim","secondary":"icon-button__secondary_oduim","transparent":"icon-button__transparent_oduim","negative":"icon-button__negative_oduim","tertiary":"icon-button__tertiary_oduim","component":"icon-button__component_oduim","loader":"icon-button__loader_oduim"};
+var invertedColors = {"primary":"icon-button__primary_1i6ma","secondary":"icon-button__secondary_1i6ma","transparent":"icon-button__transparent_1i6ma","negative":"icon-button__negative_1i6ma","tertiary":"icon-button__tertiary_1i6ma","component":"icon-button__component_1i6ma","loader":"icon-button__loader_1i6ma"};
 require('./inverted.css');
 
 var colorStyles = {

package/icon-button/default.css

@@ -1,4 +1,4 @@
-/* hash: p1slh */
+/* hash: 1w9aq */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-negative: #f15045;
@@ -61,50 +61,50 @@
     --icon-button-negative-hover-color: var(--color-light-graphic-negative-shade-7);
     --icon-button-negative-active-color: var(--color-light-graphic-negative-shade-15);
     --icon-button-negative-disabled-color: var(--color-light-graphic-negative-alpha-30);
-} .cc-icon-button.icon-button__primary_ysu2q {
+} .cc-icon-button.icon-button__primary_1hmnw {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_ysu2q:hover {
+    } .cc-icon-button.icon-button__primary_1hmnw:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_ysu2q:active {
+        } .cc-icon-button.icon-button__primary_1hmnw:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_ysu2q {
+        } .cc-icon-button.icon-button__secondary_1hmnw {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_ysu2q:hover {
+    } .cc-icon-button.icon-button__secondary_1hmnw:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_ysu2q:active {
+        } .cc-icon-button.icon-button__secondary_1hmnw:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_ysu2q {
+        } .cc-icon-button.icon-button__transparent_1hmnw {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_ysu2q:hover {
+    } .cc-icon-button.icon-button__transparent_1hmnw:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_ysu2q:active {
+        } .cc-icon-button.icon-button__transparent_1hmnw:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_ysu2q {
+        } .cc-icon-button.icon-button__negative_1hmnw {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_ysu2q:hover {
+    } .cc-icon-button.icon-button__negative_1hmnw:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_ysu2q:active {
+        } .cc-icon-button.icon-button__negative_1hmnw:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_ysu2q {
+        } .cc-icon-button.icon-button__tertiary_1hmnw {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_ysu2q:hover {
+    } .cc-icon-button.icon-button__tertiary_1hmnw:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_ysu2q:active {
+        } .cc-icon-button.icon-button__tertiary_1hmnw:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__primary_ysu2q {
+        } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__primary_1hmnw {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__primary_ysu2q.icon-button__loader_ysu2q {
+        } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__primary_1hmnw.icon-button__loader_1hmnw {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__secondary_ysu2q {
+            } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__secondary_1hmnw {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__secondary_ysu2q.icon-button__loader_ysu2q {
+        } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__secondary_1hmnw.icon-button__loader_1hmnw {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__negative_ysu2q {
+            } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__negative_1hmnw {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__negative_ysu2q.icon-button__loader_ysu2q {
+        } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__negative_1hmnw.icon-button__loader_1hmnw {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__tertiary_ysu2q {
+            } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__tertiary_1hmnw {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_ysu2q:disabled.icon-button__tertiary_ysu2q.icon-button__loader_ysu2q {
+        } .cc-icon-button.icon-button__component_1hmnw:disabled.icon-button__tertiary_1hmnw.icon-button__loader_1hmnw {
                 color: var(--icon-button-tertiary-base-color);
             }

package/icon-button/esm/Component.js

@@ -3,13 +3,13 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../button/esm';
 
-var defaultColors = {"primary":"icon-button__primary_ysu2q","secondary":"icon-button__secondary_ysu2q","transparent":"icon-button__transparent_ysu2q","negative":"icon-button__negative_ysu2q","tertiary":"icon-button__tertiary_ysu2q","component":"icon-button__component_ysu2q","loader":"icon-button__loader_ysu2q"};
+var defaultColors = {"primary":"icon-button__primary_1hmnw","secondary":"icon-button__secondary_1hmnw","transparent":"icon-button__transparent_1hmnw","negative":"icon-button__negative_1hmnw","tertiary":"icon-button__tertiary_1hmnw","component":"icon-button__component_1hmnw","loader":"icon-button__loader_1hmnw"};
 require('./default.css');
 
-var styles = {"xxs":"icon-button__xxs_12d7v","xs":"icon-button__xs_12d7v","s":"icon-button__s_12d7v","iconWrapper":"icon-button__iconWrapper_12d7v","center":"icon-button__center_12d7v","left":"icon-button__left_12d7v","right":"icon-button__right_12d7v","icon":"icon-button__icon_12d7v"};
+var styles = {"xxs":"icon-button__xxs_ay72d","xs":"icon-button__xs_ay72d","s":"icon-button__s_ay72d","iconWrapper":"icon-button__iconWrapper_ay72d","center":"icon-button__center_ay72d","left":"icon-button__left_ay72d","right":"icon-button__right_ay72d","icon":"icon-button__icon_ay72d"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_oduim","secondary":"icon-button__secondary_oduim","transparent":"icon-button__transparent_oduim","negative":"icon-button__negative_oduim","tertiary":"icon-button__tertiary_oduim","component":"icon-button__component_oduim","loader":"icon-button__loader_oduim"};
+var invertedColors = {"primary":"icon-button__primary_1i6ma","secondary":"icon-button__secondary_1i6ma","transparent":"icon-button__transparent_1i6ma","negative":"icon-button__negative_1i6ma","tertiary":"icon-button__tertiary_1i6ma","component":"icon-button__component_1i6ma","loader":"icon-button__loader_1i6ma"};
 require('./inverted.css');
 
 var colorStyles = {