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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "41.7.0-beta.0",
+  "version": "41.7.0-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,11 +12,9 @@
   "homepage": "https://github.com/core-ds/core-components#readme",
   "scripts": {
     "build": "./bin/build.sh",
-    "start": "start-storybook -p 9009 -c .storybook -s ./.storybook/public",
-    "start:IE": "cross-env STORYBOOK_IE_MODE=true yarn start",
-    "start:quick": "cross-env RDTL=off yarn start",
-    "build-storybook": "build-storybook -o build -s ./.storybook/public --quiet",
-    "build-storybook-from-dist": "cross-env BUILD_ESM_ONLY=true yarn build && cross-env BUILD_STORYBOOK_FROM_DIST=true yarn build-storybook",
+    "start": "storybook dev -p 9009",
+    "build-storybook": "storybook build -o build --quiet",
+    "build-storybook-from-dist": "cross-env BUILD_MODERN_ONLY=true yarn build && cross-env BUILD_STORYBOOK_FROM_DIST=true yarn build-storybook",
     "serve-storybook": "http-server build -p 9009",
     "update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix && prettier --write \"./packages/{themes,vars}/**/*.css\"",
     "update-typography": "node ./tools/update-typography.js",
@@ -70,7 +68,7 @@
     "downshift": "^5.4.7",
     "element-closest": "^3.0.2",
     "intersection-observer": "^0.12.0",
-    "libphonenumber-js": "^1.10.7",
+    "libphonenumber-js": "^1.10.30",
     "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
@@ -95,23 +93,20 @@
   },
   "devDependencies": {
     "@alfalab/rollup-plugin-postcss": "^3.6.1",
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "7.18.0",
-    "@babel/preset-typescript": "^7.9.0",
     "@changesets/cli": "^2.25.0",
     "@changesets/get-github-info": "^0.5.1",
     "@commitlint/config-conventional": "^17.3.0",
     "@commitlint/config-lerna-scopes": "^17.2.1",
     "@oat-sa/rollup-plugin-wildcard-external": "^0.1.0",
     "@rollup/plugin-json": "^5.0.2",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-a11y": "^7.0.12",
+    "@storybook/addon-docs": "^7.0.12",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addons": "^7.0.12",
+    "@storybook/manager-api": "^7.0.12",
+    "@storybook/preset-create-react-app": "^7.0.12",
+    "@storybook/react": "^7.0.12",
+    "@storybook/react-webpack5": "^7.0.12",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
@@ -129,17 +124,18 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
     "@types/swiper": "^5.4.3",
+    "@types/webpack-env": "^1.18.0",
     "@typescript-eslint/eslint-plugin": "^5.40.1",
     "@typescript-eslint/parser": "^5.40.1",
     "arui-presets-lint": "^6.1.0",
     "axios": "^0.21.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.0.6",
     "commitizen": "^4.1.2",
     "copy-to-clipboard": "^3.3.1",
     "copyfiles": "^2.2.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^4.2.2",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "cz-conventional-changelog": "^3.2.0",
     "depcheck": "^1.4.3",
     "eslint": "^8.26.0",
@@ -173,9 +169,8 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.upperfirst": "^4.3.1",
-    "mini-css-extract-plugin": "^0.11.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "playwright": "^1.31.2",
+    "mini-css-extract-plugin": "^2.7.5",
+    "playwright": "^1.33.0",
     "postcss-cli": "^7.1.0",
     "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "^10.0.0",
@@ -187,12 +182,12 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.7.1",
     "purgecss": "^2.2.1",
+    "querystring-es3": "^0.2.1",
     "raw-loader": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.2.0",
-    "react-scripts": "^3.3.1",
-    "replace-in-file": "^5.0.2",
+    "react-scripts": "^5.0.1",
     "rimraf": "^3.0.2",
     "rollup": "^3.19.1",
     "rollup-plugin-copy": "^3.4.0",
@@ -200,8 +195,8 @@
     "rollup-plugin-ts": "^3.0.2",
     "shelljs": "^0.8.5",
     "standard-version": "^8.0.0",
-    "storybook-addon-live-examples": "^1.0.16",
-    "string-hash": "^1.1.3",
+    "storybook": "^7.0.12",
+    "storybook-addon-live-examples": "2.0.1--canary.12.08b4237.0",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^20.0.0",
@@ -211,8 +206,8 @@
     "url-loader": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
-    "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"

package/pass-code/Component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsGap = require('../gap');
-var getDataTestId = require('./getDataTestId-fd9cac29.js');
+var getDataTestId = require('./getDataTestId-8e43106b.js');
 var components_InputProgress_Component = require('./components/InputProgress/Component.js');
 var components_KeyPad_Component = require('./components/KeyPad/Component.js');
 require('react-transition-group');

package/pass-code/components/InputProgress/Component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
-var getDataTestId = require('../../getDataTestId-fd9cac29.js');
+var getDataTestId = require('../../getDataTestId-8e43106b.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pass-code/components/InputProgress/index.js

@@ -4,7 +4,7 @@ var components_InputProgress_Component = require('./Component.js');
 require('react');
 require('react-transition-group');
 require('classnames');
-require('../../getDataTestId-fd9cac29.js');
+require('../../getDataTestId-8e43106b.js');
 
 
 

package/pass-code/components/KeyPad/Component.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var BackspaceXxlIcon = require('@alfalab/icons-glyph/BackspaceXxlIcon');
-var getDataTestId = require('../../getDataTestId-fd9cac29.js');
+var getDataTestId = require('../../getDataTestId-8e43106b.js');
 var components_KeyPadButton_Component = require('../KeyPadButton/Component.js');
 require('classnames');
 require('../../../button');

package/pass-code/components/KeyPad/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_KeyPad_Component = require('./Component.js');
 require('react');
 require('@alfalab/icons-glyph/BackspaceXxlIcon');
-require('../../getDataTestId-fd9cac29.js');
+require('../../getDataTestId-8e43106b.js');
 require('../KeyPadButton/Component.js');
 require('classnames');
 require('../../../button');

package/pass-code/esm/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Gap } from '../../gap/esm';
-import { g as getDataTestId } from './getDataTestId-c84ef14b.js';
+import { g as getDataTestId } from './getDataTestId-61613beb.js';
 import { InputProgress } from './components/InputProgress/Component.js';
 import { KeyPad } from './components/KeyPad/Component.js';
 import 'react-transition-group';

package/pass-code/esm/components/InputProgress/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
-import { g as getDataTestId } from '../../getDataTestId-c84ef14b.js';
+import { g as getDataTestId } from '../../getDataTestId-61613beb.js';
 
 var styles = {"component":"pass-code__component_q6e15","dot":"pass-code__dot_q6e15","error":"pass-code__error_q6e15","filled":"pass-code__filled_q6e15"};
 require('./index.css');

package/pass-code/esm/components/InputProgress/index.js

@@ -2,4 +2,4 @@ export { InputProgress } from './Component.js';
 import 'react';
 import 'react-transition-group';
 import 'classnames';
-import '../../getDataTestId-c84ef14b.js';
+import '../../getDataTestId-61613beb.js';

package/pass-code/esm/components/KeyPad/Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BackspaceXxlIcon } from '@alfalab/icons-glyph/BackspaceXxlIcon';
-import { g as getDataTestId } from '../../getDataTestId-c84ef14b.js';
+import { g as getDataTestId } from '../../getDataTestId-61613beb.js';
 import { KeyPadButton } from '../KeyPadButton/Component.js';
 import 'classnames';
 import '../../../../button/esm';

