@vibe/core 4.2.1 → 4.2.3

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWrapper.js","sources":["../../../../../src/components/ButtonGroup/ButtonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport styles from \"./ButtonGroup.module.scss\";\n\nexport interface ButtonWrapperProps extends ButtonProps {\n  /**\n   * The content of the tooltip.\n   */\n  tooltipContent?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * If true, makes the button take the full width of its container.\n   */\n  fullWidth?: boolean;\n}\n\nexport const ButtonWrapper = ({\n  tooltipContent,\n  tooltipPosition,\n  tooltipHideDelay,\n  tooltipShowDelay,\n  tooltipContainerSelector,\n  tooltipMoveBy,\n  fullWidth,\n  className,\n  ...otherProps\n}: ButtonWrapperProps) => {\n  const button = <Button {...otherProps} className={className} />;\n\n  if (!isNil(tooltipContent)) {\n    return (\n      <Tooltip\n        moveBy={tooltipMoveBy}\n        position={tooltipPosition}\n        hideDelay={tooltipHideDelay}\n        showDelay={tooltipShowDelay}\n        content={tooltipContent}\n        showTrigger={[\"mouseenter\"]}\n        hideTrigger={[\"mouseleave\"]}\n        containerSelector={tooltipContainerSelector}\n        referenceWrapperClassName={fullWidth ? styles.fullWidth : undefined}\n      >\n        {button}\n      </Tooltip>\n    );\n  }\n\n  // Always wrap in a div when fullWidth to ensure consistent structure\n  if (fullWidth) {\n    return <div className={styles.fullWidth}>{button}</div>;\n  }\n\n  return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","styles","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector","referenceWrapperClassName","undefined"],"mappings":"6QAuCaA,EAAgB,SAACC,OAC5BC,EAOSD,EAPTC,eACAC,EAMSF,EANTE,gBACAC,EAKSH,EALTG,iBACAC,EAISJ,EAJTI,iBACAC,EAGSL,EAHTK,yBACAC,EAESN,EAFTM,cACAC,EACSP,EADTO,UACAC,EAASR,EAATQ,UACGC,EAAUC,EAAAV,EATe,+IAWtBW,EAASC,EAAAC,cAACC,EAAMC,OAAAC,OAAA,CAAA,EAAKP,EAAU,CAAED,UAAWA,KAElD,OAAKS,EAAMhB,GAmBPM,EACKK,EAAAC,cAAA,MAAA,CAAKL,UAAWU,EAAOX,WAAYI,GAGrCA,EArBHC,EAACC,cAAAM,EACC,CAAAC,OAAQd,EACRe,SAAUnB,EACVoB,UAAWnB,EACXoB,UAAWnB,EACXoB,QAASvB,EACTwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBtB,EACnBuB,0BAA2BrB,EAAYW,EAAOX,eAAYsB,GAEzDlB,EAWT"}
+{"version":3,"file":"ButtonWrapper.js","sources":["../../../../../src/components/ButtonGroup/ButtonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport styles from \"./ButtonGroup.module.scss\";\n\nexport interface ButtonWrapperProps extends ButtonProps {\n  /**\n   * The content of the tooltip.\n   */\n  tooltipContent?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * If true, makes the button take the full width of its container.\n   */\n  fullWidth?: boolean;\n}\n\nexport const ButtonWrapper = ({\n  tooltipContent,\n  tooltipPosition,\n  tooltipHideDelay,\n  tooltipShowDelay,\n  tooltipContainerSelector,\n  tooltipMoveBy,\n  fullWidth,\n  className,\n  ...otherProps\n}: ButtonWrapperProps) => {\n  const button = <Button {...otherProps} className={className} />;\n\n  if (!isNil(tooltipContent)) {\n    return (\n      <Tooltip\n        moveBy={tooltipMoveBy}\n        position={tooltipPosition}\n        hideDelay={tooltipHideDelay}\n        showDelay={tooltipShowDelay}\n        content={tooltipContent}\n        showTrigger={[\"mouseenter\"]}\n        hideTrigger={[\"mouseleave\"]}\n        containerSelector={tooltipContainerSelector}\n        referenceWrapperClassName={fullWidth ? styles.fullWidth : undefined}\n      >\n        {button}\n      </Tooltip>\n    );\n  }\n\n  // Always wrap in a div when fullWidth to ensure consistent structure\n  if (fullWidth) {\n    return <div className={styles.fullWidth}>{button}</div>;\n  }\n\n  return button;\n};\n"],"names":["ButtonWrapper","_a","tooltipContent","tooltipPosition","tooltipHideDelay","tooltipShowDelay","tooltipContainerSelector","tooltipMoveBy","fullWidth","className","otherProps","__rest","button","React","createElement","Button","Object","assign","isNil","styles","Tooltip","moveBy","position","hideDelay","showDelay","content","showTrigger","hideTrigger","containerSelector","referenceWrapperClassName","undefined"],"mappings":"6QAuCaA,EAAgB,SAACC,OAC5BC,EAOSD,EAPTC,eACAC,EAMSF,EANTE,gBACAC,EAKSH,EALTG,iBACAC,EAISJ,EAJTI,iBACAC,EAGSL,EAHTK,yBACAC,EAESN,EAFTM,cACAC,EACSP,EADTO,UACAC,EAASR,EAATQ,UACGC,EAAUC,EAAAV,EATe,+IAWtBW,EAASC,EAAAC,cAACC,EAAMC,OAAAC,OAAA,CAAA,EAAKP,EAAU,CAAED,UAAWA,KAElD,OAAKS,EAAMhB,GAmBPM,EACKK,EAAAC,cAAA,MAAA,CAAKL,UAAWU,EAAOX,WAAYI,GAGrCA,EArBHC,EAAAC,cAACM,EAAO,CACNC,OAAQd,EACRe,SAAUnB,EACVoB,UAAWnB,EACXoB,UAAWnB,EACXoB,QAASvB,EACTwB,YAAa,CAAC,cACdC,YAAa,CAAC,cACdC,kBAAmBtB,EACnBuB,0BAA2BrB,EAAYW,EAAOX,eAAYsB,GAEzDlB,EAWT"}

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

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

