@alfalab/core-components 39.2.1 → 39.3.0

package/button/inverted.css

@@ -102,163 +102,163 @@
     /* loader */
     --button-spinner-static-color: var(--color-static-graphic-light);
     --button-spinner-inverted-color: var(--color-light-graphic-primary-inverted);
-} .button__accent_n1o9d {
+} .button__accent_1fxwf {
     color: var(--button-inverted-accent-color);
     background-color: var(--button-inverted-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_n1o9d:hover {
+} .button__accent_1fxwf:hover {
         background-color: var(--button-inverted-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_n1o9d:hover {
+    } @media (hover: none) { .button__accent_1fxwf:hover {
             background-color: var(--button-inverted-accent-base-bg-color)
     }
-        } .button__accent_n1o9d:active {
+        } .button__accent_1fxwf:active {
         background-color: var(--button-inverted-accent-active-bg-color);
-    } .button__accent_n1o9d > .button__loader_n1o9d {
+    } .button__accent_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-static-color);
-    } .button__primary_n1o9d {
+    } .button__primary_1fxwf {
     color: var(--button-inverted-primary-color);
     background-color: var(--button-inverted-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_n1o9d:hover {
+} .button__primary_1fxwf:hover {
         background-color: var(--button-inverted-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_n1o9d:hover {
+    } @media (hover: none) { .button__primary_1fxwf:hover {
             background-color: var(--button-inverted-primary-base-bg-color)
     }
-        } .button__primary_n1o9d:active {
+        } .button__primary_1fxwf:active {
         background-color: var(--button-inverted-primary-active-bg-color);
-    } .button__primary_n1o9d > .button__loader_n1o9d {
+    } .button__primary_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-static-color);
-    } .button__secondary_n1o9d {
+    } .button__secondary_1fxwf {
     color: var(--button-inverted-secondary-color);
     background-color: var(--button-inverted-secondary-base-bg-color);
     border: 1px solid var(--button-inverted-secondary-base-border-color)
-} .button__secondary_n1o9d:hover {
+} .button__secondary_1fxwf:hover {
         background-color: var(--button-inverted-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_n1o9d:hover {
+    } @media (hover: none) { .button__secondary_1fxwf:hover {
             background-color: var(--button-inverted-secondary-base-bg-color)
     }
-        } .button__secondary_n1o9d:active {
+        } .button__secondary_1fxwf:active {
         background-color: var(--button-inverted-secondary-active-bg-color);
-    } .button__secondary_n1o9d > .button__loader_n1o9d {
+    } .button__secondary_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-inverted-color);
-    } .button__outlined_n1o9d {
+    } .button__outlined_1fxwf {
     color: var(--button-inverted-outlined-color);
     background-color: var(--button-inverted-outlined-base-bg-color);
     border: 1px solid var(--button-inverted-outlined-base-border-color)
-} .button__outlined_n1o9d:hover {
+} .button__outlined_1fxwf:hover {
         background-color: var(--button-inverted-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_n1o9d:hover {
+    } @media (hover: none) { .button__outlined_1fxwf:hover {
             background-color: var(--button-inverted-outlined-base-bg-color)
     }
-        } .button__outlined_n1o9d:active {
+        } .button__outlined_1fxwf:active {
         background-color: var(--button-inverted-outlined-active-bg-color);
-    } .button__tertiary_n1o9d {
+    } .button__tertiary_1fxwf {
     color: var(--button-inverted-tertiary-color);
     background-color: var(--button-inverted-tertiary-base-bg-color);
     border: 1px solid var(--button-inverted-tertiary-base-border-color)
-} .button__tertiary_n1o9d:hover {
+} .button__tertiary_1fxwf:hover {
         background-color: var(--button-inverted-tertiary-hover-bg-color);
         border-color: var(--button-inverted-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_n1o9d:hover {
+    } @media (hover: none) { .button__tertiary_1fxwf:hover {
             background-color: var(--button-inverted-tertiary-base-bg-color);
             border-color: var(--button-inverted-tertiary-base-border-color)
     }
-        } .button__tertiary_n1o9d:active {
+        } .button__tertiary_1fxwf:active {
         background-color: var(--button-inverted-tertiary-active-bg-color);
-    } .button__tertiary_n1o9d > .button__loader_n1o9d {
+    } .button__tertiary_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-inverted-color);
-    } .button__filled_n1o9d {
+    } .button__filled_1fxwf {
     color: var(--color-dark-text-primary);
     background-color: var(--color-dark-bg-quaternary)
-} .button__filled_n1o9d:hover {
+} .button__filled_1fxwf:hover {
         background-color: rgb(99, 112, 126)
-    } @media (hover: none) { .button__filled_n1o9d:hover {
+    } @media (hover: none) { .button__filled_1fxwf:hover {
             background-color: var(--color-dark-bg-quaternary)
     }
-        } .button__filled_n1o9d:active {
+        } .button__filled_1fxwf:active {
         background-color: rgb(61, 74, 88);
-    } .button__transparent_n1o9d {
+    } .button__transparent_1fxwf {
     color: var(--color-light-text-primary-inverted);
     background-color: rgba(255, 255, 255, 0.1)
-} .button__transparent_n1o9d:hover {
+} .button__transparent_1fxwf:hover {
         background-color: rgba(255, 255, 255, 0.2)
-    } @media (hover: none) { .button__transparent_n1o9d:hover {
+    } @media (hover: none) { .button__transparent_1fxwf:hover {
             background-color: rgba(255, 255, 255, 0.1)
     }
-        } .button__transparent_n1o9d:active {
+        } .button__transparent_1fxwf:active {
         /* TODO: какой цвет? */
         background-color: rgba(255, 255, 255, 0.05);
-    } .button__link_n1o9d {
+    } .button__link_1fxwf {
     color: var(--button-inverted-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_n1o9d:hover {
+} .button__link_1fxwf:hover {
         background-color: var(--button-inverted-link-hover-bg-color)
-    } @media (hover: none) { .button__link_n1o9d:hover {
+    } @media (hover: none) { .button__link_1fxwf:hover {
             background-color: transparent
     }
-        } .button__link_n1o9d:active {
+        } .button__link_1fxwf:active {
         /* TODO: какой цвет? */
         background-color: var(--button-inverted-link-active-bg-color);
-    } .button__link_n1o9d > .button__loader_n1o9d {
+    } .button__link_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-inverted-color);
-    } .button__ghost_n1o9d {
+    } .button__ghost_1fxwf {
     color: var(--button-inverted-ghost-base-color)
-} .button__ghost_n1o9d:hover {
+} .button__ghost_1fxwf:hover {
         color: var(--button-inverted-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_n1o9d:hover {
+    } @media (hover: none) { .button__ghost_1fxwf:hover {
             color: var(--button-inverted-ghost-base-color)
     }
-        } .button__ghost_n1o9d:active {
+        } .button__ghost_1fxwf:active {
         color: var(--button-inverted-ghost-active-color);
-    } .button__ghost_n1o9d > .button__loader_n1o9d {
+    } .button__ghost_1fxwf > .button__loader_1fxwf {
         color: var(--button-spinner-inverted-color);
-    } .button__component_n1o9d[disabled].button__primary_n1o9d {
+    } .button__component_1fxwf[disabled].button__primary_1fxwf {
         color: var(--button-inverted-primary-disabled-color);
         background-color: var(--button-inverted-primary-disabled-bg-color)
-    } .button__component_n1o9d[disabled].button__primary_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__primary_1fxwf.button__loading_1fxwf {
             background-color: var(--button-inverted-primary-base-bg-color);
-        } .button__component_n1o9d[disabled].button__secondary_n1o9d {
+        } .button__component_1fxwf[disabled].button__secondary_1fxwf {
         color: var(--button-inverted-secondary-disabled-color);
         background-color: var(--button-inverted-secondary-disabled-bg-color);
         border-color: var(--button-inverted-secondary-disabled-border-color)
-    } .button__component_n1o9d[disabled].button__secondary_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__secondary_1fxwf.button__loading_1fxwf {
             color: var(--button-inverted-secondary-color);
             background-color: var(--button-inverted-secondary-base-bg-color);
             border-color: var(--button-inverted-secondary-base-border-color);
-        } .button__component_n1o9d[disabled].button__outlined_n1o9d {
+        } .button__component_1fxwf[disabled].button__outlined_1fxwf {
         color: var(--button-inverted-outlined-disabled-color);
         background-color: var(--button-inverted-outlined-disabled-bg-color);
         border-color: var(--button-inverted-outlined-disabled-border-color)
-    } .button__component_n1o9d[disabled].button__outlined_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__outlined_1fxwf.button__loading_1fxwf {
             color: var(--button-inverted-outlined-color);
-        } .button__component_n1o9d[disabled].button__tertiary_n1o9d {
+        } .button__component_1fxwf[disabled].button__tertiary_1fxwf {
         color: var(--button-inverted-tertiary-disabled-color);
         background-color: var(--button-inverted-tertiary-disabled-bg-color);
         border-color: var(--button-inverted-tertiary-disabled-border-color)
-    } .button__component_n1o9d[disabled].button__tertiary_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__tertiary_1fxwf.button__loading_1fxwf {
             color: var(--button-inverted-tertiary-color);
-        } .button__component_n1o9d[disabled].button__filled_n1o9d {
+        } .button__component_1fxwf[disabled].button__filled_1fxwf {
         color: rgba(255, 255, 255, 0.3);
         background-color: rgba(72, 87, 103, 0.3);
         border-color: transparent
-    } .button__component_n1o9d[disabled].button__filled_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__filled_1fxwf.button__loading_1fxwf {
             color: var(--color-dark-text-primary);
             background-color: var(--color-dark-bg-quaternary);
             border-color: transparent;
-        } .button__component_n1o9d[disabled].button__transparent_n1o9d {
+        } .button__component_1fxwf[disabled].button__transparent_1fxwf {
         color: rgba(255, 255, 255, 0.3);
         background-color: rgba(255, 255, 255, 0.03)
-    } .button__component_n1o9d[disabled].button__transparent_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__transparent_1fxwf.button__loading_1fxwf {
             color: var(--color-light-text-primary-inverted);
             background-color: rgba(255, 255, 255, 0.1);
-        } .button__component_n1o9d[disabled].button__link_n1o9d {
+        } .button__component_1fxwf[disabled].button__link_1fxwf {
         color: var(--button-inverted-link-disabled-color);
         background-color: transparent
-    } .button__component_n1o9d[disabled].button__link_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__link_1fxwf.button__loading_1fxwf {
             color: var(--button-inverted-link-base-color);
-        } .button__component_n1o9d[disabled].button__ghost_n1o9d {
+        } .button__component_1fxwf[disabled].button__ghost_1fxwf {
         color: var(--button-inverted-ghost-disabled-color)
-    } .button__component_n1o9d[disabled].button__ghost_n1o9d.button__loading_n1o9d {
+    } .button__component_1fxwf[disabled].button__ghost_1fxwf.button__loading_1fxwf {
             color: var(--button-inverted-ghost-base-color);
         }

package/button/modern/Component.js

@@ -4,13 +4,13 @@ import cn from 'classnames';
 import { Spinner } from '../../spinner/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"button__component_12hat","focused":"button__focused_12hat","loading":"button__loading_12hat","text":"button__text_12hat","addons":"button__addons_12hat","stretchText":"button__stretchText_12hat","loader":"button__loader_12hat","xxs":"button__xxs_12hat","iconOnly":"button__iconOnly_12hat","xs":"button__xs_12hat","s":"button__s_12hat","m":"button__m_12hat","l":"button__l_12hat","xl":"button__xl_12hat","withRightAddons":"button__withRightAddons_12hat","ghost":"button__ghost_12hat","withLeftAddons":"button__withLeftAddons_12hat","link":"button__link_12hat","block":"button__block_12hat","nowrap":"button__nowrap_12hat"};
+const styles = {"component":"button__component_1m9nq","focused":"button__focused_1m9nq","loading":"button__loading_1m9nq","text":"button__text_1m9nq","addons":"button__addons_1m9nq","stretchText":"button__stretchText_1m9nq","loader":"button__loader_1m9nq","xxs":"button__xxs_1m9nq","iconOnly":"button__iconOnly_1m9nq","xs":"button__xs_1m9nq","s":"button__s_1m9nq","m":"button__m_1m9nq","l":"button__l_1m9nq","xl":"button__xl_1m9nq","withRightAddons":"button__withRightAddons_1m9nq","ghost":"button__ghost_1m9nq","withLeftAddons":"button__withLeftAddons_1m9nq","link":"button__link_1m9nq","block":"button__block_1m9nq","nowrap":"button__nowrap_1m9nq"};
 require('./index.css');
 
-const defaultColors = {"accent":"button__accent_1kdfe","loader":"button__loader_1kdfe","primary":"button__primary_1kdfe","secondary":"button__secondary_1kdfe","outlined":"button__outlined_1kdfe","tertiary":"button__tertiary_1kdfe","filled":"button__filled_1kdfe","transparent":"button__transparent_1kdfe","link":"button__link_1kdfe","ghost":"button__ghost_1kdfe","component":"button__component_1kdfe","loading":"button__loading_1kdfe"};
+const defaultColors = {"accent":"button__accent_e8jhz","loader":"button__loader_e8jhz","primary":"button__primary_e8jhz","secondary":"button__secondary_e8jhz","outlined":"button__outlined_e8jhz","tertiary":"button__tertiary_e8jhz","filled":"button__filled_e8jhz","transparent":"button__transparent_e8jhz","link":"button__link_e8jhz","ghost":"button__ghost_e8jhz","component":"button__component_e8jhz","loading":"button__loading_e8jhz"};
 require('./default.css');
 
-const invertedColors = {"accent":"button__accent_n1o9d","loader":"button__loader_n1o9d","primary":"button__primary_n1o9d","secondary":"button__secondary_n1o9d","outlined":"button__outlined_n1o9d","tertiary":"button__tertiary_n1o9d","filled":"button__filled_n1o9d","transparent":"button__transparent_n1o9d","link":"button__link_n1o9d","ghost":"button__ghost_n1o9d","component":"button__component_n1o9d","loading":"button__loading_n1o9d"};
+const invertedColors = {"accent":"button__accent_1fxwf","loader":"button__loader_1fxwf","primary":"button__primary_1fxwf","secondary":"button__secondary_1fxwf","outlined":"button__outlined_1fxwf","tertiary":"button__tertiary_1fxwf","filled":"button__filled_1fxwf","transparent":"button__transparent_1fxwf","link":"button__link_1fxwf","ghost":"button__ghost_1fxwf","component":"button__component_1fxwf","loading":"button__loading_1fxwf"};
 require('./inverted.css');
 
 // TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!.

package/button/modern/default.css

@@ -105,160 +105,160 @@
     --button-spinner-static-color: var(--color-static-graphic-light);
     --button-spinner-static-primary-color: var(--color-static-graphic-light);
     --button-spinner-default-color: var(--color-light-graphic-primary);
-} .button__accent_1kdfe {
+} .button__accent_e8jhz {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_1kdfe:hover {
+} .button__accent_e8jhz:hover {
         background-color: var(--button-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_1kdfe:hover {
+    } @media (hover: none) { .button__accent_e8jhz:hover {
             background-color: var(--button-accent-base-bg-color)
     }
-        } .button__accent_1kdfe:active {
+        } .button__accent_e8jhz:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_1kdfe > .button__loader_1kdfe {
+    } .button__accent_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-static-color);
-    } .button__primary_1kdfe {
+    } .button__primary_e8jhz {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_1kdfe:hover {
+} .button__primary_e8jhz:hover {
         background-color: var(--button-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_1kdfe:hover {
+    } @media (hover: none) { .button__primary_e8jhz:hover {
             background-color: var(--button-primary-base-bg-color)
     }
-        } .button__primary_1kdfe:active {
+        } .button__primary_e8jhz:active {
         background-color: var(--button-primary-active-bg-color);
-    } .button__primary_1kdfe > .button__loader_1kdfe {
+    } .button__primary_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-static-primary-color);
-    } .button__secondary_1kdfe {
+    } .button__secondary_e8jhz {
     color: var(--button-secondary-color);
     background-color: var(--button-secondary-base-bg-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_1kdfe:hover {
+} .button__secondary_e8jhz:hover {
         background-color: var(--button-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_1kdfe:hover {
+    } @media (hover: none) { .button__secondary_e8jhz:hover {
             background-color: var(--button-secondary-base-bg-color)
     }
-        } .button__secondary_1kdfe:active {
+        } .button__secondary_e8jhz:active {
         background-color: var(--button-secondary-active-bg-color);
-    } .button__secondary_1kdfe > .button__loader_1kdfe {
+    } .button__secondary_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-default-color);
-    } .button__outlined_1kdfe {
+    } .button__outlined_e8jhz {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
-} .button__outlined_1kdfe:hover {
+} .button__outlined_e8jhz:hover {
         background-color: var(--button-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_1kdfe:hover {
+    } @media (hover: none) { .button__outlined_e8jhz:hover {
             background-color: var(--button-outlined-base-bg-color)
     }
-        } .button__outlined_1kdfe:active {
+        } .button__outlined_e8jhz:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_1kdfe {
+    } .button__tertiary_e8jhz {
     color: var(--button-tertiary-color);
     background-color: var(--button-tertiary-base-bg-color);
     border: 1px solid var(--button-tertiary-base-border-color)
-} .button__tertiary_1kdfe:hover {
+} .button__tertiary_e8jhz:hover {
         background-color: var(--button-tertiary-hover-bg-color);
         border-color: var(--button-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_1kdfe:hover {
+    } @media (hover: none) { .button__tertiary_e8jhz:hover {
             background-color: var(--button-tertiary-base-bg-color);
             border-color: var(--button-tertiary-base-border-color)
     }
-        } .button__tertiary_1kdfe:active {
+        } .button__tertiary_e8jhz:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_1kdfe > .button__loader_1kdfe {
+    } .button__tertiary_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-default-color);
-    } .button__filled_1kdfe {
+    } .button__filled_e8jhz {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
-} .button__filled_1kdfe:hover {
+} .button__filled_e8jhz:hover {
         background-color: var(--color-light-bg-quaternary-shade-7)
-    } @media (hover: none) { .button__filled_1kdfe:hover {
+    } @media (hover: none) { .button__filled_e8jhz:hover {
             background-color: var(--color-light-bg-quaternary)
     }
-        } .button__filled_1kdfe:active {
+        } .button__filled_e8jhz:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_1kdfe {
+    } .button__transparent_e8jhz {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
-} .button__transparent_1kdfe:hover {
+} .button__transparent_e8jhz:hover {
         background-color: var(--color-light-bg-primary-inverted-alpha-20)
-    } @media (hover: none) { .button__transparent_1kdfe:hover {
+    } @media (hover: none) { .button__transparent_e8jhz:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-10)
     }
-        } .button__transparent_1kdfe:active {
+        } .button__transparent_e8jhz:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_1kdfe {
+    } .button__link_e8jhz {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_1kdfe:hover {
+} .button__link_e8jhz:hover {
         background-color: var(--button-link-hover-bg-color)
-    } @media (hover: none) { .button__link_1kdfe:hover {
+    } @media (hover: none) { .button__link_e8jhz:hover {
             background-color: transparent
     }
-        } .button__link_1kdfe:active {
+        } .button__link_e8jhz:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_1kdfe > .button__loader_1kdfe {
+    } .button__link_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-default-color);
-    } .button__ghost_1kdfe {
+    } .button__ghost_e8jhz {
     color: var(--button-ghost-base-color)
-} .button__ghost_1kdfe:hover {
+} .button__ghost_e8jhz:hover {
         color: var(--button-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_1kdfe:hover {
+    } @media (hover: none) { .button__ghost_e8jhz:hover {
             color: var(--button-ghost-base-color)
     }
-        } .button__ghost_1kdfe:active {
+        } .button__ghost_e8jhz:active {
         color: var(--button-ghost-active-color);
-    } .button__ghost_1kdfe > .button__loader_1kdfe {
+    } .button__ghost_e8jhz > .button__loader_e8jhz {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_1kdfe[disabled].button__primary_1kdfe {
+    } /* Disabled */ .button__component_e8jhz[disabled].button__primary_e8jhz {
         color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color)
-    } .button__component_1kdfe[disabled].button__primary_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__primary_e8jhz.button__loading_e8jhz {
             background-color: var(--button-primary-base-bg-color);
-        } .button__component_1kdfe[disabled].button__secondary_1kdfe {
+        } .button__component_e8jhz[disabled].button__secondary_e8jhz {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_1kdfe[disabled].button__secondary_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__secondary_e8jhz.button__loading_e8jhz {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_1kdfe[disabled].button__outlined_1kdfe {
+        } .button__component_e8jhz[disabled].button__outlined_e8jhz {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_1kdfe[disabled].button__outlined_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__outlined_e8jhz.button__loading_e8jhz {
             color: var(--button-outlined-color);
-        } .button__component_1kdfe[disabled].button__tertiary_1kdfe {
+        } .button__component_e8jhz[disabled].button__tertiary_e8jhz {
         color: var(--button-tertiary-disabled-color);
         background-color: var(--button-tertiary-disabled-bg-color);
         border-color: var(--button-tertiary-disabled-border-color)
-    } .button__component_1kdfe[disabled].button__tertiary_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__tertiary_e8jhz.button__loading_e8jhz {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_1kdfe[disabled].button__filled_1kdfe {
+        } .button__component_e8jhz[disabled].button__filled_e8jhz {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_1kdfe[disabled].button__filled_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__filled_e8jhz.button__loading_e8jhz {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_1kdfe[disabled].button__transparent_1kdfe {
+        } .button__component_e8jhz[disabled].button__transparent_e8jhz {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_1kdfe[disabled].button__transparent_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__transparent_e8jhz.button__loading_e8jhz {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_1kdfe[disabled].button__link_1kdfe {
+        } .button__component_e8jhz[disabled].button__link_e8jhz {
         color: var(--button-link-disabled-color);
         background-color: transparent
-    } .button__component_1kdfe[disabled].button__link_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__link_e8jhz.button__loading_e8jhz {
             color: var(--button-link-base-color);
-        } .button__component_1kdfe[disabled].button__ghost_1kdfe {
+        } .button__component_e8jhz[disabled].button__ghost_e8jhz {
         color: var(--button-ghost-disabled-color)
-    } .button__component_1kdfe[disabled].button__ghost_1kdfe.button__loading_1kdfe {
+    } .button__component_e8jhz[disabled].button__ghost_e8jhz.button__loading_e8jhz {
             color: var(--button-ghost-base-color);
         }