@vibe/core 3.35.0 → 3.36.0

package/dist/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport Tooltip from \"../../../components/Tooltip/Tooltip\";\nimport { BreadcrumbContent } from \"./BreadcrumbContent/BreadcrumbContent\";\nimport { SubIcon, VibeComponentProps } from \"../../../types\";\nimport styles from \"./BreadcrumbItem.module.scss\";\n\nexport interface BreadcrumbItemProps extends VibeComponentProps {\n  /** The display text. */\n  text?: string;\n  /** Should item be disabled. */\n  disabled?: boolean;\n  /** Should item be clickable - this should be recieved from the breadcrumbsBar ( Navigation/Indication bar ). */\n  isClickable?: boolean;\n  /** If the item is clickable and the type of navigation is a link, this is the link */\n  link?: string;\n  /** If the item is clickable and the type of navigation is a function, this is the function */\n  onClick?: () => void;\n  /** Should be the current Item - mainly effects the item`s style. */\n  isCurrent?: boolean;\n  /** An Icon - If no icon needed then should be left empty. */\n  icon?: SubIcon;\n  showText?: boolean;\n}\n\nconst BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({\n  className,\n  text = \"\",\n  disabled,\n  isClickable = false,\n  link,\n  onClick,\n  isCurrent = false,\n  icon,\n  id,\n  showText = true,\n  \"data-testid\": dataTestId\n}) => {\n  const componentRef = useRef<HTMLSpanElement>(null);\n  const isOverflowing = useIsOverflowing({ ref: componentRef });\n\n  return (\n    <Tooltip\n      disableDialogSlide={true}\n      withoutDialog={false}\n      content={(isOverflowing || !showText) && text}\n      showTrigger={[\"mouseenter\"]}\n      hideTrigger={[\"mouseleave\"]}\n      addKeyboardHideShowTriggersByDefault={!showText}\n    >\n      <li\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_ITEM, id)}\n        className={cx(styles.breadcrumbItemWrapper, className, {\n          [styles.disabled]: disabled\n        })}\n      >\n        <BreadcrumbContent\n          ref={componentRef}\n          isClickable={isClickable}\n          link={link}\n          onClick={onClick}\n          text={text}\n          icon={icon}\n          isCurrent={isCurrent}\n          disabled={disabled}\n          showText={showText}\n        />\n      </li>\n    </Tooltip>\n  );\n};\n\nexport default BreadcrumbItem;\n"],"names":["BreadcrumbItem","_ref","className","_ref$text","text","disabled","_ref$isClickable","isClickable","link","onClick","_ref$isCurrent","isCurrent","icon","id","_ref$showText","showText","dataTestId","componentRef","useRef","isOverflowing","useIsOverflowing","ref","React","createElement","Tooltip","disableDialogSlide","withoutDialog","content","showTrigger","hideTrigger","addKeyboardHideShowTriggersByDefault","getTestId","ComponentDefaultTestId","BREADCRUMB_ITEM","cx","styles","breadcrumbItemWrapper","_defineProperty","BreadcrumbContent"],"mappings":"wcA2BA,IAAMA,EAAgD,SAAlCC,GAYf,IAXHC,EAASD,EAATC,UAASC,EAAAF,EACTG,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAAQJ,EAARI,SAAQC,EAAAL,EACRM,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAIP,EAAJO,KACAC,EAAOR,EAAPQ,QAAOC,EAAAT,EACPU,UAAAA,OAAY,IAAHD,GAAQA,EACjBE,EAAIX,EAAJW,KACAC,EAAEZ,EAAFY,GAAEC,EAAAb,EACFc,SAAAA,OAAW,IAAHD,GAAOA,EACAE,EAAUf,EAAzB,eAEMgB,EAAeC,EAAwB,MACvCC,EAAgBC,EAAiB,CAAEC,IAAKJ,IAE9C,OACEK,EAACC,cAAAC,EACC,CAAAC,oBAAoB,EACpBC,eAAe,EACfC,SAAUR,IAAkBJ,IAAaX,EACzCwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,sCAAuCf,GAEvCO,EACEC,cAAA,KAAA,CAAAV,GAAIA,EACS,cAAAG,GAAce,EAAUC,EAAuBC,gBAAiBpB,GAC7EX,UAAWgC,EAAGC,EAAOC,sBAAuBlC,EAASmC,KAClDF,EAAO9B,SAAWA,KAGrBiB,EAAAC,cAACe,EACC,CAAAjB,IAAKJ,EACLV,YAAaA,EACbC,KAAMA,EACNC,QAASA,EACTL,KAAMA,EACNQ,KAAMA,EACND,UAAWA,EACXN,SAAUA,EACVU,SAAUA,KAKpB"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport useIsOverflowing from \"../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport Tooltip from \"../../../components/Tooltip/Tooltip\";\nimport { BreadcrumbContent } from \"./BreadcrumbContent/BreadcrumbContent\";\nimport { SubIcon, VibeComponentProps } from \"../../../types\";\nimport styles from \"./BreadcrumbItem.module.scss\";\n\nexport interface BreadcrumbItemProps extends VibeComponentProps {\n  /**\n   * The display text of the breadcrumb item.\n   */\n  text?: string;\n  /**\n   * If true, the item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the item is clickable.\n   */\n  isClickable?: boolean;\n  /**\n   * The URL the item links to if navigation is handled via a link.\n   */\n  link?: string;\n  /**\n   * Callback fired when the item is clicked.\n   */\n  onClick?: () => void;\n  /**\n   * If true, applies styling for the current page.\n   */\n  isCurrent?: boolean;\n  /**\n   * The icon displayed next to the text.\n   */\n  icon?: SubIcon;\n  /**\n   * If true, the breadcrumb text is shown.\n   */\n  showText?: boolean;\n}\n\nconst BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({\n  className,\n  text = \"\",\n  disabled,\n  isClickable = false,\n  link,\n  onClick,\n  isCurrent = false,\n  icon,\n  id,\n  showText = true,\n  \"data-testid\": dataTestId\n}) => {\n  const componentRef = useRef<HTMLSpanElement>(null);\n  const isOverflowing = useIsOverflowing({ ref: componentRef });\n\n  return (\n    <Tooltip\n      disableDialogSlide={true}\n      withoutDialog={false}\n      content={(isOverflowing || !showText) && text}\n      showTrigger={[\"mouseenter\"]}\n      hideTrigger={[\"mouseleave\"]}\n      addKeyboardHideShowTriggersByDefault={!showText}\n    >\n      <li\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_ITEM, id)}\n        className={cx(styles.breadcrumbItemWrapper, className, {\n          [styles.disabled]: disabled\n        })}\n      >\n        <BreadcrumbContent\n          ref={componentRef}\n          isClickable={isClickable}\n          link={link}\n          onClick={onClick}\n          text={text}\n          icon={icon}\n          isCurrent={isCurrent}\n          disabled={disabled}\n          showText={showText}\n        />\n      </li>\n    </Tooltip>\n  );\n};\n\nexport default BreadcrumbItem;\n"],"names":["BreadcrumbItem","_ref","className","_ref$text","text","disabled","_ref$isClickable","isClickable","link","onClick","_ref$isCurrent","isCurrent","icon","id","_ref$showText","showText","dataTestId","componentRef","useRef","isOverflowing","useIsOverflowing","ref","React","createElement","Tooltip","disableDialogSlide","withoutDialog","content","showTrigger","hideTrigger","addKeyboardHideShowTriggersByDefault","getTestId","ComponentDefaultTestId","BREADCRUMB_ITEM","cx","styles","breadcrumbItemWrapper","_defineProperty","BreadcrumbContent"],"mappings":"wcA4CA,IAAMA,EAAgD,SAAlCC,GAYf,IAXHC,EAASD,EAATC,UAASC,EAAAF,EACTG,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EACTE,EAAQJ,EAARI,SAAQC,EAAAL,EACRM,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAIP,EAAJO,KACAC,EAAOR,EAAPQ,QAAOC,EAAAT,EACPU,UAAAA,OAAY,IAAHD,GAAQA,EACjBE,EAAIX,EAAJW,KACAC,EAAEZ,EAAFY,GAAEC,EAAAb,EACFc,SAAAA,OAAW,IAAHD,GAAOA,EACAE,EAAUf,EAAzB,eAEMgB,EAAeC,EAAwB,MACvCC,EAAgBC,EAAiB,CAAEC,IAAKJ,IAE9C,OACEK,EAACC,cAAAC,EACC,CAAAC,oBAAoB,EACpBC,eAAe,EACfC,SAAUR,IAAkBJ,IAAaX,EACzCwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,sCAAuCf,GAEvCO,EACEC,cAAA,KAAA,CAAAV,GAAIA,EACS,cAAAG,GAAce,EAAUC,EAAuBC,gBAAiBpB,GAC7EX,UAAWgC,EAAGC,EAAOC,sBAAuBlC,EAASmC,KAClDF,EAAO9B,SAAWA,KAGrBiB,EAAAC,cAACe,EACC,CAAAjB,IAAKJ,EACLV,YAAaA,EACbC,KAAMA,EACNC,QAASA,EACTL,KAAMA,EACNQ,KAAMA,EACND,UAAWA,EACXN,SAAUA,EACVU,SAAUA,KAKpB"}

package/dist/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.module.scss.js

