npm - @vibe/core - Versions diffs - 3.36.0-alpha-94da6.0 → 3.37.0-alpha-6e9f2.0 - Mend

@vibe/core 3.36.0-alpha-94da6.0 → 3.37.0-alpha-6e9f2.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.

Files changed (935) hide show

package/dist/src/components/Button/Button.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var o={button:"button_a78c501a6d","focus-visible":"focus-visible_eb6b496cf8",loader:"loader_b96f7be674",loaderSvg:"loaderSvg_bf2bbcfc9e",textPlaceholder:"textPlaceholder_e09cc791b7",success:"success_189a87ef89",successContent:"successContent_4a031f41f8",marginRight:"marginRight_2e6da877c0",marginLeft:"marginLeft_3863072f51",rightFlat:"rightFlat_28570a2c82",leftFlat:"leftFlat_bc880c07b6",preventClickAnimation:"preventClickAnimation_ce51ffcdb0",leftIcon:"leftIcon_2e6da877c0",rightIcon:"rightIcon_3863072f51",sizeXxs:"sizeXxs_c68f72cb21",sizeXs:"sizeXs_dd5a5d6e4d",sizeSmall:"sizeSmall_ba27d4ff20",sizeMedium:"sizeMedium_fd6dfc021d",sizeLarge:"sizeLarge_e397e15ae5",kindPrimary:"kindPrimary_5744ef2742",colorPrimary:"colorPrimary_42abda22de",colorBrand:"colorBrand_685f5f821d",colorPrimaryActive:"colorPrimaryActive_f3ecd2c144",colorBrandActive:"colorBrandActive_770cfefd86",colorPositive:"colorPositive_bcee42de07",colorPositiveActive:"colorPositiveActive_700c9e363c",colorNegative:"colorNegative_5cd15ae6f7",colorNegativeActive:"colorNegativeActive_700c9e363c",colorInverted:"colorInverted_c83c10179b",colorInvertedActive:"colorInvertedActive_700c9e363c",disabled:"disabled_5462544050",colorOnPrimaryColor:"colorOnPrimaryColor_f8adc1b52e",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_68fdb6b899",colorFixedLight:"colorFixedLight_6face580b5",colorFixedLightActive:"colorFixedLightActive_ce51ffcdb0",colorFixedDark:"colorFixedDark_9d9ed1fd63",colorFixedDarkActive:"colorFixedDarkActive_aa66a8cb5d",colorOnInvertedBackground:"colorOnInvertedBackground_a83ee4b9b0",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_91daa1516d",kindSecondary:"kindSecondary_888a4b7694",kindTertiary:"kindTertiary_815f9f48c9",noSidePadding:"noSidePadding_08d6583214",insetFocusStyle:"insetFocusStyle_df2a372550"};!function(o){const r="s_id-f5db469b1a79_3_35_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}(".button_a78c501a6d {\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  user-select: none;\n  min-width: auto;\n}\n.button_a78c501a6d:focus-visible, .button_a78c501a6d.focus-visible_eb6b496cf8 {\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_a78c501a6d:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.button_a78c501a6d .loader_b96f7be674 {\n  height: 100%;\n}\n.button_a78c501a6d .loader_b96f7be674 .loaderSvg_bf2bbcfc9e {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_a78c501a6d .textPlaceholder_e09cc791b7 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_a78c501a6d.success_189a87ef89 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_a78c501a6d.success_189a87ef89 .successContent_4a031f41f8 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_2e6da877c0 {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_3863072f51 {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_28570a2c82 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_bc880c07b6 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_a78c501a6d:active:not(.preventClickAnimation_ce51ffcdb0) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_a78c501a6d .leftIcon_2e6da877c0 {\n  margin-right: var(--spacing-small);\n}\n.button_a78c501a6d .rightIcon_3863072f51 {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_c68f72cb21 {\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_dd5a5d6e4d {\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_ba27d4ff20 {\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_ba27d4ff20 .loader_b96f7be674 {\n  top: 7px;\n}\n.sizeMedium_fd6dfc021d {\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_e397e15ae5 {\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_5744ef2742 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorPrimary_42abda22de {\n  background: var(--primary-color);\n}\n.kindPrimary_5744ef2742.colorBrand_685f5f821d {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_5744ef2742.colorPrimaryActive_f3ecd2c144,\n.kindPrimary_5744ef2742.colorPrimary_42abda22de:hover,\n.kindPrimary_5744ef2742.colorPrimary_42abda22de:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_5744ef2742.colorBrandActive_770cfefd86,\n.kindPrimary_5744ef2742.colorBrand_685f5f821d:hover,\n.kindPrimary_5744ef2742.colorBrand_685f5f821d:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_5744ef2742.colorPositive_bcee42de07 {\n  background: var(--positive-color);\n}\n.kindPrimary_5744ef2742.colorPositiveActive_700c9e363c,\n.kindPrimary_5744ef2742.colorPositive_bcee42de07:hover,\n.kindPrimary_5744ef2742.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7 {\n  background: var(--negative-color);\n}\n.kindPrimary_5744ef2742.colorNegativeActive_700c9e363c,\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7:hover,\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_5744ef2742.colorInverted_c83c10179b {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_5744ef2742.colorInvertedActive_700c9e363c,\n.kindPrimary_5744ef2742.colorInverted_c83c10179b:hover,\n.kindPrimary_5744ef2742.colorInverted_c83c10179b:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.colorInverted_c83c10179b.disabled_5462544050 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\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_5744ef2742.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover:focus-visible,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus:focus-visible,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\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_5744ef2742.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\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_5744ef2742.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_5744ef2742.colorOnInvertedBackgroundActive_91daa1516d,\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.disabled_5462544050 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_888a4b7694 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_888a4b7694.sizeSmall_ba27d4ff20 {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.sizeMedium_fd6dfc021d {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.sizeLarge_e397e15ae5 {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.colorPrimaryActive_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_888a4b7694.colorPrimaryActive_f3ecd2c144:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86,\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_888a4b7694.colorPrimary_42abda22de:hover:not(.colorPrimaryActive_f3ecd2c144),\n.kindSecondary_888a4b7694.colorPrimary_42abda22de:focus:not(.colorPrimaryActive_f3ecd2c144) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorBrand_685f5f821d:hover:not(.colorBrandActive_770cfefd86),\n.kindSecondary_888a4b7694.colorBrand_685f5f821d:focus:not(.colorBrandActive_770cfefd86) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorPositive_bcee42de07 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_888a4b7694.colorPositiveActive_700c9e363c,\n.kindSecondary_888a4b7694.colorPositive_bcee42de07:hover,\n.kindSecondary_888a4b7694.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_888a4b7694.colorNegativeActive_700c9e363c,\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7:hover,\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_888a4b7694.colorInverted_c83c10179b {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_888a4b7694.colorInvertedActive_700c9e363c,\n.kindSecondary_888a4b7694.colorInverted_c83c10179b:hover,\n.kindSecondary_888a4b7694.colorInverted_c83c10179b:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorInverted_c83c10179b.disabled_5462544050 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\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_888a4b7694.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover:focus-visible,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus:focus-visible,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\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_888a4b7694.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\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_888a4b7694.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackgroundActive_91daa1516d,\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_888a4b7694.disabled_5462544050 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_888a4b7694.disabled_5462544050:hover {\n  background-color: transparent;\n}\n.kindTertiary_815f9f48c9 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_815f9f48c9.colorPrimaryActive_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_815f9f48c9.colorPrimaryActive_f3ecd2c144:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86,\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_815f9f48c9.colorPrimary_42abda22de:hover:not(.colorPrimaryActive_f3ecd2c144),\n.kindTertiary_815f9f48c9.colorPrimary_42abda22de:focus:not(.colorPrimaryActive_f3ecd2c144) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorBrand_685f5f821d:hover:not(.colorBrandActive_770cfefd86),\n.kindTertiary_815f9f48c9.colorBrand_685f5f821d:focus:not(.colorBrandActive_770cfefd86) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07 {\n  color: var(--positive-color);\n}\n.kindTertiary_815f9f48c9.colorPositiveActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07:hover,\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7 {\n  color: var(--negative-color);\n}\n.kindTertiary_815f9f48c9.colorNegativeActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7:hover,\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b {\n  color: var(--primary-text-color);\n}\n.kindTertiary_815f9f48c9.colorInvertedActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b:hover,\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b.disabled_5462544050 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\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_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\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_815f9f48c9.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\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_815f9f48c9.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackgroundActive_91daa1516d,\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_815f9f48c9.disabled_5462544050 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_815f9f48c9.disabled_5462544050:hover {\n  background-color: transparent;\n}\n.noSidePadding_08d6583214 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_a78c501a6d.insetFocusStyle_df2a372550:focus-visible, .button_a78c501a6d.insetFocusStyle_df2a372550.focus-visible_eb6b496cf8 {\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_a78c501a6d.insetFocusStyle_df2a372550:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}");export{o as default};
+var o={button:"button_0341f559c1","focus-visible":"focus-visible_b16f0a68d0",loader:"loader_f26abe14da",loaderSvg:"loaderSvg_c612007813",textPlaceholder:"textPlaceholder_d4bfd2d376",success:"success_20edc658b2",successContent:"successContent_c7c3ddbe5a",marginRight:"marginRight_0056fbf0f5",marginLeft:"marginLeft_bd3109832d",rightFlat:"rightFlat_9d2ec332d8",leftFlat:"leftFlat_141e7d6672",preventClickAnimation:"preventClickAnimation_74efbb8c53",leftIcon:"leftIcon_0056fbf0f5",rightIcon:"rightIcon_bd3109832d",sizeXxs:"sizeXxs_d8d986502f",sizeXs:"sizeXs_8eb5ce15bc",sizeSmall:"sizeSmall_11f28d0823",sizeMedium:"sizeMedium_7a97e138f8",sizeLarge:"sizeLarge_128bcf151a",kindPrimary:"kindPrimary_6fd20e94c5",colorPrimary:"colorPrimary_84bcbf8aa3",colorBrand:"colorBrand_3deda17c16",colorPrimaryActive:"colorPrimaryActive_d3874081c1",colorBrandActive:"colorBrandActive_f5842c37b4",colorPositive:"colorPositive_1608985811",colorPositiveActive:"colorPositiveActive_6b13411f92",colorNegative:"colorNegative_5fca2ea9b6",colorNegativeActive:"colorNegativeActive_6b13411f92",colorInverted:"colorInverted_81f66ae763",colorInvertedActive:"colorInvertedActive_6b13411f92",disabled:"disabled_d47c0fd1f4",colorOnPrimaryColor:"colorOnPrimaryColor_3f40ed40a2",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_56548b9731",colorFixedLight:"colorFixedLight_ab277bfe37",colorFixedLightActive:"colorFixedLightActive_74efbb8c53",colorFixedDark:"colorFixedDark_c3d8eda736",colorFixedDarkActive:"colorFixedDarkActive_519a2d3c8d",colorOnInvertedBackground:"colorOnInvertedBackground_d23bc15692",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_433d8b9978",kindSecondary:"kindSecondary_3d092eeee2",kindTertiary:"kindTertiary_614bf35a56",noSidePadding:"noSidePadding_cdc8a5cdfa",insetFocusStyle:"insetFocusStyle_aa3eaabe91"};!function(o){const r="s_id-f5db469b1a79_3_36_0";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_0341f559c1 {\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  user-select: none;\n  min-width: auto;\n}\n.button_0341f559c1:focus-visible, .button_0341f559c1.focus-visible_b16f0a68d0 {\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_0341f559c1:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.button_0341f559c1 .loader_f26abe14da {\n  height: 100%;\n}\n.button_0341f559c1 .loader_f26abe14da .loaderSvg_c612007813 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_0341f559c1 .textPlaceholder_d4bfd2d376 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_0341f559c1.success_20edc658b2 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_0341f559c1.success_20edc658b2 .successContent_c7c3ddbe5a {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_0056fbf0f5 {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_bd3109832d {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_9d2ec332d8 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_141e7d6672 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_0341f559c1:active:not(.preventClickAnimation_74efbb8c53) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_0341f559c1 .leftIcon_0056fbf0f5 {\n  margin-right: var(--spacing-small);\n}\n.button_0341f559c1 .rightIcon_bd3109832d {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_d8d986502f {\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_8eb5ce15bc {\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_11f28d0823 {\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_11f28d0823 .loader_f26abe14da {\n  top: 7px;\n}\n.sizeMedium_7a97e138f8 {\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_128bcf151a {\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_6fd20e94c5 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_6fd20e94c5.colorPrimary_84bcbf8aa3 {\n  background: var(--primary-color);\n}\n.kindPrimary_6fd20e94c5.colorBrand_3deda17c16 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_6fd20e94c5.colorPrimaryActive_d3874081c1,\n.kindPrimary_6fd20e94c5.colorPrimary_84bcbf8aa3:hover,\n.kindPrimary_6fd20e94c5.colorPrimary_84bcbf8aa3:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_6fd20e94c5.colorBrandActive_f5842c37b4,\n.kindPrimary_6fd20e94c5.colorBrand_3deda17c16:hover,\n.kindPrimary_6fd20e94c5.colorBrand_3deda17c16:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_6fd20e94c5.colorPositive_1608985811 {\n  background: var(--positive-color);\n}\n.kindPrimary_6fd20e94c5.colorPositiveActive_6b13411f92,\n.kindPrimary_6fd20e94c5.colorPositive_1608985811:hover,\n.kindPrimary_6fd20e94c5.colorPositive_1608985811:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_6fd20e94c5.colorNegative_5fca2ea9b6 {\n  background: var(--negative-color);\n}\n.kindPrimary_6fd20e94c5.colorNegativeActive_6b13411f92,\n.kindPrimary_6fd20e94c5.colorNegative_5fca2ea9b6:hover,\n.kindPrimary_6fd20e94c5.colorNegative_5fca2ea9b6:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_6fd20e94c5.colorInverted_81f66ae763 {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_6fd20e94c5.colorInvertedActive_6b13411f92,\n.kindPrimary_6fd20e94c5.colorInverted_81f66ae763:hover,\n.kindPrimary_6fd20e94c5.colorInverted_81f66ae763:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_6fd20e94c5.button_0341f559c1.colorInverted_81f66ae763.disabled_d47c0fd1f4 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2 {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_6fd20e94c5.colorOnPrimaryColorActive_56548b9731,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:hover,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_6fd20e94c5.colorOnPrimaryColorActive_56548b9731:focus-visible, .kindPrimary_6fd20e94c5.colorOnPrimaryColorActive_56548b9731.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:hover:focus-visible,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:hover.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:focus:focus-visible,\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:focus.focus-visible_b16f0a68d0 {\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_6fd20e94c5.colorOnPrimaryColorActive_56548b9731:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindPrimary_6fd20e94c5.colorOnPrimaryColor_3f40ed40a2.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_6fd20e94c5.colorFixedLightActive_74efbb8c53,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:hover,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_6fd20e94c5.colorFixedLightActive_74efbb8c53:focus-visible, .kindPrimary_6fd20e94c5.colorFixedLightActive_74efbb8c53.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:hover:focus-visible,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:hover.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:focus:focus-visible,\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:focus.focus-visible_b16f0a68d0 {\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_6fd20e94c5.colorFixedLightActive_74efbb8c53:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindPrimary_6fd20e94c5.colorFixedLight_ab277bfe37.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_6fd20e94c5.colorFixedDarkActive_519a2d3c8d,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:hover,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_6fd20e94c5.colorFixedDarkActive_519a2d3c8d:focus-visible, .kindPrimary_6fd20e94c5.colorFixedDarkActive_519a2d3c8d.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:hover:focus-visible,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:hover.focus-visible_b16f0a68d0,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:focus:focus-visible,\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:focus.focus-visible_b16f0a68d0 {\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_6fd20e94c5.colorFixedDarkActive_519a2d3c8d:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindPrimary_6fd20e94c5.colorFixedDark_c3d8eda736.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_6fd20e94c5.colorOnInvertedBackground_d23bc15692 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_6fd20e94c5.colorOnInvertedBackgroundActive_433d8b9978,\n.kindPrimary_6fd20e94c5.colorOnInvertedBackground_d23bc15692:hover,\n.kindPrimary_6fd20e94c5.colorOnInvertedBackground_d23bc15692:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_6fd20e94c5.button_0341f559c1.colorOnInvertedBackground_d23bc15692.disabled_d47c0fd1f4 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_6fd20e94c5.button_0341f559c1.disabled_d47c0fd1f4 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_3d092eeee2 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_3d092eeee2.sizeSmall_11f28d0823 {\n  line-height: 22px;\n}\n.kindSecondary_3d092eeee2.sizeMedium_7a97e138f8 {\n  line-height: 22px;\n}\n.kindSecondary_3d092eeee2.sizeLarge_128bcf151a {\n  line-height: 22px;\n}\n.kindSecondary_3d092eeee2.colorPrimaryActive_d3874081c1 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_3d092eeee2.colorPrimaryActive_d3874081c1:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_3d092eeee2.colorBrandActive_f5842c37b4 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_3d092eeee2.colorBrandActive_f5842c37b4,\n.kindSecondary_3d092eeee2.colorBrandActive_f5842c37b4:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_3d092eeee2.colorPrimary_84bcbf8aa3:hover:not(.colorPrimaryActive_d3874081c1),\n.kindSecondary_3d092eeee2.colorPrimary_84bcbf8aa3:focus:not(.colorPrimaryActive_d3874081c1) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3d092eeee2.colorBrand_3deda17c16:hover:not(.colorBrandActive_f5842c37b4),\n.kindSecondary_3d092eeee2.colorBrand_3deda17c16:focus:not(.colorBrandActive_f5842c37b4) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3d092eeee2.colorPositive_1608985811 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_3d092eeee2.colorPositiveActive_6b13411f92,\n.kindSecondary_3d092eeee2.colorPositive_1608985811:hover,\n.kindSecondary_3d092eeee2.colorPositive_1608985811:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_3d092eeee2.colorNegative_5fca2ea9b6 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_3d092eeee2.colorNegativeActive_6b13411f92,\n.kindSecondary_3d092eeee2.colorNegative_5fca2ea9b6:hover,\n.kindSecondary_3d092eeee2.colorNegative_5fca2ea9b6:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_3d092eeee2.colorInverted_81f66ae763 {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_3d092eeee2.colorInvertedActive_6b13411f92,\n.kindSecondary_3d092eeee2.colorInverted_81f66ae763:hover,\n.kindSecondary_3d092eeee2.colorInverted_81f66ae763:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3d092eeee2.colorInverted_81f66ae763.disabled_d47c0fd1f4 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2 {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_3d092eeee2.colorOnPrimaryColorActive_56548b9731,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:hover,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_3d092eeee2.colorOnPrimaryColorActive_56548b9731:focus-visible, .kindSecondary_3d092eeee2.colorOnPrimaryColorActive_56548b9731.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:hover:focus-visible,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:hover.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:focus:focus-visible,\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:focus.focus-visible_b16f0a68d0 {\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_3d092eeee2.colorOnPrimaryColorActive_56548b9731:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindSecondary_3d092eeee2.colorOnPrimaryColor_3f40ed40a2.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_3d092eeee2.colorFixedLightActive_74efbb8c53,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:hover,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_3d092eeee2.colorFixedLightActive_74efbb8c53:focus-visible, .kindSecondary_3d092eeee2.colorFixedLightActive_74efbb8c53.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:hover:focus-visible,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:hover.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:focus:focus-visible,\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:focus.focus-visible_b16f0a68d0 {\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_3d092eeee2.colorFixedLightActive_74efbb8c53:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_3d092eeee2.colorFixedDarkActive_519a2d3c8d,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:hover,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_3d092eeee2.colorFixedDarkActive_519a2d3c8d:focus-visible, .kindSecondary_3d092eeee2.colorFixedDarkActive_519a2d3c8d.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:hover:focus-visible,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:hover.focus-visible_b16f0a68d0,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:focus:focus-visible,\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:focus.focus-visible_b16f0a68d0 {\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_3d092eeee2.colorFixedDarkActive_519a2d3c8d:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindSecondary_3d092eeee2.colorOnInvertedBackground_d23bc15692 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_3d092eeee2.colorOnInvertedBackgroundActive_433d8b9978,\n.kindSecondary_3d092eeee2.colorOnInvertedBackground_d23bc15692:hover,\n.kindSecondary_3d092eeee2.colorOnInvertedBackground_d23bc15692:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_3d092eeee2.colorOnInvertedBackground_d23bc15692.disabled_d47c0fd1f4 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_3d092eeee2.colorFixedLight_ab277bfe37.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_3d092eeee2.colorFixedDark_c3d8eda736.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_3d092eeee2.disabled_d47c0fd1f4 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_3d092eeee2.disabled_d47c0fd1f4:hover {\n  background-color: transparent;\n}\n.kindTertiary_614bf35a56 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_614bf35a56.colorPrimaryActive_d3874081c1 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_614bf35a56.colorPrimaryActive_d3874081c1:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_614bf35a56.colorBrandActive_f5842c37b4 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_614bf35a56.colorBrandActive_f5842c37b4,\n.kindTertiary_614bf35a56.colorBrandActive_f5842c37b4:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_614bf35a56.colorPrimary_84bcbf8aa3:hover:not(.colorPrimaryActive_d3874081c1),\n.kindTertiary_614bf35a56.colorPrimary_84bcbf8aa3:focus:not(.colorPrimaryActive_d3874081c1) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_614bf35a56.colorBrand_3deda17c16:hover:not(.colorBrandActive_f5842c37b4),\n.kindTertiary_614bf35a56.colorBrand_3deda17c16:focus:not(.colorBrandActive_f5842c37b4) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_614bf35a56.colorPositive_1608985811 {\n  color: var(--positive-color);\n}\n.kindTertiary_614bf35a56.colorPositiveActive_6b13411f92,\n.kindTertiary_614bf35a56.colorPositive_1608985811:hover,\n.kindTertiary_614bf35a56.colorPositive_1608985811:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_614bf35a56.colorNegative_5fca2ea9b6 {\n  color: var(--negative-color);\n}\n.kindTertiary_614bf35a56.colorNegativeActive_6b13411f92,\n.kindTertiary_614bf35a56.colorNegative_5fca2ea9b6:hover,\n.kindTertiary_614bf35a56.colorNegative_5fca2ea9b6:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_614bf35a56.colorInverted_81f66ae763 {\n  color: var(--primary-text-color);\n}\n.kindTertiary_614bf35a56.colorInvertedActive_6b13411f92,\n.kindTertiary_614bf35a56.colorInverted_81f66ae763:hover,\n.kindTertiary_614bf35a56.colorInverted_81f66ae763:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_614bf35a56.colorInverted_81f66ae763.disabled_d47c0fd1f4 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2 {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_614bf35a56.colorOnPrimaryColorActive_56548b9731,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:hover,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_614bf35a56.colorOnPrimaryColorActive_56548b9731:focus-visible, .kindTertiary_614bf35a56.colorOnPrimaryColorActive_56548b9731.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:hover:focus-visible,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:hover.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:focus:focus-visible,\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:focus.focus-visible_b16f0a68d0 {\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_614bf35a56.colorOnPrimaryColorActive_56548b9731:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindTertiary_614bf35a56.colorOnPrimaryColor_3f40ed40a2.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_614bf35a56.colorFixedLightActive_74efbb8c53,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:hover,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_614bf35a56.colorFixedLightActive_74efbb8c53:focus-visible, .kindTertiary_614bf35a56.colorFixedLightActive_74efbb8c53.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:hover:focus-visible,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:hover.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:focus:focus-visible,\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:focus.focus-visible_b16f0a68d0 {\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_614bf35a56.colorFixedLightActive_74efbb8c53:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindTertiary_614bf35a56.colorFixedLight_ab277bfe37.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_614bf35a56.colorFixedDarkActive_519a2d3c8d,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:hover,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_614bf35a56.colorFixedDarkActive_519a2d3c8d:focus-visible, .kindTertiary_614bf35a56.colorFixedDarkActive_519a2d3c8d.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:hover:focus-visible,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:hover.focus-visible_b16f0a68d0,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:focus:focus-visible,\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:focus.focus-visible_b16f0a68d0 {\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_614bf35a56.colorFixedDarkActive_519a2d3c8d:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:hover:focus:not(.focus-visible_b16f0a68d0),\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736:focus:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.kindTertiary_614bf35a56.colorFixedDark_c3d8eda736.disabled_d47c0fd1f4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_614bf35a56.colorOnInvertedBackground_d23bc15692 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_614bf35a56.colorOnInvertedBackgroundActive_433d8b9978,\n.kindTertiary_614bf35a56.colorOnInvertedBackground_d23bc15692:hover,\n.kindTertiary_614bf35a56.colorOnInvertedBackground_d23bc15692:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_614bf35a56.colorOnInvertedBackground_d23bc15692.disabled_d47c0fd1f4 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_614bf35a56.disabled_d47c0fd1f4 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_614bf35a56.disabled_d47c0fd1f4:hover {\n  background-color: transparent;\n}\n.noSidePadding_cdc8a5cdfa {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_0341f559c1.insetFocusStyle_aa3eaabe91:focus-visible, .button_0341f559c1.insetFocusStyle_aa3eaabe91.focus-visible_b16f0a68d0 {\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_0341f559c1.insetFocusStyle_aa3eaabe91:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/src/components/ButtonGroup/ButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport Button from \"../Button/Button\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { SIZES } from \"../../constants\";\nimport { ButtonType as ButtonTypeEnum } from \"../Button/ButtonConstants\";\nimport { ButtonType, ButtonSize } from \"../Button/Button.types\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\ntype ButtonGroupOption = {\n icon?: SubIcon;\n leftIcon?: SubIcon;\n ariaLabel?: string;\n subText?: string;\n value: ButtonValue;\n text: string;\n disabled?: boolean;\n tooltipContent?: string;\n};\n\nexport interface ButtonGroupProps extends VibeComponentProps {\n options: Array<ButtonGroupOption>;\n value?: ButtonValue;\n onSelect?: (value: ButtonValue, name: string) => void;\n size?: ButtonSize;\n kind?: Extract<ButtonType, \"secondary\" \| \"tertiary\">;\n name?: string;\n disabled?: boolean;\n groupAriaLabel?: string;\n /*\n Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...\n */\n tooltipPosition?: TooltipPositions;\n tooltipHideDelay?: number;\n tooltipShowDelay?: number;\n tooltipContainerSelector?: string;\n tooltipMoveBy?: MoveBy;\n children?: React.ReactNode;\n fullWidth?: boolean;\n blurOnMouseUp?: boolean;\n}\n\nconst ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {\n sizes?: typeof SIZES;\n kinds?: typeof ButtonTypeEnum;\n} = forwardRef(\n (\n {\n className,\n options,\n name = \"\",\n disabled = false,\n value = \"\",\n onSelect,\n size = \"small\",\n kind = \"secondary\",\n groupAriaLabel = \"\",\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n blurOnMouseUp = true,\n id,\n \"data-testid\": dataTestId,\n fullWidth = false\n }: ButtonGroupProps,\n ref\n ) => {\n const inputRef = useRef();\n const mergedRef = useMergeRef(ref, inputRef);\n\n const [valueState, setValueState] = useState(value);\n const prevValue = usePrevious(value);\n\n const onClick = useCallback(\n (option: ButtonGroupOption) => {\n const isDisabled = disabled \|\| option.disabled;\n if (!isDisabled) {\n setValueState(option.value);\n if (onSelect) {\n onSelect(option.value, name);\n }\n }\n },\n [onSelect, disabled, name]\n );\n\n const selectedOption = useMemo(() => {\n return options.find(option => option.value === valueState);\n }, [options, valueState]);\n\n const Buttons = useMemo(() => {\n return options.map((option, index) => {\n const isSelected = option.value === valueState;\n return (\n <ButtonWrapper\n key={option.value}\n size={size}\n onClick={() => onClick(option)}\n rightIcon={option.icon}\n leftIcon={option.leftIcon}\n active={isSelected}\n rightFlat={index !== options.length - 1}\n leftFlat={index !== 0}\n kind=\"tertiary\"\n preventClickAnimation\n ariaLabel={option.ariaLabel}\n tooltipContent={option.tooltipContent}\n tooltipPosition={tooltipPosition}\n tooltipHideDelay={tooltipHideDelay}\n tooltipShowDelay={tooltipShowDelay}\n tooltipContainerSelector={tooltipContainerSelector}\n tooltipMoveBy={tooltipMoveBy}\n blurOnMouseUp={blurOnMouseUp}\n className={cx(styles.button, styles.optionText, {\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.buttonDisabled]: option.disabled,\n [styles.fullWidth]: fullWidth\n })}\n activeButtonClassName={styles.activeButton}\n >\n {option.text}\n </ButtonWrapper>\n );\n });\n }, [\n options,\n valueState,\n size,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n blurOnMouseUp,\n disabled,\n fullWidth,\n onClick\n ]);\n\n // Effects\n useEffect(() => {\n // Update value if changed from props\n if (value !== prevValue && value !== valueState) {\n setValueState(value);\n }\n }, [value, prevValue, valueState, setValueState]);\n\n return (\n <div\n className={cx(styles.buttonGroup, className, getStyle(styles, camelCase(\"kind-\" + kind)), {\n [styles.disabled]: disabled\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON_GROUP, id)}\n data-vibe={ComponentVibeId.BUTTON_GROUP}\n ref={mergedRef}\n >\n <div role=\"group\" aria-label={groupAriaLabel} className={cx(styles.buttonsContainer)} aria-disabled={disabled}>\n {Buttons}\n </div>\n {selectedOption && selectedOption.subText && (\n <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n )}\n </div>\n );\n }\n);\n\nexport default withStaticProps(ButtonGroup, { sizes: Button.sizes, kinds: Button.kinds });\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","options","_ref$name","name","_ref$disabled","disabled","_ref$value","value","onSelect","_ref$size","size","_ref$kind","kind","_ref$groupAriaLabel","groupAriaLabel","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","_ref$blurOnMouseUp","blurOnMouseUp","id","dataTestId","_ref$fullWidth","fullWidth","inputRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","valueState","setValueState","prevValue","usePrevious","onClick","useCallback","option","selectedOption","useMemo","find","Buttons","map","index","isSelected","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","length","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","activeButtonClassName","activeButton","text","useEffect","buttonGroup","getStyle","camelCase","getTestId","ComponentDefaultTestId","BUTTON_GROUP","ComponentVibeId","role","buttonsContainer","subText","subTextContainer","sizes","Button","kinds"],"mappings":"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"}
1	+ {"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport Button from \"../Button/Button\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { SIZES } from \"../../constants\";\nimport { ButtonType as ButtonTypeEnum } from \"../Button/ButtonConstants\";\nimport { ButtonType, ButtonSize } from \"../Button/Button.types\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\ntype ButtonGroupOption = {\n icon?: SubIcon;\n leftIcon?: SubIcon;\n ariaLabel?: string;\n subText?: string;\n value: ButtonValue;\n text: string;\n disabled?: boolean;\n tooltipContent?: string;\n};\n\nexport interface ButtonGroupProps extends VibeComponentProps {\n /*\n The list of button options.\n /\n options: Array<ButtonGroupOption>;\n /\n The currently selected button value.\n /\n value?: ButtonValue;\n /\n Callback fired when a button is selected.\n /\n onSelect?: (value: ButtonValue, name: string) => void;\n /\n The size of the buttons.\n /\n size?: ButtonSize;\n /\n The style variant of the buttons.\n /\n kind?: Extract<ButtonType, \"secondary\" \| \"tertiary\">;\n /\n The name of the button group.\n /\n name?: string;\n /\n If true, disables all buttons in the group.\n /\n disabled?: boolean;\n /\n The label of the button group for accessibility.\n /\n groupAriaLabel?: string;\n /\n The position of the tooltip relative to the button.\n /\n tooltipPosition?: TooltipPositions;\n /\n The delay in milliseconds before the tooltip hides.\n /\n tooltipHideDelay?: number;\n /\n The delay in milliseconds before the tooltip shows.\n /\n tooltipShowDelay?: number;\n /\n CSS selector for the tooltip container.\n /\n tooltipContainerSelector?: string;\n /\n Adjusts the tooltip position.\n /\n tooltipMoveBy?: MoveBy;\n /\n The content inside the button group.\n /\n children?: React.ReactNode;\n /\n If true, makes the button group take the full width of its container.\n /\n fullWidth?: boolean;\n /\n If true, removes focus from the button after clicking.\n */\n blurOnMouseUp?: boolean;\n}\n\nconst ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {\n sizes?: typeof SIZES;\n kinds?: typeof ButtonTypeEnum;\n} = forwardRef(\n (\n {\n className,\n options,\n name = \"\",\n disabled = false,\n value = \"\",\n onSelect,\n size = \"small\",\n kind = \"secondary\",\n groupAriaLabel = \"\",\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n blurOnMouseUp = true,\n id,\n \"data-testid\": dataTestId,\n fullWidth = false\n }: ButtonGroupProps,\n ref\n ) => {\n const inputRef = useRef();\n const mergedRef = useMergeRef(ref, inputRef);\n\n const [valueState, setValueState] = useState(value);\n const prevValue = usePrevious(value);\n\n const onClick = useCallback(\n (option: ButtonGroupOption) => {\n const isDisabled = disabled \|\| option.disabled;\n if (!isDisabled) {\n setValueState(option.value);\n if (onSelect) {\n onSelect(option.value, name);\n }\n }\n },\n [onSelect, disabled, name]\n );\n\n const selectedOption = useMemo(() => {\n return options.find(option => option.value === valueState);\n }, [options, valueState]);\n\n const Buttons = useMemo(() => {\n return options.map((option, index) => {\n const isSelected = option.value === valueState;\n return (\n <ButtonWrapper\n key={option.value}\n size={size}\n onClick={() => onClick(option)}\n rightIcon={option.icon}\n leftIcon={option.leftIcon}\n active={isSelected}\n rightFlat={index !== options.length - 1}\n leftFlat={index !== 0}\n kind=\"tertiary\"\n preventClickAnimation\n ariaLabel={option.ariaLabel}\n tooltipContent={option.tooltipContent}\n tooltipPosition={tooltipPosition}\n tooltipHideDelay={tooltipHideDelay}\n tooltipShowDelay={tooltipShowDelay}\n tooltipContainerSelector={tooltipContainerSelector}\n tooltipMoveBy={tooltipMoveBy}\n blurOnMouseUp={blurOnMouseUp}\n className={cx(styles.button, styles.optionText, {\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.buttonDisabled]: option.disabled,\n [styles.fullWidth]: fullWidth\n })}\n activeButtonClassName={styles.activeButton}\n >\n {option.text}\n </ButtonWrapper>\n );\n });\n }, [\n options,\n valueState,\n size,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n blurOnMouseUp,\n disabled,\n fullWidth,\n onClick\n ]);\n\n // Effects\n useEffect(() => {\n // Update value if changed from props\n if (value !== prevValue && value !== valueState) {\n setValueState(value);\n }\n }, [value, prevValue, valueState, setValueState]);\n\n return (\n <div\n className={cx(styles.buttonGroup, className, getStyle(styles, camelCase(\"kind-\" + kind)), {\n [styles.disabled]: disabled\n })}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON_GROUP, id)}\n data-vibe={ComponentVibeId.BUTTON_GROUP}\n ref={mergedRef}\n >\n <div role=\"group\" aria-label={groupAriaLabel} className={cx(styles.buttonsContainer)} aria-disabled={disabled}>\n {Buttons}\n </div>\n {selectedOption && selectedOption.subText && (\n <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n )}\n </div>\n );\n }\n);\n\nexport default withStaticProps(ButtonGroup, { sizes: Button.sizes, kinds: Button.kinds });\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","options","_ref$name","name","_ref$disabled","disabled","_ref$value","value","onSelect","_ref$size","size","_ref$kind","kind","_ref$groupAriaLabel","groupAriaLabel","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","_ref$blurOnMouseUp","blurOnMouseUp","id","dataTestId","_ref$fullWidth","fullWidth","inputRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","valueState","setValueState","prevValue","usePrevious","onClick","useCallback","option","selectedOption","useMemo","find","Buttons","map","index","isSelected","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","length","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","activeButtonClassName","activeButton","text","useEffect","buttonGroup","getStyle","camelCase","getTestId","ComponentDefaultTestId","BUTTON_GROUP","ComponentVibeId","role","buttonsContainer","subText","subTextContainer","sizes","Button","kinds"],"mappings":"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"}

package/dist/src/components/ButtonGroup/ButtonGroup.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_91e5fec39c",subTextContainer:"subTextContainer_ceae79c728",buttonsContainer:"buttonsContainer_a8741c63a6",button:"button_87d4cd239e",activeButton:"activeButton_f3ecd2c144",optionText:"optionText_bf50bebabf",disabled:"disabled_84a88df534",selected:"selected_f94111093d",kindTertiary:"kindTertiary_dbd12cc159",wrapper:"wrapper_28d90719cc",buttonDisabled:"buttonDisabled_060389d0b0",fullWidth:"fullWidth_dabae71445"};!function(n){const o="s_id-51d51089eef9_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const e=document.createElement("style");e.id=o,t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".buttonGroup_91e5fec39c {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_ceae79c728 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.buttonsContainer_a8741c63a6 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e {\n  border: 1px solid;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e.activeButton_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e.activeButton_f3ecd2c144:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.optionText_bf50bebabf:not(.disabled_84a88df534) {\n  color: var(--primary-text-color);\n}\n\n.optionText_bf50bebabf:not(.disabled_84a88df534).selected_f94111093d {\n  color: var(--primary-text-color);\n}\n\n.kindTertiary_dbd12cc159 .button_87d4cd239e {\n  border-color: transparent;\n}\n\n.kindTertiary_dbd12cc159 .button_87d4cd239e:first-child {\n  border-color: transparent;\n}\n\n.wrapper_28d90719cc.disabled_84a88df534 {\n  cursor: not-allowed;\n}\n\n.button_87d4cd239e.disabled_84a88df534 {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n}\n\n.button_87d4cd239e.buttonDisabled_060389d0b0 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fullWidth_dabae71445 {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_8b50a6ae8e",subTextContainer:"subTextContainer_4882f8c871",buttonsContainer:"buttonsContainer_22c586dcab",button:"button_224c04530f",activeButton:"activeButton_d3874081c1",optionText:"optionText_06fdd82f52",disabled:"disabled_168217c1ec",selected:"selected_cb1c69b854",kindTertiary:"kindTertiary_ac008e47f6",wrapper:"wrapper_4ce8f6da12",buttonDisabled:"buttonDisabled_05bb48ed6a",fullWidth:"fullWidth_cdaa5b9b76"};!function(n){const o="s_id-51d51089eef9_3_36_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const e=document.createElement("style");e.id=o,t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".buttonGroup_8b50a6ae8e {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_4882f8c871 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.buttonsContainer_22c586dcab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_22c586dcab .button_224c04530f {\n  border: 1px solid;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_22c586dcab .button_224c04530f.activeButton_d3874081c1 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.buttonsContainer_22c586dcab .button_224c04530f.activeButton_d3874081c1:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.optionText_06fdd82f52:not(.disabled_168217c1ec) {\n  color: var(--primary-text-color);\n}\n\n.optionText_06fdd82f52:not(.disabled_168217c1ec).selected_cb1c69b854 {\n  color: var(--primary-text-color);\n}\n\n.kindTertiary_ac008e47f6 .button_224c04530f {\n  border-color: transparent;\n}\n\n.kindTertiary_ac008e47f6 .button_224c04530f:first-child {\n  border-color: transparent;\n}\n\n.wrapper_4ce8f6da12.disabled_168217c1ec {\n  cursor: not-allowed;\n}\n\n.button_224c04530f.disabled_168217c1ec {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n}\n\n.button_224c04530f.buttonDisabled_05bb48ed6a {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fullWidth_cdaa5b9b76 {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

package/dist/src/components/ButtonGroup/ButtonWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonWrapper.js","sources":["../../../../src/components/ButtonGroup/ButtonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { isNil } from \"lodash-es\";\nimport Button, { ButtonProps } from \"../Button/Button\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { MoveBy } from \"../../types/MoveBy\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\nexport interface ButtonWrapperProps extends ButtonProps {\n tooltipContent?: string;\n /*\n ~~Where~~ the tooltip ~~should~~ ~~be in reference~~ to the ~~children: Top, Left, Right, Bottom ...\~~n */\n tooltipPosition?: TooltipPositions;\n tooltipHideDelay?: number;\n tooltipShowDelay?: number;\n tooltipContainerSelector?: string;\n tooltipMoveBy?: MoveBy;\n}\n\nexport const ButtonWrapper = ({\n tooltipContent,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n ...otherProps\n}: ButtonWrapperProps) => {\n let button = <Button {...otherProps} />;\n if (!isNil(tooltipContent)) {\n button = (\n <Tooltip\n moveBy={tooltipMoveBy}\n position={tooltipPosition}\n hideDelay={tooltipHideDelay}\n showDelay={tooltipShowDelay}\n content={tooltipContent}\n showTrigger={[\"mouseenter\"]}\n hideTrigger={[\"mouseleave\"]}\n containerSelector={tooltipContainerSelector}\n >\n {button}\n </Tooltip>\n );\n }\n\n return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector"],"mappings":"~~wLAmBaA~~,EAAgB,SAACC,GAAA,IAC5BC,EAOmBD,EAPnBC,eACAC,EAMmBF,EANnBE,gBACAC,EAKmBH,EALnBG,iBACAC,EAImBJ,EAJnBI,iBACAC,EAGmBL,EAHnBK,yBACAC,EAEmBN,EAFnBM,cACGC,EAAUC,EAAAR,EAPe,uHASxBS,EAASC,EAAAC,cAACC,EAAWC,OAAAC,OAAA,CAAA,EAAAP,IAkBzB,OAjBKQ,EAAMd,KACTQ,EACEC,EAACC,cAAAK,GACCC,OAAQX,EACRY,SAAUhB,EACViB,UAAWhB,EACXiB,UAAWhB,EACXiB,QAASpB,EACTqB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBnB,GAElBI,IAKAA,CACT"}
1	+ {"version":3,"file":"ButtonWrapper.js","sources":["../../../../src/components/ButtonGroup/ButtonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { isNil } from \"lodash-es\";\nimport Button, { ButtonProps } from \"../Button/Button\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { MoveBy } from \"../../types/MoveBy\";\nimport { TooltipPositions } from \"../Tooltip/Tooltip.types\";\n\nexport interface ButtonWrapperProps extends ButtonProps {\n /*\n The content of the tooltip.\n /\n tooltipContent?: string;\n /\n The position of the tooltip relative to the button.\n /\n tooltipPosition?: TooltipPositions;\n /\n The delay in milliseconds before the tooltip hides.\n /\n tooltipHideDelay?: number;\n /\n The delay in milliseconds before the tooltip shows.\n /\n tooltipShowDelay?: number;\n /\n CSS selector for the tooltip container.\n /\n tooltipContainerSelector?: string;\n /\n Adjusts the tooltip position.\n */\n tooltipMoveBy?: MoveBy;\n}\n\nexport const ButtonWrapper = ({\n tooltipContent,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n ...otherProps\n}: ButtonWrapperProps) => {\n let button = <Button {...otherProps} />;\n if (!isNil(tooltipContent)) {\n button = (\n <Tooltip\n moveBy={tooltipMoveBy}\n position={tooltipPosition}\n hideDelay={tooltipHideDelay}\n showDelay={tooltipShowDelay}\n content={tooltipContent}\n showTrigger={[\"mouseenter\"]}\n hideTrigger={[\"mouseleave\"]}\n containerSelector={tooltipContainerSelector}\n >\n {button}\n </Tooltip>\n );\n }\n\n return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector"],"mappings":"wLAkCaA,EAAgB,SAACC,GAAA,IAC5BC,EAOmBD,EAPnBC,eACAC,EAMmBF,EANnBE,gBACAC,EAKmBH,EALnBG,iBACAC,EAImBJ,EAJnBI,iBACAC,EAGmBL,EAHnBK,yBACAC,EAEmBN,EAFnBM,cACGC,EAAUC,EAAAR,EAPe,uHASxBS,EAASC,EAAAC,cAACC,EAAWC,OAAAC,OAAA,CAAA,EAAAP,IAkBzB,OAjBKQ,EAAMd,KACTQ,EACEC,EAACC,cAAAK,GACCC,OAAQX,EACRY,SAAUhB,EACViB,UAAWhB,EACXiB,UAAWhB,EACXiB,QAASpB,EACTqB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBnB,GAElBI,IAKAA,CACT"}

package/dist/src/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { isNil, noop as NOOP } from \"lodash-es\";\nimport Icon from \"../Icon/Icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { VibeComponent, VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport Text from \"../Text/Text\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n ~~/** A classname to be added to the wrapping element /\~~n ~~className?:~~ string;\n /* A ~~classname~~ to ~~be added to~~ the checkbox element ~~label~~ /\n checkboxClassName?: string;\n /* A ~~classname~~ to ~~be added~~ to the label element /\n labelClassName?: string;\n /* ~~A11y~~ ~~prop~~ to ~~describe~~ the ~~content~~ for ~~screen readers~~ /\n ariaLabel?: string;\n /* The content to be ~~rendered~~ ~~within~~ the ~~option~~ /\n label?: React.ReactNode \| Array<React.ReactNode>;\n /* ~~A11y~~ ~~prop~~ ~~- An Id~~ of an element ~~which~~ ~~describes~~ ~~this option~~ /\n ariaLabelledBy?: string;\n /* ~~callback~~ ~~function~~ when the value changes /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /* ~~Use~~ ~~this~~ ~~when~~ ~~you want to control~~ the ~~component,~~ ~~this will set the~~ state of the ~~component~~ /\n checked?: boolean;\n /* An in ~~between~~ ~~state~~ to ~~display a non selected~~ /\n indeterminate?: boolean;\n ~~/* is autoFocus /\~~n ~~autoFocus?:~~ boolean;\n /* ~~Set~~ the ~~option~~ to be ~~disabled~~ /\n ~~disabled~~?: boolean;\n /* ~~the~~ ~~default~~ ~~value which~~ the checkbox ~~will~~ ~~start from~~ /\n ~~defaultChecked~~?: boolean;\n /* The ~~input control's value. When specified in the HTML, this is the~~ initial ~~value,~~ ~~and~~ ~~from~~ ~~then on it can be altered or retrieved at any time using JavaScript to access~~ the ~~respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for~~ checkbox~~, radio, and hidden.l~~ /\n ~~value~~?: ~~string~~;\n /* A ~~string~~ ~~specifying a name for the input control. This name is~~ submitted ~~along~~ with the ~~control's~~ ~~value~~ when ~~the form data is submitted.~~ /\n ~~name~~?: string;\n /* An id to be ~~added~~ ~~the~~ ~~input~~ ~~element~~ /\n id?: string;\n /* ~~Specifies~~ ~~the~~ tab order of the ~~input element~~ */\n tabIndex?: number;\n}\n\nconst Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(\n (\n {\n className,\n checkboxClassName,\n labelClassName,\n ariaLabel,\n label,\n ariaLabelledBy,\n onChange = NOOP,\n checked,\n autoFocus,\n indeterminate = false,\n disabled = false,\n defaultChecked,\n tabIndex,\n value = \"\",\n name = \"\",\n id,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedInputRef = useMergeRef(ref, inputRef);\n const iconContainerRef = useRef<HTMLDivElement>(null);\n\n const onMouseUpCallback = useCallback(() => {\n const input = inputRef.current;\n if (!input) return;\n\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n input.blur();\n });\n });\n }, [inputRef]);\n let overrideDefaultChecked = defaultChecked;\n\n // If component did not receive default checked and checked props, choose default checked as\n // default behavior (handle isChecked logic inside input) and set default value\n if (isNil(overrideDefaultChecked) && isNil(checked)) {\n overrideDefaultChecked = false;\n }\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n }, [inputRef, indeterminate]);\n\n const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n const finalAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof label === \"string\") return label;\n return \"\";\n }, [ariaLabel, label]);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n className={cx(styles.wrapper, className)}\n onMouseUp={onMouseUpCallback}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n htmlFor={id}\n onClickCapture={onClickCaptureLabel}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={tabIndex}\n />\n <div\n className={cx(styles.checkbox, checkboxClassName)}\n ref={iconContainerRef}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <Icon\n className={styles.icon}\n iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"16\"\n />\n </div>\n {label === false ? null : (\n <Text\n element=\"span\"\n type=\"text2\"\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n >\n {label}\n </Text>\n )}\n </label>\n );\n }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","iconContainerRef","onMouseUpCallback","useCallback","input","current","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","React","createElement","cx","styles","wrapper","onMouseUp","getTestId","ComponentDefaultTestId","CHECKBOX","htmlFor","type","checkbox","CHECKBOX_CHECKBOX","ComponentVibeId","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","Text","element","CHECKBOX_LABEL"],"mappings":"~~0nBAgDMA~~,IAAAA,EAA2DC,GAC/D,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAcJ,EAAdI,eACAC,EAASL,EAATK,UACAC,EAAKN,EAALM,MACAC,EAAcP,EAAdO,eAAcC,EAAAR,EACdS,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EACfG,EAAOX,EAAPW,QACAC,EAASZ,EAATY,UAASC,EAAAb,EACTc,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAAf,EACrBgB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAcjB,EAAdiB,eACAC,EAAQlB,EAARkB,SAAQC,EAAAnB,EACRoB,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACVsB,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAAEvB,EAAFuB,GACeC,EAAUxB,EAAzB,eAIIyB,EAAWC,EAAyB,MACpCC,EAAiBC,EAAY3B,EAAKwB,GAClCI,EAAmBH,EAAuB,MAE1CI,EAAoBC,GAAY,WACpC,IAAMC,EAAQP,EAASQ,QAClBD,GAELE,OAAOC,uBAAsB,WAC3BD,OAAOC,uBAAsB,WAC3BH,EAAMI,MACR,GACF,GACF,GAAG,CAACX,IACAY,EAAyBpB,EAIzBqB,EAAMD,IAA2BC,EAAM3B,KACzC0B,GAAyB,GAG3BE,GAAU,WACJd,EAASQ,UACXR,EAASQ,QAAQnB,cAAgBA,EAErC,GAAG,CAACW,EAAUX,IAEd,IAAwB0B,EAAwBC,EAA4B,CAAEhB,SAAAA,IAAtEiB,eAEFC,EAAiBC,GAAQ,WAC7B,OAAIvC,IACiB,iBAAVC,EAA2BA,EAC/B,GACT,GAAG,CAACD,EAAWC,IAEf,OAEEuC,EAAAC,cAAA,QAAA,CACE5C,UAAW6C,EAAGC,EAAOC,QAAS/C,GAC9BgD,UAAWpB,EACE,cAAAN,GAAc2B,EAAUC,EAAuBC,SAAU9B,GACtE+B,QAAS/B,EACTmB,eAAgBF,GAEhBK,EACEC,cAAA,QAAA,CAAA7C,IAAK0B,EACLJ,GAAIA,EACJrB,UAAW8C,EAAOhB,MAClBZ,MAAOA,EACPE,KAAMA,EACNiC,KAAK,WACL3C,UAAWA,EACXH,SAAUA,EACVQ,eAAgBoB,EAChBrB,SAAUA,EACE,aAAA2B,EACK,kBAAApC,EACjBI,QAASA,EACTO,SAAUA,IAEZ2B,EACEC,cAAA,MAAA,CAAA5C,UAAW6C,EAAGC,EAAOQ,SAAUrD,GAC/BF,IAAK4B,EACQ,cAAAsB,EAAUC,EAAuBK,kBAAmBlC,GAAG,YACzDmC,EAAgBL,UAE3BR,EAAAC,cAACa,EAAI,CACHzD,UAAW8C,EAAOY,KAClBC,SAAS,MACTD,KAAM9C,EAAgBgD,EAASC,EAC/BC,kBAAgB,EAChBC,YAAY,EACZC,SAAS,SAGF,IAAV5D,EAAkB,KACjBuC,gBAACsB,EAAI,CACHC,QAAQ,OACRb,KAAK,QACLrD,UAAW6C,EAAGC,EAAO1C,MAAOF,GAAe,cAC9B+C,EAAUC,EAAuBiB,eAAgB9C,IAE7DjB,GAKX"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { isNil, noop as NOOP } from \"lodash-es\";\nimport Icon from \"../Icon/Icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { VibeComponent, VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport Text from \"../Text/Text\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n /*\n Class name applied to the checkbox element.\n /\n checkboxClassName?: string;\n /\n Class name applied to the label element.\n /\n labelClassName?: string;\n /\n The label of the checkbox for accessibility.\n /\n ariaLabel?: string;\n /\n The content displayed next to the checkbox.\n /\n label?: React.ReactNode \| Array<React.ReactNode>;\n /\n The ID of an element describing the checkbox.\n /\n ariaLabelledBy?: string;\n /\n Callback fired when the checkbox value changes.\n /\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /\n If true, controls the checked state of the checkbox.\n /\n checked?: boolean;\n /\n If true, displays an indeterminate state.\n /\n indeterminate?: boolean;\n /\n If true, the checkbox automatically receives focus.\n /\n autoFocus?: boolean;\n /\n If true, the checkbox is disabled.\n /\n disabled?: boolean;\n /\n The initial checked state of the checkbox.\n /\n defaultChecked?: boolean;\n /\n The value submitted with the form when checked.\n /\n value?: string;\n /\n The name of the checkbox, used for form submission.\n /\n name?: string;\n /\n The tab order of the checkbox.\n */\n tabIndex?: number;\n}\n\nconst Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(\n (\n {\n className,\n checkboxClassName,\n labelClassName,\n ariaLabel,\n label,\n ariaLabelledBy,\n onChange = NOOP,\n checked,\n autoFocus,\n indeterminate = false,\n disabled = false,\n defaultChecked,\n tabIndex,\n value = \"\",\n name = \"\",\n id,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedInputRef = useMergeRef(ref, inputRef);\n const iconContainerRef = useRef<HTMLDivElement>(null);\n\n const onMouseUpCallback = useCallback(() => {\n const input = inputRef.current;\n if (!input) return;\n\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n input.blur();\n });\n });\n }, [inputRef]);\n let overrideDefaultChecked = defaultChecked;\n\n // If component did not receive default checked and checked props, choose default checked as\n // default behavior (handle isChecked logic inside input) and set default value\n if (isNil(overrideDefaultChecked) && isNil(checked)) {\n overrideDefaultChecked = false;\n }\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n }, [inputRef, indeterminate]);\n\n const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n const finalAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof label === \"string\") return label;\n return \"\";\n }, [ariaLabel, label]);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n className={cx(styles.wrapper, className)}\n onMouseUp={onMouseUpCallback}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n htmlFor={id}\n onClickCapture={onClickCaptureLabel}\n >\n <input\n ref={mergedInputRef}\n id={id}\n className={styles.input}\n value={value}\n name={name}\n type=\"checkbox\"\n autoFocus={autoFocus}\n onChange={onChange}\n defaultChecked={overrideDefaultChecked}\n disabled={disabled}\n aria-label={finalAriaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={checked}\n tabIndex={tabIndex}\n />\n <div\n className={cx(styles.checkbox, checkboxClassName)}\n ref={iconContainerRef}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\n >\n <Icon\n className={styles.icon}\n iconType=\"svg\"\n icon={indeterminate ? Remove : Check}\n ignoreFocusStyle\n ariaHidden={true}\n iconSize=\"16\"\n />\n </div>\n {label === false ? null : (\n <Text\n element=\"span\"\n type=\"text2\"\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n >\n {label}\n </Text>\n )}\n </label>\n );\n }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","iconContainerRef","onMouseUpCallback","useCallback","input","current","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","React","createElement","cx","styles","wrapper","onMouseUp","getTestId","ComponentDefaultTestId","CHECKBOX","htmlFor","type","checkbox","CHECKBOX_CHECKBOX","ComponentVibeId","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","Text","element","CHECKBOX_LABEL"],"mappings":"0nBAwEMA,IAAAA,EAA2DC,GAC/D,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAcJ,EAAdI,eACAC,EAASL,EAATK,UACAC,EAAKN,EAALM,MACAC,EAAcP,EAAdO,eAAcC,EAAAR,EACdS,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EACfG,EAAOX,EAAPW,QACAC,EAASZ,EAATY,UAASC,EAAAb,EACTc,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAAf,EACrBgB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAcjB,EAAdiB,eACAC,EAAQlB,EAARkB,SAAQC,EAAAnB,EACRoB,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACVsB,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAAEvB,EAAFuB,GACeC,EAAUxB,EAAzB,eAIIyB,EAAWC,EAAyB,MACpCC,EAAiBC,EAAY3B,EAAKwB,GAClCI,EAAmBH,EAAuB,MAE1CI,EAAoBC,GAAY,WACpC,IAAMC,EAAQP,EAASQ,QAClBD,GAELE,OAAOC,uBAAsB,WAC3BD,OAAOC,uBAAsB,WAC3BH,EAAMI,MACR,GACF,GACF,GAAG,CAACX,IACAY,EAAyBpB,EAIzBqB,EAAMD,IAA2BC,EAAM3B,KACzC0B,GAAyB,GAG3BE,GAAU,WACJd,EAASQ,UACXR,EAASQ,QAAQnB,cAAgBA,EAErC,GAAG,CAACW,EAAUX,IAEd,IAAwB0B,EAAwBC,EAA4B,CAAEhB,SAAAA,IAAtEiB,eAEFC,EAAiBC,GAAQ,WAC7B,OAAIvC,IACiB,iBAAVC,EAA2BA,EAC/B,GACT,GAAG,CAACD,EAAWC,IAEf,OAEEuC,EAAAC,cAAA,QAAA,CACE5C,UAAW6C,EAAGC,EAAOC,QAAS/C,GAC9BgD,UAAWpB,EACE,cAAAN,GAAc2B,EAAUC,EAAuBC,SAAU9B,GACtE+B,QAAS/B,EACTmB,eAAgBF,GAEhBK,EACEC,cAAA,QAAA,CAAA7C,IAAK0B,EACLJ,GAAIA,EACJrB,UAAW8C,EAAOhB,MAClBZ,MAAOA,EACPE,KAAMA,EACNiC,KAAK,WACL3C,UAAWA,EACXH,SAAUA,EACVQ,eAAgBoB,EAChBrB,SAAUA,EACE,aAAA2B,EACK,kBAAApC,EACjBI,QAASA,EACTO,SAAUA,IAEZ2B,EACEC,cAAA,MAAA,CAAA5C,UAAW6C,EAAGC,EAAOQ,SAAUrD,GAC/BF,IAAK4B,EACQ,cAAAsB,EAAUC,EAAuBK,kBAAmBlC,GAAG,YACzDmC,EAAgBL,UAE3BR,EAAAC,cAACa,EAAI,CACHzD,UAAW8C,EAAOY,KAClBC,SAAS,MACTD,KAAM9C,EAAgBgD,EAASC,EAC/BC,kBAAgB,EAChBC,YAAY,EACZC,SAAS,SAGF,IAAV5D,EAAkB,KACjBuC,gBAACsB,EAAI,CACHC,QAAQ,OACRb,KAAK,QACLrD,UAAW6C,EAAGC,EAAO1C,MAAOF,GAAe,cAC9B+C,EAAUC,EAAuBiB,eAAgB9C,IAE7DjB,GAKX"}

package/dist/src/components/Checkbox/Checkbox.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper_03a662da91",checkbox:"checkbox_a532872616",icon:"icon_09d29288d4",label:"label_274cfb7284",input:"input_6b6f35b459",checkboxGrowAnimation:"checkboxGrowAnimation_7efa8ae795"};!function(n){const e="s_id-a622c58c4e9d_3_35_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('.wrapper_03a662da91 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n\n.checkbox_a532872616 {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n\n.checkbox_a532872616:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n\n.checkbox_a532872616:hover {\n  border-color: var(--secondary-text-color);\n}\n\n.icon_09d29288d4 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n\n.label_274cfb7284 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n\n/* we hide the checkbox and draw a new one instead. */\n\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n\n.input_6b6f35b459 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n\n.input_6b6f35b459:focus + .checkbox_a532872616 {\n  border-color: var(--secondary-text-color);\n}\n\n.input_6b6f35b459:focus:checked + .checkbox_a532872616 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_6b6f35b459:focus-visible + .checkbox_a532872616 {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n\n.input_6b6f35b459:checked:focus + .checkbox_a532872616:after,\n.input_6b6f35b459:indeterminate:focus + .checkbox_a532872616:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616 {\n  animation: checkboxGrowAnimation_7efa8ae795 var(--motion-productive-short);\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616 {\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616:hover,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616:hover:after,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616:hover:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616:after,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n\n.input_6b6f35b459:checked + .checkbox_a532872616 > .icon_09d29288d4,\n.input_6b6f35b459:indeterminate + .checkbox_a532872616 > .icon_09d29288d4 {\n  visibility: visible;\n}\n\n.input_6b6f35b459:checked:disabled + .checkbox_a532872616:after,\n.input_6b6f35b459:indeterminate:disabled + .checkbox_a532872616:after {\n  background-color: var(--disabled-background-color);\n}\n\n.input_6b6f35b459:disabled + .checkbox_a532872616,\n.input_6b6f35b459:disabled + .checkbox_a532872616:hover {\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.input_6b6f35b459:disabled + .checkbox_a532872616 .icon_09d29288d4,\n.input_6b6f35b459:disabled + .checkbox_a532872616:hover .icon_09d29288d4 {\n  color: var(--disabled-text-color);\n}\n\n.input_6b6f35b459:disabled + .checkbox_a532872616,\n.input_6b6f35b459:disabled + .checkbox_a532872616:hover {\n  cursor: not-allowed;\n}\n\n.input_6b6f35b459:disabled ~ .label_274cfb7284 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n\n@keyframes checkboxGrowAnimation_7efa8ae795 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var n={wrapper:"wrapper_e4db1ebb9b",checkbox:"checkbox_d68a7989ad",icon:"icon_3023bee4b4",label:"label_371c0085ca",input:"input_4a7f05dda4",checkboxGrowAnimation:"checkboxGrowAnimation_c52fc8ddd7"};!function(n){const e="s_id-a622c58c4e9d_3_36_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('.wrapper_e4db1ebb9b {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n\n.checkbox_d68a7989ad {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n\n.checkbox_d68a7989ad:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n\n.checkbox_d68a7989ad:hover {\n  border-color: var(--secondary-text-color);\n}\n\n.icon_3023bee4b4 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n\n.label_371c0085ca {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n\n/* we hide the checkbox and draw a new one instead. */\n\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n\n.input_4a7f05dda4 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n\n.input_4a7f05dda4:focus + .checkbox_d68a7989ad {\n  border-color: var(--secondary-text-color);\n}\n\n.input_4a7f05dda4:focus:checked + .checkbox_d68a7989ad {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_4a7f05dda4:focus-visible + .checkbox_d68a7989ad {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n\n.input_4a7f05dda4:checked:focus + .checkbox_d68a7989ad:after,\n.input_4a7f05dda4:indeterminate:focus + .checkbox_d68a7989ad:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad {\n  animation: checkboxGrowAnimation_c52fc8ddd7 var(--motion-productive-short);\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad {\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad:hover,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad:hover:after,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad:hover:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad:after,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n\n.input_4a7f05dda4:checked + .checkbox_d68a7989ad > .icon_3023bee4b4,\n.input_4a7f05dda4:indeterminate + .checkbox_d68a7989ad > .icon_3023bee4b4 {\n  visibility: visible;\n}\n\n.input_4a7f05dda4:checked:disabled + .checkbox_d68a7989ad:after,\n.input_4a7f05dda4:indeterminate:disabled + .checkbox_d68a7989ad:after {\n  background-color: var(--disabled-background-color);\n}\n\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad,\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad:hover {\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad .icon_3023bee4b4,\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad:hover .icon_3023bee4b4 {\n  color: var(--disabled-text-color);\n}\n\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad,\n.input_4a7f05dda4:disabled + .checkbox_d68a7989ad:hover {\n  cursor: not-allowed;\n}\n\n.input_4a7f05dda4:disabled ~ .label_371c0085ca {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n\n@keyframes checkboxGrowAnimation_c52fc8ddd7 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/src/components/Chips/Chips.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { AvatarType } from \"../Avatar/Avatar.types\";\nimport { ElementContent, SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport useHover from \"../../hooks/useHover/useHover\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n label?: ElementContent;\n disabled?: boolean;\n readOnly?: boolean;\n \"data-testid\"?: string;\n /*\n A React element that is positioned to the right of the text\n /\n rightRenderer?: ElementContent;\n /\n A React element that is positioned to the left of the text\n /\n leftRenderer?: ElementContent;\n /* Icon to place on the right /\n rightIcon?: SubIcon;\n /* Icon to place on the left /\n leftIcon?: SubIcon;\n /* Img to place as avatar on the right /\n rightAvatar?: string;\n /* the type of right avatar /\n rightAvatarType?: AvatarType;\n /* Img to place as avatar on the left /\n leftAvatar?: string;\n /* the type of left avatar /\n leftAvatarType?: AvatarType;\n /* ClassName for left or right icon /\n iconClassName?: string;\n /* ClassName for left or right avatar /\n avatarClassName?: string;\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /* Size for font icon /\n iconSize?: number \| string;\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n Disables the Chip's entry animation\n /\n noAnimation?: boolean;\n /\n Allow user to select text\n /\n allowTextSelection?: boolean;\n /\n Callback function to be called when the user clicks the component.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback function to be called when the user clicks the component.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Applies when element has onClick or onMouseDown props\n /\n ariaLabel?: string;\n /\n Disable click behaviors\n /\n disableClickableBehavior?: boolean;\n /\n Show border, the border color is `--text-color-on-primary`, should be when the chip is a colored background like\n * selected-color\n */\n showBorder?: boolean;\n closeButtonAriaLabel?: string;\n}\n\nconst Chips: VibeComponent<ChipsProps, HTMLDivElement> & {\n colors?: typeof ElementAllowedColorEnum;\n avatarTypes?: typeof AvatarTypeEnum;\n} = forwardRef<HTMLDivElement, ChipsProps>(\n (\n {\n className,\n avatarClassName,\n iconClassName,\n id,\n label = \"\",\n leftIcon = null,\n rightIcon = null,\n leftAvatar = null,\n rightAvatar = null,\n disabled = false,\n readOnly = false,\n allowTextSelection = false,\n color = \"primary\",\n iconSize = 18,\n onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n onMouseDown,\n onClick,\n noAnimation = true,\n ariaLabel,\n \"data-testid\": dataTestId,\n disableClickableBehavior = false,\n leftAvatarType = \"img\",\n rightAvatarType = \"img\",\n showBorder = false,\n leftRenderer,\n rightRenderer,\n closeButtonAriaLabel = \"Remove\"\n }: ChipsProps,\n ref\n ) => {\n const componentDataTestId = dataTestId \|\| getTestId(ComponentDefaultTestId.CHIP, id);\n const hasClickableWrapper = (!!onClick \|\| !!onMouseDown) && !disableClickableBehavior;\n const hasCloseButton = !readOnly && !disabled;\n const overrideAriaLabel = ariaLabel \|\| (typeof label === \"string\" && label) \|\| \"\";\n\n const iconButtonRef = useRef(null);\n const componentRef = useRef(null);\n\n const [hoverRef, isHovered] = useHover<HTMLDivElement>();\n const { isFocused } = useSetFocus({ ref: componentRef });\n\n const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef, hoverRef);\n\n const overrideClassName = cx(styles.chips, className, {\n [styles.disabled]: disabled,\n [styles.noAnimation]: noAnimation,\n [styles.withUserSelect]: allowTextSelection,\n [styles.border]: showBorder\n });\n const clickableClassName = cx(styles.clickable, overrideClassName, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !allowTextSelection\n });\n\n const backgroundColorStyle = useMemo(() => {\n let cssVar;\n if (disabled) {\n cssVar = getCSSVar(\"disabled-background-color\");\n } else if (hasClickableWrapper && (isHovered \|\| isFocused)) {\n cssVar = getElementColor(color, true, true);\n } else {\n cssVar = getElementColor(color, true);\n }\n return { backgroundColor: cssVar };\n }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n const onDeleteCallback = useCallback(\n (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n e.stopPropagation();\n if (onDelete) {\n onDelete(id, e);\n }\n },\n [id, onDelete]\n );\n\n const onClickCallback = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n e.preventDefault();\n onClick(e);\n }\n },\n [onClick]\n );\n\n const clickableProps = useClickableProps(\n {\n onClick: onClickCallback,\n onMouseDown,\n disabled,\n id,\n \"data-testid\": componentDataTestId,\n ariaLabel: overrideAriaLabel,\n ariaHidden: false,\n ariaHasPopup: false,\n ariaExpanded: false\n },\n mergedRef\n );\n const wrapperProps = hasClickableWrapper\n ? {\n ...clickableProps,\n ref: clickableProps.ref as RefObject<HTMLDivElement>,\n className: clickableClassName,\n style: backgroundColorStyle\n }\n : {\n className: overrideClassName,\n \"aria-label\": overrideAriaLabel,\n style: backgroundColorStyle,\n ref: mergedRef,\n onClick: onClickCallback,\n onMouseDown,\n id: id,\n \"data-testid\": componentDataTestId\n };\n\n const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n return (\n <div {...wrapperProps}>\n {leftAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.left, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={leftAvatarType}\n key={id}\n {...leftAvatarProps}\n />\n ) : null}\n {leftIcon ? (\n <Icon\n className={cx(styles.icon, styles.left, iconClassName)}\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n <Text type=\"text2\" className={styles.label}>\n {label}\n </Text>\n {rightIcon ? (\n <Icon\n className={cx(styles.icon, styles.right, iconClassName)}\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {rightAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.right, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={rightAvatarType}\n key={id}\n {...rightAvatarProps}\n />\n ) : null}\n {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n {hasCloseButton && (\n <IconButton\n size=\"xxs\"\n color=\"on-primary-color\"\n className={cx(styles.icon, styles.close)}\n ariaLabel={closeButtonAriaLabel}\n hideTooltip\n icon={CloseSmall}\n onClick={onDeleteCallback}\n data-testid={`${componentDataTestId}-close`}\n ref={iconButtonRef}\n />\n )}\n </div>\n );\n }\n);\n\nexport default withStaticProps(Chips, {\n colors: ElementAllowedColorEnum,\n avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useHover","useHover","_useHover2","_slicedToArray","hoverRef","isHovered","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","useCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","style","leftAvatarProps","text","src","rightAvatarProps","React","createElement","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}
1	+ {"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { AvatarType } from \"../Avatar/Avatar.types\";\nimport { ElementContent, SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport useHover from \"../../hooks/useHover/useHover\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n /*\n The text or content displayed inside the chip.\n /\n label?: ElementContent;\n /\n If true, the chip is disabled.\n /\n disabled?: boolean;\n /\n If true, the chip is read-only and cannot be deleted.\n /\n readOnly?: boolean;\n /\n A React element displayed on the right side.\n /\n rightRenderer?: ElementContent;\n /\n A React element displayed on the left side.\n /\n leftRenderer?: ElementContent;\n /\n Icon displayed on the right side.\n /\n rightIcon?: SubIcon;\n /\n Icon displayed on the left side.\n /\n leftIcon?: SubIcon;\n /\n Image URL or text for an avatar displayed on the right.\n /\n rightAvatar?: string;\n /\n The type of avatar displayed on the right.\n /\n rightAvatarType?: AvatarType;\n /\n Image URL or text for an avatar displayed on the left.\n /\n leftAvatar?: string;\n /\n The type of avatar displayed on the left.\n /\n leftAvatarType?: AvatarType;\n /\n Class name applied to left or right icons.\n /\n iconClassName?: string;\n /\n Class name applied to left or right avatars.\n /\n avatarClassName?: string;\n /\n The background color of the chip.\n /\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /\n The size of the icons inside the chip.\n /\n iconSize?: number \| string;\n /\n Callback fired when the chip is deleted.\n /\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables the chip's entry animation.\n /\n noAnimation?: boolean;\n /\n If true, allows the user to select text inside the chip.\n /\n allowTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed on the chip.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback fired when the chip is clicked.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n The label of the chip for accessibility.\n /\n ariaLabel?: string;\n /\n If true, disables all click behaviors.\n /\n disableClickableBehavior?: boolean;\n /\n If true, displays a border around the chip.\n /\n showBorder?: boolean;\n /\n The label for the close button.\n */\n closeButtonAriaLabel?: string;\n}\n\nconst Chips: VibeComponent<ChipsProps, HTMLDivElement> & {\n colors?: typeof ElementAllowedColorEnum;\n avatarTypes?: typeof AvatarTypeEnum;\n} = forwardRef<HTMLDivElement, ChipsProps>(\n (\n {\n className,\n avatarClassName,\n iconClassName,\n id,\n label = \"\",\n leftIcon = null,\n rightIcon = null,\n leftAvatar = null,\n rightAvatar = null,\n disabled = false,\n readOnly = false,\n allowTextSelection = false,\n color = \"primary\",\n iconSize = 18,\n onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n onMouseDown,\n onClick,\n noAnimation = true,\n ariaLabel,\n \"data-testid\": dataTestId,\n disableClickableBehavior = false,\n leftAvatarType = \"img\",\n rightAvatarType = \"img\",\n showBorder = false,\n leftRenderer,\n rightRenderer,\n closeButtonAriaLabel = \"Remove\"\n }: ChipsProps,\n ref\n ) => {\n const componentDataTestId = dataTestId \|\| getTestId(ComponentDefaultTestId.CHIP, id);\n const hasClickableWrapper = (!!onClick \|\| !!onMouseDown) && !disableClickableBehavior;\n const hasCloseButton = !readOnly && !disabled;\n const overrideAriaLabel = ariaLabel \|\| (typeof label === \"string\" && label) \|\| \"\";\n\n const iconButtonRef = useRef(null);\n const componentRef = useRef(null);\n\n const [hoverRef, isHovered] = useHover<HTMLDivElement>();\n const { isFocused } = useSetFocus({ ref: componentRef });\n\n const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef, hoverRef);\n\n const overrideClassName = cx(styles.chips, className, {\n [styles.disabled]: disabled,\n [styles.noAnimation]: noAnimation,\n [styles.withUserSelect]: allowTextSelection,\n [styles.border]: showBorder\n });\n const clickableClassName = cx(styles.clickable, overrideClassName, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !allowTextSelection\n });\n\n const backgroundColorStyle = useMemo(() => {\n let cssVar;\n if (disabled) {\n cssVar = getCSSVar(\"disabled-background-color\");\n } else if (hasClickableWrapper && (isHovered \|\| isFocused)) {\n cssVar = getElementColor(color, true, true);\n } else {\n cssVar = getElementColor(color, true);\n }\n return { backgroundColor: cssVar };\n }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n const onDeleteCallback = useCallback(\n (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n e.stopPropagation();\n if (onDelete) {\n onDelete(id, e);\n }\n },\n [id, onDelete]\n );\n\n const onClickCallback = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n e.preventDefault();\n onClick(e);\n }\n },\n [onClick]\n );\n\n const clickableProps = useClickableProps(\n {\n onClick: onClickCallback,\n onMouseDown,\n disabled,\n id,\n \"data-testid\": componentDataTestId,\n ariaLabel: overrideAriaLabel,\n ariaHidden: false,\n ariaHasPopup: false,\n ariaExpanded: false\n },\n mergedRef\n );\n const wrapperProps = hasClickableWrapper\n ? {\n ...clickableProps,\n ref: clickableProps.ref as RefObject<HTMLDivElement>,\n className: clickableClassName,\n style: backgroundColorStyle\n }\n : {\n className: overrideClassName,\n \"aria-label\": overrideAriaLabel,\n style: backgroundColorStyle,\n ref: mergedRef,\n onClick: onClickCallback,\n onMouseDown,\n id: id,\n \"data-testid\": componentDataTestId\n };\n\n const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n return (\n <div {...wrapperProps}>\n {leftAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.left, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={leftAvatarType}\n key={id}\n {...leftAvatarProps}\n />\n ) : null}\n {leftIcon ? (\n <Icon\n className={cx(styles.icon, styles.left, iconClassName)}\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n <Text type=\"text2\" className={styles.label}>\n {label}\n </Text>\n {rightIcon ? (\n <Icon\n className={cx(styles.icon, styles.right, iconClassName)}\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n ) : null}\n {rightAvatar ? (\n <Avatar\n withoutBorder\n className={cx(styles.avatar, styles.right, avatarClassName)}\n customSize={CHIPS_AVATAR_SIZE}\n type={rightAvatarType}\n key={id}\n {...rightAvatarProps}\n />\n ) : null}\n {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n {hasCloseButton && (\n <IconButton\n size=\"xxs\"\n color=\"on-primary-color\"\n className={cx(styles.icon, styles.close)}\n ariaLabel={closeButtonAriaLabel}\n hideTooltip\n icon={CloseSmall}\n onClick={onDeleteCallback}\n data-testid={`${componentDataTestId}-close`}\n ref={iconButtonRef}\n />\n )}\n </div>\n );\n }\n);\n\nexport default withStaticProps(Chips, {\n colors: ElementAllowedColorEnum,\n avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useHover","useHover","_useHover2","_slicedToArray","hoverRef","isHovered","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","useCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","style","leftAvatarProps","text","src","rightAvatarProps","React","createElement","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}

package/dist/src/components/Chips/Chips.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_ea8f1836f3","focus-visible":"focus-visible_eb6b496cf8",disabled:"disabled_12d0f15ef4",disableTextSelection:"disableTextSelection_3f06344baf",chips:"chips_7caa70b927","chips-pop-in-emphasized":"chips-pop-in-emphasized_9d61ab7a98",border:"border_b80e3b873f",withUserSelect:"withUserSelect_f31d3d092a",label:"label_bdf7e3e117",noAnimation:"noAnimation_97ebb817cc",icon:"icon_5368907020",avatar:"avatar_007a7dace6",customRenderer:"customRenderer_5c2f96a082",left:"left_7f9d4f1fdf",right:"right_d6886f03b7",close:"close_f5225940d8",defaultCursor:"defaultCursor_12d0f15ef4"};!function(e){const n="s_id-a8c9f55659fd_3_35_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_ea8f1836f3 {\n  cursor: pointer;\n}\n.clickable_ea8f1836f3:focus-visible, .clickable_ea8f1836f3.focus-visible_eb6b496cf8 {\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.clickable_ea8f1836f3:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.clickable_ea8f1836f3.disabled_12d0f15ef4 {\n  cursor: default;\n}\n.disableTextSelection_3f06344baf {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.chips_7caa70b927 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_9d61ab7a98 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_7caa70b927.border_b80e3b873f {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_7caa70b927.withUserSelect_f31d3d092a {\n  user-select: text;\n  cursor: text;\n}\n.chips_7caa70b927 .label_bdf7e3e117 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_7caa70b927.noAnimation_97ebb817cc {\n  animation: none;\n}\n.chips_7caa70b927 .icon_5368907020,\n.chips_7caa70b927 .avatar_007a7dace6,\n.chips_7caa70b927 .customRenderer_5c2f96a082 {\n  min-width: 18px;\n}\n.chips_7caa70b927 .icon_5368907020.left_7f9d4f1fdf,\n.chips_7caa70b927 .avatar_007a7dace6.left_7f9d4f1fdf,\n.chips_7caa70b927 .customRenderer_5c2f96a082.left_7f9d4f1fdf {\n  margin-right: var(--spacing-xs);\n}\n.chips_7caa70b927 .icon_5368907020.right_d6886f03b7,\n.chips_7caa70b927 .avatar_007a7dace6.right_d6886f03b7,\n.chips_7caa70b927 .customRenderer_5c2f96a082.right_d6886f03b7 {\n  margin-left: var(--spacing-xs);\n}\n.chips_7caa70b927 .icon_5368907020.close_f5225940d8,\n.chips_7caa70b927 .avatar_007a7dace6.close_f5225940d8,\n.chips_7caa70b927 .customRenderer_5c2f96a082.close_f5225940d8 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_7caa70b927.disabled_12d0f15ef4 .icon_5368907020 {\n  color: var(--disabled-text-color);\n}\n.chips_7caa70b927.disabled_12d0f15ef4 .label_bdf7e3e117 {\n  color: var(--disabled-text-color);\n}\n.chips_7caa70b927.defaultCursor_12d0f15ef4 {\n  cursor: default;\n}\n.chips_7caa70b927.clickable_ea8f1836f3 {\n  cursor: pointer;\n}\n.chips_7caa70b927.clickable_ea8f1836f3:focus-visible, .chips_7caa70b927.clickable_ea8f1836f3.focus-visible_eb6b496cf8 {\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.chips_7caa70b927.clickable_ea8f1836f3:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.chips_7caa70b927.clickable_ea8f1836f3.disabled_12d0f15ef4 {\n  cursor: default;\n}\n.chips_7caa70b927.clickable_ea8f1836f3.disableTextSelection_3f06344baf {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_9d61ab7a98 {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
+var e={clickable:"clickable_a9f3495c38","focus-visible":"focus-visible_b16f0a68d0",disabled:"disabled_4a07a70b0b",disableTextSelection:"disableTextSelection_8bead34be0",chips:"chips_a8e87c3bfd","chips-pop-in-emphasized":"chips-pop-in-emphasized_0998c47143",border:"border_eb74c1168c",withUserSelect:"withUserSelect_71d1b5dfd0",label:"label_1f21ef1102",noAnimation:"noAnimation_5dcd219179",icon:"icon_824e37ad10",avatar:"avatar_8f70baab38",customRenderer:"customRenderer_598b81c784",left:"left_1b744b3664",right:"right_3b7055dfb0",close:"close_1d3a8a9606",defaultCursor:"defaultCursor_4a07a70b0b"};!function(e){const n="s_id-a8c9f55659fd_3_36_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_a9f3495c38 {\n  cursor: pointer;\n}\n.clickable_a9f3495c38:focus-visible, .clickable_a9f3495c38.focus-visible_b16f0a68d0 {\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.clickable_a9f3495c38:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.clickable_a9f3495c38.disabled_4a07a70b0b {\n  cursor: default;\n}\n.disableTextSelection_8bead34be0 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.chips_a8e87c3bfd {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_0998c47143 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_a8e87c3bfd.border_eb74c1168c {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_a8e87c3bfd.withUserSelect_71d1b5dfd0 {\n  user-select: text;\n  cursor: text;\n}\n.chips_a8e87c3bfd .label_1f21ef1102 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_a8e87c3bfd.noAnimation_5dcd219179 {\n  animation: none;\n}\n.chips_a8e87c3bfd .icon_824e37ad10,\n.chips_a8e87c3bfd .avatar_8f70baab38,\n.chips_a8e87c3bfd .customRenderer_598b81c784 {\n  min-width: 18px;\n}\n.chips_a8e87c3bfd .icon_824e37ad10.left_1b744b3664,\n.chips_a8e87c3bfd .avatar_8f70baab38.left_1b744b3664,\n.chips_a8e87c3bfd .customRenderer_598b81c784.left_1b744b3664 {\n  margin-right: var(--spacing-xs);\n}\n.chips_a8e87c3bfd .icon_824e37ad10.right_3b7055dfb0,\n.chips_a8e87c3bfd .avatar_8f70baab38.right_3b7055dfb0,\n.chips_a8e87c3bfd .customRenderer_598b81c784.right_3b7055dfb0 {\n  margin-left: var(--spacing-xs);\n}\n.chips_a8e87c3bfd .icon_824e37ad10.close_1d3a8a9606,\n.chips_a8e87c3bfd .avatar_8f70baab38.close_1d3a8a9606,\n.chips_a8e87c3bfd .customRenderer_598b81c784.close_1d3a8a9606 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_a8e87c3bfd.disabled_4a07a70b0b .icon_824e37ad10 {\n  color: var(--disabled-text-color);\n}\n.chips_a8e87c3bfd.disabled_4a07a70b0b .label_1f21ef1102 {\n  color: var(--disabled-text-color);\n}\n.chips_a8e87c3bfd.defaultCursor_4a07a70b0b {\n  cursor: default;\n}\n.chips_a8e87c3bfd.clickable_a9f3495c38 {\n  cursor: pointer;\n}\n.chips_a8e87c3bfd.clickable_a9f3495c38:focus-visible, .chips_a8e87c3bfd.clickable_a9f3495c38.focus-visible_b16f0a68d0 {\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.chips_a8e87c3bfd.clickable_a9f3495c38:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.chips_a8e87c3bfd.clickable_a9f3495c38.disabled_4a07a70b0b {\n  cursor: default;\n}\n.chips_a8e87c3bfd.clickable_a9f3495c38.disableTextSelection_8bead34be0 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_0998c47143 {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
 //# sourceMappingURL=Chips.module.scss.js.map

package/dist/src/components/Clickable/Clickable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Clickable.js","sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Clickable.module.scss\";\n\nexport interface ClickableProps extends VibeComponentProps {\n /*\n The ~~type~~ of ~~the~~ ~~clickable~~ ~~element~~ ~~wrapper~~ ~~(for~~ ~~example~~ ~~div or span)\~~n /\n elementType?: keyof JSX.IntrinsicElements \| string;\n ~~className?: string;\~~n ~~id?:~~ ~~string;\~~n children?: React.ReactNode;\n role?: AriaRole;\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n enableTextSelection?: boolean;\n onMouseDown?: (event: React.MouseEvent) => void;\n onMouseEnter?: (event: React.MouseEvent) => void;\n onMouseLeave?: (event: React.MouseEvent) => void;\n ariaLabel?: string;\n /\n Is the element ~~and its content should be hidden~~ from ~~screen readers and other~~ assistive technologies\n */\n ariaHidden?: boolean;\n // TODO: [breaking] remove string type\n ariaHasPopup?: boolean \| string;\n ariaExpanded?: boolean;\n // TODO: [breaking] remove string type\n tabIndex?: string \| number;\n disabled?: boolean;\n style?: React.CSSProperties;\n ~~\"data-testid\"?: string;\n~~}\n\nconst Clickable: VibeComponent<ClickableProps, HTMLElement> = forwardRef(\n (\n {\n elementType = \"div\",\n className = \"\",\n id,\n children,\n role = \"button\",\n onClick = NOOP,\n enableTextSelection = false,\n onMouseDown = NOOP,\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded,\n tabIndex = \"0\",\n disabled = false,\n style,\n \"data-testid\": dataTestId\n }: ClickableProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const clickableProps = useClickableProps(\n {\n onClick,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n disabled,\n id,\n \"data-testid\": dataTestId,\n role,\n tabIndex,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded\n },\n ref\n );\n const overrideClassName = cx(styles.clickable, className, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !enableTextSelection\n });\n\n return React.createElement(\n elementType,\n {\n ...clickableProps,\n className: overrideClassName,\n style: style\n },\n children\n );\n }\n);\n\nexport default Clickable;\n"],"names":["Clickable","forwardRef","_ref","ref","_ref$elementType","elementType","_ref$className","className","children","_ref$role","role","_ref$onClick","onClick","_ref$enableTextSelect","enableTextSelection","_ref$onMouseDown","onMouseDown","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$tabIndex","tabIndex","_ref$disabled","disabled","style","clickableProps","useClickableProps","NOOP","id","ariaLabel","ariaHidden","ariaHasPopup","ariaExpanded","overrideClassName","cx","styles","clickable","_defineProperty","disableTextSelection","React","createElement","Object","assign"],"mappings":"~~6RAqCMA~~,IAAAA,EAAwDC,GAC5D,SAAAC,EAqBEC,GACE,IAAAC,EAAAF,EApBAG,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EAAAE,EAAAJ,EACnBK,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAEdE,EAAQN,EAARM,SAAQC,EAAAP,EACRQ,KAAeC,EAAAT,EACfU,QAAcC,EAAAX,EACdY,oBAAAA,OAAsB,IAAHD,GAAQA,EAAAE,EAAAb,EAC3Bc,YAAkBC,EAAAf,EAClBgB,aAAmBC,EAAAjB,EACnBkB,aAIYC,EAAAnB,EACZoB,SAAcC,EAAArB,EACdsB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAKvB,EAALuB,MAKIC,EAAiBC,EACrB,CACEf,aAlBQgB,IAAHjB,EAAGiB,EAAIjB,EAmBZK,iBAjBYY,IAAHb,EAAGa,EAAIb,EAkBhBG,kBAjBaU,IAAHX,EAAGW,EAAIX,EAkBjBG,kBAjBaQ,IAAHT,EAAGS,EAAIT,EAkBjBK,SAAAA,EACAK,GA1BA3B,EAAF2B,GA2BE,cAZuB3B,EAAzB,eAaEQ,UA1BK,IAAHD,EAAG,SAAQA,EA2Bba,cAjBS,IAAHD,EAAG,IAAGA,EAkBZS,UAtBO5B,EAAT4B,UAuBEC,WAtBQ7B,EAAV6B,WAuBEC,aAtBU9B,EAAZ8B,aAuBEC,aAtBU/B,EAAZ+B,cAwBA9B,GAEI+B,EAAoBC,EAAGC,EAAOC,UAAW9B,EAAS+B,EAAAA,EACrDF,CAAAA,EAAAA,EAAOZ,SAAWA,GAClBY,EAAOG,sBAAwBzB,IAGlC,OAAO0B,EAAMC,cACXpC,EAAWqC,OAAAC,OAAAD,OAAAC,OAAA,GAENjB,GACH,CAAAnB,UAAW2B,EACXT,MAAOA,IAETjB,EAEJ"}
1	+ {"version":3,"file":"Clickable.js","sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Clickable.module.scss\";\n\nexport interface ClickableProps extends VibeComponentProps {\n /*\n The HTML element or custom component used as the root.\n /\n elementType?: keyof JSX.IntrinsicElements \| string;\n /\n The content inside the clickable element.\n /\n children?: React.ReactNode;\n /\n The ARIA role of the element.\n /\n role?: AriaRole;\n /\n Callback fired when the element is clicked.\n /\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n /\n If true, allows text selection inside the element.\n /\n enableTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed down on the element.\n /\n onMouseDown?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse enters the element.\n /\n onMouseEnter?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse leaves the element.\n /\n onMouseLeave?: (event: React.MouseEvent) => void;\n /\n The label of the element for accessibility.\n /\n ariaLabel?: string;\n /\n If true, hides the element from assistive technologies.\n /\n ariaHidden?: boolean;\n // TODO: [breaking] remove string type\n /\n Indicates the presence of a popup associated with the element.\n /\n ariaHasPopup?: boolean \| string;\n /\n If true, indicates that the associated popup is open.\n /\n ariaExpanded?: boolean;\n // TODO: [breaking] remove string type\n /\n The tab order of the element.\n /\n tabIndex?: string \| number;\n /\n If true, the element is disabled.\n /\n disabled?: boolean;\n /\n Inline styles applied to the element.\n */\n style?: React.CSSProperties;\n}\n\nconst Clickable: VibeComponent<ClickableProps, HTMLElement> = forwardRef(\n (\n {\n elementType = \"div\",\n className = \"\",\n id,\n children,\n role = \"button\",\n onClick = NOOP,\n enableTextSelection = false,\n onMouseDown = NOOP,\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded,\n tabIndex = \"0\",\n disabled = false,\n style,\n \"data-testid\": dataTestId\n }: ClickableProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const clickableProps = useClickableProps(\n {\n onClick,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n disabled,\n id,\n \"data-testid\": dataTestId,\n role,\n tabIndex,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded\n },\n ref\n );\n const overrideClassName = cx(styles.clickable, className, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !enableTextSelection\n });\n\n return React.createElement(\n elementType,\n {\n ...clickableProps,\n className: overrideClassName,\n style: style\n },\n children\n );\n }\n);\n\nexport default Clickable;\n"],"names":["Clickable","forwardRef","_ref","ref","_ref$elementType","elementType","_ref$className","className","children","_ref$role","role","_ref$onClick","onClick","_ref$enableTextSelect","enableTextSelection","_ref$onMouseDown","onMouseDown","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$tabIndex","tabIndex","_ref$disabled","disabled","style","clickableProps","useClickableProps","NOOP","id","ariaLabel","ariaHidden","ariaHasPopup","ariaExpanded","overrideClassName","cx","styles","clickable","_defineProperty","disableTextSelection","React","createElement","Object","assign"],"mappings":"6RAyEMA,IAAAA,EAAwDC,GAC5D,SAAAC,EAqBEC,GACE,IAAAC,EAAAF,EApBAG,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EAAAE,EAAAJ,EACnBK,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAEdE,EAAQN,EAARM,SAAQC,EAAAP,EACRQ,KAAeC,EAAAT,EACfU,QAAcC,EAAAX,EACdY,oBAAAA,OAAsB,IAAHD,GAAQA,EAAAE,EAAAb,EAC3Bc,YAAkBC,EAAAf,EAClBgB,aAAmBC,EAAAjB,EACnBkB,aAIYC,EAAAnB,EACZoB,SAAcC,EAAArB,EACdsB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAKvB,EAALuB,MAKIC,EAAiBC,EACrB,CACEf,aAlBQgB,IAAHjB,EAAGiB,EAAIjB,EAmBZK,iBAjBYY,IAAHb,EAAGa,EAAIb,EAkBhBG,kBAjBaU,IAAHX,EAAGW,EAAIX,EAkBjBG,kBAjBaQ,IAAHT,EAAGS,EAAIT,EAkBjBK,SAAAA,EACAK,GA1BA3B,EAAF2B,GA2BE,cAZuB3B,EAAzB,eAaEQ,UA1BK,IAAHD,EAAG,SAAQA,EA2Bba,cAjBS,IAAHD,EAAG,IAAGA,EAkBZS,UAtBO5B,EAAT4B,UAuBEC,WAtBQ7B,EAAV6B,WAuBEC,aAtBU9B,EAAZ8B,aAuBEC,aAtBU/B,EAAZ+B,cAwBA9B,GAEI+B,EAAoBC,EAAGC,EAAOC,UAAW9B,EAAS+B,EAAAA,EACrDF,CAAAA,EAAAA,EAAOZ,SAAWA,GAClBY,EAAOG,sBAAwBzB,IAGlC,OAAO0B,EAAMC,cACXpC,EAAWqC,OAAAC,OAAAD,OAAAC,OAAA,GAENjB,GACH,CAAAnB,UAAW2B,EACXT,MAAOA,IAETjB,EAEJ"}

package/dist/src/components/Clickable/Clickable.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_ea8f1836f3","focus-visible":"focus-visible_eb6b496cf8",disabled:"disabled_12d0f15ef4",disableTextSelection:"disableTextSelection_3f06344baf"};!function(e){const n="s_id-8d33a9ee9e1f_3_35_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const l=document.createElement("style");l.id=n,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_ea8f1836f3 {\n  cursor: pointer;\n}\n.clickable_ea8f1836f3:focus-visible, .clickable_ea8f1836f3.focus-visible_eb6b496cf8 {\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.clickable_ea8f1836f3:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.clickable_ea8f1836f3.disabled_12d0f15ef4 {\n  cursor: default;\n}\n.disableTextSelection_3f06344baf {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}");export{e as default};
+var e={clickable:"clickable_a9f3495c38","focus-visible":"focus-visible_b16f0a68d0",disabled:"disabled_4a07a70b0b",disableTextSelection:"disableTextSelection_8bead34be0"};!function(e){const n="s_id-8d33a9ee9e1f_3_36_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_a9f3495c38 {\n  cursor: pointer;\n}\n.clickable_a9f3495c38:focus-visible, .clickable_a9f3495c38.focus-visible_b16f0a68d0 {\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.clickable_a9f3495c38:focus:not(.focus-visible_b16f0a68d0) {\n  outline: none;\n}\n.clickable_a9f3495c38.disabled_4a07a70b0b {\n  cursor: default;\n}\n.disableTextSelection_8bead34be0 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}");export{e as default};
 //# sourceMappingURL=Clickable.module.scss.js.map

package/dist/src/components/Clickable/ClickableWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClickableWrapper.js","sources":["../../../../src/components/Clickable/ClickableWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport Clickable from \"./Clickable\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport { ClickableProps } from \"../Clickable/Clickable\";\n\nexport interface ClickableWrapperProps extends VibeComponentProps {\n children: React.ReactNode;\n isClickable: boolean;\n clickableProps: ClickableProps;\n}\n\nconst ClickableWrapper: VibeComponent<ClickableWrapperProps, HTMLElement> = forwardRef(\n ({ children, isClickable = true, clickableProps = {} }: ClickableWrapperProps, ref) => {\n if (!isClickable) {\n return <>{children}</>;\n }\n\n return (\n <Clickable {...clickableProps} ref={ref}>\n {children}\n </Clickable>\n );\n }\n);\n\nexport default ClickableWrapper;\n"],"names":["ClickableWrapper","forwardRef","_ref","ref","children","_ref$isClickable","isClickable","_ref$clickableProps","clickableProps","React","createElement","Clickable","Object","assign","Fragment"],"mappings":"~~oEAYMA~~,IAAAA,EAAsEC,GAC1E,SAAAC,EAA+EC,GAAO,IAAnFC,EAAQF,EAARE,SAAQC,EAAAH,EAAEI,YAAkBC,EAAAL,EAAEM,eAC/B,YADyB,IAAHH,GAAOA,EAM3BI,EAAAC,cAACC,EAASC,OAAAC,OAAA,CAAA,OANiC,IAAAN,EAAG,CAAA,EAAEA,EAMnB,CAAEJ,IAAKA,IACjCC,GALIK,EAAAC,cAAAD,EAAAK,SAAA,KAAGV,EAQd"}
1	+ {"version":3,"file":"ClickableWrapper.js","sources":["../../../../src/components/Clickable/ClickableWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport Clickable from \"./Clickable\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport { ClickableProps } from \"../Clickable/Clickable\";\n\nexport interface ClickableWrapperProps extends VibeComponentProps {\n /*\n The content inside the wrapper.\n /\n children: React.ReactNode;\n /\n If true, wraps the content in a `Clickable` component.\n /\n isClickable: boolean;\n /\n Props passed to the `Clickable` component.\n */\n clickableProps: ClickableProps;\n}\n\nconst ClickableWrapper: VibeComponent<ClickableWrapperProps, HTMLElement> = forwardRef(\n ({ children, isClickable = true, clickableProps = {} }: ClickableWrapperProps, ref) => {\n if (!isClickable) {\n return <>{children}</>;\n }\n\n return (\n <Clickable {...clickableProps} ref={ref}>\n {children}\n </Clickable>\n );\n }\n);\n\nexport default ClickableWrapper;\n"],"names":["ClickableWrapper","forwardRef","_ref","ref","children","_ref$isClickable","isClickable","_ref$clickableProps","clickableProps","React","createElement","Clickable","Object","assign","Fragment"],"mappings":"oEAqBMA,IAAAA,EAAsEC,GAC1E,SAAAC,EAA+EC,GAAO,IAAnFC,EAAQF,EAARE,SAAQC,EAAAH,EAAEI,YAAkBC,EAAAL,EAAEM,eAC/B,YADyB,IAAHH,GAAOA,EAM3BI,EAAAC,cAACC,EAASC,OAAAC,OAAA,CAAA,OANiC,IAAAN,EAAG,CAAA,EAAEA,EAMnB,CAAEJ,IAAKA,IACjCC,GALIK,EAAAC,cAAAD,EAAAK,SAAA,KAAGV,EAQd"}

package/dist/src/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n value?: ColorPickerValue;\n onSave?: (value: ColorPickerArrayValueOnly) => void;\n ColorIndicatorIcon?: SubIcon;\n SelectedIndicatorIcon?: SubIcon;\n /*\n ~~Hide~~ color ~~icon\~~n /\n NoColorIcon?: SubIcon;\n colorStyle?: ColorStyle;\n noColorText?: string;\n shouldRenderIndicatorWithoutBackground?: boolean;\n isBlackListMode?: boolean;\n colorsList?: ColorPickerArrayValueOnly;\n isMultiselect?: boolean;\n colorSize?: ColorPickerSizes;\n numberOfColorsInLine?: number;\n focusOnMount?: boolean;\n colorShape?: ColorShapes;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n \n /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker: VibeComponent<ColorPickerProps> & {\n sizes?: typeof BaseSizes;\n colorStyles?: typeof ColorStyleEnum;\n colorSizes?: typeof BaseSizes;\n colorShapes?: typeof ColorShapesEnum;\n} = forwardRef(\n (\n {\n className,\n onSave = NOOP,\n value = \"\",\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList = [],\n isMultiselect,\n colorSize = \"medium\",\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const onChange = useCallback(onSave, [onSave]);\n\n const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <DialogContentContainer\n ref={mergedRef}\n className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n ariaLabelledby=\"Color Picker Dialog\"\n ariaDescribedby=\"Pick color\"\n style={{ width }}\n >\n <ColorPickerContent\n onValueChange={onChange}\n value={value}\n noColorText={noColorText}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n NoColorIcon={NoColorIcon}\n colorsList={colorsList}\n isBlackListMode={isBlackListMode}\n isMultiselect={isMultiselect}\n colorSize={colorSize}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n colorShape={colorShape}\n forceUseRawColorList={forceUseRawColorList}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n data-vibe={ComponentVibeId.COLOR_PICKER}\n />\n </DialogContentContainer>\n );\n }\n);\n\nexport default withStaticProps(ColorPicker, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","COLOR_PICKER","ComponentVibeId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"~~s5BAkDA~~,IAyEeA,EAAAA,EApEXC,GACF,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,IAETE,EAACC,cAAAS,GACCC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBC,aAAcxB,GAC/D,YAAAyB,EAAgBD,eAInC,IAG0C,CAC1CE,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value?: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onSave?: (value: ColorPickerArrayValueOnly) => void;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The list of colors available for selection.\n /\n colorsList?: ColorPickerArrayValueOnly;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n \n /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker: VibeComponent<ColorPickerProps> & {\n sizes?: typeof BaseSizes;\n colorStyles?: typeof ColorStyleEnum;\n colorSizes?: typeof BaseSizes;\n colorShapes?: typeof ColorShapesEnum;\n} = forwardRef(\n (\n {\n className,\n onSave = NOOP,\n value = \"\",\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList = [],\n isMultiselect,\n colorSize = \"medium\",\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const onChange = useCallback(onSave, [onSave]);\n\n const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <DialogContentContainer\n ref={mergedRef}\n className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n ariaLabelledby=\"Color Picker Dialog\"\n ariaDescribedby=\"Pick color\"\n style={{ width }}\n >\n <ColorPickerContent\n onValueChange={onChange}\n value={value}\n noColorText={noColorText}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n NoColorIcon={NoColorIcon}\n colorsList={colorsList}\n isBlackListMode={isBlackListMode}\n isMultiselect={isMultiselect}\n colorSize={colorSize}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n colorShape={colorShape}\n forceUseRawColorList={forceUseRawColorList}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n data-vibe={ComponentVibeId.COLOR_PICKER}\n />\n </DialogContentContainer>\n );\n }\n);\n\nexport default withStaticProps(ColorPicker, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","COLOR_PICKER","ComponentVibeId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BA4FA,IAyEeA,EAAAA,EApEXC,GACF,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,IAETE,EAACC,cAAAS,GACCC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBC,aAAcxB,GAC/D,YAAAyB,EAAgBD,eAInC,IAG0C,CAC1CE,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}

package/dist/src/components/ColorPicker/ColorPicker.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_86180a159a",colorPickerDialogContent:"colorPickerDialogContent_fbfeb7461d"};!function(e){const t="s_id-ffacbf9b6446_3_35_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_86180a159a.colorPickerDialogContent_fbfeb7461d {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
+var e={colorPicker:"colorPicker_c88c6124f3",colorPickerDialogContent:"colorPickerDialogContent_c36e0ce6db"};!function(e){const t="s_id-ffacbf9b6446_3_36_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const c=document.createElement("style");c.id=t,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_c88c6124f3.colorPickerDialogContent_c36e0ce6db {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=ColorPicker.module.scss.js.map

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport Button from \"../../../Button/Button\";\nimport { VibeComponentProps, VibeComponent, SubIcon } from \"../../../../types\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n onClick: () => void;\n text?: string;\n Icon: SubIcon;\n}\n\nexport const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps> = React.forwardRef(\n ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref) => {\n const { onSelectionAction } = useGridKeyboardNavigation({\n ref: ref as React.MutableRefObject<HTMLElement>,\n itemsCount: 1,\n numberOfItemsInLine: 1,\n onItemClicked: onClick,\n getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n });\n\n return (\n <Button\n ref={ref}\n size=\"small\"\n kind=\"tertiary\"\n onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n blurOnMouseUp={false}\n className={styles.clearColorButton}\n >\n <Icon size=\"16\" className={styles.clearColorIcon} />\n {text \|\| \"Clear\"}\n </Button>\n );\n }\n);\n"],"names":["ColorPickerClearButton","React","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"~~wQAaO~~,IAAMA,EAAqEC,EAAMC,YACtF,SAAAC,EAAuDC,GAAO,IAAlDC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEN,EAAAc,cAACC,EAAM,CACLZ,IAAKA,EACLa,KAAK,QACLC,KAAK,WACLN,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCY,eAAe,EACfC,UAAWC,EAAOC,kBAElBrB,EAACc,cAAAT,EAAK,CAAAW,KAAK,KAAKG,UAAWC,EAAOE,iBACjClB,GAAQ,QAGf"}
1	+ {"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport Button from \"../../../Button/Button\";\nimport { VibeComponentProps, VibeComponent, SubIcon } from \"../../../../types\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n /*\n Callback fired when the clear button is clicked.\n /\n onClick: () => void;\n /\n The text displayed inside the button.\n /\n text?: string;\n /\n The icon displayed inside the button.\n */\n Icon: SubIcon;\n}\n\nexport const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps> = React.forwardRef(\n ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref) => {\n const { onSelectionAction } = useGridKeyboardNavigation({\n ref: ref as React.MutableRefObject<HTMLElement>,\n itemsCount: 1,\n numberOfItemsInLine: 1,\n onItemClicked: onClick,\n getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n });\n\n return (\n <Button\n ref={ref}\n size=\"small\"\n kind=\"tertiary\"\n onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n blurOnMouseUp={false}\n className={styles.clearColorButton}\n >\n <Icon size=\"16\" className={styles.clearColorIcon} />\n {text \|\| \"Clear\"}\n </Button>\n );\n }\n);\n"],"names":["ColorPickerClearButton","React","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"wQAsBO,IAAMA,EAAqEC,EAAMC,YACtF,SAAAC,EAAuDC,GAAO,IAAlDC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEN,EAAAc,cAACC,EAAM,CACLZ,IAAKA,EACLa,KAAK,QACLC,KAAK,WACLN,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCY,eAAe,EACfC,UAAWC,EAAOC,kBAElBrB,EAACc,cAAAT,EAAK,CAAAW,KAAK,KAAKG,UAAWC,EAAOE,iBACjClB,GAAQ,QAGf"}

package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_2e6da877c0",clearColorButton:"clearColorButton_106b1440c6"};!function(e){const n="s_id-774e60a23ee3_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_2e6da877c0 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_106b1440c6 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_0056fbf0f5",clearColorButton:"clearColorButton_8d17e46ccf"};!function(e){const n="s_id-774e60a23ee3_3_36_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_0056fbf0f5 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_8d17e46ccf {\n  margin-top: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=ColorPickerClearButton.module.scss.js.map