@alfalab/core-components 40.2.0 → 41.0.1-beta.0

package/bottom-sheet/types.d.ts

@@ -0,0 +1,215 @@
+/// <reference types="react-transition-group" />
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "../base-modal";
+import { NavigationBarProps } from "../navigation-bar";
+type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: number[];
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается после притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+};
+export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/types.js

@@ -0,0 +1 @@
+

package/bottom-sheet/utils.d.ts

@@ -0,0 +1,8 @@
+declare const TIMEOUT = 500;
+declare const SWIPE_VELOCITY = 0.4;
+declare const MARKER_HEIGHT = 24;
+declare const HEADER_OFFSET = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const SCROLL_OFFSET = 1;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };

package/bottom-sheet/utils.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TIMEOUT = 500;
+var SWIPE_VELOCITY = 0.4;
+var MARKER_HEIGHT = 24;
+/* Верхний отступ шторки, если она открыта на максимальную высоту */
+var HEADER_OFFSET = 24;
+var CLOSE_OFFSET = 0.2;
+var SCROLL_OFFSET = 1;
+var convertPercentToNumber = function (value, fullHeight) {
+    var maxHeight = fullHeight - HEADER_OFFSET;
+    if (typeof value === 'string') {
+        var percent = parseFloat(value) / 100;
+        if (percent < 0) {
+            return Math.min(maxHeight, fullHeight + fullHeight * percent);
+        }
+        return Math.min(maxHeight, fullHeight * percent);
+    }
+    if (value < 0) {
+        return Math.max(0, fullHeight + value);
+    }
+    return Math.min(maxHeight, value);
+};
+
+exports.CLOSE_OFFSET = CLOSE_OFFSET;
+exports.HEADER_OFFSET = HEADER_OFFSET;
+exports.MARKER_HEIGHT = MARKER_HEIGHT;
+exports.SCROLL_OFFSET = SCROLL_OFFSET;
+exports.SWIPE_VELOCITY = SWIPE_VELOCITY;
+exports.TIMEOUT = TIMEOUT;
+exports.convertPercentToNumber = convertPercentToNumber;

package/button/Component.js

