@vibe/button 3.0.5 → 3.0.6-alpha-1b943.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- var o={button:"button_bdbceb92e7","focus-visible":"focus-visible_0a1cfd5ae6",loader:"loader_2d18ea9f0d",loaderSvg:"loaderSvg_e24121be83",textPlaceholder:"textPlaceholder_0b67fc2616",success:"success_0294874b2c",successContent:"successContent_9affecb334",marginRight:"marginRight_eb18fda42a",marginLeft:"marginLeft_bf7bc3fb23",rightFlat:"rightFlat_268d2e1e43",leftFlat:"leftFlat_0c77e53d29",preventClickAnimation:"preventClickAnimation_924b42667d",leftIcon:"leftIcon_eb18fda42a",rightIcon:"rightIcon_bf7bc3fb23",sizeXxs:"sizeXxs_da37aab135",sizeXs:"sizeXs_5d2439f614",sizeSmall:"sizeSmall_8e80e78016",sizeMedium:"sizeMedium_cc5e00ddef",sizeLarge:"sizeLarge_00efac6e6a",kindPrimary:"kindPrimary_be137042bc",colorPrimary:"colorPrimary_90dc7c830b",colorBrand:"colorBrand_2751a60287",colorPrimaryActive:"colorPrimaryActive_5647d6788a",colorBrandActive:"colorBrandActive_3ff991c083",colorPositive:"colorPositive_5b144e7026",colorPositiveActive:"colorPositiveActive_3b70775e1a",colorNegative:"colorNegative_435215e73e",colorNegativeActive:"colorNegativeActive_3b70775e1a",colorInverted:"colorInverted_c8a87d1a36",colorInvertedActive:"colorInvertedActive_3b70775e1a",disabled:"disabled_3541f39eac",colorOnPrimaryColor:"colorOnPrimaryColor_ec33b62468",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_466b9ec738",colorFixedLight:"colorFixedLight_7e5ec1482a",colorFixedLightActive:"colorFixedLightActive_924b42667d",colorFixedDark:"colorFixedDark_e4efec3eba",colorFixedDarkActive:"colorFixedDarkActive_4d5967c297",colorOnInvertedBackground:"colorOnInvertedBackground_9a65884c6a",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_65b4328475",kindSecondary:"kindSecondary_dc536274d9",kindTertiary:"kindTertiary_c887d2ade8",noSidePadding:"noSidePadding_426ba0741c",insetFocusStyle:"insetFocusStyle_99227f47b2"};!function(o){const e="s_id-95d3f630f6d9_3_0_4";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".button_bdbceb92e7 {\n --loader-padding: 8px;\n outline: none;\n border: none;\n height: auto;\n border-radius: var(--border-radius-small);\n cursor: pointer;\n white-space: nowrap;\n transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Prevent text selection */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n min-width: auto;\n}\n.button_bdbceb92e7:focus-visible, .button_bdbceb92e7.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_bdbceb92e7:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.button_bdbceb92e7 .loader_2d18ea9f0d {\n height: 100%;\n}\n.button_bdbceb92e7 .loader_2d18ea9f0d .loaderSvg_e24121be83 {\n position: static;\n height: 100%;\n margin: 0;\n}\n.button_bdbceb92e7 .textPlaceholder_0b67fc2616 {\n display: inline-block;\n opacity: 0;\n height: 0;\n visibility: hidden;\n white-space: pre;\n}\n.button_bdbceb92e7.success_0294874b2c {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.button_bdbceb92e7.success_0294874b2c .successContent_9affecb334 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.marginRight_eb18fda42a {\n margin-right: var(--spacing-small);\n}\n.marginLeft_bf7bc3fb23 {\n margin-left: var(--spacing-small);\n}\n.rightFlat_268d2e1e43 {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.leftFlat_0c77e53d29 {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.button_bdbceb92e7:active:not(.preventClickAnimation_924b42667d) {\n transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_bdbceb92e7 .leftIcon_eb18fda42a {\n margin-right: var(--spacing-small);\n}\n.button_bdbceb92e7 .rightIcon_bf7bc3fb23 {\n margin-left: var(--spacing-small);\n}\n.sizeXxs_da37aab135 {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: 2px var(--spacing-xs);\n height: 16px;\n line-height: 16px;\n}\n.sizeXs_5d2439f614 {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 24px;\n line-height: 21px;\n}\n.sizeSmall_8e80e78016 {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 32px;\n line-height: 24px;\n}\n.sizeSmall_8e80e78016 .loader_2d18ea9f0d {\n top: 7px;\n}\n.sizeMedium_cc5e00ddef {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: var(--spacing-small) var(--spacing-medium);\n height: 40px;\n}\n.sizeLarge_00efac6e6a {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: 12px var(--spacing-large);\n height: 48px;\n}\n.kindPrimary_be137042bc {\n color: var(--text-color-on-primary);\n}\n.kindPrimary_be137042bc.colorPrimary_90dc7c830b {\n background: var(--primary-color);\n}\n.kindPrimary_be137042bc.colorBrand_2751a60287 {\n background: var(--brand-color);\n color: var(--text-color-on-brand);\n}\n.kindPrimary_be137042bc.colorPrimaryActive_5647d6788a,\n.kindPrimary_be137042bc.colorPrimary_90dc7c830b:hover,\n.kindPrimary_be137042bc.colorPrimary_90dc7c830b:focus {\n background: var(--primary-hover-color);\n}\n.kindPrimary_be137042bc.colorBrandActive_3ff991c083,\n.kindPrimary_be137042bc.colorBrand_2751a60287:hover,\n.kindPrimary_be137042bc.colorBrand_2751a60287:focus {\n background: var(--brand-hover-color);\n}\n.kindPrimary_be137042bc.colorPositive_5b144e7026 {\n background: var(--positive-color);\n}\n.kindPrimary_be137042bc.colorPositiveActive_3b70775e1a,\n.kindPrimary_be137042bc.colorPositive_5b144e7026:hover,\n.kindPrimary_be137042bc.colorPositive_5b144e7026:focus {\n background: var(--positive-color-hover);\n}\n.kindPrimary_be137042bc.colorNegative_435215e73e {\n background: var(--negative-color);\n}\n.kindPrimary_be137042bc.colorNegativeActive_3b70775e1a,\n.kindPrimary_be137042bc.colorNegative_435215e73e:hover,\n.kindPrimary_be137042bc.colorNegative_435215e73e:focus {\n background: var(--negative-color-hover);\n}\n.kindPrimary_be137042bc.colorInverted_c8a87d1a36 {\n background: var(--inverted-color-background);\n color: var(--text-color-on-inverted);\n}\n.kindPrimary_be137042bc.colorInvertedActive_3b70775e1a,\n.kindPrimary_be137042bc.colorInverted_c8a87d1a36:hover,\n.kindPrimary_be137042bc.colorInverted_c8a87d1a36:focus {\n background: var(--placeholder-color);\n}\n.kindPrimary_be137042bc.button_bdbceb92e7.colorInverted_c8a87d1a36.disabled_3541f39eac {\n background: var(--disabled-text-color);\n color: var(--disabled-background-color);\n}\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468 {\n background: var(--text-color-on-primary);\n}\n.kindPrimary_be137042bc.colorOnPrimaryColorActive_466b9ec738,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:hover,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary_be137042bc.colorOnPrimaryColorActive_466b9ec738:focus-visible, .kindPrimary_be137042bc.colorOnPrimaryColorActive_466b9ec738.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:hover:focus-visible,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:hover.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:focus:focus-visible,\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_be137042bc.colorOnPrimaryColorActive_466b9ec738:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindPrimary_be137042bc.colorOnPrimaryColor_ec33b62468.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a {\n background: var(--fixed-light-color);\n}\n.kindPrimary_be137042bc.colorFixedLightActive_924b42667d,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:hover,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary_be137042bc.colorFixedLightActive_924b42667d:focus-visible, .kindPrimary_be137042bc.colorFixedLightActive_924b42667d.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:hover:focus-visible,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:hover.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:focus:focus-visible,\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_be137042bc.colorFixedLightActive_924b42667d:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindPrimary_be137042bc.colorFixedLight_7e5ec1482a.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba {\n background: var(--fixed-dark-color);\n color: var(--fixed-light-color);\n}\n.kindPrimary_be137042bc.colorFixedDarkActive_4d5967c297,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:hover,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:focus {\n filter: brightness(125%);\n}\n.kindPrimary_be137042bc.colorFixedDarkActive_4d5967c297:focus-visible, .kindPrimary_be137042bc.colorFixedDarkActive_4d5967c297.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:hover:focus-visible,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:hover.focus-visible_0a1cfd5ae6,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:focus:focus-visible,\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_be137042bc.colorFixedDarkActive_4d5967c297:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindPrimary_be137042bc.colorFixedDark_e4efec3eba.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindPrimary_be137042bc.colorOnInvertedBackground_9a65884c6a {\n background: var(--primary-background-color);\n color: var(--primary-text-color);\n}\n.kindPrimary_be137042bc.colorOnInvertedBackgroundActive_65b4328475,\n.kindPrimary_be137042bc.colorOnInvertedBackground_9a65884c6a:hover,\n.kindPrimary_be137042bc.colorOnInvertedBackground_9a65884c6a:focus {\n background: var(--ui-background-color);\n}\n.kindPrimary_be137042bc.button_bdbceb92e7.colorOnInvertedBackground_9a65884c6a.disabled_3541f39eac {\n background: var(--ui-background-color);\n color: var(--primary-text-color);\n opacity: 0.5;\n}\n.kindPrimary_be137042bc.button_bdbceb92e7.disabled_3541f39eac {\n background: var(--disabled-background-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary_dc536274d9 {\n border: 1px solid;\n border-color: var(--ui-border-color);\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindSecondary_dc536274d9.sizeSmall_8e80e78016 {\n line-height: 22px;\n}\n.kindSecondary_dc536274d9.sizeMedium_cc5e00ddef {\n line-height: 22px;\n}\n.kindSecondary_dc536274d9.sizeLarge_00efac6e6a {\n line-height: 22px;\n}\n.kindSecondary_dc536274d9.colorPrimaryActive_5647d6788a {\n background-color: var(--primary-selected-color);\n border-color: var(--primary-color);\n}\n.kindSecondary_dc536274d9.colorPrimaryActive_5647d6788a:hover {\n background-color: var(--primary-selected-hover-color);\n border-color: var(--primary-color);\n}\n.kindSecondary_dc536274d9.colorBrandActive_3ff991c083 {\n color: var(--text-color-on-brand);\n}\n.kindSecondary_dc536274d9.colorBrandActive_3ff991c083,\n.kindSecondary_dc536274d9.colorBrandActive_3ff991c083:hover {\n background-color: var(--brand-selected-color);\n border-color: var(--brand-color);\n}\n.kindSecondary_dc536274d9.colorPrimary_90dc7c830b:hover:not(.colorPrimaryActive_5647d6788a),\n.kindSecondary_dc536274d9.colorPrimary_90dc7c830b:focus:not(.colorPrimaryActive_5647d6788a) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_dc536274d9.colorBrand_2751a60287:hover:not(.colorBrandActive_3ff991c083),\n.kindSecondary_dc536274d9.colorBrand_2751a60287:focus:not(.colorBrandActive_3ff991c083) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_dc536274d9.colorPositive_5b144e7026 {\n color: var(--positive-color);\n border-color: var(--positive-color);\n}\n.kindSecondary_dc536274d9.colorPositiveActive_3b70775e1a,\n.kindSecondary_dc536274d9.colorPositive_5b144e7026:hover,\n.kindSecondary_dc536274d9.colorPositive_5b144e7026:focus {\n background: var(--positive-color-selected);\n}\n.kindSecondary_dc536274d9.colorNegative_435215e73e {\n color: var(--negative-color);\n border-color: var(--negative-color);\n}\n.kindSecondary_dc536274d9.colorNegativeActive_3b70775e1a,\n.kindSecondary_dc536274d9.colorNegative_435215e73e:hover,\n.kindSecondary_dc536274d9.colorNegative_435215e73e:focus {\n background: var(--negative-color-selected);\n}\n.kindSecondary_dc536274d9.colorInverted_c8a87d1a36 {\n color: var(--primary-text-color);\n border-color: var(--primary-text-color);\n}\n.kindSecondary_dc536274d9.colorInvertedActive_3b70775e1a,\n.kindSecondary_dc536274d9.colorInverted_c8a87d1a36:hover,\n.kindSecondary_dc536274d9.colorInverted_c8a87d1a36:focus {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_dc536274d9.colorInverted_c8a87d1a36.disabled_3541f39eac {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n}\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468 {\n color: var(--text-color-on-primary);\n border-color: var(--text-color-on-primary);\n}\n.kindSecondary_dc536274d9.colorOnPrimaryColorActive_466b9ec738,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:hover,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary_dc536274d9.colorOnPrimaryColorActive_466b9ec738:focus-visible, .kindSecondary_dc536274d9.colorOnPrimaryColorActive_466b9ec738.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:hover:focus-visible,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:hover.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:focus:focus-visible,\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_dc536274d9.colorOnPrimaryColorActive_466b9ec738:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindSecondary_dc536274d9.colorOnPrimaryColor_ec33b62468.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a {\n border-color: var(--fixed-light-color);\n color: var(--fixed-light-color);\n}\n.kindSecondary_dc536274d9.colorFixedLightActive_924b42667d,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:hover,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary_dc536274d9.colorFixedLightActive_924b42667d:focus-visible, .kindSecondary_dc536274d9.colorFixedLightActive_924b42667d.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:hover:focus-visible,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:hover.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:focus:focus-visible,\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_dc536274d9.colorFixedLightActive_924b42667d:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba {\n border-color: var(--fixed-dark-color);\n color: var(--fixed-dark-color);\n}\n.kindSecondary_dc536274d9.colorFixedDarkActive_4d5967c297,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:hover,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_dc536274d9.colorFixedDarkActive_4d5967c297:focus-visible, .kindSecondary_dc536274d9.colorFixedDarkActive_4d5967c297.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:hover:focus-visible,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:hover.focus-visible_0a1cfd5ae6,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:focus:focus-visible,\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_dc536274d9.colorFixedDarkActive_4d5967c297:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindSecondary_dc536274d9.colorOnInvertedBackground_9a65884c6a {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n}\n.kindSecondary_dc536274d9.colorOnInvertedBackgroundActive_65b4328475,\n.kindSecondary_dc536274d9.colorOnInvertedBackground_9a65884c6a:hover,\n.kindSecondary_dc536274d9.colorOnInvertedBackground_9a65884c6a:focus {\n background: var(--icon-color);\n}\n.kindSecondary_dc536274d9.colorOnInvertedBackground_9a65884c6a.disabled_3541f39eac {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n opacity: 0.5;\n}\n.kindSecondary_dc536274d9.colorFixedLight_7e5ec1482a.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindSecondary_dc536274d9.colorFixedDark_e4efec3eba.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindSecondary_dc536274d9.disabled_3541f39eac {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary_dc536274d9.disabled_3541f39eac:hover {\n background-color: transparent;\n}\n.kindTertiary_c887d2ade8 {\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindTertiary_c887d2ade8.colorPrimaryActive_5647d6788a {\n background-color: var(--primary-selected-color);\n}\n.kindTertiary_c887d2ade8.colorPrimaryActive_5647d6788a:hover {\n background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_c887d2ade8.colorBrandActive_3ff991c083 {\n color: var(--text-color-on-brand);\n}\n.kindTertiary_c887d2ade8.colorBrandActive_3ff991c083,\n.kindTertiary_c887d2ade8.colorBrandActive_3ff991c083:hover {\n background-color: var(--brand-selected-color);\n}\n.kindTertiary_c887d2ade8.colorPrimary_90dc7c830b:hover:not(.colorPrimaryActive_5647d6788a),\n.kindTertiary_c887d2ade8.colorPrimary_90dc7c830b:focus:not(.colorPrimaryActive_5647d6788a) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_c887d2ade8.colorBrand_2751a60287:hover:not(.colorBrandActive_3ff991c083),\n.kindTertiary_c887d2ade8.colorBrand_2751a60287:focus:not(.colorBrandActive_3ff991c083) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_c887d2ade8.colorPositive_5b144e7026 {\n color: var(--positive-color);\n}\n.kindTertiary_c887d2ade8.colorPositiveActive_3b70775e1a,\n.kindTertiary_c887d2ade8.colorPositive_5b144e7026:hover,\n.kindTertiary_c887d2ade8.colorPositive_5b144e7026:focus {\n background: var(--positive-color-selected);\n}\n.kindTertiary_c887d2ade8.colorNegative_435215e73e {\n color: var(--negative-color);\n}\n.kindTertiary_c887d2ade8.colorNegativeActive_3b70775e1a,\n.kindTertiary_c887d2ade8.colorNegative_435215e73e:hover,\n.kindTertiary_c887d2ade8.colorNegative_435215e73e:focus {\n background: var(--negative-color-selected);\n}\n.kindTertiary_c887d2ade8.colorInverted_c8a87d1a36 {\n color: var(--primary-text-color);\n}\n.kindTertiary_c887d2ade8.colorInvertedActive_3b70775e1a,\n.kindTertiary_c887d2ade8.colorInverted_c8a87d1a36:hover,\n.kindTertiary_c887d2ade8.colorInverted_c8a87d1a36:focus {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_c887d2ade8.colorInverted_c8a87d1a36.disabled_3541f39eac {\n color: var(--disabled-text-color);\n}\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468 {\n color: var(--text-color-on-primary);\n}\n.kindTertiary_c887d2ade8.colorOnPrimaryColorActive_466b9ec738,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:hover,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary_c887d2ade8.colorOnPrimaryColorActive_466b9ec738:focus-visible, .kindTertiary_c887d2ade8.colorOnPrimaryColorActive_466b9ec738.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:hover:focus-visible,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:hover.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:focus:focus-visible,\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_c887d2ade8.colorOnPrimaryColorActive_466b9ec738:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindTertiary_c887d2ade8.colorOnPrimaryColor_ec33b62468.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a {\n color: var(--fixed-light-color);\n}\n.kindTertiary_c887d2ade8.colorFixedLightActive_924b42667d,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:hover,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary_c887d2ade8.colorFixedLightActive_924b42667d:focus-visible, .kindTertiary_c887d2ade8.colorFixedLightActive_924b42667d.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:hover:focus-visible,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:hover.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:focus:focus-visible,\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_c887d2ade8.colorFixedLightActive_924b42667d:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindTertiary_c887d2ade8.colorFixedLight_7e5ec1482a.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba {\n color: var(--fixed-dark-color);\n}\n.kindTertiary_c887d2ade8.colorFixedDarkActive_4d5967c297,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:hover,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_c887d2ade8.colorFixedDarkActive_4d5967c297:focus-visible, .kindTertiary_c887d2ade8.colorFixedDarkActive_4d5967c297.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:hover:focus-visible,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:hover.focus-visible_0a1cfd5ae6,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:focus:focus-visible,\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:focus.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_c887d2ade8.colorFixedDarkActive_4d5967c297:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:hover:focus:not(.focus-visible_0a1cfd5ae6),\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba:focus:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}\n.kindTertiary_c887d2ade8.colorFixedDark_e4efec3eba.disabled_3541f39eac {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindTertiary_c887d2ade8.colorOnInvertedBackground_9a65884c6a {\n color: var(--text-color-on-inverted);\n}\n.kindTertiary_c887d2ade8.colorOnInvertedBackgroundActive_65b4328475,\n.kindTertiary_c887d2ade8.colorOnInvertedBackground_9a65884c6a:hover,\n.kindTertiary_c887d2ade8.colorOnInvertedBackground_9a65884c6a:focus {\n background: var(--icon-color);\n}\n.kindTertiary_c887d2ade8.colorOnInvertedBackground_9a65884c6a.disabled_3541f39eac {\n background: var(--icon-color);\n opacity: 0.5;\n color: var(--text-color-on-inverted);\n}\n.kindTertiary_c887d2ade8.disabled_3541f39eac {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindTertiary_c887d2ade8.disabled_3541f39eac:hover {\n background-color: transparent;\n}\n.noSidePadding_426ba0741c {\n padding-right: 0;\n padding-left: 0;\n}\n.button_bdbceb92e7.insetFocusStyle_99227f47b2:focus-visible, .button_bdbceb92e7.insetFocusStyle_99227f47b2.focus-visible_0a1cfd5ae6 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_bdbceb92e7.insetFocusStyle_99227f47b2:focus:not(.focus-visible_0a1cfd5ae6) {\n outline: none;\n}");export{o as default};
1
+ var o={button:"button_e456368ef6","focus-visible":"focus-visible_fd86db0485",loader:"loader_58793eafc9",loaderSvg:"loaderSvg_7f0ce46f67",textPlaceholder:"textPlaceholder_c09789ce1a",success:"success_3068ff74ae",successContent:"successContent_930da5e702",marginRight:"marginRight_c1835be438",marginLeft:"marginLeft_825d9b11ac",rightFlat:"rightFlat_f59238614a",leftFlat:"leftFlat_0ce5be7085",preventClickAnimation:"preventClickAnimation_7d0cfe83a7",leftIcon:"leftIcon_c1835be438",rightIcon:"rightIcon_825d9b11ac",sizeXxs:"sizeXxs_e238e2a38a",sizeXs:"sizeXs_cfc805493d",sizeSmall:"sizeSmall_26f2d955c3",sizeMedium:"sizeMedium_54e30ad70f",sizeLarge:"sizeLarge_19933254f4",kindPrimary:"kindPrimary_dbe5aceee2",colorPrimary:"colorPrimary_6b93aa81b2",colorBrand:"colorBrand_24911ca2c8",colorPrimaryActive:"colorPrimaryActive_fea8ff2126",colorBrandActive:"colorBrandActive_e585a200cb",colorPositive:"colorPositive_d3591d5bf9",colorPositiveActive:"colorPositiveActive_c1be2a7337",colorNegative:"colorNegative_b2a878b4eb",colorNegativeActive:"colorNegativeActive_c1be2a7337",colorInverted:"colorInverted_fc68e9b3a9",colorInvertedActive:"colorInvertedActive_c1be2a7337",disabled:"disabled_d4f91893b9",colorOnPrimaryColor:"colorOnPrimaryColor_e55a90f268",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_7046e8313d",colorFixedLight:"colorFixedLight_7bf61defad",colorFixedLightActive:"colorFixedLightActive_7d0cfe83a7",colorFixedDark:"colorFixedDark_0bd810ac07",colorFixedDarkActive:"colorFixedDarkActive_031dcfe2d9",colorOnInvertedBackground:"colorOnInvertedBackground_5707cb347b",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_4bd52dc112",kindSecondary:"kindSecondary_47bbb8fda7",kindTertiary:"kindTertiary_af3b18088f",noSidePadding:"noSidePadding_8385d4cefb",insetFocusStyle:"insetFocusStyle_be2f57cb1d"};!function(o){const r="s_id-95d3f630f6d9_3_0_5";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}(".button_e456368ef6 {\n --loader-padding: 8px;\n outline: none;\n border: none;\n height: auto;\n border-radius: var(--border-radius-small);\n cursor: pointer;\n white-space: nowrap;\n transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Prevent text selection */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n min-width: auto;\n}\n.button_e456368ef6:focus-visible, .button_e456368ef6.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_e456368ef6:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.button_e456368ef6 .loader_58793eafc9 {\n height: 100%;\n}\n.button_e456368ef6 .loader_58793eafc9 .loaderSvg_7f0ce46f67 {\n position: static;\n height: 100%;\n margin: 0;\n}\n.button_e456368ef6 .textPlaceholder_c09789ce1a {\n display: inline-block;\n opacity: 0;\n height: 0;\n visibility: hidden;\n white-space: pre;\n}\n.button_e456368ef6.success_3068ff74ae {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.button_e456368ef6.success_3068ff74ae .successContent_930da5e702 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.marginRight_c1835be438 {\n margin-right: var(--spacing-small);\n}\n.marginLeft_825d9b11ac {\n margin-left: var(--spacing-small);\n}\n.rightFlat_f59238614a {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.leftFlat_0ce5be7085 {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.button_e456368ef6:active:not(.preventClickAnimation_7d0cfe83a7) {\n transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_e456368ef6 .leftIcon_c1835be438 {\n margin-right: var(--spacing-small);\n}\n.button_e456368ef6 .rightIcon_825d9b11ac {\n margin-left: var(--spacing-small);\n}\n.sizeXxs_e238e2a38a {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: 2px var(--spacing-xs);\n height: 16px;\n line-height: 16px;\n}\n.sizeXs_cfc805493d {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 24px;\n line-height: 21px;\n}\n.sizeSmall_26f2d955c3 {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 32px;\n line-height: 24px;\n}\n.sizeSmall_26f2d955c3 .loader_58793eafc9 {\n top: 7px;\n}\n.sizeMedium_54e30ad70f {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: var(--spacing-small) var(--spacing-medium);\n height: 40px;\n}\n.sizeLarge_19933254f4 {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: 12px var(--spacing-large);\n height: 48px;\n}\n.kindPrimary_dbe5aceee2 {\n color: var(--text-color-on-primary);\n}\n.kindPrimary_dbe5aceee2.colorPrimary_6b93aa81b2 {\n background: var(--primary-color);\n}\n.kindPrimary_dbe5aceee2.colorBrand_24911ca2c8 {\n background: var(--brand-color);\n color: var(--text-color-on-brand);\n}\n.kindPrimary_dbe5aceee2.colorPrimaryActive_fea8ff2126,\n.kindPrimary_dbe5aceee2.colorPrimary_6b93aa81b2:hover,\n.kindPrimary_dbe5aceee2.colorPrimary_6b93aa81b2:focus {\n background: var(--primary-hover-color);\n}\n.kindPrimary_dbe5aceee2.colorBrandActive_e585a200cb,\n.kindPrimary_dbe5aceee2.colorBrand_24911ca2c8:hover,\n.kindPrimary_dbe5aceee2.colorBrand_24911ca2c8:focus {\n background: var(--brand-hover-color);\n}\n.kindPrimary_dbe5aceee2.colorPositive_d3591d5bf9 {\n background: var(--positive-color);\n}\n.kindPrimary_dbe5aceee2.colorPositiveActive_c1be2a7337,\n.kindPrimary_dbe5aceee2.colorPositive_d3591d5bf9:hover,\n.kindPrimary_dbe5aceee2.colorPositive_d3591d5bf9:focus {\n background: var(--positive-color-hover);\n}\n.kindPrimary_dbe5aceee2.colorNegative_b2a878b4eb {\n background: var(--negative-color);\n}\n.kindPrimary_dbe5aceee2.colorNegativeActive_c1be2a7337,\n.kindPrimary_dbe5aceee2.colorNegative_b2a878b4eb:hover,\n.kindPrimary_dbe5aceee2.colorNegative_b2a878b4eb:focus {\n background: var(--negative-color-hover);\n}\n.kindPrimary_dbe5aceee2.colorInverted_fc68e9b3a9 {\n background: var(--inverted-color-background);\n color: var(--text-color-on-inverted);\n}\n.kindPrimary_dbe5aceee2.colorInvertedActive_c1be2a7337,\n.kindPrimary_dbe5aceee2.colorInverted_fc68e9b3a9:hover,\n.kindPrimary_dbe5aceee2.colorInverted_fc68e9b3a9:focus {\n background: var(--placeholder-color);\n}\n.kindPrimary_dbe5aceee2.button_e456368ef6.colorInverted_fc68e9b3a9.disabled_d4f91893b9 {\n background: var(--disabled-text-color);\n color: var(--disabled-background-color);\n}\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268 {\n background: var(--text-color-on-primary);\n}\n.kindPrimary_dbe5aceee2.colorOnPrimaryColorActive_7046e8313d,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:hover,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary_dbe5aceee2.colorOnPrimaryColorActive_7046e8313d:focus-visible, .kindPrimary_dbe5aceee2.colorOnPrimaryColorActive_7046e8313d.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:hover:focus-visible,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:hover.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:focus:focus-visible,\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_dbe5aceee2.colorOnPrimaryColorActive_7046e8313d:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:hover:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindPrimary_dbe5aceee2.colorOnPrimaryColor_e55a90f268.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad {\n background: var(--fixed-light-color);\n}\n.kindPrimary_dbe5aceee2.colorFixedLightActive_7d0cfe83a7,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:hover,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary_dbe5aceee2.colorFixedLightActive_7d0cfe83a7:focus-visible, .kindPrimary_dbe5aceee2.colorFixedLightActive_7d0cfe83a7.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:hover:focus-visible,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:hover.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:focus:focus-visible,\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_dbe5aceee2.colorFixedLightActive_7d0cfe83a7:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:hover:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindPrimary_dbe5aceee2.colorFixedLight_7bf61defad.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07 {\n background: var(--fixed-dark-color);\n color: var(--fixed-light-color);\n}\n.kindPrimary_dbe5aceee2.colorFixedDarkActive_031dcfe2d9,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:hover,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:focus {\n filter: brightness(125%);\n}\n.kindPrimary_dbe5aceee2.colorFixedDarkActive_031dcfe2d9:focus-visible, .kindPrimary_dbe5aceee2.colorFixedDarkActive_031dcfe2d9.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:hover:focus-visible,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:hover.focus-visible_fd86db0485,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:focus:focus-visible,\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_dbe5aceee2.colorFixedDarkActive_031dcfe2d9:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:hover:focus:not(.focus-visible_fd86db0485),\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindPrimary_dbe5aceee2.colorFixedDark_0bd810ac07.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindPrimary_dbe5aceee2.colorOnInvertedBackground_5707cb347b {\n background: var(--primary-background-color);\n color: var(--primary-text-color);\n}\n.kindPrimary_dbe5aceee2.colorOnInvertedBackgroundActive_4bd52dc112,\n.kindPrimary_dbe5aceee2.colorOnInvertedBackground_5707cb347b:hover,\n.kindPrimary_dbe5aceee2.colorOnInvertedBackground_5707cb347b:focus {\n background: var(--ui-background-color);\n}\n.kindPrimary_dbe5aceee2.button_e456368ef6.colorOnInvertedBackground_5707cb347b.disabled_d4f91893b9 {\n background: var(--ui-background-color);\n color: var(--primary-text-color);\n opacity: 0.5;\n}\n.kindPrimary_dbe5aceee2.button_e456368ef6.disabled_d4f91893b9 {\n background: var(--disabled-background-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary_47bbb8fda7 {\n border: 1px solid;\n border-color: var(--ui-border-color);\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindSecondary_47bbb8fda7.sizeSmall_26f2d955c3 {\n line-height: 22px;\n}\n.kindSecondary_47bbb8fda7.sizeMedium_54e30ad70f {\n line-height: 22px;\n}\n.kindSecondary_47bbb8fda7.sizeLarge_19933254f4 {\n line-height: 22px;\n}\n.kindSecondary_47bbb8fda7.colorPrimaryActive_fea8ff2126 {\n background-color: var(--primary-selected-color);\n border-color: var(--primary-color);\n}\n.kindSecondary_47bbb8fda7.colorPrimaryActive_fea8ff2126:hover {\n background-color: var(--primary-selected-hover-color);\n border-color: var(--primary-color);\n}\n.kindSecondary_47bbb8fda7.colorBrandActive_e585a200cb {\n color: var(--text-color-on-brand);\n}\n.kindSecondary_47bbb8fda7.colorBrandActive_e585a200cb,\n.kindSecondary_47bbb8fda7.colorBrandActive_e585a200cb:hover {\n background-color: var(--brand-selected-color);\n border-color: var(--brand-color);\n}\n.kindSecondary_47bbb8fda7.colorPrimary_6b93aa81b2:hover:not(.colorPrimaryActive_fea8ff2126),\n.kindSecondary_47bbb8fda7.colorPrimary_6b93aa81b2:focus:not(.colorPrimaryActive_fea8ff2126) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_47bbb8fda7.colorBrand_24911ca2c8:hover:not(.colorBrandActive_e585a200cb),\n.kindSecondary_47bbb8fda7.colorBrand_24911ca2c8:focus:not(.colorBrandActive_e585a200cb) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_47bbb8fda7.colorPositive_d3591d5bf9 {\n color: var(--positive-color);\n border-color: var(--positive-color);\n}\n.kindSecondary_47bbb8fda7.colorPositiveActive_c1be2a7337,\n.kindSecondary_47bbb8fda7.colorPositive_d3591d5bf9:hover,\n.kindSecondary_47bbb8fda7.colorPositive_d3591d5bf9:focus {\n background: var(--positive-color-selected);\n}\n.kindSecondary_47bbb8fda7.colorNegative_b2a878b4eb {\n color: var(--negative-color);\n border-color: var(--negative-color);\n}\n.kindSecondary_47bbb8fda7.colorNegativeActive_c1be2a7337,\n.kindSecondary_47bbb8fda7.colorNegative_b2a878b4eb:hover,\n.kindSecondary_47bbb8fda7.colorNegative_b2a878b4eb:focus {\n background: var(--negative-color-selected);\n}\n.kindSecondary_47bbb8fda7.colorInverted_fc68e9b3a9 {\n color: var(--primary-text-color);\n border-color: var(--primary-text-color);\n}\n.kindSecondary_47bbb8fda7.colorInvertedActive_c1be2a7337,\n.kindSecondary_47bbb8fda7.colorInverted_fc68e9b3a9:hover,\n.kindSecondary_47bbb8fda7.colorInverted_fc68e9b3a9:focus {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary_47bbb8fda7.colorInverted_fc68e9b3a9.disabled_d4f91893b9 {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n}\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268 {\n color: var(--text-color-on-primary);\n border-color: var(--text-color-on-primary);\n}\n.kindSecondary_47bbb8fda7.colorOnPrimaryColorActive_7046e8313d,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:hover,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary_47bbb8fda7.colorOnPrimaryColorActive_7046e8313d:focus-visible, .kindSecondary_47bbb8fda7.colorOnPrimaryColorActive_7046e8313d.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:hover:focus-visible,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:hover.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:focus:focus-visible,\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_47bbb8fda7.colorOnPrimaryColorActive_7046e8313d:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:hover:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindSecondary_47bbb8fda7.colorOnPrimaryColor_e55a90f268.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad {\n border-color: var(--fixed-light-color);\n color: var(--fixed-light-color);\n}\n.kindSecondary_47bbb8fda7.colorFixedLightActive_7d0cfe83a7,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:hover,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary_47bbb8fda7.colorFixedLightActive_7d0cfe83a7:focus-visible, .kindSecondary_47bbb8fda7.colorFixedLightActive_7d0cfe83a7.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:hover:focus-visible,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:hover.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:focus:focus-visible,\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_47bbb8fda7.colorFixedLightActive_7d0cfe83a7:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:hover:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07 {\n border-color: var(--fixed-dark-color);\n color: var(--fixed-dark-color);\n}\n.kindSecondary_47bbb8fda7.colorFixedDarkActive_031dcfe2d9,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:hover,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_47bbb8fda7.colorFixedDarkActive_031dcfe2d9:focus-visible, .kindSecondary_47bbb8fda7.colorFixedDarkActive_031dcfe2d9.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:hover:focus-visible,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:hover.focus-visible_fd86db0485,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:focus:focus-visible,\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_47bbb8fda7.colorFixedDarkActive_031dcfe2d9:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:hover:focus:not(.focus-visible_fd86db0485),\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindSecondary_47bbb8fda7.colorOnInvertedBackground_5707cb347b {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n}\n.kindSecondary_47bbb8fda7.colorOnInvertedBackgroundActive_4bd52dc112,\n.kindSecondary_47bbb8fda7.colorOnInvertedBackground_5707cb347b:hover,\n.kindSecondary_47bbb8fda7.colorOnInvertedBackground_5707cb347b:focus {\n background: var(--icon-color);\n}\n.kindSecondary_47bbb8fda7.colorOnInvertedBackground_5707cb347b.disabled_d4f91893b9 {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n opacity: 0.5;\n}\n.kindSecondary_47bbb8fda7.colorFixedLight_7bf61defad.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindSecondary_47bbb8fda7.colorFixedDark_0bd810ac07.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindSecondary_47bbb8fda7.disabled_d4f91893b9 {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary_47bbb8fda7.disabled_d4f91893b9:hover {\n background-color: transparent;\n}\n.kindTertiary_af3b18088f {\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindTertiary_af3b18088f.colorPrimaryActive_fea8ff2126 {\n background-color: var(--primary-selected-color);\n}\n.kindTertiary_af3b18088f.colorPrimaryActive_fea8ff2126:hover {\n background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_af3b18088f.colorBrandActive_e585a200cb {\n color: var(--text-color-on-brand);\n}\n.kindTertiary_af3b18088f.colorBrandActive_e585a200cb,\n.kindTertiary_af3b18088f.colorBrandActive_e585a200cb:hover {\n background-color: var(--brand-selected-color);\n}\n.kindTertiary_af3b18088f.colorPrimary_6b93aa81b2:hover:not(.colorPrimaryActive_fea8ff2126),\n.kindTertiary_af3b18088f.colorPrimary_6b93aa81b2:focus:not(.colorPrimaryActive_fea8ff2126) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_af3b18088f.colorBrand_24911ca2c8:hover:not(.colorBrandActive_e585a200cb),\n.kindTertiary_af3b18088f.colorBrand_24911ca2c8:focus:not(.colorBrandActive_e585a200cb) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_af3b18088f.colorPositive_d3591d5bf9 {\n color: var(--positive-color);\n}\n.kindTertiary_af3b18088f.colorPositiveActive_c1be2a7337,\n.kindTertiary_af3b18088f.colorPositive_d3591d5bf9:hover,\n.kindTertiary_af3b18088f.colorPositive_d3591d5bf9:focus {\n background: var(--positive-color-selected);\n}\n.kindTertiary_af3b18088f.colorNegative_b2a878b4eb {\n color: var(--negative-color);\n}\n.kindTertiary_af3b18088f.colorNegativeActive_c1be2a7337,\n.kindTertiary_af3b18088f.colorNegative_b2a878b4eb:hover,\n.kindTertiary_af3b18088f.colorNegative_b2a878b4eb:focus {\n background: var(--negative-color-selected);\n}\n.kindTertiary_af3b18088f.colorInverted_fc68e9b3a9 {\n color: var(--primary-text-color);\n}\n.kindTertiary_af3b18088f.colorInvertedActive_c1be2a7337,\n.kindTertiary_af3b18088f.colorInverted_fc68e9b3a9:hover,\n.kindTertiary_af3b18088f.colorInverted_fc68e9b3a9:focus {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary_af3b18088f.colorInverted_fc68e9b3a9.disabled_d4f91893b9 {\n color: var(--disabled-text-color);\n}\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268 {\n color: var(--text-color-on-primary);\n}\n.kindTertiary_af3b18088f.colorOnPrimaryColorActive_7046e8313d,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:hover,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary_af3b18088f.colorOnPrimaryColorActive_7046e8313d:focus-visible, .kindTertiary_af3b18088f.colorOnPrimaryColorActive_7046e8313d.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:hover:focus-visible,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:hover.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:focus:focus-visible,\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_af3b18088f.colorOnPrimaryColorActive_7046e8313d:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:hover:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindTertiary_af3b18088f.colorOnPrimaryColor_e55a90f268.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad {\n color: var(--fixed-light-color);\n}\n.kindTertiary_af3b18088f.colorFixedLightActive_7d0cfe83a7,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:hover,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary_af3b18088f.colorFixedLightActive_7d0cfe83a7:focus-visible, .kindTertiary_af3b18088f.colorFixedLightActive_7d0cfe83a7.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:hover:focus-visible,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:hover.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:focus:focus-visible,\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_af3b18088f.colorFixedLightActive_7d0cfe83a7:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:hover:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindTertiary_af3b18088f.colorFixedLight_7bf61defad.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07 {\n color: var(--fixed-dark-color);\n}\n.kindTertiary_af3b18088f.colorFixedDarkActive_031dcfe2d9,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:hover,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_af3b18088f.colorFixedDarkActive_031dcfe2d9:focus-visible, .kindTertiary_af3b18088f.colorFixedDarkActive_031dcfe2d9.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:hover:focus-visible,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:hover.focus-visible_fd86db0485,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:focus:focus-visible,\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:focus.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_af3b18088f.colorFixedDarkActive_031dcfe2d9:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:hover:focus:not(.focus-visible_fd86db0485),\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07:focus:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}\n.kindTertiary_af3b18088f.colorFixedDark_0bd810ac07.disabled_d4f91893b9 {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindTertiary_af3b18088f.colorOnInvertedBackground_5707cb347b {\n color: var(--text-color-on-inverted);\n}\n.kindTertiary_af3b18088f.colorOnInvertedBackgroundActive_4bd52dc112,\n.kindTertiary_af3b18088f.colorOnInvertedBackground_5707cb347b:hover,\n.kindTertiary_af3b18088f.colorOnInvertedBackground_5707cb347b:focus {\n background: var(--icon-color);\n}\n.kindTertiary_af3b18088f.colorOnInvertedBackground_5707cb347b.disabled_d4f91893b9 {\n background: var(--icon-color);\n opacity: 0.5;\n color: var(--text-color-on-inverted);\n}\n.kindTertiary_af3b18088f.disabled_d4f91893b9 {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindTertiary_af3b18088f.disabled_d4f91893b9:hover {\n background-color: transparent;\n}\n.noSidePadding_8385d4cefb {\n padding-right: 0;\n padding-left: 0;\n}\n.button_e456368ef6.insetFocusStyle_be2f57cb1d:focus-visible, .button_e456368ef6.insetFocusStyle_be2f57cb1d.focus-visible_fd86db0485 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_e456368ef6.insetFocusStyle_be2f57cb1d:focus:not(.focus-visible_fd86db0485) {\n outline: none;\n}");export{o as default};
2
2
  //# sourceMappingURL=Button.module.scss.js.map
