@alfalab/core-components 42.9.0 → 42.9.1

package/README.md

@@ -11,195 +11,3 @@
 [Cторибук](https://core-ds.github.io/core-components/) с документацией и песочницей.
 
 </div>
-
-## Установка
-
-Установка всех компонентов:
-
-```bash
-yarn add @alfalab/core-components
-```
-
-Каждый компонент публикуется отдельным пакетом, поэтому вы можете подключить только нужный, не устанавливая библиотеку целиком:
-
-```bash
-yarn add @alfalab/core-components-button
-```
-
-## Использование
-
-```jsx
-import { Button } from '@alfalab/core-components/button';
-```
-
-## Темизация
-
-[Гайд по настройке темизации](https://core-ds.github.io/core-components/master/?path=/docs/for-users-темизация--docs)
-
-## Разработка
-
-```bash
-$ git clone git@github.com:core-ds/core-components.git
-$ cd core-components
-$ yarn install
-$ yarn start
-```
-
-Сторибук будет доступен по адресу http://localhost:9009/
-
-### Сигнатуры коллбэков
-
-> Компоненты передают в функции обратного вызова два аргумента:
->
-> 1. `event: SyntheticEvent` - объект события, инициировавшего вызов.
-> 2. `payload: {}` - объект с дополнительными данными. Например `{ amount: 5000 }`
-
-### Импорт компонентов внутри компонентов
-
-Так как у нас монорепозиторий, то все пакеты должны быть независимы. Если при разработке компонента вам потребовался другой компонент, то его нужно добавить как зависимость. Пример можно посмотреть в [Тултипе](https://github.com/core-ds/core-components/tree/master/packages/tooltip). Также нужно добавить пару опций в `tsconfig.json`:
-
-```json
-{
-    "compilerOptions": {
-        "paths": {
-            "@alfalab/core-components-popover": ["../popover/src"] // для корректоной сборки rollup
-        }
-    },
-    "references": [{ "path": "../popover" }] // для корректной работы IDE
-}
-```
-
-### Выставление Pull request-а
-
-Для версионирования и публикации пакетов используется инструмент [Changesets](https://github.com/changesets/changesets).
-Если PR затрагивает функциональность одного из пакетов, то он должен включать в себя набор изменений.
-Набор изменений представляет собой файл формата md, который находится внутри директории .changeset и содержит описание сделанных изменений.
-
-Файл с набором изменений можно сгенерировать двумя способами:
-
-1. с помощью CLI команды `yarn changeset add`.
-   После ввода команды будет предложено выбрать пакет, в котором было произведено изменение, тип релиза (major, minor, patch) и ввести описание изменения.
-2. с помощью [changeset bot](https://github.com/changesets/bot).
-   В этом случае на странице с pull request-ом будет отображено сообщение с баннером 'No Changeset'
-   и ниже ссылка для создания набора изменений - Click here if you're a maintainer who wants to add a changeset to this PR.
-   По клику на нее генерируется и открывается на редактирование md-файл. В нем нужно ввести понятное описание сделанных изменений на русском языке,
-   а также добавить или удалить названия пакетов (только в случае если бот неверно их определил).
-
-Описание изменения может состоять из произвольного количества строк в формате md.
-Вот несколько особенностей, на которые стоит обращать внимание:
-
-1. форматируется только первая строка описания (добавляется дефис "-", если его не было),
-   вторая и последующие строки попадут в CHANGELOG так, как вы их запишете (сохранится разметка md)
-2. при добавлении нового компонента нужно указать '0.0.0' версию пакета в package.json,
-   в наборе изменений указать мажорный ('major') тип релиза, а в описание обязательно добавить фразу 'новый компонент ${name}'.
-   Пример приведен ниже.
-
-    ```
-    ---
-    '@alfalab/core-components-gap': major
-    ---
-
-    Добавлен новый компонент Gap
-    ```
-
-## Запуск bash скриптов на Windows
-
-Для запуска bash скриптов на OS Windows необходимо сперва установить WSL
-(как это сделать можно почитать [тут](https://docs.microsoft.com/ru-ru/windows/wsl/)).
-Далее в PowerShell или CMD ввести команду bash, после чего уже запускать npm команды, использующие bash скрипты.
-
-## Релизы
-
-Для выпуска новой версии нужно запустить workflow "Release".
-Для этого нужно перейти во вкладку Actions на Github, выбрать "Release" и нажать "Run", оставив ветку без изменений (master)
-
-### Как выпустить бета-версию:
-
-1. Собираем пакет
-
-```bash
-$ yarn build
-```
-
-2. Переходим в папку с собранным пакетом и обновляем версию
-
-```bash
-$ cd dist
-$ npm version 2.0.0-beta.0 // подставить нужную версию
-```
-
-3. Публикуем пакет
-
-```bash
-npm publish --tag beta
-```
-
-Также можно воспользоваться экшеном "Beta release".
-Для этого нужно перейти во вкладку Actions на Github, выбрать workflow "Beta release",
-указать ветку, из которой будет выпущена бетка, а также версию выпускаемого пакета.
-
-## Коммиты
-
-На проекте подключен `commitlint` для линтинга коммитов. На основании коммитов формируется `CHANGELOG.MD`.
-Мы придерживаемся [AngularJS commit conventions.](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)
-Коммиты можно делать с помощью утилиты `commitizen`:
-
-```bash
-$ git add .
-$ yarn cm # запустит утилиту commitizen для создания коммита
-$ git push
-```
-
-## Сборка компонентов
-
-Компоненты поставляются в трех видах:
-
-1. `ES5`
-
-2. `ES5 с css-модулями`
-
-3. `ES2020`
-
-Импорт `ES5`:
-
-```tsx
-import { Button } from '@alfalab/core-components/button';
-// или
-import { Button } from '@alfalab/core-components-button';
-```
-
-Импорт `ES5` с css-модулями:
-
-```tsx
-import { Button } from '@alfalab/core-components/button/cssm';
-// или
-import { Button } from '@alfalab/core-components-button/cssm';
-```
-
-Импорт `ES2020`:
-
-```tsx
-import { Button } from '@alfalab/core-components/button/modern';
-// или
-import { Button } from '@alfalab/core-components-button/modern';
-```
-
-## Правила контрибьютинга
-
-Мы открыты к любым предложениям по развитию библиотеки.
-Отправляйте свои идеи и вопросы через [pull requests](https://github.com/core-ds/core-components/pulls) или [issues](https://github.com/core-ds/core-components/issues).
-
--   Уважаем тех, кто видит проблему и кидает PR.
--   Не знаете что делать – можно брать любую задачу без Assignee, назначив её на себя.
--   Знаете что делать и есть возможность – кидайте PR.
--   Знаете что делать, но нет времени – добавьте задачу (issue).
-
-![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)
-
-## Мейнтейнеры
-
--   [Александр Яценко](https://github.com/reme3d2y)
--   [Владимир Гевак](https://github.com/Lacronts)
--   [Евгений Купава](https://github.com/EGNKupava)
--   [Валерия Чуричева](https://github.com/Valeri8888)
--   [Евгений Сергеев](https://github.com/SiebenSieben)

package/action-button/Component.js

@@ -15,16 +15,16 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"primary":"action-button__primary_1lxc7","iconWrapper":"action-button__iconWrapper_1lxc7","loader":"action-button__loader_1lxc7","secondary":"action-button__secondary_1lxc7"};
+var defaultColors = {"primary":"action-button__primary_773eo","iconWrapper":"action-button__iconWrapper_773eo","loader":"action-button__loader_773eo","secondary":"action-button__secondary_773eo"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_12sb3","s":"action-button__s_12sb3","disabled":"action-button__disabled_12sb3","loading":"action-button__loading_12sb3","iconWrapper":"action-button__iconWrapper_12sb3","label":"action-button__label_12sb3","loader":"action-button__loader_12sb3","focused":"action-button__focused_12sb3"};
+var styles = {"component":"action-button__component_1fh7e","s":"action-button__s_1fh7e","disabled":"action-button__disabled_1fh7e","loading":"action-button__loading_1fh7e","iconWrapper":"action-button__iconWrapper_1fh7e","label":"action-button__label_1fh7e","loader":"action-button__loader_1fh7e","focused":"action-button__focused_1fh7e"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1e6i6","iconWrapper":"action-button__iconWrapper_1e6i6","loader":"action-button__loader_1e6i6","secondary":"action-button__secondary_1e6i6"};
+var invertedColors = {"primary":"action-button__primary_1yhdg","iconWrapper":"action-button__iconWrapper_1yhdg","loader":"action-button__loader_1yhdg","secondary":"action-button__secondary_1yhdg"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_8jqjb","iconWrapper":"action-button__iconWrapper_8jqjb","loader":"action-button__loader_8jqjb","secondary":"action-button__secondary_8jqjb"};
+var staticColors = {"primary":"action-button__primary_1r40b","iconWrapper":"action-button__iconWrapper_1r40b","loader":"action-button__loader_1r40b","secondary":"action-button__secondary_1r40b"};
 require('./static.css');
 
 var colorStyles = {

package/action-button/default.css

@@ -41,26 +41,26 @@
     /* spinner */
     --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
     --action-button-spinner-default-color: var(--color-light-graphic-primary);
-} .action-button__primary_1lxc7 {
+} .action-button__primary_773eo {
     color: var(--action-button-primary-base-color)
-} .action-button__primary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__primary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
-    } .action-button__primary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-hover-color);
-    } .action-button__primary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-active-color);
-    } .action-button__primary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__primary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-primary-color);
-    } .action-button__secondary_1lxc7 {
+    } .action-button__secondary_773eo {
     color: var(--action-button-secondary-base-color)
-} .action-button__secondary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__secondary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
-    } .action-button__secondary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-hover-color);
-    } .action-button__secondary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-active-color);
-    } .action-button__secondary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__secondary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-default-color);
     }

package/action-button/esm/Component.js

@@ -7,16 +7,16 @@ import { Spinner } from '../../spinner/esm';
 import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-var defaultColors = {"primary":"action-button__primary_1lxc7","iconWrapper":"action-button__iconWrapper_1lxc7","loader":"action-button__loader_1lxc7","secondary":"action-button__secondary_1lxc7"};
+var defaultColors = {"primary":"action-button__primary_773eo","iconWrapper":"action-button__iconWrapper_773eo","loader":"action-button__loader_773eo","secondary":"action-button__secondary_773eo"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_12sb3","s":"action-button__s_12sb3","disabled":"action-button__disabled_12sb3","loading":"action-button__loading_12sb3","iconWrapper":"action-button__iconWrapper_12sb3","label":"action-button__label_12sb3","loader":"action-button__loader_12sb3","focused":"action-button__focused_12sb3"};
+var styles = {"component":"action-button__component_1fh7e","s":"action-button__s_1fh7e","disabled":"action-button__disabled_1fh7e","loading":"action-button__loading_1fh7e","iconWrapper":"action-button__iconWrapper_1fh7e","label":"action-button__label_1fh7e","loader":"action-button__loader_1fh7e","focused":"action-button__focused_1fh7e"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1e6i6","iconWrapper":"action-button__iconWrapper_1e6i6","loader":"action-button__loader_1e6i6","secondary":"action-button__secondary_1e6i6"};
+var invertedColors = {"primary":"action-button__primary_1yhdg","iconWrapper":"action-button__iconWrapper_1yhdg","loader":"action-button__loader_1yhdg","secondary":"action-button__secondary_1yhdg"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_8jqjb","iconWrapper":"action-button__iconWrapper_8jqjb","loader":"action-button__loader_8jqjb","secondary":"action-button__secondary_8jqjb"};
+var staticColors = {"primary":"action-button__primary_1r40b","iconWrapper":"action-button__iconWrapper_1r40b","loader":"action-button__loader_1r40b","secondary":"action-button__secondary_1r40b"};
 require('./static.css');
 
 var colorStyles = {

package/action-button/esm/default.css

@@ -41,26 +41,26 @@
     /* spinner */
     --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
     --action-button-spinner-default-color: var(--color-light-graphic-primary);
-} .action-button__primary_1lxc7 {
+} .action-button__primary_773eo {
     color: var(--action-button-primary-base-color)
-} .action-button__primary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__primary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
-    } .action-button__primary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-hover-color);
-    } .action-button__primary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-active-color);
-    } .action-button__primary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__primary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-primary-color);
-    } .action-button__secondary_1lxc7 {
+    } .action-button__secondary_773eo {
     color: var(--action-button-secondary-base-color)
-} .action-button__secondary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__secondary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
-    } .action-button__secondary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-hover-color);
-    } .action-button__secondary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-active-color);
-    } .action-button__secondary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__secondary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-default-color);
     }

