@vibe/core 4.5.12 → 4.5.13

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

@@ -1 +0,0 @@
-{"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 { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from \"@vibe/a11y\";\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":"kyBAkGMA,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"}

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

@@ -1,2 +0,0 @@
-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};
-//# sourceMappingURL=ColorPickerItemComponent.js.map

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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,2 +0,0 @@
-var e={itemWrapper:"itemWrapper",circle:"circle",feedbackIndicator:"feedbackIndicator",active:"active",selectedColor:"selectedColor",colorItem:"colorItem",colorIndicatorWrapper:"colorIndicatorWrapper",colorItemSizeSmall:"colorItemSizeSmall",colorItemSizeMedium:"colorItemSizeMedium",colorItemSizeLarge:"colorItemSizeLarge",colorItemTextMode:"colorItemTextMode",colorIconWhite:"colorIconWhite"};!function(e){const r="s_id-4f41e3ef6859_4_5_11";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const o=document.createElement("style");o.id=r,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper:hover:not(.active):not(.selectedColor) .feedbackIndicator {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper .colorItem {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper .colorItem .colorIndicatorWrapper {\n  display: flex;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}');export{e as default};
-//# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

package/dist/mocked_classnames/src/components/ColorPicker/services/ColorPickerStyleService.js

@@ -1,2 +0,0 @@
-import{COLOR_SIZES as r,COLOR_PADDING as n,DIALOG_WIDTH_PADDING as o}from"../ColorPickerConstants.js";var t=function(o,t){return t*(r[o]+n)},e=function(r,n){return t(r,n)+o};export{e as calculateColorPickerDialogWidth,t as calculateColorPickerWidth};
-//# sourceMappingURL=ColorPickerStyleService.js.map

package/dist/mocked_classnames/src/components/ColorPicker/services/ColorPickerStyleService.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerStyleService.js","sources":["../../../../../../src/components/ColorPicker/services/ColorPickerStyleService.ts"],"sourcesContent":["import { DIALOG_WIDTH_PADDING, COLOR_SIZES, COLOR_PADDING } from \"../ColorPickerConstants\";\nimport { type BaseSizes } from \"../../../constants/sizes\";\n\nexport const calculateColorPickerWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return numberOfColorsInLine * (COLOR_SIZES[colorSize] + COLOR_PADDING);\n};\n\nexport const calculateColorPickerDialogWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return calculateColorPickerWidth(colorSize, numberOfColorsInLine) + DIALOG_WIDTH_PADDING;\n};\n"],"names":["calculateColorPickerWidth","colorSize","numberOfColorsInLine","COLOR_SIZES","COLOR_PADDING","calculateColorPickerDialogWidth","DIALOG_WIDTH_PADDING"],"mappings":"sGAGO,IAAMA,EAA4B,SAACC,EAAsBC,GAC9D,OAAOA,GAAwBC,EAAYF,GAAaG,EAC1D,EAEaC,EAAkC,SAACJ,EAAsBC,GACpE,OAAOF,EAA0BC,EAAWC,GAAwBI,CACtE"}

package/dist/mocked_classnames/src/hooks/useFullKeyboardListeners.js

@@ -1,2 +0,0 @@
-import{useMemo as e,useCallback as n,useEffect as o}from"react";import{noop as t}from"es-toolkit";import{NavDirections as a,useKeyEvent as c,ARROW_DOWN_KEYS as i,ARROW_UP_KEYS as r,ARROW_RIGHT_KEYS as s,ARROW_LEFT_KEYS as l}from"@vibe/shared";export{ARROW_DOWN_KEYS,ARROW_LEFT_KEYS,ARROW_RIGHT_KEYS,ARROW_UP_KEYS,NavDirections}from"@vibe/shared";var u=["Enter"," "],b=["Enter"],f=["Escape"],v=["End"],k=["Home"];function O(b){var O=b.ref,d=b.onSelectionKey,E=void 0===d?t:d,g=b.onArrowNavigation,m=void 0===g?t:g,p=b.onEscape,R=void 0===p?t:p,y=b.onHome,j=void 0===y?t:y,_=b.onEnd,W=void 0===_?t:_,A=b.useDocumentEventListeners,D=void 0!==A&&A,K=b.focusOnMount,S=void 0!==K&&K,H=e((function(){if(!D)return{ref:O,preventDefault:!0,stopPropagation:!0}}),[D,O]),N=n((function(){return m(a.DOWN)}),[m]),T=n((function(){return m(a.UP)}),[m]),Y=n((function(){return m(a.RIGHT)}),[m]),L=n((function(){return m(a.LEFT)}),[m]);c(Object.assign({keys:i,callback:N},H)),c(Object.assign({keys:r,callback:T},H)),c(Object.assign({keys:s,callback:Y},H)),c(Object.assign({keys:l,callback:L},H)),c(Object.assign({keys:u,callback:E},H)),c(Object.assign({keys:f,callback:R},H)),c(Object.assign({keys:k,callback:j},H)),c(Object.assign({keys:v,callback:W},H)),o((function(){var e;S&&!D&&(null===(e=null==O?void 0:O.current)||void 0===e||e.focus())}),[S,O,D])}export{v as END_KEYS,b as ENTER_KEYS,f as ESCAPE_KEYS,k as HOME_KEYS,u as SELECTION_KEYS,O as default};
-//# sourceMappingURL=useFullKeyboardListeners.js.map

package/dist/mocked_classnames/src/hooks/useFullKeyboardListeners.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFullKeyboardListeners.js","sources":["../../../../src/hooks/useFullKeyboardListeners.ts"],"sourcesContent":["import { type MutableRefObject, useCallback, useEffect, useMemo } from \"react\";\nimport { noop } from \"es-toolkit\";\nimport useKeyEvent from \"./useKeyEvent\";\nimport { type KeyboardEventCallback } from \"../types/events\";\nimport { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS } from \"@vibe/shared\";\n\nexport { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS };\n\nexport const SELECTION_KEYS = [\"Enter\", \" \"];\nexport const ENTER_KEYS = [\"Enter\"];\nexport const ESCAPE_KEYS = [\"Escape\"];\nexport const END_KEYS = [\"End\"];\nexport const HOME_KEYS = [\"Home\"];\n\nexport default function useFullKeyboardListeners({\n  ref, // the reference for the component that listens to keyboard\n  onSelectionKey = noop,\n  onArrowNavigation = noop,\n  onEscape = noop,\n  onHome = noop,\n  onEnd = noop,\n  useDocumentEventListeners = false,\n  focusOnMount = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  onSelectionKey: KeyboardEventCallback;\n  onArrowNavigation: (type: NavDirections) => void;\n  onEscape: KeyboardEventCallback;\n  onHome?: KeyboardEventCallback;\n  onEnd?: KeyboardEventCallback;\n  useDocumentEventListeners?: boolean;\n  focusOnMount: boolean;\n}) {\n  const listenerOptions = useMemo(() => {\n    if (useDocumentEventListeners) return undefined;\n\n    return {\n      ref,\n      preventDefault: true,\n      stopPropagation: true\n    };\n  }, [useDocumentEventListeners, ref]);\n\n  const onArrowDown = useCallback(() => onArrowNavigation(NavDirections.DOWN), [onArrowNavigation]);\n  const onArrowUp = useCallback(() => onArrowNavigation(NavDirections.UP), [onArrowNavigation]);\n  const onArrowRight = useCallback(() => onArrowNavigation(NavDirections.RIGHT), [onArrowNavigation]);\n  const onArrowLeft = useCallback(() => onArrowNavigation(NavDirections.LEFT), [onArrowNavigation]);\n\n  useKeyEvent({\n    keys: ARROW_DOWN_KEYS,\n    callback: onArrowDown,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_UP_KEYS,\n    callback: onArrowUp,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_RIGHT_KEYS,\n    callback: onArrowRight,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_LEFT_KEYS,\n    callback: onArrowLeft,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: SELECTION_KEYS,\n    callback: onSelectionKey,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ESCAPE_KEYS,\n    callback: onEscape,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: HOME_KEYS,\n    callback: onHome,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: END_KEYS,\n    callback: onEnd,\n    ...listenerOptions\n  });\n\n  useEffect(() => {\n    if (!focusOnMount || useDocumentEventListeners) return;\n    ref?.current?.focus();\n  }, [focusOnMount, ref, useDocumentEventListeners]);\n}\n"],"names":["SELECTION_KEYS","ENTER_KEYS","ESCAPE_KEYS","END_KEYS","HOME_KEYS","useFullKeyboardListeners","_ref","ref","_ref$onSelectionKey","onSelectionKey","noop","_ref$onArrowNavigatio","onArrowNavigation","_ref$onEscape","onEscape","_ref$onHome","onHome","_ref$onEnd","onEnd","_ref$useDocumentEvent","useDocumentEventListeners","_ref$focusOnMount","focusOnMount","listenerOptions","useMemo","preventDefault","stopPropagation","onArrowDown","useCallback","NavDirections","DOWN","onArrowUp","UP","onArrowRight","RIGHT","onArrowLeft","LEFT","useKeyEvent","Object","assign","keys","ARROW_DOWN_KEYS","callback","ARROW_UP_KEYS","ARROW_RIGHT_KEYS","ARROW_LEFT_KEYS","useEffect","_a","current","focus"],"mappings":"8VAQaA,EAAiB,CAAC,QAAS,KAC3BC,EAAa,CAAC,SACdC,EAAc,CAAC,UACfC,EAAW,CAAC,OACZC,EAAY,CAAC,QAEF,SAAAC,EAAwBC,GAkB/C,IAjBCC,EAAGD,EAAHC,IAAGC,EAAAF,EACHG,eAAAA,OAAiBC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAL,EACrBM,kBAAAA,OAAoBF,IAAHC,EAAGD,EAAIC,EAAAE,EAAAP,EACxBQ,SAAAA,OAAWJ,IAAHG,EAAGH,EAAIG,EAAAE,EAAAT,EACfU,OAAAA,OAASN,IAAHK,EAAGL,EAAIK,EAAAE,EAAAX,EACbY,MAAAA,OAAQR,IAAHO,EAAGP,EAAIO,EAAAE,EAAAb,EACZc,0BAAAA,OAA4B,IAAHD,GAAQA,EAAAE,EAAAf,EACjCgB,aAAAA,OAAe,IAAHD,GAAQA,EAWdE,EAAkBC,GAAQ,WAC9B,IAAIJ,EAEJ,MAAO,CACLb,IAAAA,EACAkB,gBAAgB,EAChBC,iBAAiB,EAErB,GAAG,CAACN,EAA2Bb,IAEzBoB,EAAcC,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcC,QAAO,CAAClB,IACxEmB,EAAYH,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcG,MAAK,CAACpB,IACpEqB,EAAeL,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcK,SAAQ,CAACtB,IAC1EuB,EAAcP,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcO,QAAO,CAACxB,IAE9EyB,EAAWC,OAAAC,OAAA,CACTC,KAAMC,EACNC,SAAUf,GACPJ,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMG,EACND,SAAUX,GACPR,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMI,EACNF,SAAUT,GACPV,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMK,EACNH,SAAUP,GACPZ,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMxC,EACN0C,SAAUjC,GACPc,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMtC,EACNwC,SAAU5B,GACPS,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMpC,EACNsC,SAAU1B,GACPO,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMrC,EACNuC,SAAUxB,GACPK,IAGLuB,GAAU,iBACHxB,IAAgBF,IACT,QAAZ2B,EAAAxC,aAAA,EAAAA,EAAKyC,eAAO,IAAAD,GAAAA,EAAEE,QACf,GAAE,CAAC3B,EAAcf,EAAKa,GACzB"}

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js

