@vibe/core 3.86.0 → 3.88.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsConstants.js","sources":["../../../../src/components/BreadcrumbsBar/BreadcrumbsConstants.ts"],"sourcesContent":["export enum BreadcrumbsBarType {\n  NAVIGATION = \"navigation\",\n  INDICATION = \"indication\"\n}\n"],"names":["BreadcrumbsBarType"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,WAAA,aACAA,EAAA,WAAA,YACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

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

@@ -1,2 +1,2 @@
-import{slicedToArray as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as l,useCallback as a,useMemo as n,useEffect as s}from"react";import{camelCase as d}from"es-toolkit";import u from"classnames";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import c from"../../hooks/usePrevious/index.js";import m from"../../hooks/useMergeRef.js";import{ButtonWrapper as f}from"./ButtonWrapper.js";import{getTestId as v}from"../../tests/testIds.js";import{ComponentDefaultTestId as b,ComponentVibeId as h}from"../../tests/constants.js";import y from"./ButtonGroup.module.scss.js";var B=i((function(i,B){var C=i.className,k=i.options,T=i.name,g=void 0===T?"":T,j=i.disabled,N=void 0!==j&&j,x=i.value,P=void 0===x?"":x,M=i.onSelect,O=i.size,U=void 0===O?"small":O,D=i.kind,S=void 0===D?"secondary":D,W=i.groupAriaLabel,E=void 0===W?"":W,G=i.tooltipPosition,H=i.tooltipHideDelay,I=i.tooltipShowDelay,_=i.tooltipContainerSelector,A=i.tooltipMoveBy,L=i.blurOnMouseUp,R=void 0===L||L,w=i.id,z=i["data-testid"],F=i.fullWidth,q=void 0!==F&&F,J=r(),K=m(B,J),Q=l(P),V=t(Q,2),X=V[0],Y=V[1],Z=c(P),$=a((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,g))}),[M,N,g]),tt=function(t){return(null==t?void 0:t.value)===X},et=n((function(){return k.find((function(t){return tt(t)}))}),[k,X]),ot=n((function(){return k.map((function(t,i){var r=tt(t),l=0===i,a=i===k.length-1,n=tt(k[i+1]);return o.createElement(f,{key:t.value,size:U,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,ariaLabel:t.ariaLabel,tooltipContent:t.tooltipContent,tooltipPosition:G,tooltipHideDelay:H,tooltipShowDelay:I,tooltipContainerSelector:_,tooltipMoveBy:A,blurOnMouseUp:R,fullWidth:q,className:u(y.button,y.optionText,e(e(e(e(e(e({},y.selected,r),y.disabled,N),y.buttonDisabled,t.disabled),y.fullWidth,q),y.startBorder,l),y.endBorder,a||!n)),activeButtonClassName:y.activeButton},t.text)}))}),[k,X,U,G,H,I,_,A,R,N,q,$]);return s((function(){P!==Z&&P!==X&&Y(P)}),[P,Z,X,Y]),o.createElement("div",{className:u(y.buttonGroup,C,p(y,d("kind-"+S)),e({},y.disabled,N)),id:w,"data-testid":z||v(b.BUTTON_GROUP,w),"data-vibe":h.BUTTON_GROUP,ref:K},o.createElement("div",{role:"group","aria-label":E,className:u(y.buttonsContainer,e({},y.fullWidth,q)),"aria-disabled":N},ot),et&&et.subText&&o.createElement("div",{className:u(y.subTextContainer)},et.subText))}));export{B as default};
+import{slicedToArray as t,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as i,useRef as r,useState as s,useCallback as l,useMemo as n,useEffect as a}from"react";import{camelCase as u}from"es-toolkit";import d from"classnames";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import m from"../../hooks/usePrevious/index.js";import c from"../../hooks/useMergeRef.js";import{ButtonWrapper as f}from"./ButtonWrapper.js";import{withStaticProps as v}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as b}from"../../tests/testIds.js";import{ComponentDefaultTestId as h,ComponentVibeId as y}from"../../tests/constants.js";import B from"./ButtonGroup.module.scss.js";import j from"../../../components/button/dist/Button/Button.js";var k=v(i((function(i,v){var j=i.className,k=i.options,C=i.name,T=void 0===C?"":C,g=i.disabled,N=void 0!==g&&g,P=i.value,x=void 0===P?"":P,M=i.onSelect,O=i.size,S=void 0===O?"small":O,U=i.kind,D=void 0===U?"secondary":U,W=i.groupAriaLabel,z=void 0===W?"":W,E=i.tooltipPosition,G=i.tooltipHideDelay,H=i.tooltipShowDelay,I=i.tooltipContainerSelector,_=i.tooltipMoveBy,w=i.blurOnMouseUp,A=void 0===w||w,L=i.id,R=i["data-testid"],F=i.fullWidth,q=void 0!==F&&F,J=r(),K=c(v,J),Q=s(x),V=t(Q,2),X=V[0],Y=V[1],Z=m(x),$=l((function(t){N||t.disabled||(Y(t.value),M&&M(t.value,T))}),[M,N,T]),tt=function(t){return(null==t?void 0:t.value)===X},ot=n((function(){return k.find((function(t){return tt(t)}))}),[k,X]),et=n((function(){return k.map((function(t,i){var r=tt(t),s=0===i,l=i===k.length-1,n=tt(k[i+1]);return e.createElement(f,{key:t.value,size:S,onClick:function(){return $(t)},rightIcon:t.icon,leftIcon:t.leftIcon,active:r,rightFlat:i!==k.length-1,leftFlat:0!==i,kind:"tertiary",preventClickAnimation:!0,ariaLabel:t.ariaLabel,tooltipContent:t.tooltipContent,tooltipPosition:E,tooltipHideDelay:G,tooltipShowDelay:H,tooltipContainerSelector:I,tooltipMoveBy:_,blurOnMouseUp:A,fullWidth:q,className:d(B.button,B.optionText,o(o(o(o(o(o({},B.selected,r),B.disabled,N),B.buttonDisabled,t.disabled),B.fullWidth,q),B.startBorder,s),B.endBorder,l||!n)),activeButtonClassName:B.activeButton},t.text)}))}),[k,X,S,E,G,H,I,_,A,N,q,$]);return a((function(){x!==Z&&x!==X&&Y(x)}),[x,Z,X,Y]),e.createElement("div",{className:d(B.buttonGroup,j,p(B,u("kind-"+D)),o({},B.disabled,N)),id:L,"data-testid":R||b(h.BUTTON_GROUP,L),"data-vibe":y.BUTTON_GROUP,ref:K},e.createElement("div",{role:"group","aria-label":z,className:d(B.buttonsContainer,o({},B.fullWidth,q)),"aria-disabled":N},et),ot&&ot.subText&&e.createElement("div",{className:d(B.subTextContainer)},ot.subText))})),{sizes:j.sizes,kinds:j.kinds});export{k as default};
 //# sourceMappingURL=ButtonGroup.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 \"es-toolkit\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { type ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { type ButtonType, type ButtonSize } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\ntype ButtonGroupOption = {\n  icon?: SubIcon;\n  leftIcon?: SubIcon;\n  ariaLabel?: string;\n  subText?: string;\n  value: ButtonValue;\n  text: string;\n  disabled?: boolean;\n  tooltipContent?: string;\n};\n\nexport interface ButtonGroupProps extends VibeComponentProps {\n  /**\n   * The list of button options.\n   */\n  options: Array<ButtonGroupOption>;\n  /**\n   * The currently selected button value.\n   */\n  value?: ButtonValue;\n  /**\n   * Callback fired when a button is selected.\n   */\n  onSelect?: (value: ButtonValue, name: string) => void;\n  /**\n   * The size of the buttons.\n   */\n  size?: ButtonSize;\n  /**\n   * The style variant of the buttons.\n   */\n  kind?: Extract<ButtonType, \"secondary\" | \"tertiary\">;\n  /**\n   * The name of the button group.\n   */\n  name?: string;\n  /**\n   * If true, disables all buttons in the group.\n   */\n  disabled?: boolean;\n  /**\n   * The label of the button group for accessibility.\n   */\n  groupAriaLabel?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * The content inside the button group.\n   */\n  children?: React.ReactNode;\n  /**\n   * If true, makes the button group take the full width of its container.\n   */\n  fullWidth?: boolean;\n  /**\n   * If true, removes focus from the button after clicking.\n   */\n  blurOnMouseUp?: boolean;\n}\n\nconst ButtonGroup = forwardRef(\n  (\n    {\n      className,\n      options,\n      name = \"\",\n      disabled = false,\n      value = \"\",\n      onSelect,\n      size = \"small\",\n      kind = \"secondary\",\n      groupAriaLabel = \"\",\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp = true,\n      id,\n      \"data-testid\": dataTestId,\n      fullWidth = false\n    }: ButtonGroupProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const inputRef = useRef();\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const [valueState, setValueState] = useState(value);\n    const prevValue = usePrevious(value);\n\n    const onClick = useCallback(\n      (option: ButtonGroupOption) => {\n        const isDisabled = disabled || option.disabled;\n        if (!isDisabled) {\n          setValueState(option.value);\n          if (onSelect) {\n            onSelect(option.value, name);\n          }\n        }\n      },\n      [onSelect, disabled, name]\n    );\n\n    const isOptionActive = (option?: ButtonGroupOption) => option?.value === valueState;\n\n    const selectedOption = useMemo(() => {\n      return options.find(option => isOptionActive(option));\n    }, [options, valueState]);\n\n    const Buttons = useMemo(() => {\n      return options.map((option, index) => {\n        const isSelected = isOptionActive(option);\n        const isFirst = index === 0;\n        const isLast = index === options.length - 1;\n        const isNextOptionActive = isOptionActive(options[index + 1]);\n\n        return (\n          <ButtonWrapper\n            key={option.value}\n            size={size}\n            onClick={() => onClick(option)}\n            rightIcon={option.icon}\n            leftIcon={option.leftIcon}\n            active={isSelected}\n            rightFlat={index !== options.length - 1}\n            leftFlat={index !== 0}\n            kind=\"tertiary\"\n            preventClickAnimation\n            ariaLabel={option.ariaLabel}\n            tooltipContent={option.tooltipContent}\n            tooltipPosition={tooltipPosition}\n            tooltipHideDelay={tooltipHideDelay}\n            tooltipShowDelay={tooltipShowDelay}\n            tooltipContainerSelector={tooltipContainerSelector}\n            tooltipMoveBy={tooltipMoveBy}\n            blurOnMouseUp={blurOnMouseUp}\n            fullWidth={fullWidth}\n            className={cx(styles.button, styles.optionText, {\n              [styles.selected]: isSelected,\n              [styles.disabled]: disabled,\n              [styles.buttonDisabled]: option.disabled,\n              [styles.fullWidth]: fullWidth,\n              [styles.startBorder]: isFirst,\n              [styles.endBorder]: isLast || !isNextOptionActive\n            })}\n            activeButtonClassName={styles.activeButton}\n          >\n            {option.text}\n          </ButtonWrapper>\n        );\n      });\n    }, [\n      options,\n      valueState,\n      size,\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp,\n      disabled,\n      fullWidth,\n      onClick\n    ]);\n\n    // Effects\n    useEffect(() => {\n      // Update value if changed from props\n      if (value !== prevValue && value !== valueState) {\n        setValueState(value);\n      }\n    }, [value, prevValue, valueState, setValueState]);\n\n    return (\n      <div\n        className={cx(styles.buttonGroup, className, getStyle(styles, camelCase(\"kind-\" + kind)), {\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BUTTON_GROUP, id)}\n        data-vibe={ComponentVibeId.BUTTON_GROUP}\n        ref={mergedRef}\n      >\n        <div\n          role=\"group\"\n          aria-label={groupAriaLabel}\n          className={cx(styles.buttonsContainer, { [styles.fullWidth]: fullWidth })}\n          aria-disabled={disabled}\n        >\n          {Buttons}\n        </div>\n        {selectedOption && selectedOption.subText && (\n          <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","forwardRef","_ref","ref","className","options","_ref$name","name","_ref$disabled","disabled","_ref$value","value","onSelect","_ref$size","size","_ref$kind","kind","_ref$groupAriaLabel","groupAriaLabel","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","_ref$blurOnMouseUp","blurOnMouseUp","id","dataTestId","_ref$fullWidth","fullWidth","inputRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","valueState","setValueState","prevValue","usePrevious","onClick","useCallback","option","isOptionActive","selectedOption","useMemo","find","Buttons","map","index","isSelected","isFirst","isLast","length","isNextOptionActive","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","startBorder","endBorder","activeButtonClassName","activeButton","text","useEffect","buttonGroup","getStyle","camelCase","getTestId","ComponentDefaultTestId","BUTTON_GROUP","ComponentVibeId","role","buttonsContainer","subText","subTextContainer"],"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 \"es-toolkit\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { type ButtonType as ButtonTypeEnum, type ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { type SIZES } from \"../../constants\";\nimport { Button, type ButtonType, type ButtonSize } from \"@vibe/button\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\ntype ButtonGroupOption = {\n  icon?: SubIcon;\n  leftIcon?: SubIcon;\n  ariaLabel?: string;\n  subText?: string;\n  value: ButtonValue;\n  text: string;\n  disabled?: boolean;\n  tooltipContent?: string;\n};\n\nexport interface ButtonGroupProps extends VibeComponentProps {\n  /**\n   * The list of button options.\n   */\n  options: Array<ButtonGroupOption>;\n  /**\n   * The currently selected button value.\n   */\n  value?: ButtonValue;\n  /**\n   * Callback fired when a button is selected.\n   */\n  onSelect?: (value: ButtonValue, name: string) => void;\n  /**\n   * The size of the buttons.\n   */\n  size?: ButtonSize;\n  /**\n   * The style variant of the buttons.\n   */\n  kind?: Extract<ButtonType, \"secondary\" | \"tertiary\">;\n  /**\n   * The name of the button group.\n   */\n  name?: string;\n  /**\n   * If true, disables all buttons in the group.\n   */\n  disabled?: boolean;\n  /**\n   * The label of the button group for accessibility.\n   */\n  groupAriaLabel?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * The content inside the button group.\n   */\n  children?: React.ReactNode;\n  /**\n   * If true, makes the button group take the full width of its container.\n   */\n  fullWidth?: boolean;\n  /**\n   * If true, removes focus from the button after clicking.\n   */\n  blurOnMouseUp?: boolean;\n}\n\nconst ButtonGroup = forwardRef(\n  (\n    {\n      className,\n      options,\n      name = \"\",\n      disabled = false,\n      value = \"\",\n      onSelect,\n      size = \"small\",\n      kind = \"secondary\",\n      groupAriaLabel = \"\",\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp = true,\n      id,\n      \"data-testid\": dataTestId,\n      fullWidth = false\n    }: ButtonGroupProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const inputRef = useRef();\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const [valueState, setValueState] = useState(value);\n    const prevValue = usePrevious(value);\n\n    const onClick = useCallback(\n      (option: ButtonGroupOption) => {\n        const isDisabled = disabled || option.disabled;\n        if (!isDisabled) {\n          setValueState(option.value);\n          if (onSelect) {\n            onSelect(option.value, name);\n          }\n        }\n      },\n      [onSelect, disabled, name]\n    );\n\n    const isOptionActive = (option?: ButtonGroupOption) => option?.value === valueState;\n\n    const selectedOption = useMemo(() => {\n      return options.find(option => isOptionActive(option));\n    }, [options, valueState]);\n\n    const Buttons = useMemo(() => {\n      return options.map((option, index) => {\n        const isSelected = isOptionActive(option);\n        const isFirst = index === 0;\n        const isLast = index === options.length - 1;\n        const isNextOptionActive = isOptionActive(options[index + 1]);\n\n        return (\n          <ButtonWrapper\n            key={option.value}\n            size={size}\n            onClick={() => onClick(option)}\n            rightIcon={option.icon}\n            leftIcon={option.leftIcon}\n            active={isSelected}\n            rightFlat={index !== options.length - 1}\n            leftFlat={index !== 0}\n            kind=\"tertiary\"\n            preventClickAnimation\n            ariaLabel={option.ariaLabel}\n            tooltipContent={option.tooltipContent}\n            tooltipPosition={tooltipPosition}\n            tooltipHideDelay={tooltipHideDelay}\n            tooltipShowDelay={tooltipShowDelay}\n            tooltipContainerSelector={tooltipContainerSelector}\n            tooltipMoveBy={tooltipMoveBy}\n            blurOnMouseUp={blurOnMouseUp}\n            fullWidth={fullWidth}\n            className={cx(styles.button, styles.optionText, {\n              [styles.selected]: isSelected,\n              [styles.disabled]: disabled,\n              [styles.buttonDisabled]: option.disabled,\n              [styles.fullWidth]: fullWidth,\n              [styles.startBorder]: isFirst,\n              [styles.endBorder]: isLast || !isNextOptionActive\n            })}\n            activeButtonClassName={styles.activeButton}\n          >\n            {option.text}\n          </ButtonWrapper>\n        );\n      });\n    }, [\n      options,\n      valueState,\n      size,\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp,\n      disabled,\n      fullWidth,\n      onClick\n    ]);\n\n    // Effects\n    useEffect(() => {\n      // Update value if changed from props\n      if (value !== prevValue && value !== valueState) {\n        setValueState(value);\n      }\n    }, [value, prevValue, valueState, setValueState]);\n\n    return (\n      <div\n        className={cx(styles.buttonGroup, className, getStyle(styles, camelCase(\"kind-\" + kind)), {\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BUTTON_GROUP, id)}\n        data-vibe={ComponentVibeId.BUTTON_GROUP}\n        ref={mergedRef}\n      >\n        <div\n          role=\"group\"\n          aria-label={groupAriaLabel}\n          className={cx(styles.buttonsContainer, { [styles.fullWidth]: fullWidth })}\n          aria-disabled={disabled}\n        >\n          {Buttons}\n        </div>\n        {selectedOption && selectedOption.subText && (\n          <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n        )}\n      </div>\n    );\n  }\n);\n\ninterface ButtonGroupStaticProps {\n  sizes: typeof SIZES;\n  kinds: typeof ButtonTypeEnum;\n}\n\nexport default withStaticProps<ButtonGroupProps, ButtonGroupStaticProps>(ButtonGroup, {\n  sizes: Button.sizes,\n  kinds: Button.kinds\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","options","_ref$name","name","_ref$disabled","disabled","_ref$value","value","onSelect","_ref$size","size","_ref$kind","kind","_ref$groupAriaLabel","groupAriaLabel","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","_ref$blurOnMouseUp","blurOnMouseUp","id","dataTestId","_ref$fullWidth","fullWidth","inputRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","valueState","setValueState","prevValue","usePrevious","onClick","useCallback","option","isOptionActive","selectedOption","useMemo","find","Buttons","map","index","isSelected","isFirst","isLast","length","isNextOptionActive","React","createElement","ButtonWrapper","key","rightIcon","icon","leftIcon","active","rightFlat","leftFlat","preventClickAnimation","ariaLabel","tooltipContent","cx","styles","button","optionText","_defineProperty","selected","buttonDisabled","startBorder","endBorder","activeButtonClassName","activeButton","text","useEffect","buttonGroup","getStyle","camelCase","getTestId","ComponentDefaultTestId","BUTTON_GROUP","ComponentVibeId","role","buttonsContainer","subText","subTextContainer","sizes","Button","kinds"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={buttonGroup:"buttonGroup_9cd20b0a5a",subTextContainer:"subTextContainer_414902685d",buttonsContainer:"buttonsContainer_61544be304",fullWidth:"fullWidth_312efa6a05",button:"button_4d0be8cf5f",activeButton:"activeButton_354e522c35",disabled:"disabled_bb6d015f4f",buttonDisabled:"buttonDisabled_803e604939",startBorder:"startBorder_6c7ad364e1",endBorder:"endBorder_75c28d92d3",kindTertiary:"kindTertiary_406f3267d0",optionText:"optionText_539c54ee58",selected:"selected_886538370c",wrapper:"wrapper_811d6fc45f"};!function(n){const t="s_id-4b7ca9f3603b_3_85_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_9cd20b0a5a {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_414902685d {\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.buttonsContainer_61544be304 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_61544be304.fullWidth_312efa6a05 {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.activeButton_354e522c35 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.activeButton_354e522c35:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.disabled_bb6d015f4f, .buttonsContainer_61544be304 .button_4d0be8cf5f.buttonDisabled_803e604939 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.startBorder_6c7ad364e1 {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.endBorder_75c28d92d3 {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_61544be304 .button_4d0be8cf5f.fullWidth_312efa6a05 {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_406f3267d0 .buttonsContainer_61544be304 .button_4d0be8cf5f {\n  border-color: transparent;\n}\n.kindTertiary_406f3267d0 .buttonsContainer_61544be304 .button_4d0be8cf5f:first-child {\n  border-color: transparent;\n}\n.optionText_539c54ee58:not(.disabled_bb6d015f4f) {\n  color: var(--primary-text-color);\n}\n.optionText_539c54ee58:not(.disabled_bb6d015f4f).selected_886538370c {\n  color: var(--primary-text-color);\n}\n.wrapper_811d6fc45f.disabled_bb6d015f4f {\n  cursor: not-allowed;\n}\n.fullWidth_312efa6a05 {\n  flex: 1;\n}");export{n as default};