package/action-button/esm/index.css

@@ -18,7 +18,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .action-button__component_12sb3 {
+} .action-button__component_1fh7e {
     position: relative;
     display: inline-flex;
     flex-flow: column nowrap;
@@ -42,18 +42,18 @@
     font-family: inherit;
     appearance: none;
     -webkit-tap-highlight-color: transparent
-} .action-button__component_12sb3.action-button__s_12sb3 {
+} .action-button__component_1fh7e.action-button__s_1fh7e {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-    } .action-button__disabled_12sb3 {
+    } .action-button__disabled_1fh7e {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
-} .action-button__loading_12sb3 {
+} .action-button__loading_1fh7e {
     cursor: auto;
     pointer-events: none;
-} .action-button__iconWrapper_12sb3 {
+} .action-button__iconWrapper_1fh7e {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -62,21 +62,21 @@
     border-radius: var(--border-radius-circle);
     transition: background-color 0.2s ease;
     line-height: 0
-} .action-button__iconWrapper_12sb3.action-button__s_12sb3 {
+} .action-button__iconWrapper_1fh7e.action-button__s_1fh7e {
         width: 48px;
         height: 48px;
-    } .action-button__label_12sb3 {
+    } .action-button__label_1fh7e {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-} .action-button__loader_12sb3 {
+} .action-button__loader_1fh7e {
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
-} .action-button__focused_12sb3 {
+} .action-button__focused_1fh7e {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/esm/inverted.css

@@ -43,26 +43,26 @@
     /* spinner */
     --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
     --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
-} .action-button__primary_1e6i6 {
+} .action-button__primary_1yhdg {
     color: var(--action-button-inverted-primary-base-color)
-} .action-button__primary_1e6i6 .action-button__iconWrapper_1e6i6 {
+} .action-button__primary_1yhdg .action-button__iconWrapper_1yhdg {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
-    } .action-button__primary_1e6i6:hover .action-button__iconWrapper_1e6i6 {
+    } .action-button__primary_1yhdg:hover .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-primary-hover-color);
-    } .action-button__primary_1e6i6:active .action-button__iconWrapper_1e6i6 {
+    } .action-button__primary_1yhdg:active .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-primary-active-color);
-    } .action-button__primary_1e6i6 .action-button__loader_1e6i6 {
+    } .action-button__primary_1yhdg .action-button__loader_1yhdg {
         color: var(--action-button-spinner-inverted-primary-color);
-    } .action-button__secondary_1e6i6 {
+    } .action-button__secondary_1yhdg {
     color: var(--action-button-inverted-secondary-base-color)
-} .action-button__secondary_1e6i6 .action-button__iconWrapper_1e6i6 {
+} .action-button__secondary_1yhdg .action-button__iconWrapper_1yhdg {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
-    } .action-button__secondary_1e6i6:hover .action-button__iconWrapper_1e6i6 {
+    } .action-button__secondary_1yhdg:hover .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-secondary-hover-color);
-    } .action-button__secondary_1e6i6:active .action-button__iconWrapper_1e6i6 {
+    } .action-button__secondary_1yhdg:active .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-secondary-active-color);
-    } .action-button__secondary_1e6i6 .action-button__loader_1e6i6 {
+    } .action-button__secondary_1yhdg .action-button__loader_1yhdg {
         color: var(--action-button-spinner-inverted-default-color);
     }