@@ -1,2 +0,0 @@
-import"react";import"es-toolkit";import{NavDirections as n}from"@vibe/shared";function t(t){var e=t.direction,i=t.numberOfItemsInLine,r=t.itemsCount,u=function(){var t=Math.floor(i/2);if(e===n.UP)return(Math.ceil(r/i)-1)*i+t;if(e===n.DOWN)return t;if(e===n.LEFT){for(var u=i-1,o=Math.floor((r-1)/2);o>u;)u+=i;return u}if(e===n.RIGHT){for(var a=0,c=Math.floor((r-1)/2);c>a+i;)a+=i;return a}}();return Math.max(0,Math.min(u,r-1))}function e(t){var e=t.activeIndex,i=t.itemsCount,r=t.numberOfItemsInLine,u=t.circularNavigation,o=void 0!==u&&u,a=function(n){return Math.ceil((n+1)/r)},c=function(n){var t=e+(n?1:-1);if(0>t||t>=i){if(!o)return{isOutbound:!0};0>t?t=i-1:i>t||(t=0)}return a(e)!==a(t)?{isOutbound:!0}:{isOutbound:!1,nextIndex:t}},d=function(n){var t=e+r*(n?1:-1);return 0>t||t>=i?{isOutbound:!0}:{isOutbound:!1,nextIndex:t}};switch(t.direction){case n.RIGHT:return c(!0);case n.LEFT:return c(!1);case n.DOWN:return d(!0);case n.UP:return d(!1)}}function i(n){for(var t=n.itemsCount,i=n.numberOfItemsInLine,r=n.direction,u=n.disabledIndexes,o=void 0===u?[]:u,a=n.circularNavigation,c=void 0!==a&&a,d=e({activeIndex:n.activeIndex,itemsCount:t,numberOfItemsInLine:i,direction:r,circularNavigation:c});!d.isOutbound&&o.includes(d.nextIndex);)d=e({activeIndex:d.nextIndex,itemsCount:t,numberOfItemsInLine:i,direction:r,circularNavigation:c});return d}export{i as calcActiveIndexAfterArrowNavigation,t as getActiveIndexFromInboundNavigation};
-//# sourceMappingURL=gridKeyboardNavigationHelper.js.map

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  circularNavigation?: boolean;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    let nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n\n    if (nextIndex < 0 || nextIndex >= itemsCount) {\n      if (circularNavigation) {\n        if (nextIndex < 0) {\n          nextIndex = itemsCount - 1;\n        } else if (nextIndex >= itemsCount) {\n          nextIndex = 0;\n        }\n      } else {\n        return { isOutbound: true };\n      }\n    }\n\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({\n    activeIndex,\n    itemsCount,\n    numberOfItemsInLine,\n    direction,\n    circularNavigation\n  });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      circularNavigation\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","_ref2$circularNavigat","circularNavigation","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","_ref3$circularNavigat","includes"],"mappings":"8EAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACT,CACA,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACT,EAGeG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAY3C,IAXCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBACSoB,EAAAF,EACTG,mBAAAA,OAAqB,IAAHD,GAAQA,EAQpBE,EAAe,SAACC,GAAa,OAAKnB,KAAKI,MAAMe,EAAQ,GAAKvB,EAAoB,EAE9EwB,EAAmB,SAACC,GACxB,IAAIC,EAAYP,GAAeM,EAAkB,GAAK,GAEtD,GAAgB,EAAZC,GAAiBA,GAAazB,EAAY,CAC5C,IAAIoB,EAOF,MAAO,CAAEM,YAAY,GANL,EAAZD,EACFA,EAAYzB,EAAa,EACHA,EAAbyB,IACTA,EAAY,EAKlB,CAIA,OAFoBJ,EAAaH,KACXG,EAAaI,GAE1B,CAAEC,YAAY,GAGhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYP,EAAcnB,GAAuByB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdzB,EACZ,CAAE0B,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA3CSR,EAATnB,WA4CE,KAAKO,EAAcO,MACjB,OAAOW,GAAiB,GAC1B,KAAKlB,EAAcI,KACjB,OAAOc,GAAiB,GAC1B,KAAKlB,EAAcG,KACjB,OAAOmB,GAAe,GACxB,KAAKtB,EAAcC,GACjB,OAAOqB,GAAe,GAE5B,UAEgBC,EAAmCC,GAsBjD,IARD,IAZC7B,EAAU6B,EAAV7B,WACAD,EAAmB8B,EAAnB9B,oBACAD,EAAS+B,EAAT/B,UAASgC,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACpBT,mBAAAA,OAAqB,IAAHY,GAAQA,EAStBtB,EAASM,EAAoC,CAC/CE,YAfSW,EAAXX,YAgBElB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,KAEMV,EAAOgB,YAAcK,EAAgBE,SAASvB,EAAOe,YAC3Df,EAASM,EAAoC,CAC3CE,YAAaR,EAAOe,UACpBzB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,IAIJ,OAAOV,CACT"}

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js

