@alfalab/core-components 41.11.0 → 41.13.0

package/button/inverted.css

@@ -112,168 +112,168 @@
     --button-spinner-static-color: var(--color-static-graphic-light);
     --button-spinner-inverted-color: var(--color-light-graphic-primary-inverted);
     --button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
-} .button__accent_yt5j3 {
+} .button__accent_15zhd {
     color: var(--button-inverted-accent-color);
     background-color: var(--button-inverted-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_yt5j3:hover {
+} .button__accent_15zhd:hover {
         background-color: var(--button-inverted-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_yt5j3:hover {
+    } @media (hover: none) { .button__accent_15zhd:hover {
             background-color: var(--button-inverted-accent-base-bg-color)
     }
-        } .button__accent_yt5j3:active {
+        } .button__accent_15zhd:active {
         background-color: var(--button-inverted-accent-active-bg-color);
-    } .button__accent_yt5j3 > .button__loader_yt5j3 {
+    } .button__accent_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-static-color);
-    } .button__primary_yt5j3 {
+    } .button__primary_15zhd {
     color: var(--button-inverted-primary-color);
     background-color: var(--button-inverted-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_yt5j3:hover {
+} .button__primary_15zhd:hover {
         background-color: var(--button-inverted-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_yt5j3:hover {
+    } @media (hover: none) { .button__primary_15zhd:hover {
             background-color: var(--button-inverted-primary-base-bg-color)
     }
-        } .button__primary_yt5j3:active {
+        } .button__primary_15zhd:active {
         background-color: var(--button-inverted-primary-active-bg-color);
-    } .button__primary_yt5j3 > .button__loader_yt5j3 {
+    } .button__primary_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-inverted-primary-color);
-    } .button__secondary_yt5j3 {
+    } .button__secondary_15zhd {
     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_yt5j3:hover {
+} .button__secondary_15zhd:hover {
         background-color: var(--button-inverted-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_yt5j3:hover {
+    } @media (hover: none) { .button__secondary_15zhd:hover {
             background-color: var(--button-inverted-secondary-base-bg-color)
     }
-        } .button__secondary_yt5j3:active {
+        } .button__secondary_15zhd:active {
         background-color: var(--button-inverted-secondary-active-bg-color);
-    } .button__secondary_yt5j3 > .button__loader_yt5j3 {
+    } .button__secondary_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-inverted-color);
-    } .button__outlined_yt5j3 {
+    } .button__outlined_15zhd {
     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_yt5j3:hover {
+} .button__outlined_15zhd:hover {
         background-color: var(--button-inverted-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_yt5j3:hover {
+    } @media (hover: none) { .button__outlined_15zhd:hover {
             background-color: var(--button-inverted-outlined-base-bg-color)
     }
-        } .button__outlined_yt5j3:active {
+        } .button__outlined_15zhd:active {
         background-color: var(--button-inverted-outlined-active-bg-color);
-    } .button__tertiary_yt5j3 {
+    } .button__tertiary_15zhd {
     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_yt5j3:hover {
+} .button__tertiary_15zhd:hover {
         background-color: var(--button-inverted-tertiary-hover-bg-color);
         border-color: var(--button-inverted-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_yt5j3:hover {
+    } @media (hover: none) { .button__tertiary_15zhd:hover {
             background-color: var(--button-inverted-tertiary-base-bg-color);
             border-color: var(--button-inverted-tertiary-base-border-color)
     }
-        } .button__tertiary_yt5j3:active {
+        } .button__tertiary_15zhd:active {
         background-color: var(--button-inverted-tertiary-active-bg-color);
-    } .button__tertiary_yt5j3 > .button__loader_yt5j3 {
+    } .button__tertiary_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-inverted-color);
-    } .button__filled_yt5j3 {
+    } .button__filled_15zhd {
     color: var(--color-dark-text-primary);
     background-color: var(--color-dark-bg-quaternary)
-} .button__filled_yt5j3:hover {
+} .button__filled_15zhd:hover {
         background-color: rgb(88, 88, 89)
-    } @media (hover: none) { .button__filled_yt5j3:hover {
+    } @media (hover: none) { .button__filled_15zhd:hover {
             background-color: var(--color-dark-bg-quaternary)
     }
-        } .button__filled_yt5j3:active {
+        } .button__filled_15zhd:active {
         background-color: rgb(49, 49, 51);
-    } .button__transparent_yt5j3 {
+    } .button__transparent_15zhd {
     color: var(--color-light-text-primary-inverted);
     background-color: rgba(255, 255, 255, 0.1)
-} .button__transparent_yt5j3:hover {
+} .button__transparent_15zhd:hover {
         background-color: rgba(255, 255, 255, 0.2)
-    } @media (hover: none) { .button__transparent_yt5j3:hover {
+    } @media (hover: none) { .button__transparent_15zhd:hover {
             background-color: rgba(255, 255, 255, 0.1)
     }
-        } .button__transparent_yt5j3:active {
+        } .button__transparent_15zhd:active {
         /* TODO: какой цвет? */
         background-color: rgba(255, 255, 255, 0.05);
-    } .button__link_yt5j3 {
+    } .button__link_15zhd {
     color: var(--button-inverted-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_yt5j3:hover {
+} .button__link_15zhd:hover {
         background-color: var(--button-inverted-link-hover-bg-color)
-    } @media (hover: none) { .button__link_yt5j3:hover {
+    } @media (hover: none) { .button__link_15zhd:hover {
             background-color: transparent
     }
-        } .button__link_yt5j3:active {
+        } .button__link_15zhd:active {
         /* TODO: какой цвет? */
         background-color: var(--button-inverted-link-active-bg-color);
-    } .button__link_yt5j3 > .button__loader_yt5j3 {
+    } .button__link_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-inverted-color);
-    } .button__ghost_yt5j3 {
+    } .button__ghost_15zhd {
     color: var(--button-inverted-ghost-base-color)
-} .button__ghost_yt5j3:hover {
+} .button__ghost_15zhd:hover {
         color: var(--button-inverted-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_yt5j3:hover {
+    } @media (hover: none) { .button__ghost_15zhd:hover {
             color: var(--button-inverted-ghost-base-color)
     }
-        } .button__ghost_yt5j3:active {
+        } .button__ghost_15zhd:active {
         color: var(--button-inverted-ghost-active-color);
-    } .button__ghost_yt5j3 > .button__loader_yt5j3 {
+    } .button__ghost_15zhd > .button__loader_15zhd {
         color: var(--button-spinner-inverted-color);
-    } .button__component_yt5j3[disabled].button__accent_yt5j3 {
+    } .button__component_15zhd[disabled].button__accent_15zhd {
         color: var(--button-inverted-accent-disabled-color);
         background-color: var(--button-inverted-accent-disabled-bg-color)
-    } .button__component_yt5j3[disabled].button__accent_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__accent_15zhd.button__loading_15zhd {
             background-color: var(--button-inverted-accent-base-bg-color);
-        } .button__component_yt5j3[disabled].button__primary_yt5j3 {
+        } .button__component_15zhd[disabled].button__primary_15zhd {
         color: var(--button-inverted-primary-disabled-color);
         background-color: var(--button-inverted-primary-disabled-bg-color)
-    } .button__component_yt5j3[disabled].button__primary_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__primary_15zhd.button__loading_15zhd {
             background-color: var(--button-inverted-primary-base-bg-color);
-        } .button__component_yt5j3[disabled].button__secondary_yt5j3 {
+        } .button__component_15zhd[disabled].button__secondary_15zhd {
         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_yt5j3[disabled].button__secondary_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__secondary_15zhd.button__loading_15zhd {
             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_yt5j3[disabled].button__outlined_yt5j3 {
+        } .button__component_15zhd[disabled].button__outlined_15zhd {
         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_yt5j3[disabled].button__outlined_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__outlined_15zhd.button__loading_15zhd {
             color: var(--button-inverted-outlined-color);
-        } .button__component_yt5j3[disabled].button__tertiary_yt5j3 {
+        } .button__component_15zhd[disabled].button__tertiary_15zhd {
         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_yt5j3[disabled].button__tertiary_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__tertiary_15zhd.button__loading_15zhd {
             color: var(--button-inverted-tertiary-color);
-        } .button__component_yt5j3[disabled].button__filled_yt5j3 {
+        } .button__component_15zhd[disabled].button__filled_15zhd {
         color: rgba(255, 255, 255, 0.3);
         background-color: rgba(58, 58, 60, 0.3);
         border-color: transparent
-    } .button__component_yt5j3[disabled].button__filled_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__filled_15zhd.button__loading_15zhd {
             color: var(--color-dark-text-primary);
             background-color: var(--color-dark-bg-quaternary);
             border-color: transparent;
-        } .button__component_yt5j3[disabled].button__transparent_yt5j3 {
+        } .button__component_15zhd[disabled].button__transparent_15zhd {
         color: rgba(255, 255, 255, 0.3);
         background-color: rgba(255, 255, 255, 0.03)
-    } .button__component_yt5j3[disabled].button__transparent_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__transparent_15zhd.button__loading_15zhd {
             color: var(--color-light-text-primary-inverted);
             background-color: rgba(255, 255, 255, 0.1);
-        } .button__component_yt5j3[disabled].button__link_yt5j3 {
+        } .button__component_15zhd[disabled].button__link_15zhd {
         color: var(--button-inverted-link-disabled-color);
         background-color: transparent
-    } .button__component_yt5j3[disabled].button__link_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__link_15zhd.button__loading_15zhd {
             color: var(--button-inverted-link-base-color);
-        } .button__component_yt5j3[disabled].button__ghost_yt5j3 {
+        } .button__component_15zhd[disabled].button__ghost_15zhd {
         color: var(--button-inverted-ghost-disabled-color)
-    } .button__component_yt5j3[disabled].button__ghost_yt5j3.button__loading_yt5j3 {
+    } .button__component_15zhd[disabled].button__ghost_15zhd.button__loading_15zhd {
             color: var(--button-inverted-ghost-base-color);
         }

package/button/modern/Component.js

@@ -9,13 +9,13 @@ const getDataTestId = (dataTestId, element) => {
     return dataTestId ? `${dataTestId}${elementPart}` : undefined;
 };
 
-const styles = {"component":"button__component_11tf5","focused":"button__focused_11tf5","loading":"button__loading_11tf5","text":"button__text_11tf5","addons":"button__addons_11tf5","stretchText":"button__stretchText_11tf5","loader":"button__loader_11tf5","xxs":"button__xxs_11tf5","iconOnly":"button__iconOnly_11tf5","xs":"button__xs_11tf5","s":"button__s_11tf5","m":"button__m_11tf5","l":"button__l_11tf5","xl":"button__xl_11tf5","withRightAddons":"button__withRightAddons_11tf5","ghost":"button__ghost_11tf5","withLeftAddons":"button__withLeftAddons_11tf5","link":"button__link_11tf5","block":"button__block_11tf5","nowrap":"button__nowrap_11tf5"};
+const styles = {"component":"button__component_obt4a","focused":"button__focused_obt4a","loading":"button__loading_obt4a","text":"button__text_obt4a","addons":"button__addons_obt4a","stretchText":"button__stretchText_obt4a","loader":"button__loader_obt4a","xxs":"button__xxs_obt4a","iconOnly":"button__iconOnly_obt4a","xs":"button__xs_obt4a","s":"button__s_obt4a","m":"button__m_obt4a","l":"button__l_obt4a","xl":"button__xl_obt4a","withRightAddons":"button__withRightAddons_obt4a","ghost":"button__ghost_obt4a","withLeftAddons":"button__withLeftAddons_obt4a","link":"button__link_obt4a","block":"button__block_obt4a","nowrap":"button__nowrap_obt4a"};
 require('./index.css');
 
-const defaultColors = {"accent":"button__accent_1fcrb","loader":"button__loader_1fcrb","primary":"button__primary_1fcrb","secondary":"button__secondary_1fcrb","outlined":"button__outlined_1fcrb","tertiary":"button__tertiary_1fcrb","filled":"button__filled_1fcrb","transparent":"button__transparent_1fcrb","link":"button__link_1fcrb","ghost":"button__ghost_1fcrb","component":"button__component_1fcrb","loading":"button__loading_1fcrb"};
+const defaultColors = {"accent":"button__accent_1mj36","loader":"button__loader_1mj36","primary":"button__primary_1mj36","secondary":"button__secondary_1mj36","outlined":"button__outlined_1mj36","tertiary":"button__tertiary_1mj36","filled":"button__filled_1mj36","transparent":"button__transparent_1mj36","link":"button__link_1mj36","ghost":"button__ghost_1mj36","component":"button__component_1mj36","loading":"button__loading_1mj36"};
 require('./default.css');
 
-const invertedColors = {"accent":"button__accent_yt5j3","loader":"button__loader_yt5j3","primary":"button__primary_yt5j3","secondary":"button__secondary_yt5j3","outlined":"button__outlined_yt5j3","tertiary":"button__tertiary_yt5j3","filled":"button__filled_yt5j3","transparent":"button__transparent_yt5j3","link":"button__link_yt5j3","ghost":"button__ghost_yt5j3","component":"button__component_yt5j3","loading":"button__loading_yt5j3"};
+const invertedColors = {"accent":"button__accent_15zhd","loader":"button__loader_15zhd","primary":"button__primary_15zhd","secondary":"button__secondary_15zhd","outlined":"button__outlined_15zhd","tertiary":"button__tertiary_15zhd","filled":"button__filled_15zhd","transparent":"button__transparent_15zhd","link":"button__link_15zhd","ghost":"button__ghost_15zhd","component":"button__component_15zhd","loading":"button__loading_15zhd"};
 require('./inverted.css');
 
 // TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!.

package/button/modern/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_1fcrb {
+} .button__accent_1mj36 {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_1fcrb:hover {
+} .button__accent_1mj36:hover {
         background-color: var(--button-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_1fcrb:hover {
+    } @media (hover: none) { .button__accent_1mj36:hover {
             background-color: var(--button-accent-base-bg-color)
     }
-        } .button__accent_1fcrb:active {
+        } .button__accent_1mj36:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_1fcrb > .button__loader_1fcrb {
+    } .button__accent_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-static-color);
-    } .button__primary_1fcrb {
+    } .button__primary_1mj36 {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_1fcrb:hover {
+} .button__primary_1mj36:hover {
         background-color: var(--button-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_1fcrb:hover {
+    } @media (hover: none) { .button__primary_1mj36:hover {
             background-color: var(--button-primary-base-bg-color)
     }
-        } .button__primary_1fcrb:active {
+        } .button__primary_1mj36:active {
         background-color: var(--button-primary-active-bg-color);
-    } .button__primary_1fcrb > .button__loader_1fcrb {
+    } .button__primary_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-primary-color);
-    } .button__secondary_1fcrb {
+    } .button__secondary_1mj36 {
     color: var(--button-secondary-color);
     background-color: var(--button-secondary-base-bg-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_1fcrb:hover {
+} .button__secondary_1mj36:hover {
         background-color: var(--button-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_1fcrb:hover {
+    } @media (hover: none) { .button__secondary_1mj36:hover {
             background-color: var(--button-secondary-base-bg-color)
     }
-        } .button__secondary_1fcrb:active {
+        } .button__secondary_1mj36:active {
         background-color: var(--button-secondary-active-bg-color);
-    } .button__secondary_1fcrb > .button__loader_1fcrb {
+    } .button__secondary_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-default-color);
-    } .button__outlined_1fcrb {
+    } .button__outlined_1mj36 {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
-} .button__outlined_1fcrb:hover {
+} .button__outlined_1mj36:hover {
         background-color: var(--button-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_1fcrb:hover {
+    } @media (hover: none) { .button__outlined_1mj36:hover {
             background-color: var(--button-outlined-base-bg-color)
     }
-        } .button__outlined_1fcrb:active {
+        } .button__outlined_1mj36:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_1fcrb {
+    } .button__tertiary_1mj36 {
     color: var(--button-tertiary-color);
     background-color: var(--button-tertiary-base-bg-color);
     border: 1px solid var(--button-tertiary-base-border-color)
-} .button__tertiary_1fcrb:hover {
+} .button__tertiary_1mj36:hover {
         background-color: var(--button-tertiary-hover-bg-color);
         border-color: var(--button-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_1fcrb:hover {
+    } @media (hover: none) { .button__tertiary_1mj36:hover {
             background-color: var(--button-tertiary-base-bg-color);
             border-color: var(--button-tertiary-base-border-color)
     }
-        } .button__tertiary_1fcrb:active {
+        } .button__tertiary_1mj36:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_1fcrb > .button__loader_1fcrb {
+    } .button__tertiary_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-default-color);
-    } .button__filled_1fcrb {
+    } .button__filled_1mj36 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
-} .button__filled_1fcrb:hover {
+} .button__filled_1mj36:hover {
         background-color: var(--color-light-bg-quaternary-shade-7)
-    } @media (hover: none) { .button__filled_1fcrb:hover {
+    } @media (hover: none) { .button__filled_1mj36:hover {
             background-color: var(--color-light-bg-quaternary)
     }
-        } .button__filled_1fcrb:active {
+        } .button__filled_1mj36:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_1fcrb {
+    } .button__transparent_1mj36 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
-} .button__transparent_1fcrb:hover {
+} .button__transparent_1mj36:hover {
         background-color: var(--color-light-bg-primary-inverted-alpha-20)
-    } @media (hover: none) { .button__transparent_1fcrb:hover {
+    } @media (hover: none) { .button__transparent_1mj36:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-10)
     }
-        } .button__transparent_1fcrb:active {
+        } .button__transparent_1mj36:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_1fcrb {
+    } .button__link_1mj36 {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_1fcrb:hover {
+} .button__link_1mj36:hover {
         background-color: var(--button-link-hover-bg-color)
-    } @media (hover: none) { .button__link_1fcrb:hover {
+    } @media (hover: none) { .button__link_1mj36:hover {
             background-color: transparent
     }
-        } .button__link_1fcrb:active {
+        } .button__link_1mj36:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_1fcrb > .button__loader_1fcrb {
+    } .button__link_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-default-color);
-    } .button__ghost_1fcrb {
+    } .button__ghost_1mj36 {
     color: var(--button-ghost-base-color)
-} .button__ghost_1fcrb:hover {
+} .button__ghost_1mj36:hover {
         color: var(--button-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_1fcrb:hover {
+    } @media (hover: none) { .button__ghost_1mj36:hover {
             color: var(--button-ghost-base-color)
     }
-        } .button__ghost_1fcrb:active {
+        } .button__ghost_1mj36:active {
         color: var(--button-ghost-active-color);
-    } .button__ghost_1fcrb > .button__loader_1fcrb {
+    } .button__ghost_1mj36 > .button__loader_1mj36 {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_1fcrb[disabled].button__accent_1fcrb {
+    } /* Disabled */ .button__component_1mj36[disabled].button__accent_1mj36 {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_1fcrb[disabled].button__accent_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__accent_1mj36.button__loading_1mj36 {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_1fcrb[disabled].button__primary_1fcrb {
+        } .button__component_1mj36[disabled].button__primary_1mj36 {
         color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color)
-    } .button__component_1fcrb[disabled].button__primary_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__primary_1mj36.button__loading_1mj36 {
             background-color: var(--button-primary-base-bg-color);
-        } .button__component_1fcrb[disabled].button__secondary_1fcrb {
+        } .button__component_1mj36[disabled].button__secondary_1mj36 {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_1fcrb[disabled].button__secondary_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__secondary_1mj36.button__loading_1mj36 {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_1fcrb[disabled].button__outlined_1fcrb {
+        } .button__component_1mj36[disabled].button__outlined_1mj36 {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_1fcrb[disabled].button__outlined_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__outlined_1mj36.button__loading_1mj36 {
             color: var(--button-outlined-color);
-        } .button__component_1fcrb[disabled].button__tertiary_1fcrb {
+        } .button__component_1mj36[disabled].button__tertiary_1mj36 {
         color: var(--button-tertiary-disabled-color);
         background-color: var(--button-tertiary-disabled-bg-color);
         border-color: var(--button-tertiary-disabled-border-color)
-    } .button__component_1fcrb[disabled].button__tertiary_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__tertiary_1mj36.button__loading_1mj36 {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_1fcrb[disabled].button__filled_1fcrb {
+        } .button__component_1mj36[disabled].button__filled_1mj36 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_1fcrb[disabled].button__filled_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__filled_1mj36.button__loading_1mj36 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_1fcrb[disabled].button__transparent_1fcrb {
+        } .button__component_1mj36[disabled].button__transparent_1mj36 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_1fcrb[disabled].button__transparent_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__transparent_1mj36.button__loading_1mj36 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_1fcrb[disabled].button__link_1fcrb {
+        } .button__component_1mj36[disabled].button__link_1mj36 {
         color: var(--button-link-disabled-color);
         background-color: transparent
-    } .button__component_1fcrb[disabled].button__link_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__link_1mj36.button__loading_1mj36 {
             color: var(--button-link-base-color);
-        } .button__component_1fcrb[disabled].button__ghost_1fcrb {
+        } .button__component_1mj36[disabled].button__ghost_1mj36 {
         color: var(--button-ghost-disabled-color)
-    } .button__component_1fcrb[disabled].button__ghost_1fcrb.button__loading_1fcrb {
+    } .button__component_1mj36[disabled].button__ghost_1mj36.button__loading_1mj36 {
             color: var(--button-ghost-base-color);
         }