package/action-button/esm/static.css

@@ -33,18 +33,18 @@
     /* spinner */
     --action-button-spinner-static-primary-color: var(--color-static-graphic-light);
     --action-button-spinner-static-secondary-color: var(--color-static-graphic-dark);
-} .action-button__primary_8jqjb {
+} .action-button__primary_1r40b {
     color: var(--action-button-static-primary-base-color)
-} .action-button__primary_8jqjb .action-button__iconWrapper_8jqjb {
+} .action-button__primary_1r40b .action-button__iconWrapper_1r40b {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
-    } .action-button__primary_8jqjb .action-button__loader_8jqjb {
+    } .action-button__primary_1r40b .action-button__loader_1r40b {
         color: var(--action-button-spinner-static-primary-color);
-    } .action-button__secondary_8jqjb {
+    } .action-button__secondary_1r40b {
     color: var(--action-button-static-secondary-base-color)
-} .action-button__secondary_8jqjb .action-button__iconWrapper_8jqjb {
+} .action-button__secondary_1r40b .action-button__iconWrapper_1r40b {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
-    } .action-button__secondary_8jqjb .action-button__loader_8jqjb {
+    } .action-button__secondary_1r40b .action-button__loader_1r40b {
         color: var(--action-button-spinner-static-secondary-color);
     }