package/pass-code/esm/components/KeyPad/index.js

@@ -4,4 +4,4 @@ import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import '../KeyPadButton/Component.js';
 import 'classnames';
 import '../../../../button/esm';
-import '../../getDataTestId-c84ef14b.js';
+import '../../getDataTestId-61613beb.js';

package/pass-code/esm/index-3885b0d7.d.ts

@@ -1,3 +1,3 @@
 declare const isClient: () => boolean;
 export { isClient };
-export * from "./getDataTestId-c84ef14b";
+export * from "./getDataTestId-61613beb";

package/pass-code/esm/index.js

@@ -8,4 +8,4 @@ import 'react-transition-group';
 import './components/KeyPad/Component.js';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import '../../button/esm';
-import './getDataTestId-c84ef14b.js';
+import './getDataTestId-61613beb.js';

package/pass-code/index-3885b0d7.d.ts

@@ -1,3 +1,3 @@
 declare const isClient: () => boolean;
 export { isClient };
-export * from "./getDataTestId-fd9cac29";
+export * from "./getDataTestId-8e43106b";

package/pass-code/index.js

@@ -5,7 +5,7 @@ var components_KeyPadButton_Component = require('./components/KeyPadButton/Compo
 require('react');
 require('classnames');
 require('../gap');
-require('./getDataTestId-fd9cac29.js');
+require('./getDataTestId-8e43106b.js');
 require('./components/InputProgress/Component.js');
 require('react-transition-group');
 require('./components/KeyPad/Component.js');

package/pass-code/modern/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Gap } from '../../gap/modern';
-import { g as getDataTestId } from './getDataTestId-43ffc39b.js';
+import { g as getDataTestId } from './getDataTestId-dfeb4d29.js';
 import { InputProgress } from './components/InputProgress/Component.js';
 import { KeyPad } from './components/KeyPad/Component.js';
 import 'react-transition-group';

