@vibe/core 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport NoColor from \"../Icon/Icons/components/NoColor\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { ColorStyle } from \"../../types/Colors\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  value?: ColorPickerValue;\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\n  ColorIndicatorIcon?: SubIcon;\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Hide color icon\n   */\n  NoColorIcon?: SubIcon;\n  colorStyle?: ColorStyle;\n  noColorText?: string;\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  isBlackListMode?: boolean;\n  colorsList?: ColorPickerArrayValueOnly;\n  isMultiselect?: boolean;\n  colorSize?: ColorPickerSizes;\n  numberOfColorsInLine?: number;\n  focusOnMount?: boolean;\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. it's incompatible with forceUseRawColorList flag.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   *\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker: VibeComponent<ColorPickerProps> & {\n  sizes?: typeof BaseSizes;\n  colorStyles?: typeof ColorStyleEnum;\n  colorSizes?: typeof BaseSizes;\n  colorShapes?: typeof ColorShapesEnum;\n} = 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\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        ariaLabelledby=\"Color Picker Dialog\"\n        ariaDescribedby=\"Pick color\"\n        style={{ width }}\n      >\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 withStaticProps(ColorPicker, {\n  sizes: BaseSizes,\n  colorStyles: ColorStyleEnum,\n  colorSizes: BaseSizes,\n  colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","COLOR_PICKER","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"01BAiDA,IAwEeA,EAAAA,EAnEXC,GACF,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,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,IAETE,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,EAAuBC,aAAcxB,KAIlF,IAG0C,CAC1CyB,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { BaseSizes } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport DialogContentContainer from \"../DialogContentContainer/DialogContentContainer\";\nimport { ColorStyle as ColorStyleEnum } from \"../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { ColorShapes as ColorShapesEnum, DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueOnly } from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { VibeComponentProps, VibeComponent, SubIcon, withStaticProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { ColorStyle } from \"../../types/Colors\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  value?: ColorPickerValue;\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\n  ColorIndicatorIcon?: SubIcon;\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Hide color icon\n   */\n  NoColorIcon?: SubIcon;\n  colorStyle?: ColorStyle;\n  noColorText?: string;\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  isBlackListMode?: boolean;\n  colorsList?: ColorPickerArrayValueOnly;\n  isMultiselect?: boolean;\n  colorSize?: ColorPickerSizes;\n  numberOfColorsInLine?: number;\n  focusOnMount?: boolean;\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. it's incompatible with forceUseRawColorList flag.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   *\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker: VibeComponent<ColorPickerProps> & {\n  sizes?: typeof BaseSizes;\n  colorStyles?: typeof ColorStyleEnum;\n  colorSizes?: typeof BaseSizes;\n  colorShapes?: typeof ColorShapesEnum;\n} = 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\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        ariaLabelledby=\"Color Picker Dialog\"\n        ariaDescribedby=\"Pick color\"\n        style={{ width }}\n      >\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 withStaticProps(ColorPicker, {\n  sizes: BaseSizes,\n  colorStyles: ColorStyleEnum,\n  colorSizes: BaseSizes,\n  colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","COLOR_PICKER","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"gzDAiDA,IAwEeA,EAAAA,EAnEXC,GACF,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,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,IAETE,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,EAAuBC,aAAcxB,KAIlF,IAG0C,CAC1CyB,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}

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