package/action-button/index.css

@@ -18,7 +18,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .action-button__component_12sb3 {
+} .action-button__component_1fh7e {
     position: relative;
     display: inline-flex;
     flex-flow: column nowrap;
@@ -42,18 +42,18 @@
     font-family: inherit;
     appearance: none;
     -webkit-tap-highlight-color: transparent
-} .action-button__component_12sb3.action-button__s_12sb3 {
+} .action-button__component_1fh7e.action-button__s_1fh7e {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-    } .action-button__disabled_12sb3 {
+    } .action-button__disabled_1fh7e {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
-} .action-button__loading_12sb3 {
+} .action-button__loading_1fh7e {
     cursor: auto;
     pointer-events: none;
-} .action-button__iconWrapper_12sb3 {
+} .action-button__iconWrapper_1fh7e {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -62,21 +62,21 @@
     border-radius: var(--border-radius-circle);
     transition: background-color 0.2s ease;
     line-height: 0
-} .action-button__iconWrapper_12sb3.action-button__s_12sb3 {
+} .action-button__iconWrapper_1fh7e.action-button__s_1fh7e {
         width: 48px;
         height: 48px;
-    } .action-button__label_12sb3 {
+    } .action-button__label_1fh7e {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-} .action-button__loader_12sb3 {
+} .action-button__loader_1fh7e {
     position: absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
-} .action-button__focused_12sb3 {
+} .action-button__focused_1fh7e {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/inverted.css

@@ -43,26 +43,26 @@
     /* spinner */
     --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
     --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
-} .action-button__primary_1e6i6 {
+} .action-button__primary_1yhdg {
     color: var(--action-button-inverted-primary-base-color)
-} .action-button__primary_1e6i6 .action-button__iconWrapper_1e6i6 {
+} .action-button__primary_1yhdg .action-button__iconWrapper_1yhdg {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
-    } .action-button__primary_1e6i6:hover .action-button__iconWrapper_1e6i6 {
+    } .action-button__primary_1yhdg:hover .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-primary-hover-color);
-    } .action-button__primary_1e6i6:active .action-button__iconWrapper_1e6i6 {
+    } .action-button__primary_1yhdg:active .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-primary-active-color);
-    } .action-button__primary_1e6i6 .action-button__loader_1e6i6 {
+    } .action-button__primary_1yhdg .action-button__loader_1yhdg {
         color: var(--action-button-spinner-inverted-primary-color);
-    } .action-button__secondary_1e6i6 {
+    } .action-button__secondary_1yhdg {
     color: var(--action-button-inverted-secondary-base-color)
-} .action-button__secondary_1e6i6 .action-button__iconWrapper_1e6i6 {
+} .action-button__secondary_1yhdg .action-button__iconWrapper_1yhdg {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
-    } .action-button__secondary_1e6i6:hover .action-button__iconWrapper_1e6i6 {
+    } .action-button__secondary_1yhdg:hover .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-secondary-hover-color);
-    } .action-button__secondary_1e6i6:active .action-button__iconWrapper_1e6i6 {
+    } .action-button__secondary_1yhdg:active .action-button__iconWrapper_1yhdg {
         background-color: var(--action-button-inverted-secondary-active-color);
-    } .action-button__secondary_1e6i6 .action-button__loader_1e6i6 {
+    } .action-button__secondary_1yhdg .action-button__loader_1yhdg {
         color: var(--action-button-spinner-inverted-default-color);
     }