+var n={buttonGroup:"buttonGroup_73aeac1a4d",subTextContainer:"subTextContainer_72a62478ea",buttonsContainer:"buttonsContainer_ca1b81ff11",fullWidth:"fullWidth_be664985fa",button:"button_96bb5ffdad",activeButton:"activeButton_de88e2e77c",disabled:"disabled_a58e54bdde",buttonDisabled:"buttonDisabled_cb97fe8518",startBorder:"startBorder_37f608b27e",endBorder:"endBorder_ec3cebd18f",kindTertiary:"kindTertiary_43b262780c",optionText:"optionText_76d47b7ae0",selected:"selected_be11b2ec84",wrapper:"wrapper_683cc4de84"};!function(n){const t="s_id-4b7ca9f3603b_3_87_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.buttonGroup_73aeac1a4d {\n  display: flex;\n  flex-direction: column;\n}\n.subTextContainer_72a62478ea {\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.buttonsContainer_ca1b81ff11 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.buttonsContainer_ca1b81ff11.fullWidth_be664985fa {\n  justify-content: flex-start;\n  width: 100%;\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad {\n  border-style: solid;\n  border-width: 1px 0;\n  background-color: var(--primary-background-color);\n  border-color: var(--ui-border-color);\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.activeButton_de88e2e77c {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n  border-inline-start-width: 1px;\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.activeButton_de88e2e77c:hover {\n  background-color: var(--primary-selected-color);\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.disabled_a58e54bdde, .buttonsContainer_ca1b81ff11 .button_96bb5ffdad.buttonDisabled_cb97fe8518 {\n  background-color: var(--disabled-background-color);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.startBorder_37f608b27e {\n  border-inline-start-width: 1px;\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.endBorder_ec3cebd18f {\n  border-inline-end-width: 1px;\n}\n.buttonsContainer_ca1b81ff11 .button_96bb5ffdad.fullWidth_be664985fa {\n  width: 100%;\n  display: flex;\n}\n.kindTertiary_43b262780c .buttonsContainer_ca1b81ff11 .button_96bb5ffdad {\n  border-color: transparent;\n}\n.kindTertiary_43b262780c .buttonsContainer_ca1b81ff11 .button_96bb5ffdad:first-child {\n  border-color: transparent;\n}\n.optionText_76d47b7ae0:not(.disabled_a58e54bdde) {\n  color: var(--primary-text-color);\n}\n.optionText_76d47b7ae0:not(.disabled_a58e54bdde).selected_be11b2ec84 {\n  color: var(--primary-text-color);\n}\n.wrapper_683cc4de84.disabled_a58e54bdde {\n  cursor: not-allowed;\n}\n.fullWidth_be664985fa {\n  flex: 1;\n}");export{n as default};
 //# sourceMappingURL=ButtonGroup.module.scss.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n  /**\n   * Class name applied to the checkbox element.\n   */\n  checkboxClassName?: string;\n  /**\n   * Class name applied to the label element.\n   */\n  labelClassName?: string;\n  /**\n   * The label of the checkbox for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * The content displayed next to the checkbox.\n   */\n  label?: React.ReactNode | Array<React.ReactNode>;\n  /**\n   * The ID of an element describing the checkbox.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Callback fired when the checkbox value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, controls the checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * If true, displays an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * If true, the checkbox automatically receives focus.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, the checkbox is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The initial checked state of the checkbox.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The value submitted with the form when checked.\n   */\n  value?: string;\n  /**\n   * The name of the checkbox, used for form submission.\n   */\n  name?: string;\n  /**\n   * The tab order of the checkbox.\n   */\n  tabIndex?: number;\n  /**\n   * If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n   * If using this the id prop is required for it to function correctly.\n   */\n  separateLabel?: boolean;\n}\n\nconst Checkbox = forwardRef(\n  (\n    {\n      className,\n      checkboxClassName,\n      labelClassName,\n      ariaLabel,\n      label,\n      ariaLabelledBy,\n      onChange = NOOP,\n      checked,\n      autoFocus,\n      indeterminate = false,\n      disabled = false,\n      defaultChecked,\n      tabIndex,\n      value = \"\",\n      name = \"\",\n      id,\n      separateLabel = false,\n      \"data-testid\": dataTestId\n    }: CheckBoxProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedInputRef = useMergeRef(ref, inputRef);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n\n    const onMouseUpCallback = useCallback(() => {\n      const input = inputRef.current;\n      if (!input) return;\n\n      window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n          input.blur();\n        });\n      });\n    }, [inputRef]);\n    let overrideDefaultChecked = defaultChecked;\n\n    // If component did not receive default checked and checked props, choose default checked as\n    // default behavior (handle isChecked logic inside input) and set default value\n    if (isNil(overrideDefaultChecked) && isNil(checked)) {\n      overrideDefaultChecked = false;\n    }\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n    }, [inputRef, indeterminate]);\n\n    const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n    const finalAriaLabel = useMemo(() => {\n      if (ariaLabel) return ariaLabel;\n      if (typeof label === \"string\") return label;\n      return \"\";\n    }, [ariaLabel, label]);\n\n    if (separateLabel) {\n      return (\n        <div\n          className={cx(styles.wrapper, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n          data-vibe={ComponentVibeId.CHECKBOX}\n        >\n          <input\n            ref={mergedInputRef}\n            id={id}\n            className={styles.input}\n            value={value}\n            name={name}\n            type=\"checkbox\"\n            autoFocus={autoFocus}\n            onChange={onChange}\n            defaultChecked={overrideDefaultChecked}\n            disabled={disabled}\n            aria-label={finalAriaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={checked}\n            tabIndex={tabIndex}\n          />\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n          <label\n            htmlFor={id}\n            className={cx(styles.checkbox, checkboxClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n            onMouseUp={onMouseUpCallback}\n            onClickCapture={onClickCaptureLabel}\n          >\n            <Icon\n              className={styles.icon}\n              type=\"svg\"\n              icon={indeterminate ? Remove : Check}\n              ignoreFocusStyle\n              ariaHidden={true}\n              size=\"16\"\n            />\n          </label>\n          {label === false ? null : (\n            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n            <label\n              htmlFor={id}\n              className={cx(styles.label, labelClassName)}\n              data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n              onMouseUp={onMouseUpCallback}\n              onClickCapture={onClickCaptureLabel}\n            >\n              <Text element=\"span\" type=\"text2\">\n                {label}\n              </Text>\n            </label>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={cx(styles.wrapper, className)}\n        onMouseUp={onMouseUpCallback}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n        htmlFor={id}\n        onClickCapture={onClickCaptureLabel}\n        data-vibe={ComponentVibeId.CHECKBOX}\n      >\n        <input\n          ref={mergedInputRef}\n          id={id}\n          className={styles.input}\n          value={value}\n          name={name}\n          type=\"checkbox\"\n          autoFocus={autoFocus}\n          onChange={onChange}\n          defaultChecked={overrideDefaultChecked}\n          disabled={disabled}\n          aria-label={finalAriaLabel}\n          aria-labelledby={ariaLabelledBy}\n          checked={checked}\n          tabIndex={tabIndex}\n        />\n        <div\n          className={cx(styles.checkbox, checkboxClassName)}\n          ref={iconContainerRef}\n          data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n        >\n          <Icon\n            className={styles.icon}\n            type=\"svg\"\n            icon={indeterminate ? Remove : Check}\n            ignoreFocusStyle\n            ariaHidden={true}\n            size=\"16\"\n          />\n        </div>\n        {label === false ? null : (\n          <Text\n            element=\"span\"\n            type=\"text2\"\n            className={cx(styles.label, labelClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n          >\n            {label}\n          </Text>\n        )}\n      </label>\n    );\n  }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","_ref$separateLabel","separateLabel","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","iconContainerRef","onMouseUpCallback","useCallback","input","current","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","React","createElement","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","Icon","icon","Remove","Check","ignoreFocusStyle","ariaHidden","size","CHECKBOX_LABEL","Text","element"],"mappings":"urBA6EMA,IAAAA,EAAWC,GACf,SAAAC,EAqBEC,GACE,IApBAC,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,GAAEC,EAAAxB,EACFyB,cAAAA,OAAgB,IAAHD,GAAQA,EACNE,EAAU1B,EAAzB,eAII2B,EAAWC,EAAyB,MACpCC,EAAiBC,EAAY7B,EAAK0B,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,EAAyBtB,EAIzBuB,EAAMD,IAA2BC,EAAM7B,KACzC4B,GAAyB,GAG3BE,GAAU,WACJd,EAASQ,UACXR,EAASQ,QAAQrB,cAAgBA,EAErC,GAAG,CAACa,EAAUb,IAEd,IAAwB4B,EAAwBC,EAA4B,CAAEhB,SAAAA,IAAtEiB,eAEFC,EAAiBC,GAAQ,WAC7B,OAAIzC,IACiB,iBAAVC,EAA2BA,EAC/B,GACT,GAAG,CAACD,EAAWC,IAEf,OAAImB,EAEAsB,EACEC,cAAA,MAAA,CAAA9C,UAAW+C,EAAGC,EAAOC,QAASjD,GAAU,cAC3BwB,GAAc0B,EAAUC,EAAuBC,SAAU/B,GAAG,YAC9DgC,EAAgBD,UAE3BP,EACEC,cAAA,QAAA,CAAA/C,IAAK4B,EACLN,GAAIA,EACJrB,UAAWgD,EAAOhB,MAClBd,MAAOA,EACPE,KAAMA,EACNkC,KAAK,WACL5C,UAAWA,EACXH,SAAUA,EACVQ,eAAgBsB,EAChBvB,SAAUA,EACE,aAAA6B,EACK,kBAAAtC,EACjBI,QAASA,EACTO,SAAUA,IAGZ6B,EAAAC,cAAA,QAAA,CACES,QAASlC,EACTrB,UAAW+C,EAAGC,EAAOQ,SAAUvD,GAAkB,cACpCiD,EAAUC,EAAuBM,kBAAmBpC,GACjEqC,UAAW5B,EACXY,eAAgBF,GAEhBK,EAAAC,cAACa,EAAI,CACH3D,UAAWgD,EAAOY,KAClBN,KAAK,MACLM,KAAMhD,EAAgBiD,EAASC,EAC/BC,kBAAgB,EAChBC,YAAY,EACZC,KAAK,SAGE,IAAV7D,EAAkB,KAEjByC,EAAAC,cAAA,QAAA,CACES,QAASlC,EACTrB,UAAW+C,EAAGC,EAAO5C,MAAOF,GAAe,cAC9BgD,EAAUC,EAAuBe,eAAgB7C,GAC9DqC,UAAW5B,EACXY,eAAgBF,GAEhBK,EAAAC,cAACqB,EAAK,CAAAC,QAAQ,OAAOd,KAAK,SACvBlD,KAUXyC,EAAAC,cAAA,QAAA,CACE9C,UAAW+C,EAAGC,EAAOC,QAASjD,GAC9B0D,UAAW5B,EAAiB,cACfN,GAAc0B,EAAUC,EAAuBC,SAAU/B,GACtEkC,QAASlC,EACTqB,eAAgBF,EACL,YAAAa,EAAgBD,UAE3BP,EACEC,cAAA,QAAA,CAAA/C,IAAK4B,EACLN,GAAIA,EACJrB,UAAWgD,EAAOhB,MAClBd,MAAOA,EACPE,KAAMA,EACNkC,KAAK,WACL5C,UAAWA,EACXH,SAAUA,EACVQ,eAAgBsB,EAChBvB,SAAUA,EACE,aAAA6B,EACK,kBAAAtC,EACjBI,QAASA,EACTO,SAAUA,IAEZ6B,EACEC,cAAA,MAAA,CAAA9C,UAAW+C,EAAGC,EAAOQ,SAAUvD,GAC/BF,IAAK8B,gBACQqB,EAAUC,EAAuBM,kBAAmBpC,IAEjEwB,EAAAC,cAACa,EAAI,CACH3D,UAAWgD,EAAOY,KAClBN,KAAK,MACLM,KAAMhD,EAAgBiD,EAASC,EAC/BC,kBAAgB,EAChBC,YAAY,EACZC,KAAK,SAGE,IAAV7D,EAAkB,KACjByC,gBAACsB,EAAI,CACHC,QAAQ,OACRd,KAAK,QACLtD,UAAW+C,EAAGC,EAAO5C,MAAOF,GAAe,cAC9BgD,EAAUC,EAAuBe,eAAgB7C,IAE7DjB,GAKX"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n  /**\n   * Class name applied to the checkbox element.\n   */\n  checkboxClassName?: string;\n  /**\n   * Class name applied to the label element.\n   */\n  labelClassName?: string;\n  /**\n   * The label of the checkbox for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * The content displayed next to the checkbox.\n   */\n  label?: React.ReactNode | Array<React.ReactNode>;\n  /**\n   * The ID of an element describing the checkbox.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Callback fired when the checkbox value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, controls the checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * If true, displays an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * If true, the checkbox automatically receives focus.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, the checkbox is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The initial checked state of the checkbox.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The value submitted with the form when checked.\n   */\n  value?: string;\n  /**\n   * The name of the checkbox, used for form submission.\n   */\n  name?: string;\n  /**\n   * The tab order of the checkbox.\n   */\n  tabIndex?: number;\n  /**\n   * If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n   * If using this the id prop is required for it to function correctly.\n   */\n  separateLabel?: boolean;\n}\n\nconst Checkbox = forwardRef(\n  (\n    {\n      className,\n      checkboxClassName,\n      labelClassName,\n      ariaLabel,\n      label,\n      ariaLabelledBy,\n      onChange = NOOP,\n      checked,\n      autoFocus,\n      indeterminate = false,\n      disabled = false,\n      defaultChecked,\n      tabIndex,\n      value = \"\",\n      name = \"\",\n      id,\n      separateLabel = false,\n      \"data-testid\": dataTestId\n    }: CheckBoxProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedInputRef = useMergeRef(ref, inputRef);\n\n    const onMouseUpCallback = useCallback((e: React.MouseEvent<HTMLElement>) => {\n      const target = e.currentTarget;\n      window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n          target.blur();\n        });\n      });\n    }, []);\n\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    const onKeyDownCallback = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (e.key === \" \") {\n          e.preventDefault();\n          inputRef.current?.click();\n        }\n      },\n      [inputRef]\n    );\n\n    const wrapperTabIndex = disabled ? undefined : tabIndex ?? 0;\n\n    if (separateLabel) {\n      return (\n        <div\n          className={cx(styles.wrapper, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n          data-vibe={ComponentVibeId.CHECKBOX}\n        >\n          <input\n            ref={mergedInputRef}\n            id={id}\n            className={styles.input}\n            value={value}\n            name={name}\n            type=\"checkbox\"\n            autoFocus={autoFocus}\n            onChange={onChange}\n            defaultChecked={overrideDefaultChecked}\n            disabled={disabled}\n            aria-label={finalAriaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={checked}\n            tabIndex={-1}\n          />\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n          <label\n            htmlFor={id}\n            className={cx(styles.checkbox, checkboxClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n            tabIndex={wrapperTabIndex}\n            onMouseUp={onMouseUpCallback}\n            onKeyDown={onKeyDownCallback}\n            onClickCapture={onClickCaptureLabel}\n          >\n            <Icon\n              className={styles.icon}\n              iconType=\"svg\"\n              icon={indeterminate ? Remove : Check}\n              ignoreFocusStyle\n              ariaHidden={true}\n              iconSize=\"16\"\n            />\n          </label>\n          {label === false ? null : (\n            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n            <label\n              htmlFor={id}\n              className={cx(styles.label, labelClassName)}\n              data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n              onMouseUp={onMouseUpCallback}\n              onClickCapture={onClickCaptureLabel}\n            >\n              <Text element=\"span\" type=\"text2\">\n                {label}\n              </Text>\n            </label>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={cx(styles.wrapper, className)}\n        tabIndex={wrapperTabIndex}\n        onMouseUp={onMouseUpCallback}\n        onKeyDown={onKeyDownCallback}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n        htmlFor={id}\n        onClickCapture={onClickCaptureLabel}\n        data-vibe={ComponentVibeId.CHECKBOX}\n      >\n        <input\n          ref={mergedInputRef}\n          id={id}\n          className={styles.input}\n          value={value}\n          name={name}\n          type=\"checkbox\"\n          autoFocus={autoFocus}\n          onChange={onChange}\n          defaultChecked={overrideDefaultChecked}\n          disabled={disabled}\n          aria-label={finalAriaLabel}\n          aria-labelledby={ariaLabelledBy}\n          checked={checked}\n          tabIndex={-1}\n        />\n        <div\n          className={cx(styles.checkbox, checkboxClassName)}\n          data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n        >\n          <Icon\n            className={styles.icon}\n            iconType=\"svg\"\n            icon={indeterminate ? Remove : Check}\n            ignoreFocusStyle\n            ariaHidden={true}\n            iconSize=\"16\"\n          />\n        </div>\n        {label === false ? null : (\n          <Text\n            element=\"span\"\n            type=\"text2\"\n            className={cx(styles.label, labelClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n          >\n            {label}\n          </Text>\n        )}\n      </label>\n    );\n  }\n);\n\nexport default Checkbox;\n"],"names":["Checkbox","forwardRef","_ref","ref","className","checkboxClassName","labelClassName","ariaLabel","label","ariaLabelledBy","_ref$onChange","onChange","NOOP","checked","autoFocus","_ref$indeterminate","indeterminate","_ref$disabled","disabled","defaultChecked","tabIndex","_ref$value","value","_ref$name","name","id","_ref$separateLabel","separateLabel","dataTestId","inputRef","useRef","mergedInputRef","useMergeRef","onMouseUpCallback","useCallback","e","target","currentTarget","window","requestAnimationFrame","blur","overrideDefaultChecked","isNil","useEffect","current","onClickCaptureLabel","useSupportFirefoxLabelClick","onClickCapture","finalAriaLabel","useMemo","onKeyDownCallback","key","preventDefault","_a","click","wrapperTabIndex","undefined","React","createElement","cx","styles","wrapper","getTestId","ComponentDefaultTestId","CHECKBOX","ComponentVibeId","input","type","htmlFor","checkbox","CHECKBOX_CHECKBOX","onMouseUp","onKeyDown","Icon","icon","iconType","Remove","Check","ignoreFocusStyle","ariaHidden","iconSize","CHECKBOX_LABEL","Text","element"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_6f253b7f27",checkbox:"checkbox_e4b711b6e8",icon:"icon_fd1a82acd0",label:"label_d498d1de30",input:"input_a3b6882900",checkboxGrowAnimation:"checkboxGrowAnimation_dee51398da"};!function(e){const n="s_id-3c767214051a_3_85_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_6f253b7f27 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n.checkbox_e4b711b6e8 {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n.checkbox_e4b711b6e8:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n.checkbox_e4b711b6e8:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_fd1a82acd0 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_d498d1de30 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_a3b6882900 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_a3b6882900:focus + .checkbox_e4b711b6e8 {\n  border-color: var(--secondary-text-color);\n}\n.input_a3b6882900:focus:checked + .checkbox_e4b711b6e8 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a3b6882900:focus-visible + .checkbox_e4b711b6e8 {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n.input_a3b6882900:checked:focus + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate:focus + .checkbox_e4b711b6e8:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8 {\n  animation: checkboxGrowAnimation_dee51398da var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:hover,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:hover:after,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n.input_a3b6882900:checked + .checkbox_e4b711b6e8 > .icon_fd1a82acd0,\n.input_a3b6882900:indeterminate + .checkbox_e4b711b6e8 > .icon_fd1a82acd0 {\n  visibility: visible;\n}\n.input_a3b6882900:checked:disabled + .checkbox_e4b711b6e8:after,\n.input_a3b6882900:indeterminate:disabled + .checkbox_e4b711b6e8:after {\n  background-color: var(--disabled-background-color);\n}\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8 .icon_fd1a82acd0,\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8:hover .icon_fd1a82acd0 {\n  color: var(--disabled-text-color);\n}\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8,\n.input_a3b6882900:disabled + .checkbox_e4b711b6e8:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_a3b6882900:disabled ~ .label_d498d1de30 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_dee51398da {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{e as default};