@@ -0,0 +1,99 @@
1
+ import React, { type AriaAttributes } from "react";
2
+ import { type SubIcon } from "@vibe/icon";
3
+ import { ButtonColor as ButtonColorEnum, ButtonInputType as ButtonInputTypeEnum, ButtonType as ButtonTypeEnum } from "./ButtonConstants";
4
+ import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
5
+ import { type VibeComponentProps } from "@vibe/shared";
6
+ export interface ButtonProps extends VibeComponentProps {
7
+ children: React.ReactNode;
8
+ /** Custom class names to pass to the component */
9
+ className?: string;
10
+ activeButtonClassName?: string;
11
+ /** The button's kind */
12
+ kind?: ButtonType;
13
+ /** Callback function to run when the button is clicked */
14
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
15
+ onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
16
+ /** Blur on button click */
17
+ blurOnMouseUp?: boolean;
18
+ /** Name of the button - for form submit usages */
19
+ name?: string;
20
+ /** The button's size */
21
+ size?: ButtonSize;
22
+ /** The button's color */
23
+ color?: ButtonColor;
24
+ /** The button's type */
25
+ type?: ButtonInputType;
26
+ /** Whether the button should be disabled or not */
27
+ disabled?: boolean;
28
+ /** Icon to place on the right */
29
+ rightIcon?: SubIcon;
30
+ /** Icon to place on the left */
31
+ leftIcon?: SubIcon;
32
+ /** the success props are used when you have async action and wants to display a success message */
33
+ success?: boolean;
34
+ /** Success icon name */
35
+ successIcon?: SubIcon;
36
+ /** Success text */
37
+ successText?: string;
38
+ /** loading boolean which switches the text to a loader */
39
+ loading?: boolean;
40
+ /** className which is applied to loader container **/
41
+ loaderClassName?: string;
42
+ style?: React.CSSProperties;
43
+ /** displays the active state */
44
+ active?: boolean;
45
+ /** id to pass to the button */
46
+ id?: string;
47
+ /** adds 8px margin to the right */
48
+ marginRight?: boolean;
49
+ /** adds 8px margin to the left */
50
+ marginLeft?: boolean;
51
+ /** element id to describe the button accordingly */
52
+ ariaLabeledBy?: string;
53
+ /** aria label to provide important when providing only Icon */
54
+ ariaLabel?: string;
55
+ /** aria for a button popup */
56
+ ariaHasPopup?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
57
+ /** aria to be set if the popup is open */
58
+ ariaExpanded?: boolean;
59
+ /** aria controls - receives id for the controlled region */
60
+ ariaControls?: string;
61
+ "aria-describedby"?: AriaAttributes["aria-describedby"];
62
+ /**
63
+ * aria to be used for screen reader to know if the button is hidden
64
+ */
65
+ "aria-hidden"?: AriaAttributes["aria-hidden"];
66
+ /**
67
+ * Indicates the current "pressed" state of toggle buttons
68
+ */
69
+ "aria-pressed"?: AriaAttributes["aria-pressed"];
70
+ /** On Button Focus callback */
71
+ onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
72
+ /** On Button Blur callback */
73
+ onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
74
+ rightFlat?: boolean;
75
+ leftFlat?: boolean;
76
+ preventClickAnimation?: boolean;
77
+ noSidePadding?: boolean;
78
+ /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */
79
+ defaultTextColorOnPrimaryColor?: string;
80
+ "data-testid"?: string;
81
+ /** Change the focus indicator from around the button to within it */
82
+ insetFocus?: boolean;
83
+ /** Specifies the tab order of an element */
84
+ tabIndex?: number;
85
+ }
86
+ declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> & {
87
+ sizes: {
88
+ readonly SMALL: "small";
89
+ readonly MEDIUM: "medium";
90
+ readonly LARGE: "large";
91
+ readonly XXS: "xxs";
92
+ readonly XS: "xs";
93
+ };
94
+ colors: typeof ButtonColorEnum;
95
+ kinds: typeof ButtonTypeEnum;
96
+ types: typeof ButtonInputTypeEnum;
97
+ inputTags: typeof ButtonInputTypeEnum;
98
+ };
99
+ export default _default;
@@ -0,0 +1,2 @@
1
+ import e,{forwardRef as a,useRef as t,useEffect as n,useCallback as r,useMemo as o}from"react";import{camelCase as i}from"es-toolkit";import s from"classnames";import{useMergeRef as l,getStyle as c,getTestId as d,ComponentDefaultTestId as m,ComponentVibeId as u,NOOP as p,withStaticProps as f,SIZES as b}from"@vibe/shared";import{Icon as y}from"@vibe/icon";import{Loader as g}from"@vibe/loader";import{ButtonColor as h,ButtonType as v,ButtonInputType as N}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as x,TRANSPARENT_COLOR as E}from"./helper/dom-helpers.js";import C from"./Button.module.scss.js";import{useButtonLoading as F}from"./helper/useButtonLoading.js";var k=f(a((({className:a,children:f,kind:b="primary",onClick:h=p,name:v,size:N="medium",color:k="primary",disabled:B=!1,rightIcon:S=null,leftIcon:T=null,success:I=!1,successText:j="",successIcon:O=null,style:z,loading:L=!1,loaderClassName:P,active:D=!1,activeButtonClassName:M,id:U,marginRight:w=!1,marginLeft:A=!1,type:R="button",onMouseDown:H=p,ariaLabel:q,rightFlat:G=!1,leftFlat:J=!1,preventClickAnimation:K=!1,noSidePadding:Q=!1,onFocus:V=p,onBlur:W=p,ariaLabeledBy:X,defaultTextColorOnPrimaryColor:Y=E,ariaHasPopup:Z,ariaExpanded:$,ariaControls:_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te,blurOnMouseUp:ne=!0,"data-testid":re,insetFocus:oe=!1,tabIndex:ie},se)=>{const le=t(null),ce=l(se,le),{loading:de}=F({isLoading:L});n((()=>{if("on-primary-color"!==k&&"fixed-light"!==k)return;if("primary"!==b)return;if(!le.current)return;const e=le.current;e.style.color=x(e,Y)}),[b,le,k,Y]);const me=r((()=>{const e=le.current;!B&&e&&ne&&e.blur()}),[B,le,ne]),ue=r((e=>{B||de||I?e.preventDefault():h&&h(e)}),[h,B,de,I]),pe=r((e=>{B||de||I?e.preventDefault():H&&H(e)}),[H,B,de,I]),fe=o((()=>{const e=I?"positive":k;return s(a,C.button,c(C,i("size-"+N)),c(C,i("kind-"+b)),c(C,i("color-"+e)),{[C.success]:I,[c(C,i("color-"+e+"-active"))]:D,[M]:D,[C.marginRight]:w,[C.marginLeft]:A,[C.rightFlat]:G,[C.leftFlat]:J,[C.preventClickAnimation]:K,[C.noSidePadding]:Q,[C.disabled]:B,[C.insetFocusStyle]:oe})}),[I,k,a,N,b,D,M,w,A,G,J,K,Q,B,oe]),be=o((()=>({ref:ce,type:R,className:fe,name:v,onMouseUp:me,style:z,onClick:ue,id:U,onFocus:V,onBlur:W,tabIndex:B||ae?-1:ie,"data-testid":re||d(m.BUTTON,U),"data-vibe":u.BUTTON,onMouseDown:pe,"aria-disabled":B,"aria-busy":de,"aria-labelledby":X,"aria-label":q,"aria-haspopup":Z,"aria-expanded":$,"aria-controls":_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te})),[ce,R,fe,v,me,z,ue,U,V,W,ie,re,pe,B,de,X,q,Z,$,_,ee,ae,te]),ye=r((e=>{if("function"==typeof e)switch(N){case"xxs":case"xs":return 16;default:return 20}}),[N]),ge=o((()=>e.Children.toArray(f).some(Boolean)),[f]),he=o((()=>e.createElement(e.Fragment,null,T?e.createElement(y,{iconType:"font",icon:T,iconSize:ye(T),className:s({[C.leftIcon]:ge}),ignoreFocusStyle:!0}):null,f,S?e.createElement(y,{iconType:"font",icon:S,iconSize:ye(S),className:s({[C.rightIcon]:ge}),ignoreFocusStyle:!0}):null)),[f,ge,ye,T,S]);return de?e.createElement("button",Object.assign({},be,{key:U+"-loading"}),e.createElement("span",{className:s(C.loader,P)},e.createElement(g,{className:C.loaderSvg}),e.createElement("span",{"aria-hidden":!0,className:C.textPlaceholder},he))):I?e.createElement("button",Object.assign({},be,{key:U+"-success"}),e.createElement("span",{className:C.successContent},O?e.createElement(y,{iconType:"font",icon:O,iconSize:ye(O),className:s({[C.leftIcon]:!!j}),ignoreFocusStyle:!0}):null,j),e.createElement("span",{"aria-hidden":"true",className:C.textPlaceholder},he)):e.createElement("button",Object.assign({},be,{key:U+"-button"}),he)})),{sizes:b,colors:h,kinds:v,types:N,inputTags:N});export{k as default};
2
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SIZES, useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport {\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum\n} from \"./ButtonConstants\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport {\n getTestId,\n type VibeComponentProps,\n withStaticProps,\n ComponentDefaultTestId,\n ComponentVibeId\n} from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /** Custom class names to pass to the component */\n className?: string;\n activeButtonClassName?: string;\n /** The button's kind */\n kind?: ButtonType;\n /** Callback function to run when the button is clicked */\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** Blur on button click */\n blurOnMouseUp?: boolean;\n /** Name of the button - for form submit usages */\n name?: string;\n /** The button's size */\n size?: ButtonSize;\n /** The button's color */\n color?: ButtonColor;\n /** The button's type */\n type?: ButtonInputType;\n /** Whether the button should be disabled or not */\n disabled?: boolean;\n /** Icon to place on the right */\n rightIcon?: SubIcon;\n /** Icon to place on the left */\n leftIcon?: SubIcon;\n /** the success props are used when you have async action and wants to display a success message */\n success?: boolean;\n /** Success icon name */\n successIcon?: SubIcon;\n /** Success text */\n successText?: string;\n /** loading boolean which switches the text to a loader */\n loading?: boolean;\n /** className which is applied to loader container **/\n loaderClassName?: string;\n style?: React.CSSProperties;\n /** displays the active state */\n active?: boolean;\n /** id to pass to the button */\n id?: string;\n /** adds 8px margin to the right */\n marginRight?: boolean;\n /** adds 8px margin to the left */\n marginLeft?: boolean;\n /** element id to describe the button accordingly */\n ariaLabeledBy?: string;\n /** aria label to provide important when providing only Icon */\n ariaLabel?: string;\n /** aria for a button popup */\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /** aria to be set if the popup is open */\n ariaExpanded?: boolean;\n /** aria controls - receives id for the controlled region */\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /**\n * aria to be used for screen reader to know if the button is hidden\n */\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /**\n * Indicates the current \"pressed\" state of toggle buttons\n */\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /** On Button Focus callback */\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /** On Button Blur callback */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /** Change the focus indicator from around the button to within it */\n insetFocus?: boolean;\n /** Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled || !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: disabled || ariaHidden ? -1 : tabIndex,\n \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n default:\n return 20;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"krBAgZA,IAAeA,EAAAA,EAtSAC,GACb,EAEIC,YACAC,WACAC,OAAO,UACPC,UAAUC,EACVC,OACAC,OAAO,SACPC,QAAQ,UACRC,YAAW,EACXC,YAAY,KACZC,WAAW,KACXC,WAAU,EACVC,cAAc,GACdC,cAAc,KACdC,QACAC,QAASC,GAAY,EACrBC,kBACAC,UAAS,EACTC,wBACAC,KACAC,eAAc,EACdC,cAAa,EACbC,OAAO,SACPC,cAAcpB,EACdqB,YACAC,aAAY,EACZC,YAAW,EACXC,yBAAwB,EACxBC,iBAAgB,EAChBC,UAAU1B,EACV2B,SAAS3B,EACT4B,gBACAC,iCAAiCC,EACjCC,eACAC,eACAC,eACA,mBAAoBC,GACpB,cAAeC,GACf,eAAgBC,GAChBC,kBAAgB,EAChB,cAAeC,GACfC,eAAa,EACbC,aAEFC,MAEA,MAAMC,GAAYC,EAA0B,MACtCC,GAAYC,EAAYJ,GAAKC,KAE7B/B,QAAEA,IAAYmC,EAAiB,CAAElC,cAEvCmC,GAAU,KACR,GAAc,qBAAV5C,GAA0C,gBAAVA,EAAyB,OAC7D,GAAa,YAATL,EAAoB,OACxB,IAAK4C,GAAUM,QAAS,OAExB,MAAMC,EAAgBP,GAAUM,QAChCC,EAAcvC,MAAMP,MAAQ+C,EAAuCD,EAAepB,EAA+B,GAChH,CAAC/B,EAAM4C,GAAWvC,EAAO0B,IAE5B,MAAMsB,GAAYC,GAAY,KAC5B,MAAMC,EAASX,GAAUM,SACrB5C,GAAaiD,GAGbhB,IACFgB,EAAOC,MACR,GACA,CAAClD,EAAUsC,GAAWL,KAEnBkB,GAAkBH,GACrBI,IACKpD,GAAYO,IAAWJ,EACzBiD,EAAMC,iBAIJ1D,GACFA,EAAQyD,EACT,GAEH,CAACzD,EAASK,EAAUO,GAASJ,IAGzBmD,GAAqBN,GACxBI,IACKpD,GAAYO,IAAWJ,EACzBiD,EAAMC,iBAIJrC,GACFA,EAAYoC,EACb,GAEH,CAACpC,EAAahB,EAAUO,GAASJ,IAG7BoD,GAAaC,GAAQ,KACzB,MAAMC,EAAkBtD,EAAU,WAAaJ,EAC/C,OAAO2D,EACLlE,EACAmE,EAAOV,OACPW,EAASD,EAAQE,EAAU,QAAU/D,IACrC8D,EAASD,EAAQE,EAAU,QAAUnE,IACrCkE,EAASD,EAAQE,EAAU,SAAWJ,IACtC,CACE,CAACE,EAAOxD,SAAUA,EAClB,CAACyD,EAASD,EAAQE,EAAU,SAAWJ,EAAkB,aAAc/C,EACvEC,CAACA,GAAwBD,EACzB,CAACiD,EAAO9C,aAAcA,EACtB,CAAC8C,EAAO7C,YAAaA,EACrB,CAAC6C,EAAOzC,WAAYA,EACpB,CAACyC,EAAOxC,UAAWA,EACnB,CAACwC,EAAOvC,uBAAwBA,EAChC,CAACuC,EAAOtC,eAAgBA,EACxB,CAACsC,EAAO3D,UAAWA,EACnB,CAAC2D,EAAOG,iBAAkB3B,IAE7B,GACA,CACDhC,EACAJ,EACAP,EACAM,EACAJ,EACAgB,EACAC,EACAE,EACAC,EACAI,EACAC,EACAC,EACAC,EACArB,EACAmC,KAGI4B,GAAcP,GAAQ,KACa,CACrCnB,IAAKG,GACLzB,OACAvB,UAAW+D,GACX1D,OACAkD,aACAzC,QACAX,QAASwD,GACTvC,KACAU,UACAC,SACAa,SAAUpC,GAAY+B,IAAc,EAAIK,GACxC,cAAeF,IAAc8B,EAAUC,EAAuBC,OAAQtD,GACtE,YAAauD,EAAgBD,OAC7BlD,YAAasC,GACb,gBAAiBtD,EACjB,YAAaO,GACb,kBAAmBiB,EACnB,aAAcP,EACd,gBAAiBU,EACjB,gBAAiBC,EACjB,gBAAiBC,EACjB,mBAAoBC,GACpB,cAAeC,GACf,eAAgBC,MAGjB,CACDQ,GACAzB,EACAwC,GACA1D,EACAkD,GACAzC,EACA6C,GACAvC,EACAU,EACAC,EACAa,GACAF,GACAoB,GACAtD,EACAO,GACAiB,EACAP,EACAU,EACAC,EACAC,EACAC,GACAC,GACAC,KAGIoC,GAAWpB,GACdqB,IACC,GAAoB,mBAATA,EACX,OAAQvE,GACN,IAAK,MACL,IAAK,KACH,OAAO,GACT,QACE,OAAO,GACV,GAEH,CAACA,IAGGwE,GAAwBd,GAAQ,IAAMe,EAAMC,SAASC,QAAQhF,GAAUiF,KAAKC,UAAU,CAAClF,IAEvFmF,GAAgBpB,GACpB,IACEe,EAAAM,cAAAN,EAAAO,SAAA,KACG5E,EACCqE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTX,KAAMnE,EACNkE,SAAUA,GAASlE,GACnBV,UAAWkE,EAAG,CACZ,CAACC,EAAOzD,UAAWoE,KAErBW,kBAAgB,IAEhB,KACHxF,EACAQ,EACCsE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTX,KAAMpE,EACNmE,SAAUA,GAASnE,GACnBT,UAAWkE,EAAG,CACZ,CAACC,EAAO1D,WAAYqE,KAEtBW,kBACA,IACA,OAGR,CAACxF,EAAU6E,GAAuBF,GAAUlE,EAAUD,IAGxD,OAAIM,GAEAgE,0CAAYR,GAAW,CAAEmB,IAAQtE,EAAH,aAC5B2D,EAAMM,cAAA,OAAA,CAAArF,UAAWkE,EAAGC,EAAOwB,OAAQ1E,IACjC8D,EAAAM,cAACO,EAAO,CAAA5F,UAAWmE,EAAO0B,YAC1Bd,EAAkBM,cAAA,OAAA,CAAA,eAAA,EAAArF,UAAWmE,EAAO2B,iBACjCV,MAOPzE,EAEAoE,0CAAYR,GAAW,CAAEmB,IAAQtE,EAAH,aAC5B2D,EAAAM,cAAA,OAAA,CAAMrF,UAAWmE,EAAO4B,gBACrBlF,EACCkE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTX,KAAMhE,EACN+D,SAAUA,GAAS/D,GACnBb,UAAWkE,EAAG,CACZ,CAACC,EAAOzD,YAAaE,IAEvB6E,kBAAgB,IAEhB,KACH7E,GAEHmE,EAAAM,cAAA,OAAA,CAAA,cAAkB,OAAOrF,UAAWmE,EAAO2B,iBACxCV,KAOPL,EAAAM,cAAA,SAAAW,OAAAC,OAAA,CAAA,EAAY1B,GAAW,CAAEmB,IAAQtE,EAAA,YAC9BgE,GACM,IAawD,CACrEc,MAAOC,EACPC,OAAQC,EACRC,MAAOC,EACPC,MAAOC,EACPC,UAAWD"}
@@ -0,0 +1,2 @@
1
+ var o={button:"button","focus-visible":"focus-visible",loader:"loader",loaderSvg:"loaderSvg",textPlaceholder:"textPlaceholder",success:"success",successContent:"successContent",marginRight:"marginRight",marginLeft:"marginLeft",rightFlat:"rightFlat",leftFlat:"leftFlat",preventClickAnimation:"preventClickAnimation",leftIcon:"leftIcon",rightIcon:"rightIcon",sizeXxs:"sizeXxs",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",kindPrimary:"kindPrimary",colorPrimary:"colorPrimary",colorBrand:"colorBrand",colorPrimaryActive:"colorPrimaryActive",colorBrandActive:"colorBrandActive",colorPositive:"colorPositive",colorPositiveActive:"colorPositiveActive",colorNegative:"colorNegative",colorNegativeActive:"colorNegativeActive",colorInverted:"colorInverted",colorInvertedActive:"colorInvertedActive",disabled:"disabled",colorOnPrimaryColor:"colorOnPrimaryColor",colorOnPrimaryColorActive:"colorOnPrimaryColorActive",colorFixedLight:"colorFixedLight",colorFixedLightActive:"colorFixedLightActive",colorFixedDark:"colorFixedDark",colorFixedDarkActive:"colorFixedDarkActive",colorOnInvertedBackground:"colorOnInvertedBackground",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive",kindSecondary:"kindSecondary",kindTertiary:"kindTertiary",noSidePadding:"noSidePadding",insetFocusStyle:"insetFocusStyle"};!function(o){const r="s_id-95d3f630f6d9_3_0_5";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}(".button {\n --loader-padding: 8px;\n outline: none;\n border: none;\n height: auto;\n border-radius: var(--border-radius-small);\n cursor: pointer;\n white-space: nowrap;\n transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Prevent text selection */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n min-width: auto;\n}\n.button:focus-visible, .button.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button:focus:not(.focus-visible) {\n outline: none;\n}\n.button .loader {\n height: 100%;\n}\n.button .loader .loaderSvg {\n position: static;\n height: 100%;\n margin: 0;\n}\n.button .textPlaceholder {\n display: inline-block;\n opacity: 0;\n height: 0;\n visibility: hidden;\n white-space: pre;\n}\n.button.success {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.button.success .successContent {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.marginRight {\n margin-right: var(--spacing-small);\n}\n.marginLeft {\n margin-left: var(--spacing-small);\n}\n.rightFlat {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.leftFlat {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.button:active:not(.preventClickAnimation) {\n transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button .leftIcon {\n margin-right: var(--spacing-small);\n}\n.button .rightIcon {\n margin-left: var(--spacing-small);\n}\n.sizeXxs {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: 2px var(--spacing-xs);\n height: 16px;\n line-height: 16px;\n}\n.sizeXs {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 24px;\n line-height: 21px;\n}\n.sizeSmall {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n padding: var(--spacing-xs) var(--spacing-small);\n height: 32px;\n line-height: 24px;\n}\n.sizeSmall .loader {\n top: 7px;\n}\n.sizeMedium {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: var(--spacing-small) var(--spacing-medium);\n height: 40px;\n}\n.sizeLarge {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text1-normal);\n padding: 12px var(--spacing-large);\n height: 48px;\n}\n.kindPrimary {\n color: var(--text-color-on-primary);\n}\n.kindPrimary.colorPrimary {\n background: var(--primary-color);\n}\n.kindPrimary.colorBrand {\n background: var(--brand-color);\n color: var(--text-color-on-brand);\n}\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n background: var(--primary-hover-color);\n}\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n background: var(--brand-hover-color);\n}\n.kindPrimary.colorPositive {\n background: var(--positive-color);\n}\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n background: var(--positive-color-hover);\n}\n.kindPrimary.colorNegative {\n background: var(--negative-color);\n}\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n background: var(--negative-color-hover);\n}\n.kindPrimary.colorInverted {\n background: var(--inverted-color-background);\n color: var(--text-color-on-inverted);\n}\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n background: var(--placeholder-color);\n}\n.kindPrimary.button.colorInverted.disabled {\n background: var(--disabled-text-color);\n color: var(--disabled-background-color);\n}\n.kindPrimary.colorOnPrimaryColor {\n background: var(--text-color-on-primary);\n}\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorOnPrimaryColorActive:focus-visible, .kindPrimary.colorOnPrimaryColorActive.focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover:focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover.focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus:focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindPrimary.colorOnPrimaryColor.disabled {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindPrimary.colorFixedLight {\n background: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n background-color: #e6e9ef;\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorFixedLightActive:focus-visible, .kindPrimary.colorFixedLightActive.focus-visible,\n.kindPrimary.colorFixedLight:hover:focus-visible,\n.kindPrimary.colorFixedLight:hover.focus-visible,\n.kindPrimary.colorFixedLight:focus:focus-visible,\n.kindPrimary.colorFixedLight:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedLightActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindPrimary.colorFixedLight.disabled {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDark {\n background: var(--fixed-dark-color);\n color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n filter: brightness(125%);\n}\n.kindPrimary.colorFixedDarkActive:focus-visible, .kindPrimary.colorFixedDarkActive.focus-visible,\n.kindPrimary.colorFixedDark:hover:focus-visible,\n.kindPrimary.colorFixedDark:hover.focus-visible,\n.kindPrimary.colorFixedDark:focus:focus-visible,\n.kindPrimary.colorFixedDark:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindPrimary.colorFixedDark.disabled {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindPrimary.colorOnInvertedBackground {\n background: var(--primary-background-color);\n color: var(--primary-text-color);\n}\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n background: var(--ui-background-color);\n}\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n background: var(--ui-background-color);\n color: var(--primary-text-color);\n opacity: 0.5;\n}\n.kindPrimary.button.disabled {\n background: var(--disabled-background-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary {\n border: 1px solid;\n border-color: var(--ui-border-color);\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindSecondary.sizeSmall {\n line-height: 22px;\n}\n.kindSecondary.sizeMedium {\n line-height: 22px;\n}\n.kindSecondary.sizeLarge {\n line-height: 22px;\n}\n.kindSecondary.colorPrimaryActive {\n background-color: var(--primary-selected-color);\n border-color: var(--primary-color);\n}\n.kindSecondary.colorPrimaryActive:hover {\n background-color: var(--primary-selected-hover-color);\n border-color: var(--primary-color);\n}\n.kindSecondary.colorBrandActive {\n color: var(--text-color-on-brand);\n}\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n background-color: var(--brand-selected-color);\n border-color: var(--brand-color);\n}\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorPositive {\n color: var(--positive-color);\n border-color: var(--positive-color);\n}\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n background: var(--positive-color-selected);\n}\n.kindSecondary.colorNegative {\n color: var(--negative-color);\n border-color: var(--negative-color);\n}\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n background: var(--negative-color-selected);\n}\n.kindSecondary.colorInverted {\n color: var(--primary-text-color);\n border-color: var(--primary-text-color);\n}\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorInverted.disabled {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n}\n.kindSecondary.colorOnPrimaryColor {\n color: var(--text-color-on-primary);\n border-color: var(--text-color-on-primary);\n}\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorOnPrimaryColorActive:focus-visible, .kindSecondary.colorOnPrimaryColorActive.focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover:focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover.focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus:focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindSecondary.colorOnPrimaryColor.disabled {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindSecondary.colorFixedLight {\n border-color: var(--fixed-light-color);\n color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorFixedLightActive:focus-visible, .kindSecondary.colorFixedLightActive.focus-visible,\n.kindSecondary.colorFixedLight:hover:focus-visible,\n.kindSecondary.colorFixedLight:hover.focus-visible,\n.kindSecondary.colorFixedLight:focus:focus-visible,\n.kindSecondary.colorFixedLight:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedLightActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindSecondary.colorFixedDark {\n border-color: var(--fixed-dark-color);\n color: var(--fixed-dark-color);\n}\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindSecondary.colorFixedDarkActive:focus-visible, .kindSecondary.colorFixedDarkActive.focus-visible,\n.kindSecondary.colorFixedDark:hover:focus-visible,\n.kindSecondary.colorFixedDark:hover.focus-visible,\n.kindSecondary.colorFixedDark:focus:focus-visible,\n.kindSecondary.colorFixedDark:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindSecondary.colorOnInvertedBackground {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n}\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n background: var(--icon-color);\n}\n.kindSecondary.colorOnInvertedBackground.disabled {\n border-color: var(--text-color-on-inverted);\n color: var(--text-color-on-inverted);\n opacity: 0.5;\n}\n.kindSecondary.colorFixedLight.disabled {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedDark.disabled {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindSecondary.disabled {\n border-color: var(--disabled-text-color);\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindSecondary.disabled:hover {\n background-color: transparent;\n}\n.kindTertiary {\n color: var(--primary-text-color);\n background-color: transparent;\n}\n.kindTertiary.colorPrimaryActive {\n background-color: var(--primary-selected-color);\n}\n.kindTertiary.colorPrimaryActive:hover {\n background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary.colorBrandActive {\n color: var(--text-color-on-brand);\n}\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n background-color: var(--brand-selected-color);\n}\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorPositive {\n color: var(--positive-color);\n}\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n background: var(--positive-color-selected);\n}\n.kindTertiary.colorNegative {\n color: var(--negative-color);\n}\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n background: var(--negative-color-selected);\n}\n.kindTertiary.colorInverted {\n color: var(--primary-text-color);\n}\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorInverted.disabled {\n color: var(--disabled-text-color);\n}\n.kindTertiary.colorOnPrimaryColor {\n color: var(--text-color-on-primary);\n}\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorOnPrimaryColorActive:focus-visible, .kindTertiary.colorOnPrimaryColorActive.focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover:focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover.focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus:focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindTertiary.colorOnPrimaryColor.disabled {\n opacity: 0.5;\n color: var(--text-color-on-primary);\n}\n.kindTertiary.colorFixedLight {\n color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n -webkit-backdrop-filter: brightness(85%);\n backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorFixedLightActive:focus-visible, .kindTertiary.colorFixedLightActive.focus-visible,\n.kindTertiary.colorFixedLight:hover:focus-visible,\n.kindTertiary.colorFixedLight:hover.focus-visible,\n.kindTertiary.colorFixedLight:focus:focus-visible,\n.kindTertiary.colorFixedLight:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedLightActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindTertiary.colorFixedLight.disabled {\n opacity: 0.5;\n color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedDark {\n color: var(--fixed-dark-color);\n}\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n background-color: var(--primary-background-hover-color);\n}\n.kindTertiary.colorFixedDarkActive:focus-visible, .kindTertiary.colorFixedDarkActive.focus-visible,\n.kindTertiary.colorFixedDark:hover:focus-visible,\n.kindTertiary.colorFixedDark:hover.focus-visible,\n.kindTertiary.colorFixedDark:focus:focus-visible,\n.kindTertiary.colorFixedDark:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:focus:focus:not(.focus-visible) {\n outline: none;\n}\n.kindTertiary.colorFixedDark.disabled {\n opacity: 0.5;\n color: var(--fixed-dark-color);\n}\n.kindTertiary.colorOnInvertedBackground {\n color: var(--text-color-on-inverted);\n}\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n background: var(--icon-color);\n}\n.kindTertiary.colorOnInvertedBackground.disabled {\n background: var(--icon-color);\n opacity: 0.5;\n color: var(--text-color-on-inverted);\n}\n.kindTertiary.disabled {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n pointer-events: none;\n}\n.kindTertiary.disabled:hover {\n background-color: transparent;\n}\n.noSidePadding {\n padding-right: 0;\n padding-left: 0;\n}\n.button.insetFocusStyle:focus-visible, .button.insetFocusStyle.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button.insetFocusStyle:focus:not(.focus-visible) {\n outline: none;\n}");export{o as default};
2
+ //# sourceMappingURL=Button.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,4 @@
1
+ export type ButtonType = "primary" | "secondary" | "tertiary";
2
+ export type ButtonInputType = "button" | "submit" | "reset";
3
+ export type ButtonColor = "primary" | "positive" | "negative" | "inverted" | "on-primary-color" | "on-inverted-background" | "brand" | "fixed-light" | "fixed-dark";
4
+ export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
@@ -0,0 +1,35 @@
1
+ import { type SIZES } from "@vibe/shared";
2
+ /**
3
+ * @deprecated
4
+ */
5
+ export declare enum ButtonType {
6
+ PRIMARY = "primary",
7
+ SECONDARY = "secondary",
8
+ TERTIARY = "tertiary"
9
+ }
10
+ /**
11
+ * @deprecated
12
+ */
13
+ export declare enum ButtonColor {
14
+ PRIMARY = "primary",
15
+ POSITIVE = "positive",
16
+ NEGATIVE = "negative",
17
+ INVERTED = "inverted",
18
+ ON_PRIMARY_COLOR = "on-primary-color",
19
+ ON_INVERTED_BACKGROUND = "on-inverted-background",
20
+ BRAND = "brand",
21
+ FIXED_LIGHT = "fixed-light",
22
+ FIXED_DARK = "fixed-dark"
23
+ }
24
+ export type Size = (typeof SIZES)[keyof typeof SIZES];
25
+ export declare const BUTTON_KIND_CLASS_NAMES: {
26
+ PRIMARY: string;
27
+ };
28
+ /**
29
+ * @deprecated
30
+ */
31
+ export declare enum ButtonInputType {
32
+ BUTTON = "button",
33
+ SUBMIT = "submit",
34
+ RESET = "reset"
35
+ }
@@ -0,0 +1,2 @@
1
+ var r,i,R;!function(r){r.PRIMARY="primary",r.SECONDARY="secondary",r.TERTIARY="tertiary"}(r||(r={})),function(r){r.PRIMARY="primary",r.POSITIVE="positive",r.NEGATIVE="negative",r.INVERTED="inverted",r.ON_PRIMARY_COLOR="on-primary-color",r.ON_INVERTED_BACKGROUND="on-inverted-background",r.BRAND="brand",r.FIXED_LIGHT="fixed-light",r.FIXED_DARK="fixed-dark"}(i||(i={})),function(r){r.BUTTON="button",r.SUBMIT="submit",r.RESET="reset"}(R||(R={}));export{i as ButtonColor,R as ButtonInputType,r as ButtonType};
2
+ //# sourceMappingURL=ButtonConstants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonConstants.js","sources":["../../../src/Button/ButtonConstants.ts"],"sourcesContent":["import { type SIZES } from \"@vibe/shared\";\n\n/**\n * @deprecated\n */\nexport enum ButtonType {\n PRIMARY = \"primary\",\n SECONDARY = \"secondary\",\n TERTIARY = \"tertiary\"\n}\n\n/**\n * @deprecated\n */\nexport enum ButtonColor {\n PRIMARY = \"primary\",\n POSITIVE = \"positive\",\n NEGATIVE = \"negative\",\n INVERTED = \"inverted\",\n ON_PRIMARY_COLOR = \"on-primary-color\",\n ON_INVERTED_BACKGROUND = \"on-inverted-background\",\n BRAND = \"brand\",\n FIXED_LIGHT = \"fixed-light\",\n FIXED_DARK = \"fixed-dark\"\n}\n\nexport type Size = (typeof SIZES)[keyof typeof SIZES];\n\nexport const BUTTON_KIND_CLASS_NAMES = {\n PRIMARY: \"\"\n};\n\n/**\n * @deprecated\n */\nexport enum ButtonInputType {\n BUTTON = \"button\",\n SUBMIT = \"submit\",\n RESET = \"reset\"\n}\n"],"names":["ButtonType","ButtonColor","ButtonInputType"],"mappings":"IAKYA,EASAC,EAqBAC,GA9BZ,SAAYF,GACVA,EAAA,QAAA,UACAA,EAAA,UAAA,YACAA,EAAA,SAAA,UACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,WACAA,EAAA,SAAA,WACAA,EAAA,iBAAA,mBACAA,EAAA,uBAAA,yBACAA,EAAA,MAAA,QACAA,EAAA,YAAA,cACAA,EAAA,WAAA,YACD,CAVD,CAAYA,IAAAA,EAUX,CAAA,IAWD,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
@@ -0,0 +1,2 @@
1
+ export declare const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
2
+ export declare function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string;
@@ -0,0 +1,2 @@
1
+ const t="rgba(0, 0, 0, 0)";function e(n,o){const r=n.parentElement;if(n===n.parentElement)return n?window.getComputedStyle(n).backgroundColor:o;if(!r)return o;const u=window.getComputedStyle(r).backgroundColor;return u&&u!==o?u===t?o:u:e(r,o)}export{t as TRANSPARENT_COLOR,e as getParentBackgroundColorNotTransparent};
2
+ //# sourceMappingURL=dom-helpers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom-helpers.js","sources":["../../../../src/Button/helper/dom-helpers.ts"],"sourcesContent":["export const TRANSPARENT_COLOR = \"rgba(0, 0, 0, 0)\";\n\nexport function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string {\n const parentElement = element.parentElement;\n if (element === element.parentElement) {\n if (!element) {\n return defaultColor;\n }\n\n return window.getComputedStyle(element).backgroundColor;\n }\n\n if (!parentElement) {\n return defaultColor;\n }\n\n const backgroundColor = window.getComputedStyle(parentElement).backgroundColor;\n if (!backgroundColor || backgroundColor === defaultColor) {\n return getParentBackgroundColorNotTransparent(parentElement, defaultColor);\n }\n\n return backgroundColor === TRANSPARENT_COLOR ? defaultColor : backgroundColor;\n}\n"],"names":["TRANSPARENT_COLOR","getParentBackgroundColorNotTransparent","element","defaultColor","parentElement","window","getComputedStyle","backgroundColor"],"mappings":"AAAO,MAAMA,EAAoB,mBAEjB,SAAAC,EAAuCC,EAAsBC,GAC3E,MAAMC,EAAgBF,EAAQE,cAC9B,GAAIF,IAAYA,EAAQE,cACtB,OAAKF,EAIEG,OAAOC,iBAAiBJ,GAASK,gBAH/BJ,EAMX,IAAKC,EACH,OAAOD,EAGT,MAAMI,EAAkBF,OAAOC,iBAAiBF,GAAeG,gBAC/D,OAAKA,GAAmBA,IAAoBJ,EAIrCI,IAAoBP,EAAoBG,EAAeI,EAHrDN,EAAuCG,EAAeD,EAIjE"}
@@ -0,0 +1,5 @@
1
+ export declare function useButtonLoading({ isLoading }: {
2
+ isLoading: boolean;
3
+ }): {
4
+ loading: boolean;
5
+ };
@@ -0,0 +1,2 @@
1
+ import{useState as n,useEffect as o}from"react";function i({isLoading:i}){const[r,t]=n(i);return o((()=>{const n=window.requestAnimationFrame((()=>{t(i)}));return()=>{window.cancelAnimationFrame(n)}}),[i]),{loading:r}}export{i as useButtonLoading};
2
+ //# sourceMappingURL=useButtonLoading.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useButtonLoading.js","sources":["../../../../src/Button/helper/useButtonLoading.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useButtonLoading({ isLoading }: { isLoading: boolean }): { loading: boolean } {\n const [loading, setLoading] = useState(isLoading);\n\n useEffect(() => {\n const frameId = window.requestAnimationFrame(() => {\n setLoading(isLoading);\n });\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, [isLoading]);\n\n return { loading };\n}\n"],"names":["useButtonLoading","isLoading","loading","setLoading","useState","useEffect","frameId","window","requestAnimationFrame","cancelAnimationFrame"],"mappings":"gDAEgB,SAAAA,GAAiBC,UAAEA,IACjC,MAAOC,EAASC,GAAcC,EAASH,GAWvC,OATAI,GAAU,KACR,MAAMC,EAAUC,OAAOC,uBAAsB,KAC3CL,EAAWF,EAAU,IAEvB,MAAO,KACLM,OAAOE,qBAAqBH,EAAQ,CACrC,GACA,CAACL,IAEG,CAAEC,UACX"}
@@ -0,0 +1,2 @@
1
+ export { default as Button, type ButtonProps } from "./Button";
2
+ export * from "./Button.types";
@@ -0,0 +1 @@
1
+ export * from "./Button";
@@ -0,0 +1,2 @@
1
+ export{default as Button}from"./Button/Button.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibe/button",
3
- "version": "3.0.5",
3
+ "version": "3.0.6-alpha-1b943.0",
4
4
  "description": "Vibe sub-package for button components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -25,23 +25,27 @@