package/action-button/modern/Component.js

@@ -6,16 +6,16 @@ import { Spinner } from '../../spinner/modern';
 import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-const defaultColors = {"primary":"action-button__primary_1lxc7","iconWrapper":"action-button__iconWrapper_1lxc7","loader":"action-button__loader_1lxc7","secondary":"action-button__secondary_1lxc7"};
+const defaultColors = {"primary":"action-button__primary_773eo","iconWrapper":"action-button__iconWrapper_773eo","loader":"action-button__loader_773eo","secondary":"action-button__secondary_773eo"};
 require('./default.css');
 
-const styles = {"component":"action-button__component_12sb3","s":"action-button__s_12sb3","disabled":"action-button__disabled_12sb3","loading":"action-button__loading_12sb3","iconWrapper":"action-button__iconWrapper_12sb3","label":"action-button__label_12sb3","loader":"action-button__loader_12sb3","focused":"action-button__focused_12sb3"};
+const styles = {"component":"action-button__component_1fh7e","s":"action-button__s_1fh7e","disabled":"action-button__disabled_1fh7e","loading":"action-button__loading_1fh7e","iconWrapper":"action-button__iconWrapper_1fh7e","label":"action-button__label_1fh7e","loader":"action-button__loader_1fh7e","focused":"action-button__focused_1fh7e"};
 require('./index.css');
 