package/pass-code/modern/components/InputProgress/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
-import { g as getDataTestId } from '../../getDataTestId-43ffc39b.js';
+import { g as getDataTestId } from '../../getDataTestId-dfeb4d29.js';
 
 const styles = {"component":"pass-code__component_q6e15","dot":"pass-code__dot_q6e15","error":"pass-code__error_q6e15","filled":"pass-code__filled_q6e15"};
 require('./index.css');

package/pass-code/modern/components/InputProgress/index.js

@@ -2,4 +2,4 @@ export { InputProgress } from './Component.js';
 import 'react';
 import 'react-transition-group';
 import 'classnames';
-import '../../getDataTestId-43ffc39b.js';
+import '../../getDataTestId-dfeb4d29.js';

package/pass-code/modern/components/KeyPad/Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BackspaceXxlIcon } from '@alfalab/icons-glyph/BackspaceXxlIcon';
-import { g as getDataTestId } from '../../getDataTestId-43ffc39b.js';
+import { g as getDataTestId } from '../../getDataTestId-dfeb4d29.js';
 import { KeyPadButton } from '../KeyPadButton/Component.js';
 import 'classnames';
 import '../../../../button/modern';

package/pass-code/modern/components/KeyPad/index.js

@@ -4,4 +4,4 @@ import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import '../KeyPadButton/Component.js';
 import 'classnames';
 import '../../../../button/modern';
-import '../../getDataTestId-43ffc39b.js';
+import '../../getDataTestId-dfeb4d29.js';

package/pass-code/modern/index-3885b0d7.d.ts

@@ -1,3 +1,3 @@
 declare const isClient: () => boolean;
 export { isClient };
-export * from "./getDataTestId-43ffc39b";
+export * from "./getDataTestId-dfeb4d29";

package/pass-code/modern/index.js

@@ -8,4 +8,4 @@ import 'react-transition-group';
 import './components/KeyPad/Component.js';
 import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import '../../button/modern';
-import './getDataTestId-43ffc39b.js';
+import './getDataTestId-dfeb4d29.js';

package/phone-input/utils/index.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * Удаляет форматирование номера телефона
  * @param phone Номер телефона
  */
