@alfalab/core-components 40.1.0 → 41.1.0-beta.0

package/bottom-sheet/modern/index.css

@@ -1,8 +1,29 @@
 /* hash: rdtvt */
 :root {
 } /* deprecated */ :root {
+    --color-light-bg-accent: #ef3124;
+    --color-light-bg-attention-muted: #f7ebd9;
+    --color-light-bg-info: #d6e8fc;
+    --color-light-bg-negative-muted: #fbe8e7;
+    --color-light-bg-positive-muted: #e7f6ef;
     --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #121212;
+    --color-light-bg-quaternary: #dcdcdd;
+    --color-light-bg-quaternary-inverted: #3a3a3c;
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-bg-secondary-inverted: #202022;
+    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-bg-tertiary-inverted: #2c2c2e;
     --color-light-graphic-quaternary: #dcdcdd;
+    --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
+    --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
+    --color-light-specialbg-primary-grouped: #f3f4f5;
+    --color-light-specialbg-secondary-grouped: #fff;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
+    --color-light-specialbg-secondary-transparent-inverted: rgba(255, 255, 255, 0.06);
+    --color-light-specialbg-tertiary-grouped: #f3f4f5;
+    --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
+    --color-light-specialbg-tertiary-transparent-inverted: rgba(255, 255, 255, 0.11);
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -22,32 +43,39 @@
 } :root {
 } :root {
 } :root {
-    --bottom-sheet-in-transition: 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
-    --bottom-sheet-out-transition: 0.3s ease;
-} .bottom-sheet__modal_1kgjv {
+    --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
+    --bottom-sheet-out-transition: transform 0.3s ease;
+} .bottom-sheet__modal_sul96 {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
-} .bottom-sheet__component_1kgjv {
+    pointer-events: none;
+} .bottom-sheet__wrapper_sul96 {
+    transform: translateY(100%);
+    overflow: hidden;
+    pointer-events: none;
+    border-top-right-radius: var(--border-radius-xl);
+    border-top-left-radius: var(--border-radius-xl);
+} .bottom-sheet__component_sul96 {
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
-    border-top-right-radius: var(--border-radius-xl);
-    border-top-left-radius: var(--border-radius-xl);
-    background: var(--color-light-bg-primary);
-    transform: translateY(100%);
-} .bottom-sheet__withTransition_1kgjv {
+    border-radius: inherit;
+    background-color: var(--color-light-bg-primary);
+    pointer-events: all;
+} .bottom-sheet__withTransition_sul96 {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1kgjv {
+} .bottom-sheet__scrollableContainer_sul96 {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
-} .bottom-sheet__marker_1kgjv {
+    background-color: inherit;
+} .bottom-sheet__marker_sul96 {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -57,7 +85,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_1kgjv {
+} .bottom-sheet__content_sul96 {
     position: relative;
     z-index: 0;
     display: flex;
@@ -65,23 +93,74 @@
     flex: 1;
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
-    background-color: var(--color-light-bg-primary);
-} .bottom-sheet__noHeader_1kgjv {
+    background-color: inherit;
+} .bottom-sheet__noHeader_sul96 {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_1kgjv {
+} .bottom-sheet__noFooter_sul96 {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_1kgjv {
+} .bottom-sheet__scrollLocked_sul96 {
     overflow: hidden;
-} .bottom-sheet__appear_1kgjv .bottom-sheet__component_1kgjv, .bottom-sheet__enter_1kgjv .bottom-sheet__component_1kgjv {
+} .bottom-sheet__hiddenScrollbar_sul96 {
+    scrollbar-width: none
+} .bottom-sheet__hiddenScrollbar_sul96::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    } .bottom-sheet__disabledPointerEvents_sul96 {
+    pointer-events: none;
+} .bottom-sheet__appear_sul96 .bottom-sheet__wrapper_sul96, .bottom-sheet__enter_sul96 .bottom-sheet__wrapper_sul96 {
         transition: none;
-    } .bottom-sheet__appearActive_1kgjv .bottom-sheet__component_1kgjv, .bottom-sheet__enterActive_1kgjv .bottom-sheet__component_1kgjv {
+    } .bottom-sheet__appearActive_sul96 .bottom-sheet__wrapper_sul96, .bottom-sheet__enterActive_sul96 .bottom-sheet__wrapper_sul96 {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1kgjv .bottom-sheet__component_1kgjv, .bottom-sheet__appearDone_1kgjv .bottom-sheet__component_1kgjv {
+    } .bottom-sheet__enterDone_sul96 .bottom-sheet__wrapper_sul96, .bottom-sheet__appearDone_sul96 .bottom-sheet__wrapper_sul96 {
         transform: translateY(0);
-    } .bottom-sheet__exit_1kgjv .bottom-sheet__component_1kgjv {
+    } .bottom-sheet__exit_sul96 .bottom-sheet__wrapper_sul96 {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1kgjv .bottom-sheet__component_1kgjv {
+    } .bottom-sheet__exitActive_sul96 .bottom-sheet__wrapper_sul96 {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    }
+    } .bottom-sheet__background-accent_sul96 {
+            background-color: var(--color-light-bg-accent);
+        } .bottom-sheet__background-info_sul96 {
+            background-color: var(--color-light-bg-info);
+        } .bottom-sheet__background-attention-muted_sul96 {
+            background-color: var(--color-light-bg-attention-muted);
+        } .bottom-sheet__background-positive-muted_sul96 {
+            background-color: var(--color-light-bg-positive-muted);
+        } .bottom-sheet__background-negative-muted_sul96 {
+            background-color: var(--color-light-bg-negative-muted);
+        } .bottom-sheet__background-primary_sul96 {
+            background-color: var(--color-light-bg-primary);
+        } .bottom-sheet__background-primary-inverted_sul96 {
+            background-color: var(--color-light-bg-primary-inverted);
+        } .bottom-sheet__background-secondary_sul96 {
+            background-color: var(--color-light-bg-secondary);
+        } .bottom-sheet__background-secondary-inverted_sul96 {
+            background-color: var(--color-light-bg-secondary-inverted);
+        } .bottom-sheet__background-tertiary_sul96 {
+            background-color: var(--color-light-bg-tertiary);
+        } .bottom-sheet__background-tertiary-inverted_sul96 {
+            background-color: var(--color-light-bg-tertiary-inverted);
+        } .bottom-sheet__background-quaternary_sul96 {
+            background-color: var(--color-light-bg-quaternary);
+        } .bottom-sheet__background-quaternary-inverted_sul96 {
+            background-color: var(--color-light-bg-quaternary-inverted);
+        } .bottom-sheet__background-specialbg-component_sul96 {
+            background-color: var(--color-light-specialbg-component);
+        } .bottom-sheet__background-specialbg-component-inverted_sul96 {
+            background-color: var(--color-light-specialbg-component-inverted);
+        } .bottom-sheet__background-specialbg-primary-grouped_sul96 {
+            background-color: var(--color-light-specialbg-primary-grouped);
+        } .bottom-sheet__background-specialbg-secondary-grouped_sul96 {
+            background-color: var(--color-light-specialbg-secondary-grouped);
+        } .bottom-sheet__background-specialbg-tertiary-grouped_sul96 {
+            background-color: var(--color-light-specialbg-tertiary-grouped);
+        } .bottom-sheet__background-specialbg-secondary-transparent_sul96 {
+            background-color: var(--color-light-specialbg-secondary-transparent);
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_sul96 {
+            background-color: var(--color-light-specialbg-secondary-transparent-inverted);
+        } .bottom-sheet__background-specialbg-tertiary-transparent_sul96 {
+            background-color: var(--color-light-specialbg-tertiary-transparent);
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_sul96 {
+            background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
+        }

package/bottom-sheet/modern/index.d.ts

@@ -1 +1,3 @@
-export * from "./component-ea84b50a";
+export * from "./component";
+export type { BottomSheetProps, BottomSheetTitleAlign } from "./types";
+export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils";

package/bottom-sheet/modern/index.js

@@ -1,4 +1,5 @@
-export { B as BottomSheet, C as CLOSE_OFFSET, H as HEADER_OFFSET } from './component-ea84b50a.js';
+export { BottomSheet } from './component.js';
+export { CLOSE_OFFSET, HEADER_OFFSET } from './utils.js';
 import 'react';
 import 'react-div-100vh';
 import 'react-merge-refs';
@@ -6,6 +7,7 @@ import 'react-swipeable';
 import 'classnames';
 import '../../base-modal/modern';
 import './components/footer/Component.js';
+import './components/header/Component.js';
 import '../../navigation-bar/modern';
 import '../../backdrop/modern';
 import './components/swipeable-backdrop/Component.js';

package/bottom-sheet/modern/{component-ea84b50a.d.ts → types.d.ts}

@@ -1,14 +1,9 @@
 /// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from "react";
-import { FC, HTMLAttributes, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "../../navigation-bar";
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../../base-modal";
-type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
-declare const Header: FC<HeaderProps>;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-declare const isClient: () => boolean;
+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 = {
     /**
@@ -57,6 +52,10 @@ type BottomSheetProps = {
      * Дополнительный класс
      */
     containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
     /**
      * Дополнительный класс шапки
      */
@@ -171,6 +170,35 @@ type BottomSheetProps = {
      * Реф на контейнер, в котором происходит скролл
      */
     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;
     /**
      * Обработчик закрытия
      */
@@ -179,8 +207,9 @@ type BottomSheetProps = {
      * Обработчик нажатия на стрелку назад
      */
     onBack?: () => void;
+    /**
+     * Вызывается после притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
 };
-declare const HEADER_OFFSET = 24;
-declare const CLOSE_OFFSET = 0.2;
-declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };
+export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/modern/types.js

@@ -0,0 +1 @@
+

package/bottom-sheet/modern/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/modern/utils.js

@@ -0,0 +1,23 @@
+const TIMEOUT = 500;
+const SWIPE_VELOCITY = 0.4;
+const MARKER_HEIGHT = 24;
+/* Верхний отступ шторки, если она открыта на максимальную высоту */
+const HEADER_OFFSET = 24;
+const CLOSE_OFFSET = 0.2;
+const SCROLL_OFFSET = 1;
+const convertPercentToNumber = (value, fullHeight) => {
+    const maxHeight = fullHeight - HEADER_OFFSET;
+    if (typeof value === 'string') {
+        const 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);
+};
+
+export { CLOSE_OFFSET, HEADER_OFFSET, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, TIMEOUT, convertPercentToNumber };

package/bottom-sheet/{component-594613f8.d.ts → types.d.ts}

@@ -1,14 +1,9 @@
 /// <reference types="react-transition-group" />
-/// <reference types="react" />
-import React from "react";
-import { FC, HTMLAttributes, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "../navigation-bar";
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "../base-modal";
-type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
-declare const Header: FC<HeaderProps>;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-declare const isClient: () => boolean;
+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 = {
     /**
@@ -57,6 +52,10 @@ type BottomSheetProps = {
      * Дополнительный класс
      */
     containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
     /**
      * Дополнительный класс шапки
      */
@@ -171,6 +170,35 @@ type BottomSheetProps = {
      * Реф на контейнер, в котором происходит скролл
      */
     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;
     /**
      * Обработчик закрытия
      */
@@ -179,8 +207,9 @@ type BottomSheetProps = {
      * Обработчик нажатия на стрелку назад
      */
     onBack?: () => void;
+    /**
+     * Вызывается после притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
 };
-declare const HEADER_OFFSET = 24;
-declare const CLOSE_OFFSET = 0.2;
-declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };
+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_1qrlh","focused":"button__focused_1qrlh","loading":"button__loading_1qrlh","text":"button__text_1qrlh","addons":"button__addons_1qrlh","stretchText":"button__stretchText_1qrlh","loader":"button__loader_1qrlh","xxs":"button__xxs_1qrlh","iconOnly":"button__iconOnly_1qrlh","xs":"button__xs_1qrlh","s":"button__s_1qrlh","m":"button__m_1qrlh","l":"button__l_1qrlh","xl":"button__xl_1qrlh","withRightAddons":"button__withRightAddons_1qrlh","ghost":"button__ghost_1qrlh","withLeftAddons":"button__withLeftAddons_1qrlh","link":"button__link_1qrlh","block":"button__block_1qrlh","nowrap":"button__nowrap_1qrlh"};
+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"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_1h940","loader":"button__loader_1h940","primary":"button__primary_1h940","secondary":"button__secondary_1h940","outlined":"button__outlined_1h940","tertiary":"button__tertiary_1h940","filled":"button__filled_1h940","transparent":"button__transparent_1h940","link":"button__link_1h940","ghost":"button__ghost_1h940","component":"button__component_1h940","loading":"button__loading_1h940"};
+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"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_15z2i","loader":"button__loader_15z2i","primary":"button__primary_15z2i","secondary":"button__secondary_15z2i","outlined":"button__outlined_15z2i","tertiary":"button__tertiary_15z2i","filled":"button__filled_15z2i","transparent":"button__transparent_15z2i","link":"button__link_15z2i","ghost":"button__ghost_15z2i","component":"button__component_15z2i","loading":"button__loading_15z2i"};
+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"};
 require('./inverted.css');
 
 var colorStyles = {