+var e={wrapper:"wrapper_374faa118c",checkbox:"checkbox_62fccc334e",icon:"icon_0800846d31",label:"label_7515b8ec28",input:"input_f612f9a36e",checkboxGrowAnimation:"checkboxGrowAnimation_9b509a8a10"};!function(e){const n="s_id-2badabf1957a_3_87_0";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,c.firstChild?c.insertBefore(o,c.firstChild):c.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('@charset "UTF-8";\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper_374faa118c {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n  outline: none; /* focus ring is rendered on .checkbox child, not the wrapper */\n}\n.checkbox_62fccc334e {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n.checkbox_62fccc334e:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n.checkbox_62fccc334e:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon_0800846d31 {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label_7515b8ec28 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input_f612f9a36e {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n.input_f612f9a36e:focus + .checkbox_62fccc334e {\n  border-color: var(--secondary-text-color);\n}\n.input_f612f9a36e:focus:checked + .checkbox_62fccc334e {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_f612f9a36e:focus-visible + .checkbox_62fccc334e {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.input_f612f9a36e:checked:focus + .checkbox_62fccc334e:after,\n.input_f612f9a36e:indeterminate:focus + .checkbox_62fccc334e:after {\n  background-color: var(--primary-hover-color);\n}\n/* Tab navigation — non-separate mode: the wrapper <label> is the Tab target */\n.wrapper_374faa118c:focus-visible > .checkbox_62fccc334e {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_374faa118c:focus-visible > .input_f612f9a36e:checked ~ .checkbox_62fccc334e,\n.wrapper_374faa118c:focus-visible > .input_f612f9a36e:indeterminate ~ .checkbox_62fccc334e {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n/* Tab navigation — separate mode: the .checkbox <label> is the Tab target */\n.checkbox_62fccc334e:focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 2px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e:focus-visible,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e:focus-visible {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e {\n  animation: checkboxGrowAnimation_9b509a8a10 var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e:hover,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e:hover:after,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e:after,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n.input_f612f9a36e:checked + .checkbox_62fccc334e > .icon_0800846d31,\n.input_f612f9a36e:indeterminate + .checkbox_62fccc334e > .icon_0800846d31 {\n  visibility: visible;\n}\n.input_f612f9a36e:checked:disabled + .checkbox_62fccc334e:after,\n.input_f612f9a36e:indeterminate:disabled + .checkbox_62fccc334e:after {\n  background-color: var(--disabled-background-color);\n}\n.input_f612f9a36e:disabled + .checkbox_62fccc334e .icon_0800846d31,\n.input_f612f9a36e:disabled + .checkbox_62fccc334e:hover .icon_0800846d31 {\n  color: var(--disabled-text-color);\n}\n.input_f612f9a36e:disabled + .checkbox_62fccc334e,\n.input_f612f9a36e:disabled + .checkbox_62fccc334e:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input_f612f9a36e:disabled ~ .label_7515b8ec28 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation_9b509a8a10 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{e as default};
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/src/components/Chips/Chips.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i,useRef as a,useState as r,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../../hooks/useMergeRef.js";import{getCSSVar as d}from"../../services/themes.js";import{getElementColor as m}from"../../types/Colors.js";import u from"../Avatar/Avatar.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import f from"../../hooks/useSetFocus/index.js";import b from"./Chips.module.scss.js";import{ComponentVibeId as g}from"../../tests/constants.js";import y from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import h from"../../../components/icon/dist/Icon/Icon.js";import j from"../../../components/typography/dist/Text/Text.js";import k from"../../../components/icon-button/dist/IconButton/IconButton.js";import C from"../../../icons/dist/react/CloseSmall.js";var x=i((function(i,x){var N=i.className,E=i.avatarClassName,S=i.iconClassName,A=i.id,M=i.label,I=void 0===M?"":M,P=i.leftIcon,w=void 0===P?null:P,B=i.rightIcon,T=void 0===B?null:B,z=i.leftAvatar,H=void 0===z?null:z,L=i.rightAvatar,O=void 0===L?null:L,R=i.disabled,D=void 0!==R&&R,F=i.readOnly,_=void 0!==F&&F,U=i.allowTextSelection,q=void 0!==U&&U,G=i.color,J=void 0===G?"primary":G,K=i.iconSize,Q=void 0===K?18:K,V=i.onDelete,W=void 0===V?function(e,o){}:V,X=i.onMouseDown,Y=i.onClick,Z=i.noAnimation,$=void 0===Z||Z,ee=i.ariaLabel,oe=i.ariaHasPopup,te=void 0!==oe&&oe,ie=i.disableClickableBehavior,ae=void 0!==ie&&ie,re=i.leftAvatarType,se=void 0===re?"img":re,ne=i.rightAvatarType,le=void 0===ne?"img":ne,ce=i.showBorder,de=void 0!==ce&&ce,me=i.leftRenderer,ue=i.rightRenderer,pe=i.closeButtonAriaLabel,ve=void 0===pe?"Remove":pe,fe=i.noMargin,be=void 0!==fe&&fe,ge=i["data-testid"]||p(v.CHIP,A),ye=!(!Y&&!X||ae),he=!_&&!D,je=ee||"string"==typeof I&&I||"",ke=a(null),Ce=a(null),xe=r(!1),Ne=e(xe,2),Ee=Ne[0],Se=Ne[1],Ae=s((function(){return Se(!0)}),[]),Me=s((function(){return Se(!1)}),[]),Ie=f({ref:Ce}).isFocused,Pe=c(x,Ce),we=l(b.chips,N,o(o(o(o(o({},b.disabled,D),b.noAnimation,$),b.withUserSelect,q),b.border,de),b.noMargin,be)),Be=l(b.clickable,we,o(o({},b.disabled,D),b.disableTextSelection,!q)),Te=n((function(){return{backgroundColor:D?d("disabled-background-color"):ye&&(Ee||Ie)?m(J,!0,!0):m(J,!0)}}),[D,ye,Ee,Ie,J]),ze=s((function(e){e.stopPropagation(),W&&W(A,e)}),[A,W]),He=s((function(e){void 0!==Y&&e.target!==ke.current&&(e.preventDefault(),Y(e))}),[Y]),Le=y({onClick:He,onMouseDown:X,disabled:D,id:A,"data-testid":ge,ariaLabel:je,ariaHidden:!1,ariaHasPopup:te,ariaExpanded:!1},Pe),Oe=ye?Object.assign(Object.assign({},Le),{ref:Pe,className:Be,style:Te,onMouseEnter:Ae,onMouseLeave:Me}):{className:we,"aria-label":je,style:Te,ref:Pe,onClick:He,onMouseDown:X,id:A,"data-testid":ge,onMouseEnter:Ae,onMouseLeave:Me},Re="text"===se?{text:H}:{src:H},De="text"===se?{text:O}:{src:O};return t.createElement("div",Object.assign({},Oe,{"data-vibe":g.CHIPS}),H?t.createElement(u,Object.assign({withoutBorder:!0,className:l(b.avatar,b.left,E),customSize:18,type:se,key:A},Re)):null,w?t.createElement(h,{className:l(b.icon,b.left,S),type:"font",icon:w,size:Q,ignoreFocusStyle:!0}):null,me&&t.createElement("div",{className:l(b.customRenderer,b.left)},me),t.createElement(j,{type:"text2",className:b.label},I),T?t.createElement(h,{className:l(b.icon,b.right,S),type:"font",icon:T,size:Q,ignoreFocusStyle:!0}):null,O?t.createElement(u,Object.assign({withoutBorder:!0,className:l(b.avatar,b.right,E),customSize:18,type:le,key:A},De)):null,ue&&t.createElement("div",{className:l(b.customRenderer,b.right)},ue),he&&t.createElement(k,{size:"xxs",color:"on-primary-color",className:l(b.icon,b.close),ariaLabel:ve,hideTooltip:!0,icon:C,onClick:ze,"data-testid":"".concat(ge,"-close"),ref:ke}))}));export{x as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useRef as i,useState as r,useCallback as s,useMemo as n}from"react";import l from"classnames";import c from"../../hooks/useMergeRef.js";import{getCSSVar as m}from"../../services/themes.js";import{ElementAllowedColor as d}from"../../utils/colors-vars-map.js";import{getElementColor as u}from"../../types/Colors.js";import p from"../Avatar/Avatar.js";import{getTestId as v,ComponentDefaultTestId as f}from"../../tests/testIds.js";import{AvatarType as b}from"../Avatar/AvatarConstants.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import y from"../../hooks/useSetFocus/index.js";import j from"./Chips.module.scss.js";import{ComponentVibeId as h}from"../../tests/constants.js";import C from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import k from"../../../components/icon/dist/Icon/Icon.js";import x from"../../../components/typography/dist/Text/Text.js";import S from"../../../components/icon-button/dist/IconButton/IconButton.js";import N from"../../../icons/dist/react/CloseSmall.js";var A=g(a((function(a,d){var b=a.className,g=a.avatarClassName,A=a.iconClassName,E=a.id,T=a.label,M=void 0===T?"":T,P=a.leftIcon,w=void 0===P?null:P,I=a.rightIcon,B=void 0===I?null:I,z=a.leftAvatar,H=void 0===z?null:z,L=a.rightAvatar,O=void 0===L?null:L,R=a.disabled,D=void 0!==R&&R,F=a.readOnly,_=void 0!==F&&F,U=a.allowTextSelection,q=void 0!==U&&U,G=a.color,J=void 0===G?"primary":G,K=a.iconSize,Q=void 0===K?18:K,V=a.onDelete,W=void 0===V?function(e,o){}:V,X=a.onMouseDown,Y=a.onClick,Z=a.noAnimation,$=void 0===Z||Z,ee=a.ariaLabel,oe=a.ariaHasPopup,te=void 0!==oe&&oe,ae=a.disableClickableBehavior,ie=void 0!==ae&&ae,re=a.leftAvatarType,se=void 0===re?"img":re,ne=a.rightAvatarType,le=void 0===ne?"img":ne,ce=a.showBorder,me=void 0!==ce&&ce,de=a.leftRenderer,ue=a.rightRenderer,pe=a.closeButtonAriaLabel,ve=void 0===pe?"Remove":pe,fe=a.noMargin,be=void 0!==fe&&fe,ge=a["data-testid"]||v(f.CHIP,E),ye=!(!Y&&!X||ie),je=!_&&!D,he=ee||"string"==typeof M&&M||"",Ce=i(null),ke=i(null),xe=r(!1),Se=e(xe,2),Ne=Se[0],Ae=Se[1],Ee=s((function(){return Ae(!0)}),[]),Te=s((function(){return Ae(!1)}),[]),Me=y({ref:ke}).isFocused,Pe=c(d,ke),we=l(j.chips,b,o(o(o(o(o({},j.disabled,D),j.noAnimation,$),j.withUserSelect,q),j.border,me),j.noMargin,be)),Ie=l(j.clickable,we,o(o({},j.disabled,D),j.disableTextSelection,!q)),Be=n((function(){return{backgroundColor:D?m("disabled-background-color"):ye&&(Ne||Me)?u(J,!0,!0):u(J,!0)}}),[D,ye,Ne,Me,J]),ze=s((function(e){e.stopPropagation(),W&&W(E,e)}),[E,W]),He=s((function(e){void 0!==Y&&e.target!==Ce.current&&(e.preventDefault(),Y(e))}),[Y]),Le=C({onClick:He,onMouseDown:X,disabled:D,id:E,"data-testid":ge,ariaLabel:he,ariaHidden:!1,ariaHasPopup:te,ariaExpanded:!1},Pe),Oe=ye?Object.assign(Object.assign({},Le),{ref:Pe,className:Ie,style:Be,onMouseEnter:Ee,onMouseLeave:Te}):{className:we,"aria-label":he,style:Be,ref:Pe,onClick:He,onMouseDown:X,id:E,"data-testid":ge,onMouseEnter:Ee,onMouseLeave:Te},Re="text"===se?{text:H}:{src:H},De="text"===se?{text:O}:{src:O};return t.createElement("div",Object.assign({},Oe,{"data-vibe":h.CHIPS}),H?t.createElement(p,Object.assign({withoutBorder:!0,className:l(j.avatar,j.left,g),customSize:18,type:se,key:E},Re)):null,w?t.createElement(k,{className:l(j.icon,j.left,A),iconType:"font",icon:w,iconSize:Q,ignoreFocusStyle:!0}):null,de&&t.createElement("div",{className:l(j.customRenderer,j.left)},de),t.createElement(x,{type:"text2",className:j.label},M),B?t.createElement(k,{className:l(j.icon,j.right,A),iconType:"font",icon:B,iconSize:Q,ignoreFocusStyle:!0}):null,O?t.createElement(p,Object.assign({withoutBorder:!0,className:l(j.avatar,j.right,g),customSize:18,type:le,key:E},De)):null,ue&&t.createElement("div",{className:l(j.customRenderer,j.right)},ue),je&&t.createElement(S,{size:"xxs",color:"on-primary-color",className:l(j.icon,j.close),ariaLabel:ve,hideTooltip:!0,icon:N,onClick:ze,"data-testid":"".concat(ge,"-close"),ref:Ce}))})),{colors:d,avatarTypes:b});export{A as default};
 //# sourceMappingURL=Chips.js.map

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

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

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

@@ -1,2 +1,2 @@
-var e={chips:"chips_49012b52b9","chips-pop-in-emphasized":"chips-pop-in-emphasized_8eaec033bb",border:"border_156ed92484",withUserSelect:"withUserSelect_37f07678a7",noMargin:"noMargin_89b03d6bf4",label:"label_efa4fc98ff",noAnimation:"noAnimation_f07b2e88cb",icon:"icon_5e10ab53ec",avatar:"avatar_b082316705",customRenderer:"customRenderer_deb16a7367",left:"left_6616c5c628",right:"right_6dc2ab8567",close:"close_9871361bd5",disabled:"disabled_c723c6992b",defaultCursor:"defaultCursor_c723c6992b",clickable:"clickable_4fafe720c9","focus-visible":"focus-visible_17d22ae837",disableTextSelection:"disableTextSelection_c481f6542f"};!function(e){const n="s_id-f5374e1ade65_3_85_1";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_49012b52b9 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_8eaec033bb var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_49012b52b9.border_156ed92484 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_49012b52b9.withUserSelect_37f07678a7 {\n  user-select: text;\n  cursor: text;\n}\n.chips_49012b52b9.noMargin_89b03d6bf4 {\n  margin: 0;\n}\n.chips_49012b52b9 .label_efa4fc98ff {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_49012b52b9.noAnimation_f07b2e88cb {\n  animation: none;\n}\n.chips_49012b52b9 .icon_5e10ab53ec,\n.chips_49012b52b9 .avatar_b082316705,\n.chips_49012b52b9 .customRenderer_deb16a7367 {\n  min-width: 18px;\n}\n.chips_49012b52b9 .icon_5e10ab53ec.left_6616c5c628,\n.chips_49012b52b9 .avatar_b082316705.left_6616c5c628,\n.chips_49012b52b9 .customRenderer_deb16a7367.left_6616c5c628 {\n  margin-right: var(--spacing-xs);\n}\n.chips_49012b52b9 .icon_5e10ab53ec.right_6dc2ab8567,\n.chips_49012b52b9 .avatar_b082316705.right_6dc2ab8567,\n.chips_49012b52b9 .customRenderer_deb16a7367.right_6dc2ab8567 {\n  margin-left: var(--spacing-xs);\n}\n.chips_49012b52b9 .icon_5e10ab53ec.close_9871361bd5,\n.chips_49012b52b9 .avatar_b082316705.close_9871361bd5,\n.chips_49012b52b9 .customRenderer_deb16a7367.close_9871361bd5 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_49012b52b9.disabled_c723c6992b .icon_5e10ab53ec {\n  color: var(--disabled-text-color);\n}\n.chips_49012b52b9.disabled_c723c6992b .label_efa4fc98ff {\n  color: var(--disabled-text-color);\n}\n.chips_49012b52b9.defaultCursor_c723c6992b {\n  cursor: default;\n}\n.chips_49012b52b9.clickable_4fafe720c9 {\n  cursor: pointer;\n}\n.chips_49012b52b9.clickable_4fafe720c9:focus-visible, .chips_49012b52b9.clickable_4fafe720c9.focus-visible_17d22ae837 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_49012b52b9.clickable_4fafe720c9:focus:not(.focus-visible_17d22ae837) {\n  outline: none;\n}\n.chips_49012b52b9.clickable_4fafe720c9.disabled_c723c6992b {\n  cursor: default;\n}\n.chips_49012b52b9.clickable_4fafe720c9.disableTextSelection_c481f6542f {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_8eaec033bb {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
+var e={chips:"chips_f4ebfdd7b9","chips-pop-in-emphasized":"chips-pop-in-emphasized_c114c57f6e",border:"border_18b74344b4",withUserSelect:"withUserSelect_91b53ae726",noMargin:"noMargin_f4dceaa462",label:"label_4946efb7c4",noAnimation:"noAnimation_d64537b80c",icon:"icon_2c53fa6b69",avatar:"avatar_00a3f1524b",customRenderer:"customRenderer_ca835b54d0",left:"left_d2b5495695",right:"right_57d06733a2",close:"close_32f013aa22",disabled:"disabled_3d9539e989",defaultCursor:"defaultCursor_3d9539e989",clickable:"clickable_9dc084e6c7","focus-visible":"focus-visible_62613535fc",disableTextSelection:"disableTextSelection_723eefe726"};!function(e){const n="s_id-f5374e1ade65_3_87_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_f4ebfdd7b9 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_c114c57f6e var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_f4ebfdd7b9.border_18b74344b4 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_f4ebfdd7b9.withUserSelect_91b53ae726 {\n  user-select: text;\n  cursor: text;\n}\n.chips_f4ebfdd7b9.noMargin_f4dceaa462 {\n  margin: 0;\n}\n.chips_f4ebfdd7b9 .label_4946efb7c4 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_f4ebfdd7b9.noAnimation_d64537b80c {\n  animation: none;\n}\n.chips_f4ebfdd7b9 .icon_2c53fa6b69,\n.chips_f4ebfdd7b9 .avatar_00a3f1524b,\n.chips_f4ebfdd7b9 .customRenderer_ca835b54d0 {\n  min-width: 18px;\n}\n.chips_f4ebfdd7b9 .icon_2c53fa6b69.left_d2b5495695,\n.chips_f4ebfdd7b9 .avatar_00a3f1524b.left_d2b5495695,\n.chips_f4ebfdd7b9 .customRenderer_ca835b54d0.left_d2b5495695 {\n  margin-right: var(--spacing-xs);\n}\n.chips_f4ebfdd7b9 .icon_2c53fa6b69.right_57d06733a2,\n.chips_f4ebfdd7b9 .avatar_00a3f1524b.right_57d06733a2,\n.chips_f4ebfdd7b9 .customRenderer_ca835b54d0.right_57d06733a2 {\n  margin-left: var(--spacing-xs);\n}\n.chips_f4ebfdd7b9 .icon_2c53fa6b69.close_32f013aa22,\n.chips_f4ebfdd7b9 .avatar_00a3f1524b.close_32f013aa22,\n.chips_f4ebfdd7b9 .customRenderer_ca835b54d0.close_32f013aa22 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_f4ebfdd7b9.disabled_3d9539e989 .icon_2c53fa6b69 {\n  color: var(--disabled-text-color);\n}\n.chips_f4ebfdd7b9.disabled_3d9539e989 .label_4946efb7c4 {\n  color: var(--disabled-text-color);\n}\n.chips_f4ebfdd7b9.defaultCursor_3d9539e989 {\n  cursor: default;\n}\n.chips_f4ebfdd7b9.clickable_9dc084e6c7 {\n  cursor: pointer;\n}\n.chips_f4ebfdd7b9.clickable_9dc084e6c7:focus-visible, .chips_f4ebfdd7b9.clickable_9dc084e6c7.focus-visible_62613535fc {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_f4ebfdd7b9.clickable_9dc084e6c7:focus:not(.focus-visible_62613535fc) {\n  outline: none;\n}\n.chips_f4ebfdd7b9.clickable_9dc084e6c7.disabled_3d9539e989 {\n  cursor: default;\n}\n.chips_f4ebfdd7b9.clickable_9dc084e6c7.disableTextSelection_723eefe726 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_c114c57f6e {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
 //# sourceMappingURL=Chips.module.scss.js.map

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -1,2 +1,2 @@
-import o from"classnames";import e,{forwardRef as r,useRef as t,useCallback as i}from"react";import s from"../../hooks/useMergeRef.js";import l from"./components/ColorPickerContent/ColorPickerContent.js";import{DEFAULT_NUMBER_OF_COLORS_IN_LINE as n}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as c}from"./services/ColorPickerStyleService.js";import{NOOP as a}from"../../utils/function-utils.js";import{getTestId as d,ComponentDefaultTestId as m}from"../../tests/testIds.js";import C from"./ColorPicker.module.scss.js";import{ComponentVibeId as u}from"../../tests/constants.js";import f from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import p from"../../../icons/dist/react/NoColor.js";var v=r((function(r,v){var I=r.className,k=r.onSave,h=void 0===k?a:k,L=r.value,P=void 0===L?"":L,S=r.noColorText,g=r.colorStyle,j=void 0===g?"regular":g,R=r.ColorIndicatorIcon,O=r.SelectedIndicatorIcon,b=r.shouldRenderIndicatorWithoutBackground,M=r.NoColorIcon,N=void 0===M?p:M,y=r.isBlackListMode,w=void 0===y||y,D=r.colorsList,B=void 0===D?[]:D,E=r.isMultiselect,T=r.colorSize,x=void 0===T?"medium":T,z=r.numberOfColorsInLine,K=void 0===z?n:z,U=r.focusOnMount,W=r.colorShape,_=void 0===W?"square":W,q=r.forceUseRawColorList,V=r.showColorNameTooltip,A=r.id,F=r["data-testid"],G=t(null),H=s(v,G),J=i(h,[h]),Q=c(x,K);return e.createElement(f,{ref:H,className:o(C.colorPicker,C.colorPickerDialogContent,I),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":u.COLOR_PICKER},e.createElement(l,{onValueChange:J,value:P,noColorText:S,shouldRenderIndicatorWithoutBackground:R&&b,colorStyle:j,ColorIndicatorIcon:R,SelectedIndicatorIcon:O,NoColorIcon:N,colorsList:B,isBlackListMode:w,isMultiselect:E,colorSize:x,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||d(m.COLOR_PICKER,A)}))}));export{v as default};
+import o from"classnames";import r,{forwardRef as e,useRef as t,useCallback as i}from"react";import{BaseSizes as s}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import{ColorStyle as c}from"../../utils/colors-vars-map.js";import n from"./components/ColorPickerContent/ColorPickerContent.js";import{ColorShapes as a,DEFAULT_NUMBER_OF_COLORS_IN_LINE as m}from"./ColorPickerConstants.js";import{calculateColorPickerDialogWidth as d}from"./services/ColorPickerStyleService.js";import{withStaticProps as C}from"../../types/withStaticProps.js";import{NOOP as u}from"../../utils/function-utils.js";import{getTestId as f,ComponentDefaultTestId as p}from"../../tests/testIds.js";import v from"./ColorPicker.module.scss.js";import{ComponentVibeId as I}from"../../tests/constants.js";import S from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import k from"../../../icons/dist/react/NoColor.js";var h=C(e((function(e,s){var c=e.className,a=e.onSave,C=void 0===a?u:a,h=e.value,j=void 0===h?"":h,P=e.noColorText,L=e.colorStyle,g=void 0===L?"regular":L,R=e.ColorIndicatorIcon,y=e.SelectedIndicatorIcon,O=e.shouldRenderIndicatorWithoutBackground,b=e.NoColorIcon,M=void 0===b?k:b,N=e.isBlackListMode,w=void 0===N||N,z=e.colorsList,D=void 0===z?[]:z,B=e.isMultiselect,E=e.colorSize,T=void 0===E?"medium":E,x=e.numberOfColorsInLine,K=void 0===x?m:x,U=e.focusOnMount,W=e.colorShape,_=void 0===W?"square":W,q=e.forceUseRawColorList,V=e.showColorNameTooltip,A=e.id,F=e["data-testid"],G=t(null),H=l(s,G),J=i(C,[C]),Q=d(T,K);return r.createElement(S,{ref:H,className:o(v.colorPicker,v.colorPickerDialogContent,c),ariaLabelledby:"Color Picker Dialog",ariaDescribedby:"Pick color",style:{width:Q},"data-vibe":I.COLOR_PICKER},r.createElement(n,{onValueChange:J,value:j,noColorText:P,shouldRenderIndicatorWithoutBackground:R&&O,colorStyle:g,ColorIndicatorIcon:R,SelectedIndicatorIcon:y,NoColorIcon:M,colorsList:D,isBlackListMode:w,isMultiselect:B,colorSize:T,numberOfColorsInLine:K,focusOnMount:U,colorShape:_,forceUseRawColorList:q,showColorNameTooltip:V,id:A,"data-testid":F||f(p.COLOR_PICKER,A)}))})),{sizes:s,colorStyles:c,colorSizes:s,colorShapes:a});export{h as default};
 //# sourceMappingURL=ColorPicker.js.map

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

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

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

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

package/dist/src/components/ColorPicker/ColorPickerConstants.js

@@ -1,2 +1,2 @@
-import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as e}from"../../constants/sizes.js";var o=5,s=r(r(r({},e.SMALL,24),e.MEDIUM,32),e.LARGE,40),t=8,i=24;export{t as COLOR_PADDING,s as COLOR_SIZES,o as DEFAULT_NUMBER_OF_COLORS_IN_LINE,i as DIALOG_WIDTH_PADDING};
+import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as e}from"../../constants/sizes.js";var o,s=5,i=r(r(r({},e.SMALL,24),e.MEDIUM,32),e.LARGE,40),t=8,l=24;!function(r){r.SQUARE="square",r.CIRCLE="circle"}(o||(o={}));export{t as COLOR_PADDING,i as COLOR_SIZES,o as ColorShapes,s as DEFAULT_NUMBER_OF_COLORS_IN_LINE,l as DIALOG_WIDTH_PADDING};
 //# sourceMappingURL=ColorPickerConstants.js.map

package/dist/src/components/ColorPicker/ColorPickerConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerConstants.js","sources":["../../../../src/components/ColorPicker/ColorPickerConstants.ts"],"sourcesContent":["import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n  [SIZES.SMALL]: 24,\n  [SIZES.MEDIUM]: 32,\n  [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n"],"names":["DEFAULT_NUMBER_OF_COLORS_IN_LINE","COLOR_SIZES","_defineProperty","SIZES","SMALL","MEDIUM","LARGE","COLOR_PADDING","DIALOG_WIDTH_PADDING"],"mappings":"iIAEO,IAAMA,EAAmC,EAEnCC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAMC,MAAQ,IACdD,EAAME,OAAS,IACfF,EAAMG,MAAQ,IAGJC,EAAgB,EAChBC,EAAuB"}
+{"version":3,"file":"ColorPickerConstants.js","sources":["../../../../src/components/ColorPicker/ColorPickerConstants.ts"],"sourcesContent":["import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n  [SIZES.SMALL]: 24,\n  [SIZES.MEDIUM]: 32,\n  [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n\n/**\n * @deprecated\n */\nexport enum ColorShapes {\n  SQUARE = \"square\",\n  CIRCLE = \"circle\"\n}\n"],"names":["ColorShapes","DEFAULT_NUMBER_OF_COLORS_IN_LINE","COLOR_SIZES","_defineProperty","SIZES","SMALL","MEDIUM","LARGE","COLOR_PADDING","DIALOG_WIDTH_PADDING"],"mappings":"iIAEO,IAcKA,EAdCC,EAAmC,EAEnCC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAMC,MAAQ,IACdD,EAAME,OAAS,IACfF,EAAMG,MAAQ,IAGJC,EAAgB,EAChBC,EAAuB,IAKpC,SAAYT,GACVA,EAAA,OAAA,SACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClick: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n    const { onSelectionAction } = useGridKeyboardNavigation({\n      ref: ref as React.MutableRefObject<HTMLElement>,\n      itemsCount: 1,\n      numberOfItemsInLine: 1,\n      onItemClicked: onClick,\n      getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n    });\n\n    return (\n      <Button\n        ref={ref}\n        size=\"small\"\n        kind=\"tertiary\"\n        onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n        blurOnMouseUp={false}\n        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"sTAuBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,GAA8C,IAAzFC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}
+{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClick: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const { onSelectionAction } = useGridKeyboardNavigation({\n      ref: ref as React.MutableRefObject<HTMLElement>,\n      itemsCount: 1,\n      numberOfItemsInLine: 1,\n      onItemClicked: onClick,\n      getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n    });\n\n    return (\n      <Button\n        ref={ref}\n        size=\"small\"\n        kind=\"tertiary\"\n        onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n        blurOnMouseUp={false}\n        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n\nexport default ColorPickerClearButton;\n"],"names":["ColorPickerClearButton","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","React","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"sTAuBMA,IAAAA,EAAyBC,GAC7B,SAAAC,EAAuDC,GAAwC,IAAnFC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEQ,EAAAC,cAACC,EAAM,CACLb,IAAKA,EACLc,KAAK,QACLC,KAAK,WACLP,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAACC,cAAAV,EAAK,CAAAY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}

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

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

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

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

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

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