-var deleteFormatting = function (phone) { return phone.replace('+', '').replace(/^7/, '').replace(/\s/g, '').replace(/-/g, ''); };
+var deleteFormatting = function (phone) {
+    return phone.replace('+', '').replace(/^7/, '').replace(/\s/g, '').replace(/-/g, '');
+};
 function setCaretPosition(_a) {
     var position = _a.position, inputRef = _a.inputRef;
     window.requestAnimationFrame(function () {

package/picker-button/Component.d.ts

@@ -26,7 +26,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'Field' | 'placeholder' |
      */
     showArrow?: boolean;
 };
-declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "leftAddons" | "rightAddons" | "view" | "loading"> & {
     options: Array<BaseSelectProps['options'][0] & {
         /**
          * Иконка, отображающаяся слева от текстового представления пункта

package/picker-button/Component.responsive.d.ts

@@ -11,7 +11,7 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
      */
     breakpoint?: number;
 };
-declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../select").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../select").BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "leftAddons" | "rightAddons" | "view" | "loading"> & {
     options: ((import("../select").OptionShape | import("../select").GroupShape) & {
         icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
     })[];

package/picker-button/typings-5e1b8383.d.ts

@@ -124,7 +124,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" |
      */
     dataTestId?: string;
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     block?: boolean | undefined;

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

@@ -253,6 +253,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);
@@ -405,6 +409,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/progress-bar/esm/index.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/progress-bar/index.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/progress-bar/modern/index.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/pure-cell/{component-c814e23a.js → component-038689f1.js}

@@ -8,7 +8,7 @@ var components_addon_component = require('./components/addon/component.js');
 var components_amount_component = require('./components/amount/component.js');
 var components_amountTitle_component = require('./components/amount-title/component.js');
 var components_category_component = require('./components/category/component.js');
-var getDataTestId = require('./getDataTestId-81a035ce.js');
+var getDataTestId = require('./getDataTestId-d8b19ae5.js');
 var components_footer_component = require('./components/footer/component.js');
 var components_footerButton_component = require('./components/footer-button/component.js');
 var components_footerText_component = require('./components/footer-text/component.js');

package/pure-cell/component.js

@@ -10,12 +10,12 @@ require('./components/addon/component.js');
 require('./components/amount/component.js');
 require('./components/amount-title/component.js');
 require('./components/category/component.js');
-var components_content_component = require('./component-c814e23a.js');
+var components_content_component = require('./component-038689f1.js');
 require('./components/footer/component.js');
 require('./components/footer-button/component.js');
 require('./components/footer-text/component.js');
 require('./components/graphics/component.js');
-require('./getDataTestId-81a035ce.js');
+require('./getDataTestId-d8b19ae5.js');
 require('../amount');
 require('../typography');
 require('../button');

package/pure-cell/components/addon/component.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var getDataTestId = require('../../getDataTestId-81a035ce.js');
+var getDataTestId = require('../../getDataTestId-d8b19ae5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pure-cell/components/addon/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_addon_component = require('./component.js');
 require('react');
 require('classnames');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');
 
 
 

package/pure-cell/components/amount/component.js

@@ -5,7 +5,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsAmount = require('../../../amount');
 var coreComponentsTypography = require('../../../typography');
-var getDataTestId = require('../../getDataTestId-81a035ce.js');
+var getDataTestId = require('../../getDataTestId-d8b19ae5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pure-cell/components/amount/index.js

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('../../../amount');
 require('../../../typography');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');
 
 
 

package/pure-cell/components/amount-title/component.js

@@ -5,7 +5,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsAmount = require('../../../amount');
 var coreComponentsTypography = require('../../../typography');
-var getDataTestId = require('../../getDataTestId-81a035ce.js');
+var getDataTestId = require('../../getDataTestId-d8b19ae5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pure-cell/components/amount-title/index.js

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('../../../amount');
 require('../../../typography');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');
 
 
 

package/pure-cell/components/category/component.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var coreComponentsTypography = require('../../../typography');
-var getDataTestId = require('../../getDataTestId-81a035ce.js');
+var getDataTestId = require('../../getDataTestId-d8b19ae5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pure-cell/components/category/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_category_component = require('./component.js');
 require('react');
 require('../../../typography');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');
 
 
 

package/pure-cell/components/content/component.js

@@ -2,8 +2,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
-require('../../getDataTestId-81a035ce.js');
-var components_content_component = require('../../component-c814e23a.js');
+require('../../getDataTestId-d8b19ae5.js');
+var components_content_component = require('../../component-038689f1.js');
 require('tslib');
 require('react-merge-refs');
 require('../../../comment');

package/pure-cell/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-c814e23a";
+export * from "../../component-038689f1";

package/pure-cell/components/content/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_content_component = require('../../component-c814e23a.js');
+var components_content_component = require('../../component-038689f1.js');
 require('tslib');
 require('react');
 require('react-merge-refs');
@@ -8,7 +8,7 @@ require('classnames');
 require('../../../comment');
 require('@alfalab/hooks');
 require('../addon/component.js');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');
 require('../amount/component.js');
 require('../../../amount');
 require('../../../typography');

package/pure-cell/components/footer/component.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var getDataTestId = require('../../getDataTestId-81a035ce.js');
+var getDataTestId = require('../../getDataTestId-d8b19ae5.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/pure-cell/components/footer/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_footer_component = require('./component.js');
 require('react');
 require('classnames');
-require('../../getDataTestId-81a035ce.js');
+require('../../getDataTestId-d8b19ae5.js');