@@ -1,2 +0,0 @@
-import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as t,useCallback as r,useEffect as o}from"react";import{GridKeyboardNavigationContext as u}from"@vibe/a11y/mockedClassNames";import a from"../useFullKeyboardListeners.js";import{useLastNavigationDirection as c,useEventListener as l}from"@vibe/shared";import{getActiveIndexFromInboundNavigation as d,calcActiveIndexAfterArrowNavigation as f}from"./gridKeyboardNavigationHelper.js";var s=-1;function v(v){var m=v.ref,b=v.itemsCount,I=v.numberOfItemsInLine,g=v.onItemClicked,p=v.entryFocusStrategy,y=void 0===p?"directional":p,N=v.getItemByIndex,x=void 0===N?function(n){}:N,O=v.focusOnMount,h=void 0!==O&&O,A=v.focusItemIndexOnMount,k=void 0===A?s:A,C=v.disabledIndexes,L=void 0===C?[]:C,S=v.circularNavigation,j=void 0!==S&&S,H=e(h&&k!==s),K=n(H,2),M=K[0],w=K[1],B=i(!1),E=e(M?k:s),F=n(E,2),_=F[0],D=F[1],P=e(!0),R=n(P,2),T=R[0],q=R[1],z=t(u),G=r((function(){var n;q(!0);var e=L.includes(0)&&b>L.length&&null!==(n=Array.from({length:b},(function(n,e){return e})).find((function(n){return!L.includes(n)})))&&void 0!==n?n:0;D(e)}),[L,b]),J=r((function(){var n;q(!0);var e=L.includes(b-1)&&b>L.length&&null!==(n=Array.from({length:b},(function(n,e){return b-1-e})).find((function(n){return!L.includes(n)})))&&void 0!==n?n:b-1;D(e)}),[L,b]);o((function(){B.current?w(!1):B.current=!0}),[_]);var Q=r((function(){var n;return null===(n=m.current)||void 0===n?void 0:n.blur()}),[m]),U=c().lastNavigationDirectionRef,V=r((function(){if(_===s){var n=U.current;D("directional"===y&&n?d({direction:n,numberOfItemsInLine:I,itemsCount:b}):0),q(!0)}else q(!0)}),[_,y,b,U,I,D,q]),W=r((function(){q(!1)}),[q]),X=r((function(){q(!0),D(s)}),[D]);l({eventName:"focus",callback:V,ref:m}),l({eventName:"mousedown",callback:W,ref:m}),l({eventName:"blur",callback:X,ref:m}),o((function(){var n;_>-1&&(null===(n=m.current)||void 0===n||n.focus())}),[_,m]);var Y=r((function(n){q(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),D(n),g(x(n),n)}),[D,g,x]),Z=r((function(){if(T)return Y(_,!0)}),[T,Y,_]);return a({ref:m,onSelectionKey:Z,onArrowNavigation:function(n){if(q(!0),_!==s){var e=f({activeIndex:_,itemsCount:b,numberOfItemsInLine:I,direction:n,disabledIndexes:L,circularNavigation:j}),i=e.nextIndex;e.isOutbound?null==z||z.onOutboundNavigation(m,n):D(i)}else D(0)},onEscape:Q,onHome:G,onEnd:J,focusOnMount:h}),{activeIndex:T?_:s,onSelectionAction:Y,isInitialActiveState:M}}export{v as default};
-//# sourceMappingURL=useGridKeyboardNavigation.js.map

package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { type MutableRefObject, type ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"@vibe/a11y\";\nimport useFullKeyboardListeners, { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport { useEventListener, useLastNavigationDirection } from \"@vibe/shared\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes,\n      circularNavigation\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  const onHomeNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const firstEnabledIndex = disabledIndexes.includes(0)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => i).find(i => !disabledIndexes.includes(i)) ?? 0\n        : 0\n      : 0;\n    setActiveIndex(firstEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  const onEndNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const lastEnabledIndex = disabledIndexes.includes(itemsCount - 1)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => itemsCount - 1 - i).find(i => !disabledIndexes.includes(i)) ??\n          itemsCount - 1\n        : itemsCount - 1\n      : itemsCount - 1;\n    setActiveIndex(lastEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    onHome: onHomeNavigation,\n    onEnd: onEndNavigation,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_ref$circularNavigati","circularNavigation","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","onHomeNavigation","useCallback","firstEnabledIndex","includes","length","_a","Array","from","_","i","find","onEndNavigation","lastEnabledIndex","useEffect","current","blurTargetElement","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape","onHome","onEnd"],"mappings":"ufASA,IAAMA,GAAmB,EA0BD,SAAAC,EAAyBC,GAsBhD,IArBCC,EAAGD,EAAHC,IACAC,EAAUF,EAAVE,WACAC,EAAmBH,EAAnBG,oBACAC,EAAaJ,EAAbI,cAAaC,EAAAL,EACbM,mBAAAA,OAAqB,IAAHD,EAAG,cAAaA,EAAAE,EAAAP,EAClCQ,eAAAA,OAAiB,IAAHD,EAAG,SAACE,GAAqB,EAAAF,EAAAG,EAAAV,EACvCW,aAAAA,OAAe,IAAHD,GAAQA,EAAAE,EAAAZ,EACpBa,sBAAAA,OAAwBf,IAAHc,EAAGd,EAAec,EAAAE,EAAAd,EACvCe,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAhB,EACpBiB,mBAAAA,OAAqB,IAAHD,GAAQA,EAa1BE,EAAwDC,EACtDR,GAAgBE,IAA0Bf,GAC3CsB,EAAAC,EAAAH,EAAA,GAFMI,EAAoBF,EAAA,GAAEG,EAAuBH,EAAA,GAG9CI,EAAkCC,GAAO,GAC/CC,EAAsCP,EAASG,EAAuBT,EAAwBf,GAAgB6B,EAAAN,EAAAK,EAAA,GAAvGE,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAClCG,EAAoDX,GAAS,GAAKY,EAAAV,EAAAS,EAAA,GAA3DE,EAAkBD,EAAA,GAAEE,EAAqBF,EAAA,GAE1CG,EAAkBC,EAAWC,GAwB7BC,EAAmBC,GAAY,iBACnCL,GAAsB,GACtB,IAAMM,EAAoBxB,EAAgByB,SAAS,IACtBtC,EAAzBa,EAAgB0B,gBACdC,EAAAC,MAAMC,KAAK,CAAEH,OAAQvC,IAAc,SAAC2C,EAAGC,GAAC,OAAKA,CAAC,IAAEC,MAAK,SAAAD,GAAC,OAAK/B,EAAgByB,SAASM,EAAE,mBAExF,EACJjB,EAAeU,EACjB,GAAG,CAACxB,EAAiBb,IAEf8C,EAAkBV,GAAY,iBAClCL,GAAsB,GACtB,IAAMgB,EAAmBlC,EAAgByB,SAAStC,EAAa,IAClCA,EAAzBa,EAAgB0B,QAEd,QADAC,EAAAC,MAAMC,KAAK,CAAEH,OAAQvC,IAAc,SAAC2C,EAAGC,GAAC,OAAK5C,EAAa,EAAI4C,CAAC,IAAEC,MAAK,SAAAD,GAAC,OAAK/B,EAAgByB,SAASM,EAAG,WACxG,IAAAJ,EAAAA,EAEFxC,EAAa,EACjB2B,EAAeoB,EACjB,GAAG,CAAClC,EAAiBb,IAErBgD,GAAU,WACH1B,EAAgC2B,QAKrC5B,GAAwB,GAJtBC,EAAgC2B,SAAU,CAK9C,GAAG,CAACvB,IAEJ,IAAMwB,EAAoBd,GAAY,WAAK,IAAAI,EAAC,OAAa,QAAbA,EAAAzC,EAAIkD,eAAS,IAAAT,OAAA,EAAAA,EAAAW,MAAM,GAAE,CAACpD,IAE1DqD,EAA+BC,IAA/BD,2BACFE,EAAUlB,GAAY,WAC1B,GAAIV,IAAgB9B,EAApB,CAKA,IAAM2D,EAAYH,EAA2BH,QAC7CtB,EACyB,gBAAvBvB,GAAwCmD,EACpCC,EAAoC,CAAED,UAAAA,EAAWtD,oBAAAA,EAAqBD,WAAAA,IACtE,GAEN+B,GAAsB,EARtB,MAFEA,GAAsB,EAW1B,GAAG,CACDL,EACAtB,EACAJ,EACAoD,EACAnD,EACA0B,EACAI,IAGI0B,EAAcrB,GAAY,WAE9BL,GAAsB,EACxB,GAAG,CAACA,IAEE2B,EAAStB,GAAY,WAGzBL,GAAsB,GACtBJ,EAAe/B,EACjB,GAAG,CAAC+B,IAEJgC,EAAiB,CAAEC,UAAW,QAASC,SAAUP,EAASvD,IAAAA,IAC1D4D,EAAiB,CAAEC,UAAW,YAAaC,SAAUJ,EAAa1D,IAAAA,IAClE4D,EAAiB,CAAEC,UAAW,OAAQC,SAAUH,EAAQ3D,IAAAA,IAExDiD,GAAU,iBACJtB,GAAe,IACJ,QAAbc,EAAAzC,EAAIkD,eAAS,IAAAT,GAAAA,EAAAsB,QAEjB,GAAG,CAACpC,EAAa3B,IAEjB,IAAMgE,EAAoB3B,GACxB,SAAC4B,GACCjC,EAD8BkC,UAAA1B,OAAA,QAAA2B,IAAAD,UAAA,IAAAA,UAAA,IAE9BtC,EAAeqC,GAEf9D,EAAcI,EAAe0D,GAAQA,EACtC,GACD,CAACrC,EAAgBzB,EAAeI,IAG5B6D,EAAsB/B,GAAY,WACtC,GAAKN,EAGL,OAAOiC,EAAkBrC,GAAa,EACvC,GAAE,CAACI,EAAoBiC,EAAmBrC,IAc3C,OAZA0C,EAAyB,CACvBrE,IAAAA,EACAsE,eAAgBF,EAChBG,kBAxHwB,SAACf,GAEzB,GADAxB,GAAsB,GAClBL,IAAgB9B,EAApB,CAKA,IAAA2E,EAAkCC,EAAoC,CACpE9C,YAAAA,EACA1B,WAAAA,EACAC,oBAAAA,EACAsD,UAAAA,EACA1C,gBAAAA,EACAE,mBAAAA,IANkB0D,EAASF,EAATE,UAAFF,EAAVG,WASN1C,SAAAA,EAAiB2C,qBAAqB5E,EAAKwD,GAE3C5B,EAAe8C,EAbjB,MAFE9C,EAAe,IAsHjBiD,SAAU1B,EACV2B,OAAQ1C,EACR2C,MAAOhC,EACPrC,aAAAA,IAKK,CACLiB,YAF0BI,EAAqBJ,EAAc9B,EAG7DmE,kBAAAA,EACA3C,qBAAAA,EAEJ"}

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

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

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