-const invertedColors = {"primary":"action-button__primary_1e6i6","iconWrapper":"action-button__iconWrapper_1e6i6","loader":"action-button__loader_1e6i6","secondary":"action-button__secondary_1e6i6"};
+const invertedColors = {"primary":"action-button__primary_1yhdg","iconWrapper":"action-button__iconWrapper_1yhdg","loader":"action-button__loader_1yhdg","secondary":"action-button__secondary_1yhdg"};
 require('./inverted.css');
 
-const staticColors = {"primary":"action-button__primary_8jqjb","iconWrapper":"action-button__iconWrapper_8jqjb","loader":"action-button__loader_8jqjb","secondary":"action-button__secondary_8jqjb"};
+const staticColors = {"primary":"action-button__primary_1r40b","iconWrapper":"action-button__iconWrapper_1r40b","loader":"action-button__loader_1r40b","secondary":"action-button__secondary_1r40b"};
 require('./static.css');
 
 const colorStyles = {

package/action-button/modern/default.css

@@ -41,26 +41,26 @@
     /* spinner */
     --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
     --action-button-spinner-default-color: var(--color-light-graphic-primary);
-} .action-button__primary_1lxc7 {
+} .action-button__primary_773eo {
     color: var(--action-button-primary-base-color)
-} .action-button__primary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__primary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
-    } .action-button__primary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-hover-color);
-    } .action-button__primary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__primary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-primary-active-color);
-    } .action-button__primary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__primary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-primary-color);
-    } .action-button__secondary_1lxc7 {
+    } .action-button__secondary_773eo {
     color: var(--action-button-secondary-base-color)
-} .action-button__secondary_1lxc7 .action-button__iconWrapper_1lxc7 {
+} .action-button__secondary_773eo .action-button__iconWrapper_773eo {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
-    } .action-button__secondary_1lxc7:hover .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:hover .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-hover-color);
-    } .action-button__secondary_1lxc7:active .action-button__iconWrapper_1lxc7 {
+    } .action-button__secondary_773eo:active .action-button__iconWrapper_773eo {
         background-color: var(--action-button-secondary-active-color);
-    } .action-button__secondary_1lxc7 .action-button__loader_1lxc7 {
+    } .action-button__secondary_773eo .action-button__loader_773eo {
         color: var(--action-button-spinner-default-color);
     }