@@ -1,2 +1,2 @@
-var e={breadcrumbItemWrapper:"breadcrumbItemWrapper_d1609dd11d",disabled:"disabled_06984d11a9"};!function(e){const d="s_id-03f482333e23_3_34_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".breadcrumbItemWrapper_d1609dd11d {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n\n.breadcrumbItemWrapper_d1609dd11d.disabled_06984d11a9 {\n  cursor: not-allowed;\n}");export{e as default};
+var e={breadcrumbItemWrapper:"breadcrumbItemWrapper_098451b284",disabled:"disabled_84a88df534"};!function(e){const d="s_id-03f482333e23_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".breadcrumbItemWrapper_098451b284 {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n\n.breadcrumbItemWrapper_098451b284.disabled_84a88df534 {\n  cursor: not-allowed;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbItem.module.scss.js.map

package/dist/src/components/BreadcrumbsBar/BreadcrumbsBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsBar.js","sources":["../../../../src/components/BreadcrumbsBar/BreadcrumbsBar.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, ReactElement } from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { NavigationChevronRight } from \"@vibe/icons\";\nimport { BreadcrumbsBarType as BreadcrumbsBarTypeEnum } from \"./BreadcrumbsConstants\";\nimport { BreadcrumbsBarType } from \"./Breadcrumbs.types\";\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nimport { withStaticProps, VibeComponentProps } from \"../../types\";\nimport styles from \"./BreadcrumbsBar.module.scss\";\n\nexport interface BreadcrumbBarProps extends VibeComponentProps {\n  /** The type of the bar is responsible for whether it will be navigational or for indication only  */\n  type: BreadcrumbsBarType;\n  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];\n}\n\nconst BreadcrumbsBar: FC<BreadcrumbBarProps> & { types?: typeof BreadcrumbsBarTypeEnum } = ({\n  className,\n  children,\n  type = \"indication\",\n  id,\n  \"data-testid\": dataTestId\n}: BreadcrumbBarProps) => (\n  <nav\n    aria-label=\"Breadcrumb\"\n    className={cx(styles.breadcrumbsBar, className)}\n    id={id}\n    data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMBS_BAR, id)}\n  >\n    <ol>\n      {children &&\n        React.Children.map(children, (child, index) =>\n          React.isValidElement(child)\n            ? [\n                index > 0 && <NavigationChevronRight className={styles.separatorIcon} size=\"14\" aria-hidden=\"true\" />,\n                React.cloneElement(child, {\n                  ...child?.props,\n                  isClickable: type !== \"indication\"\n                })\n              ]\n            : null\n        )}\n    </ol>\n  </nav>\n);\n\nexport default withStaticProps(BreadcrumbsBar, {\n  types: BreadcrumbsBarTypeEnum\n});\n"],"names":["withStaticProps","_ref","children","_ref$type","type","id","dataTestId","React","createElement","className","cx","styles","breadcrumbsBar","getTestId","ComponentDefaultTestId","BREADCRUMBS_BAR","Children","map","child","index","isValidElement","NavigationChevronRight","separatorIcon","size","cloneElement","Object","assign","props","isClickable","types","BreadcrumbsBarTypeEnum"],"mappings":"uZAgBA,IA8BeA,EAAAA,GA9B4E,SAAvEC,GAAA,IAElBC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,KAAAA,OAAO,IAAHD,EAAG,aAAYA,EACnBE,EAAEJ,EAAFI,GACeC,EAAUL,EAAzB,eAAa,OAEbM,EACaC,cAAA,MAAA,CAAA,aAAA,aACXC,UAAWC,EAAGC,EAAOC,eARdX,EAATQ,WASEJ,GAAIA,EAAE,cACOC,GAAcO,EAAUC,EAAuBC,gBAAiBV,IAE7EE,EAAAC,cAAA,KAAA,KACGN,GACCK,EAAMS,SAASC,IAAIf,GAAU,SAACgB,EAAOC,GAAK,OACxCZ,EAAMa,eAAeF,GACjB,CACEC,EAAQ,GAAKZ,EAACC,cAAAa,GAAuBZ,UAAWE,EAAOW,cAAeC,KAAK,KAAI,cAAa,SAC5FhB,EAAMiB,aAAaN,EACdO,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAR,aAAK,EAALA,EAAOS,OACV,CAAAC,YAAsB,eAATxB,MAGjB,IAAI,KAGV,GAGuC,CAC7CyB,MAAOC"}
+{"version":3,"file":"BreadcrumbsBar.js","sources":["../../../../src/components/BreadcrumbsBar/BreadcrumbsBar.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { FC, ReactElement } from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { NavigationChevronRight } from \"@vibe/icons\";\nimport { BreadcrumbsBarType as BreadcrumbsBarTypeEnum } from \"./BreadcrumbsConstants\";\nimport { BreadcrumbsBarType } from \"./Breadcrumbs.types\";\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nimport { withStaticProps, VibeComponentProps } from \"../../types\";\nimport styles from \"./BreadcrumbsBar.module.scss\";\n\nexport interface BreadcrumbBarProps extends VibeComponentProps {\n  /**\n   * The type of the breadcrumb bar, determining if it is navigational or for indication only.\n   */\n  type: BreadcrumbsBarType;\n  /**\n   * The breadcrumb items displayed in the bar.\n   */\n  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];\n}\n\nconst BreadcrumbsBar: FC<BreadcrumbBarProps> & { types?: typeof BreadcrumbsBarTypeEnum } = ({\n  className,\n  children,\n  type = \"indication\",\n  id,\n  \"data-testid\": dataTestId\n}: BreadcrumbBarProps) => (\n  <nav\n    aria-label=\"Breadcrumb\"\n    className={cx(styles.breadcrumbsBar, className)}\n    id={id}\n    data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMBS_BAR, id)}\n  >\n    <ol>\n      {children &&\n        React.Children.map(children, (child, index) =>\n          React.isValidElement(child)\n            ? [\n                index > 0 && <NavigationChevronRight className={styles.separatorIcon} size=\"14\" aria-hidden=\"true\" />,\n                React.cloneElement(child, {\n                  ...child?.props,\n                  isClickable: type !== \"indication\"\n                })\n              ]\n            : null\n        )}\n    </ol>\n  </nav>\n);\n\nexport default withStaticProps(BreadcrumbsBar, {\n  types: BreadcrumbsBarTypeEnum\n});\n"],"names":["withStaticProps","_ref","children","_ref$type","type","id","dataTestId","React","createElement","className","cx","styles","breadcrumbsBar","getTestId","ComponentDefaultTestId","BREADCRUMBS_BAR","Children","map","child","index","isValidElement","NavigationChevronRight","separatorIcon","size","cloneElement","Object","assign","props","isClickable","types","BreadcrumbsBarTypeEnum"],"mappings":"uZAqBA,IA8BeA,EAAAA,GA9B4E,SAAvEC,GAAA,IAElBC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,KAAAA,OAAO,IAAHD,EAAG,aAAYA,EACnBE,EAAEJ,EAAFI,GACeC,EAAUL,EAAzB,eAAa,OAEbM,EACaC,cAAA,MAAA,CAAA,aAAA,aACXC,UAAWC,EAAGC,EAAOC,eARdX,EAATQ,WASEJ,GAAIA,EAAE,cACOC,GAAcO,EAAUC,EAAuBC,gBAAiBV,IAE7EE,EAAAC,cAAA,KAAA,KACGN,GACCK,EAAMS,SAASC,IAAIf,GAAU,SAACgB,EAAOC,GAAK,OACxCZ,EAAMa,eAAeF,GACjB,CACEC,EAAQ,GAAKZ,EAACC,cAAAa,GAAuBZ,UAAWE,EAAOW,cAAeC,KAAK,KAAI,cAAa,SAC5FhB,EAAMiB,aAAaN,EACdO,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAR,aAAK,EAALA,EAAOS,OACV,CAAAC,YAAsB,eAATxB,MAGjB,IAAI,KAGV,GAGuC,CAC7CyB,MAAOC"}

package/dist/src/components/BreadcrumbsBar/BreadcrumbsBar.module.scss.js

@@ -1,2 +1,2 @@
-var e={breadcrumbsBar:"breadcrumbsBar_ce7edce350",separatorIcon:"separatorIcon_65f57db3ab"};!function(e){const n="s_id-24567fd55d40_3_34_2";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".breadcrumbsBar_ce7edce350 ol {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.breadcrumbsBar_ce7edce350 ol .separatorIcon_65f57db3ab {\n  color: var(--secondary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
+var e={breadcrumbsBar:"breadcrumbsBar_8489133c21",separatorIcon:"separatorIcon_c1a7030909"};!function(e){const n="s_id-24567fd55d40_3_35_0";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".breadcrumbsBar_8489133c21 ol {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.breadcrumbsBar_8489133c21 ol .separatorIcon_c1a7030909 {\n  color: var(--secondary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
 //# sourceMappingURL=BreadcrumbsBar.module.scss.js.map

package/dist/src/components/Button/Button.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useRef as o,useEffect as n,useCallback as r,useMemo as i}from"react";import{camelCase as s}from"lodash-es";import l from"classnames";import{SIZES as c}from"../../constants/sizes.js";import u from"../../hooks/useMergeRef.js";import{NOOP as d}from"../../utils/function-utils.js";import m from"../Icon/Icon.js";import p from"../Loader/Loader.js";import{BUTTON_ICON_SIZE as f,SMALL_BUTTON_ICON_SIZE as g,ButtonColor as y,ButtonType as b,ButtonInputType as v}from"./ButtonConstants.js";import{TRANSPARENT_COLOR as h,getParentBackgroundColorNotTransparent as C}from"./helper/dom-helpers.js";import{getTestId as j}from"../../tests/testIds.js";import{withStaticProps as x}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getStyle as F}from"../../helpers/typesciptCssModulesHelper.js";import{ComponentDefaultTestId as N,ComponentVibeId as k}from"../../tests/constants.js";import E from"./Button.module.scss.js";import{useButtonLoading as I}from"./helper/useButtonLoading.js";var B=a((function(a,c){var d=a.className,y=a.children,b=a.kind,v=a.onClick,h=a.name,x=a.size,B=a.color,P=a.disabled,S=a.rightIcon,T=a.leftIcon,L=a.success,O=a.successText,z=a.successIcon,M=a.style,w=a.loading,D=a.loaderClassName,U=a.active,A=a.activeButtonClassName,H=a.id,R=a.marginRight,_=a.marginLeft,q=a.type,G=a.onMouseDown,J=a.ariaLabel,K=a.rightFlat,Q=a.leftFlat,V=a.preventClickAnimation,W=a.noSidePadding,X=a.onFocus,Y=a.onBlur,Z=a.ariaLabeledBy,$=a.defaultTextColorOnPrimaryColor,ee=a.ariaHasPopup,te=a.ariaExpanded,ae=a.ariaControls,oe=a["aria-describedby"],ne=a["aria-hidden"],re=a["aria-pressed"],ie=a.blurOnMouseUp,se=a["data-testid"],le=a.insetFocus,ce=a.tabIndex,ue=o(null),de=u(c,ue),me=I({isLoading:w}).loading;n((function(){if(("on-primary-color"===B||"fixed-light"===B)&&"primary"===b&&ue.current){var e=ue.current;e.style.color=C(e,$)}}),[b,ue,B,$]);var pe=r((function(){var e=ue.current;!P&&e&&ie&&e.blur()}),[P,ue,ie]),fe=r((function(e){P||me||L?e.preventDefault():v&&v(e)}),[v,P,me,L]),ge=r((function(e){P||me||L?e.preventDefault():G&&G(e)}),[G,P,me,L]),ye=i((function(){var t,a=L?"positive":B;return l(d,E.button,F(E,s("size-"+x)),F(E,s("kind-"+b)),F(E,s("color-"+a)),(e(e(e(e(e(e(e(e(e(e(t={},E.success,L),F(E,s("color-"+a+"-active")),U),A,U),E.marginRight,R),E.marginLeft,_),E.rightFlat,K),E.leftFlat,Q),E.preventClickAnimation,V),E.noSidePadding,W),E.disabled,P),e(t,E.insetFocusStyle,le)))}),[L,B,d,x,b,U,A,R,_,K,Q,V,W,P,le]),be=i((function(){return{ref:de,type:q,className:ye,name:h,onMouseUp:pe,style:M,onClick:fe,id:H,onFocus:X,onBlur:Y,tabIndex:P||ne?-1:ce,"data-testid":se||j(N.BUTTON,H),"data-vibe":k.BUTTON,onMouseDown:ge,"aria-disabled":P,"aria-busy":me,"aria-labelledby":Z,"aria-label":J,"aria-haspopup":ee,"aria-expanded":te,"aria-controls":ae,"aria-describedby":oe,"aria-hidden":ne,"aria-pressed":re}}),[de,q,ye,h,pe,M,fe,H,X,Y,ce,se,ge,P,me,Z,J,ee,te,ae,oe,ne,re]),ve=r((function(e){if("function"==typeof e)switch(x){case"xxs":case"xs":return g;default:return f}}),[x]),he=i((function(){return t.Children.toArray(y).some(Boolean)}),[y]),Ce=i((function(){return t.createElement(t.Fragment,null,T?t.createElement(m,{iconType:"font",icon:T,iconSize:ve(T),className:l(e({},E.leftIcon,he)),ignoreFocusStyle:!0}):null,y,S?t.createElement(m,{iconType:"font",icon:S,iconSize:ve(S),className:l(e({},E.rightIcon,he)),ignoreFocusStyle:!0}):null)}),[y,he,ve,T,S]);return me?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-loading")}),t.createElement("span",{className:l(E.loader,D)},t.createElement(p,{className:E.loaderSvg}),t.createElement("span",{"aria-hidden":!0,className:E.textPlaceholder},Ce))):L?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-success")}),t.createElement("span",{className:E.successContent},z?t.createElement(m,{iconType:"font",icon:z,iconSize:ve(z),className:l(e({},E.leftIcon,!!O)),ignoreFocusStyle:!0}):null,O),t.createElement("span",{"aria-hidden":"true",className:E.textPlaceholder},Ce)):t.createElement("button",Object.assign({},be,{key:"".concat(H,"-button")}),Ce)}));B.defaultProps={className:void 0,name:void 0,style:void 0,id:void 0,kind:"primary",onClick:d,size:"medium",color:"primary",disabled:!1,rightIcon:null,leftIcon:null,success:!1,successText:"",successIcon:null,loading:!1,loaderClassName:void 0,active:!1,marginRight:!1,marginLeft:!1,type:"button",onMouseDown:d,rightFlat:!1,leftFlat:!1,preventClickAnimation:!1,noSidePadding:!1,onFocus:d,onBlur:d,defaultTextColorOnPrimaryColor:h,ariaHasPopup:void 0,blurOnMouseUp:!0,ariaExpanded:void 0,ariaControls:void 0,ariaLabel:void 0,ariaLabeledBy:void 0,insetFocus:!1};var P=x(B,{sizes:c,colors:y,kinds:b,types:v,inputTags:v});export{P as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useRef as o,useEffect as n,useCallback as r,useMemo as i}from"react";import{camelCase as s}from"lodash-es";import l from"classnames";import{SIZES as c}from"../../constants/sizes.js";import u from"../../hooks/useMergeRef.js";import{NOOP as d}from"../../utils/function-utils.js";import m from"../Icon/Icon.js";import p from"../Loader/Loader.js";import{BUTTON_ICON_SIZE as f,SMALL_BUTTON_ICON_SIZE as g,ButtonColor as y,ButtonType as b,ButtonInputType as v}from"./ButtonConstants.js";import{TRANSPARENT_COLOR as h,getParentBackgroundColorNotTransparent as C}from"./helper/dom-helpers.js";import{getTestId as j}from"../../tests/testIds.js";import{withStaticProps as x}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getStyle as F}from"../../helpers/typesciptCssModulesHelper.js";import{ComponentDefaultTestId as N,ComponentVibeId as k}from"../../tests/constants.js";import E from"./Button.module.scss.js";import{useButtonLoading as I}from"./helper/useButtonLoading.js";var B=a((function(a,c){var d=a.className,y=a.children,b=a.kind,v=a.onClick,h=a.name,x=a.size,B=a.color,P=a.disabled,S=a.rightIcon,T=a.leftIcon,L=a.success,O=a.successText,z=a.successIcon,M=a.style,w=a.loading,D=a.loaderClassName,U=a.active,A=a.activeButtonClassName,H=a.id,R=a.marginRight,_=a.marginLeft,q=a.type,G=a.onMouseDown,J=a.ariaLabel,K=a.rightFlat,Q=a.leftFlat,V=a.preventClickAnimation,W=a.noSidePadding,X=a.onFocus,Y=a.onBlur,Z=a.ariaLabeledBy,$=a.defaultTextColorOnPrimaryColor,ee=a.ariaHasPopup,te=a.ariaExpanded,ae=a.ariaControls,oe=a["aria-describedby"],ne=a["aria-hidden"],re=a["aria-pressed"],ie=a.blurOnMouseUp,se=a["data-testid"],le=a.insetFocus,ce=a.tabIndex,ue=o(null),de=u(c,ue),me=I({isLoading:w}).loading;n((function(){if(("on-primary-color"===B||"fixed-light"===B)&&"primary"===b&&ue.current){var e=ue.current;e.style.color=C(e,$)}}),[b,ue,B,$]);var pe=r((function(){var e=ue.current;!P&&e&&ie&&e.blur()}),[P,ue,ie]),fe=r((function(e){P||me||L?e.preventDefault():v&&v(e)}),[v,P,me,L]),ge=r((function(e){P||me||L?e.preventDefault():G&&G(e)}),[G,P,me,L]),ye=i((function(){var t,a=L?"positive":B;return l(d,E.button,F(E,s("size-"+x)),F(E,s("kind-"+b)),F(E,s("color-"+a)),(e(e(e(e(e(e(e(e(e(e(t={},E.success,L),F(E,s("color-"+a+"-active")),U),A,U),E.marginRight,R),E.marginLeft,_),E.rightFlat,K),E.leftFlat,Q),E.preventClickAnimation,V),E.noSidePadding,W),E.disabled,P),e(t,E.insetFocusStyle,le)))}),[L,B,d,x,b,U,A,R,_,K,Q,V,W,P,le]),be=i((function(){return{ref:de,type:q,className:ye,name:h,onMouseUp:pe,style:M,onClick:fe,id:H,onFocus:X,onBlur:Y,tabIndex:P||ne?-1:ce,"data-testid":se||j(N.BUTTON,H),"data-vibe":k.BUTTON,onMouseDown:ge,"aria-disabled":P,"aria-busy":me,"aria-labelledby":Z,"aria-label":J,"aria-haspopup":ee,"aria-expanded":te,"aria-controls":ae,"aria-describedby":oe,"aria-hidden":ne,"aria-pressed":re}}),[de,q,ye,h,pe,M,fe,H,X,Y,ce,se,ge,P,me,Z,J,ee,te,ae,oe,ne,re]),ve=r((function(e){if("function"==typeof e)switch(x){case"xxs":case"xs":return g;default:return f}}),[x]),he=i((function(){return t.Children.toArray(y).some(Boolean)}),[y]),Ce=i((function(){return t.createElement(t.Fragment,null,T?t.createElement(m,{iconType:"font",icon:T,iconSize:ve(T),className:l(e({},E.leftIcon,he)),ignoreFocusStyle:!0}):null,y,S?t.createElement(m,{iconType:"font",icon:S,iconSize:ve(S),className:l(e({},E.rightIcon,he)),ignoreFocusStyle:!0}):null)}),[y,he,ve,T,S]);return me?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-loading")}),t.createElement("span",{className:l(E.loader,D)},t.createElement(p,{className:E.loaderSvg}),t.createElement("span",{"aria-hidden":!0,className:E.textPlaceholder},Ce))):L?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-success")}),t.createElement("span",{className:E.successContent},z?t.createElement(m,{iconType:"font",icon:z,iconSize:ve(z),className:l(e({},E.leftIcon,!!O)),ignoreFocusStyle:!0}):null,O),t.createElement("span",{"aria-hidden":"true",className:E.textPlaceholder},Ce)):t.createElement("button",Object.assign({},be,{key:"".concat(H,"-button")}),Ce)}));B.defaultProps={name:void 0,style:void 0,kind:"primary",onClick:d,size:"medium",color:"primary",disabled:!1,rightIcon:null,leftIcon:null,success:!1,successText:"",successIcon:null,loading:!1,loaderClassName:void 0,active:!1,marginRight:!1,marginLeft:!1,type:"button",onMouseDown:d,rightFlat:!1,leftFlat:!1,preventClickAnimation:!1,noSidePadding:!1,onFocus:d,onBlur:d,defaultTextColorOnPrimaryColor:h,ariaHasPopup:void 0,blurOnMouseUp:!0,ariaExpanded:void 0,ariaControls:void 0,ariaLabel:void 0,ariaLabeledBy:void 0,insetFocus:!1};var P=x(B,{sizes:c,colors:y,kinds:b,types:v,inputTags:v});export{P as default};
 //# sourceMappingURL=Button.js.map