@@ -13,13 +13,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"button__component_uj4wz","focused":"button__focused_uj4wz","loading":"button__loading_uj4wz","text":"button__text_uj4wz","addons":"button__addons_uj4wz","stretchText":"button__stretchText_uj4wz","loader":"button__loader_uj4wz","xxs":"button__xxs_uj4wz","iconOnly":"button__iconOnly_uj4wz","xs":"button__xs_uj4wz","s":"button__s_uj4wz","m":"button__m_uj4wz","l":"button__l_uj4wz","xl":"button__xl_uj4wz","withRightAddons":"button__withRightAddons_uj4wz","ghost":"button__ghost_uj4wz","withLeftAddons":"button__withLeftAddons_uj4wz","link":"button__link_uj4wz","block":"button__block_uj4wz","nowrap":"button__nowrap_uj4wz"};
+var styles = {"component":"button__component_41vkp","focused":"button__focused_41vkp","loading":"button__loading_41vkp","text":"button__text_41vkp","addons":"button__addons_41vkp","stretchText":"button__stretchText_41vkp","loader":"button__loader_41vkp","xxs":"button__xxs_41vkp","iconOnly":"button__iconOnly_41vkp","xs":"button__xs_41vkp","s":"button__s_41vkp","m":"button__m_41vkp","l":"button__l_41vkp","xl":"button__xl_41vkp","withRightAddons":"button__withRightAddons_41vkp","ghost":"button__ghost_41vkp","withLeftAddons":"button__withLeftAddons_41vkp","link":"button__link_41vkp","block":"button__block_41vkp","nowrap":"button__nowrap_41vkp"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_l6w8h","loader":"button__loader_l6w8h","primary":"button__primary_l6w8h","secondary":"button__secondary_l6w8h","outlined":"button__outlined_l6w8h","tertiary":"button__tertiary_l6w8h","filled":"button__filled_l6w8h","transparent":"button__transparent_l6w8h","link":"button__link_l6w8h","ghost":"button__ghost_l6w8h","component":"button__component_l6w8h","loading":"button__loading_l6w8h"};
+var defaultColors = {"accent":"button__accent_16pjx","loader":"button__loader_16pjx","primary":"button__primary_16pjx","secondary":"button__secondary_16pjx","outlined":"button__outlined_16pjx","tertiary":"button__tertiary_16pjx","filled":"button__filled_16pjx","transparent":"button__transparent_16pjx","link":"button__link_16pjx","ghost":"button__ghost_16pjx","component":"button__component_16pjx","loading":"button__loading_16pjx"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_9wuq2","loader":"button__loader_9wuq2","primary":"button__primary_9wuq2","secondary":"button__secondary_9wuq2","outlined":"button__outlined_9wuq2","tertiary":"button__tertiary_9wuq2","filled":"button__filled_9wuq2","transparent":"button__transparent_9wuq2","link":"button__link_9wuq2","ghost":"button__ghost_9wuq2","component":"button__component_9wuq2","loading":"button__loading_9wuq2"};
+var invertedColors = {"accent":"button__accent_vfifd","loader":"button__loader_vfifd","primary":"button__primary_vfifd","secondary":"button__secondary_vfifd","outlined":"button__outlined_vfifd","tertiary":"button__tertiary_vfifd","filled":"button__filled_vfifd","transparent":"button__transparent_vfifd","link":"button__link_vfifd","ghost":"button__ghost_vfifd","component":"button__component_vfifd","loading":"button__loading_vfifd"};
 require('./inverted.css');
 
 var colorStyles = {

package/button/default.css

@@ -112,165 +112,165 @@
     --button-spinner-static-color: var(--color-static-graphic-light);
     --button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
     --button-spinner-default-color: var(--color-light-graphic-primary);
-} .button__accent_l6w8h {
+} .button__accent_16pjx {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_l6w8h:hover {
+} .button__accent_16pjx:hover {
         background-color: var(--button-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_l6w8h:hover {
+    } @media (hover: none) { .button__accent_16pjx:hover {
             background-color: var(--button-accent-base-bg-color)
     }
-        } .button__accent_l6w8h:active {
+        } .button__accent_16pjx:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_l6w8h > .button__loader_l6w8h {
+    } .button__accent_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-static-color);
-    } .button__primary_l6w8h {
+    } .button__primary_16pjx {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_l6w8h:hover {
+} .button__primary_16pjx:hover {
         background-color: var(--button-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_l6w8h:hover {
+    } @media (hover: none) { .button__primary_16pjx:hover {
             background-color: var(--button-primary-base-bg-color)
     }
-        } .button__primary_l6w8h:active {
+        } .button__primary_16pjx:active {
         background-color: var(--button-primary-active-bg-color);
-    } .button__primary_l6w8h > .button__loader_l6w8h {
+    } .button__primary_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-primary-color);
-    } .button__secondary_l6w8h {
+    } .button__secondary_16pjx {
     color: var(--button-secondary-color);
     background-color: var(--button-secondary-base-bg-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_l6w8h:hover {
+} .button__secondary_16pjx:hover {
         background-color: var(--button-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_l6w8h:hover {
+    } @media (hover: none) { .button__secondary_16pjx:hover {
             background-color: var(--button-secondary-base-bg-color)
     }
-        } .button__secondary_l6w8h:active {
+        } .button__secondary_16pjx:active {
         background-color: var(--button-secondary-active-bg-color);
-    } .button__secondary_l6w8h > .button__loader_l6w8h {
+    } .button__secondary_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-default-color);
-    } .button__outlined_l6w8h {
+    } .button__outlined_16pjx {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
-} .button__outlined_l6w8h:hover {
+} .button__outlined_16pjx:hover {
         background-color: var(--button-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_l6w8h:hover {
+    } @media (hover: none) { .button__outlined_16pjx:hover {
             background-color: var(--button-outlined-base-bg-color)
     }
-        } .button__outlined_l6w8h:active {
+        } .button__outlined_16pjx:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_l6w8h {
+    } .button__tertiary_16pjx {
     color: var(--button-tertiary-color);
     background-color: var(--button-tertiary-base-bg-color);
     border: 1px solid var(--button-tertiary-base-border-color)
-} .button__tertiary_l6w8h:hover {
+} .button__tertiary_16pjx:hover {
         background-color: var(--button-tertiary-hover-bg-color);
         border-color: var(--button-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_l6w8h:hover {
+    } @media (hover: none) { .button__tertiary_16pjx:hover {
             background-color: var(--button-tertiary-base-bg-color);
             border-color: var(--button-tertiary-base-border-color)
     }
-        } .button__tertiary_l6w8h:active {
+        } .button__tertiary_16pjx:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_l6w8h > .button__loader_l6w8h {
+    } .button__tertiary_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-default-color);
-    } .button__filled_l6w8h {
+    } .button__filled_16pjx {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
-} .button__filled_l6w8h:hover {
+} .button__filled_16pjx:hover {
         background-color: var(--color-light-bg-quaternary-shade-7)
-    } @media (hover: none) { .button__filled_l6w8h:hover {
+    } @media (hover: none) { .button__filled_16pjx:hover {
             background-color: var(--color-light-bg-quaternary)
     }
-        } .button__filled_l6w8h:active {
+        } .button__filled_16pjx:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_l6w8h {
+    } .button__transparent_16pjx {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
-} .button__transparent_l6w8h:hover {
+} .button__transparent_16pjx:hover {
         background-color: var(--color-light-bg-primary-inverted-alpha-20)
-    } @media (hover: none) { .button__transparent_l6w8h:hover {
+    } @media (hover: none) { .button__transparent_16pjx:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-10)
     }
-        } .button__transparent_l6w8h:active {
+        } .button__transparent_16pjx:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_l6w8h {
+    } .button__link_16pjx {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_l6w8h:hover {
+} .button__link_16pjx:hover {
         background-color: var(--button-link-hover-bg-color)
-    } @media (hover: none) { .button__link_l6w8h:hover {
+    } @media (hover: none) { .button__link_16pjx:hover {
             background-color: transparent
     }
-        } .button__link_l6w8h:active {
+        } .button__link_16pjx:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_l6w8h > .button__loader_l6w8h {
+    } .button__link_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-default-color);
-    } .button__ghost_l6w8h {
+    } .button__ghost_16pjx {
     color: var(--button-ghost-base-color)
-} .button__ghost_l6w8h:hover {
+} .button__ghost_16pjx:hover {
         color: var(--button-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_l6w8h:hover {
+    } @media (hover: none) { .button__ghost_16pjx:hover {
             color: var(--button-ghost-base-color)
     }
-        } .button__ghost_l6w8h:active {
+        } .button__ghost_16pjx:active {
         color: var(--button-ghost-active-color);
-    } .button__ghost_l6w8h > .button__loader_l6w8h {
+    } .button__ghost_16pjx > .button__loader_16pjx {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_l6w8h[disabled].button__accent_l6w8h {
+    } /* Disabled */ .button__component_16pjx[disabled].button__accent_16pjx {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_l6w8h[disabled].button__accent_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__accent_16pjx.button__loading_16pjx {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_l6w8h[disabled].button__primary_l6w8h {
+        } .button__component_16pjx[disabled].button__primary_16pjx {
         color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color)
-    } .button__component_l6w8h[disabled].button__primary_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__primary_16pjx.button__loading_16pjx {
             background-color: var(--button-primary-base-bg-color);
-        } .button__component_l6w8h[disabled].button__secondary_l6w8h {
+        } .button__component_16pjx[disabled].button__secondary_16pjx {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_l6w8h[disabled].button__secondary_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__secondary_16pjx.button__loading_16pjx {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_l6w8h[disabled].button__outlined_l6w8h {
+        } .button__component_16pjx[disabled].button__outlined_16pjx {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_l6w8h[disabled].button__outlined_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__outlined_16pjx.button__loading_16pjx {
             color: var(--button-outlined-color);
-        } .button__component_l6w8h[disabled].button__tertiary_l6w8h {
+        } .button__component_16pjx[disabled].button__tertiary_16pjx {
         color: var(--button-tertiary-disabled-color);
         background-color: var(--button-tertiary-disabled-bg-color);
         border-color: var(--button-tertiary-disabled-border-color)
-    } .button__component_l6w8h[disabled].button__tertiary_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__tertiary_16pjx.button__loading_16pjx {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_l6w8h[disabled].button__filled_l6w8h {
+        } .button__component_16pjx[disabled].button__filled_16pjx {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_l6w8h[disabled].button__filled_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__filled_16pjx.button__loading_16pjx {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_l6w8h[disabled].button__transparent_l6w8h {
+        } .button__component_16pjx[disabled].button__transparent_16pjx {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_l6w8h[disabled].button__transparent_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__transparent_16pjx.button__loading_16pjx {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_l6w8h[disabled].button__link_l6w8h {
+        } .button__component_16pjx[disabled].button__link_16pjx {
         color: var(--button-link-disabled-color);
         background-color: transparent
-    } .button__component_l6w8h[disabled].button__link_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__link_16pjx.button__loading_16pjx {
             color: var(--button-link-base-color);
-        } .button__component_l6w8h[disabled].button__ghost_l6w8h {
+        } .button__component_16pjx[disabled].button__ghost_16pjx {
         color: var(--button-ghost-disabled-color)
-    } .button__component_l6w8h[disabled].button__ghost_l6w8h.button__loading_l6w8h {
+    } .button__component_16pjx[disabled].button__ghost_16pjx.button__loading_16pjx {
             color: var(--button-ghost-base-color);
         }

package/button/esm/Component.js

@@ -5,13 +5,13 @@ import cn from 'classnames';
 import { Spinner } from '../../spinner/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"button__component_uj4wz","focused":"button__focused_uj4wz","loading":"button__loading_uj4wz","text":"button__text_uj4wz","addons":"button__addons_uj4wz","stretchText":"button__stretchText_uj4wz","loader":"button__loader_uj4wz","xxs":"button__xxs_uj4wz","iconOnly":"button__iconOnly_uj4wz","xs":"button__xs_uj4wz","s":"button__s_uj4wz","m":"button__m_uj4wz","l":"button__l_uj4wz","xl":"button__xl_uj4wz","withRightAddons":"button__withRightAddons_uj4wz","ghost":"button__ghost_uj4wz","withLeftAddons":"button__withLeftAddons_uj4wz","link":"button__link_uj4wz","block":"button__block_uj4wz","nowrap":"button__nowrap_uj4wz"};
+var styles = {"component":"button__component_41vkp","focused":"button__focused_41vkp","loading":"button__loading_41vkp","text":"button__text_41vkp","addons":"button__addons_41vkp","stretchText":"button__stretchText_41vkp","loader":"button__loader_41vkp","xxs":"button__xxs_41vkp","iconOnly":"button__iconOnly_41vkp","xs":"button__xs_41vkp","s":"button__s_41vkp","m":"button__m_41vkp","l":"button__l_41vkp","xl":"button__xl_41vkp","withRightAddons":"button__withRightAddons_41vkp","ghost":"button__ghost_41vkp","withLeftAddons":"button__withLeftAddons_41vkp","link":"button__link_41vkp","block":"button__block_41vkp","nowrap":"button__nowrap_41vkp"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_l6w8h","loader":"button__loader_l6w8h","primary":"button__primary_l6w8h","secondary":"button__secondary_l6w8h","outlined":"button__outlined_l6w8h","tertiary":"button__tertiary_l6w8h","filled":"button__filled_l6w8h","transparent":"button__transparent_l6w8h","link":"button__link_l6w8h","ghost":"button__ghost_l6w8h","component":"button__component_l6w8h","loading":"button__loading_l6w8h"};
+var defaultColors = {"accent":"button__accent_16pjx","loader":"button__loader_16pjx","primary":"button__primary_16pjx","secondary":"button__secondary_16pjx","outlined":"button__outlined_16pjx","tertiary":"button__tertiary_16pjx","filled":"button__filled_16pjx","transparent":"button__transparent_16pjx","link":"button__link_16pjx","ghost":"button__ghost_16pjx","component":"button__component_16pjx","loading":"button__loading_16pjx"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_9wuq2","loader":"button__loader_9wuq2","primary":"button__primary_9wuq2","secondary":"button__secondary_9wuq2","outlined":"button__outlined_9wuq2","tertiary":"button__tertiary_9wuq2","filled":"button__filled_9wuq2","transparent":"button__transparent_9wuq2","link":"button__link_9wuq2","ghost":"button__ghost_9wuq2","component":"button__component_9wuq2","loading":"button__loading_9wuq2"};
+var invertedColors = {"accent":"button__accent_vfifd","loader":"button__loader_vfifd","primary":"button__primary_vfifd","secondary":"button__secondary_vfifd","outlined":"button__outlined_vfifd","tertiary":"button__tertiary_vfifd","filled":"button__filled_vfifd","transparent":"button__transparent_vfifd","link":"button__link_vfifd","ghost":"button__ghost_vfifd","component":"button__component_vfifd","loading":"button__loading_vfifd"};
 require('./inverted.css');
 
 var colorStyles = {