@@ -1,2 +1,2 @@
-var e={colorPicker:"colorPicker_b0d55b5c0f",colorPickerDialogContent:"colorPickerDialogContent_f2be715f28"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],t="s_id-ffacbf9b6446_3_0_0-alpha_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))}(".colorPicker_b0d55b5c0f.colorPickerDialogContent_f2be715f28 {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
+var e={colorPicker:"colorPicker_82fae1005d",colorPickerDialogContent:"colorPickerDialogContent_927c0648e1"};!function(e){const t="s_id-ffacbf9b6446_3_0_0-alpha_10";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_82fae1005d.colorPickerDialogContent_927c0648e1 {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=ColorPicker.module.scss.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport Button from \"../../../Button/Button\";\nimport { VibeComponentProps, VibeComponent, SubIcon } from \"../../../../types\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  onClick: () => void;\n  text?: string;\n  Icon: SubIcon;\n}\n\nexport const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps> = React.forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref) => {\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        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n"],"names":["ColorPickerClearButton","React","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","createElement","Button","size","kind","className","styles","clearColorButton","clearColorIcon"],"mappings":"wQAaO,IAAMA,EAAqEC,EAAMC,YACtF,SAAAC,EAAuDC,GAAO,IAAlDC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEN,EAAAc,cAACC,EAAM,CACLZ,IAAKA,EACLa,KAAK,QACLC,KAAK,WACLN,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCY,UAAWC,EAAOC,kBAElBpB,EAACc,cAAAT,EAAK,CAAAW,KAAK,KAAKE,UAAWC,EAAOE,iBACjCjB,GAAQ,QAGf"}
+{"version":3,"file":"ColorPickerClearButton.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx"],"sourcesContent":["import React from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport Button from \"../../../Button/Button\";\nimport { VibeComponentProps, VibeComponent, SubIcon } from \"../../../../types\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  onClick: () => void;\n  text?: string;\n  Icon: SubIcon;\n}\n\nexport const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps> = React.forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref) => {\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"],"names":["ColorPickerClearButton","React","forwardRef","_ref","ref","text","Icon","onSelectionAction","useGridKeyboardNavigation","itemsCount","numberOfItemsInLine","onItemClicked","onClick","getItemByIndex","NOOP","createElement","Button","size","kind","blurOnMouseUp","className","styles","clearColorButton","clearColorIcon"],"mappings":"wQAaO,IAAMA,EAAqEC,EAAMC,YACtF,SAAAC,EAAuDC,GAAO,IAAlDC,EAAIF,EAAJE,KAAMC,EAAIH,EAAJG,KACRC,EAAsBC,EAA0B,CACtDJ,IAAKA,EACLK,WAAY,EACZC,oBAAqB,EACrBC,cALMR,EAAPS,QAMCC,eAAgBC,IALVP,kBAQR,OACEN,EAAAc,cAACC,EAAM,CACLZ,IAAKA,EACLa,KAAK,QACLC,KAAK,WACLN,QAAS,WAAA,OAAML,GAAmB,EAAE,EACpCY,eAAe,EACfC,UAAWC,EAAOC,kBAElBrB,EAACc,cAAAT,EAAK,CAAAW,KAAK,KAAKG,UAAWC,EAAOE,iBACjClB,GAAQ,QAGf"}

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

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

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

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid_33695076ab"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],d="s_id-0a5f0eb78ee4_3_0_0-alpha_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))}(".colorsGrid_33695076ab {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_8d39d6d923"};!function(e){const d="s_id-0a5f0eb78ee4_3_0_0-alpha_10";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_8d39d6d923 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
 //# sourceMappingURL=ColorPickerColorsGrid.module.scss.js.map

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

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

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

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

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

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_b8037b43c6",circle:"circle_608074ebe8",feedbackIndicator:"feedbackIndicator_f5f5e1ac32",active:"active_19f3d470c9",selectedColor:"selectedColor_c8f1a3610e",colorItem:"colorItem_947dcc7afa",colorIndicatorWrapper:"colorIndicatorWrapper_916ce0bef4",colorItemSizeSmall:"colorItemSizeSmall_41e8fafc7a",colorItemSizeMedium:"colorItemSizeMedium_5775d768b8",colorItemSizeLarge:"colorItemSizeLarge_ab2ef05269",colorItemTextMode:"colorItemTextMode_d7c5346893",colorIconWhite:"colorIconWhite_0928e05958"};!function(e){if("undefined"==typeof document)return;const r=document.head||document.getElementsByTagName("head")[0],n="s_id-2198989e565d_3_0_0-alpha_0";if(r.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.appendChild(document.createTextNode(e))}('.itemWrapper_b8037b43c6 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_b8037b43c6.circle_608074ebe8 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_b8037b43c6 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_b8037b43c6 .feedbackIndicator_f5f5e1ac32 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_b8037b43c6:focus,\n.itemWrapper_b8037b43c6:focus-visible,\n.itemWrapper_b8037b43c6.active_19f3d470c9 {\n  outline: none;\n}\n\n.itemWrapper_b8037b43c6:focus .feedbackIndicator_f5f5e1ac32:before,\n.itemWrapper_b8037b43c6:focus-visible .feedbackIndicator_f5f5e1ac32:before,\n.itemWrapper_b8037b43c6.active_19f3d470c9 .feedbackIndicator_f5f5e1ac32: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_b8037b43c6:focus .feedbackIndicator_f5f5e1ac32:after,\n.itemWrapper_b8037b43c6:focus-visible .feedbackIndicator_f5f5e1ac32:after,\n.itemWrapper_b8037b43c6.active_19f3d470c9 .feedbackIndicator_f5f5e1ac32: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_b8037b43c6:hover:not(.active_19f3d470c9):not(.selectedColor_c8f1a3610e) .feedbackIndicator_f5f5e1ac32 {\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_b8037b43c6 .colorItem_947dcc7afa {\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_b8037b43c6 .colorItem_947dcc7afa .colorIndicatorWrapper_916ce0bef4 {\n  margin-top: 3px;\n}\n\n.itemWrapper_b8037b43c6 .colorItem_947dcc7afa.colorItemSizeSmall_41e8fafc7a {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_b8037b43c6 .colorItem_947dcc7afa.colorItemSizeMedium_5775d768b8 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_b8037b43c6 .colorItem_947dcc7afa.colorItemSizeLarge_ab2ef05269 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_b8037b43c6.selectedColor_c8f1a3610e {\n  position: relative;\n}\n\n.itemWrapper_b8037b43c6.selectedColor_c8f1a3610e: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_b8037b43c6.selectedColor_c8f1a3610e .feedbackIndicator_f5f5e1ac32:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_b8037b43c6 .colorItemTextMode_d7c5346893:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_b8037b43c6 .colorIconWhite_0928e05958 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_205c719889",circle:"circle_56821921e5",feedbackIndicator:"feedbackIndicator_6c6bb018ac",active:"active_9bdaa17aac",selectedColor:"selectedColor_b63bb13634",colorItem:"colorItem_69e4568506",colorIndicatorWrapper:"colorIndicatorWrapper_370eb1ea46",colorItemSizeSmall:"colorItemSizeSmall_d06eda82a0",colorItemSizeMedium:"colorItemSizeMedium_b060373d95",colorItemSizeLarge:"colorItemSizeLarge_3ecb370243",colorItemTextMode:"colorItemTextMode_368a88ca19",colorIconWhite:"colorIconWhite_3b1821c869"};!function(e){const r="s_id-2198989e565d_3_0_0-alpha_10";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_205c719889 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_205c719889.circle_56821921e5 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_205c719889 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_205c719889 .feedbackIndicator_6c6bb018ac {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_205c719889:focus,\n.itemWrapper_205c719889:focus-visible,\n.itemWrapper_205c719889.active_9bdaa17aac {\n  outline: none;\n}\n\n.itemWrapper_205c719889:focus .feedbackIndicator_6c6bb018ac:before,\n.itemWrapper_205c719889:focus-visible .feedbackIndicator_6c6bb018ac:before,\n.itemWrapper_205c719889.active_9bdaa17aac .feedbackIndicator_6c6bb018ac: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_205c719889:focus .feedbackIndicator_6c6bb018ac:after,\n.itemWrapper_205c719889:focus-visible .feedbackIndicator_6c6bb018ac:after,\n.itemWrapper_205c719889.active_9bdaa17aac .feedbackIndicator_6c6bb018ac: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_205c719889:hover:not(.active_9bdaa17aac):not(.selectedColor_b63bb13634) .feedbackIndicator_6c6bb018ac {\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_205c719889 .colorItem_69e4568506 {\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_205c719889 .colorItem_69e4568506 .colorIndicatorWrapper_370eb1ea46 {\n  margin-top: 3px;\n}\n\n.itemWrapper_205c719889 .colorItem_69e4568506.colorItemSizeSmall_d06eda82a0 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_205c719889 .colorItem_69e4568506.colorItemSizeMedium_b060373d95 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_205c719889 .colorItem_69e4568506.colorItemSizeLarge_3ecb370243 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_205c719889.selectedColor_b63bb13634 {\n  position: relative;\n}\n\n.itemWrapper_205c719889.selectedColor_b63bb13634: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_205c719889.selectedColor_b63bb13634 .feedbackIndicator_6c6bb018ac:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_205c719889 .colorItemTextMode_368a88ca19:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_205c719889 .colorIconWhite_3b1821c869 {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var o={combobox:"combobox_44894a368d",stickyCategory:"stickyCategory_a52a3da0cb",comboboxCategory:"comboboxCategory_6c8eea39d9",sizeSmall:"sizeSmall_6ae451ac40",sizeMedium:"sizeMedium_44894a368d",sizeLarge:"sizeLarge_6ae451ac40",empty:"empty_37a9d79ba6",comboboxSearchWrapper:"comboboxSearchWrapper_8a13bd7857",comboboxNoResults:"comboboxNoResults_88195b364c",comboboxMessageWrapper:"comboboxMessageWrapper_a11ad848f9",comboboxMessage:"comboboxMessage_d17b3a348c",addNewButton:"addNewButton_b84e33659c",buttonLabel:"buttonLabel_d17b3a348c",comboboxList:"comboboxList_275e5c65c3"};!function(o){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],n="s_id-140391bb7df9_3_0_0-alpha_0";if(e.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.appendChild(document.createTextNode(o))}(".combobox_44894a368d {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--spacing-small);\n}\n\n.combobox_44894a368d.stickyCategory_a52a3da0cb .comboboxCategory_6c8eea39d9 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox_44894a368d.stickyCategory_a52a3da0cb.sizeSmall_6ae451ac40 .comboboxCategory_6c8eea39d9 {\n  top: 32px;\n}\n\n.combobox_44894a368d.stickyCategory_a52a3da0cb.sizeMedium_44894a368d .comboboxCategory_6c8eea39d9 {\n  top: 40px;\n}\n\n.combobox_44894a368d.stickyCategory_a52a3da0cb.sizeLarge_6ae451ac40 .comboboxCategory_6c8eea39d9 {\n  top: 48px;\n}\n\n.combobox_44894a368d.empty_37a9d79ba6 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper_8a13bd7857 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults_88195b364c {\n  margin-top: var(--spacing-small);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n\n.comboboxNoResults_88195b364c .comboboxMessageWrapper_a11ad848f9 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults_88195b364c .comboboxMessageWrapper_a11ad848f9 .comboboxMessage_d17b3a348c {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults_88195b364c .addNewButton_b84e33659c {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults_88195b364c .addNewButton_b84e33659c .buttonLabel_d17b3a348c {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList_275e5c65c3 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
+var o={combobox:"combobox_ace1b01a58",stickyCategory:"stickyCategory_b6521c0fbc",comboboxCategory:"comboboxCategory_92fd0064c7",sizeSmall:"sizeSmall_5b29b34464",sizeMedium:"sizeMedium_ace1b01a58",sizeLarge:"sizeLarge_5b29b34464",empty:"empty_f51643a6f5",comboboxSearchWrapper:"comboboxSearchWrapper_055243eb8f",comboboxNoResults:"comboboxNoResults_7dbd5957df",comboboxMessageWrapper:"comboboxMessageWrapper_06bbe1cc49",comboboxMessage:"comboboxMessage_34c451b33b",addNewButton:"addNewButton_80d9b83059",buttonLabel:"buttonLabel_34c451b33b",comboboxList:"comboboxList_cf74ef7b99"};!function(o){const e="s_id-140391bb7df9_3_0_0-alpha_10";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const b=document.createElement("style");b.id=e,n.firstChild?n.insertBefore(b,n.firstChild):n.appendChild(b),b.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".combobox_ace1b01a58 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--spacing-small);\n}\n\n.combobox_ace1b01a58.stickyCategory_b6521c0fbc .comboboxCategory_92fd0064c7 {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox_ace1b01a58.stickyCategory_b6521c0fbc.sizeSmall_5b29b34464 .comboboxCategory_92fd0064c7 {\n  top: 32px;\n}\n\n.combobox_ace1b01a58.stickyCategory_b6521c0fbc.sizeMedium_ace1b01a58 .comboboxCategory_92fd0064c7 {\n  top: 40px;\n}\n\n.combobox_ace1b01a58.stickyCategory_b6521c0fbc.sizeLarge_5b29b34464 .comboboxCategory_92fd0064c7 {\n  top: 48px;\n}\n\n.combobox_ace1b01a58.empty_f51643a6f5 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper_055243eb8f {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults_7dbd5957df {\n  margin-top: var(--spacing-small);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n\n.comboboxNoResults_7dbd5957df .comboboxMessageWrapper_06bbe1cc49 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults_7dbd5957df .comboboxMessageWrapper_06bbe1cc49 .comboboxMessage_34c451b33b {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults_7dbd5957df .addNewButton_80d9b83059 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults_7dbd5957df .addNewButton_80d9b83059 .buttonLabel_34c451b33b {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList_cf74ef7b99 {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}");export{o as default};
 //# sourceMappingURL=Combobox.module.scss.js.map

package/dist/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss.js

@@ -1,2 +1,2 @@
-var e={comboboxItemContainer:"comboboxItemContainer_875c9e437f",dividerContainer:"dividerContainer_2a7c139969",divider:"divider_a31f5eccc5",sticky:"sticky_b6c0174204"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],i="s_id-78c8179b7fe9_3_0_0-alpha_0";if(n.querySelector("#"+i))return;const t=document.createElement("style");t.id=i,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}(".comboboxItemContainer_875c9e437f {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_2a7c139969 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_a31f5eccc5 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_b6c0174204 {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer_aa9f2302eb",dividerContainer:"dividerContainer_6abf17996c",divider:"divider_0b96f8357f",sticky:"sticky_c32e672491"};!function(e){const n="s_id-78c8179b7fe9_3_0_0-alpha_10";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,i.firstChild?i.insertBefore(t,i.firstChild):i.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_aa9f2302eb {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_6abf17996c {\n  position: relative;\n  width: 95%;\n}\n\n.divider_0b96f8357f {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_c32e672491 {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
 //# sourceMappingURL=ComboboxHelpers.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss.js

@@ -1,2 +1,2 @@
-var e={comboboxCategory:"comboboxCategory_97623065f8"};!function(e){if("undefined"==typeof document)return;const o=document.head||document.getElementsByTagName("head")[0],t="s_id-a004d249e1c1_3_0_0-alpha_0";if(o.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(e))}(".comboboxCategory_97623065f8 {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--spacing-small);\n}");export{e as default};
+var e={comboboxCategory:"comboboxCategory_3bcd3454ba"};!function(e){const o="s_id-a004d249e1c1_3_0_0-alpha_10";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const a=document.createElement("style");a.id=o,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".comboboxCategory_3bcd3454ba {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=ComboboxCategory.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss.js

@@ -1,2 +1,2 @@
-var t={scrollableContainer:"scrollableContainer_760d517882",optionsContainer:"optionsContainer_5ba798cc6b",categoryWithOptions:"categoryWithOptions_b8afc79423",firstCategory:"firstCategory_3c8d781579",categoryWithoutOptions:"categoryWithoutOptions_e8b49800ab"};!function(t){if("undefined"==typeof document)return;const o=document.head||document.getElementsByTagName("head")[0],n="s_id-4d4facb041a8_3_0_0-alpha_0";if(o.querySelector("#"+n))return;const e=document.createElement("style");e.id=n,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(t))}(".scrollableContainer_760d517882::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_760d517882::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_5ba798cc6b {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_b8afc79423.firstCategory_3c8d781579,\n.categoryWithoutOptions_e8b49800ab.firstCategory_3c8d781579 {\n  padding-top: 0;\n}\n.categoryWithOptions_b8afc79423 {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_e8b49800ab {\n  margin-bottom: 0;\n}");export{t as default};
+var t={scrollableContainer:"scrollableContainer_6c474c29c8",optionsContainer:"optionsContainer_b079f96291",categoryWithOptions:"categoryWithOptions_f0ef5f78ae",firstCategory:"firstCategory_3fa711e5bf",categoryWithoutOptions:"categoryWithoutOptions_1bacf0d10c"};!function(t){const e="s_id-4d4facb041a8_3_0_0-alpha_10";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}(".scrollableContainer_6c474c29c8::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_6c474c29c8::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_b079f96291 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_f0ef5f78ae.firstCategory_3fa711e5bf,\n.categoryWithoutOptions_1bacf0d10c.firstCategory_3fa711e5bf {\n  padding-top: 0;\n}\n.categoryWithOptions_f0ef5f78ae {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_1bacf0d10c {\n  margin-bottom: 0;\n}");export{t as default};
 //# sourceMappingURL=ComboboxItems.module.scss.js.map

package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.js

@@ -1,2 +1,2 @@
-import{defineProperty as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as l}from"react";import s from"../../../Icon/Icon.js";import c from"../../../Tooltip/Tooltip.js";import a from"../../../../hooks/useIsOverflowing/useIsOverflowing.js";import{keyCodes as m}from"../../../../constants/keyCodes.js";import{getOptionId as p}from"../../helpers.js";import{withStaticProps as u}from"../../../../types/withStaticProps.js";import"../../../../utils/colors-vars-map.js";import{ComboboxOptionIconType as f}from"../ComboboxConstants.js";import{getTestId as d,ComponentDefaultTestId as v}from"../../../../tests/testIds.js";import b from"./ComboboxOption.module.scss.js";var y=u((function(u){var f=u.index,y=u.option,O=u.className,I=u.isActive,h=u.visualFocus,g=u.scrollRef,j=u.scrollOffset,T=void 0===j?100:j,C=u.onOptionClick,E=u.onOptionLeave,k=u.onOptionHover,N=u.optionLineHeight,S=u.shouldScrollWhenActive,w=void 0===S||S,x=u.optionRenderer,L=void 0===x?null:x,P=y.id,A=y.leftIcon,B=y.leftIconType,F=y.rightIcon,H=y.rightIconType,M=y.label,R=y.iconSize,_=void 0===R?18:R,z=y.disabled,D=y.selected,K=y.ariaLabel,V=y.belongToCategory,W=void 0!==V&&V,X=y.tooltipContent,q=n(null),G=n(),J=a({ref:G});i((function(){var o,e=q.current;h&&e&&w&&((null==g?void 0:g.current)&&e?g.current.scrollTop=e.offsetTop-T:null===(o=null==e?void 0:e.scrollIntoView)||void 0===o||o.call(e,{behaviour:"smooth"}))}),[q,h,w,g,T,W]);var Q=function(o,n,i){return"renderer"===n?o(e(b.optionIcon,i)):t.createElement(s,{className:e(b.optionIcon,i),iconType:"font",icon:o,iconSize:_,ignoreFocusStyle:!0})},U=r((function(o){C(o,f,y,!0)}),[f,y,C]),Y=r((function(o){z||E(o,f,y,!0)}),[f,y,E,z]),Z=r((function(o){z||k(o,f,y,!0)}),[f,y,k,z]),$=r((function(o){o.key!==m.ENTER&&o.key!==m.SPACE||C(o,f,y,!1)}),[C,f,y]);X||(X=J?M:null);var oo=l((function(){return L&&L(y)}),[L,y]),eo=t.createElement(t.Fragment,null,A&&Q(A,B,b.left),t.createElement("div",{ref:G,className:e(b.optionLabel)},M),F&&Q(F,H,""));return t.createElement(c,{content:X},t.createElement("div",{ref:q,key:P||M,"aria-level":W?2:1,"aria-selected":I,"aria-label":K||M,id:p(P,f),"data-testid":d(v.COMBOBOX_OPTION,f),onMouseEnter:Z,onClick:U,onKeyDown:$,onMouseLeave:Y,className:e(b.comboboxOption,O,o(o(o(o({},b.disabled,z),b.selected,D),b.active,I),b.activeOutline,h)),style:{height:N}},oo||eo))}),{iconTypes:f});export{y as default};
+import{defineProperty as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as l}from"react";import s from"../../../Icon/Icon.js";import c from"../../../Tooltip/Tooltip.js";import a from"../../../../hooks/useIsOverflowing/useIsOverflowing.js";import{keyCodes as m}from"../../../../constants/keyCodes.js";import{getOptionId as p}from"../../helpers.js";import{withStaticProps as u}from"../../../../types/withStaticProps.js";import"../../../../utils/colors-vars-map.js";import{ComboboxOptionIconType as f}from"../ComboboxConstants.js";import{getTestId as d,ComponentDefaultTestId as v}from"../../../../tests/testIds.js";import b from"./ComboboxOption.module.scss.js";var y=u((function(u){var f=u.index,y=u.option,O=u.className,I=u.isActive,h=u.visualFocus,g=u.scrollRef,j=u.scrollOffset,T=void 0===j?100:j,C=u.onOptionClick,E=u.onOptionLeave,k=u.onOptionHover,N=u.optionLineHeight,S=u.shouldScrollWhenActive,w=void 0===S||S,x=u.optionRenderer,L=void 0===x?null:x,P=y.id,A=y.leftIcon,B=y.leftIconType,F=y.rightIcon,H=y.rightIconType,M=y.label,R=y.iconSize,_=void 0===R?18:R,z=y.disabled,D=y.selected,K=y.ariaLabel,V=y.belongToCategory,W=void 0!==V&&V,X=y.tooltipContent,q=n(null),G=n(),J=a({ref:G});i((function(){var o,e=q.current;h&&e&&w&&((null==g?void 0:g.current)&&e?g.current.scrollTop=e.offsetTop-T:null===(o=null==e?void 0:e.scrollIntoView)||void 0===o||o.call(e,{behaviour:"smooth"}))}),[q,h,w,g,T,W]);var Q=function(o,n,i){return"renderer"===n?o(e(b.optionIcon,i)):t.createElement(s,{className:e(b.optionIcon,i),iconType:"font",icon:o,iconSize:_,ignoreFocusStyle:!0})},U=r((function(o){z||C(o,f,y,!0)}),[f,y,C,z]),Y=r((function(o){z||E(o,f,y,!0)}),[f,y,E,z]),Z=r((function(o){z||k(o,f,y,!0)}),[f,y,k,z]),$=r((function(o){o.key!==m.ENTER&&o.key!==m.SPACE||C(o,f,y,!1)}),[C,f,y]);X||(X=J?M:null);var oo=l((function(){return L&&L(y)}),[L,y]),eo=t.createElement(t.Fragment,null,A&&Q(A,B,b.left),t.createElement("div",{ref:G,className:e(b.optionLabel)},M),F&&Q(F,H,""));return t.createElement(c,{content:X},t.createElement("div",{ref:q,key:P||M,"aria-level":W?2:1,"aria-selected":I,"aria-label":K||M,id:p(P,f),"data-testid":d(v.COMBOBOX_OPTION,f),onMouseEnter:Z,onClick:U,onKeyDown:$,onMouseLeave:Y,className:e(b.comboboxOption,O,o(o(o(o({},b.disabled,z),b.selected,D),b.active,I),b.activeOutline,h)),style:{height:N}},oo||eo))}),{iconTypes:f});export{y as default};
 //# sourceMappingURL=ComboboxOption.js.map

package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon, withStaticProps } from \"../../../../types\";\nimport {\n  ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n  index?: number;\n  option?: IComboboxOption;\n  className?: string;\n  isActive?: boolean;\n  visualFocus?: boolean;\n  scrollRef?: RefObject<HTMLElement>;\n  scrollOffset?: number;\n  optionLineHeight?: number;\n  shouldScrollWhenActive?: boolean;\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption: React.FC<ComboboxOptionProps> & { iconTypes?: typeof ComboboxOptionIconTypeEnum } = ({\n  index,\n  option,\n  className,\n  isActive,\n  visualFocus,\n  scrollRef,\n  scrollOffset = 100,\n  onOptionClick,\n  onOptionLeave,\n  onOptionHover,\n  optionLineHeight,\n  shouldScrollWhenActive = true,\n  optionRenderer = null\n}) => {\n  const {\n    id,\n    leftIcon,\n    leftIconType,\n    rightIcon,\n    rightIconType,\n    label,\n    iconSize = 18,\n    disabled,\n    selected,\n    ariaLabel,\n    belongToCategory = false\n  } = option;\n  let { tooltipContent } = option;\n\n  const ref = useRef(null);\n  const labelRef = useRef();\n\n  const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (visualFocus && element && shouldScrollWhenActive) {\n      if (scrollRef?.current && element) {\n        // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n        scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n      } else {\n        element?.scrollIntoView?.({ behaviour: \"smooth\" });\n      }\n    }\n  }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n  const renderIcon = (\n    icon: SubIcon | ((className: string) => JSX.Element),\n    iconType: ComboboxOptionIconType,\n    className: string\n  ) => {\n    if (iconType === \"renderer\") {\n      return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n    }\n\n    return (\n      <Icon\n        className={cx(styles.optionIcon, className)}\n        iconType=\"font\"\n        icon={icon as SubIcon}\n        iconSize={iconSize}\n        ignoreFocusStyle\n      />\n    );\n  };\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      onOptionClick(event, index, option, true);\n    },\n    [index, option, onOptionClick]\n  );\n\n  const onMouseLeave = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionLeave(event, index, option, true);\n    },\n    [index, option, onOptionLeave, disabled]\n  );\n\n  const onMouseEnter = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionHover(event, index, option, true);\n    },\n    [index, option, onOptionHover, disabled]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        onOptionClick(event, index, option, false);\n      }\n    },\n    [onOptionClick, index, option]\n  );\n  if (!tooltipContent) {\n    tooltipContent = isOptionOverflowing ? label : null;\n  }\n\n  const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n  const optionValue = (\n    <>\n      {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n      <div ref={labelRef} className={cx(styles.optionLabel)}>\n        {label}\n      </div>\n      {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n    </>\n  );\n\n  return (\n    <Tooltip content={tooltipContent}>\n      <div\n        ref={ref}\n        key={id || label}\n        aria-level={belongToCategory ? 2 : 1}\n        aria-selected={isActive}\n        aria-label={ariaLabel || label}\n        id={getOptionId(id, index)}\n        data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n        onMouseEnter={onMouseEnter}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        onMouseLeave={onMouseLeave}\n        className={cx(styles.comboboxOption, className, {\n          [styles.disabled]: disabled,\n          [styles.selected]: selected,\n          [styles.active]: isActive,\n          [styles.activeOutline]: visualFocus\n        })}\n        style={{ height: optionLineHeight }}\n      >\n        {optionRendererValue || optionValue}\n      </div>\n    </Tooltip>\n  );\n};\n\nexport default withStaticProps(ComboboxOption, { iconTypes: ComboboxOptionIconTypeEnum });\n"],"names":["withStaticProps","_ref","index","option","className","isActive","visualFocus","scrollRef","_ref$scrollOffset","scrollOffset","onOptionClick","onOptionLeave","onOptionHover","optionLineHeight","_ref$shouldScrollWhen","shouldScrollWhenActive","_ref$optionRenderer","optionRenderer","id","leftIcon","leftIconType","rightIcon","rightIconType","label","_option$iconSize","iconSize","disabled","selected","ariaLabel","_option$belongToCateg","belongToCategory","tooltipContent","ref","useRef","labelRef","isOptionOverflowing","useIsOverflowing","useEffect","element","current","scrollTop","offsetTop","_a","scrollIntoView","call","behaviour","renderIcon","icon","iconType","cx","styles","optionIcon","React","createElement","Icon","ignoreFocusStyle","onClick","useCallback","event","onMouseLeave","onMouseEnter","onKeyDown","key","keyCodes","ENTER","SPACE","optionRendererValue","useMemo","optionValue","Fragment","left","optionLabel","Tooltip","content","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}
+{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon, withStaticProps } from \"../../../../types\";\nimport {\n  ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n  IComboboxOption,\n  IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n  index?: number;\n  option?: IComboboxOption;\n  className?: string;\n  isActive?: boolean;\n  visualFocus?: boolean;\n  scrollRef?: RefObject<HTMLElement>;\n  scrollOffset?: number;\n  optionLineHeight?: number;\n  shouldScrollWhenActive?: boolean;\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption: React.FC<ComboboxOptionProps> & { iconTypes?: typeof ComboboxOptionIconTypeEnum } = ({\n  index,\n  option,\n  className,\n  isActive,\n  visualFocus,\n  scrollRef,\n  scrollOffset = 100,\n  onOptionClick,\n  onOptionLeave,\n  onOptionHover,\n  optionLineHeight,\n  shouldScrollWhenActive = true,\n  optionRenderer = null\n}) => {\n  const {\n    id,\n    leftIcon,\n    leftIconType,\n    rightIcon,\n    rightIconType,\n    label,\n    iconSize = 18,\n    disabled,\n    selected,\n    ariaLabel,\n    belongToCategory = false\n  } = option;\n  let { tooltipContent } = option;\n\n  const ref = useRef(null);\n  const labelRef = useRef();\n\n  const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (visualFocus && element && shouldScrollWhenActive) {\n      if (scrollRef?.current && element) {\n        // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n        scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n      } else {\n        element?.scrollIntoView?.({ behaviour: \"smooth\" });\n      }\n    }\n  }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n  const renderIcon = (\n    icon: SubIcon | ((className: string) => JSX.Element),\n    iconType: ComboboxOptionIconType,\n    className: string\n  ) => {\n    if (iconType === \"renderer\") {\n      return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n    }\n\n    return (\n      <Icon\n        className={cx(styles.optionIcon, className)}\n        iconType=\"font\"\n        icon={icon as SubIcon}\n        iconSize={iconSize}\n        ignoreFocusStyle\n      />\n    );\n  };\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionClick(event, index, option, true);\n    },\n    [index, option, onOptionClick, disabled]\n  );\n\n  const onMouseLeave = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionLeave(event, index, option, true);\n    },\n    [index, option, onOptionLeave, disabled]\n  );\n\n  const onMouseEnter = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionHover(event, index, option, true);\n    },\n    [index, option, onOptionHover, disabled]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        onOptionClick(event, index, option, false);\n      }\n    },\n    [onOptionClick, index, option]\n  );\n  if (!tooltipContent) {\n    tooltipContent = isOptionOverflowing ? label : null;\n  }\n\n  const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n  const optionValue = (\n    <>\n      {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n      <div ref={labelRef} className={cx(styles.optionLabel)}>\n        {label}\n      </div>\n      {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n    </>\n  );\n\n  return (\n    <Tooltip content={tooltipContent}>\n      <div\n        ref={ref}\n        key={id || label}\n        aria-level={belongToCategory ? 2 : 1}\n        aria-selected={isActive}\n        aria-label={ariaLabel || label}\n        id={getOptionId(id, index)}\n        data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n        onMouseEnter={onMouseEnter}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        onMouseLeave={onMouseLeave}\n        className={cx(styles.comboboxOption, className, {\n          [styles.disabled]: disabled,\n          [styles.selected]: selected,\n          [styles.active]: isActive,\n          [styles.activeOutline]: visualFocus\n        })}\n        style={{ height: optionLineHeight }}\n      >\n        {optionRendererValue || optionValue}\n      </div>\n    </Tooltip>\n  );\n};\n\nexport default withStaticProps(ComboboxOption, { iconTypes: ComboboxOptionIconTypeEnum });\n"],"names":["withStaticProps","_ref","index","option","className","isActive","visualFocus","scrollRef","_ref$scrollOffset","scrollOffset","onOptionClick","onOptionLeave","onOptionHover","optionLineHeight","_ref$shouldScrollWhen","shouldScrollWhenActive","_ref$optionRenderer","optionRenderer","id","leftIcon","leftIconType","rightIcon","rightIconType","label","_option$iconSize","iconSize","disabled","selected","ariaLabel","_option$belongToCateg","belongToCategory","tooltipContent","ref","useRef","labelRef","isOptionOverflowing","useIsOverflowing","useEffect","element","current","scrollTop","offsetTop","_a","scrollIntoView","call","behaviour","renderIcon","icon","iconType","cx","styles","optionIcon","React","createElement","Icon","ignoreFocusStyle","onClick","useCallback","event","onMouseLeave","onMouseEnter","onKeyDown","key","keyCodes","ENTER","SPACE","optionRendererValue","useMemo","optionValue","Fragment","left","optionLabel","Tooltip","content","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}

package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss.js

@@ -1,2 +1,2 @@
-var o={comboboxOption:"comboboxOption_e62a15a830",disabled:"disabled_2be02e16d8",selected:"selected_fa673f817d",active:"active_b5bcf22afe",activeOutline:"activeOutline_5c7e103d89",optionLabel:"optionLabel_7f77e774de",optionIcon:"optionIcon_c261d2eff9",left:"left_6ca45c65e7"};!function(o){if("undefined"==typeof document)return;const e=document.head||document.getElementsByTagName("head")[0],n="s_id-cc5db5fd586e_3_0_0-alpha_0";if(e.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,e.firstChild?e.insertBefore(a,e.firstChild):e.appendChild(a),a.appendChild(document.createTextNode(o))}(".comboboxOption_e62a15a830 {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n\n.comboboxOption_e62a15a830.disabled_2be02e16d8 {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.comboboxOption_e62a15a830.disabled_2be02e16d8:hover {\n  background-color: transparent;\n}\n\n.comboboxOption_e62a15a830.selected_fa673f817d {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption_e62a15a830:hover:not(.disabled_2be02e16d8):not(.selected_fa673f817d),\n.comboboxOption_e62a15a830.active_b5bcf22afe {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption_e62a15a830.activeOutline_5c7e103d89 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n\n.comboboxOption_e62a15a830 .optionLabel_7f77e774de {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption_e62a15a830 .optionIcon_c261d2eff9 {\n  flex: 0 0 auto;\n}\n\n.comboboxOption_e62a15a830 .optionIcon_c261d2eff9.left_6ca45c65e7 {\n  margin-right: 4px;\n}");export{o as default};
+var o={comboboxOption:"comboboxOption_3c9578e539",disabled:"disabled_0b8fd1deb8",selected:"selected_9ad5dd2403",active:"active_a84fe7ca8f",activeOutline:"activeOutline_3f8340768d",optionLabel:"optionLabel_85096df93e",optionIcon:"optionIcon_2937a1ea24",left:"left_08ff3cf5ea"};!function(o){const e="s_id-cc5db5fd586e_3_0_0-alpha_10";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".comboboxOption_3c9578e539 {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n\n.comboboxOption_3c9578e539.disabled_0b8fd1deb8 {\n  cursor: not-allowed;\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.comboboxOption_3c9578e539.disabled_0b8fd1deb8:hover {\n  background-color: transparent;\n}\n\n.comboboxOption_3c9578e539.selected_9ad5dd2403 {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption_3c9578e539:hover:not(.disabled_0b8fd1deb8):not(.selected_9ad5dd2403),\n.comboboxOption_3c9578e539.active_a84fe7ca8f {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption_3c9578e539.activeOutline_3f8340768d {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  background-color: var(--secondary-background-color);\n}\n\n.comboboxOption_3c9578e539 .optionLabel_85096df93e {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption_3c9578e539 .optionIcon_2937a1ea24 {\n  flex: 0 0 auto;\n}\n\n.comboboxOption_3c9578e539 .optionIcon_2937a1ea24.left_08ff3cf5ea {\n  margin-right: 4px;\n}");export{o as default};
 //# sourceMappingURL=ComboboxOption.module.scss.js.map

package/dist/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss.js

@@ -1,2 +1,2 @@
-var e={stickyCategoryHeader:"stickyCategoryHeader_6a7f96042d"};!function(e){if("undefined"==typeof document)return;const t=document.head||document.getElementsByTagName("head")[0],n="s_id-f549b49034f1_3_0_0-alpha_0";if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}(".stickyCategoryHeader_6a7f96042d {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--spacing-xs);\n  display: flex;\n  align-items: center;\n}");export{e as default};
+var e={stickyCategoryHeader:"stickyCategoryHeader_37a755e8e8"};!function(e){const t="s_id-f549b49034f1_3_0_0-alpha_10";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_37a755e8e8 {\n  position: absolute;\n  z-index: 10;\n  width: calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--spacing-xs);\n  display: flex;\n  align-items: center;\n}");export{e as default};
 //# sourceMappingURL=StickyCategoryHeader.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var n={counter:"counter_2cb70c1310",withAnimation:"withAnimation_168959b746",counterPopElastic:"counterPopElastic_e1ceb97fa9",sizeSmall:"sizeSmall_7bbd88ab10",sizeLarge:"sizeLarge_dfe074a303",kindFill:"kindFill_3690808378",colorPrimary:"colorPrimary_aa85336d48",colorDark:"colorDark_9c1fd420b3",colorNegative:"colorNegative_9ba9c7c3ab",colorLight:"colorLight_176637a82f",kindLine:"kindLine_d9b12737ab",fadeEnter:"fadeEnter_bf2d369483",fadeEnterActive:"fadeEnterActive_8270881333",fadeExit:"fadeExit_9f8aa73ee5",fadeExitActive:"fadeExitActive_aef1fdf298","counter-pop-elastic":"counter-pop-elastic_5912b53543"};!function(n){if("undefined"==typeof document)return;const o=document.head||document.getElementsByTagName("head")[0],r="s_id-2d04cfa2a785_3_0_0-alpha_0";if(o.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(n))}(".counter_2cb70c1310 {\n  display: inline-flex;\n  justify-content: center;\n  border-radius: 30px;\n  overflow: hidden;\n  transform-origin: center;\n}\n@keyframes counter-pop-elastic_5912b53543 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.withAnimation_168959b746 {\n  animation: counterPopElastic_e1ceb97fa9 var(--motion-expressive-short);\n}\n.sizeSmall_7bbd88ab10 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeLarge_dfe074a303 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  min-width: 24px;\n  padding: 2px var(--spacing-small);\n}\n.kindFill_3690808378.colorPrimary_aa85336d48 {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_3690808378.colorDark_9c1fd420b3 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_3690808378.colorNegative_9ba9c7c3ab {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_3690808378.colorLight_176637a82f {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_d9b12737ab {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_d9b12737ab.colorPrimary_aa85336d48 {\n  color: var(--primary-color);\n}\n.kindLine_d9b12737ab.colorDark_9c1fd420b3 {\n  color: var(--inverted-color-background);\n}\n.kindLine_d9b12737ab.colorNegative_9ba9c7c3ab {\n  color: var(--negative-color);\n}\n.kindLine_d9b12737ab.colorLight_176637a82f {\n  color: var(--primary-text-color);\n  box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter_bf2d369483 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_8270881333 {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit_9f8aa73ee5 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_aef1fdf298 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
+var n={counter:"counter_4628df7ec9",withAnimation:"withAnimation_bce4cbdd57",counterPopElastic:"counterPopElastic_b200132a38",sizeSmall:"sizeSmall_ca65c1237c",sizeLarge:"sizeLarge_7cc7eb31a8",kindFill:"kindFill_0c311daa08",colorPrimary:"colorPrimary_f0e1f4f892",colorDark:"colorDark_df54e14477",colorNegative:"colorNegative_c88fe8ab3e",colorLight:"colorLight_80bb82b8a7",kindLine:"kindLine_c2b8027dd2",fadeEnter:"fadeEnter_e74e0b1ce3",fadeEnterActive:"fadeEnterActive_bdc5585eda",fadeExit:"fadeExit_4aeaac9278",fadeExitActive:"fadeExitActive_f697955750","counter-pop-elastic":"counter-pop-elastic_993a1c5969"};!function(n){const o="s_id-2d04cfa2a785_3_0_0-alpha_10";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".counter_4628df7ec9 {\n  display: inline-flex;\n  justify-content: center;\n  border-radius: 30px;\n  overflow: hidden;\n  transform-origin: center;\n}\n@keyframes counter-pop-elastic_993a1c5969 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n.withAnimation_bce4cbdd57 {\n  animation: counterPopElastic_b200132a38 var(--motion-expressive-short);\n}\n.sizeSmall_ca65c1237c {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--spacing-small);\n}\n.sizeLarge_7cc7eb31a8 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  min-width: 24px;\n  padding: 2px var(--spacing-small);\n}\n.kindFill_0c311daa08.colorPrimary_f0e1f4f892 {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_0c311daa08.colorDark_df54e14477 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_0c311daa08.colorNegative_c88fe8ab3e {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_0c311daa08.colorLight_80bb82b8a7 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_c2b8027dd2 {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_c2b8027dd2.colorPrimary_f0e1f4f892 {\n  color: var(--primary-color);\n}\n.kindLine_c2b8027dd2.colorDark_df54e14477 {\n  color: var(--inverted-color-background);\n}\n.kindLine_c2b8027dd2.colorNegative_c88fe8ab3e {\n  color: var(--negative-color);\n}\n.kindLine_c2b8027dd2.colorLight_80bb82b8a7 {\n  color: var(--primary-text-color);\n  box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter_e74e0b1ce3 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_bdc5585eda {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit_4aeaac9278 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_f697955750 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
 //# sourceMappingURL=Counter.module.scss.js.map

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js

@@ -1,2 +1,2 @@
-import o from"react";import n from"../../Icon/Icon.js";import t from"../../Icon/Icons/components/MoveArrowLeft.js";import e from"../../Icon/Icons/components/MoveArrowRight.js";import r from"./DateNavigationItem.module.scss.js";var c={prev:t,next:e},i=function(t){var e=t.onClick;return o.createElement("button",{type:"button",className:r.navigationItemContainer,onClick:function(){return e&&e()}},o.createElement(n,{iconType:"svg",icon:c[t.kind],iconSize:24}))};export{i as default};
+import t from"react";import o from"../../Icon/Icon.js";import"../../../../icons/dist/_virtual/_tslib.js";import"../../../../icons/dist/react/AddSmall.js";import"../../../../icons/dist/react/Alert.js";import"../../../../icons/dist/react/Check.js";import"../../../../icons/dist/react/CloseSmall.js";import"../../../../icons/dist/react/DropdownChevronDown.js";import"../../../../icons/dist/react/DropdownChevronRight.js";import"../../../../icons/dist/react/DropdownChevronUp.js";import"../../../../icons/dist/react/Info.js";import"../../../../icons/dist/react/Menu.js";import i from"../../../../icons/dist/react/MoveArrowLeft.js";import r from"../../../../icons/dist/react/MoveArrowRight.js";import"../../../../icons/dist/react/NavigationChevronLeft.js";import"../../../../icons/dist/react/NavigationChevronRight.js";import"../../../../icons/dist/react/NoColor.js";import"../../../../icons/dist/react/Remove.js";import"../../../../icons/dist/react/Search.js";import"../../../../icons/dist/react/Sort.js";import"../../../../icons/dist/react/SortAscending.js";import"../../../../icons/dist/react/SortDescending.js";import"../../../../icons/dist/react/Warning.js";import s from"./DateNavigationItem.module.scss.js";var n={prev:i,next:r},e=function(i){var r=i.onClick;return t.createElement("button",{type:"button",className:s.navigationItemContainer,onClick:function(){return r&&r()}},t.createElement(o,{iconType:"svg",icon:n[i.kind],iconSize:24}))};export{e as default};
 //# sourceMappingURL=DateNavigationItem.js.map

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateNavigationItem.js","sources":["../../../../../src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon/Icon\";\nimport MoveArrowLeft from \"../../Icon/Icons/components/MoveArrowLeft\";\nimport MoveArrowRight from \"../../Icon/Icons/components/MoveArrowRight\";\nimport styles from \"./DateNavigationItem.module.scss\";\n\nconst ICONS = {\n  prev: MoveArrowLeft,\n  next: MoveArrowRight\n};\n\nexport interface DateNavigationItemProps {\n  kind: keyof typeof ICONS;\n  onClick?: () => void;\n}\n\nconst DateNavigationItem = ({ kind, onClick }: DateNavigationItemProps) => {\n  return (\n    <button type=\"button\" className={styles.navigationItemContainer} onClick={() => onClick && onClick()}>\n      <Icon iconType=\"svg\" icon={ICONS[kind]} iconSize={24} />\n    </button>\n  );\n};\n\nexport default DateNavigationItem;\n"],"names":["ICONS","prev","MoveArrowLeft","next","MoveArrowRight","DateNavigationItem","_ref","onClick","React","type","className","styles","navigationItemContainer","createElement","Icon","iconType","icon","kind","iconSize"],"mappings":"mOAMA,IAAMA,EAAQ,CACZC,KAAMC,EACNC,KAAMC,GAQFC,EAAqB,SAAHC,GAAkD,IAAtCC,EAAOD,EAAPC,QAClC,OACEC,0BAAQC,KAAK,SAASC,UAAWC,EAAOC,wBAAyBL,QAAS,WAAA,OAAMA,GAAWA,GAAS,GAClGC,EAAAK,cAACC,EAAK,CAAAC,SAAS,MAAMC,KAAMhB,EAHCM,EAAJW,MAGgBC,SAAU,KAGxD"}
+{"version":3,"file":"DateNavigationItem.js","sources":["../../../../../src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon/Icon\";\nimport { MoveArrowLeft, MoveArrowRight } from \"@vibe/icons\";\nimport styles from \"./DateNavigationItem.module.scss\";\n\nconst ICONS = {\n  prev: MoveArrowLeft,\n  next: MoveArrowRight\n};\n\nexport interface DateNavigationItemProps {\n  kind: keyof typeof ICONS;\n  onClick?: () => void;\n}\n\nconst DateNavigationItem = ({ kind, onClick }: DateNavigationItemProps) => {\n  return (\n    <button type=\"button\" className={styles.navigationItemContainer} onClick={() => onClick && onClick()}>\n      <Icon iconType=\"svg\" icon={ICONS[kind]} iconSize={24} />\n    </button>\n  );\n};\n\nexport default DateNavigationItem;\n"],"names":["ICONS","prev","MoveArrowLeft","next","MoveArrowRight","DateNavigationItem","_ref","onClick","React","type","className","styles","navigationItemContainer","createElement","Icon","iconType","icon","kind","iconSize"],"mappings":"yrCAKA,IAAMA,EAAQ,CACZC,KAAMC,EACNC,KAAMC,GAQFC,EAAqB,SAAHC,GAAkD,IAAtCC,EAAOD,EAAPC,QAClC,OACEC,0BAAQC,KAAK,SAASC,UAAWC,EAAOC,wBAAyBL,QAAS,WAAA,OAAMA,GAAWA,GAAS,GAClGC,EAAAK,cAACC,EAAK,CAAAC,SAAS,MAAMC,KAAMhB,EAHCM,EAAJW,MAGgBC,SAAU,KAGxD"}

package/dist/src/components/DatePicker/DateNavigationItem/DateNavigationItem.module.scss.js

@@ -1,2 +1,2 @@
-var e={navigationItemContainer:"navigationItemContainer_fb35de597d"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],t="s_id-84193b4fa4fe_3_0_0-alpha_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))}(".navigationItemContainer_fb35de597d {\n  line-height: 36px;\n  font-size: 28px;\n  color: var(--icon-color);\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: none;\n  cursor: pointer;\n}");export{e as default};
+var e={navigationItemContainer:"navigationItemContainer_d1d91b27a4"};!function(e){const n="s_id-84193b4fa4fe_3_0_0-alpha_10";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".navigationItemContainer_d1d91b27a4 {\n  line-height: 36px;\n  font-size: 28px;\n  color: var(--icon-color);\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: none;\n  cursor: pointer;\n}");export{e as default};
 //# sourceMappingURL=DateNavigationItem.module.scss.js.map

package/dist/src/components/DatePicker/DatePicker.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import n,{forwardRef as a,useState as r,useCallback as i}from"react";import o from"classnames";import s from"moment";import"react-dates/initialize";import{DayPickerRangeController as d,DayPickerSingleDateController as l}from"react-dates";import c from"./DatePickerHeader/DatePickerHeader.js";import m from"./DateNavigationItem/DateNavigationItem.js";import u from"./YearPicker/YearPicker.js";import{WEEK_FIRST_DAY as f,DAY_SIZE as D}from"./constants.js";import{FocusInput as v,Direction as h}from"./types.js";import{getTestId as k}from"../../tests/testIds.js";import{ComponentDefaultTestId as E}from"../../tests/constants.js";import{NOOP as p}from"../../utils/function-utils.js";import y from"./DatePicker.module.scss.js";import"./external_datepicker.scss.js";var g=a((function(a,g){var P=a.id,b=a.className,N=a.firstDayOfWeek,j=void 0===N?f:N,O=a.daySize,C=void 0===O?D:O,M=a.range,S=void 0!==M&&M,Y=a.shouldBlockDay,I=a.shouldBlockYear,W=a.numberOfMonths,B=void 0===W?1:W,K=a.hideNavigationKeys,R=void 0!==K&&K,x=a.date,A=a.endDate,T=a.onPickDate,_=a.enableOutsideDays,z=void 0!==_&&_,H=a.showWeekNumber,F=void 0!==H&&H,w=a.shouldBlockRange,V=a["data-testid"],L=r(v.startDate),q=e(L,2),G=q[0],J=q[1],Q=r(!1),U=e(Q,2),X=U[0],Z=U[1],$=r(null),ee=e($,2),te=ee[0],ne=ee[1],ae=r(null),re=e(ae,2),ie=re[0],oe=re[1],se=i((function(e){var t=e.month,a=e.onYearSelect;return!ie&&a&&oe((function(){return a})),n.createElement(c,{"data-testid":V||k(E.DATEPICKER_HEADER,P),currentDate:t||s(),isMonthYearSelection:X,onToggleMonthYearPicker:function(){return Z((function(e){return!e}))},hideNavigationKeys:R})}),[X,V,P,R,ie]),de=i((function(e){var t=0===j?e.clone().add(1,"d").isoWeek():e.isoWeek();return n.createElement(n.Fragment,null,n.createElement("span",{className:y.calendarDayWeekNumber},t)," ",e.format("D"))}),[j]),le=i((function(e){var t=te||x;ne(e),Z(!1),ie(t,s(e).year())}),[te,x,ie]),ce=i((function(){return n.createElement(u,{"data-testid":V||k(E.DATEPICKER_YEAR_SELECTION,P),selectedDate:x,isYearBlocked:I,changeCurrentDate:le})}),[V,P,te,x,I,le]),me=i((function(e){T&&T(G===v.startDate?Object.assign(Object.assign({},e),{endDate:null}):e)}),[G,T]),ue=i((function(e){J(e||v.startDate)}),[]),fe=!R&&!X;return n.createElement("div",{"data-testid":V||k(E.DATEPICKER,P),ref:g,id:P,className:o(y.datepickerContainer,b,t(t(t({},y.withWeekNumber,F),y.rangePickerMode,S),y.monthYearSelection,X))},S?n.createElement(d,{renderDayContents:F?de:void 0,firstDayOfWeek:j,hideKeyboardShortcutsPanel:!0,startDate:x,endDate:A,onDatesChange:me,focusedInput:G,minimumNights:0,onFocusChange:ue,navPrev:fe?n.createElement(m,{kind:h.prev}):n.createElement("div",null),navNext:fe?n.createElement(m,{kind:h.next}):n.createElement("div",null),daySize:C,isOutsideRange:w,isDayBlocked:Y,renderMonthElement:se,enableOutsideDays:z||F,numberOfMonths:B,initialVisibleMonth:function(){return te||x||s()}}):n.createElement(l,{renderDayContents:F?de:void 0,firstDayOfWeek:j,hideKeyboardShortcutsPanel:!0,onFocusChange:p,numberOfMonths:B,date:x,onDateChange:function(e){return T(e)},navPrev:fe?n.createElement(m,{kind:h.prev}):n.createElement("div",null),navNext:fe?n.createElement(m,{kind:h.next}):n.createElement("div",null),focused:!0,renderMonthElement:se,enableOutsideDays:z||F,daySize:C,isDayBlocked:Y,initialVisibleMonth:function(){return te||x||s()}}),X&&ce())}));export{g as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import n,{forwardRef as a,useState as r,useCallback as i}from"react";import o from"classnames";import s from"moment";import"react-dates/initialize.js";import{DayPickerRangeController as d,DayPickerSingleDateController as l}from"react-dates";import c from"./DatePickerHeader/DatePickerHeader.js";import m from"./DateNavigationItem/DateNavigationItem.js";import u from"./YearPicker/YearPicker.js";import{WEEK_FIRST_DAY as f,DAY_SIZE as D}from"./constants.js";import{FocusInput as v,Direction as h}from"./types.js";import{getTestId as k}from"../../tests/testIds.js";import{ComponentDefaultTestId as E}from"../../tests/constants.js";import{NOOP as p}from"../../utils/function-utils.js";import y from"./DatePicker.module.scss.js";import"./external_datepicker.scss.js";var g=a((function(a,g){var P=a.id,b=a.className,j=a.firstDayOfWeek,N=void 0===j?f:j,O=a.daySize,C=void 0===O?D:O,M=a.range,S=void 0!==M&&M,Y=a.shouldBlockDay,I=a.shouldBlockYear,W=a.numberOfMonths,B=void 0===W?1:W,K=a.hideNavigationKeys,R=void 0!==K&&K,x=a.date,A=a.endDate,T=a.onPickDate,_=a.enableOutsideDays,z=void 0!==_&&_,H=a.showWeekNumber,F=void 0!==H&&H,w=a.shouldBlockRange,V=a["data-testid"],L=r(v.startDate),q=e(L,2),G=q[0],J=q[1],Q=r(!1),U=e(Q,2),X=U[0],Z=U[1],$=r(null),ee=e($,2),te=ee[0],ne=ee[1],ae=r(null),re=e(ae,2),ie=re[0],oe=re[1],se=i((function(e){var t=e.month,a=e.onYearSelect;return!ie&&a&&oe((function(){return a})),n.createElement(c,{"data-testid":V||k(E.DATEPICKER_HEADER,P),currentDate:t||s(),isMonthYearSelection:X,onToggleMonthYearPicker:function(){return Z((function(e){return!e}))},hideNavigationKeys:R})}),[X,V,P,R,ie]),de=i((function(e){var t=0===N?e.clone().add(1,"d").isoWeek():e.isoWeek();return n.createElement(n.Fragment,null,n.createElement("span",{className:y.calendarDayWeekNumber},t)," ",e.format("D"))}),[N]),le=i((function(e){var t=te||x;ne(e),Z(!1),ie(t,s(e).year())}),[te,x,ie]),ce=i((function(){return n.createElement(u,{"data-testid":V||k(E.DATEPICKER_YEAR_SELECTION,P),selectedDate:x,isYearBlocked:I,changeCurrentDate:le})}),[V,P,te,x,I,le]),me=i((function(e){T&&T(G===v.startDate?Object.assign(Object.assign({},e),{endDate:null}):e)}),[G,T]),ue=i((function(e){J(e||v.startDate)}),[]),fe=!R&&!X;return n.createElement("div",{"data-testid":V||k(E.DATEPICKER,P),ref:g,id:P,className:o(y.datepickerContainer,b,t(t(t({},y.withWeekNumber,F),y.rangePickerMode,S),y.monthYearSelection,X))},S?n.createElement(d,{renderDayContents:F?de:void 0,firstDayOfWeek:N,hideKeyboardShortcutsPanel:!0,startDate:x,endDate:A,onDatesChange:me,focusedInput:G,minimumNights:0,onFocusChange:ue,navPrev:fe?n.createElement(m,{kind:h.prev}):n.createElement("div",null),navNext:fe?n.createElement(m,{kind:h.next}):n.createElement("div",null),daySize:C,isOutsideRange:w,isDayBlocked:Y,renderMonthElement:se,enableOutsideDays:z||F,numberOfMonths:B,initialVisibleMonth:function(){return te||x||s()}}):n.createElement(l,{renderDayContents:F?de:void 0,firstDayOfWeek:N,hideKeyboardShortcutsPanel:!0,onFocusChange:p,numberOfMonths:B,date:x,onDateChange:function(e){return T(e)},navPrev:fe?n.createElement(m,{kind:h.prev}):n.createElement("div",null),navNext:fe?n.createElement(m,{kind:h.next}):n.createElement("div",null),focused:!0,renderMonthElement:se,enableOutsideDays:z||F,daySize:C,isDayBlocked:Y,initialVisibleMonth:function(){return te||x||s()}}),X&&ce())}));export{g as default};
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport cx from \"classnames\";\nimport moment from \"moment\";\nimport \"react-dates/initialize\";\nimport { DayOfWeekShape, DayPickerRangeController, DayPickerSingleDateController } from \"react-dates\";\nimport DatePickerHeaderComponent from \"./DatePickerHeader/DatePickerHeader\";\nimport DateNavigationItem from \"./DateNavigationItem/DateNavigationItem\";\nimport YearPicker from \"./YearPicker/YearPicker\";\nimport { DAY_SIZE, WEEK_FIRST_DAY } from \"./constants\";\nimport { Direction, FocusInput, Moment, RangeDate } from \"./types\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport styles from \"./DatePicker.module.scss\";\n// Make sure to update when upgrading react-dates\nimport \"./external_datepicker.scss\";\n\nexport interface DatePickerProps extends VibeComponentProps {\n  /** set the first day of the week to display */\n  firstDayOfWeek?: DayOfWeekShape;\n  /** current start date */\n  date?: Moment;\n  /** current end date */\n  endDate?: Moment;\n  /** on date selected callback */\n  onPickDate?: (date: Moment | RangeDate) => void;\n  /** hide the month navigations keys */\n  hideNavigationKeys?: boolean;\n  /** show days outside the cuurent month view */\n  enableOutsideDays?: boolean;\n  /** show week number column */\n  showWeekNumber?: boolean;\n  /** set the size of single day element */\n  daySize?: number;\n  /** determine if day should be disabled */\n  shouldBlockDay?: (date: Moment) => boolean;\n  /** date range mode*/\n  range?: boolean;\n  /** number of month to display*/\n  numberOfMonths?: number;\n  /** determine if year should be disabled */\n  shouldBlockYear?: (year: number) => boolean;\n  /** determine if date range should be disabled */\n  shouldBlockRange?: (date: Moment) => boolean;\n}\n\nconst DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      id,\n      className,\n      firstDayOfWeek = WEEK_FIRST_DAY,\n      daySize = DAY_SIZE,\n      range = false,\n      shouldBlockDay,\n      shouldBlockYear,\n      numberOfMonths = 1,\n      hideNavigationKeys = false,\n      date,\n      endDate,\n      onPickDate,\n      enableOutsideDays = false,\n      showWeekNumber = false,\n      shouldBlockRange,\n      \"data-testid\": dataTestId\n    }: DatePickerProps,\n    ref\n  ) => {\n    const [focusedInput, setFocusedInput] = useState(FocusInput.startDate);\n    const [isMonthYearSelection, setIsMonthYearSelection] = useState(false); //show Month/Year selection dropdown\n    const [overrideDateForView, setOverrideDateForView] = useState<Moment | null>(null);\n    const [yearFunc, setYearFunc] = useState(null);\n\n    const renderMonth = useCallback(\n      ({\n        month,\n        onYearSelect\n      }: {\n        month: moment.Moment;\n        onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;\n      }) => {\n        if (!yearFunc && onYearSelect) {\n          setYearFunc(() => onYearSelect);\n        }\n        return (\n          <DatePickerHeaderComponent\n            data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_HEADER, id)}\n            currentDate={month || moment()}\n            isMonthYearSelection={isMonthYearSelection}\n            onToggleMonthYearPicker={() => setIsMonthYearSelection(val => !val)}\n            hideNavigationKeys={hideNavigationKeys}\n          />\n        );\n      },\n      [isMonthYearSelection, dataTestId, id, hideNavigationKeys, yearFunc]\n    );\n\n    const renderDay = useCallback(\n      (day: Moment) => {\n        const weekNumber = firstDayOfWeek === 0 ? day.clone().add(1, \"d\").isoWeek() : day.isoWeek();\n        return (\n          <>\n            <span className={styles.calendarDayWeekNumber}>{weekNumber}</span> {day.format(\"D\")}\n          </>\n        );\n      },\n      [firstDayOfWeek]\n    );\n\n    const changeCurrentDateFromMonthYearView = useCallback(\n      (newDate: Moment | null) => {\n        const oldDate = overrideDateForView || date;\n        setOverrideDateForView(newDate);\n        setIsMonthYearSelection(false);\n        yearFunc(oldDate, moment(newDate).year());\n      },\n      [overrideDateForView, date, yearFunc]\n    );\n\n    const renderMonthYearSelection = useCallback(() => {\n      return (\n        <YearPicker\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_YEAR_SELECTION, id)}\n          selectedDate={date}\n          isYearBlocked={shouldBlockYear}\n          changeCurrentDate={changeCurrentDateFromMonthYearView}\n        />\n      );\n    }, [dataTestId, id, overrideDateForView, date, shouldBlockYear, changeCurrentDateFromMonthYearView]);\n\n    const onDateRangeChange = useCallback(\n      (date: RangeDate) => {\n        if (!onPickDate) return;\n        if (focusedInput === FocusInput.startDate) {\n          onPickDate({ ...date, endDate: null });\n        } else {\n          onPickDate(date);\n        }\n      },\n      [focusedInput, onPickDate]\n    );\n\n    const onFocusChange = useCallback((focusedInput: FocusInput) => {\n      setFocusedInput(focusedInput || FocusInput.startDate);\n    }, []);\n\n    const shouldShowNav = !hideNavigationKeys && !isMonthYearSelection;\n    return (\n      <div\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER, id)}\n        ref={ref}\n        id={id}\n        className={cx(styles.datepickerContainer, className, {\n          [styles.withWeekNumber]: showWeekNumber,\n          [styles.rangePickerMode]: range,\n          [styles.monthYearSelection]: isMonthYearSelection\n        })}\n      >\n        {range ? (\n          <DayPickerRangeController\n            renderDayContents={showWeekNumber ? renderDay : undefined}\n            firstDayOfWeek={firstDayOfWeek}\n            hideKeyboardShortcutsPanel\n            startDate={date}\n            endDate={endDate}\n            onDatesChange={onDateRangeChange}\n            focusedInput={focusedInput}\n            minimumNights={0}\n            onFocusChange={onFocusChange}\n            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}\n            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}\n            daySize={daySize}\n            isOutsideRange={shouldBlockRange}\n            isDayBlocked={shouldBlockDay}\n            renderMonthElement={renderMonth}\n            enableOutsideDays={enableOutsideDays || showWeekNumber}\n            numberOfMonths={numberOfMonths}\n            initialVisibleMonth={() => overrideDateForView || date || moment()}\n          />\n        ) : (\n          <DayPickerSingleDateController\n            renderDayContents={showWeekNumber ? renderDay : undefined}\n            firstDayOfWeek={firstDayOfWeek}\n            hideKeyboardShortcutsPanel\n            onFocusChange={NOOP}\n            numberOfMonths={numberOfMonths}\n            date={date}\n            onDateChange={(date: Moment) => onPickDate(date)}\n            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}\n            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}\n            focused={true}\n            renderMonthElement={renderMonth}\n            enableOutsideDays={enableOutsideDays || showWeekNumber}\n            daySize={daySize}\n            isDayBlocked={shouldBlockDay}\n            initialVisibleMonth={() => overrideDateForView || date || moment()}\n          />\n        )}\n        {isMonthYearSelection && renderMonthYearSelection()}\n      </div>\n    );\n  }\n);\n\nexport default DatePicker;\n"],"names":["DatePicker","forwardRef","_ref","ref","id","className","_ref$firstDayOfWeek","firstDayOfWeek","WEEK_FIRST_DAY","_ref$daySize","daySize","DAY_SIZE","_ref$range","range","shouldBlockDay","shouldBlockYear","_ref$numberOfMonths","numberOfMonths","_ref$hideNavigationKe","hideNavigationKeys","date","endDate","onPickDate","_ref$enableOutsideDay","enableOutsideDays","_ref$showWeekNumber","showWeekNumber","shouldBlockRange","dataTestId","_useState","useState","FocusInput","startDate","_useState2","_slicedToArray","focusedInput","setFocusedInput","_useState3","_useState4","isMonthYearSelection","setIsMonthYearSelection","_useState5","_useState6","overrideDateForView","setOverrideDateForView","_useState7","_useState8","yearFunc","setYearFunc","renderMonth","useCallback","_ref2","month","onYearSelect","React","DatePickerHeaderComponent","getTestId","ComponentDefaultTestId","DATEPICKER_HEADER","currentDate","moment","onToggleMonthYearPicker","val","renderDay","day","weekNumber","clone","add","isoWeek","createElement","Fragment","styles","calendarDayWeekNumber","format","changeCurrentDateFromMonthYearView","newDate","oldDate","year","renderMonthYearSelection","YearPicker","DATEPICKER_YEAR_SELECTION","selectedDate","isYearBlocked","changeCurrentDate","onDateRangeChange","onFocusChange","shouldShowNav","DATEPICKER","cx","datepickerContainer","_defineProperty","withWeekNumber","rangePickerMode","monthYearSelection","DayPickerRangeController","renderDayContents","undefined","hideKeyboardShortcutsPanel","onDatesChange","minimumNights","navPrev","DateNavigationItem","kind","Direction","prev","navNext","next","isOutsideRange","isDayBlocked","renderMonthElement","initialVisibleMonth","DayPickerSingleDateController","NOOP","onDateChange","focused"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport cx from \"classnames\";\nimport moment from \"moment\";\nimport \"react-dates/initialize.js\";\nimport { DayOfWeekShape, DayPickerRangeController, DayPickerSingleDateController } from \"react-dates\";\nimport DatePickerHeaderComponent from \"./DatePickerHeader/DatePickerHeader\";\nimport DateNavigationItem from \"./DateNavigationItem/DateNavigationItem\";\nimport YearPicker from \"./YearPicker/YearPicker\";\nimport { DAY_SIZE, WEEK_FIRST_DAY } from \"./constants\";\nimport { Direction, FocusInput, Moment, RangeDate } from \"./types\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport styles from \"./DatePicker.module.scss\";\n// Make sure to update when upgrading react-dates\nimport \"./external_datepicker.scss\";\n\nexport interface DatePickerProps extends VibeComponentProps {\n  /** set the first day of the week to display */\n  firstDayOfWeek?: DayOfWeekShape;\n  /** current start date */\n  date?: Moment;\n  /** current end date */\n  endDate?: Moment;\n  /** on date selected callback */\n  onPickDate?: (date: Moment | RangeDate) => void;\n  /** hide the month navigations keys */\n  hideNavigationKeys?: boolean;\n  /** show days outside the cuurent month view */\n  enableOutsideDays?: boolean;\n  /** show week number column */\n  showWeekNumber?: boolean;\n  /** set the size of single day element */\n  daySize?: number;\n  /** determine if day should be disabled */\n  shouldBlockDay?: (date: Moment) => boolean;\n  /** date range mode*/\n  range?: boolean;\n  /** number of month to display*/\n  numberOfMonths?: number;\n  /** determine if year should be disabled */\n  shouldBlockYear?: (year: number) => boolean;\n  /** determine if date range should be disabled */\n  shouldBlockRange?: (date: Moment) => boolean;\n}\n\nconst DatePicker: VibeComponent<DatePickerProps, HTMLElement> = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      id,\n      className,\n      firstDayOfWeek = WEEK_FIRST_DAY,\n      daySize = DAY_SIZE,\n      range = false,\n      shouldBlockDay,\n      shouldBlockYear,\n      numberOfMonths = 1,\n      hideNavigationKeys = false,\n      date,\n      endDate,\n      onPickDate,\n      enableOutsideDays = false,\n      showWeekNumber = false,\n      shouldBlockRange,\n      \"data-testid\": dataTestId\n    }: DatePickerProps,\n    ref\n  ) => {\n    const [focusedInput, setFocusedInput] = useState(FocusInput.startDate);\n    const [isMonthYearSelection, setIsMonthYearSelection] = useState(false); //show Month/Year selection dropdown\n    const [overrideDateForView, setOverrideDateForView] = useState<Moment | null>(null);\n    const [yearFunc, setYearFunc] = useState(null);\n\n    const renderMonth = useCallback(\n      ({\n        month,\n        onYearSelect\n      }: {\n        month: moment.Moment;\n        onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;\n      }) => {\n        if (!yearFunc && onYearSelect) {\n          setYearFunc(() => onYearSelect);\n        }\n        return (\n          <DatePickerHeaderComponent\n            data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_HEADER, id)}\n            currentDate={month || moment()}\n            isMonthYearSelection={isMonthYearSelection}\n            onToggleMonthYearPicker={() => setIsMonthYearSelection(val => !val)}\n            hideNavigationKeys={hideNavigationKeys}\n          />\n        );\n      },\n      [isMonthYearSelection, dataTestId, id, hideNavigationKeys, yearFunc]\n    );\n\n    const renderDay = useCallback(\n      (day: Moment) => {\n        const weekNumber = firstDayOfWeek === 0 ? day.clone().add(1, \"d\").isoWeek() : day.isoWeek();\n        return (\n          <>\n            <span className={styles.calendarDayWeekNumber}>{weekNumber}</span> {day.format(\"D\")}\n          </>\n        );\n      },\n      [firstDayOfWeek]\n    );\n\n    const changeCurrentDateFromMonthYearView = useCallback(\n      (newDate: Moment | null) => {\n        const oldDate = overrideDateForView || date;\n        setOverrideDateForView(newDate);\n        setIsMonthYearSelection(false);\n        yearFunc(oldDate, moment(newDate).year());\n      },\n      [overrideDateForView, date, yearFunc]\n    );\n\n    const renderMonthYearSelection = useCallback(() => {\n      return (\n        <YearPicker\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER_YEAR_SELECTION, id)}\n          selectedDate={date}\n          isYearBlocked={shouldBlockYear}\n          changeCurrentDate={changeCurrentDateFromMonthYearView}\n        />\n      );\n    }, [dataTestId, id, overrideDateForView, date, shouldBlockYear, changeCurrentDateFromMonthYearView]);\n\n    const onDateRangeChange = useCallback(\n      (date: RangeDate) => {\n        if (!onPickDate) return;\n        if (focusedInput === FocusInput.startDate) {\n          onPickDate({ ...date, endDate: null });\n        } else {\n          onPickDate(date);\n        }\n      },\n      [focusedInput, onPickDate]\n    );\n\n    const onFocusChange = useCallback((focusedInput: FocusInput) => {\n      setFocusedInput(focusedInput || FocusInput.startDate);\n    }, []);\n\n    const shouldShowNav = !hideNavigationKeys && !isMonthYearSelection;\n    return (\n      <div\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.DATEPICKER, id)}\n        ref={ref}\n        id={id}\n        className={cx(styles.datepickerContainer, className, {\n          [styles.withWeekNumber]: showWeekNumber,\n          [styles.rangePickerMode]: range,\n          [styles.monthYearSelection]: isMonthYearSelection\n        })}\n      >\n        {range ? (\n          <DayPickerRangeController\n            renderDayContents={showWeekNumber ? renderDay : undefined}\n            firstDayOfWeek={firstDayOfWeek}\n            hideKeyboardShortcutsPanel\n            startDate={date}\n            endDate={endDate}\n            onDatesChange={onDateRangeChange}\n            focusedInput={focusedInput}\n            minimumNights={0}\n            onFocusChange={onFocusChange}\n            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}\n            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}\n            daySize={daySize}\n            isOutsideRange={shouldBlockRange}\n            isDayBlocked={shouldBlockDay}\n            renderMonthElement={renderMonth}\n            enableOutsideDays={enableOutsideDays || showWeekNumber}\n            numberOfMonths={numberOfMonths}\n            initialVisibleMonth={() => overrideDateForView || date || moment()}\n          />\n        ) : (\n          <DayPickerSingleDateController\n            renderDayContents={showWeekNumber ? renderDay : undefined}\n            firstDayOfWeek={firstDayOfWeek}\n            hideKeyboardShortcutsPanel\n            onFocusChange={NOOP}\n            numberOfMonths={numberOfMonths}\n            date={date}\n            onDateChange={(date: Moment) => onPickDate(date)}\n            navPrev={shouldShowNav ? <DateNavigationItem kind={Direction.prev} /> : <div />}\n            navNext={shouldShowNav ? <DateNavigationItem kind={Direction.next} /> : <div />}\n            focused={true}\n            renderMonthElement={renderMonth}\n            enableOutsideDays={enableOutsideDays || showWeekNumber}\n            daySize={daySize}\n            isDayBlocked={shouldBlockDay}\n            initialVisibleMonth={() => overrideDateForView || date || moment()}\n          />\n        )}\n        {isMonthYearSelection && renderMonthYearSelection()}\n      </div>\n    );\n  }\n);\n\nexport default DatePicker;\n"],"names":["DatePicker","forwardRef","_ref","ref","id","className","_ref$firstDayOfWeek","firstDayOfWeek","WEEK_FIRST_DAY","_ref$daySize","daySize","DAY_SIZE","_ref$range","range","shouldBlockDay","shouldBlockYear","_ref$numberOfMonths","numberOfMonths","_ref$hideNavigationKe","hideNavigationKeys","date","endDate","onPickDate","_ref$enableOutsideDay","enableOutsideDays","_ref$showWeekNumber","showWeekNumber","shouldBlockRange","dataTestId","_useState","useState","FocusInput","startDate","_useState2","_slicedToArray","focusedInput","setFocusedInput","_useState3","_useState4","isMonthYearSelection","setIsMonthYearSelection","_useState5","_useState6","overrideDateForView","setOverrideDateForView","_useState7","_useState8","yearFunc","setYearFunc","renderMonth","useCallback","_ref2","month","onYearSelect","React","DatePickerHeaderComponent","getTestId","ComponentDefaultTestId","DATEPICKER_HEADER","currentDate","moment","onToggleMonthYearPicker","val","renderDay","day","weekNumber","clone","add","isoWeek","createElement","Fragment","styles","calendarDayWeekNumber","format","changeCurrentDateFromMonthYearView","newDate","oldDate","year","renderMonthYearSelection","YearPicker","DATEPICKER_YEAR_SELECTION","selectedDate","isYearBlocked","changeCurrentDate","onDateRangeChange","onFocusChange","shouldShowNav","DATEPICKER","cx","datepickerContainer","_defineProperty","withWeekNumber","rangePickerMode","monthYearSelection","DayPickerRangeController","renderDayContents","undefined","hideKeyboardShortcutsPanel","onDatesChange","minimumNights","navPrev","DateNavigationItem","kind","Direction","prev","navNext","next","isOutsideRange","isDayBlocked","renderMonthElement","initialVisibleMonth","DayPickerSingleDateController","NOOP","onDateChange","focused"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={datepickerContainer:"datepickerContainer_33669c9e65",monthYearSelection:"monthYearSelection_f1cbca201e",rangePickerMode:"rangePickerMode_032a7d8fb5",withWeekNumber:"withWeekNumber_958de2e278",calendarDayWeekNumber:"calendarDayWeekNumber_076ce404d2"};!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],r="s_id-08c822721057_3_0_0-alpha_0";if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}('.datepickerContainer_33669c9e65 {\n  position: relative;\n  min-height: 302px;\n}\n.datepickerContainer_33669c9e65 table tbody {\n  border-spacing: 0;\n  border-collapse: collapse;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  box-shadow: none;\n}\n.datepickerContainer_33669c9e65 td {\n  border: none;\n}\n.datepickerContainer_33669c9e65.monthYearSelection_f1cbca201e table tbody {\n  opacity: 0;\n}\n.datepickerContainer_33669c9e65.monthYearSelection_f1cbca201e .DayPicker_transitionContainer__horizontal {\n  transition: none;\n}\n.datepickerContainer_33669c9e65 .CalendarMonthGrid {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_33669c9e65 .CalendarMonth {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_33669c9e65 .DayPicker__horizontal {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_33669c9e65 .DayPicker {\n  box-shadow: none;\n  border: none;\n  border-radius: 0;\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default {\n  border: none;\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--primary-text-on-secondary-color);\n  background-color: var(--secondary-background-color);\n  border-top: 1px solid var(--secondary-background-color);\n  border-bottom: 1px solid var(--secondary-background-color);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default:hover {\n  background: none;\n  border: none;\n  border-top: 1px solid var(--secondary-background-color);\n  border-bottom: 1px solid var(--secondary-background-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default:hover::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: none;\n  background-color: var(--primary-background-hover-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default.CalendarDay__selected {\n  color: var(--text-color-on-primary);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default.CalendarDay__selected::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: none;\n  background: var(--primary-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__default.CalendarDay__selected::before:hover {\n  color: var(--text-color-on-primary);\n  background: var(--primary-color);\n}\n.datepickerContainer_33669c9e65 .CalendarMonth_caption {\n  color: var(--primary-text-on-secondary-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__today::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__today:hover::before {\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_33669c9e65 .CalendarDay__blocked_calendar, .datepickerContainer_33669c9e65 .CalendarDay__blocked_calendar:active, .datepickerContainer_33669c9e65 .CalendarDay__blocked_calendar:hover {\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.2;\n  pointer-events: none;\n}\n.datepickerContainer_33669c9e65 .DayPicker_weekHeader_li small {\n  font-size: 12px;\n  color: var(--secondary-text-on-secondary-color);\n  font-weight: 300;\n  cursor: default;\n}\n.datepickerContainer_33669c9e65 .DayPickerNavigation_rightButton__horizontal {\n  right: 22px;\n}\n.datepickerContainer_33669c9e65 .DayPickerNavigation .DayPickerNavigation_button:nth-child(1) {\n  left: 12px;\n}\n.datepickerContainer_33669c9e65 .DayPickerNavigation .DayPickerNavigation_button:nth-child(2) {\n  right: 12px;\n}\n.datepickerContainer_33669c9e65 .DayPickerNavigation_button__horizontal {\n  position: absolute;\n  top: 15px;\n  line-height: 0.78;\n  border-radius: 3px;\n  padding: 6px 9px;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_start {\n  border-radius: 0;\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_start:hover {\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_start::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  background-color: var(--primary-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_end {\n  border-radius: 0;\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_end:hover {\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected.CalendarDay__selected_end::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  background-color: var(--primary-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__hovered_span, .datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__hovered_span:hover {\n  border-radius: 0;\n  color: var(--primary-text-color);\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__hovered_span:hover::before, .datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__hovered_span:hover:hover::before {\n  border-radius: 0;\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected_span {\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected_span:hover {\n  color: var(--primary-text-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5 .CalendarDay__selected_span:hover::before {\n  border-radius: 0;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5.range-single-date-selected .CalendarDay__hovered_span {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5.range-single-date-selected .CalendarDay__hovered_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_33669c9e65.rangePickerMode_032a7d8fb5.range-single-date-selected .CalendarDay__hovered_span:hover::before {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 {\n  padding: 0 4px 0 8px;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .CalendarDay .calendarDayWeekNumber_076ce404d2 {\n  color: rgba(177, 177, 184, 0.7490196078);\n  pointer-events: none;\n  visibility: visible;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: -1px;\n  font-size: 14px;\n  width: 40px;\n  height: 37px;\n  left: 0px;\n  transform: translateX(-100%);\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay .calendarDayWeekNumber_076ce404d2 {\n  display: flex;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay ~ td.CalendarDay .calendarDayWeekNumber_076ce404d2 {\n  display: none;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .DayPicker_weekHeader:before {\n  content: "Wk";\n  position: absolute;\n  font-size: 12px;\n  width: 40px;\n  top: 3px;\n  left: -28px;\n  height: 24px;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .DayPicker__horizontal {\n  margin: 4px;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {\n  margin-left: 17px;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .DayPicker_weekHeader {\n  padding: 0 !important;\n  left: 30px !important;\n}\n.datepickerContainer_33669c9e65.withWeekNumber_958de2e278 .CalendarMonth_caption {\n  margin-right: 20px;\n}');export{e as default};
+var e={datepickerContainer:"datepickerContainer_bb680a7485",monthYearSelection:"monthYearSelection_9e504f60bd",rangePickerMode:"rangePickerMode_4ea3bd8bf9",withWeekNumber:"withWeekNumber_8e2c9719ad",calendarDayWeekNumber:"calendarDayWeekNumber_c6e2b43148"};!function(e){const n="s_id-08c822721057_3_0_0-alpha_10";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.datepickerContainer_bb680a7485 {\n  position: relative;\n  min-height: 302px;\n}\n.datepickerContainer_bb680a7485 table tbody {\n  border-spacing: 0;\n  border-collapse: collapse;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  box-shadow: none;\n}\n.datepickerContainer_bb680a7485 td {\n  border: none;\n}\n.datepickerContainer_bb680a7485.monthYearSelection_9e504f60bd table tbody {\n  opacity: 0;\n}\n.datepickerContainer_bb680a7485.monthYearSelection_9e504f60bd .DayPicker_transitionContainer__horizontal {\n  transition: none;\n}\n.datepickerContainer_bb680a7485 .CalendarMonthGrid {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_bb680a7485 .CalendarMonth {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_bb680a7485 .DayPicker__horizontal {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_bb680a7485 .DayPicker {\n  box-shadow: none;\n  border: none;\n  border-radius: 0;\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default {\n  border: none;\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--primary-text-on-secondary-color);\n  background-color: var(--secondary-background-color);\n  border-top: 1px solid var(--secondary-background-color);\n  border-bottom: 1px solid var(--secondary-background-color);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default:hover {\n  background: none;\n  border: none;\n  border-top: 1px solid var(--secondary-background-color);\n  border-bottom: 1px solid var(--secondary-background-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default:hover::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: none;\n  background-color: var(--primary-background-hover-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default.CalendarDay__selected {\n  color: var(--text-color-on-primary);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default.CalendarDay__selected::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: none;\n  background: var(--primary-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__default.CalendarDay__selected::before:hover {\n  color: var(--text-color-on-primary);\n  background: var(--primary-color);\n}\n.datepickerContainer_bb680a7485 .CalendarMonth_caption {\n  color: var(--primary-text-on-secondary-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__today::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__today:hover::before {\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_bb680a7485 .CalendarDay__blocked_calendar, .datepickerContainer_bb680a7485 .CalendarDay__blocked_calendar:active, .datepickerContainer_bb680a7485 .CalendarDay__blocked_calendar:hover {\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.2;\n  pointer-events: none;\n}\n.datepickerContainer_bb680a7485 .DayPicker_weekHeader_li small {\n  font-size: 12px;\n  color: var(--secondary-text-on-secondary-color);\n  font-weight: 300;\n  cursor: default;\n}\n.datepickerContainer_bb680a7485 .DayPickerNavigation_rightButton__horizontal {\n  right: 22px;\n}\n.datepickerContainer_bb680a7485 .DayPickerNavigation .DayPickerNavigation_button:nth-child(1) {\n  left: 12px;\n}\n.datepickerContainer_bb680a7485 .DayPickerNavigation .DayPickerNavigation_button:nth-child(2) {\n  right: 12px;\n}\n.datepickerContainer_bb680a7485 .DayPickerNavigation_button__horizontal {\n  position: absolute;\n  top: 15px;\n  line-height: 0.78;\n  border-radius: 3px;\n  padding: 6px 9px;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_start {\n  border-radius: 0;\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_start:hover {\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_start::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  background-color: var(--primary-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_end {\n  border-radius: 0;\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n  z-index: 1;\n  position: relative;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_end:hover {\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected.CalendarDay__selected_end::before {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  box-sizing: border-box;\n  content: "";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  border-radius: 50%;\n  background-color: var(--primary-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__hovered_span, .datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__hovered_span:hover {\n  border-radius: 0;\n  color: var(--primary-text-color);\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__hovered_span:hover::before, .datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__hovered_span:hover:hover::before {\n  border-radius: 0;\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected_span {\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected_span:hover {\n  color: var(--primary-text-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9 .CalendarDay__selected_span:hover::before {\n  border-radius: 0;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9.range-single-date-selected .CalendarDay__hovered_span {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9.range-single-date-selected .CalendarDay__hovered_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_bb680a7485.rangePickerMode_4ea3bd8bf9.range-single-date-selected .CalendarDay__hovered_span:hover::before {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad {\n  padding: 0 4px 0 8px;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .CalendarDay .calendarDayWeekNumber_c6e2b43148 {\n  color: rgba(177, 177, 184, 0.7490196078);\n  pointer-events: none;\n  visibility: visible;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: -1px;\n  font-size: 14px;\n  width: 40px;\n  height: 37px;\n  left: 0px;\n  transform: translateX(-100%);\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay .calendarDayWeekNumber_c6e2b43148 {\n  display: flex;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay ~ td.CalendarDay .calendarDayWeekNumber_c6e2b43148 {\n  display: none;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .DayPicker_weekHeader:before {\n  content: "Wk";\n  position: absolute;\n  font-size: 12px;\n  width: 40px;\n  top: 3px;\n  left: -28px;\n  height: 24px;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .DayPicker__horizontal {\n  margin: 4px;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {\n  margin-left: 17px;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .DayPicker_weekHeader {\n  padding: 0 !important;\n  left: 30px !important;\n}\n.datepickerContainer_bb680a7485.withWeekNumber_8e2c9719ad .CalendarMonth_caption {\n  margin-right: 20px;\n}');export{e as default};
 //# sourceMappingURL=DatePicker.module.scss.js.map