25
25
  "types": "./dist/index.d.ts",
26
26
  "import": "./dist/index.js",
27
27
  "default": "./dist/index.js"
28
+ },
29
+ "./mockedClassNames": {
30
+ "import": "./dist/mocked_classnames/src/index.js",
31
+ "default": "./dist/mocked_classnames/src/index.js"
28
32
  }
29
33
  },
30
34
  "scripts": {
31
- "build": "rollup -c",
35
+ "build": "rollup -c && mock_classnames=on rollup -c",
32
36
  "test": "vitest run",
33
37
  "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
34
38
  },
35
39
  "dependencies": {
36
- "@vibe/icon": "3.0.5",
37
- "@vibe/loader": "3.0.5",
38
- "@vibe/shared": "3.0.5",
40
+ "@vibe/icon": "3.0.6-alpha-1b943.0",
41
+ "@vibe/loader": "3.0.6-alpha-1b943.0",
42
+ "@vibe/shared": "3.0.6-alpha-1b943.0",
39
43
  "classnames": "^2.5.1",
40
44
  "es-toolkit": "^1.39.10"
41
45
  },
42
46
  "devDependencies": {
43
47
  "@testing-library/react": "^12.1.2",
44
- "@vibe/config": "3.0.4",
48
+ "@vibe/config": "3.0.5-alpha-1b943.0",
45
49
  "@vibe/icons": "1.11.1",
46
50
  "react": "^16.13.0",
47
51
  "react-dom": "^16.13.0",
@@ -64,5 +68,5 @@
64
68
  "../../../node_modules/@vibe/config/.eslintrc.cjs"
65
69
  ]
66
70
  },
67
- "gitHead": "6c414e65054f03580caae3d776a0871f409d78d6"
71
+ "gitHead": "fa390b319ba3072c60124a503b35cc3efe8e2d52"
68
72
  }