npm - @vibe/core - Versions diffs - 3.62.0 → 3.63.0-alpha-7f1d0.0 - Mend

@vibe/core 3.62.0 → 3.63.0-alpha-7f1d0.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 (630) hide show

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

@@ -1,2 +1,2 @@
-var o={button:"button_473c77b128","focus-visible":"focus-visible_d78c6951bc",loader:"loader_0935eb29f5",loaderSvg:"loaderSvg_57aee714c4",textPlaceholder:"textPlaceholder_462ee553cd",success:"success_6c5b157ebe",successContent:"successContent_61e79d7291",marginRight:"marginRight_e4fcc20560",marginLeft:"marginLeft_b98bce454b",rightFlat:"rightFlat_13ea26c728",leftFlat:"leftFlat_36cc1689b3",preventClickAnimation:"preventClickAnimation_a38744dfa3",leftIcon:"leftIcon_e4fcc20560",rightIcon:"rightIcon_b98bce454b",sizeXxs:"sizeXxs_8051c2d121",sizeXs:"sizeXs_cca6e41461",sizeSmall:"sizeSmall_5dc960fcf4",sizeMedium:"sizeMedium_e3a76031ac",sizeLarge:"sizeLarge_3a2f957975",kindPrimary:"kindPrimary_322e1629c8",colorPrimary:"colorPrimary_3f325bb228",colorBrand:"colorBrand_c1c78bfb75",colorPrimaryActive:"colorPrimaryActive_ce38ee24d9",colorBrandActive:"colorBrandActive_ccdad01f8d",colorPositive:"colorPositive_c49f73de28",colorPositiveActive:"colorPositiveActive_550a6fdab8",colorNegative:"colorNegative_812676e747",colorNegativeActive:"colorNegativeActive_550a6fdab8",colorInverted:"colorInverted_39d0788e98",colorInvertedActive:"colorInvertedActive_550a6fdab8",disabled:"disabled_c5f6644f8f",colorOnPrimaryColor:"colorOnPrimaryColor_feba09f64c",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_2e7a3dacf4",colorFixedLight:"colorFixedLight_5a74d25a21",colorFixedLightActive:"colorFixedLightActive_a38744dfa3",colorFixedDark:"colorFixedDark_f01543fac2",colorFixedDarkActive:"colorFixedDarkActive_a8678a0390",colorOnInvertedBackground:"colorOnInvertedBackground_90e5f956b5",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_671976d096",kindSecondary:"kindSecondary_a29f7aa60e",kindTertiary:"kindTertiary_aa6055edad",noSidePadding:"noSidePadding_a5a4d8e841",insetFocusStyle:"insetFocusStyle_9a296e4d8b"};!function(o){const r="s_id-f5db469b1a79_3_61_1";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable selector-class-pattern */\n.button_473c77b128 {\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_473c77b128:focus-visible, .button_473c77b128.focus-visible_d78c6951bc {\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_473c77b128:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.button_473c77b128 .loader_0935eb29f5 {\n  height: 100%;\n}\n.button_473c77b128 .loader_0935eb29f5 .loaderSvg_57aee714c4 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_473c77b128 .textPlaceholder_462ee553cd {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_473c77b128.success_6c5b157ebe {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_473c77b128.success_6c5b157ebe .successContent_61e79d7291 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_e4fcc20560 {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_b98bce454b {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_13ea26c728 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_36cc1689b3 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_473c77b128:active:not(.preventClickAnimation_a38744dfa3) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_473c77b128 .leftIcon_e4fcc20560 {\n  margin-right: var(--spacing-small);\n}\n.button_473c77b128 .rightIcon_b98bce454b {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_8051c2d121 {\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_cca6e41461 {\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_5dc960fcf4 {\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_5dc960fcf4 .loader_0935eb29f5 {\n  top: 7px;\n}\n.sizeMedium_e3a76031ac {\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_3a2f957975 {\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_322e1629c8 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_322e1629c8.colorPrimary_3f325bb228 {\n  background: var(--primary-color);\n}\n.kindPrimary_322e1629c8.colorBrand_c1c78bfb75 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_322e1629c8.colorPrimaryActive_ce38ee24d9,\n.kindPrimary_322e1629c8.colorPrimary_3f325bb228:hover,\n.kindPrimary_322e1629c8.colorPrimary_3f325bb228:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_322e1629c8.colorBrandActive_ccdad01f8d,\n.kindPrimary_322e1629c8.colorBrand_c1c78bfb75:hover,\n.kindPrimary_322e1629c8.colorBrand_c1c78bfb75:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_322e1629c8.colorPositive_c49f73de28 {\n  background: var(--positive-color);\n}\n.kindPrimary_322e1629c8.colorPositiveActive_550a6fdab8,\n.kindPrimary_322e1629c8.colorPositive_c49f73de28:hover,\n.kindPrimary_322e1629c8.colorPositive_c49f73de28:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_322e1629c8.colorNegative_812676e747 {\n  background: var(--negative-color);\n}\n.kindPrimary_322e1629c8.colorNegativeActive_550a6fdab8,\n.kindPrimary_322e1629c8.colorNegative_812676e747:hover,\n.kindPrimary_322e1629c8.colorNegative_812676e747:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_322e1629c8.colorInverted_39d0788e98 {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_322e1629c8.colorInvertedActive_550a6fdab8,\n.kindPrimary_322e1629c8.colorInverted_39d0788e98:hover,\n.kindPrimary_322e1629c8.colorInverted_39d0788e98:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_322e1629c8.button_473c77b128.colorInverted_39d0788e98.disabled_c5f6644f8f {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_322e1629c8.colorOnPrimaryColorActive_2e7a3dacf4,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:hover,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_322e1629c8.colorOnPrimaryColorActive_2e7a3dacf4:focus-visible, .kindPrimary_322e1629c8.colorOnPrimaryColorActive_2e7a3dacf4.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:hover:focus-visible,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:hover.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:focus:focus-visible,\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:focus.focus-visible_d78c6951bc {\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_322e1629c8.colorOnPrimaryColorActive_2e7a3dacf4:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:hover:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindPrimary_322e1629c8.colorOnPrimaryColor_feba09f64c.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_322e1629c8.colorFixedLightActive_a38744dfa3,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:hover,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_322e1629c8.colorFixedLightActive_a38744dfa3:focus-visible, .kindPrimary_322e1629c8.colorFixedLightActive_a38744dfa3.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:hover:focus-visible,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:hover.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:focus:focus-visible,\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:focus.focus-visible_d78c6951bc {\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_322e1629c8.colorFixedLightActive_a38744dfa3:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:hover:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindPrimary_322e1629c8.colorFixedLight_5a74d25a21.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_322e1629c8.colorFixedDarkActive_a8678a0390,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:hover,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_322e1629c8.colorFixedDarkActive_a8678a0390:focus-visible, .kindPrimary_322e1629c8.colorFixedDarkActive_a8678a0390.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:hover:focus-visible,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:hover.focus-visible_d78c6951bc,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:focus:focus-visible,\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:focus.focus-visible_d78c6951bc {\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_322e1629c8.colorFixedDarkActive_a8678a0390:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:hover:focus:not(.focus-visible_d78c6951bc),\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindPrimary_322e1629c8.colorFixedDark_f01543fac2.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_322e1629c8.colorOnInvertedBackground_90e5f956b5 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_322e1629c8.colorOnInvertedBackgroundActive_671976d096,\n.kindPrimary_322e1629c8.colorOnInvertedBackground_90e5f956b5:hover,\n.kindPrimary_322e1629c8.colorOnInvertedBackground_90e5f956b5:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_322e1629c8.button_473c77b128.colorOnInvertedBackground_90e5f956b5.disabled_c5f6644f8f {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_322e1629c8.button_473c77b128.disabled_c5f6644f8f {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_a29f7aa60e {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_a29f7aa60e.sizeSmall_5dc960fcf4 {\n  line-height: 22px;\n}\n.kindSecondary_a29f7aa60e.sizeMedium_e3a76031ac {\n  line-height: 22px;\n}\n.kindSecondary_a29f7aa60e.sizeLarge_3a2f957975 {\n  line-height: 22px;\n}\n.kindSecondary_a29f7aa60e.colorPrimaryActive_ce38ee24d9 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_a29f7aa60e.colorPrimaryActive_ce38ee24d9:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_a29f7aa60e.colorBrandActive_ccdad01f8d {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_a29f7aa60e.colorBrandActive_ccdad01f8d,\n.kindSecondary_a29f7aa60e.colorBrandActive_ccdad01f8d:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_a29f7aa60e.colorPrimary_3f325bb228:hover:not(.colorPrimaryActive_ce38ee24d9),\n.kindSecondary_a29f7aa60e.colorPrimary_3f325bb228:focus:not(.colorPrimaryActive_ce38ee24d9) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a29f7aa60e.colorBrand_c1c78bfb75:hover:not(.colorBrandActive_ccdad01f8d),\n.kindSecondary_a29f7aa60e.colorBrand_c1c78bfb75:focus:not(.colorBrandActive_ccdad01f8d) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a29f7aa60e.colorPositive_c49f73de28 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_a29f7aa60e.colorPositiveActive_550a6fdab8,\n.kindSecondary_a29f7aa60e.colorPositive_c49f73de28:hover,\n.kindSecondary_a29f7aa60e.colorPositive_c49f73de28:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_a29f7aa60e.colorNegative_812676e747 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_a29f7aa60e.colorNegativeActive_550a6fdab8,\n.kindSecondary_a29f7aa60e.colorNegative_812676e747:hover,\n.kindSecondary_a29f7aa60e.colorNegative_812676e747:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_a29f7aa60e.colorInverted_39d0788e98 {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_a29f7aa60e.colorInvertedActive_550a6fdab8,\n.kindSecondary_a29f7aa60e.colorInverted_39d0788e98:hover,\n.kindSecondary_a29f7aa60e.colorInverted_39d0788e98:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a29f7aa60e.colorInverted_39d0788e98.disabled_c5f6644f8f {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_a29f7aa60e.colorOnPrimaryColorActive_2e7a3dacf4,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:hover,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_a29f7aa60e.colorOnPrimaryColorActive_2e7a3dacf4:focus-visible, .kindSecondary_a29f7aa60e.colorOnPrimaryColorActive_2e7a3dacf4.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:hover:focus-visible,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:hover.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:focus:focus-visible,\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:focus.focus-visible_d78c6951bc {\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_a29f7aa60e.colorOnPrimaryColorActive_2e7a3dacf4:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:hover:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindSecondary_a29f7aa60e.colorOnPrimaryColor_feba09f64c.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_a29f7aa60e.colorFixedLightActive_a38744dfa3,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:hover,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_a29f7aa60e.colorFixedLightActive_a38744dfa3:focus-visible, .kindSecondary_a29f7aa60e.colorFixedLightActive_a38744dfa3.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:hover:focus-visible,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:hover.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:focus:focus-visible,\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:focus.focus-visible_d78c6951bc {\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_a29f7aa60e.colorFixedLightActive_a38744dfa3:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:hover:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_a29f7aa60e.colorFixedDarkActive_a8678a0390,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:hover,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_a29f7aa60e.colorFixedDarkActive_a8678a0390:focus-visible, .kindSecondary_a29f7aa60e.colorFixedDarkActive_a8678a0390.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:hover:focus-visible,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:hover.focus-visible_d78c6951bc,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:focus:focus-visible,\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:focus.focus-visible_d78c6951bc {\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_a29f7aa60e.colorFixedDarkActive_a8678a0390:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:hover:focus:not(.focus-visible_d78c6951bc),\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindSecondary_a29f7aa60e.colorOnInvertedBackground_90e5f956b5 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_a29f7aa60e.colorOnInvertedBackgroundActive_671976d096,\n.kindSecondary_a29f7aa60e.colorOnInvertedBackground_90e5f956b5:hover,\n.kindSecondary_a29f7aa60e.colorOnInvertedBackground_90e5f956b5:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_a29f7aa60e.colorOnInvertedBackground_90e5f956b5.disabled_c5f6644f8f {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_a29f7aa60e.colorFixedLight_5a74d25a21.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_a29f7aa60e.colorFixedDark_f01543fac2.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_a29f7aa60e.disabled_c5f6644f8f {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_a29f7aa60e.disabled_c5f6644f8f:hover {\n  background-color: transparent;\n}\n.kindTertiary_aa6055edad {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_aa6055edad.colorPrimaryActive_ce38ee24d9 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_aa6055edad.colorPrimaryActive_ce38ee24d9:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_aa6055edad.colorBrandActive_ccdad01f8d {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_aa6055edad.colorBrandActive_ccdad01f8d,\n.kindTertiary_aa6055edad.colorBrandActive_ccdad01f8d:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_aa6055edad.colorPrimary_3f325bb228:hover:not(.colorPrimaryActive_ce38ee24d9),\n.kindTertiary_aa6055edad.colorPrimary_3f325bb228:focus:not(.colorPrimaryActive_ce38ee24d9) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_aa6055edad.colorBrand_c1c78bfb75:hover:not(.colorBrandActive_ccdad01f8d),\n.kindTertiary_aa6055edad.colorBrand_c1c78bfb75:focus:not(.colorBrandActive_ccdad01f8d) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_aa6055edad.colorPositive_c49f73de28 {\n  color: var(--positive-color);\n}\n.kindTertiary_aa6055edad.colorPositiveActive_550a6fdab8,\n.kindTertiary_aa6055edad.colorPositive_c49f73de28:hover,\n.kindTertiary_aa6055edad.colorPositive_c49f73de28:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_aa6055edad.colorNegative_812676e747 {\n  color: var(--negative-color);\n}\n.kindTertiary_aa6055edad.colorNegativeActive_550a6fdab8,\n.kindTertiary_aa6055edad.colorNegative_812676e747:hover,\n.kindTertiary_aa6055edad.colorNegative_812676e747:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_aa6055edad.colorInverted_39d0788e98 {\n  color: var(--primary-text-color);\n}\n.kindTertiary_aa6055edad.colorInvertedActive_550a6fdab8,\n.kindTertiary_aa6055edad.colorInverted_39d0788e98:hover,\n.kindTertiary_aa6055edad.colorInverted_39d0788e98:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_aa6055edad.colorInverted_39d0788e98.disabled_c5f6644f8f {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_aa6055edad.colorOnPrimaryColorActive_2e7a3dacf4,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:hover,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_aa6055edad.colorOnPrimaryColorActive_2e7a3dacf4:focus-visible, .kindTertiary_aa6055edad.colorOnPrimaryColorActive_2e7a3dacf4.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:hover:focus-visible,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:hover.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:focus:focus-visible,\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:focus.focus-visible_d78c6951bc {\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_aa6055edad.colorOnPrimaryColorActive_2e7a3dacf4:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:hover:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindTertiary_aa6055edad.colorOnPrimaryColor_feba09f64c.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_aa6055edad.colorFixedLightActive_a38744dfa3,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:hover,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_aa6055edad.colorFixedLightActive_a38744dfa3:focus-visible, .kindTertiary_aa6055edad.colorFixedLightActive_a38744dfa3.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:hover:focus-visible,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:hover.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:focus:focus-visible,\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:focus.focus-visible_d78c6951bc {\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_aa6055edad.colorFixedLightActive_a38744dfa3:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:hover:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindTertiary_aa6055edad.colorFixedLight_5a74d25a21.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_aa6055edad.colorFixedDarkActive_a8678a0390,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:hover,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_aa6055edad.colorFixedDarkActive_a8678a0390:focus-visible, .kindTertiary_aa6055edad.colorFixedDarkActive_a8678a0390.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:hover:focus-visible,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:hover.focus-visible_d78c6951bc,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:focus:focus-visible,\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:focus.focus-visible_d78c6951bc {\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_aa6055edad.colorFixedDarkActive_a8678a0390:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:hover:focus:not(.focus-visible_d78c6951bc),\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2:focus:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.kindTertiary_aa6055edad.colorFixedDark_f01543fac2.disabled_c5f6644f8f {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_aa6055edad.colorOnInvertedBackground_90e5f956b5 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_aa6055edad.colorOnInvertedBackgroundActive_671976d096,\n.kindTertiary_aa6055edad.colorOnInvertedBackground_90e5f956b5:hover,\n.kindTertiary_aa6055edad.colorOnInvertedBackground_90e5f956b5:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_aa6055edad.colorOnInvertedBackground_90e5f956b5.disabled_c5f6644f8f {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_aa6055edad.disabled_c5f6644f8f {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_aa6055edad.disabled_c5f6644f8f:hover {\n  background-color: transparent;\n}\n.noSidePadding_a5a4d8e841 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_473c77b128.insetFocusStyle_9a296e4d8b:focus-visible, .button_473c77b128.insetFocusStyle_9a296e4d8b.focus-visible_d78c6951bc {\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_473c77b128.insetFocusStyle_9a296e4d8b:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}");export{o as default};
+var o={button:"button_8dad8228b2","focus-visible":"focus-visible_be1f2838e0",loader:"loader_e6993ad7b6",loaderSvg:"loaderSvg_26b1aa9566",textPlaceholder:"textPlaceholder_6661d72b26",success:"success_606e9dfd02",successContent:"successContent_2e747f08be",marginRight:"marginRight_efd2ad8f7e",marginLeft:"marginLeft_e003a23549",rightFlat:"rightFlat_b6dfc457ae",leftFlat:"leftFlat_d65239dc24",preventClickAnimation:"preventClickAnimation_d28e4ad810",leftIcon:"leftIcon_efd2ad8f7e",rightIcon:"rightIcon_e003a23549",sizeXxs:"sizeXxs_f2bb45df2e",sizeXs:"sizeXs_d7de984fdf",sizeSmall:"sizeSmall_5554cf6186",sizeMedium:"sizeMedium_93f53fe7e1",sizeLarge:"sizeLarge_c0078ae226",kindPrimary:"kindPrimary_ce55bfc2e4",colorPrimary:"colorPrimary_780423cbd6",colorBrand:"colorBrand_a2f23c174f",colorPrimaryActive:"colorPrimaryActive_05f657d045",colorBrandActive:"colorBrandActive_86e61df751",colorPositive:"colorPositive_a214c6b218",colorPositiveActive:"colorPositiveActive_1ea633a45e",colorNegative:"colorNegative_afa6f8f3f8",colorNegativeActive:"colorNegativeActive_1ea633a45e",colorInverted:"colorInverted_981d0231eb",colorInvertedActive:"colorInvertedActive_1ea633a45e",disabled:"disabled_303b4e6766",colorOnPrimaryColor:"colorOnPrimaryColor_3a3c714dfd",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_8d8cc57096",colorFixedLight:"colorFixedLight_761d0ccc78",colorFixedLightActive:"colorFixedLightActive_d28e4ad810",colorFixedDark:"colorFixedDark_09be7a9c9c",colorFixedDarkActive:"colorFixedDarkActive_dc7b895b0a",colorOnInvertedBackground:"colorOnInvertedBackground_3899deba9e",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_05ec394419",kindSecondary:"kindSecondary_3171e115a2",kindTertiary:"kindTertiary_b8d02b5765",noSidePadding:"noSidePadding_dcb108335f",insetFocusStyle:"insetFocusStyle_4d86b87cf8"};!function(o){const r="s_id-f5db469b1a79_3_62_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)}("/* stylelint-disable selector-class-pattern */\n.button_8dad8228b2 {\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_8dad8228b2:focus-visible, .button_8dad8228b2.focus-visible_be1f2838e0 {\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_8dad8228b2:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.button_8dad8228b2 .loader_e6993ad7b6 {\n  height: 100%;\n}\n.button_8dad8228b2 .loader_e6993ad7b6 .loaderSvg_26b1aa9566 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_8dad8228b2 .textPlaceholder_6661d72b26 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_8dad8228b2.success_606e9dfd02 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_8dad8228b2.success_606e9dfd02 .successContent_2e747f08be {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_efd2ad8f7e {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_e003a23549 {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_b6dfc457ae {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_d65239dc24 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_8dad8228b2:active:not(.preventClickAnimation_d28e4ad810) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_8dad8228b2 .leftIcon_efd2ad8f7e {\n  margin-right: var(--spacing-small);\n}\n.button_8dad8228b2 .rightIcon_e003a23549 {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_f2bb45df2e {\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_d7de984fdf {\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_5554cf6186 {\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_5554cf6186 .loader_e6993ad7b6 {\n  top: 7px;\n}\n.sizeMedium_93f53fe7e1 {\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_c0078ae226 {\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_ce55bfc2e4 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_ce55bfc2e4.colorPrimary_780423cbd6 {\n  background: var(--primary-color);\n}\n.kindPrimary_ce55bfc2e4.colorBrand_a2f23c174f {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_ce55bfc2e4.colorPrimaryActive_05f657d045,\n.kindPrimary_ce55bfc2e4.colorPrimary_780423cbd6:hover,\n.kindPrimary_ce55bfc2e4.colorPrimary_780423cbd6:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_ce55bfc2e4.colorBrandActive_86e61df751,\n.kindPrimary_ce55bfc2e4.colorBrand_a2f23c174f:hover,\n.kindPrimary_ce55bfc2e4.colorBrand_a2f23c174f:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_ce55bfc2e4.colorPositive_a214c6b218 {\n  background: var(--positive-color);\n}\n.kindPrimary_ce55bfc2e4.colorPositiveActive_1ea633a45e,\n.kindPrimary_ce55bfc2e4.colorPositive_a214c6b218:hover,\n.kindPrimary_ce55bfc2e4.colorPositive_a214c6b218:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_ce55bfc2e4.colorNegative_afa6f8f3f8 {\n  background: var(--negative-color);\n}\n.kindPrimary_ce55bfc2e4.colorNegativeActive_1ea633a45e,\n.kindPrimary_ce55bfc2e4.colorNegative_afa6f8f3f8:hover,\n.kindPrimary_ce55bfc2e4.colorNegative_afa6f8f3f8:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_ce55bfc2e4.colorInverted_981d0231eb {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_ce55bfc2e4.colorInvertedActive_1ea633a45e,\n.kindPrimary_ce55bfc2e4.colorInverted_981d0231eb:hover,\n.kindPrimary_ce55bfc2e4.colorInverted_981d0231eb:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_ce55bfc2e4.button_8dad8228b2.colorInverted_981d0231eb.disabled_303b4e6766 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColorActive_8d8cc57096,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:hover,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColorActive_8d8cc57096:focus-visible, .kindPrimary_ce55bfc2e4.colorOnPrimaryColorActive_8d8cc57096.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:hover:focus-visible,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:hover.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:focus:focus-visible,\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:focus.focus-visible_be1f2838e0 {\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_ce55bfc2e4.colorOnPrimaryColorActive_8d8cc57096:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:hover:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindPrimary_ce55bfc2e4.colorOnPrimaryColor_3a3c714dfd.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_ce55bfc2e4.colorFixedLightActive_d28e4ad810,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:hover,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_ce55bfc2e4.colorFixedLightActive_d28e4ad810:focus-visible, .kindPrimary_ce55bfc2e4.colorFixedLightActive_d28e4ad810.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:hover:focus-visible,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:hover.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:focus:focus-visible,\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:focus.focus-visible_be1f2838e0 {\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_ce55bfc2e4.colorFixedLightActive_d28e4ad810:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:hover:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindPrimary_ce55bfc2e4.colorFixedLight_761d0ccc78.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_ce55bfc2e4.colorFixedDarkActive_dc7b895b0a,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:hover,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_ce55bfc2e4.colorFixedDarkActive_dc7b895b0a:focus-visible, .kindPrimary_ce55bfc2e4.colorFixedDarkActive_dc7b895b0a.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:hover:focus-visible,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:hover.focus-visible_be1f2838e0,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:focus:focus-visible,\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:focus.focus-visible_be1f2838e0 {\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_ce55bfc2e4.colorFixedDarkActive_dc7b895b0a:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:hover:focus:not(.focus-visible_be1f2838e0),\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindPrimary_ce55bfc2e4.colorFixedDark_09be7a9c9c.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_ce55bfc2e4.colorOnInvertedBackground_3899deba9e {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_ce55bfc2e4.colorOnInvertedBackgroundActive_05ec394419,\n.kindPrimary_ce55bfc2e4.colorOnInvertedBackground_3899deba9e:hover,\n.kindPrimary_ce55bfc2e4.colorOnInvertedBackground_3899deba9e:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_ce55bfc2e4.button_8dad8228b2.colorOnInvertedBackground_3899deba9e.disabled_303b4e6766 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_ce55bfc2e4.button_8dad8228b2.disabled_303b4e6766 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_3171e115a2 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_3171e115a2.sizeSmall_5554cf6186 {\n  line-height: 22px;\n}\n.kindSecondary_3171e115a2.sizeMedium_93f53fe7e1 {\n  line-height: 22px;\n}\n.kindSecondary_3171e115a2.sizeLarge_c0078ae226 {\n  line-height: 22px;\n}\n.kindSecondary_3171e115a2.colorPrimaryActive_05f657d045 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_3171e115a2.colorPrimaryActive_05f657d045:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_3171e115a2.colorBrandActive_86e61df751 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_3171e115a2.colorBrandActive_86e61df751,\n.kindSecondary_3171e115a2.colorBrandActive_86e61df751:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_3171e115a2.colorPrimary_780423cbd6:hover:not(.colorPrimaryActive_05f657d045),\n.kindSecondary_3171e115a2.colorPrimary_780423cbd6:focus:not(.colorPrimaryActive_05f657d045) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3171e115a2.colorBrand_a2f23c174f:hover:not(.colorBrandActive_86e61df751),\n.kindSecondary_3171e115a2.colorBrand_a2f23c174f:focus:not(.colorBrandActive_86e61df751) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3171e115a2.colorPositive_a214c6b218 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_3171e115a2.colorPositiveActive_1ea633a45e,\n.kindSecondary_3171e115a2.colorPositive_a214c6b218:hover,\n.kindSecondary_3171e115a2.colorPositive_a214c6b218:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_3171e115a2.colorNegative_afa6f8f3f8 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_3171e115a2.colorNegativeActive_1ea633a45e,\n.kindSecondary_3171e115a2.colorNegative_afa6f8f3f8:hover,\n.kindSecondary_3171e115a2.colorNegative_afa6f8f3f8:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_3171e115a2.colorInverted_981d0231eb {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_3171e115a2.colorInvertedActive_1ea633a45e,\n.kindSecondary_3171e115a2.colorInverted_981d0231eb:hover,\n.kindSecondary_3171e115a2.colorInverted_981d0231eb:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_3171e115a2.colorInverted_981d0231eb.disabled_303b4e6766 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_3171e115a2.colorOnPrimaryColorActive_8d8cc57096,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:hover,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_3171e115a2.colorOnPrimaryColorActive_8d8cc57096:focus-visible, .kindSecondary_3171e115a2.colorOnPrimaryColorActive_8d8cc57096.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:hover:focus-visible,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:hover.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:focus:focus-visible,\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:focus.focus-visible_be1f2838e0 {\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_3171e115a2.colorOnPrimaryColorActive_8d8cc57096:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:hover:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindSecondary_3171e115a2.colorOnPrimaryColor_3a3c714dfd.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_3171e115a2.colorFixedLightActive_d28e4ad810,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:hover,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_3171e115a2.colorFixedLightActive_d28e4ad810:focus-visible, .kindSecondary_3171e115a2.colorFixedLightActive_d28e4ad810.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:hover:focus-visible,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:hover.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:focus:focus-visible,\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:focus.focus-visible_be1f2838e0 {\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_3171e115a2.colorFixedLightActive_d28e4ad810:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:hover:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_3171e115a2.colorFixedDarkActive_dc7b895b0a,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:hover,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_3171e115a2.colorFixedDarkActive_dc7b895b0a:focus-visible, .kindSecondary_3171e115a2.colorFixedDarkActive_dc7b895b0a.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:hover:focus-visible,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:hover.focus-visible_be1f2838e0,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:focus:focus-visible,\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:focus.focus-visible_be1f2838e0 {\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_3171e115a2.colorFixedDarkActive_dc7b895b0a:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:hover:focus:not(.focus-visible_be1f2838e0),\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindSecondary_3171e115a2.colorOnInvertedBackground_3899deba9e {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_3171e115a2.colorOnInvertedBackgroundActive_05ec394419,\n.kindSecondary_3171e115a2.colorOnInvertedBackground_3899deba9e:hover,\n.kindSecondary_3171e115a2.colorOnInvertedBackground_3899deba9e:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_3171e115a2.colorOnInvertedBackground_3899deba9e.disabled_303b4e6766 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_3171e115a2.colorFixedLight_761d0ccc78.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_3171e115a2.colorFixedDark_09be7a9c9c.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_3171e115a2.disabled_303b4e6766 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_3171e115a2.disabled_303b4e6766:hover {\n  background-color: transparent;\n}\n.kindTertiary_b8d02b5765 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_b8d02b5765.colorPrimaryActive_05f657d045 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_b8d02b5765.colorPrimaryActive_05f657d045:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_b8d02b5765.colorBrandActive_86e61df751 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_b8d02b5765.colorBrandActive_86e61df751,\n.kindTertiary_b8d02b5765.colorBrandActive_86e61df751:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_b8d02b5765.colorPrimary_780423cbd6:hover:not(.colorPrimaryActive_05f657d045),\n.kindTertiary_b8d02b5765.colorPrimary_780423cbd6:focus:not(.colorPrimaryActive_05f657d045) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b8d02b5765.colorBrand_a2f23c174f:hover:not(.colorBrandActive_86e61df751),\n.kindTertiary_b8d02b5765.colorBrand_a2f23c174f:focus:not(.colorBrandActive_86e61df751) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b8d02b5765.colorPositive_a214c6b218 {\n  color: var(--positive-color);\n}\n.kindTertiary_b8d02b5765.colorPositiveActive_1ea633a45e,\n.kindTertiary_b8d02b5765.colorPositive_a214c6b218:hover,\n.kindTertiary_b8d02b5765.colorPositive_a214c6b218:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_b8d02b5765.colorNegative_afa6f8f3f8 {\n  color: var(--negative-color);\n}\n.kindTertiary_b8d02b5765.colorNegativeActive_1ea633a45e,\n.kindTertiary_b8d02b5765.colorNegative_afa6f8f3f8:hover,\n.kindTertiary_b8d02b5765.colorNegative_afa6f8f3f8:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_b8d02b5765.colorInverted_981d0231eb {\n  color: var(--primary-text-color);\n}\n.kindTertiary_b8d02b5765.colorInvertedActive_1ea633a45e,\n.kindTertiary_b8d02b5765.colorInverted_981d0231eb:hover,\n.kindTertiary_b8d02b5765.colorInverted_981d0231eb:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b8d02b5765.colorInverted_981d0231eb.disabled_303b4e6766 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_b8d02b5765.colorOnPrimaryColorActive_8d8cc57096,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:hover,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_b8d02b5765.colorOnPrimaryColorActive_8d8cc57096:focus-visible, .kindTertiary_b8d02b5765.colorOnPrimaryColorActive_8d8cc57096.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:hover:focus-visible,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:hover.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:focus:focus-visible,\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:focus.focus-visible_be1f2838e0 {\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_b8d02b5765.colorOnPrimaryColorActive_8d8cc57096:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:hover:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindTertiary_b8d02b5765.colorOnPrimaryColor_3a3c714dfd.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_b8d02b5765.colorFixedLightActive_d28e4ad810,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:hover,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_b8d02b5765.colorFixedLightActive_d28e4ad810:focus-visible, .kindTertiary_b8d02b5765.colorFixedLightActive_d28e4ad810.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:hover:focus-visible,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:hover.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:focus:focus-visible,\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:focus.focus-visible_be1f2838e0 {\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_b8d02b5765.colorFixedLightActive_d28e4ad810:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:hover:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindTertiary_b8d02b5765.colorFixedLight_761d0ccc78.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_b8d02b5765.colorFixedDarkActive_dc7b895b0a,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:hover,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_b8d02b5765.colorFixedDarkActive_dc7b895b0a:focus-visible, .kindTertiary_b8d02b5765.colorFixedDarkActive_dc7b895b0a.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:hover:focus-visible,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:hover.focus-visible_be1f2838e0,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:focus:focus-visible,\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:focus.focus-visible_be1f2838e0 {\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_b8d02b5765.colorFixedDarkActive_dc7b895b0a:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:hover:focus:not(.focus-visible_be1f2838e0),\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c:focus:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.kindTertiary_b8d02b5765.colorFixedDark_09be7a9c9c.disabled_303b4e6766 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_b8d02b5765.colorOnInvertedBackground_3899deba9e {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_b8d02b5765.colorOnInvertedBackgroundActive_05ec394419,\n.kindTertiary_b8d02b5765.colorOnInvertedBackground_3899deba9e:hover,\n.kindTertiary_b8d02b5765.colorOnInvertedBackground_3899deba9e:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_b8d02b5765.colorOnInvertedBackground_3899deba9e.disabled_303b4e6766 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_b8d02b5765.disabled_303b4e6766 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_b8d02b5765.disabled_303b4e6766:hover {\n  background-color: transparent;\n}\n.noSidePadding_dcb108335f {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_8dad8228b2.insetFocusStyle_4d86b87cf8:focus-visible, .button_8dad8228b2.insetFocusStyle_4d86b87cf8.focus-visible_be1f2838e0 {\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_8dad8228b2.insetFocusStyle_4d86b87cf8:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as s,useCallback as l,useMemo as a,useEffect as n}from"react";import{camelCase as d}from"lodash-es";import u from"classnames";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import m from"../Button/Button.js";import c from"../../hooks/usePrevious/index.js";import f from"../../hooks/useMergeRef.js";import{ButtonWrapper as v}from"./ButtonWrapper.js";import{withStaticProps as b}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as h}from"../../tests/testIds.js";import{ComponentDefaultTestId as y,ComponentVibeId as B}from"../../tests/constants.js";import j from"./ButtonGroup.module.scss.js";var k=b(i((function(i,m){var b=i.className,k=i.options,C=i.name,T=void 0===C?"":C,g=i.disabled,N=void 0!==g&&g,P=i.value,x=void 0===P?"":P,M=i.onSelect,O=i.size,S=void 0===O?"small":O,U=i.kind,D=void 0===U?"secondary":U,W=i.groupAriaLabel,z=void 0===W?"":W,E=i.tooltipPosition,G=i.tooltipHideDelay,H=i.tooltipShowDelay,I=i.tooltipContainerSelector,_=i.tooltipMoveBy,w=i.blurOnMouseUp,A=void 0===w||w,L=i.id,R=i["data-testid"],F=i.fullWidth,q=void 0!==F&&F,J=r(),K=f(m,J),Q=s(x),V=t(Q,2),X=V[0],Y=V[1],Z=c(x),$=l((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,T))}),[M,N,T]),tt=function(t){return(null==t?void 0:t.value)===X},et=a((function(){return k.find((function(t){return tt(t)}))}),[k,X]),ot=a((function(){return k.map((function(t,i){var r=tt(t),s=0===i,l=i===k.length-1,a=tt(k[i+1]);return o.createElement(v,{key:t.value,size:S,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,ariaLabel:t.ariaLabel,tooltipContent:t.tooltipContent,tooltipPosition:E,tooltipHideDelay:G,tooltipShowDelay:H,tooltipContainerSelector:I,tooltipMoveBy:_,blurOnMouseUp:A,fullWidth:q,className:u(j.button,j.optionText,e(e(e(e(e(e({},j.selected,r),j.disabled,N),j.buttonDisabled,t.disabled),j.fullWidth,q),j.startBorder,s),j.endBorder,l||!a)),activeButtonClassName:j.activeButton},t.text)}))}),[k,X,S,E,G,H,I,_,A,N,q,$]);return n((function(){x!==Z&&x!==X&&Y(x)}),[x,Z,X,Y]),o.createElement("div",{className:u(j.buttonGroup,b,p(j,d("kind-"+D)),e({},j.disabled,N)),id:L,"data-testid":R||h(y.BUTTON_GROUP,L),"data-vibe":B.BUTTON_GROUP,ref:K},o.createElement("div",{role:"group","aria-label":z,className:u(j.buttonsContainer,e({},j.fullWidth,q)),"aria-disabled":N},ot),et&&et.subText&&o.createElement("div",{className:u(j.subTextContainer)},et.subText))})),{sizes:m.sizes,kinds:m.kinds});export{k as default};
+import{slicedToArray as t,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as i,useRef as r,useState as s,useCallback as l,useMemo as a,useEffect as n}from"react";import{camelCase as u}from"es-toolkit";import d from"classnames";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import m from"../Button/Button.js";import c from"../../hooks/usePrevious/index.js";import f from"../../hooks/useMergeRef.js";import{ButtonWrapper as v}from"./ButtonWrapper.js";import{withStaticProps as b}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as h}from"../../tests/testIds.js";import{ComponentDefaultTestId as y,ComponentVibeId as B}from"../../tests/constants.js";import j from"./ButtonGroup.module.scss.js";var k=b(i((function(i,m){var b=i.className,k=i.options,C=i.name,T=void 0===C?"":C,g=i.disabled,N=void 0!==g&&g,P=i.value,x=void 0===P?"":P,M=i.onSelect,O=i.size,S=void 0===O?"small":O,U=i.kind,D=void 0===U?"secondary":U,W=i.groupAriaLabel,z=void 0===W?"":W,E=i.tooltipPosition,G=i.tooltipHideDelay,H=i.tooltipShowDelay,I=i.tooltipContainerSelector,_=i.tooltipMoveBy,w=i.blurOnMouseUp,A=void 0===w||w,L=i.id,R=i["data-testid"],F=i.fullWidth,q=void 0!==F&&F,J=r(),K=f(m,J),Q=s(x),V=t(Q,2),X=V[0],Y=V[1],Z=c(x),$=l((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,T))}),[M,N,T]),tt=function(t){return(null==t?void 0:t.value)===X},ot=a((function(){return k.find((function(t){return tt(t)}))}),[k,X]),et=a((function(){return k.map((function(t,i){var r=tt(t),s=0===i,l=i===k.length-1,a=tt(k[i+1]);return e.createElement(v,{key:t.value,size:S,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,ariaLabel:t.ariaLabel,tooltipContent:t.tooltipContent,tooltipPosition:E,tooltipHideDelay:G,tooltipShowDelay:H,tooltipContainerSelector:I,tooltipMoveBy:_,blurOnMouseUp:A,fullWidth:q,className:d(j.button,j.optionText,o(o(o(o(o(o({},j.selected,r),j.disabled,N),j.buttonDisabled,t.disabled),j.fullWidth,q),j.startBorder,s),j.endBorder,l||!a)),activeButtonClassName:j.activeButton},t.text)}))}),[k,X,S,E,G,H,I,_,A,N,q,$]);return n((function(){x!==Z&&x!==X&&Y(x)}),[x,Z,X,Y]),e.createElement("div",{className:d(j.buttonGroup,b,p(j,u("kind-"+D)),o({},j.disabled,N)),id:L,"data-testid":R||h(y.BUTTON_GROUP,L),"data-vibe":B.BUTTON_GROUP,ref:K},e.createElement("div",{role:"group","aria-label":z,className:d(j.buttonsContainer,o({},j.fullWidth,q)),"aria-disabled":N},et),ot&&ot.subText&&e.createElement("div",{className:d(j.subTextContainer)},ot.subText))})),{sizes:m.sizes,kinds:m.kinds});export{k as default};
 //# sourceMappingURL=ButtonGroup.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 { type ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { type SIZES } from \"../../constants\";\nimport { type ButtonType as ButtonTypeEnum } from \"../Button/ButtonConstants\";\nimport { type ButtonType, type ButtonSize } from \"../Button\";\nimport { type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { type TooltipPositions } from \"../Tooltip\";\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 = 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: React.ForwardedRef<HTMLDivElement>\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 isOptionActive = (option?: ButtonGroupOption) => option?.value === valueState;\n\n const selectedOption = useMemo(() => {\n return options.find(option => isOptionActive(option));\n }, [options, valueState]);\n\n const Buttons = useMemo(() => {\n return options.map((option, index) => {\n const isSelected = isOptionActive(option);\n const isFirst = index === 0;\n const isLast = index === options.length - 1;\n const isNextOptionActive = isOptionActive(options[index + 1]);\n\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 fullWidth={fullWidth}\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 [styles.startBorder]: isFirst,\n [styles.endBorder]: isLast \|\| !isNextOptionActive\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\n role=\"group\"\n aria-label={groupAriaLabel}\n className={cx(styles.buttonsContainer, { [styles.fullWidth]: fullWidth })}\n aria-disabled={disabled}\n >\n {Buttons}\n </div>\n {selectedOption && selectedOption.subText && (\n <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n )}\n </div>\n );\n }\n);\n\ninterface ButtonGroupStaticProps {\n sizes: typeof SIZES;\n kinds: typeof ButtonTypeEnum;\n}\n\nexport default withStaticProps<ButtonGroupProps, ButtonGroupStaticProps>(ButtonGroup, {\n sizes: Button.sizes,\n kinds: Button.kinds\n});\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","isOptionActive","selectedOption","useMemo","find","Buttons","map","index","isSelected","isFirst","isLast","length","isNextOptionActive","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","startBorder","endBorder","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 \"es-toolkit\";\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 { type ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { type SIZES } from \"../../constants\";\nimport { type ButtonType as ButtonTypeEnum } from \"../Button/ButtonConstants\";\nimport { type ButtonType, type ButtonSize } from \"../Button\";\nimport { type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { type TooltipPositions } from \"../Tooltip\";\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 = 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: React.ForwardedRef<HTMLDivElement>\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 isOptionActive = (option?: ButtonGroupOption) => option?.value === valueState;\n\n const selectedOption = useMemo(() => {\n return options.find(option => isOptionActive(option));\n }, [options, valueState]);\n\n const Buttons = useMemo(() => {\n return options.map((option, index) => {\n const isSelected = isOptionActive(option);\n const isFirst = index === 0;\n const isLast = index === options.length - 1;\n const isNextOptionActive = isOptionActive(options[index + 1]);\n\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 fullWidth={fullWidth}\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 [styles.startBorder]: isFirst,\n [styles.endBorder]: isLast \|\| !isNextOptionActive\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\n role=\"group\"\n aria-label={groupAriaLabel}\n className={cx(styles.buttonsContainer, { [styles.fullWidth]: fullWidth })}\n aria-disabled={disabled}\n >\n {Buttons}\n </div>\n {selectedOption && selectedOption.subText && (\n <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n )}\n </div>\n );\n }\n);\n\ninterface ButtonGroupStaticProps {\n sizes: typeof SIZES;\n kinds: typeof ButtonTypeEnum;\n}\n\nexport default withStaticProps<ButtonGroupProps, ButtonGroupStaticProps>(ButtonGroup, {\n sizes: Button.sizes,\n kinds: Button.kinds\n});\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","isOptionActive","selectedOption","useMemo","find","Buttons","map","index","isSelected","isFirst","isLast","length","isNextOptionActive","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","startBorder","endBorder","activeButtonClassName","activeButton","text","useEffect","buttonGroup","getStyle","camelCase","getTestId","ComponentDefaultTestId","BUTTON_GROUP","ComponentVibeId","role","buttonsContainer","subText","subTextContainer","sizes","Button","kinds"],"mappings":"qyBAiGA,IAiJeA,EAAAA,EAjJKC,GAClB,SAAAC,EAqBEC,GACE,IApBAC,EAASF,EAATE,UACAC,EAAOH,EAAPG,QAAOC,EAAAJ,EACPK,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACTO,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAR,EAChBS,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAQV,EAARU,SAAQC,EAAAX,EACRY,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAb,EACdc,KAAAA,OAAO,IAAHD,EAAG,YAAWA,EAAAE,EAAAf,EAClBgB,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EACnBE,EAAejB,EAAfiB,gBACAC,EAAgBlB,EAAhBkB,iBACAC,EAAgBnB,EAAhBmB,iBACAC,EAAwBpB,EAAxBoB,yBACAC,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,cAAAA,OAAgB,IAAHD,GAAOA,EACpBE,EAAExB,EAAFwB,GACeC,EAAUzB,EAAzB,eAAa0B,EAAA1B,EACb2B,UAAAA,OAAY,IAAHD,GAAQA,EAIbE,EAAWC,IACXC,EAAYC,EAAY9B,EAAK2B,GAEnCI,EAAoCC,EAASxB,GAAMyB,EAAAC,EAAAH,EAAA,GAA5CI,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAC1BI,EAAYC,EAAY9B,GAExB+B,EAAUC,GACd,SAACC,GACoBnC,GAAYmC,EAAOnC,WAEpC8B,EAAcK,EAAOjC,OACjBC,GACFA,EAASgC,EAAOjC,MAAOJ,GAG5B,GACD,CAACK,EAAUH,EAAUF,IAGjBsC,GAAiB,SAACD,GAA0B,OAAKA,aAAA,EAAAA,EAAQjC,SAAU2B,CAAU,EAE7EQ,GAAiBC,GAAQ,WAC7B,OAAO1C,EAAQ2C,MAAK,SAAAJ,GAAM,OAAIC,GAAeD,KAC/C,GAAG,CAACvC,EAASiC,IAEPW,GAAUF,GAAQ,WACtB,OAAO1C,EAAQ6C,KAAI,SAACN,EAAQO,GAC1B,IAAMC,EAAaP,GAAeD,GAC5BS,EAAoB,IAAVF,EACVG,EAASH,IAAU9C,EAAQkD,OAAS,EACpCC,EAAqBX,GAAexC,EAAQ8C,EAAQ,IAE1D,OACEM,EAACC,cAAAC,EACC,CAAAC,IAAKhB,EAAOjC,MACZG,KAAMA,EACN4B,QAAS,WAAA,OAAMA,EAAQE,EAAO,EAC9BiB,UAAWjB,EAAOkB,KAClBC,SAAUnB,EAAOmB,SACjBC,OAAQZ,EACRa,UAAWd,IAAU9C,EAAQkD,OAAS,EACtCW,SAAoB,IAAVf,EACVnC,KAAK,WACLmD,uBACA,EAAAC,UAAWxB,EAAOwB,UAClBC,eAAgBzB,EAAOyB,eACvBlD,gBAAiBA,EACjBC,iBAAkBA,EAClBC,iBAAkBA,EAClBC,yBAA0BA,EAC1BC,cAAeA,EACfE,cAAeA,EACfI,UAAWA,EACXzB,UAAWkE,EAAGC,EAAOC,OAAQD,EAAOE,WAAUC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAC3CH,EAAOI,SAAWvB,GAClBmB,EAAO9D,SAAWA,GAClB8D,EAAOK,eAAiBhC,EAAOnC,UAC/B8D,EAAO1C,UAAYA,GACnB0C,EAAOM,YAAcxB,GACrBkB,EAAOO,UAAYxB,IAAWE,IAEjCuB,sBAAuBR,EAAOS,cAE7BpC,EAAOqC,KAGd,GACD,GAAE,CACD5E,EACAiC,EACAxB,EACAK,EACAC,EACAC,EACAC,EACAC,EACAE,EACAhB,EACAoB,EACAa,IAWF,OAPAwC,GAAU,WAEJvE,IAAU6B,GAAa7B,IAAU2B,GACnCC,EAAc5B,EAEjB,GAAE,CAACA,EAAO6B,EAAWF,EAAYC,IAGhCkB,uBACErD,UAAWkE,EAAGC,EAAOY,YAAa/E,EAAWgF,EAASb,EAAQc,EAAU,QAAUrE,IAAM0D,EACrFH,CAAAA,EAAAA,EAAO9D,SAAWA,IAErBiB,GAAIA,gBACSC,GAAc2D,EAAUC,EAAuBC,aAAc9D,GAC/D,YAAA+D,EAAgBD,aAC3BrF,IAAK6B,GAELyB,EAAAC,cAAA,MAAA,CACEgC,KAAK,QAAO,aACAxE,EACZd,UAAWkE,EAAGC,EAAOoB,iBAAgBjB,EAAA,CAAA,EAAKH,EAAO1C,UAAYA,IAC9C,gBAAApB,GAEdwC,IAEFH,IAAkBA,GAAe8C,SAChCnC,EAAAC,cAAA,MAAA,CAAKtD,UAAWkE,EAAGC,EAAOsB,mBAAoB/C,GAAe8C,SAIrE,IAQoF,CACpFE,MAAOC,EAAOD,MACdE,MAAOD,EAAOC"}

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

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_1b0a2aaf39",subTextContainer:"subTextContainer_39bbe30cfc",buttonsContainer:"buttonsContainer_3b728d22c0",fullWidth:"fullWidth_0c38eb6394",button:"button_e2df5db99e",activeButton:"activeButton_e5872774a6",disabled:"disabled_91054f0f14",buttonDisabled:"buttonDisabled_7ac2f4b38d",startBorder:"startBorder_e096d44304",endBorder:"endBorder_7f3e364d50",kindTertiary:"kindTertiary_b0f8d9ea6a",optionText:"optionText_05a7fdb540",selected:"selected_ebcac49cdb",wrapper:"wrapper_64d751664e"};!function(n){const t="s_id-4b7ca9f3603b_3_61_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".buttonGroup_1b0a2aaf39 {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_39bbe30cfc {\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_3b728d22c0 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_3b728d22c0.fullWidth_0c38eb6394 {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.activeButton_e5872774a6 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.activeButton_e5872774a6:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.disabled_91054f0f14, .buttonsContainer_3b728d22c0 .button_e2df5db99e.buttonDisabled_7ac2f4b38d {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.startBorder_e096d44304 {\n  border-inline-start-width: 1px;\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.endBorder_7f3e364d50 {\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_3b728d22c0 .button_e2df5db99e.fullWidth_0c38eb6394 {\n  width: 100%;\n  display: flex;\n}\n\n.kindTertiary_b0f8d9ea6a .buttonsContainer_3b728d22c0 .button_e2df5db99e {\n  border-color: transparent;\n}\n\n.kindTertiary_b0f8d9ea6a .buttonsContainer_3b728d22c0 .button_e2df5db99e:first-child {\n  border-color: transparent;\n}\n\n.optionText_05a7fdb540:not(.disabled_91054f0f14) {\n  color: var(--primary-text-color);\n}\n\n.optionText_05a7fdb540:not(.disabled_91054f0f14).selected_ebcac49cdb {\n  color: var(--primary-text-color);\n}\n\n.wrapper_64d751664e.disabled_91054f0f14 {\n  cursor: not-allowed;\n}\n\n.fullWidth_0c38eb6394 {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_8efd055d77",subTextContainer:"subTextContainer_13b48db9b6",buttonsContainer:"buttonsContainer_4295fd7293",fullWidth:"fullWidth_90061c111e",button:"button_1388ff992c",activeButton:"activeButton_f611c6c93a",disabled:"disabled_5a4cc9ab19",buttonDisabled:"buttonDisabled_a76aa25ed0",startBorder:"startBorder_62dd9b86c8",endBorder:"endBorder_a7cb74d5f7",kindTertiary:"kindTertiary_86fc35c999",optionText:"optionText_5031e35931",selected:"selected_26d0db93e3",wrapper:"wrapper_908a5ff7f7"};!function(n){const t="s_id-4b7ca9f3603b_3_62_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const e=document.createElement("style");e.id=t,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".buttonGroup_8efd055d77 {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_13b48db9b6 {\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_4295fd7293 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_4295fd7293.fullWidth_90061c111e {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.activeButton_f611c6c93a {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.activeButton_f611c6c93a:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.disabled_5a4cc9ab19, .buttonsContainer_4295fd7293 .button_1388ff992c.buttonDisabled_a76aa25ed0 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.startBorder_62dd9b86c8 {\n  border-inline-start-width: 1px;\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.endBorder_a7cb74d5f7 {\n  border-inline-end-width: 1px;\n}\n\n.buttonsContainer_4295fd7293 .button_1388ff992c.fullWidth_90061c111e {\n  width: 100%;\n  display: flex;\n}\n\n.kindTertiary_86fc35c999 .buttonsContainer_4295fd7293 .button_1388ff992c {\n  border-color: transparent;\n}\n\n.kindTertiary_86fc35c999 .buttonsContainer_4295fd7293 .button_1388ff992c:first-child {\n  border-color: transparent;\n}\n\n.optionText_5031e35931:not(.disabled_5a4cc9ab19) {\n  color: var(--primary-text-color);\n}\n\n.optionText_5031e35931:not(.disabled_5a4cc9ab19).selected_26d0db93e3 {\n  color: var(--primary-text-color);\n}\n\n.wrapper_908a5ff7f7.disabled_5a4cc9ab19 {\n  cursor: not-allowed;\n}\n\n.fullWidth_90061c111e {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import t from"react";import{isNil as e}from"lodash-es";import i from"../Button/Button.js";import l from"../Tooltip/Tooltip.js";import r from"./ButtonGroup.module.scss.js";var a=function(a){var s=a.tooltipContent,n=a.tooltipPosition,p=a.tooltipHideDelay,m=a.tooltipShowDelay,c=a.tooltipContainerSelector,u=a.tooltipMoveBy,d=a.fullWidth,f=a.className,h=o(a,["tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className"]),v=t.createElement(i,Object.assign({},h,{className:f}));return e(s)?d?t.createElement("div",{className:r.fullWidth},v):v:t.createElement(l,{moveBy:u,position:n,hideDelay:p,showDelay:m,content:s,showTrigger:["mouseenter"],hideTrigger:["mouseleave"],containerSelector:c,referenceWrapperClassName:d?r.fullWidth:void 0},v)};export{a as ButtonWrapper};
+import{__rest as o}from"../../../_virtual/_tslib.js";import t from"react";import{isNil as e}from"es-toolkit/compat";import i from"../Button/Button.js";import l from"../Tooltip/Tooltip.js";import r from"./ButtonGroup.module.scss.js";var a=function(a){var s=a.tooltipContent,n=a.tooltipPosition,p=a.tooltipHideDelay,m=a.tooltipShowDelay,c=a.tooltipContainerSelector,u=a.tooltipMoveBy,f=a.fullWidth,d=a.className,h=o(a,["tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className"]),v=t.createElement(i,Object.assign({},h,{className:d}));return e(s)?f?t.createElement("div",{className:r.fullWidth},v):v:t.createElement(l,{moveBy:u,position:n,hideDelay:p,showDelay:m,content:s,showTrigger:["mouseenter"],hideTrigger:["mouseleave"],containerSelector:c,referenceWrapperClassName:f?r.fullWidth:void 0},v)};export{a as ButtonWrapper};
 //# sourceMappingURL=ButtonWrapper.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, { type ButtonProps } from \"../Button/Button\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type TooltipPositions } from \"../Tooltip/Tooltip.types\";\nimport styles from \"./ButtonGroup.module.scss\";\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 If true, makes the button take the full width of its container.\n */\n fullWidth?: boolean;\n}\n\nexport const ButtonWrapper = ({\n tooltipContent,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n fullWidth,\n className,\n ...otherProps\n}: ButtonWrapperProps) => {\n const button = <Button {...otherProps} className={className} />;\n\n if (!isNil(tooltipContent)) {\n return (\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 referenceWrapperClassName={fullWidth ? styles.fullWidth : undefined}\n >\n {button}\n </Tooltip>\n );\n }\n\n // Always wrap in a div when fullWidth to ensure consistent structure\n if (fullWidth) {\n return <div className={styles.fullWidth}>{button}</div>;\n }\n\n return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","styles","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector","referenceWrapperClassName","undefined"],"mappings":"~~oOAuCaA~~,EAAgB,SAACC,OAC5BC,EAOSD,EAPTC,eACAC,EAMSF,EANTE,gBACAC,EAKSH,EALTG,iBACAC,EAISJ,EAJTI,iBACAC,EAGSL,EAHTK,yBACAC,EAESN,EAFTM,cACAC,EACSP,EADTO,UACAC,EAASR,EAATQ,UACGC,EAAUC,EAAAV,EATe,+IAWtBW,EAASC,EAAAC,cAACC,EAAMC,OAAAC,OAAA,CAAA,EAAKP,EAAU,CAAED,UAAWA,KAElD,OAAKS,EAAMhB,GAmBPM,EACKK,EAAAC,cAAA,MAAA,CAAKL,UAAWU,EAAOX,WAAYI,GAGrCA,EArBHC,EAACC,cAAAM,EACC,CAAAC,OAAQd,EACRe,SAAUnB,EACVoB,UAAWnB,EACXoB,UAAWnB,EACXoB,QAASvB,EACTwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBtB,EACnBuB,0BAA2BrB,EAAYW,EAAOX,eAAYsB,GAEzDlB,EAWT"}
1	+ {"version":3,"file":"ButtonWrapper.js","sources":["../../../../src/components/ButtonGroup/ButtonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { isNil } from \"es-toolkit/compat\";\nimport Button, { type ButtonProps } from \"../Button/Button\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type TooltipPositions } from \"../Tooltip/Tooltip.types\";\nimport styles from \"./ButtonGroup.module.scss\";\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 If true, makes the button take the full width of its container.\n */\n fullWidth?: boolean;\n}\n\nexport const ButtonWrapper = ({\n tooltipContent,\n tooltipPosition,\n tooltipHideDelay,\n tooltipShowDelay,\n tooltipContainerSelector,\n tooltipMoveBy,\n fullWidth,\n className,\n ...otherProps\n}: ButtonWrapperProps) => {\n const button = <Button {...otherProps} className={className} />;\n\n if (!isNil(tooltipContent)) {\n return (\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 referenceWrapperClassName={fullWidth ? styles.fullWidth : undefined}\n >\n {button}\n </Tooltip>\n );\n }\n\n // Always wrap in a div when fullWidth to ensure consistent structure\n if (fullWidth) {\n return <div className={styles.fullWidth}>{button}</div>;\n }\n\n return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","styles","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector","referenceWrapperClassName","undefined"],"mappings":"4OAuCaA,EAAgB,SAACC,OAC5BC,EAOSD,EAPTC,eACAC,EAMSF,EANTE,gBACAC,EAKSH,EALTG,iBACAC,EAISJ,EAJTI,iBACAC,EAGSL,EAHTK,yBACAC,EAESN,EAFTM,cACAC,EACSP,EADTO,UACAC,EAASR,EAATQ,UACGC,EAAUC,EAAAV,EATe,+IAWtBW,EAASC,EAAAC,cAACC,EAAMC,OAAAC,OAAA,CAAA,EAAKP,EAAU,CAAED,UAAWA,KAElD,OAAKS,EAAMhB,GAmBPM,EACKK,EAAAC,cAAA,MAAA,CAAKL,UAAWU,EAAOX,WAAYI,GAGrCA,EArBHC,EAACC,cAAAM,EACC,CAAAC,OAAQd,EACRe,SAAUnB,EACVoB,UAAWnB,EACXoB,UAAWnB,EACXoB,QAASvB,EACTwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBtB,EACnBuB,0BAA2BrB,EAAYW,EAAOX,eAAYsB,GAEzDlB,EAWT"}

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as a,useRef as t,useCallback as o,useEffect as n,useMemo as i}from"react";import r from"classnames";import{isNil as l,noop as s}from"lodash-es";import c from"../Icon/Icon.js";import{useSupportFirefoxLabelClick as m}from"./hooks/useSupportFirefoxLabelClick.js";import d from"../../hooks/useMergeRef.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as C}from"../../tests/constants.js";import b from"../Text/Text.js";import f from"./Checkbox.module.scss.js";import E from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";var k=a((function(a,k){var v=a.className,x=a.checkboxClassName,B=a.labelClassName,N=a.ariaLabel,y=a.label,H=a.ariaLabelledBy,F=a.onChange,K=void 0===F?s:F,O=a.checked,X=a.autoFocus,g=a.indeterminate,j=void 0!==g&&g,L=a.disabled,w=void 0!==L&&L,I=a.defaultChecked,S=a.tabIndex,A=a.value,M=void 0===A?"":A,T=a.name,_=void 0===T?"":T,R=a.id,U=a.separateLabel,q=void 0!==U&&U,z=a["data-testid"],D=t(null),G=d(k,D),J=t(null),P=o((function(){var e=D.current;e&&window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){e.blur()}))}))}),[D]),Q=I;l(Q)&&l(O)&&(Q=!1),n((function(){D.current&&(D.current.indeterminate=j)}),[D,j]);var V=m({inputRef:D}).onClickCapture,W=i((function(){return N||("string"==typeof y?y:"")}),[N,y]);return q?e.createElement("div",{className:r(f.wrapper,v),"data-testid":z||u(p.CHECKBOX,R),"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("label",{htmlFor:R,className:r(f.checkbox,x),"data-testid":u(p.CHECKBOX_CHECKBOX,R),onMouseUp:P,onClickCapture:V},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement("label",{htmlFor:R,className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R),onMouseUp:P,onClickCapture:V},e.createElement(b,{element:"span",type:"text2"},y))):e.createElement("label",{className:r(f.wrapper,v),onMouseUp:P,"data-testid":z||u(p.CHECKBOX,R),htmlFor:R,onClickCapture:V,"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("div",{className:r(f.checkbox,x),ref:J,"data-testid":u(p.CHECKBOX_CHECKBOX,R)},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement(b,{element:"span",type:"text2",className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R)},y))}));export{k as default};
+import e,{forwardRef as a,useRef as t,useCallback as o,useEffect as i,useMemo as n}from"react";import r from"classnames";import{isNil as l,noop as s}from"es-toolkit/compat";import c from"../Icon/Icon.js";import{useSupportFirefoxLabelClick as m}from"./hooks/useSupportFirefoxLabelClick.js";import d from"../../hooks/useMergeRef.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as C}from"../../tests/constants.js";import b from"../Text/Text.js";import f from"./Checkbox.module.scss.js";import E from"../../../icons/dist/react/Remove.js";import h from"../../../icons/dist/react/Check.js";var k=a((function(a,k){var v=a.className,x=a.checkboxClassName,B=a.labelClassName,N=a.ariaLabel,y=a.label,H=a.ariaLabelledBy,F=a.onChange,K=void 0===F?s:F,O=a.checked,X=a.autoFocus,g=a.indeterminate,j=void 0!==g&&g,L=a.disabled,w=void 0!==L&&L,I=a.defaultChecked,S=a.tabIndex,A=a.value,M=void 0===A?"":A,T=a.name,_=void 0===T?"":T,R=a.id,U=a.separateLabel,q=void 0!==U&&U,z=a["data-testid"],D=t(null),G=d(k,D),J=t(null),P=o((function(){var e=D.current;e&&window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){e.blur()}))}))}),[D]),Q=I;l(Q)&&l(O)&&(Q=!1),i((function(){D.current&&(D.current.indeterminate=j)}),[D,j]);var V=m({inputRef:D}).onClickCapture,W=n((function(){return N||("string"==typeof y?y:"")}),[N,y]);return q?e.createElement("div",{className:r(f.wrapper,v),"data-testid":z||u(p.CHECKBOX,R),"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("label",{htmlFor:R,className:r(f.checkbox,x),"data-testid":u(p.CHECKBOX_CHECKBOX,R),onMouseUp:P,onClickCapture:V},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement("label",{htmlFor:R,className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R),onMouseUp:P,onClickCapture:V},e.createElement(b,{element:"span",type:"text2"},y))):e.createElement("label",{className:r(f.wrapper,v),onMouseUp:P,"data-testid":z||u(p.CHECKBOX,R),htmlFor:R,onClickCapture:V,"data-vibe":C.CHECKBOX},e.createElement("input",{ref:G,id:R,className:f.input,value:M,name:_,type:"checkbox",autoFocus:X,onChange:K,defaultChecked:Q,disabled:w,"aria-label":W,"aria-labelledby":H,checked:O,tabIndex:S}),e.createElement("div",{className:r(f.checkbox,x),ref:J,"data-testid":u(p.CHECKBOX_CHECKBOX,R)},e.createElement(c,{className:f.icon,iconType:"svg",icon:j?E:h,ignoreFocusStyle:!0,ariaHidden:!0,iconSize:"16"})),!1===y?null:e.createElement(b,{element:"span",type:"text2",className:r(f.label,B),"data-testid":u(p.CHECKBOX_LABEL,R)},y))}));export{k as default};
 //# sourceMappingURL=Checkbox.js.map

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 React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\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 { type 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 If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n * If using this the id prop is required for it to function correctly.\n /\n separateLabel?: boolean;\n}\n\nconst Checkbox = 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 separateLabel = false,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref: React.ForwardedRef<HTMLInputElement>\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 if (separateLabel) {\n return (\n <div\n className={cx(styles.wrapper, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\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 {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <label\n htmlFor={id}\n className={cx(styles.checkbox, checkboxClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\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 </label>\n {label === false ? null : (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n htmlFor={id}\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Text element=\"span\" type=\"text2\">\n {label}\n </Text>\n </label>\n )}\n </div>\n );\n }\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 data-vibe={ComponentVibeId.CHECKBOX}\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 >\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","_ref$separateLabel","separateLabel","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","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","CHECKBOX_LABEL","Text","element"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit/compat\";\nimport Icon from \"../Icon/Icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type 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 If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n * If using this the id prop is required for it to function correctly.\n /\n separateLabel?: boolean;\n}\n\nconst Checkbox = 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 separateLabel = false,\n \"data-testid\": dataTestId\n }: CheckBoxProps,\n ref: React.ForwardedRef<HTMLInputElement>\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 if (separateLabel) {\n return (\n <div\n className={cx(styles.wrapper, className)}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n data-vibe={ComponentVibeId.CHECKBOX}\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 {/ eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <label\n htmlFor={id}\n className={cx(styles.checkbox, checkboxClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\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 </label>\n {label === false ? null : (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <label\n htmlFor={id}\n className={cx(styles.label, labelClassName)}\n data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n onMouseUp={onMouseUpCallback}\n onClickCapture={onClickCaptureLabel}\n >\n <Text element=\"span\" type=\"text2\">\n {label}\n </Text>\n </label>\n )}\n </div>\n );\n }\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 data-vibe={ComponentVibeId.CHECKBOX}\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 >\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","_ref$separateLabel","separateLabel","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","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","CHECKBOX_LABEL","Text","element"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper_d133437017",checkbox:"checkbox_f7ebc1fbc7",icon:"icon_7bc4999204",label:"label_d2c0a1b371",input:"input_83559c68d9",checkboxGrowAnimation:"checkboxGrowAnimation_0926510e73"};!function(n){const e="s_id-3c767214051a_3_61_1";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,c.firstChild?c.insertBefore(o,c.firstChild):c.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable selector-class-pattern */\n.wrapper_d133437017 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_f7ebc1fbc7 {\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.checkbox_f7ebc1fbc7: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.checkbox_f7ebc1fbc7:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_7bc4999204 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_d2c0a1b371 {\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/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_83559c68d9 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_83559c68d9:focus + .checkbox_f7ebc1fbc7 {\n  border-color: var(--secondary-text-color);\n}\n.input_83559c68d9:focus:checked + .checkbox_f7ebc1fbc7 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_83559c68d9:focus-visible + .checkbox_f7ebc1fbc7 {\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.input_83559c68d9:checked:focus + .checkbox_f7ebc1fbc7:after,\n.input_83559c68d9:indeterminate:focus + .checkbox_f7ebc1fbc7:after {\n  background-color: var(--primary-hover-color);\n}\n.input_83559c68d9:checked + .checkbox_f7ebc1fbc7,\n.input_83559c68d9:indeterminate + .checkbox_f7ebc1fbc7 {\n  animation: checkboxGrowAnimation_0926510e73 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_83559c68d9:checked + .checkbox_f7ebc1fbc7:hover,\n.input_83559c68d9:indeterminate + .checkbox_f7ebc1fbc7:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_83559c68d9:checked + .checkbox_f7ebc1fbc7:hover:after,\n.input_83559c68d9:indeterminate + .checkbox_f7ebc1fbc7:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_83559c68d9:checked + .checkbox_f7ebc1fbc7:after,\n.input_83559c68d9:indeterminate + .checkbox_f7ebc1fbc7: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.input_83559c68d9:checked + .checkbox_f7ebc1fbc7 > .icon_7bc4999204,\n.input_83559c68d9:indeterminate + .checkbox_f7ebc1fbc7 > .icon_7bc4999204 {\n  visibility: visible;\n}\n.input_83559c68d9:checked:disabled + .checkbox_f7ebc1fbc7:after,\n.input_83559c68d9:indeterminate:disabled + .checkbox_f7ebc1fbc7:after {\n  background-color: var(--disabled-background-color);\n}\n.input_83559c68d9:disabled + .checkbox_f7ebc1fbc7 .icon_7bc4999204,\n.input_83559c68d9:disabled + .checkbox_f7ebc1fbc7:hover .icon_7bc4999204 {\n  color: var(--disabled-text-color);\n}\n.input_83559c68d9:disabled + .checkbox_f7ebc1fbc7,\n.input_83559c68d9:disabled + .checkbox_f7ebc1fbc7:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_83559c68d9:disabled ~ .label_d2c0a1b371 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_0926510e73 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var n={wrapper:"wrapper_965e5f899a",checkbox:"checkbox_c910619b83",icon:"icon_3faef55c4e",label:"label_b5a1e513e2",input:"input_fb0cd696b8",checkboxGrowAnimation:"checkboxGrowAnimation_1c38d845d5"};!function(n){const e="s_id-3c767214051a_3_62_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable selector-class-pattern */\n.wrapper_965e5f899a {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_c910619b83 {\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.checkbox_c910619b83: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.checkbox_c910619b83:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_3faef55c4e {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_b5a1e513e2 {\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/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_fb0cd696b8 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_fb0cd696b8:focus + .checkbox_c910619b83 {\n  border-color: var(--secondary-text-color);\n}\n.input_fb0cd696b8:focus:checked + .checkbox_c910619b83 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_fb0cd696b8:focus-visible + .checkbox_c910619b83 {\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.input_fb0cd696b8:checked:focus + .checkbox_c910619b83:after,\n.input_fb0cd696b8:indeterminate:focus + .checkbox_c910619b83:after {\n  background-color: var(--primary-hover-color);\n}\n.input_fb0cd696b8:checked + .checkbox_c910619b83,\n.input_fb0cd696b8:indeterminate + .checkbox_c910619b83 {\n  animation: checkboxGrowAnimation_1c38d845d5 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_fb0cd696b8:checked + .checkbox_c910619b83:hover,\n.input_fb0cd696b8:indeterminate + .checkbox_c910619b83:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_fb0cd696b8:checked + .checkbox_c910619b83:hover:after,\n.input_fb0cd696b8:indeterminate + .checkbox_c910619b83:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_fb0cd696b8:checked + .checkbox_c910619b83:after,\n.input_fb0cd696b8:indeterminate + .checkbox_c910619b83: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.input_fb0cd696b8:checked + .checkbox_c910619b83 > .icon_3faef55c4e,\n.input_fb0cd696b8:indeterminate + .checkbox_c910619b83 > .icon_3faef55c4e {\n  visibility: visible;\n}\n.input_fb0cd696b8:checked:disabled + .checkbox_c910619b83:after,\n.input_fb0cd696b8:indeterminate:disabled + .checkbox_c910619b83:after {\n  background-color: var(--disabled-background-color);\n}\n.input_fb0cd696b8:disabled + .checkbox_c910619b83 .icon_3faef55c4e,\n.input_fb0cd696b8:disabled + .checkbox_c910619b83:hover .icon_3faef55c4e {\n  color: var(--disabled-text-color);\n}\n.input_fb0cd696b8:disabled + .checkbox_c910619b83,\n.input_fb0cd696b8:disabled + .checkbox_c910619b83:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_fb0cd696b8:disabled ~ .label_b5a1e513e2 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_1c38d845d5 {\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.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_4c19f0c00b","focus-visible":"focus-visible_d78c6951bc",disabled:"disabled_3726bd7d8c",disableTextSelection:"disableTextSelection_920ee82676",chips:"chips_e501d98fba","chips-pop-in-emphasized":"chips-pop-in-emphasized_c580f3f2db",border:"border_cae888cec1",withUserSelect:"withUserSelect_972752b160",noMargin:"noMargin_b1a23bdc0d",label:"label_d421c56f0f",noAnimation:"noAnimation_af5aec5d38",icon:"icon_4388d11e48",avatar:"avatar_6ac6ba8504",customRenderer:"customRenderer_5190e87a34",left:"left_0744be4a74",right:"right_30f7756735",close:"close_974cc884ce",defaultCursor:"defaultCursor_3726bd7d8c"};!function(e){const n="s_id-b08f85dbbdad_3_61_1";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,c.firstChild?c.insertBefore(i,c.firstChild):c.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_4c19f0c00b {\n  cursor: pointer;\n}\n.clickable_4c19f0c00b:focus-visible, .clickable_4c19f0c00b.focus-visible_d78c6951bc {\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_4c19f0c00b:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.clickable_4c19f0c00b.disabled_3726bd7d8c {\n  cursor: default;\n}\n.disableTextSelection_920ee82676 {\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/* stylelint-disable selector-class-pattern */\n.chips_e501d98fba {\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_c580f3f2db var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_e501d98fba.border_cae888cec1 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_e501d98fba.withUserSelect_972752b160 {\n  user-select: text;\n  cursor: text;\n}\n.chips_e501d98fba.noMargin_b1a23bdc0d {\n  margin: 0;\n}\n.chips_e501d98fba .label_d421c56f0f {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_e501d98fba.noAnimation_af5aec5d38 {\n  animation: none;\n}\n.chips_e501d98fba .icon_4388d11e48,\n.chips_e501d98fba .avatar_6ac6ba8504,\n.chips_e501d98fba .customRenderer_5190e87a34 {\n  min-width: 18px;\n}\n.chips_e501d98fba .icon_4388d11e48.left_0744be4a74,\n.chips_e501d98fba .avatar_6ac6ba8504.left_0744be4a74,\n.chips_e501d98fba .customRenderer_5190e87a34.left_0744be4a74 {\n  margin-right: var(--spacing-xs);\n}\n.chips_e501d98fba .icon_4388d11e48.right_30f7756735,\n.chips_e501d98fba .avatar_6ac6ba8504.right_30f7756735,\n.chips_e501d98fba .customRenderer_5190e87a34.right_30f7756735 {\n  margin-left: var(--spacing-xs);\n}\n.chips_e501d98fba .icon_4388d11e48.close_974cc884ce,\n.chips_e501d98fba .avatar_6ac6ba8504.close_974cc884ce,\n.chips_e501d98fba .customRenderer_5190e87a34.close_974cc884ce {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_e501d98fba.disabled_3726bd7d8c .icon_4388d11e48 {\n  color: var(--disabled-text-color);\n}\n.chips_e501d98fba.disabled_3726bd7d8c .label_d421c56f0f {\n  color: var(--disabled-text-color);\n}\n.chips_e501d98fba.defaultCursor_3726bd7d8c {\n  cursor: default;\n}\n.chips_e501d98fba.clickable_4c19f0c00b {\n  cursor: pointer;\n}\n.chips_e501d98fba.clickable_4c19f0c00b:focus-visible, .chips_e501d98fba.clickable_4c19f0c00b.focus-visible_d78c6951bc {\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_e501d98fba.clickable_4c19f0c00b:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.chips_e501d98fba.clickable_4c19f0c00b.disabled_3726bd7d8c {\n  cursor: default;\n}\n.chips_e501d98fba.clickable_4c19f0c00b.disableTextSelection_920ee82676 {\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_c580f3f2db {\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_e61ebbf60e","focus-visible":"focus-visible_be1f2838e0",disabled:"disabled_b8dfddb67e",disableTextSelection:"disableTextSelection_44699f7595",chips:"chips_6fc276e457","chips-pop-in-emphasized":"chips-pop-in-emphasized_82bcdf155f",border:"border_24ea9e5294",withUserSelect:"withUserSelect_ccfdab6b7d",noMargin:"noMargin_73dd4b17ff",label:"label_172a58563d",noAnimation:"noAnimation_19f32960f7",icon:"icon_3a67681e59",avatar:"avatar_d485f03eb6",customRenderer:"customRenderer_aa18896902",left:"left_68b7ea130f",right:"right_8a009e0258",close:"close_0c09762274",defaultCursor:"defaultCursor_b8dfddb67e"};!function(e){const n="s_id-b08f85dbbdad_3_62_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_e61ebbf60e {\n  cursor: pointer;\n}\n.clickable_e61ebbf60e:focus-visible, .clickable_e61ebbf60e.focus-visible_be1f2838e0 {\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_e61ebbf60e:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.clickable_e61ebbf60e.disabled_b8dfddb67e {\n  cursor: default;\n}\n.disableTextSelection_44699f7595 {\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/* stylelint-disable selector-class-pattern */\n.chips_6fc276e457 {\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_82bcdf155f var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_6fc276e457.border_24ea9e5294 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_6fc276e457.withUserSelect_ccfdab6b7d {\n  user-select: text;\n  cursor: text;\n}\n.chips_6fc276e457.noMargin_73dd4b17ff {\n  margin: 0;\n}\n.chips_6fc276e457 .label_172a58563d {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_6fc276e457.noAnimation_19f32960f7 {\n  animation: none;\n}\n.chips_6fc276e457 .icon_3a67681e59,\n.chips_6fc276e457 .avatar_d485f03eb6,\n.chips_6fc276e457 .customRenderer_aa18896902 {\n  min-width: 18px;\n}\n.chips_6fc276e457 .icon_3a67681e59.left_68b7ea130f,\n.chips_6fc276e457 .avatar_d485f03eb6.left_68b7ea130f,\n.chips_6fc276e457 .customRenderer_aa18896902.left_68b7ea130f {\n  margin-right: var(--spacing-xs);\n}\n.chips_6fc276e457 .icon_3a67681e59.right_8a009e0258,\n.chips_6fc276e457 .avatar_d485f03eb6.right_8a009e0258,\n.chips_6fc276e457 .customRenderer_aa18896902.right_8a009e0258 {\n  margin-left: var(--spacing-xs);\n}\n.chips_6fc276e457 .icon_3a67681e59.close_0c09762274,\n.chips_6fc276e457 .avatar_d485f03eb6.close_0c09762274,\n.chips_6fc276e457 .customRenderer_aa18896902.close_0c09762274 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_6fc276e457.disabled_b8dfddb67e .icon_3a67681e59 {\n  color: var(--disabled-text-color);\n}\n.chips_6fc276e457.disabled_b8dfddb67e .label_172a58563d {\n  color: var(--disabled-text-color);\n}\n.chips_6fc276e457.defaultCursor_b8dfddb67e {\n  cursor: default;\n}\n.chips_6fc276e457.clickable_e61ebbf60e {\n  cursor: pointer;\n}\n.chips_6fc276e457.clickable_e61ebbf60e:focus-visible, .chips_6fc276e457.clickable_e61ebbf60e.focus-visible_be1f2838e0 {\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_6fc276e457.clickable_e61ebbf60e:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.chips_6fc276e457.clickable_e61ebbf60e.disabled_b8dfddb67e {\n  cursor: default;\n}\n.chips_6fc276e457.clickable_e61ebbf60e.disableTextSelection_44699f7595 {\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_82bcdf155f {\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 CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as i}from"react";import{noop as s}from"lodash-es";import d from"../../hooks/useClickableProps/useClickableProps.js";import r from"./Clickable.module.scss.js";var l=i((function(i,l){var t=i.elementType,n=void 0===t?"div":t,c=i.className,p=void 0===c?"":c,m=i.children,u=i.role,b=i.onClick,v=i.enableTextSelection,f=void 0!==v&&v,k=i.onMouseDown,x=i.onMouseEnter,M=i.onMouseLeave,P=i.tabIndex,j=i.disabled,C=void 0!==j&&j,E=i.style,H=d({onClick:void 0===b?s:b,onMouseDown:void 0===k?s:k,onMouseEnter:void 0===x?s:x,onMouseLeave:void 0===M?s:M,disabled:C,id:i.id,"data-testid":i["data-testid"],role:void 0===u?"button":u,tabIndex:void 0===P?"0":P,ariaLabel:i.ariaLabel,ariaHidden:i.ariaHidden,ariaHasPopup:i.ariaHasPopup,ariaExpanded:i.ariaExpanded},l),y=a(r.clickable,p,e(e({},r.disabled,C),r.disableTextSelection,!f));return o.createElement(n,Object.assign(Object.assign({},H),{className:y,style:E}),m)}));export{l as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as i}from"react";import{noop as s}from"es-toolkit/compat";import r from"../../hooks/useClickableProps/useClickableProps.js";import t from"./Clickable.module.scss.js";var d=i((function(i,d){var l=i.elementType,n=void 0===l?"div":l,c=i.className,p=void 0===c?"":c,m=i.children,u=i.role,b=i.onClick,v=i.enableTextSelection,f=void 0!==v&&v,k=i.onMouseDown,x=i.onMouseEnter,M=i.onMouseLeave,P=i.tabIndex,j=i.disabled,C=void 0!==j&&j,E=i.style,H=r({onClick:void 0===b?s:b,onMouseDown:void 0===k?s:k,onMouseEnter:void 0===x?s:x,onMouseLeave:void 0===M?s:M,disabled:C,id:i.id,"data-testid":i["data-testid"],role:void 0===u?"button":u,tabIndex:void 0===P?"0":P,ariaLabel:i.ariaLabel,ariaHidden:i.ariaHidden,ariaHasPopup:i.ariaHasPopup,ariaExpanded:i.ariaExpanded},d),y=a(t.clickable,p,e(e({},t.disabled,C),t.disableTextSelection,!f));return o.createElement(n,Object.assign(Object.assign({},H),{className:y,style:E}),m)}));export{d as default};
 //# sourceMappingURL=Clickable.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, { type AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"~~lodash~~-es\";\nimport { type VibeComponentProps } from \"../../types\";\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 = 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":"~~6RAwEMA~~,IAAAA,EAAYC,GAChB,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, { type AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit/compat\";\nimport { type VibeComponentProps } from \"../../types\";\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 = 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":"qSAwEMA,IAAAA,EAAYC,GAChB,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_4c19f0c00b","focus-visible":"focus-visible_d78c6951bc",disabled:"disabled_3726bd7d8c",disableTextSelection:"disableTextSelection_920ee82676"};!function(e){const c="s_id-8d33a9ee9e1f_3_61_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+c))return;const i=document.createElement("style");i.id=c,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[c]=e)}("/* stylelint-disable selector-class-pattern */\n.clickable_4c19f0c00b {\n  cursor: pointer;\n}\n.clickable_4c19f0c00b:focus-visible, .clickable_4c19f0c00b.focus-visible_d78c6951bc {\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_4c19f0c00b:focus:not(.focus-visible_d78c6951bc) {\n  outline: none;\n}\n.clickable_4c19f0c00b.disabled_3726bd7d8c {\n  cursor: default;\n}\n.disableTextSelection_920ee82676 {\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_e61ebbf60e","focus-visible":"focus-visible_be1f2838e0",disabled:"disabled_b8dfddb67e",disableTextSelection:"disableTextSelection_44699f7595"};!function(e){const n="s_id-8d33a9ee9e1f_3_62_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)}("/* stylelint-disable selector-class-pattern */\n.clickable_e61ebbf60e {\n  cursor: pointer;\n}\n.clickable_e61ebbf60e:focus-visible, .clickable_e61ebbf60e.focus-visible_be1f2838e0 {\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_e61ebbf60e:focus:not(.focus-visible_be1f2838e0) {\n  outline: none;\n}\n.clickable_e61ebbf60e.disabled_b8dfddb67e {\n  cursor: default;\n}\n.disableTextSelection_44699f7595 {\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/ColorPicker/ColorPicker.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_e3d0b7c33e",colorPickerDialogContent:"colorPickerDialogContent_fd39cf854e"};!function(e){const t="s_id-ffacbf9b6446_3_61_1";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_e3d0b7c33e.colorPickerDialogContent_fd39cf854e {\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_ed3678b74d",colorPickerDialogContent:"colorPickerDialogContent_21edac6ca5"};!function(e){const t="s_id-ffacbf9b6446_3_62_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_ed3678b74d.colorPickerDialogContent_21edac6ca5 {\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.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_e4fcc20560",clearColorButton:"clearColorButton_9ccf22ce23"};!function(e){const n="s_id-774e60a23ee3_3_61_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,t.firstChild?t.insertBefore(c,t.firstChild):t.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_e4fcc20560 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_9ccf22ce23 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_efd2ad8f7e",clearColorButton:"clearColorButton_2b3ffb6ec6"};!function(e){const n="s_id-774e60a23ee3_3_62_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_efd2ad8f7e {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_2b3ffb6ec6 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=ColorPickerClearButton.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid_25abc8efa8"};!function(e){const n="s_id-0a5f0eb78ee4_3_61_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid_25abc8efa8 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_9d86cc637c"};!function(e){const d="s_id-0a5f0eb78ee4_3_62_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+d))return;const t=document.createElement("style");t.id=d,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".colorsGrid_9d86cc637c {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
 //# sourceMappingURL=ColorPickerColorsGrid.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as r,intersection as e}from"lodash-es";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{ColorStyle as c,contentColors as d}from"../../../../utils/colors-vars-map.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as f}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as p,GridKeyboardNavigationContext as C}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import v from"./ColorPickerClearButton.js";import I from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var y=h(i((function(i,c){var m=i.className,h=i.onValueChange,y=i.value,k=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?j:E,P=i.isBlackListMode,w=void 0===P||P,z=i.colorsList,L=i.isMultiselect,O=i.colorSize,R=void 0===O?a.MEDIUM:O,T=i.numberOfColorsInLine,G=void 0===T?u:T,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=S(c,F),Q=l(null),X=l(null),Y=n((function(){h(null)}),[h]),Z=s((function(){return A?z:w?r(d,z):e(d,z)}),[A,w,z]),$=n((function(r){if(L){var e=o(y);if(e.includes(r)){var t=e.indexOf(r);t>-1&&e.splice(t,1)}else e.push(r);h(e)}else h([r])}),[L,h,y]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),ro=p(oo,F),eo=f(R,G);return t.createElement("div",{className:m,style:{width:eo},ref:J,tabIndex:-1},t.createElement(C.Provider,{value:ro},t.createElement(I,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:y,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:R,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),k&&t.createElement(v,{Icon:M,onClick:Y,text:k,ref:X})))})),{sizes:a,colorStyles:c,colorSizes:a,colorShapes:m});export{y as default};
+import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as r,intersection as e}from"es-toolkit/compat";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{ColorStyle as c,contentColors as d}from"../../../../utils/colors-vars-map.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as f}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as p,GridKeyboardNavigationContext as C}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import v from"./ColorPickerClearButton.js";import I from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var k=h(i((function(i,c){var m=i.className,h=i.onValueChange,k=i.value,y=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?j:E,P=i.isBlackListMode,w=void 0===P||P,z=i.colorsList,L=i.isMultiselect,O=i.colorSize,R=void 0===O?a.MEDIUM:O,T=i.numberOfColorsInLine,G=void 0===T?u:T,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=S(c,F),Q=l(null),X=l(null),Y=n((function(){h(null)}),[h]),Z=s((function(){return A?z:w?r(d,z):e(d,z)}),[A,w,z]),$=n((function(r){if(L){var e=o(k);if(e.includes(r)){var t=e.indexOf(r);t>-1&&e.splice(t,1)}else e.push(r);h(e)}else h([r])}),[L,h,k]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),ro=p(oo,F),eo=f(R,G);return t.createElement("div",{className:m,style:{width:eo},ref:J,tabIndex:-1},t.createElement(C.Provider,{value:ro},t.createElement(I,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value:k,colorStyle:g,ColorIndicatorIcon:N,shouldRenderIndicatorWithoutBackground:B,SelectedIndicatorIcon:x,colorSize:R,tooltipContentByColor:U,colorShape:q,showColorNameTooltip:D,id:H,"data-testid":V}),y&&t.createElement(v,{Icon:M,onClick:Y,text:y,ref:X})))})),{sizes:a,colorStyles:c,colorSizes:a,colorShapes:m});export{k as default};
 //# sourceMappingURL=ColorPickerContent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"lodash-es\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport {\n ColorStyle as ColorStyleEnum,\n type CONTENT_COLORS_VALUES,\n contentColors\n} from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps, type SubIcon, withStaticProps } from \"../../../../types\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\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 The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\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 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 If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\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 showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\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 = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\ninterface ColorPickerContentStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerContentProps, ColorPickerContentStaticProps>(ColorPickerContent, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text","sizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"88BAwGA,IAwGeA,EAAAA,EAxGYC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,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,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAElC,MACCH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVb,MAFC9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG,IAUyG,CACzGmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}
1	+ {"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit/compat\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport {\n ColorStyle as ColorStyleEnum,\n type CONTENT_COLORS_VALUES,\n contentColors\n} from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n type ColorShapes,\n type ColorPickerSizes,\n type ColorPickerValue,\n type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n GridKeyboardNavigationContext,\n useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps, type SubIcon, withStaticProps } from \"../../../../types\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\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 The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\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 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 If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\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 showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\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 = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\ninterface ColorPickerContentStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerContentProps, ColorPickerContentStaticProps>(ColorPickerContent, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text","sizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s9BAwGA,IAwGeA,EAAAA,EAxGYC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,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,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAElC,MACCH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVb,MAFC9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG,IAUyG,CACzGmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}