package/dist/mocked_classnames/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 \"@vibe/shared\";\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  \"aria-label\"?: 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  \"aria-labelledby\"?: 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      \"aria-label\": ariaLabel,\n      label,\n      \"aria-labelledby\": 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              type=\"svg\"\n              icon={indeterminate ? Remove : Check}\n              ignoreFocusStyle\n              aria-hidden={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        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            type=\"svg\"\n            icon={indeterminate ? Remove : Check}\n            ignoreFocusStyle\n            aria-hidden={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","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","Remove","Check","ignoreFocusStyle","size","CHECKBOX_LABEL","Text","element"],"mappings":"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"}
+{"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 \"@vibe/shared\";\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  \"aria-label\"?: 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  \"aria-labelledby\"?: 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      \"aria-label\": ariaLabel,\n      label,\n      \"aria-labelledby\": 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              type=\"svg\"\n              icon={indeterminate ? Remove : Check}\n              ignoreFocusStyle\n              aria-hidden={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        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            type=\"svg\"\n            icon={indeterminate ? Remove : Check}\n            ignoreFocusStyle\n            aria-hidden={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","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","Remove","Check","ignoreFocusStyle","size","CHECKBOX_LABEL","Text","element"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={wrapper:"wrapper",checkbox:"checkbox",icon:"icon",label:"label",input:"input",checkboxGrowAnimation:"checkboxGrowAnimation"};!function(n){const e="s_id-61898ce5ef6e_4_2_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('@charset "UTF-8";\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper {\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 {\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:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n.checkbox:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label {\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(--space-8);\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 {\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:focus + .checkbox {\n  border-color: var(--secondary-text-color);\n}\n.input:focus:checked + .checkbox {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:focus-visible + .checkbox {\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:checked:focus + .checkbox:after,\n.input:indeterminate:focus + .checkbox:after {\n  background-color: var(--primary-hover-color);\n}\n/* Tab navigation — non-separate mode: the wrapper <label> is the Tab target */\n.wrapper:focus-visible > .checkbox {\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:focus-visible > .input:checked ~ .checkbox,\n.wrapper:focus-visible > .input:indeterminate ~ .checkbox {\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: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:checked + .checkbox:focus-visible,\n.input:indeterminate + .checkbox:focus-visible {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox,\n.input:indeterminate + .checkbox {\n  animation: checkboxGrowAnimation var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover,\n.input:indeterminate + .checkbox:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover:after,\n.input:indeterminate + .checkbox:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox:after,\n.input:indeterminate + .checkbox: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  inset-inline-start: 0;\n}\n.input:checked + .checkbox > .icon,\n.input:indeterminate + .checkbox > .icon {\n  visibility: visible;\n}\n.input:checked:disabled + .checkbox:after,\n.input:indeterminate:disabled + .checkbox:after {\n  background-color: var(--disabled-background-color);\n}\n.input:disabled + .checkbox .icon,\n.input:disabled + .checkbox:hover .icon {\n  color: var(--disabled-text-color);\n}\n.input:disabled + .checkbox,\n.input:disabled + .checkbox:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input:disabled ~ .label {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
+var n={wrapper:"wrapper",checkbox:"checkbox",icon:"icon",label:"label",input:"input"};!function(n){const e="s_id-61898ce5ef6e_4_2_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('@charset "UTF-8";\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.wrapper {\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 {\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:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n.checkbox:hover {\n  border-color: var(--secondary-text-color);\n}\n.icon {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n.label {\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(--space-8);\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 {\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:focus + .checkbox {\n  border-color: var(--secondary-text-color);\n}\n.input:focus:checked + .checkbox {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:focus-visible + .checkbox {\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:checked:focus + .checkbox:after,\n.input:indeterminate:focus + .checkbox:after {\n  background-color: var(--primary-hover-color);\n}\n/* Tab navigation — non-separate mode: the wrapper <label> is the Tab target */\n.wrapper:focus-visible > .checkbox {\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:focus-visible > .input:checked ~ .checkbox,\n.wrapper:focus-visible > .input:indeterminate ~ .checkbox {\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: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:checked + .checkbox:focus-visible,\n.input:indeterminate + .checkbox:focus-visible {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox,\n.input:indeterminate + .checkbox {\n  animation: checkboxGrowAnimation var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover,\n.input:indeterminate + .checkbox:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n.input:checked + .checkbox:hover:after,\n.input:indeterminate + .checkbox:hover:after {\n  background-color: var(--primary-hover-color);\n}\n.input:checked + .checkbox:after,\n.input:indeterminate + .checkbox: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  inset-inline-start: 0;\n}\n.input:checked + .checkbox > .icon,\n.input:indeterminate + .checkbox > .icon {\n  visibility: visible;\n}\n.input:checked:disabled + .checkbox:after,\n.input:indeterminate:disabled + .checkbox:after {\n  background-color: var(--disabled-background-color);\n}\n.input:disabled + .checkbox .icon,\n.input:disabled + .checkbox:hover .icon {\n  color: var(--disabled-text-color);\n}\n.input:disabled + .checkbox,\n.input:disabled + .checkbox:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n.input:disabled ~ .label {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n@keyframes checkboxGrowAnimation {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/mocked_classnames/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSupportFirefoxLabelClick.js","sources":["../../../../../../src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { isFirefox } from \"@vibe/shared\";\n\nexport function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {\n  // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event\n  // that we actually created in this hook.\n  // We handle the custom event create state as ref because this variable should not be depend on the component renders\n  // and it should be unique per checkbox.\n  const customEventCreated = useRef(false);\n\n  // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed\n  const onClickCapture = useCallback(\n    (e: React.MouseEvent) => {\n      // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -\n      // firefox browsers when the shift key is pressed.\n      // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent\n      // an infinite loop in recursion here.\n      if (!customEventCreated.current && e.shiftKey && isFirefox() && inputRef?.current?.dispatchEvent) {\n        e.preventDefault();\n        const manualClickEvent = new MouseEvent(\"click\", {\n          shiftKey: true,\n          // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n          bubbles: true,\n          cancelable: true\n        });\n\n        customEventCreated.current = true;\n        inputRef.current.dispatchEvent(manualClickEvent);\n      } else if (customEventCreated.current) {\n        customEventCreated.current = false;\n      }\n    },\n    [customEventCreated, inputRef]\n  );\n\n  return { onClickCapture };\n}\n"],"names":["useSupportFirefoxLabelClick","_ref","inputRef","customEventCreated","useRef","onClickCapture","useCallback","e","current","shiftKey","isFirefox","_a","dispatchEvent","preventDefault","manualClickEvent","MouseEvent","bubbles","cancelable"],"mappings":"yFAIgB,SAAAA,EAA2BC,GAA8D,IAA3DC,EAAQD,EAARC,SAKtCC,EAAqBC,GAAO,GA2BlC,MAAO,CAAEC,eAxBcC,GACrB,SAACC,SAKC,IAAKJ,EAAmBK,SAAWD,EAAEE,UAAYC,MAAkC,UAAnBR,aAAQ,EAARA,EAAUM,eAAS,IAAAG,OAAA,EAAAA,EAAAC,eAAe,CAChGL,EAAEM,iBACF,IAAMC,EAAmB,IAAIC,WAAW,QAAS,CAC/CN,UAAU,EAEVO,SAAS,EACTC,YAAY,IAGdd,EAAmBK,SAAU,EAC7BN,EAASM,QAAQI,cAAcE,EACjC,MAAWX,EAAmBK,UAC5BL,EAAmBK,SAAU,EAEjC,GACA,CAACL,EAAoBD,IAIzB"}
+{"version":3,"file":"useSupportFirefoxLabelClick.js","sources":["../../../../../../src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { isFirefox } from \"@vibe/shared\";\n\nexport function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {\n  // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event\n  // that we actually created in this hook.\n  // We handle the custom event create state as ref because this variable should not be depend on the component renders\n  // and it should be unique per checkbox.\n  const customEventCreated = useRef(false);\n\n  // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed\n  const onClickCapture = useCallback(\n    (e: React.MouseEvent) => {\n      // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -\n      // firefox browsers when the shift key is pressed.\n      // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent\n      // an infinite loop in recursion here.\n      if (!customEventCreated.current && e.shiftKey && isFirefox() && inputRef?.current?.dispatchEvent) {\n        e.preventDefault();\n        const manualClickEvent = new MouseEvent(\"click\", {\n          shiftKey: true,\n          // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n          bubbles: true,\n          cancelable: true\n        });\n\n        customEventCreated.current = true;\n        inputRef.current.dispatchEvent(manualClickEvent);\n      } else if (customEventCreated.current) {\n        customEventCreated.current = false;\n      }\n    },\n    [customEventCreated, inputRef]\n  );\n\n  return { onClickCapture };\n}\n"],"names":["useSupportFirefoxLabelClick","_ref","inputRef","customEventCreated","useRef","onClickCapture","useCallback","e","current","shiftKey","isFirefox","_a","dispatchEvent","preventDefault","manualClickEvent","MouseEvent","bubbles","cancelable"],"mappings":"yFAIM,SAAUA,EAA2BC,GAA8D,IAA3DC,EAAQD,EAARC,SAKtCC,EAAqBC,GAAO,GA2BlC,MAAO,CAAEC,eAxBcC,GACrB,SAACC,SAKC,IAAKJ,EAAmBK,SAAWD,EAAEE,UAAYC,MAAgC,UAAjBR,aAAQ,EAARA,EAAUM,eAAO,IAAAG,OAAA,EAAAA,EAAEC,eAAe,CAChGL,EAAEM,iBACF,IAAMC,EAAmB,IAAIC,WAAW,QAAS,CAC/CN,UAAU,EAEVO,SAAS,EACTC,YAAY,IAGdd,EAAmBK,SAAU,EAC7BN,EAASM,QAAQI,cAAcE,EACjC,MAAWX,EAAmBK,UAC5BL,EAAmBK,SAAU,EAEjC,GACA,CAACL,EAAoBD,IAIzB"}

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

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

package/dist/mocked_classnames/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 \"@vibe/shared\";\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  \"aria-label\"?: string;\n  /**\n   * If true, indicates that the chip has a popup.\n   */\n  \"aria-haspopup\"?: 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      \"aria-label\": ariaLabel,\n      \"aria-haspopup\": ariaHasPopup = false,\n      \"data-testid\": dataTestId,\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;\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        \"aria-label\": overrideAriaLabel,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": 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            aria-label={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$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","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 \"@vibe/shared\";\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  \"aria-label\"?: string;\n  /**\n   * If true, indicates that the chip has a popup.\n   */\n  \"aria-haspopup\"?: 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      \"aria-label\": ariaLabel,\n      \"aria-haspopup\": ariaHasPopup = false,\n      \"data-testid\": dataTestId,\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;\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        \"aria-label\": overrideAriaLabel,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": 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            aria-label={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$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","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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"}

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

@@ -1,2 +1,2 @@
-var e={chips:"chips","chips-pop-in-emphasized":"chips-pop-in-emphasized",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",label:"label",noAnimation:"noAnimation",icon:"icon",avatar:"avatar",customRenderer:"customRenderer",left:"left",right:"right",close:"close",disabled:"disabled",defaultCursor:"defaultCursor",clickable:"clickable","focus-visible":"focus-visible",disableTextSelection:"disableTextSelection"};!function(e){const n="s_id-11bfedb29341_4_2_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.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 {\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(--space-4));\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 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips.border {\n  border: 1px solid var(--primary-background-color);\n}\n.chips.withUserSelect {\n  user-select: text;\n  cursor: text;\n}\n.chips.noMargin {\n  margin: 0;\n}\n.chips .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips.noAnimation {\n  animation: none;\n}\n.chips .icon,\n.chips .avatar,\n.chips .customRenderer {\n  min-width: 18px;\n}\n.chips .icon.left,\n.chips .avatar.left,\n.chips .customRenderer.left {\n  margin-inline-end: var(--space-4);\n}\n.chips .icon.right,\n.chips .avatar.right,\n.chips .customRenderer.right {\n  margin-inline-start: var(--space-4);\n}\n.chips .icon.close,\n.chips .avatar.close,\n.chips .customRenderer.close {\n  margin-inline-start: var(--space-4);\n  color: var(--primary-text-color);\n}\n.chips.disabled .icon {\n  color: var(--disabled-text-color);\n}\n.chips.disabled .label {\n  color: var(--disabled-text-color);\n}\n.chips.defaultCursor {\n  cursor: default;\n}\n.chips.clickable {\n  cursor: pointer;\n}\n.chips.clickable:focus-visible, .chips.clickable.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips.clickable:focus:not(.focus-visible) {\n  outline: none;\n}\n.chips.clickable.disabled {\n  cursor: default;\n}\n.chips.clickable.disableTextSelection {\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 {\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 n={chips:"chips",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",label:"label",noAnimation:"noAnimation",icon:"icon",avatar:"avatar",customRenderer:"customRenderer",left:"left",right:"right",close:"close",disabled:"disabled",clickable:"clickable",disableTextSelection:"disableTextSelection"};!function(n){const e="s_id-11bfedb29341_4_2_2";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips {\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(--space-4));\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 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips.border {\n  border: 1px solid var(--primary-background-color);\n}\n.chips.withUserSelect {\n  user-select: text;\n  cursor: text;\n}\n.chips.noMargin {\n  margin: 0;\n}\n.chips .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips.noAnimation {\n  animation: none;\n}\n.chips .icon,\n.chips .avatar,\n.chips .customRenderer {\n  min-width: 18px;\n}\n.chips .icon.left,\n.chips .avatar.left,\n.chips .customRenderer.left {\n  margin-inline-end: var(--space-4);\n}\n.chips .icon.right,\n.chips .avatar.right,\n.chips .customRenderer.right {\n  margin-inline-start: var(--space-4);\n}\n.chips .icon.close,\n.chips .avatar.close,\n.chips .customRenderer.close {\n  margin-inline-start: var(--space-4);\n  color: var(--primary-text-color);\n}\n.chips.disabled .icon {\n  color: var(--disabled-text-color);\n}\n.chips.disabled .label {\n  color: var(--disabled-text-color);\n}\n.chips.defaultCursor {\n  cursor: default;\n}\n.chips.clickable {\n  cursor: pointer;\n}\n.chips.clickable:focus-visible, .chips.clickable.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips.clickable:focus:not(.focus-visible) {\n  outline: none;\n}\n.chips.clickable.disabled {\n  cursor: default;\n}\n.chips.clickable.disableTextSelection {\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 {\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{n as default};
 //# sourceMappingURL=Chips.module.scss.js.map

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

package/dist/mocked_classnames/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, NOOP } from \"@vibe/shared\";\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\";\n\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        aria-labelledby=\"Color Picker Dialog\"\n        aria-describedby=\"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","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId"],"mappings":"+pBAiGMA,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,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnD,kBAAA,yCACC,aACjB+C,MAAO,CAAET,MAAAA,GACE,YAAAU,EAAgBC,cAE3BT,EAAAC,cAACS,EACC,CAAAC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBJ,aAAcnB,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 { type BaseSizes } from \"../../constants\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\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\";\n\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        aria-labelledby=\"Color Picker Dialog\"\n        aria-describedby=\"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","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId"],"mappings":"4pBAiGA,IAAMA,EAAcC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAAM,IAAAD,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAK,IAAAD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAU,IAAAD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAW,IAAAD,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAe,IAAAD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAU,IAAAD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAS,IAAAD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAoB,IAAAD,EAAGE,EAAgCF,EACvDG,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAU,IAAAD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GAAU,kBAC7D,yCACC,aACjB+C,MAAO,CAAET,MAAAA,GAAO,YACLU,EAAgBC,cAE3BT,EAAAC,cAACS,EAAkB,CACjBC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBJ,aAAcnB,KAIlF"}

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

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker",colorPickerDialogContent:"colorPickerDialogContent"};!function(e){const t="s_id-ffacbf9b6446_4_2_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.colorPickerDialogContent {\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",colorPickerDialogContent:"colorPickerDialogContent"};!function(e){const t="s_id-ffacbf9b6446_4_2_2";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.colorPickerDialogContent {\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/mocked_classnames/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 \"@vibe/shared\";\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":"gRAuBMA,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 \"@vibe/shared\";\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":"gRAuBA,IAAMA,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,GAAkB,EAAG,EACpCa,eAAe,EACfC,UAAWC,EAAOC,kBAElBR,EAAAC,cAACV,EAAI,CAACY,KAAK,KAAKG,UAAWC,EAAOE,iBACjCnB,GAAQ,QAGf"}

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

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon",clearColorButton:"clearColorButton"};!function(e){const n="s_id-745441469971_4_2_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton {\n  margin-top: var(--space-8);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon",clearColorButton:"clearColorButton"};!function(e){const n="s_id-745441469971_4_2_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton {\n  margin-top: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=ColorPickerClearButton.module.scss.js.map

package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { type CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { type ColorStyle } from \"../../../../types\";\n\nlet colorPickerGridIdCounter = 0;\nconst generateColorPickerGridId = () => `color-picker-grid-${colorPickerGridIdCounter++}`;\n\nconst useColorPickerGridId = (id: string) => {\n  const [gridId, setGridId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setGridId(id || generateColorPickerGridId());\n  }, [id]);\n  return gridId;\n};\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, function (a) {\n    return a.toUpperCase();\n  });\n};\n\nconst calculateColorTooltip = (\n  color: ColorPickerValueOnly,\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n  if (tooltipContentByColor && tooltipContentByColor[color]) {\n    return tooltipContentByColor[color];\n  } else {\n    return formatColorNameForTooltip(color);\n  }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n  /**\n   * Callback fired when a color is clicked.\n   */\n  onColorClicked?: (color: ColorPickerValueOnly) => void;\n  /**\n   * The list of colors to be displayed.\n   */\n  colorsToRender?: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The currently selected color or colors.\n   */\n  value?: string | string[];\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\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   * If true, displays a tooltip with the color name.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n  (\n    {\n      onColorClicked,\n      colorsToRender,\n      numberOfColorsInLine,\n      focusOnMount,\n      value,\n      colorStyle,\n      ColorIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      SelectedIndicatorIcon,\n      colorSize,\n      tooltipContentByColor,\n      colorShape,\n      showColorNameTooltip: showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerColorsGridProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ) => {\n    const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      focusOnMount,\n      ref: ref as React.MutableRefObject<HTMLUListElement>,\n      onItemClicked: onColorClicked,\n      itemsCount: colorsToRender.length,\n      numberOfItemsInLine: numberOfColorsInLine,\n      entryFocusStrategy: \"first\",\n      getItemByIndex\n    });\n\n    const gridId = useColorPickerGridId(id);\n    const getColorItemId = (index: number) => (gridId ? `${gridId}-item-${index}` : undefined);\n    const activeDescendantId = activeIndex >= 0 ? getColorItemId(activeIndex) : undefined;\n\n    return (\n      <ul\n        className={styles.colorsGrid}\n        ref={ref}\n        tabIndex={0}\n        id={id}\n        data-testid={dataTestId}\n        role=\"listbox\"\n        aria-activedescendant={activeDescendantId}\n      >\n        {colorsToRender.map((color, index) => {\n          return (\n            <ColorPickerItemComponent\n              key={color}\n              id={getColorItemId(index)}\n              color={color}\n              colorAriaLabel={calculateColorTooltip(color, tooltipContentByColor)}\n              onColorClicked={() => onSelectionAction(index)}\n              shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n              colorStyle={colorStyle}\n              ColorIndicatorIcon={ColorIndicatorIcon}\n              SelectedIndicatorIcon={SelectedIndicatorIcon}\n              isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n              isActive={index === activeIndex}\n              colorSize={colorSize}\n              tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n              colorShape={colorShape}\n            />\n          );\n        })}\n      </ul>\n    );\n  }\n);\n\nexport default ColorPickerColorsGrid;\n"],"names":["colorPickerGridIdCounter","useColorPickerGridId","id","_useState","useState","_useState2","_slicedToArray","gridId","setGridId","useIsomorphicLayoutEffect","concat","calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","entryFocusStrategy","activeIndex","onSelectionAction","getColorItemId","undefined","activeDescendantId","React","createElement","className","styles","colorsGrid","tabIndex","role","map","ColorPickerItemComponent","key","colorAriaLabel","isSelected","Array","isArray","includes","isActive","tooltipContent"],"mappings":"waAYA,IAAIA,EAA2B,EAGzBC,EAAuB,SAACC,GAC5B,IAAAC,EAA4BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAvCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAIxB,OAHAI,GAA0B,WACxBD,EAAUN,GALiBQ,qBAAAA,OAA8BV,KAM3D,GAAG,CAACE,IACGK,CACT,EAQMI,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,EAyDMM,EAAwBC,GAC5B,SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,UACAlB,EAAqBO,EAArBP,sBACAmB,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACA/B,EAAEkB,EAAFlB,GACegC,EAAUd,EAAzB,eAIIe,EAAiBC,GAAY,SAACC,GAAa,OAAKd,EAAec,KAAQ,CAACd,IAE9Ee,EAA2CC,EAA0B,CACnEd,aAAAA,EACAJ,IAAKA,EACLmB,cAAelB,EACfmB,WAAYlB,EAAemB,OAC3BC,oBAAqBnB,EACrBoB,mBAAoB,QACpBT,eAAAA,IAPMU,EAAWP,EAAXO,YAAaC,EAAiBR,EAAjBQ,kBAUfvC,EAASN,EAAqBC,GAC9B6C,EAAiB,SAACV,GAAa,OAAM9B,EAAMG,GAAAA,OAAMH,YAAMG,OAAS2B,QAAUW,GAC1EC,EAAoC,EAAfJ,OAAiDG,EAA9BD,EAAeF,GAE7D,OACEK,EACEC,cAAA,KAAA,CAAAC,UAAWC,EAAOC,WAClBjC,IAAKA,EACLkC,SAAU,EACVrD,GAAIA,EAAE,cACOgC,EACbsB,KAAK,kCACkBP,GAEtB1B,EAAekC,KAAI,SAAC7C,EAAOyB,GAC1B,OACEa,EAACC,cAAAO,EACC,CAAAC,IAAK/C,EACLV,GAAI6C,EAAeV,GACnBzB,MAAOA,EACPgD,eAAgBjD,EAAsBC,EAAOC,GAC7CS,eAAgB,WAAA,OAAMwB,EAAkBT,EAAM,EAC9CR,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,EACvB+B,WAAYC,MAAMC,QAAQrC,GAASA,EAAMsC,SAASpD,GAASc,IAAUd,EACrEqD,SAAU5B,IAAUQ,EACpBd,UAAWA,EACXmC,eAAgBjC,EAAuBtB,EAAsBC,EAAOC,QAAyBmC,EAC7FhB,WAAYA,GAGjB,IAGP"}
+{"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { type CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { type ColorStyle } from \"../../../../types\";\n\nlet colorPickerGridIdCounter = 0;\nconst generateColorPickerGridId = () => `color-picker-grid-${colorPickerGridIdCounter++}`;\n\nconst useColorPickerGridId = (id: string) => {\n  const [gridId, setGridId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setGridId(id || generateColorPickerGridId());\n  }, [id]);\n  return gridId;\n};\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, function (a) {\n    return a.toUpperCase();\n  });\n};\n\nconst calculateColorTooltip = (\n  color: ColorPickerValueOnly,\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n  if (tooltipContentByColor && tooltipContentByColor[color]) {\n    return tooltipContentByColor[color];\n  } else {\n    return formatColorNameForTooltip(color);\n  }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n  /**\n   * Callback fired when a color is clicked.\n   */\n  onColorClicked?: (color: ColorPickerValueOnly) => void;\n  /**\n   * The list of colors to be displayed.\n   */\n  colorsToRender?: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The currently selected color or colors.\n   */\n  value?: string | string[];\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\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   * If true, displays a tooltip with the color name.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n  (\n    {\n      onColorClicked,\n      colorsToRender,\n      numberOfColorsInLine,\n      focusOnMount,\n      value,\n      colorStyle,\n      ColorIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      SelectedIndicatorIcon,\n      colorSize,\n      tooltipContentByColor,\n      colorShape,\n      showColorNameTooltip: showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerColorsGridProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ) => {\n    const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      focusOnMount,\n      ref: ref as React.MutableRefObject<HTMLUListElement>,\n      onItemClicked: onColorClicked,\n      itemsCount: colorsToRender.length,\n      numberOfItemsInLine: numberOfColorsInLine,\n      entryFocusStrategy: \"first\",\n      getItemByIndex\n    });\n\n    const gridId = useColorPickerGridId(id);\n    const getColorItemId = (index: number) => (gridId ? `${gridId}-item-${index}` : undefined);\n    const activeDescendantId = activeIndex >= 0 ? getColorItemId(activeIndex) : undefined;\n\n    return (\n      <ul\n        className={styles.colorsGrid}\n        ref={ref}\n        tabIndex={0}\n        id={id}\n        data-testid={dataTestId}\n        role=\"listbox\"\n        aria-activedescendant={activeDescendantId}\n      >\n        {colorsToRender.map((color, index) => {\n          return (\n            <ColorPickerItemComponent\n              key={color}\n              id={getColorItemId(index)}\n              color={color}\n              colorAriaLabel={calculateColorTooltip(color, tooltipContentByColor)}\n              onColorClicked={() => onSelectionAction(index)}\n              shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n              colorStyle={colorStyle}\n              ColorIndicatorIcon={ColorIndicatorIcon}\n              SelectedIndicatorIcon={SelectedIndicatorIcon}\n              isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n              isActive={index === activeIndex}\n              colorSize={colorSize}\n              tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n              colorShape={colorShape}\n            />\n          );\n        })}\n      </ul>\n    );\n  }\n);\n\nexport default ColorPickerColorsGrid;\n"],"names":["colorPickerGridIdCounter","useColorPickerGridId","id","_useState","useState","_useState2","_slicedToArray","gridId","setGridId","useIsomorphicLayoutEffect","concat","calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","entryFocusStrategy","activeIndex","onSelectionAction","getColorItemId","undefined","activeDescendantId","React","createElement","className","styles","colorsGrid","tabIndex","role","map","ColorPickerItemComponent","key","colorAriaLabel","isSelected","Array","isArray","includes","isActive","tooltipContent"],"mappings":"waAYA,IAAIA,EAA2B,EAGzBC,EAAuB,SAACC,GAC5B,IAAAC,EAA4BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAvCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAIxB,OAHAI,GAA0B,WACxBD,EAAUN,GALiB,qBAAAQ,OAA8BV,KAM3D,GAAG,CAACE,IACGK,CACT,EAQMI,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,EAyDMM,EAAwBC,GAC5B,SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,UACAlB,EAAqBO,EAArBP,sBACAmB,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACA/B,EAAEkB,EAAFlB,GACegC,EAAUd,EAAzB,eAIIe,EAAiBC,GAAY,SAACC,GAAa,OAAKd,EAAec,EAAM,GAAE,CAACd,IAE9Ee,EAA2CC,EAA0B,CACnEd,aAAAA,EACAJ,IAAKA,EACLmB,cAAelB,EACfmB,WAAYlB,EAAemB,OAC3BC,oBAAqBnB,EACrBoB,mBAAoB,QACpBT,eAAAA,IAPMU,EAAWP,EAAXO,YAAaC,EAAiBR,EAAjBQ,kBAUfvC,EAASN,EAAqBC,GAC9B6C,EAAiB,SAACV,GAAa,OAAM9B,EAAM,GAAAG,OAAMH,YAAMG,OAAS2B,QAAUW,CAAS,EACnFC,EAAoC,EAAfJ,OAAiDG,EAA9BD,EAAeF,GAE7D,OACEK,EAAAC,cAAA,KAAA,CACEC,UAAWC,EAAOC,WAClBjC,IAAKA,EACLkC,SAAU,EACVrD,GAAIA,EAAE,cACOgC,EACbsB,KAAK,kCACkBP,GAEtB1B,EAAekC,KAAI,SAAC7C,EAAOyB,GAC1B,OACEa,EAAAC,cAACO,EAAwB,CACvBC,IAAK/C,EACLV,GAAI6C,EAAeV,GACnBzB,MAAOA,EACPgD,eAAgBjD,EAAsBC,EAAOC,GAC7CS,eAAgB,WAAA,OAAMwB,EAAkBT,EAAM,EAC9CR,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,EACvB+B,WAAYC,MAAMC,QAAQrC,GAASA,EAAMsC,SAASpD,GAASc,IAAUd,EACrEqD,SAAU5B,IAAUQ,EACpBd,UAAWA,EACXmC,eAAgBjC,EAAuBtB,EAAsBC,EAAOC,QAAyBmC,EAC7FhB,WAAYA,GAGlB,IAGN"}

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

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid"};!function(e){const n="s_id-0a5f0eb78ee4_4_2_0";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 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid"};!function(e){const n="s_id-0a5f0eb78ee4_4_2_2";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 {\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/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\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 { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onValueChange: (value: ColorPickerArrayValueOnly) => void;\n  /**\n   * The list of colors available for selection.\n   */\n  colorsList: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Icon used for clearing the color selection.\n   */\n  NoColorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n  /**\n   * Text displayed for the \"no color\" option.\n   */\n  noColorText?: string;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * If true, treats the color list as a blacklist rather than a whitelist.\n   */\n  isBlackListMode?: boolean;\n  /**\n   * The number of colors displayed per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n   * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n   */\n  forceUseRawColorList?: boolean;\n  /**\n   * Used to enable color name tooltip on each color in the component.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n  (\n    {\n      className,\n      onValueChange,\n      value,\n      noColorText,\n      colorStyle = \"regular\",\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      NoColorIcon = NoColor,\n      isBlackListMode = true,\n      colorsList,\n      isMultiselect,\n      colorSize = BaseSizes.MEDIUM,\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      tooltipContentByColor = {},\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerContentProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const gridRef = useRef(null);\n    const mergedRef = useMergeRef(ref, gridRef);\n    const colorsRef = useRef(null);\n    const buttonRef = useRef(null);\n\n    const onClearButton = useCallback(() => {\n      onValueChange(null);\n    }, [onValueChange]);\n\n    const colorsToRender = useMemo(() => {\n      if (forceUseRawColorList) {\n        return colorsList;\n      }\n      return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n    }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n    const onColorClicked = useCallback(\n      (color: CONTENT_COLORS_VALUES) => {\n        if (!isMultiselect) {\n          onValueChange([color]);\n          return;\n        }\n        const colors = [...value];\n        if (colors.includes(color)) {\n          const indexInSelected = colors.indexOf(color);\n          if (indexInSelected > -1) {\n            colors.splice(indexInSelected, 1);\n          }\n        } else {\n          colors.push(color);\n        }\n        onValueChange(colors);\n      },\n      [isMultiselect, onValueChange, value]\n    );\n\n    const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n    const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n    const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n        <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n          <ColorPickerColorsGrid\n            ref={colorsRef}\n            onColorClicked={onColorClicked}\n            colorsToRender={colorsToRender}\n            numberOfColorsInLine={numberOfColorsInLine}\n            focusOnMount={focusOnMount}\n            value={value}\n            colorStyle={colorStyle}\n            ColorIndicatorIcon={ColorIndicatorIcon}\n            shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n            SelectedIndicatorIcon={SelectedIndicatorIcon}\n            colorSize={colorSize}\n            tooltipContentByColor={tooltipContentByColor}\n            colorShape={colorShape}\n            showColorNameTooltip={showColorNameTooltip}\n            id={id}\n            data-testid={dataTestId}\n          />\n          {noColorText && (\n            <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n          )}\n        </GridKeyboardNavigationContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default ColorPickerContent;\n"],"names":["ColorPickerContent","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text"],"mappings":"80BAqGMA,IAAAA,EAAqBC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,EAEnC,MACEH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVd,MAFE9C,EAAc,CAAC6C,GAalB,GACD,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAKC,cAAA,MAAA,CAAA9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAW,GACtEH,EAAAC,cAACG,EAA8BC,SAAS,CAAAhE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG"}
+{"version":3,"file":"ColorPickerContent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx"],"sourcesContent":["import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\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 { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onValueChange: (value: ColorPickerArrayValueOnly) => void;\n  /**\n   * The list of colors available for selection.\n   */\n  colorsList: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Icon used for clearing the color selection.\n   */\n  NoColorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n  /**\n   * Text displayed for the \"no color\" option.\n   */\n  noColorText?: string;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * If true, treats the color list as a blacklist rather than a whitelist.\n   */\n  isBlackListMode?: boolean;\n  /**\n   * The number of colors displayed per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n   * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n   */\n  forceUseRawColorList?: boolean;\n  /**\n   * Used to enable color name tooltip on each color in the component.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n  (\n    {\n      className,\n      onValueChange,\n      value,\n      noColorText,\n      colorStyle = \"regular\",\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      NoColorIcon = NoColor,\n      isBlackListMode = true,\n      colorsList,\n      isMultiselect,\n      colorSize = BaseSizes.MEDIUM,\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      tooltipContentByColor = {},\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerContentProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const gridRef = useRef(null);\n    const mergedRef = useMergeRef(ref, gridRef);\n    const colorsRef = useRef(null);\n    const buttonRef = useRef(null);\n\n    const onClearButton = useCallback(() => {\n      onValueChange(null);\n    }, [onValueChange]);\n\n    const colorsToRender = useMemo(() => {\n      if (forceUseRawColorList) {\n        return colorsList;\n      }\n      return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n    }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n    const onColorClicked = useCallback(\n      (color: CONTENT_COLORS_VALUES) => {\n        if (!isMultiselect) {\n          onValueChange([color]);\n          return;\n        }\n        const colors = [...value];\n        if (colors.includes(color)) {\n          const indexInSelected = colors.indexOf(color);\n          if (indexInSelected > -1) {\n            colors.splice(indexInSelected, 1);\n          }\n        } else {\n          colors.push(color);\n        }\n        onValueChange(colors);\n      },\n      [isMultiselect, onValueChange, value]\n    );\n\n    const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n    const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n    const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n        <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n          <ColorPickerColorsGrid\n            ref={colorsRef}\n            onColorClicked={onColorClicked}\n            colorsToRender={colorsToRender}\n            numberOfColorsInLine={numberOfColorsInLine}\n            focusOnMount={focusOnMount}\n            value={value}\n            colorStyle={colorStyle}\n            ColorIndicatorIcon={ColorIndicatorIcon}\n            shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n            SelectedIndicatorIcon={SelectedIndicatorIcon}\n            colorSize={colorSize}\n            tooltipContentByColor={tooltipContentByColor}\n            colorShape={colorShape}\n            showColorNameTooltip={showColorNameTooltip}\n            id={id}\n            data-testid={dataTestId}\n          />\n          {noColorText && (\n            <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n          )}\n        </GridKeyboardNavigationContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default ColorPickerContent;\n"],"names":["ColorPickerContent","forwardRef","_ref","ref","className","onValueChange","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","colorsList","isMultiselect","_ref$colorSize","colorSize","BaseSizes","MEDIUM","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","_ref$tooltipContentBy","tooltipContentByColor","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","gridRef","useRef","mergedRef","useMergeRef","colorsRef","buttonRef","onClearButton","useCallback","colorsToRender","useMemo","_difference","contentColors","_intersection","onColorClicked","color","colors","_toConsumableArray","includes","indexInSelected","indexOf","splice","push","positions","topElement","bottomElement","keyboardContext","useGridKeyboardNavigationContext","width","calculateColorPickerWidth","React","createElement","style","tabIndex","GridKeyboardNavigationContext","Provider","ColorPickerColorsGrid","ColorPickerClearButton","Icon","onClick","text"],"mappings":"80BAqGA,IAAMA,EAAqBC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAU,IAAAD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAW,IAAAD,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAe,IAAAD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAoB,IAAAD,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAA,EAAEA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAU,IAAAD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EACjG,GAAG,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAkB,GACpBH,EAAOK,OAAOF,EAAiB,EAEnC,MACEH,EAAOM,KAAKP,GAEd7C,EAAc8C,EAVd,MAFE9C,EAAc,CAAC6C,GAanB,GACA,CAAC/B,EAAed,EAAeC,IAG3BoD,GAAYb,GAAQ,WAAA,MAAM,CAAC,CAAEc,WAAYnB,EAAWoB,cAAenB,GAAY,GAAE,IACjFoB,GAAkBC,EAAiCJ,GAAWtB,GAC9D2B,GAAQC,EAA0B3C,EAAwBI,GAEhE,OACEwC,EAAAC,cAAA,MAAA,CAAK9D,UAAWA,EAAW+D,MAAO,CAAEJ,MAAAA,IAAS5D,IAAKmC,EAAW8B,UAAU,GACrEH,EAAAC,cAACG,EAA8BC,SAAQ,CAAChE,MAAOuD,IAC7CI,EAAAC,cAACK,EAAqB,CACpBpE,IAAKqC,EACLS,eAAgBA,EAChBL,eAAgBA,EAChBnB,qBAAsBA,EACtBI,aAAcA,EACdvB,MAAOA,EACPG,WAAYA,EACZC,mBAAoBA,EACpBE,uCAAwCA,EACxCD,sBAAuBA,EACvBU,UAAWA,EACXO,sBAAuBA,EACvBG,WAAYA,EACZE,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG"}

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

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"@vibe/shared";import r from"classnames";import l,{forwardRef as n,useMemo as a,useRef as i,useCallback as s,useEffect as c}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import{Tooltip as p}from"@vibe/tooltip/mockedClassNames";import{Clickable as f}from"@vibe/clickable/mockedClassNames";import{getTestId as v}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as C}from"../../../../tests/constants.js";import I from"./ColorPickerItemComponent.module.scss.js";var b=n((function(n,b){var k=n.color,g=n.onColorClicked,E=n.colorStyle,y=void 0===E?"regular":E,N=n.shouldRenderIndicatorWithoutBackground,S=n.ColorIndicatorIcon,h=n.SelectedIndicatorIcon,j=void 0===h?S:h,L=n.isSelected,M=n.colorSize,A=n.tooltipContent,P=n.isActive,W=n.colorShape,_=n.colorAriaLabel,x=n.id,R=n["data-testid"],z=a((function(){return m.includes(k)}),[k]),B=z?d.getMondayColorAsStyle(k,y):k,D=i(null),O=s((function(){return g(k)}),[g,k]);c((function(){if((null==D?void 0:D.current)&&!N&&z){var e=D.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(k,"selected"===y?"regular":"hover")},t=function(e){e.target.style.background=B};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[k,B,y,z,D,N]);var T=L||S,w=N?{color:B}:{};return l.createElement(p,{content:A},l.createElement("li",{id:x,role:"option","aria-selected":L,className:r(I.itemWrapper,e(e(e({},I.selectedColor,L),I.active,P),I.circle,"circle"===W)),"data-testid":R||v(C.COLOR_PICKER_ITEM,k)},l.createElement("div",{className:r(I.feedbackIndicator)}),l.createElement(f,{ref:D,role:"presentation","aria-label":_,className:r(I.colorItem,t(I,o("color-item-size-"+M)),e({},I.colorItemTextMode,N)),style:{background:N?"transparent":B},onClick:O,tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}},l.createElement("div",{className:r(I.colorIndicatorWrapper),style:w},T&&l.createElement(u,{icon:L?j:S,className:r(e({},I.colorIconWhite,!N)),ignoreFocusStyle:!0})))))}));export{b as default};
+import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"es-toolkit";import{getStyle as t}from"@vibe/shared";import r from"classnames";import l,{forwardRef as n,useMemo as a,useRef as i,useCallback as s,useEffect as c}from"react";import{contentColors as m}from"../../../../utils/colors-vars-map.js";import d from"../../../../utils/colors-utils.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import{Tooltip as p}from"@vibe/tooltip/mockedClassNames";import{Clickable as f}from"@vibe/clickable/mockedClassNames";import{getTestId as v}from"../../../../../testIds.js";import{ComponentDefaultTestId as C}from"../../../../tests/constants.js";import I from"./ColorPickerItemComponent.module.scss.js";var b=n((function(n,b){var k=n.color,g=n.onColorClicked,E=n.colorStyle,y=void 0===E?"regular":E,N=n.shouldRenderIndicatorWithoutBackground,S=n.ColorIndicatorIcon,h=n.SelectedIndicatorIcon,j=void 0===h?S:h,L=n.isSelected,M=n.colorSize,A=n.tooltipContent,P=n.isActive,W=n.colorShape,_=n.colorAriaLabel,x=n.id,R=n["data-testid"],z=a((function(){return m.includes(k)}),[k]),B=z?d.getMondayColorAsStyle(k,y):k,D=i(null),O=s((function(){return g(k)}),[g,k]);c((function(){if((null==D?void 0:D.current)&&!N&&z){var e=D.current,o=function(e){e.target.style.background=d.getMondayColorAsStyle(k,"selected"===y?"regular":"hover")},t=function(e){e.target.style.background=B};return e.addEventListener("mouseenter",o,!1),e.addEventListener("mouseleave",t,!1),function(){e.removeEventListener("mouseenter",o,!1),e.removeEventListener("mouseleave",t,!1)}}}),[k,B,y,z,D,N]);var T=L||S,w=N?{color:B}:{};return l.createElement(p,{content:A},l.createElement("li",{id:x,role:"option","aria-selected":L,className:r(I.itemWrapper,e(e(e({},I.selectedColor,L),I.active,P),I.circle,"circle"===W)),"data-testid":R||v(C.COLOR_PICKER_ITEM,k)},l.createElement("div",{className:r(I.feedbackIndicator)}),l.createElement(f,{ref:D,role:"presentation","aria-label":_,className:r(I.colorItem,t(I,o("color-item-size-"+M)),e({},I.colorItemTextMode,N)),style:{background:N?"transparent":B},onClick:O,tabIndex:-1,onMouseDown:function(e){return e.preventDefault()}},l.createElement("div",{className:r(I.colorIndicatorWrapper),style:w},T&&l.createElement(u,{icon:L?j:S,className:r(e({},I.colorIconWhite,!N)),ignoreFocusStyle:!0})))))}));export{b as default};
 //# sourceMappingURL=ColorPickerItemComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n  /**\n   * The color value of the item.\n   */\n  color: ColorPickerValueOnly;\n  /**\n   * Callback fired when the color is clicked.\n   */\n  onColorClicked: (color: ColorPickerValueOnly) => void;\n  /**\n   * The style applied to the color.\n   */\n  colorStyle: ColorStyle;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground: boolean;\n  /**\n   * Icon displayed inside the color item.\n   */\n  ColorIndicatorIcon: SubIcon;\n  /**\n   * Icon displayed when the color is selected.\n   */\n  SelectedIndicatorIcon: SubIcon;\n  /**\n   * If true, the color is marked as selected.\n   */\n  isSelected: boolean;\n  /**\n   * The size of the color item.\n   */\n  colorSize: ColorPickerSizes;\n  /**\n   * Tooltip content for the color item.\n   */\n  tooltipContent: ElementContent;\n  /**\n   * If true, the color item is currently active.\n   */\n  isActive: boolean;\n  /**\n   * The shape of the color item.\n   */\n  colorShape: ColorShapes;\n  /**\n   * Human-readable label for the color, used for screen reader announcements.\n   */\n  colorAriaLabel: string;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n  (\n    {\n      color,\n      onColorClicked,\n      colorStyle = \"regular\",\n      shouldRenderIndicatorWithoutBackground,\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon = ColorIndicatorIcon,\n      isSelected,\n      colorSize,\n      tooltipContent,\n      isActive,\n      colorShape,\n      colorAriaLabel,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerItemComponentProps,\n    _ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n    const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n    useEffect(() => {\n      if (!itemRef?.current || shouldRenderIndicatorWithoutBackground || !isMondayColor) return;\n      const item = itemRef.current;\n      const setHoverColor = (e: MouseEvent) => {\n        if (colorStyle === \"selected\") {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n        } else {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n        }\n      };\n      const restoreToOriginalColor = (e: MouseEvent) => {\n        (e.target as HTMLDivElement).style.background = colorAsStyle;\n      };\n      item.addEventListener(\"mouseenter\", setHoverColor, false);\n      item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n      return () => {\n        item.removeEventListener(\"mouseenter\", setHoverColor, false);\n        item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n      };\n    }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n    const shouldRenderIcon = isSelected || ColorIndicatorIcon;\n    const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n    return (\n      <Tooltip content={tooltipContent}>\n        <li\n          id={id}\n          role=\"option\"\n          aria-selected={isSelected}\n          className={cx(styles.itemWrapper, {\n            [styles.selectedColor]: isSelected,\n            [styles.active]: isActive,\n            [styles.circle]: colorShape === \"circle\"\n          })}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n        >\n          <div className={cx(styles.feedbackIndicator)} />\n          <Clickable\n            ref={itemRef}\n            role=\"presentation\"\n            aria-label={colorAriaLabel}\n            className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n              [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n            })}\n            style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n            onClick={onClick}\n            tabIndex={-1}\n            onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n          >\n            <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n              {shouldRenderIcon && (\n                <Icon\n                  icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n                  className={cx({\n                    [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n                  })}\n                  ignoreFocusStyle\n                />\n              )}\n            </div>\n          </Clickable>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","colorAriaLabel","id","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","role","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"uvBAoEMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAiBEC,GACE,IAhBAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACAC,EAAcf,EAAde,eACAC,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAIIkB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASnB,EAAM,GAAE,CAACA,IACrFoB,EAAeJ,EAAgBK,EAAWC,sBAAsBtB,EAAOG,GAAcH,EACrFuB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMzB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1E2B,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWxB,GAA2CY,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBtB,EADhE,aAAfG,EACsF,UAEA,UAGtFgC,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACnC,EAAOoB,EAAcjB,EAAYa,EAAeO,EAASnB,IAE7D,IAAMkC,EAAmB9B,GAAcH,EACjCkC,EAA6BnC,EAAyC,CAAEJ,MAAOoB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAASjC,GAChB8B,EAAAC,cAAA,KAAA,CACE3B,GAAIA,EACJ8B,KAAK,SAAQ,gBACEpC,EACfqC,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgB1C,GACvBuC,EAAOI,OAASxC,GAChBoC,EAAOK,OAAwB,WAAfxC,IACjB,cACWG,GAAcsC,EAAUC,EAAuBC,kBAAmBvD,IAE/EwC,EAAKC,cAAA,MAAA,CAAAI,UAAWC,EAAGC,EAAOS,qBAC1BhB,EAAAC,cAACgB,EAAS,CACRC,IAAKnC,EACLqB,KAAK,eAAc,aACP/B,EACZgC,UAAWC,EAAGC,EAAOY,UAAWC,EAASb,EAAQc,EAAU,mBAAqBpD,IAAWwC,EAAA,CAAA,EACxFF,EAAOe,kBAAoB1D,IAE9B6B,MAAO,CAAEC,WAAY9B,EAAyC,cAAgBgB,GAC9EK,QAASA,EACTsC,UAAW,EACXC,YAAa,SAAAjC,GAAC,OAAIA,EAAEkC,gBAAgB,GAEpCzB,EAAAC,cAAA,MAAA,CAAKI,UAAWC,EAAGC,EAAOmB,uBAAwBjC,MAAOM,GACtDD,GACCE,EAAAC,cAAC0B,EAAI,CACHC,KAAM5D,EAAaD,EAAwBF,EAC3CwC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,EAAOsB,gBAAkBjE,IAE5BkE,kBACA,OAOhB"}
+{"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n  /**\n   * The color value of the item.\n   */\n  color: ColorPickerValueOnly;\n  /**\n   * Callback fired when the color is clicked.\n   */\n  onColorClicked: (color: ColorPickerValueOnly) => void;\n  /**\n   * The style applied to the color.\n   */\n  colorStyle: ColorStyle;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground: boolean;\n  /**\n   * Icon displayed inside the color item.\n   */\n  ColorIndicatorIcon: SubIcon;\n  /**\n   * Icon displayed when the color is selected.\n   */\n  SelectedIndicatorIcon: SubIcon;\n  /**\n   * If true, the color is marked as selected.\n   */\n  isSelected: boolean;\n  /**\n   * The size of the color item.\n   */\n  colorSize: ColorPickerSizes;\n  /**\n   * Tooltip content for the color item.\n   */\n  tooltipContent: ElementContent;\n  /**\n   * If true, the color item is currently active.\n   */\n  isActive: boolean;\n  /**\n   * The shape of the color item.\n   */\n  colorShape: ColorShapes;\n  /**\n   * Human-readable label for the color, used for screen reader announcements.\n   */\n  colorAriaLabel: string;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n  (\n    {\n      color,\n      onColorClicked,\n      colorStyle = \"regular\",\n      shouldRenderIndicatorWithoutBackground,\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon = ColorIndicatorIcon,\n      isSelected,\n      colorSize,\n      tooltipContent,\n      isActive,\n      colorShape,\n      colorAriaLabel,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerItemComponentProps,\n    _ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n    const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n    useEffect(() => {\n      if (!itemRef?.current || shouldRenderIndicatorWithoutBackground || !isMondayColor) return;\n      const item = itemRef.current;\n      const setHoverColor = (e: MouseEvent) => {\n        if (colorStyle === \"selected\") {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n        } else {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n        }\n      };\n      const restoreToOriginalColor = (e: MouseEvent) => {\n        (e.target as HTMLDivElement).style.background = colorAsStyle;\n      };\n      item.addEventListener(\"mouseenter\", setHoverColor, false);\n      item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n      return () => {\n        item.removeEventListener(\"mouseenter\", setHoverColor, false);\n        item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n      };\n    }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n    const shouldRenderIcon = isSelected || ColorIndicatorIcon;\n    const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n    return (\n      <Tooltip content={tooltipContent}>\n        <li\n          id={id}\n          role=\"option\"\n          aria-selected={isSelected}\n          className={cx(styles.itemWrapper, {\n            [styles.selectedColor]: isSelected,\n            [styles.active]: isActive,\n            [styles.circle]: colorShape === \"circle\"\n          })}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n        >\n          <div className={cx(styles.feedbackIndicator)} />\n          <Clickable\n            ref={itemRef}\n            role=\"presentation\"\n            aria-label={colorAriaLabel}\n            className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n              [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n            })}\n            style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n            onClick={onClick}\n            tabIndex={-1}\n            onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n          >\n            <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n              {shouldRenderIcon && (\n                <Icon\n                  icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n                  className={cx({\n                    [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n                  })}\n                  ignoreFocusStyle\n                />\n              )}\n            </div>\n          </Clickable>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","colorAriaLabel","id","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","role","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"ovBAoEA,IAAMA,EAA2BC,GAC/B,SAAAC,EAiBEC,GACE,IAhBAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAU,IAAAD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAqB,IAAAD,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACAC,EAAcf,EAAde,eACAC,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAIIkB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASnB,EAAM,GAAE,CAACA,IACrFoB,EAAeJ,EAAgBK,EAAWC,sBAAsBtB,EAAOG,GAAcH,EACrFuB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMzB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1E2B,GAAU,WACR,IAAKJ,aAAO,EAAPA,EAASK,WAAWxB,GAA2CY,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBtB,EADhE,aAAfG,EACsF,UAEA,QAE5F,EACMgC,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,CAClD,EAIA,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,EACjE,CAlBmF,CAmBrF,GAAG,CAACnC,EAAOoB,EAAcjB,EAAYa,EAAeO,EAASnB,IAE7D,IAAMkC,EAAmB9B,GAAcH,EACjCkC,EAA6BnC,EAAyC,CAAEJ,MAAOoB,GAAiB,CAAA,EACtG,OACEoB,EAAAC,cAACC,EAAO,CAACC,QAASjC,GAChB8B,EAAAC,cAAA,KAAA,CACE3B,GAAIA,EACJ8B,KAAK,SAAQ,gBACEpC,EACfqC,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgB1C,GACvBuC,EAAOI,OAASxC,GAChBoC,EAAOK,OAAwB,WAAfxC,IACjB,cACWG,GAAcsC,EAAUC,EAAuBC,kBAAmBvD,IAE/EwC,EAAAC,cAAA,MAAA,CAAKI,UAAWC,EAAGC,EAAOS,qBAC1BhB,EAAAC,cAACgB,EAAS,CACRC,IAAKnC,EACLqB,KAAK,eAAc,aACP/B,EACZgC,UAAWC,EAAGC,EAAOY,UAAWC,EAASb,EAAQc,EAAU,mBAAqBpD,IAAWwC,EAAA,CAAA,EACxFF,EAAOe,kBAAoB1D,IAE9B6B,MAAO,CAAEC,WAAY9B,EAAyC,cAAgBgB,GAC9EK,QAASA,EACTsC,UAAU,EACVC,YAAa,SAAAjC,GAAC,OAAIA,EAAEkC,gBAAgB,GAEpCzB,EAAAC,cAAA,MAAA,CAAKI,UAAWC,EAAGC,EAAOmB,uBAAwBjC,MAAOM,GACtDD,GACCE,EAAAC,cAAC0B,EAAI,CACHC,KAAM5D,EAAaD,EAAwBF,EAC3CwC,UAAWC,EAAEG,EAAA,CAAA,EACVF,EAAOsB,gBAAkBjE,IAE5BkE,kBAAgB,OAQhC"}