@@ -1 +0,0 @@
-{"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":"6xBAiGMA,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"}

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

@@ -1,2 +0,0 @@
-var e={colorPicker:"colorPicker_3985f2c06f",colorPickerDialogContent:"colorPickerDialogContent_9e80ddd6ea"};!function(e){const t="s_id-ffacbf9b6446_4_5_11";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_3985f2c06f.colorPickerDialogContent_9e80ddd6ea {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
-//# sourceMappingURL=ColorPicker.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerConstants.js","sources":["../../../../src/components/ColorPicker/ColorPickerConstants.ts"],"sourcesContent":["import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n  [SIZES.SMALL]: 24,\n  [SIZES.MEDIUM]: 32,\n  [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n"],"names":["DEFAULT_NUMBER_OF_COLORS_IN_LINE","COLOR_SIZES","_defineProperty","SIZES","SMALL","MEDIUM","LARGE","COLOR_PADDING","DIALOG_WIDTH_PADDING"],"mappings":"iIAEO,IAAMA,EAAmC,EAEnCC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAMC,MAAQ,IACdD,EAAME,OAAS,IACfF,EAAMG,MAAQ,IAGJC,EAAgB,EAChBC,EAAuB"}

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

@@ -1,2 +0,0 @@
-import t,{forwardRef as e}from"react";import o from"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import r from"./ColorPickerClearButton.module.scss.js";import n from"../../../../../components/button/dist/Button/Button.js";import{NOOP as i}from"../../../../../shared/dist/utils/function-utils.js";var s=e((function(e,s){var a=e.text,l=e.Icon,m=o({ref:s,itemsCount:1,numberOfItemsInLine:1,onItemClicked:e.onClick,getItemByIndex:i}).onSelectionAction;return t.createElement(n,{ref:s,size:"small",kind:"tertiary",onClick:function(){return m(-1)},blurOnMouseUp:!1,className:r.clearColorButton},t.createElement(l,{size:"16",className:r.clearColorIcon}),a||"Clear")}));export{s as default};
-//# sourceMappingURL=ColorPickerClearButton.js.map

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

@@ -1 +0,0 @@
-{"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":"qUAuBMA,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"}

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

@@ -1,2 +0,0 @@
-var e={clearColorIcon:"clearColorIcon_711e9724b5",clearColorButton:"clearColorButton_2832b1cc8e"};!function(e){const n="s_id-745441469971_4_5_11";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_711e9724b5 {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton_2832b1cc8e {\n  margin-top: var(--space-8);\n}");export{e as default};
-//# sourceMappingURL=ColorPickerClearButton.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerClearButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,2 +0,0 @@
-import{slicedToArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as r,useCallback as t,useState as n}from"react";import i from"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import c from"../ColorPickerItemComponent/ColorPickerItemComponent.js";import l from"./ColorPickerColorsGrid.module.scss.js";import{useIsomorphicLayoutEffect as a}from"../../../../../shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js";var d=0,s=function(e){var r=n(),t=o(r,2),i=t[0],c=t[1];return a((function(){c(e||"color-picker-grid-".concat(d++))}),[e]),i},u=function(o,e){return e&&e[o]?e[o]:function(o){return o.replace(/-|_/g," ").replace(/(?:^|\s)\S/g,(function(o){return o.toUpperCase()}))}(o)},m=r((function(o,r){var n=o.onColorClicked,a=o.colorsToRender,d=o.numberOfColorsInLine,m=o.focusOnMount,f=o.value,p=o.colorStyle,I=o.ColorIndicatorIcon,C=o.shouldRenderIndicatorWithoutBackground,v=o.SelectedIndicatorIcon,y=o.colorSize,h=o.tooltipContentByColor,k=o.colorShape,S=o.showColorNameTooltip,g=o.id,b=o["data-testid"],A=t((function(o){return a[o]}),[a]),j=i({focusOnMount:m,ref:r,onItemClicked:n,itemsCount:a.length,numberOfItemsInLine:d,entryFocusStrategy:"first",getItemByIndex:A}),x=j.activeIndex,B=j.onSelectionAction,G=s(g),L=function(o){return G?"".concat(G,"-item-").concat(o):void 0},N=0>x?void 0:L(x);return e.createElement("ul",{className:l.colorsGrid,ref:r,tabIndex:0,id:g,"data-testid":b,role:"listbox","aria-activedescendant":N},a.map((function(o,r){return e.createElement(c,{key:o,id:L(r),color:o,colorAriaLabel:u(o,h),onColorClicked:function(){return B(r)},shouldRenderIndicatorWithoutBackground:I&&C,colorStyle:p,ColorIndicatorIcon:I,SelectedIndicatorIcon:v,isSelected:Array.isArray(f)?f.includes(o):f===o,isActive:r===x,colorSize:y,tooltipContent:S?u(o,h):void 0,colorShape:k})})))}));export{m as default};
-//# sourceMappingURL=ColorPickerColorsGrid.js.map

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

@@ -1 +0,0 @@
-{"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":"6dAYA,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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerColorsGrid.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

@@ -1 +0,0 @@
-{"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 { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from \"@vibe/a11y\";\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":"g6BAkGMA,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"}

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

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

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

@@ -1 +0,0 @@
-{"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":"u1BAoEMA,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"}

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

@@ -1,2 +0,0 @@
-var e={itemWrapper:"itemWrapper_0e529adade",circle:"circle_e1305bf343",feedbackIndicator:"feedbackIndicator_05aa38a23f",active:"active_d1c18dd4f9",selectedColor:"selectedColor_2f5fb6ac92",colorItem:"colorItem_95febf7da9",colorIndicatorWrapper:"colorIndicatorWrapper_b450f348cf",colorItemSizeSmall:"colorItemSizeSmall_117b6ac09f",colorItemSizeMedium:"colorItemSizeMedium_41a10329c3",colorItemSizeLarge:"colorItemSizeLarge_7e84fa5592",colorItemTextMode:"colorItemTextMode_0320f27174",colorIconWhite:"colorIconWhite_62821d6e9d"};!function(e){const r="s_id-4f41e3ef6859_4_5_11";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_0e529adade.circle_e1305bf343 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_0e529adade {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_0e529adade .feedbackIndicator_05aa38a23f {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_0e529adade:focus,\n.itemWrapper_0e529adade:focus-visible,\n.itemWrapper_0e529adade.active_d1c18dd4f9 {\n  outline: none;\n}\n\n.itemWrapper_0e529adade:focus .feedbackIndicator_05aa38a23f:before,\n.itemWrapper_0e529adade:focus-visible .feedbackIndicator_05aa38a23f:before,\n.itemWrapper_0e529adade.active_d1c18dd4f9 .feedbackIndicator_05aa38a23f:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n\n.itemWrapper_0e529adade:focus .feedbackIndicator_05aa38a23f:after,\n.itemWrapper_0e529adade:focus-visible .feedbackIndicator_05aa38a23f:after,\n.itemWrapper_0e529adade.active_d1c18dd4f9 .feedbackIndicator_05aa38a23f:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n/* active elements have no "hover feedback" */\n\n.itemWrapper_0e529adade:hover:not(.active_d1c18dd4f9):not(.selectedColor_2f5fb6ac92) .feedbackIndicator_05aa38a23f {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: var(--primary-background-hover-color);\n  pointer-events: none;\n}\n\n.itemWrapper_0e529adade .colorItem_95febf7da9 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper_0e529adade .colorItem_95febf7da9 .colorIndicatorWrapper_b450f348cf {\n  display: flex;\n}\n\n.itemWrapper_0e529adade .colorItem_95febf7da9.colorItemSizeSmall_117b6ac09f {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_0e529adade .colorItem_95febf7da9.colorItemSizeMedium_41a10329c3 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_0e529adade .colorItem_95febf7da9.colorItemSizeLarge_7e84fa5592 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_0e529adade.selectedColor_2f5fb6ac92 {\n  position: relative;\n}\n\n.itemWrapper_0e529adade.selectedColor_2f5fb6ac92:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: var(--primary-color);\n  pointer-events: none;\n}\n\n.itemWrapper_0e529adade.selectedColor_2f5fb6ac92 .feedbackIndicator_05aa38a23f:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_0e529adade .colorItemTextMode_0320f27174:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_0e529adade .colorIconWhite_62821d6e9d {\n  color: var(--color-snow_white);\n}');export{e as default};
-//# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerItemComponent.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,2 +0,0 @@
-import{COLOR_SIZES as r,COLOR_PADDING as n,DIALOG_WIDTH_PADDING as o}from"../ColorPickerConstants.js";var t=function(o,t){return t*(r[o]+n)},e=function(r,n){return t(r,n)+o};export{e as calculateColorPickerDialogWidth,t as calculateColorPickerWidth};
-//# sourceMappingURL=ColorPickerStyleService.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerStyleService.js","sources":["../../../../../src/components/ColorPicker/services/ColorPickerStyleService.ts"],"sourcesContent":["import { DIALOG_WIDTH_PADDING, COLOR_SIZES, COLOR_PADDING } from \"../ColorPickerConstants\";\nimport { type BaseSizes } from \"../../../constants/sizes\";\n\nexport const calculateColorPickerWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return numberOfColorsInLine * (COLOR_SIZES[colorSize] + COLOR_PADDING);\n};\n\nexport const calculateColorPickerDialogWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return calculateColorPickerWidth(colorSize, numberOfColorsInLine) + DIALOG_WIDTH_PADDING;\n};\n"],"names":["calculateColorPickerWidth","colorSize","numberOfColorsInLine","COLOR_SIZES","COLOR_PADDING","calculateColorPickerDialogWidth","DIALOG_WIDTH_PADDING"],"mappings":"sGAGO,IAAMA,EAA4B,SAACC,EAAsBC,GAC9D,OAAOA,GAAwBC,EAAYF,GAAaG,EAC1D,EAEaC,EAAkC,SAACJ,EAAsBC,GACpE,OAAOF,EAA0BC,EAAWC,GAAwBI,CACtE"}

package/dist/src/hooks/useFullKeyboardListeners.js

@@ -1,2 +0,0 @@
-import{useMemo as n,useCallback as e,useEffect as t}from"react";import{noop as o}from"es-toolkit";import{NavDirections as s,ARROW_DOWN_KEYS as a,ARROW_UP_KEYS as c,ARROW_RIGHT_KEYS as i,ARROW_LEFT_KEYS as r}from"../../shared/dist/constants/navDirections.js";export{ARROW_DOWN_KEYS,ARROW_LEFT_KEYS,ARROW_RIGHT_KEYS,ARROW_UP_KEYS,NavDirections}from"../../shared/dist/constants/navDirections.js";import{useKeyEvent as l}from"../../shared/dist/hooks/useKeyEvent.js";var u=["Enter"," "],f=["Enter"],v=["Escape"],d=["End"],k=["Home"];function b(f){var b=f.ref,O=f.onSelectionKey,E=void 0===O?o:O,m=f.onArrowNavigation,j=void 0===m?o:m,p=f.onEscape,g=void 0===p?o:p,y=f.onHome,R=void 0===y?o:y,_=f.onEnd,D=void 0===_?o:_,K=f.useDocumentEventListeners,W=void 0!==K&&K,A=f.focusOnMount,S=void 0!==A&&A,h=n((function(){if(!W)return{ref:b,preventDefault:!0,stopPropagation:!0}}),[W,b]),H=e((function(){return j(s.DOWN)}),[j]),N=e((function(){return j(s.UP)}),[j]),T=e((function(){return j(s.RIGHT)}),[j]),Y=e((function(){return j(s.LEFT)}),[j]);l(Object.assign({keys:a,callback:H},h)),l(Object.assign({keys:c,callback:N},h)),l(Object.assign({keys:i,callback:T},h)),l(Object.assign({keys:r,callback:Y},h)),l(Object.assign({keys:u,callback:E},h)),l(Object.assign({keys:v,callback:g},h)),l(Object.assign({keys:k,callback:R},h)),l(Object.assign({keys:d,callback:D},h)),t((function(){var n;S&&!W&&(null===(n=null==b?void 0:b.current)||void 0===n||n.focus())}),[S,b,W])}export{d as END_KEYS,f as ENTER_KEYS,v as ESCAPE_KEYS,k as HOME_KEYS,u as SELECTION_KEYS,b as default};
-//# sourceMappingURL=useFullKeyboardListeners.js.map

package/dist/src/hooks/useFullKeyboardListeners.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFullKeyboardListeners.js","sources":["../../../src/hooks/useFullKeyboardListeners.ts"],"sourcesContent":["import { type MutableRefObject, useCallback, useEffect, useMemo } from \"react\";\nimport { noop } from \"es-toolkit\";\nimport useKeyEvent from \"./useKeyEvent\";\nimport { type KeyboardEventCallback } from \"../types/events\";\nimport { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS } from \"@vibe/shared\";\n\nexport { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS };\n\nexport const SELECTION_KEYS = [\"Enter\", \" \"];\nexport const ENTER_KEYS = [\"Enter\"];\nexport const ESCAPE_KEYS = [\"Escape\"];\nexport const END_KEYS = [\"End\"];\nexport const HOME_KEYS = [\"Home\"];\n\nexport default function useFullKeyboardListeners({\n  ref, // the reference for the component that listens to keyboard\n  onSelectionKey = noop,\n  onArrowNavigation = noop,\n  onEscape = noop,\n  onHome = noop,\n  onEnd = noop,\n  useDocumentEventListeners = false,\n  focusOnMount = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  onSelectionKey: KeyboardEventCallback;\n  onArrowNavigation: (type: NavDirections) => void;\n  onEscape: KeyboardEventCallback;\n  onHome?: KeyboardEventCallback;\n  onEnd?: KeyboardEventCallback;\n  useDocumentEventListeners?: boolean;\n  focusOnMount: boolean;\n}) {\n  const listenerOptions = useMemo(() => {\n    if (useDocumentEventListeners) return undefined;\n\n    return {\n      ref,\n      preventDefault: true,\n      stopPropagation: true\n    };\n  }, [useDocumentEventListeners, ref]);\n\n  const onArrowDown = useCallback(() => onArrowNavigation(NavDirections.DOWN), [onArrowNavigation]);\n  const onArrowUp = useCallback(() => onArrowNavigation(NavDirections.UP), [onArrowNavigation]);\n  const onArrowRight = useCallback(() => onArrowNavigation(NavDirections.RIGHT), [onArrowNavigation]);\n  const onArrowLeft = useCallback(() => onArrowNavigation(NavDirections.LEFT), [onArrowNavigation]);\n\n  useKeyEvent({\n    keys: ARROW_DOWN_KEYS,\n    callback: onArrowDown,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_UP_KEYS,\n    callback: onArrowUp,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_RIGHT_KEYS,\n    callback: onArrowRight,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_LEFT_KEYS,\n    callback: onArrowLeft,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: SELECTION_KEYS,\n    callback: onSelectionKey,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ESCAPE_KEYS,\n    callback: onEscape,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: HOME_KEYS,\n    callback: onHome,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: END_KEYS,\n    callback: onEnd,\n    ...listenerOptions\n  });\n\n  useEffect(() => {\n    if (!focusOnMount || useDocumentEventListeners) return;\n    ref?.current?.focus();\n  }, [focusOnMount, ref, useDocumentEventListeners]);\n}\n"],"names":["SELECTION_KEYS","ENTER_KEYS","ESCAPE_KEYS","END_KEYS","HOME_KEYS","useFullKeyboardListeners","_ref","ref","_ref$onSelectionKey","onSelectionKey","noop","_ref$onArrowNavigatio","onArrowNavigation","_ref$onEscape","onEscape","_ref$onHome","onHome","_ref$onEnd","onEnd","_ref$useDocumentEvent","useDocumentEventListeners","_ref$focusOnMount","focusOnMount","listenerOptions","useMemo","preventDefault","stopPropagation","onArrowDown","useCallback","NavDirections","DOWN","onArrowUp","UP","onArrowRight","RIGHT","onArrowLeft","LEFT","useKeyEvent","Object","assign","keys","ARROW_DOWN_KEYS","callback","ARROW_UP_KEYS","ARROW_RIGHT_KEYS","ARROW_LEFT_KEYS","useEffect","_a","current","focus"],"mappings":"kdAQaA,EAAiB,CAAC,QAAS,KAC3BC,EAAa,CAAC,SACdC,EAAc,CAAC,UACfC,EAAW,CAAC,OACZC,EAAY,CAAC,QAEF,SAAAC,EAAwBC,GAkB/C,IAjBCC,EAAGD,EAAHC,IAAGC,EAAAF,EACHG,eAAAA,OAAiBC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAL,EACrBM,kBAAAA,OAAoBF,IAAHC,EAAGD,EAAIC,EAAAE,EAAAP,EACxBQ,SAAAA,OAAWJ,IAAHG,EAAGH,EAAIG,EAAAE,EAAAT,EACfU,OAAAA,OAASN,IAAHK,EAAGL,EAAIK,EAAAE,EAAAX,EACbY,MAAAA,OAAQR,IAAHO,EAAGP,EAAIO,EAAAE,EAAAb,EACZc,0BAAAA,OAA4B,IAAHD,GAAQA,EAAAE,EAAAf,EACjCgB,aAAAA,OAAe,IAAHD,GAAQA,EAWdE,EAAkBC,GAAQ,WAC9B,IAAIJ,EAEJ,MAAO,CACLb,IAAAA,EACAkB,gBAAgB,EAChBC,iBAAiB,EAErB,GAAG,CAACN,EAA2Bb,IAEzBoB,EAAcC,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcC,QAAO,CAAClB,IACxEmB,EAAYH,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcG,MAAK,CAACpB,IACpEqB,EAAeL,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcK,SAAQ,CAACtB,IAC1EuB,EAAcP,GAAY,WAAA,OAAMhB,EAAkBiB,EAAcO,QAAO,CAACxB,IAE9EyB,EAAWC,OAAAC,OAAA,CACTC,KAAMC,EACNC,SAAUf,GACPJ,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMG,EACND,SAAUX,GACPR,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMI,EACNF,SAAUT,GACPV,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMK,EACNH,SAAUP,GACPZ,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMxC,EACN0C,SAAUjC,GACPc,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMtC,EACNwC,SAAU5B,GACPS,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMpC,EACNsC,SAAU1B,GACPO,IAGLc,EAAWC,OAAAC,OAAA,CACTC,KAAMrC,EACNuC,SAAUxB,GACPK,IAGLuB,GAAU,iBACHxB,IAAgBF,IACT,QAAZ2B,EAAAxC,aAAA,EAAAA,EAAKyC,eAAO,IAAAD,GAAAA,EAAEE,QACf,GAAE,CAAC3B,EAAcf,EAAKa,GACzB"}

package/dist/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js

@@ -1,2 +0,0 @@
-import"react";import"es-toolkit";import{NavDirections as n}from"../../../shared/dist/constants/navDirections.js";function t(t){var i=t.direction,e=t.numberOfItemsInLine,r=t.itemsCount,o=function(){var t=Math.floor(e/2);if(i===n.UP)return(Math.ceil(r/e)-1)*e+t;if(i===n.DOWN)return t;if(i===n.LEFT){for(var o=e-1,u=Math.floor((r-1)/2);u>o;)o+=e;return o}if(i===n.RIGHT){for(var a=0,c=Math.floor((r-1)/2);c>a+e;)a+=e;return a}}();return Math.max(0,Math.min(o,r-1))}function i(t){var i=t.activeIndex,e=t.itemsCount,r=t.numberOfItemsInLine,o=t.circularNavigation,u=void 0!==o&&o,a=function(n){return Math.ceil((n+1)/r)},c=function(n){var t=i+(n?1:-1);if(0>t||t>=e){if(!u)return{isOutbound:!0};0>t?t=e-1:e>t||(t=0)}return a(i)!==a(t)?{isOutbound:!0}:{isOutbound:!1,nextIndex:t}},s=function(n){var t=i+r*(n?1:-1);return 0>t||t>=e?{isOutbound:!0}:{isOutbound:!1,nextIndex:t}};switch(t.direction){case n.RIGHT:return c(!0);case n.LEFT:return c(!1);case n.DOWN:return s(!0);case n.UP:return s(!1)}}function e(n){for(var t=n.itemsCount,e=n.numberOfItemsInLine,r=n.direction,o=n.disabledIndexes,u=void 0===o?[]:o,a=n.circularNavigation,c=void 0!==a&&a,s=i({activeIndex:n.activeIndex,itemsCount:t,numberOfItemsInLine:e,direction:r,circularNavigation:c});!s.isOutbound&&u.includes(s.nextIndex);)s=i({activeIndex:s.nextIndex,itemsCount:t,numberOfItemsInLine:e,direction:r,circularNavigation:c});return s}export{e as calcActiveIndexAfterArrowNavigation,t as getActiveIndexFromInboundNavigation};
-//# sourceMappingURL=gridKeyboardNavigationHelper.js.map

package/dist/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gridKeyboardNavigationHelper.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts"],"sourcesContent":["import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  circularNavigation?: boolean;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    let nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n\n    if (nextIndex < 0 || nextIndex >= itemsCount) {\n      if (circularNavigation) {\n        if (nextIndex < 0) {\n          nextIndex = itemsCount - 1;\n        } else if (nextIndex >= itemsCount) {\n          nextIndex = 0;\n        }\n      } else {\n        return { isOutbound: true };\n      }\n    }\n\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({\n    activeIndex,\n    itemsCount,\n    numberOfItemsInLine,\n    direction,\n    circularNavigation\n  });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      circularNavigation\n    });\n  }\n\n  return result;\n}\n"],"names":["getActiveIndexFromInboundNavigation","_ref","direction","numberOfItemsInLine","itemsCount","rawIndex","firstLineMiddleIndex","Math","floor","NavDirections","UP","ceil","DOWN","LEFT","result","midIndex","RIGHT","getRawIndex","max","min","calcRawNewIndexAfterArrowNavigation","_ref2","activeIndex","_ref2$circularNavigat","circularNavigation","getIndexLine","index","horizontalChange","isIndexIncrease","nextIndex","isOutbound","verticalChange","calcActiveIndexAfterArrowNavigation","_ref3","_ref3$disabledIndexes","disabledIndexes","_ref3$circularNavigat","includes"],"mappings":"iHAEM,SAAUA,EAAmCC,GAQlD,IAPCC,EAASD,EAATC,UACAC,EAAmBF,EAAnBE,oBACAC,EAAUH,EAAVG,WAqCMC,EA/Bc,WAClB,IAAMC,EAAuBC,KAAKC,MAAML,EAAsB,GAC9D,GAAID,IAAcO,EAAcC,GAG9B,OADiBH,KAAKI,KAAKP,EAAaD,GACrB,GAAKA,EAAsBG,EAEhD,GAAIJ,IAAcO,EAAcG,KAE9B,OAAON,EAET,GAAIJ,IAAcO,EAAcI,KAAM,CAIpC,IAFA,IAAIC,EAASX,EAAsB,EAC7BY,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GAC/BW,EAATD,GACLA,GAAUX,EAEZ,OAAOW,CACT,CACA,GAAIZ,IAAcO,EAAcO,MAAO,CAIrC,IAFA,IAAIF,EAAS,EACPC,EAAWR,KAAKC,OAAOJ,EAAa,GAAK,GACTW,EAA/BD,EAASX,GACdW,GAAUX,EAEZ,OAAOW,CACT,EAGeG,GACjB,OAAOV,KAAKW,IAAI,EAAGX,KAAKY,IAAId,EAAUD,EAAa,GACrD,CAEA,SAASgB,EAAmCC,GAY3C,IAXCC,EAAWD,EAAXC,YACAlB,EAAUiB,EAAVjB,WACAD,EAAmBkB,EAAnBlB,oBACSoB,EAAAF,EACTG,mBAAAA,OAAqB,IAAHD,GAAQA,EAQpBE,EAAe,SAACC,GAAa,OAAKnB,KAAKI,MAAMe,EAAQ,GAAKvB,EAAoB,EAE9EwB,EAAmB,SAACC,GACxB,IAAIC,EAAYP,GAAeM,EAAkB,GAAK,GAEtD,GAAgB,EAAZC,GAAiBA,GAAazB,EAAY,CAC5C,IAAIoB,EAOF,MAAO,CAAEM,YAAY,GANL,EAAZD,EACFA,EAAYzB,EAAa,EACHA,EAAbyB,IACTA,EAAY,EAKlB,CAIA,OAFoBJ,EAAaH,KACXG,EAAaI,GAE1B,CAAEC,YAAY,GAGhB,CAAEA,YAAY,EAAOD,UAAAA,IAGxBE,EAAiB,SAACH,GACtB,IAAMC,EAAYP,EAAcnB,GAAuByB,EAAkB,GAAK,GAC9E,OAAgB,EAAZC,GAA+BA,GAAdzB,EACZ,CAAE0B,YAAY,GAEhB,CAAEA,YAAY,EAAOD,UAAAA,IAG9B,OA3CSR,EAATnB,WA4CE,KAAKO,EAAcO,MACjB,OAAOW,GAAiB,GAC1B,KAAKlB,EAAcI,KACjB,OAAOc,GAAiB,GAC1B,KAAKlB,EAAcG,KACjB,OAAOmB,GAAe,GACxB,KAAKtB,EAAcC,GACjB,OAAOqB,GAAe,GAE5B,UAEgBC,EAAmCC,GAsBjD,IARD,IAZC7B,EAAU6B,EAAV7B,WACAD,EAAmB8B,EAAnB9B,oBACAD,EAAS+B,EAAT/B,UAASgC,EAAAD,EACTE,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAH,EACpBT,mBAAAA,OAAqB,IAAHY,GAAQA,EAStBtB,EAASM,EAAoC,CAC/CE,YAfSW,EAAXX,YAgBElB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,KAEMV,EAAOgB,YAAcK,EAAgBE,SAASvB,EAAOe,YAC3Df,EAASM,EAAoC,CAC3CE,YAAaR,EAAOe,UACpBzB,WAAAA,EACAD,oBAAAA,EACAD,UAAAA,EACAsB,mBAAAA,IAIJ,OAAOV,CACT"}

package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js

@@ -1,2 +0,0 @@
-import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as t,useCallback as o,useEffect as r}from"react";import a from"../useFullKeyboardListeners.js";import{getActiveIndexFromInboundNavigation as u,calcActiveIndexAfterArrowNavigation as c}from"./gridKeyboardNavigationHelper.js";import{GridKeyboardNavigationContext as d}from"../../../components/a11y/dist/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import{useLastNavigationDirection as s}from"../../../shared/dist/hooks/useLastNavigationDirection.js";import{useEventListener as l}from"../../../shared/dist/hooks/useEventListener.js";var f=-1;function v(v){var m=v.ref,g=v.itemsCount,b=v.numberOfItemsInLine,I=v.onItemClicked,p=v.entryFocusStrategy,y=void 0===p?"directional":p,N=v.getItemByIndex,x=void 0===N?function(n){}:N,h=v.focusOnMount,O=void 0!==h&&h,C=v.focusItemIndexOnMount,j=void 0===C?f:C,k=v.disabledIndexes,A=void 0===k?[]:k,K=v.circularNavigation,L=void 0!==K&&K,S=e(O&&j!==f),E=n(S,2),G=E[0],H=E[1],M=i(!1),w=e(G?j:f),B=n(w,2),D=B[0],F=B[1],_=e(!0),P=n(_,2),R=P[0],T=P[1],q=t(d),z=o((function(){var n;T(!0);var e=A.includes(0)&&g>A.length&&null!==(n=Array.from({length:g},(function(n,e){return e})).find((function(n){return!A.includes(n)})))&&void 0!==n?n:0;F(e)}),[A,g]),J=o((function(){var n;T(!0);var e=A.includes(g-1)&&g>A.length&&null!==(n=Array.from({length:g},(function(n,e){return g-1-e})).find((function(n){return!A.includes(n)})))&&void 0!==n?n:g-1;F(e)}),[A,g]);r((function(){M.current?H(!1):M.current=!0}),[D]);var Q=o((function(){var n;return null===(n=m.current)||void 0===n?void 0:n.blur()}),[m]),U=s().lastNavigationDirectionRef,V=o((function(){if(D===f){var n=U.current;F("directional"===y&&n?u({direction:n,numberOfItemsInLine:b,itemsCount:g}):0),T(!0)}else T(!0)}),[D,y,g,U,b,F,T]),W=o((function(){T(!1)}),[T]),X=o((function(){T(!0),F(f)}),[F]);l({eventName:"focus",callback:V,ref:m}),l({eventName:"mousedown",callback:W,ref:m}),l({eventName:"blur",callback:X,ref:m}),r((function(){var n;D>-1&&(null===(n=m.current)||void 0===n||n.focus())}),[D,m]);var Y=o((function(n){T(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),F(n),I(x(n),n)}),[F,I,x]),Z=o((function(){if(R)return Y(D,!0)}),[R,Y,D]);return a({ref:m,onSelectionKey:Z,onArrowNavigation:function(n){if(T(!0),D!==f){var e=c({activeIndex:D,itemsCount:g,numberOfItemsInLine:b,direction:n,disabledIndexes:A,circularNavigation:L}),i=e.nextIndex;e.isOutbound?null==q||q.onOutboundNavigation(m,n):F(i)}else F(0)},onEscape:Q,onHome:z,onEnd:J,focusOnMount:O}),{activeIndex:R?D:f,onSelectionAction:Y,isInitialActiveState:G}}export{v as default};
-//# sourceMappingURL=useGridKeyboardNavigation.js.map

package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGridKeyboardNavigation.js","sources":["../../../../src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts"],"sourcesContent":["import { type MutableRefObject, type ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"@vibe/a11y\";\nimport useFullKeyboardListeners, { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport { useEventListener, useLastNavigationDirection } from \"@vibe/shared\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes,\n      circularNavigation\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  const onHomeNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const firstEnabledIndex = disabledIndexes.includes(0)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => i).find(i => !disabledIndexes.includes(i)) ?? 0\n        : 0\n      : 0;\n    setActiveIndex(firstEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  const onEndNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const lastEnabledIndex = disabledIndexes.includes(itemsCount - 1)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => itemsCount - 1 - i).find(i => !disabledIndexes.includes(i)) ??\n          itemsCount - 1\n        : itemsCount - 1\n      : itemsCount - 1;\n    setActiveIndex(lastEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    onHome: onHomeNavigation,\n    onEnd: onEndNavigation,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"],"names":["NO_ACTIVE_INDEX","useGridKeyboardNavigation","_ref","ref","itemsCount","numberOfItemsInLine","onItemClicked","_ref$entryFocusStrate","entryFocusStrategy","_ref$getItemByIndex","getItemByIndex","_index","_ref$focusOnMount","focusOnMount","_ref$focusItemIndexOn","focusItemIndexOnMount","_ref$disabledIndexes","disabledIndexes","_ref$circularNavigati","circularNavigation","_useState","useState","_useState2","_slicedToArray","isInitialActiveState","setIsInitialActiveState","skippedInitialActiveIndexChange","useRef","_useState3","_useState4","activeIndex","setActiveIndex","_useState5","_useState6","isUsingKeyboardNav","setIsUsingKeyboardNav","keyboardContext","useContext","GridKeyboardNavigationContext","onHomeNavigation","useCallback","firstEnabledIndex","includes","length","_a","Array","from","_","i","find","onEndNavigation","lastEnabledIndex","useEffect","current","blurTargetElement","blur","lastNavigationDirectionRef","useLastNavigationDirection","onFocus","direction","getActiveIndexFromInboundNavigation","onMouseDown","onBlur","useEventListener","eventName","callback","focus","onSelectionAction","index","arguments","undefined","onKeyboardSelection","useFullKeyboardListeners","onSelectionKey","onArrowNavigation","_calcActiveIndexAfter","calcActiveIndexAfterArrowNavigation","nextIndex","isOutbound","onOutboundNavigation","onEscape","onHome","onEnd"],"mappings":"gqBASA,IAAMA,GAAmB,EA0BD,SAAAC,EAAyBC,GAsBhD,IArBCC,EAAGD,EAAHC,IACAC,EAAUF,EAAVE,WACAC,EAAmBH,EAAnBG,oBACAC,EAAaJ,EAAbI,cAAaC,EAAAL,EACbM,mBAAAA,OAAqB,IAAHD,EAAG,cAAaA,EAAAE,EAAAP,EAClCQ,eAAAA,OAAiB,IAAHD,EAAG,SAACE,GAAqB,EAAAF,EAAAG,EAAAV,EACvCW,aAAAA,OAAe,IAAHD,GAAQA,EAAAE,EAAAZ,EACpBa,sBAAAA,OAAwBf,IAAHc,EAAGd,EAAec,EAAAE,EAAAd,EACvCe,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAAhB,EACpBiB,mBAAAA,OAAqB,IAAHD,GAAQA,EAa1BE,EAAwDC,EACtDR,GAAgBE,IAA0Bf,GAC3CsB,EAAAC,EAAAH,EAAA,GAFMI,EAAoBF,EAAA,GAAEG,EAAuBH,EAAA,GAG9CI,EAAkCC,GAAO,GAC/CC,EAAsCP,EAASG,EAAuBT,EAAwBf,GAAgB6B,EAAAN,EAAAK,EAAA,GAAvGE,EAAWD,EAAA,GAAEE,EAAcF,EAAA,GAClCG,EAAoDX,GAAS,GAAKY,EAAAV,EAAAS,EAAA,GAA3DE,EAAkBD,EAAA,GAAEE,EAAqBF,EAAA,GAE1CG,EAAkBC,EAAWC,GAwB7BC,EAAmBC,GAAY,iBACnCL,GAAsB,GACtB,IAAMM,EAAoBxB,EAAgByB,SAAS,IACtBtC,EAAzBa,EAAgB0B,gBACdC,EAAAC,MAAMC,KAAK,CAAEH,OAAQvC,IAAc,SAAC2C,EAAGC,GAAC,OAAKA,CAAC,IAAEC,MAAK,SAAAD,GAAC,OAAK/B,EAAgByB,SAASM,EAAE,mBAExF,EACJjB,EAAeU,EACjB,GAAG,CAACxB,EAAiBb,IAEf8C,EAAkBV,GAAY,iBAClCL,GAAsB,GACtB,IAAMgB,EAAmBlC,EAAgByB,SAAStC,EAAa,IAClCA,EAAzBa,EAAgB0B,QAEd,QADAC,EAAAC,MAAMC,KAAK,CAAEH,OAAQvC,IAAc,SAAC2C,EAAGC,GAAC,OAAK5C,EAAa,EAAI4C,CAAC,IAAEC,MAAK,SAAAD,GAAC,OAAK/B,EAAgByB,SAASM,EAAG,WACxG,IAAAJ,EAAAA,EAEFxC,EAAa,EACjB2B,EAAeoB,EACjB,GAAG,CAAClC,EAAiBb,IAErBgD,GAAU,WACH1B,EAAgC2B,QAKrC5B,GAAwB,GAJtBC,EAAgC2B,SAAU,CAK9C,GAAG,CAACvB,IAEJ,IAAMwB,EAAoBd,GAAY,WAAK,IAAAI,EAAC,OAAa,QAAbA,EAAAzC,EAAIkD,eAAS,IAAAT,OAAA,EAAAA,EAAAW,MAAM,GAAE,CAACpD,IAE1DqD,EAA+BC,IAA/BD,2BACFE,EAAUlB,GAAY,WAC1B,GAAIV,IAAgB9B,EAApB,CAKA,IAAM2D,EAAYH,EAA2BH,QAC7CtB,EACyB,gBAAvBvB,GAAwCmD,EACpCC,EAAoC,CAAED,UAAAA,EAAWtD,oBAAAA,EAAqBD,WAAAA,IACtE,GAEN+B,GAAsB,EARtB,MAFEA,GAAsB,EAW1B,GAAG,CACDL,EACAtB,EACAJ,EACAoD,EACAnD,EACA0B,EACAI,IAGI0B,EAAcrB,GAAY,WAE9BL,GAAsB,EACxB,GAAG,CAACA,IAEE2B,EAAStB,GAAY,WAGzBL,GAAsB,GACtBJ,EAAe/B,EACjB,GAAG,CAAC+B,IAEJgC,EAAiB,CAAEC,UAAW,QAASC,SAAUP,EAASvD,IAAAA,IAC1D4D,EAAiB,CAAEC,UAAW,YAAaC,SAAUJ,EAAa1D,IAAAA,IAClE4D,EAAiB,CAAEC,UAAW,OAAQC,SAAUH,EAAQ3D,IAAAA,IAExDiD,GAAU,iBACJtB,GAAe,IACJ,QAAbc,EAAAzC,EAAIkD,eAAS,IAAAT,GAAAA,EAAAsB,QAEjB,GAAG,CAACpC,EAAa3B,IAEjB,IAAMgE,EAAoB3B,GACxB,SAAC4B,GACCjC,EAD8BkC,UAAA1B,OAAA,QAAA2B,IAAAD,UAAA,IAAAA,UAAA,IAE9BtC,EAAeqC,GAEf9D,EAAcI,EAAe0D,GAAQA,EACtC,GACD,CAACrC,EAAgBzB,EAAeI,IAG5B6D,EAAsB/B,GAAY,WACtC,GAAKN,EAGL,OAAOiC,EAAkBrC,GAAa,EACvC,GAAE,CAACI,EAAoBiC,EAAmBrC,IAc3C,OAZA0C,EAAyB,CACvBrE,IAAAA,EACAsE,eAAgBF,EAChBG,kBAxHwB,SAACf,GAEzB,GADAxB,GAAsB,GAClBL,IAAgB9B,EAApB,CAKA,IAAA2E,EAAkCC,EAAoC,CACpE9C,YAAAA,EACA1B,WAAAA,EACAC,oBAAAA,EACAsD,UAAAA,EACA1C,gBAAAA,EACAE,mBAAAA,IANkB0D,EAASF,EAATE,UAAFF,EAAVG,WASN1C,SAAAA,EAAiB2C,qBAAqB5E,EAAKwD,GAE3C5B,EAAe8C,EAbjB,MAFE9C,EAAe,IAsHjBiD,SAAU1B,EACV2B,OAAQ1C,EACR2C,MAAOhC,EACPrC,aAAAA,IAKK,CACLiB,YAF0BI,EAAqBJ,EAAc9B,EAG7DmE,kBAAAA,EACA3C,qBAAAA,EAEJ"}