package/dist/src/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport Icon from \"../../components/Icon/Icon\";\nimport Loader from \"../../components/Loader/Loader\";\nimport {\n  BUTTON_ICON_SIZE,\n  ButtonColor as ButtonColorEnum,\n  ButtonInputType as ButtonInputTypeEnum,\n  ButtonType as ButtonTypeEnum,\n  SMALL_BUTTON_ICON_SIZE\n} from \"./ButtonConstants\";\nimport { ButtonColor, ButtonInputType, ButtonType, ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  ariaLabeledBy?: string;\n  /** aria label to provide important when providing only Icon */\n  ariaLabel?: string;\n  /** aria for a button popup */\n  ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  ariaExpanded?: boolean;\n  /** aria controls - receives id for the controlled region */\n  ariaControls?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button: VibeComponent<ButtonProps, unknown> & {\n  sizes?: typeof SIZES;\n  colors?: typeof ButtonColorEnum;\n  kinds?: typeof ButtonTypeEnum;\n  types?: typeof ButtonInputTypeEnum;\n  inputTags?: typeof ButtonInputTypeEnum;\n} = forwardRef<unknown, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind,\n      onClick,\n      name,\n      size,\n      color,\n      disabled,\n      rightIcon,\n      leftIcon,\n      success,\n      successText,\n      successIcon,\n      style,\n      loading: isLoading,\n      loaderClassName,\n      active,\n      activeButtonClassName,\n      id,\n      marginRight,\n      marginLeft,\n      type,\n      onMouseDown,\n      ariaLabel,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      onFocus,\n      onBlur,\n      ariaLabeledBy,\n      defaultTextColorOnPrimaryColor,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp,\n      \"data-testid\": dataTestId,\n      insetFocus,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: disabled || ariaHidden ? -1 : tabIndex,\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabeledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabeledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return SMALL_BUTTON_ICON_SIZE;\n          default:\n            return BUTTON_ICON_SIZE;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              iconType=\"font\"\n              icon={leftIcon}\n              iconSize={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              iconType=\"font\"\n              icon={rightIcon}\n              iconSize={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                iconType=\"font\"\n                icon={successIcon}\n                iconSize={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nButton.defaultProps = {\n  className: undefined,\n  name: undefined,\n  style: undefined,\n  id: undefined,\n  kind: \"primary\",\n  onClick: NOOP,\n  size: \"medium\",\n  color: \"primary\",\n  disabled: false,\n  rightIcon: null,\n  leftIcon: null,\n  success: false,\n  successText: \"\",\n  successIcon: null,\n  loading: false,\n  loaderClassName: undefined,\n  active: false,\n  marginRight: false,\n  marginLeft: false,\n  type: \"button\",\n  onMouseDown: NOOP,\n  rightFlat: false,\n  leftFlat: false,\n  preventClickAnimation: false,\n  noSidePadding: false,\n  onFocus: NOOP,\n  onBlur: NOOP,\n  defaultTextColorOnPrimaryColor: TRANSPARENT_COLOR,\n  ariaHasPopup: undefined,\n  blurOnMouseUp: true,\n  ariaExpanded: undefined,\n  ariaControls: undefined,\n  ariaLabel: undefined,\n  ariaLabeledBy: undefined,\n  insetFocus: false\n};\n\nexport default withStaticProps(Button, {\n  sizes: SIZES,\n  colors: ButtonColorEnum,\n  kinds: ButtonTypeEnum,\n  types: ButtonInputTypeEnum,\n  inputTags: ButtonInputTypeEnum\n});\n"],"names":["Button","forwardRef","_ref","ref","className","children","kind","onClick","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","isLoading","loading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","_cx","calculatedColor","cx","styles","getStyle","camelCase","_defineProperty","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","SMALL_BUTTON_ICON_SIZE","BUTTON_ICON_SIZE","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","concat","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","defaultProps","undefined","NOOP","TRANSPARENT_COLOR","withStaticProps","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport Icon from \"../../components/Icon/Icon\";\nimport Loader from \"../../components/Loader/Loader\";\nimport {\n  BUTTON_ICON_SIZE,\n  ButtonColor as ButtonColorEnum,\n  ButtonInputType as ButtonInputTypeEnum,\n  ButtonType as ButtonTypeEnum,\n  SMALL_BUTTON_ICON_SIZE\n} from \"./ButtonConstants\";\nimport { ButtonColor, ButtonInputType, ButtonType, ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  ariaLabeledBy?: string;\n  /** aria label to provide important when providing only Icon */\n  ariaLabel?: string;\n  /** aria for a button popup */\n  ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  ariaExpanded?: boolean;\n  /** aria controls - receives id for the controlled region */\n  ariaControls?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button: VibeComponent<ButtonProps, unknown> & {\n  sizes?: typeof SIZES;\n  colors?: typeof ButtonColorEnum;\n  kinds?: typeof ButtonTypeEnum;\n  types?: typeof ButtonInputTypeEnum;\n  inputTags?: typeof ButtonInputTypeEnum;\n} = forwardRef<unknown, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind,\n      onClick,\n      name,\n      size,\n      color,\n      disabled,\n      rightIcon,\n      leftIcon,\n      success,\n      successText,\n      successIcon,\n      style,\n      loading: isLoading,\n      loaderClassName,\n      active,\n      activeButtonClassName,\n      id,\n      marginRight,\n      marginLeft,\n      type,\n      onMouseDown,\n      ariaLabel,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      onFocus,\n      onBlur,\n      ariaLabeledBy,\n      defaultTextColorOnPrimaryColor,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp,\n      \"data-testid\": dataTestId,\n      insetFocus,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: disabled || ariaHidden ? -1 : tabIndex,\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabeledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabeledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return SMALL_BUTTON_ICON_SIZE;\n          default:\n            return BUTTON_ICON_SIZE;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              iconType=\"font\"\n              icon={leftIcon}\n              iconSize={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              iconType=\"font\"\n              icon={rightIcon}\n              iconSize={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                iconType=\"font\"\n                icon={successIcon}\n                iconSize={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nButton.defaultProps = {\n  name: undefined,\n  style: undefined,\n  kind: \"primary\",\n  onClick: NOOP,\n  size: \"medium\",\n  color: \"primary\",\n  disabled: false,\n  rightIcon: null,\n  leftIcon: null,\n  success: false,\n  successText: \"\",\n  successIcon: null,\n  loading: false,\n  loaderClassName: undefined,\n  active: false,\n  marginRight: false,\n  marginLeft: false,\n  type: \"button\",\n  onMouseDown: NOOP,\n  rightFlat: false,\n  leftFlat: false,\n  preventClickAnimation: false,\n  noSidePadding: false,\n  onFocus: NOOP,\n  onBlur: NOOP,\n  defaultTextColorOnPrimaryColor: TRANSPARENT_COLOR,\n  ariaHasPopup: undefined,\n  blurOnMouseUp: true,\n  ariaExpanded: undefined,\n  ariaControls: undefined,\n  ariaLabel: undefined,\n  ariaLabeledBy: undefined,\n  insetFocus: false\n};\n\nexport default withStaticProps(Button, {\n  sizes: SIZES,\n  colors: ButtonColorEnum,\n  kinds: ButtonTypeEnum,\n  types: ButtonInputTypeEnum,\n  inputTags: ButtonInputTypeEnum\n});\n"],"names":["Button","forwardRef","_ref","ref","className","children","kind","onClick","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","isLoading","loading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","_cx","calculatedColor","cx","styles","getStyle","camelCase","_defineProperty","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","SMALL_BUTTON_ICON_SIZE","BUTTON_ICON_SIZE","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","concat","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","defaultProps","undefined","NOOP","TRANSPARENT_COLOR","withStaticProps","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"klCA0GA,IAAMA,EAMFC,GACF,SAAAC,EA6CEC,GACE,IA5CAC,EAASF,EAATE,UACAC,EAAQH,EAARG,SACAC,EAAIJ,EAAJI,KACAC,EAAOL,EAAPK,QACAC,EAAIN,EAAJM,KACAC,EAAIP,EAAJO,KACAC,EAAKR,EAALQ,MACAC,EAAQT,EAARS,SACAC,EAASV,EAATU,UACAC,EAAQX,EAARW,SACAC,EAAOZ,EAAPY,QACAC,EAAWb,EAAXa,YACAC,EAAWd,EAAXc,YACAC,EAAKf,EAALe,MACSC,EAAShB,EAAlBiB,QACAC,EAAelB,EAAfkB,gBACAC,EAAMnB,EAANmB,OACAC,EAAqBpB,EAArBoB,sBACAC,EAAErB,EAAFqB,GACAC,EAAWtB,EAAXsB,YACAC,EAAUvB,EAAVuB,WACAC,EAAIxB,EAAJwB,KACAC,EAAWzB,EAAXyB,YACAC,EAAS1B,EAAT0B,UACAC,EAAS3B,EAAT2B,UACAC,EAAQ5B,EAAR4B,SACAC,EAAqB7B,EAArB6B,sBACAC,EAAa9B,EAAb8B,cACAC,EAAO/B,EAAP+B,QACAC,EAAMhC,EAANgC,OACAC,EAAajC,EAAbiC,cACAC,EAA8BlC,EAA9BkC,+BACAC,GAAYnC,EAAZmC,aACAC,GAAYpC,EAAZoC,aACAC,GAAYrC,EAAZqC,aACoBC,GAAetC,EAAnC,oBACeuC,GAAUvC,EAAzB,eACgBwC,GAAWxC,EAA3B,gBACAyC,GAAazC,EAAbyC,cACeC,GAAU1C,EAAzB,eACA2C,GAAU3C,EAAV2C,WACAC,GAAQ5C,EAAR4C,SAIIC,GAAYC,EAA0B,MACtCC,GAAYC,EAAY/C,EAAK4C,IAE3B5B,GAAYgC,EAAiB,CAAEjC,UAAAA,IAA/BC,QAERiC,GAAU,WACR,IAAc,qBAAV1C,GAA0C,gBAAVA,IACvB,YAATJ,GACCyC,GAAUM,QAAf,CAEA,IAAMC,EAAgBP,GAAUM,QAChCC,EAAcrC,MAAMP,MAAQ6C,EAAuCD,EAAelB,EAH1D,CAIzB,GAAE,CAAC9B,EAAMyC,GAAWrC,EAAO0B,IAE5B,IAAMoB,GAAYC,GAAY,WAC5B,IAAMC,EAASX,GAAUM,SACrB1C,GAAa+C,GAGbf,IACFe,EAAOC,MAEV,GAAE,CAAChD,EAAUoC,GAAWJ,KAEnBiB,GAAkBH,GACtB,SAACI,GACKlD,GAAYQ,IAAWL,EACzB+C,EAAMC,iBAIJvD,GACFA,EAAQsD,EAEX,GACD,CAACtD,EAASI,EAAUQ,GAASL,IAGzBiD,GAAqBN,GACzB,SAACI,GACKlD,GAAYQ,IAAWL,EACzB+C,EAAMC,iBAIJnC,GACFA,EAAYkC,EAEf,GACD,CAAClC,EAAahB,EAAUQ,GAASL,IAG7BkD,GAAaC,GAAQ,WAAK,IAAAC,EACxBC,EAAkBrD,EAAU,WAAaJ,EAC/C,OAAO0D,EACLhE,EACAiE,EAAOX,OACPY,EAASD,EAAQE,EAAU,QAAU9D,IACrC6D,EAASD,EAAQE,EAAU,QAAUjE,IACrCgE,EAASD,EAAQE,EAAU,SAAWJ,KAAiBK,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAN,EAAA,CAAA,EAEpDG,EAAOvD,QAAUA,GACjBwD,EAASD,EAAQE,EAAU,SAAWJ,EAAkB,YAAc9C,GACtEC,EAAwBD,GACxBgD,EAAO7C,YAAcA,GACrB6C,EAAO5C,WAAaA,GACpB4C,EAAOxC,UAAYA,GACnBwC,EAAOvC,SAAWA,GAClBuC,EAAOtC,sBAAwBA,GAC/BsC,EAAOrC,cAAgBA,GACvBqC,EAAO1D,SAAWA,GAAQ6D,EAAAN,EAC1BG,EAAOI,gBAAkB5B,KAGhC,GAAG,CACD/B,EACAJ,EACAN,EACAK,EACAH,EACAe,EACAC,EACAE,EACAC,EACAI,EACAC,EACAC,EACAC,EACArB,EACAkC,KAGI6B,GAAcT,GAAQ,WA2B1B,MA1BuC,CACrC9D,IAAK8C,GACLvB,KAAAA,EACAtB,UAAW4D,GACXxD,KAAAA,EACAgD,UAAAA,GACAvC,MAAAA,EACAV,QAASqD,GACTrC,GAAAA,EACAU,QAAAA,EACAC,OAAAA,EACAY,SAAUnC,GAAY8B,IAAc,EAAIK,GACxC,cAAeF,IAAc+B,EAAUC,EAAuBC,OAAQtD,GACtE,YAAauD,EAAgBD,OAC7BlD,YAAaoC,GACb,gBAAiBpD,EACjB,YAAaQ,GACb,kBAAmBgB,EACnB,aAAcP,EACd,gBAAiBS,GACjB,gBAAiBC,GACjB,gBAAiBC,GACjB,mBAAoBC,GACpB,cAAeC,GACf,eAAgBC,GAGnB,GAAE,CACDO,GACAvB,EACAsC,GACAxD,EACAgD,GACAvC,EACA2C,GACArC,EACAU,EACAC,EACAY,GACAF,GACAmB,GACApD,EACAQ,GACAgB,EACAP,EACAS,GACAC,GACAC,GACAC,GACAC,GACAC,KAGIqC,GAAWtB,GACf,SAACuB,GACC,GAAoB,mBAATA,EACX,OAAQvE,GACN,IAAK,MACL,IAAK,KACH,OAAOwE,EACT,QACE,OAAOC,EAEb,GACA,CAACzE,IAGG0E,GAAwBlB,GAAQ,WAAA,OAAMmB,EAAMC,SAASC,QAAQjF,GAAUkF,KAAKC,WAAU,CAACnF,IAEvFoF,GAAgBxB,GACpB,WAAA,OACEmB,EAAAM,cAAAN,EAAAO,SAAA,KACG9E,EACCuE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTb,KAAMnE,EACNkE,SAAUA,GAASlE,GACnBT,UAAWgE,EAAEI,EAAA,CAAA,EACVH,EAAOxD,SAAWsE,KAErBW,kBAAgB,IAEhB,KACHzF,EACAO,EACCwE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTb,KAAMpE,EACNmE,SAAUA,GAASnE,GACnBR,UAAWgE,EAAEI,EAAA,CAAA,EACVH,EAAOzD,UAAYuE,KAEtBW,kBACA,IACA,KACH,GAEL,CAACzF,EAAU8E,GAAuBJ,GAAUlE,EAAUD,IAGxD,OAAIO,GAEAiE,0CAAYV,GAAW,CAAEqB,IAAG,GAAAC,OAAKzE,EAAE,cACjC6D,EAAMM,cAAA,OAAA,CAAAtF,UAAWgE,EAAGC,EAAO4B,OAAQ7E,IACjCgE,EAAAM,cAACQ,EAAO,CAAA9F,UAAWiE,EAAO8B,YAC1Bf,EAAkBM,cAAA,OAAA,CAAA,eAAA,EAAAtF,UAAWiE,EAAO+B,iBACjCX,MAOP3E,EAEAsE,0CAAYV,GAAW,CAAEqB,IAAG,GAAAC,OAAKzE,EAAE,cACjC6D,EAAAM,cAAA,OAAA,CAAMtF,UAAWiE,EAAOgC,gBACrBrF,EACCoE,EAAAM,cAACE,EACC,CAAAC,SAAS,OACTb,KAAMhE,EACN+D,SAAUA,GAAS/D,GACnBZ,UAAWgE,EAAEI,EACVH,CAAAA,EAAAA,EAAOxD,WAAaE,IAEvB+E,kBAAgB,IAEhB,KACH/E,GAEHqE,EAAAM,cAAA,OAAA,CAAA,cAAkB,OAAOtF,UAAWiE,EAAO+B,iBACxCX,KAOPL,EAAAM,cAAA,SAAAY,OAAAC,OAAA,CAAA,EAAY7B,GAAW,CAAEqB,IAAG,GAAAC,OAAKzE,EAAE,aAChCkE,GAGP,IAGFzF,EAAOwG,aAAe,CACpBhG,UAAMiG,EACNxF,WAAOwF,EACPnG,KAAM,UACNC,QAASmG,EACTjG,KAAM,SACNC,MAAO,UACPC,UAAU,EACVC,UAAW,KACXC,SAAU,KACVC,SAAS,EACTC,YAAa,GACbC,YAAa,KACbG,SAAS,EACTC,qBAAiBqF,EACjBpF,QAAQ,EACRG,aAAa,EACbC,YAAY,EACZC,KAAM,SACNC,YAAa+E,EACb7E,WAAW,EACXC,UAAU,EACVC,uBAAuB,EACvBC,eAAe,EACfC,QAASyE,EACTxE,OAAQwE,EACRtE,+BAAgCuE,EAChCtE,kBAAcoE,EACd9D,eAAe,EACfL,kBAAcmE,EACdlE,kBAAckE,EACd7E,eAAW6E,EACXtE,mBAAesE,EACf5D,YAAY,GAGd,IAAe+D,EAAAA,EAAgB5G,EAAQ,CACrC6G,MAAOC,EACPC,OAAQC,EACRC,MAAOC,EACPC,MAAOC,EACPC,UAAWD"}

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

@@ -1,2 +1,2 @@
-var o={button:"button_b33cf775e4","focus-visible":"focus-visible_827afe335f",loader:"loader_ff2f73ca78",loaderSvg:"loaderSvg_6fe92536e1",textPlaceholder:"textPlaceholder_2c5f0544c7",success:"success_bce5c8200d",successContent:"successContent_2cd372a56e",marginRight:"marginRight_e3591f6920",marginLeft:"marginLeft_fe74a53671",rightFlat:"rightFlat_eaf42325e2",leftFlat:"leftFlat_528b874e05",preventClickAnimation:"preventClickAnimation_de3a07127e",leftIcon:"leftIcon_e3591f6920",rightIcon:"rightIcon_fe74a53671",sizeXxs:"sizeXxs_3b832052ae",sizeXs:"sizeXs_f38acdcd77",sizeSmall:"sizeSmall_d14fe2e231",sizeMedium:"sizeMedium_9382c5aeaa",sizeLarge:"sizeLarge_94569b7e1d",kindPrimary:"kindPrimary_605185bf04",colorPrimary:"colorPrimary_6e8d819cce",colorBrand:"colorBrand_9463ed1da1",colorPrimaryActive:"colorPrimaryActive_06cef0c4cb",colorBrandActive:"colorBrandActive_3ff780f0b8",colorPositive:"colorPositive_94ea5f01fd",colorPositiveActive:"colorPositiveActive_eb6b03d7be",colorNegative:"colorNegative_1c174cb782",colorNegativeActive:"colorNegativeActive_eb6b03d7be",colorInverted:"colorInverted_396ae3dbed",colorInvertedActive:"colorInvertedActive_eb6b03d7be",disabled:"disabled_a1f81570bc",colorOnPrimaryColor:"colorOnPrimaryColor_5856d04708",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_4bb0932a53",colorFixedLight:"colorFixedLight_5ec1a03576",colorFixedLightActive:"colorFixedLightActive_de3a07127e",colorFixedDark:"colorFixedDark_91b105cb76",colorFixedDarkActive:"colorFixedDarkActive_15706170c2",colorOnInvertedBackground:"colorOnInvertedBackground_8adda80d93",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_902c7a8992",kindSecondary:"kindSecondary_072a691d61",kindTertiary:"kindTertiary_ee042b2d9d",noSidePadding:"noSidePadding_ea4c952ca9",insetFocusStyle:"insetFocusStyle_d37b1062c0"};!function(o){const r="s_id-f5db469b1a79_3_34_2";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}(".button_b33cf775e4 {\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_b33cf775e4:focus-visible, .button_b33cf775e4.focus-visible_827afe335f {\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_b33cf775e4:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.button_b33cf775e4 .loader_ff2f73ca78 {\n  height: 100%;\n}\n.button_b33cf775e4 .loader_ff2f73ca78 .loaderSvg_6fe92536e1 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_b33cf775e4 .textPlaceholder_2c5f0544c7 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_b33cf775e4.success_bce5c8200d {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_b33cf775e4.success_bce5c8200d .successContent_2cd372a56e {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_e3591f6920 {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_fe74a53671 {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_eaf42325e2 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_528b874e05 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_b33cf775e4:active:not(.preventClickAnimation_de3a07127e) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_b33cf775e4 .leftIcon_e3591f6920 {\n  margin-right: var(--spacing-small);\n}\n.button_b33cf775e4 .rightIcon_fe74a53671 {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_3b832052ae {\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_f38acdcd77 {\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_d14fe2e231 {\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_d14fe2e231 .loader_ff2f73ca78 {\n  top: 7px;\n}\n.sizeMedium_9382c5aeaa {\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_94569b7e1d {\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_605185bf04 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_605185bf04.colorPrimary_6e8d819cce {\n  background: var(--primary-color);\n}\n.kindPrimary_605185bf04.colorBrand_9463ed1da1 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_605185bf04.colorPrimaryActive_06cef0c4cb,\n.kindPrimary_605185bf04.colorPrimary_6e8d819cce:hover,\n.kindPrimary_605185bf04.colorPrimary_6e8d819cce:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_605185bf04.colorBrandActive_3ff780f0b8,\n.kindPrimary_605185bf04.colorBrand_9463ed1da1:hover,\n.kindPrimary_605185bf04.colorBrand_9463ed1da1:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_605185bf04.colorPositive_94ea5f01fd {\n  background: var(--positive-color);\n}\n.kindPrimary_605185bf04.colorPositiveActive_eb6b03d7be,\n.kindPrimary_605185bf04.colorPositive_94ea5f01fd:hover,\n.kindPrimary_605185bf04.colorPositive_94ea5f01fd:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_605185bf04.colorNegative_1c174cb782 {\n  background: var(--negative-color);\n}\n.kindPrimary_605185bf04.colorNegativeActive_eb6b03d7be,\n.kindPrimary_605185bf04.colorNegative_1c174cb782:hover,\n.kindPrimary_605185bf04.colorNegative_1c174cb782:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_605185bf04.colorInverted_396ae3dbed {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_605185bf04.colorInvertedActive_eb6b03d7be,\n.kindPrimary_605185bf04.colorInverted_396ae3dbed:hover,\n.kindPrimary_605185bf04.colorInverted_396ae3dbed:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_605185bf04.button_b33cf775e4.colorInverted_396ae3dbed.disabled_a1f81570bc {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708 {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_605185bf04.colorOnPrimaryColorActive_4bb0932a53,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:hover,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_605185bf04.colorOnPrimaryColorActive_4bb0932a53:focus-visible, .kindPrimary_605185bf04.colorOnPrimaryColorActive_4bb0932a53.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:hover:focus-visible,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:hover.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:focus:focus-visible,\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:focus.focus-visible_827afe335f {\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_605185bf04.colorOnPrimaryColorActive_4bb0932a53:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:hover:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindPrimary_605185bf04.colorOnPrimaryColor_5856d04708.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_605185bf04.colorFixedLightActive_de3a07127e,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:hover,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_605185bf04.colorFixedLightActive_de3a07127e:focus-visible, .kindPrimary_605185bf04.colorFixedLightActive_de3a07127e.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:hover:focus-visible,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:hover.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:focus:focus-visible,\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:focus.focus-visible_827afe335f {\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_605185bf04.colorFixedLightActive_de3a07127e:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:hover:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindPrimary_605185bf04.colorFixedLight_5ec1a03576.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_605185bf04.colorFixedDarkActive_15706170c2,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:hover,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_605185bf04.colorFixedDarkActive_15706170c2:focus-visible, .kindPrimary_605185bf04.colorFixedDarkActive_15706170c2.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:hover:focus-visible,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:hover.focus-visible_827afe335f,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:focus:focus-visible,\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:focus.focus-visible_827afe335f {\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_605185bf04.colorFixedDarkActive_15706170c2:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:hover:focus:not(.focus-visible_827afe335f),\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindPrimary_605185bf04.colorFixedDark_91b105cb76.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_605185bf04.colorOnInvertedBackground_8adda80d93 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_605185bf04.colorOnInvertedBackgroundActive_902c7a8992,\n.kindPrimary_605185bf04.colorOnInvertedBackground_8adda80d93:hover,\n.kindPrimary_605185bf04.colorOnInvertedBackground_8adda80d93:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_605185bf04.button_b33cf775e4.colorOnInvertedBackground_8adda80d93.disabled_a1f81570bc {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_605185bf04.button_b33cf775e4.disabled_a1f81570bc {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_072a691d61 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_072a691d61.sizeSmall_d14fe2e231 {\n  line-height: 22px;\n}\n.kindSecondary_072a691d61.sizeMedium_9382c5aeaa {\n  line-height: 22px;\n}\n.kindSecondary_072a691d61.sizeLarge_94569b7e1d {\n  line-height: 22px;\n}\n.kindSecondary_072a691d61.colorPrimaryActive_06cef0c4cb {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_072a691d61.colorPrimaryActive_06cef0c4cb:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_072a691d61.colorBrandActive_3ff780f0b8 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_072a691d61.colorBrandActive_3ff780f0b8,\n.kindSecondary_072a691d61.colorBrandActive_3ff780f0b8:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_072a691d61.colorPrimary_6e8d819cce:hover:not(.colorPrimaryActive_06cef0c4cb),\n.kindSecondary_072a691d61.colorPrimary_6e8d819cce:focus:not(.colorPrimaryActive_06cef0c4cb) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_072a691d61.colorBrand_9463ed1da1:hover:not(.colorBrandActive_3ff780f0b8),\n.kindSecondary_072a691d61.colorBrand_9463ed1da1:focus:not(.colorBrandActive_3ff780f0b8) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_072a691d61.colorPositive_94ea5f01fd {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_072a691d61.colorPositiveActive_eb6b03d7be,\n.kindSecondary_072a691d61.colorPositive_94ea5f01fd:hover,\n.kindSecondary_072a691d61.colorPositive_94ea5f01fd:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_072a691d61.colorNegative_1c174cb782 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_072a691d61.colorNegativeActive_eb6b03d7be,\n.kindSecondary_072a691d61.colorNegative_1c174cb782:hover,\n.kindSecondary_072a691d61.colorNegative_1c174cb782:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_072a691d61.colorInverted_396ae3dbed {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_072a691d61.colorInvertedActive_eb6b03d7be,\n.kindSecondary_072a691d61.colorInverted_396ae3dbed:hover,\n.kindSecondary_072a691d61.colorInverted_396ae3dbed:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_072a691d61.colorInverted_396ae3dbed.disabled_a1f81570bc {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708 {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_072a691d61.colorOnPrimaryColorActive_4bb0932a53,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:hover,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_072a691d61.colorOnPrimaryColorActive_4bb0932a53:focus-visible, .kindSecondary_072a691d61.colorOnPrimaryColorActive_4bb0932a53.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:hover:focus-visible,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:hover.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:focus:focus-visible,\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:focus.focus-visible_827afe335f {\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_072a691d61.colorOnPrimaryColorActive_4bb0932a53:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:hover:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindSecondary_072a691d61.colorOnPrimaryColor_5856d04708.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_072a691d61.colorFixedLightActive_de3a07127e,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:hover,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_072a691d61.colorFixedLightActive_de3a07127e:focus-visible, .kindSecondary_072a691d61.colorFixedLightActive_de3a07127e.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:hover:focus-visible,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:hover.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:focus:focus-visible,\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:focus.focus-visible_827afe335f {\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_072a691d61.colorFixedLightActive_de3a07127e:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:hover:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_072a691d61.colorFixedDarkActive_15706170c2,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:hover,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_072a691d61.colorFixedDarkActive_15706170c2:focus-visible, .kindSecondary_072a691d61.colorFixedDarkActive_15706170c2.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:hover:focus-visible,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:hover.focus-visible_827afe335f,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:focus:focus-visible,\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:focus.focus-visible_827afe335f {\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_072a691d61.colorFixedDarkActive_15706170c2:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:hover:focus:not(.focus-visible_827afe335f),\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindSecondary_072a691d61.colorOnInvertedBackground_8adda80d93 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_072a691d61.colorOnInvertedBackgroundActive_902c7a8992,\n.kindSecondary_072a691d61.colorOnInvertedBackground_8adda80d93:hover,\n.kindSecondary_072a691d61.colorOnInvertedBackground_8adda80d93:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_072a691d61.colorOnInvertedBackground_8adda80d93.disabled_a1f81570bc {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_072a691d61.colorFixedLight_5ec1a03576.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_072a691d61.colorFixedDark_91b105cb76.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_072a691d61.disabled_a1f81570bc {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_072a691d61.disabled_a1f81570bc:hover {\n  background-color: transparent;\n}\n.kindTertiary_ee042b2d9d {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_ee042b2d9d.colorPrimaryActive_06cef0c4cb {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_ee042b2d9d.colorPrimaryActive_06cef0c4cb:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_ee042b2d9d.colorBrandActive_3ff780f0b8 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_ee042b2d9d.colorBrandActive_3ff780f0b8,\n.kindTertiary_ee042b2d9d.colorBrandActive_3ff780f0b8:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_ee042b2d9d.colorPrimary_6e8d819cce:hover:not(.colorPrimaryActive_06cef0c4cb),\n.kindTertiary_ee042b2d9d.colorPrimary_6e8d819cce:focus:not(.colorPrimaryActive_06cef0c4cb) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_ee042b2d9d.colorBrand_9463ed1da1:hover:not(.colorBrandActive_3ff780f0b8),\n.kindTertiary_ee042b2d9d.colorBrand_9463ed1da1:focus:not(.colorBrandActive_3ff780f0b8) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_ee042b2d9d.colorPositive_94ea5f01fd {\n  color: var(--positive-color);\n}\n.kindTertiary_ee042b2d9d.colorPositiveActive_eb6b03d7be,\n.kindTertiary_ee042b2d9d.colorPositive_94ea5f01fd:hover,\n.kindTertiary_ee042b2d9d.colorPositive_94ea5f01fd:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_ee042b2d9d.colorNegative_1c174cb782 {\n  color: var(--negative-color);\n}\n.kindTertiary_ee042b2d9d.colorNegativeActive_eb6b03d7be,\n.kindTertiary_ee042b2d9d.colorNegative_1c174cb782:hover,\n.kindTertiary_ee042b2d9d.colorNegative_1c174cb782:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_ee042b2d9d.colorInverted_396ae3dbed {\n  color: var(--primary-text-color);\n}\n.kindTertiary_ee042b2d9d.colorInvertedActive_eb6b03d7be,\n.kindTertiary_ee042b2d9d.colorInverted_396ae3dbed:hover,\n.kindTertiary_ee042b2d9d.colorInverted_396ae3dbed:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_ee042b2d9d.colorInverted_396ae3dbed.disabled_a1f81570bc {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708 {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_ee042b2d9d.colorOnPrimaryColorActive_4bb0932a53,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:hover,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_ee042b2d9d.colorOnPrimaryColorActive_4bb0932a53:focus-visible, .kindTertiary_ee042b2d9d.colorOnPrimaryColorActive_4bb0932a53.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:hover:focus-visible,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:hover.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:focus:focus-visible,\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:focus.focus-visible_827afe335f {\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_ee042b2d9d.colorOnPrimaryColorActive_4bb0932a53:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:hover:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindTertiary_ee042b2d9d.colorOnPrimaryColor_5856d04708.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_ee042b2d9d.colorFixedLightActive_de3a07127e,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:hover,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_ee042b2d9d.colorFixedLightActive_de3a07127e:focus-visible, .kindTertiary_ee042b2d9d.colorFixedLightActive_de3a07127e.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:hover:focus-visible,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:hover.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:focus:focus-visible,\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:focus.focus-visible_827afe335f {\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_ee042b2d9d.colorFixedLightActive_de3a07127e:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:hover:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindTertiary_ee042b2d9d.colorFixedLight_5ec1a03576.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_ee042b2d9d.colorFixedDarkActive_15706170c2,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:hover,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_ee042b2d9d.colorFixedDarkActive_15706170c2:focus-visible, .kindTertiary_ee042b2d9d.colorFixedDarkActive_15706170c2.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:hover:focus-visible,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:hover.focus-visible_827afe335f,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:focus:focus-visible,\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:focus.focus-visible_827afe335f {\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_ee042b2d9d.colorFixedDarkActive_15706170c2:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:hover:focus:not(.focus-visible_827afe335f),\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76:focus:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}\n.kindTertiary_ee042b2d9d.colorFixedDark_91b105cb76.disabled_a1f81570bc {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_ee042b2d9d.colorOnInvertedBackground_8adda80d93 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_ee042b2d9d.colorOnInvertedBackgroundActive_902c7a8992,\n.kindTertiary_ee042b2d9d.colorOnInvertedBackground_8adda80d93:hover,\n.kindTertiary_ee042b2d9d.colorOnInvertedBackground_8adda80d93:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_ee042b2d9d.colorOnInvertedBackground_8adda80d93.disabled_a1f81570bc {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_ee042b2d9d.disabled_a1f81570bc {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_ee042b2d9d.disabled_a1f81570bc:hover {\n  background-color: transparent;\n}\n.noSidePadding_ea4c952ca9 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_b33cf775e4.insetFocusStyle_d37b1062c0:focus-visible, .button_b33cf775e4.insetFocusStyle_d37b1062c0.focus-visible_827afe335f {\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_b33cf775e4.insetFocusStyle_d37b1062c0:focus:not(.focus-visible_827afe335f) {\n  outline: none;\n}");export{o as default};
+var o={button:"button_a78c501a6d","focus-visible":"focus-visible_eb6b496cf8",loader:"loader_b96f7be674",loaderSvg:"loaderSvg_bf2bbcfc9e",textPlaceholder:"textPlaceholder_e09cc791b7",success:"success_189a87ef89",successContent:"successContent_4a031f41f8",marginRight:"marginRight_2e6da877c0",marginLeft:"marginLeft_3863072f51",rightFlat:"rightFlat_28570a2c82",leftFlat:"leftFlat_bc880c07b6",preventClickAnimation:"preventClickAnimation_ce51ffcdb0",leftIcon:"leftIcon_2e6da877c0",rightIcon:"rightIcon_3863072f51",sizeXxs:"sizeXxs_c68f72cb21",sizeXs:"sizeXs_dd5a5d6e4d",sizeSmall:"sizeSmall_ba27d4ff20",sizeMedium:"sizeMedium_fd6dfc021d",sizeLarge:"sizeLarge_e397e15ae5",kindPrimary:"kindPrimary_5744ef2742",colorPrimary:"colorPrimary_42abda22de",colorBrand:"colorBrand_685f5f821d",colorPrimaryActive:"colorPrimaryActive_f3ecd2c144",colorBrandActive:"colorBrandActive_770cfefd86",colorPositive:"colorPositive_bcee42de07",colorPositiveActive:"colorPositiveActive_700c9e363c",colorNegative:"colorNegative_5cd15ae6f7",colorNegativeActive:"colorNegativeActive_700c9e363c",colorInverted:"colorInverted_c83c10179b",colorInvertedActive:"colorInvertedActive_700c9e363c",disabled:"disabled_5462544050",colorOnPrimaryColor:"colorOnPrimaryColor_f8adc1b52e",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_68fdb6b899",colorFixedLight:"colorFixedLight_6face580b5",colorFixedLightActive:"colorFixedLightActive_ce51ffcdb0",colorFixedDark:"colorFixedDark_9d9ed1fd63",colorFixedDarkActive:"colorFixedDarkActive_aa66a8cb5d",colorOnInvertedBackground:"colorOnInvertedBackground_a83ee4b9b0",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_91daa1516d",kindSecondary:"kindSecondary_888a4b7694",kindTertiary:"kindTertiary_815f9f48c9",noSidePadding:"noSidePadding_08d6583214",insetFocusStyle:"insetFocusStyle_df2a372550"};!function(o){const r="s_id-f5db469b1a79_3_35_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}(".button_a78c501a6d {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  user-select: none;\n  min-width: auto;\n}\n.button_a78c501a6d:focus-visible, .button_a78c501a6d.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_a78c501a6d:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.button_a78c501a6d .loader_b96f7be674 {\n  height: 100%;\n}\n.button_a78c501a6d .loader_b96f7be674 .loaderSvg_bf2bbcfc9e {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_a78c501a6d .textPlaceholder_e09cc791b7 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_a78c501a6d.success_189a87ef89 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_a78c501a6d.success_189a87ef89 .successContent_4a031f41f8 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_2e6da877c0 {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_3863072f51 {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_28570a2c82 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_bc880c07b6 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_a78c501a6d:active:not(.preventClickAnimation_ce51ffcdb0) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_a78c501a6d .leftIcon_2e6da877c0 {\n  margin-right: var(--spacing-small);\n}\n.button_a78c501a6d .rightIcon_3863072f51 {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_c68f72cb21 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--spacing-xs);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs_dd5a5d6e4d {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall_ba27d4ff20 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall_ba27d4ff20 .loader_b96f7be674 {\n  top: 7px;\n}\n.sizeMedium_fd6dfc021d {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--spacing-small) var(--spacing-medium);\n  height: 40px;\n}\n.sizeLarge_e397e15ae5 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--spacing-large);\n  height: 48px;\n}\n.kindPrimary_5744ef2742 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorPrimary_42abda22de {\n  background: var(--primary-color);\n}\n.kindPrimary_5744ef2742.colorBrand_685f5f821d {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_5744ef2742.colorPrimaryActive_f3ecd2c144,\n.kindPrimary_5744ef2742.colorPrimary_42abda22de:hover,\n.kindPrimary_5744ef2742.colorPrimary_42abda22de:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_5744ef2742.colorBrandActive_770cfefd86,\n.kindPrimary_5744ef2742.colorBrand_685f5f821d:hover,\n.kindPrimary_5744ef2742.colorBrand_685f5f821d:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_5744ef2742.colorPositive_bcee42de07 {\n  background: var(--positive-color);\n}\n.kindPrimary_5744ef2742.colorPositiveActive_700c9e363c,\n.kindPrimary_5744ef2742.colorPositive_bcee42de07:hover,\n.kindPrimary_5744ef2742.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7 {\n  background: var(--negative-color);\n}\n.kindPrimary_5744ef2742.colorNegativeActive_700c9e363c,\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7:hover,\n.kindPrimary_5744ef2742.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_5744ef2742.colorInverted_c83c10179b {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_5744ef2742.colorInvertedActive_700c9e363c,\n.kindPrimary_5744ef2742.colorInverted_c83c10179b:hover,\n.kindPrimary_5744ef2742.colorInverted_c83c10179b:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.colorInverted_c83c10179b.disabled_5462544050 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n}\n.kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover:focus-visible,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus:focus-visible,\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_5744ef2742.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_5744ef2742.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindPrimary_5744ef2742.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_5744ef2742.colorOnInvertedBackgroundActive_91daa1516d,\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindPrimary_5744ef2742.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_5744ef2742.button_a78c501a6d.disabled_5462544050 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_888a4b7694 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_888a4b7694.sizeSmall_ba27d4ff20 {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.sizeMedium_fd6dfc021d {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.sizeLarge_e397e15ae5 {\n  line-height: 22px;\n}\n.kindSecondary_888a4b7694.colorPrimaryActive_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_888a4b7694.colorPrimaryActive_f3ecd2c144:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86,\n.kindSecondary_888a4b7694.colorBrandActive_770cfefd86:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_888a4b7694.colorPrimary_42abda22de:hover:not(.colorPrimaryActive_f3ecd2c144),\n.kindSecondary_888a4b7694.colorPrimary_42abda22de:focus:not(.colorPrimaryActive_f3ecd2c144) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorBrand_685f5f821d:hover:not(.colorBrandActive_770cfefd86),\n.kindSecondary_888a4b7694.colorBrand_685f5f821d:focus:not(.colorBrandActive_770cfefd86) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorPositive_bcee42de07 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_888a4b7694.colorPositiveActive_700c9e363c,\n.kindSecondary_888a4b7694.colorPositive_bcee42de07:hover,\n.kindSecondary_888a4b7694.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_888a4b7694.colorNegativeActive_700c9e363c,\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7:hover,\n.kindSecondary_888a4b7694.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_888a4b7694.colorInverted_c83c10179b {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_888a4b7694.colorInvertedActive_700c9e363c,\n.kindSecondary_888a4b7694.colorInverted_c83c10179b:hover,\n.kindSecondary_888a4b7694.colorInverted_c83c10179b:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorInverted_c83c10179b.disabled_5462544050 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover:focus-visible,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus:focus-visible,\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_888a4b7694.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_888a4b7694.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackgroundActive_91daa1516d,\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_888a4b7694.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_888a4b7694.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_888a4b7694.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_888a4b7694.disabled_5462544050 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_888a4b7694.disabled_5462544050:hover {\n  background-color: transparent;\n}\n.kindTertiary_815f9f48c9 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_815f9f48c9.colorPrimaryActive_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_815f9f48c9.colorPrimaryActive_f3ecd2c144:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86,\n.kindTertiary_815f9f48c9.colorBrandActive_770cfefd86:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_815f9f48c9.colorPrimary_42abda22de:hover:not(.colorPrimaryActive_f3ecd2c144),\n.kindTertiary_815f9f48c9.colorPrimary_42abda22de:focus:not(.colorPrimaryActive_f3ecd2c144) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorBrand_685f5f821d:hover:not(.colorBrandActive_770cfefd86),\n.kindTertiary_815f9f48c9.colorBrand_685f5f821d:focus:not(.colorBrandActive_770cfefd86) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07 {\n  color: var(--positive-color);\n}\n.kindTertiary_815f9f48c9.colorPositiveActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07:hover,\n.kindTertiary_815f9f48c9.colorPositive_bcee42de07:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7 {\n  color: var(--negative-color);\n}\n.kindTertiary_815f9f48c9.colorNegativeActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7:hover,\n.kindTertiary_815f9f48c9.colorNegative_5cd15ae6f7:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b {\n  color: var(--primary-text-color);\n}\n.kindTertiary_815f9f48c9.colorInvertedActive_700c9e363c,\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b:hover,\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorInverted_c83c10179b.disabled_5462544050 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899:focus-visible, .kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColorActive_68fdb6b899:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorOnPrimaryColor_f8adc1b52e.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus {\n  backdrop-filter: brightness(85%);\n}\n.kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0:focus-visible, .kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_815f9f48c9.colorFixedLightActive_ce51ffcdb0:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorFixedLight_6face580b5.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d:focus-visible, .kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover.focus-visible_eb6b496cf8,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus:focus-visible,\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_815f9f48c9.colorFixedDarkActive_aa66a8cb5d:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:hover:focus:not(.focus-visible_eb6b496cf8),\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63:focus:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}\n.kindTertiary_815f9f48c9.colorFixedDark_9d9ed1fd63.disabled_5462544050 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackgroundActive_91daa1516d,\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0:hover,\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_815f9f48c9.colorOnInvertedBackground_a83ee4b9b0.disabled_5462544050 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_815f9f48c9.disabled_5462544050 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_815f9f48c9.disabled_5462544050:hover {\n  background-color: transparent;\n}\n.noSidePadding_08d6583214 {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_a78c501a6d.insetFocusStyle_df2a372550:focus-visible, .button_a78c501a6d.insetFocusStyle_df2a372550.focus-visible_eb6b496cf8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_a78c501a6d.insetFocusStyle_df2a372550:focus:not(.focus-visible_eb6b496cf8) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

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

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

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

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_56f73e311b",subTextContainer:"subTextContainer_303efee4e7",buttonsContainer:"buttonsContainer_03780bcd87",button:"button_b15f484e19",activeButton:"activeButton_06cef0c4cb",optionText:"optionText_43496db3f9",disabled:"disabled_06984d11a9",selected:"selected_f839cce5c4",kindTertiary:"kindTertiary_f1014b41e0",wrapper:"wrapper_42ae5f1615",buttonDisabled:"buttonDisabled_41d999c4fa",fullWidth:"fullWidth_618fc1b0bf"};!function(n){const e="s_id-51d51089eef9_3_34_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".buttonGroup_56f73e311b {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_303efee4e7 {\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_03780bcd87 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_03780bcd87 .button_b15f484e19 {\n  border: 1px solid;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_03780bcd87 .button_b15f484e19.activeButton_06cef0c4cb {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.buttonsContainer_03780bcd87 .button_b15f484e19.activeButton_06cef0c4cb:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.optionText_43496db3f9:not(.disabled_06984d11a9) {\n  color: var(--primary-text-color);\n}\n\n.optionText_43496db3f9:not(.disabled_06984d11a9).selected_f839cce5c4 {\n  color: var(--primary-text-color);\n}\n\n.kindTertiary_f1014b41e0 .button_b15f484e19 {\n  border-color: transparent;\n}\n\n.kindTertiary_f1014b41e0 .button_b15f484e19:first-child {\n  border-color: transparent;\n}\n\n.wrapper_42ae5f1615.disabled_06984d11a9 {\n  cursor: not-allowed;\n}\n\n.button_b15f484e19.disabled_06984d11a9 {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n}\n\n.button_b15f484e19.buttonDisabled_41d999c4fa {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fullWidth_618fc1b0bf {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_91e5fec39c",subTextContainer:"subTextContainer_ceae79c728",buttonsContainer:"buttonsContainer_a8741c63a6",button:"button_87d4cd239e",activeButton:"activeButton_f3ecd2c144",optionText:"optionText_bf50bebabf",disabled:"disabled_84a88df534",selected:"selected_f94111093d",kindTertiary:"kindTertiary_dbd12cc159",wrapper:"wrapper_28d90719cc",buttonDisabled:"buttonDisabled_060389d0b0",fullWidth:"fullWidth_dabae71445"};!function(n){const o="s_id-51d51089eef9_3_35_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const e=document.createElement("style");e.id=o,t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".buttonGroup_91e5fec39c {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer_ceae79c728 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.buttonsContainer_a8741c63a6 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e {\n  border: 1px solid;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e.activeButton_f3ecd2c144 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.buttonsContainer_a8741c63a6 .button_87d4cd239e.activeButton_f3ecd2c144:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.optionText_bf50bebabf:not(.disabled_84a88df534) {\n  color: var(--primary-text-color);\n}\n\n.optionText_bf50bebabf:not(.disabled_84a88df534).selected_f94111093d {\n  color: var(--primary-text-color);\n}\n\n.kindTertiary_dbd12cc159 .button_87d4cd239e {\n  border-color: transparent;\n}\n\n.kindTertiary_dbd12cc159 .button_87d4cd239e:first-child {\n  border-color: transparent;\n}\n\n.wrapper_28d90719cc.disabled_84a88df534 {\n  cursor: not-allowed;\n}\n\n.button_87d4cd239e.disabled_84a88df534 {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n}\n\n.button_87d4cd239e.buttonDisabled_060389d0b0 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.fullWidth_dabae71445 {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

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

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

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

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

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

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