@vibe/core 3.0.0-alpha.9 → 3.0.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { AvatarType } from \"../Avatar/Avatar.types\";\nimport { ElementContent, SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport useHover from \"../../hooks/useHover/useHover\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n  label?: ElementContent;\n  disabled?: boolean;\n  readOnly?: boolean;\n  \"data-testid\"?: string;\n  /**\n   * A React element that is positioned to the right of the text\n   */\n  rightRenderer?: ElementContent;\n  /**\n   * A React element that is positioned to the left of the text\n   */\n  leftRenderer?: ElementContent;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** Img to place as avatar on the right */\n  rightAvatar?: string;\n  /** the type of right avatar */\n  rightAvatarType?: AvatarType;\n  /** Img to place as avatar on the left */\n  leftAvatar?: string;\n  /** the type of left avatar */\n  leftAvatarType?: AvatarType;\n  /** ClassName for left or right icon */\n  iconClassName?: string;\n  /** ClassName for left or right avatar */\n  avatarClassName?: string;\n  color?: Exclude<ElementAllowedColor, \"dark_indigo\" | \"blackish\">;\n  /** Size for font icon */\n  iconSize?: number | string;\n  onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * Disables the Chip's entry animation\n   */\n  noAnimation?: boolean;\n  /**\n   * Allow user to select text\n   */\n  allowTextSelection?: boolean;\n  /**\n   * Callback function to be called when the user clicks the component.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Callback function to be called when the user clicks the component.\n   */\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Applies when element has onClick or onMouseDown props\n   */\n  ariaLabel?: string;\n  /**\n   * Disable click behaviors\n   */\n  disableClickableBehavior?: boolean;\n  /**\n   * Show border, the border color is `--text-color-on-primary`, should be when the chip is a colored background like\n   * selected-color\n   */\n  showBorder?: boolean;\n  closeButtonAriaLabel?: string;\n}\n\nconst Chips: VibeComponent<ChipsProps, HTMLDivElement> & {\n  colors?: typeof ElementAllowedColorEnum;\n  avatarTypes?: typeof AvatarTypeEnum;\n} = forwardRef<HTMLDivElement, ChipsProps>(\n  (\n    {\n      className,\n      avatarClassName,\n      iconClassName,\n      id,\n      label = \"\",\n      leftIcon = null,\n      rightIcon = null,\n      leftAvatar = null,\n      rightAvatar = null,\n      disabled = false,\n      readOnly = false,\n      allowTextSelection = false,\n      color = \"primary\",\n      iconSize = 18,\n      onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n      onMouseDown,\n      onClick,\n      noAnimation = true,\n      ariaLabel,\n      \"data-testid\": dataTestId,\n      disableClickableBehavior = false,\n      leftAvatarType = \"img\",\n      rightAvatarType = \"img\",\n      showBorder = false,\n      leftRenderer,\n      rightRenderer,\n      closeButtonAriaLabel = \"Remove\"\n    }: ChipsProps,\n    ref\n  ) => {\n    const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);\n    const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;\n    const hasCloseButton = !readOnly && !disabled;\n    const overrideAriaLabel = ariaLabel || (typeof label === \"string\" && label) || \"\";\n\n    const iconButtonRef = useRef(null);\n    const componentRef = useRef(null);\n\n    const [hoverRef, isHovered] = useHover<HTMLDivElement>();\n    const { isFocused } = useSetFocus({ ref: componentRef });\n\n    const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef, hoverRef);\n\n    const overrideClassName = cx(styles.chips, className, {\n      [styles.disabled]: disabled,\n      [styles.noAnimation]: noAnimation,\n      [styles.withUserSelect]: allowTextSelection,\n      [styles.border]: showBorder\n    });\n    const clickableClassName = cx(styles.clickable, overrideClassName, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !allowTextSelection\n    });\n\n    const backgroundColorStyle = useMemo(() => {\n      let cssVar;\n      if (disabled) {\n        cssVar = getCSSVar(\"disabled-background-color\");\n      } else if (hasClickableWrapper && (isHovered || isFocused)) {\n        cssVar = getElementColor(color, true, true);\n      } else {\n        cssVar = getElementColor(color, true);\n      }\n      return { backgroundColor: cssVar };\n    }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n    const onDeleteCallback = useCallback(\n      (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        e.stopPropagation();\n        if (onDelete) {\n          onDelete(id, e);\n        }\n      },\n      [id, onDelete]\n    );\n\n    const onClickCallback = useCallback(\n      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n          e.preventDefault();\n          onClick(e);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup: false,\n        ariaExpanded: false\n      },\n      mergedRef\n    );\n    const wrapperProps = hasClickableWrapper\n      ? {\n          ...clickableProps,\n          ref: clickableProps.ref as RefObject<HTMLDivElement>,\n          className: clickableClassName,\n          style: backgroundColorStyle\n        }\n      : {\n          className: overrideClassName,\n          \"aria-label\": overrideAriaLabel,\n          style: backgroundColorStyle,\n          ref: mergedRef,\n          onClick: onClickCallback,\n          onMouseDown,\n          id: id,\n          \"data-testid\": componentDataTestId\n        };\n\n    const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n    const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n    return (\n      <div {...wrapperProps}>\n        {leftAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.left, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={leftAvatarType}\n            key={id}\n            {...leftAvatarProps}\n          />\n        ) : null}\n        {leftIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.left, iconClassName)}\n            iconType=\"font\"\n            icon={leftIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n        <Text type=\"text2\" className={styles.label}>\n          {label}\n        </Text>\n        {rightIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.right, iconClassName)}\n            iconType=\"font\"\n            icon={rightIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {rightAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.right, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={rightAvatarType}\n            key={id}\n            {...rightAvatarProps}\n          />\n        ) : null}\n        {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n        {hasCloseButton && (\n          <IconButton\n            size=\"xxs\"\n            color=\"on-primary-color\"\n            className={cx(styles.icon, styles.close)}\n            ariaLabel={closeButtonAriaLabel}\n            hideTooltip\n            icon={CloseSmall}\n            onClick={onDeleteCallback}\n            data-testid={`${componentDataTestId}-close`}\n            ref={iconButtonRef}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(Chips, {\n  colors: ElementAllowedColorEnum,\n  avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useHover","useHover","_useHover2","_slicedToArray","hoverRef","isHovered","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","useCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","style","leftAvatarProps","text","src","rightAvatarProps","React","createElement","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}
+{"version":3,"file":"Chips.js","sources":["../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport Icon from \"../Icon/Icon\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Text from \"../Text/Text\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { AvatarType as AvatarTypeEnum } from \"../Avatar/AvatarConstants\";\nimport { AvatarType } from \"../Avatar/Avatar.types\";\nimport { ElementContent, SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from \"../../types\";\nimport useHover from \"../../hooks/useHover/useHover\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Chips.module.scss\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n  label?: ElementContent;\n  disabled?: boolean;\n  readOnly?: boolean;\n  \"data-testid\"?: string;\n  /**\n   * A React element that is positioned to the right of the text\n   */\n  rightRenderer?: ElementContent;\n  /**\n   * A React element that is positioned to the left of the text\n   */\n  leftRenderer?: ElementContent;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** Img to place as avatar on the right */\n  rightAvatar?: string;\n  /** the type of right avatar */\n  rightAvatarType?: AvatarType;\n  /** Img to place as avatar on the left */\n  leftAvatar?: string;\n  /** the type of left avatar */\n  leftAvatarType?: AvatarType;\n  /** ClassName for left or right icon */\n  iconClassName?: string;\n  /** ClassName for left or right avatar */\n  avatarClassName?: string;\n  color?: Exclude<ElementAllowedColor, \"dark_indigo\" | \"blackish\">;\n  /** Size for font icon */\n  iconSize?: number | string;\n  onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * Disables the Chip's entry animation\n   */\n  noAnimation?: boolean;\n  /**\n   * Allow user to select text\n   */\n  allowTextSelection?: boolean;\n  /**\n   * Callback function to be called when the user clicks the component.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Callback function to be called when the user clicks the component.\n   */\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Applies when element has onClick or onMouseDown props\n   */\n  ariaLabel?: string;\n  /**\n   * Disable click behaviors\n   */\n  disableClickableBehavior?: boolean;\n  /**\n   * Show border, the border color is `--text-color-on-primary`, should be when the chip is a colored background like\n   * selected-color\n   */\n  showBorder?: boolean;\n  closeButtonAriaLabel?: string;\n}\n\nconst Chips: VibeComponent<ChipsProps, HTMLDivElement> & {\n  colors?: typeof ElementAllowedColorEnum;\n  avatarTypes?: typeof AvatarTypeEnum;\n} = forwardRef<HTMLDivElement, ChipsProps>(\n  (\n    {\n      className,\n      avatarClassName,\n      iconClassName,\n      id,\n      label = \"\",\n      leftIcon = null,\n      rightIcon = null,\n      leftAvatar = null,\n      rightAvatar = null,\n      disabled = false,\n      readOnly = false,\n      allowTextSelection = false,\n      color = \"primary\",\n      iconSize = 18,\n      onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n      onMouseDown,\n      onClick,\n      noAnimation = true,\n      ariaLabel,\n      \"data-testid\": dataTestId,\n      disableClickableBehavior = false,\n      leftAvatarType = \"img\",\n      rightAvatarType = \"img\",\n      showBorder = false,\n      leftRenderer,\n      rightRenderer,\n      closeButtonAriaLabel = \"Remove\"\n    }: ChipsProps,\n    ref\n  ) => {\n    const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);\n    const hasClickableWrapper = (!!onClick || !!onMouseDown) && !disableClickableBehavior;\n    const hasCloseButton = !readOnly && !disabled;\n    const overrideAriaLabel = ariaLabel || (typeof label === \"string\" && label) || \"\";\n\n    const iconButtonRef = useRef(null);\n    const componentRef = useRef(null);\n\n    const [hoverRef, isHovered] = useHover<HTMLDivElement>();\n    const { isFocused } = useSetFocus({ ref: componentRef });\n\n    const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef, hoverRef);\n\n    const overrideClassName = cx(styles.chips, className, {\n      [styles.disabled]: disabled,\n      [styles.noAnimation]: noAnimation,\n      [styles.withUserSelect]: allowTextSelection,\n      [styles.border]: showBorder\n    });\n    const clickableClassName = cx(styles.clickable, overrideClassName, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !allowTextSelection\n    });\n\n    const backgroundColorStyle = useMemo(() => {\n      let cssVar;\n      if (disabled) {\n        cssVar = getCSSVar(\"disabled-background-color\");\n      } else if (hasClickableWrapper && (isHovered || isFocused)) {\n        cssVar = getElementColor(color, true, true);\n      } else {\n        cssVar = getElementColor(color, true);\n      }\n      return { backgroundColor: cssVar };\n    }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n    const onDeleteCallback = useCallback(\n      (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        e.stopPropagation();\n        if (onDelete) {\n          onDelete(id, e);\n        }\n      },\n      [id, onDelete]\n    );\n\n    const onClickCallback = useCallback(\n      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n          e.preventDefault();\n          onClick(e);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup: false,\n        ariaExpanded: false\n      },\n      mergedRef\n    );\n    const wrapperProps = hasClickableWrapper\n      ? {\n          ...clickableProps,\n          ref: clickableProps.ref as RefObject<HTMLDivElement>,\n          className: clickableClassName,\n          style: backgroundColorStyle\n        }\n      : {\n          className: overrideClassName,\n          \"aria-label\": overrideAriaLabel,\n          style: backgroundColorStyle,\n          ref: mergedRef,\n          onClick: onClickCallback,\n          onMouseDown,\n          id: id,\n          \"data-testid\": componentDataTestId\n        };\n\n    const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n    const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n    return (\n      <div {...wrapperProps}>\n        {leftAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.left, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={leftAvatarType}\n            key={id}\n            {...leftAvatarProps}\n          />\n        ) : null}\n        {leftIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.left, iconClassName)}\n            iconType=\"font\"\n            icon={leftIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n        <Text type=\"text2\" className={styles.label}>\n          {label}\n        </Text>\n        {rightIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.right, iconClassName)}\n            iconType=\"font\"\n            icon={rightIcon}\n            iconSize={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {rightAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.right, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={rightAvatarType}\n            key={id}\n            {...rightAvatarProps}\n          />\n        ) : null}\n        {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n        {hasCloseButton && (\n          <IconButton\n            size=\"xxs\"\n            color=\"on-primary-color\"\n            className={cx(styles.icon, styles.close)}\n            ariaLabel={closeButtonAriaLabel}\n            hideTooltip\n            icon={CloseSmall}\n            onClick={onDeleteCallback}\n            data-testid={`${componentDataTestId}-close`}\n            ref={iconButtonRef}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default withStaticProps(Chips, {\n  colors: ElementAllowedColorEnum,\n  avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$disableClickable","disableClickableBehavior","_ref$leftAvatarType","leftAvatarType","_ref$rightAvatarType","rightAvatarType","_ref$showBorder","showBorder","leftRenderer","rightRenderer","_ref$closeButtonAriaL","closeButtonAriaLabel","componentDataTestId","getTestId","ComponentDefaultTestId","CHIP","hasClickableWrapper","hasCloseButton","overrideAriaLabel","iconButtonRef","useRef","componentRef","_useHover","useHover","_useHover2","_slicedToArray","hoverRef","isHovered","isFocused","useSetFocus","mergedRef","useMergeRef","overrideClassName","cx","styles","chips","_defineProperty","withUserSelect","border","clickableClassName","clickable","disableTextSelection","backgroundColorStyle","useMemo","backgroundColor","getCSSVar","getElementColor","onDeleteCallback","useCallback","e","stopPropagation","onClickCallback","undefined","target","current","preventDefault","clickableProps","useClickableProps","ariaHidden","ariaHasPopup","ariaExpanded","wrapperProps","style","leftAvatarProps","text","src","rightAvatarProps","React","createElement","Avatar","withoutBorder","avatar","left","customSize","type","key","Icon","icon","iconType","ignoreFocusStyle","customRenderer","Text","right","IconButton","size","close","hideTooltip","CloseSmall","colors","ElementAllowedColorEnum","avatarTypes","AvatarTypeEnum"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_cc17068872","focus-visible":"focus-visible_78a95fb4b9",disabled:"disabled_6059a275a2",disableTextSelection:"disableTextSelection_5b5f92e9dc",chips:"chips_7c30df6f85","chips-pop-in-emphasized":"chips-pop-in-emphasized_aa59e5eb87",border:"border_8283d1f2fd",withUserSelect:"withUserSelect_ac19011588",label:"label_8a1fa39f00",noAnimation:"noAnimation_b891b6b3ac",icon:"icon_53ced64961",avatar:"avatar_c958062eaa",customRenderer:"customRenderer_d8cb9ae93a",left:"left_b259d36e8c",right:"right_bfbb25a38f",close:"close_a30bc3fbfc",defaultCursor:"defaultCursor_6059a275a2"};!function(e){const n="s_id-a8c9f55659fd_3_0_0-alpha_8";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,c.firstChild?c.insertBefore(a,c.firstChild):c.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_cc17068872 {\n  cursor: pointer;\n}\n.clickable_cc17068872:focus-visible, .clickable_cc17068872.focus-visible_78a95fb4b9 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickable_cc17068872:focus:not(.focus-visible_78a95fb4b9) {\n  outline: none;\n}\n.clickable_cc17068872.disabled_6059a275a2 {\n  cursor: default;\n}\n.disableTextSelection_5b5f92e9dc {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.chips_7c30df6f85 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_aa59e5eb87 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_7c30df6f85.border_8283d1f2fd {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_7c30df6f85.withUserSelect_ac19011588 {\n  user-select: text;\n  cursor: text;\n}\n.chips_7c30df6f85 .label_8a1fa39f00 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_7c30df6f85.noAnimation_b891b6b3ac {\n  animation: none;\n}\n.chips_7c30df6f85 .icon_53ced64961,\n.chips_7c30df6f85 .avatar_c958062eaa,\n.chips_7c30df6f85 .customRenderer_d8cb9ae93a {\n  min-width: 18px;\n}\n.chips_7c30df6f85 .icon_53ced64961.left_b259d36e8c,\n.chips_7c30df6f85 .avatar_c958062eaa.left_b259d36e8c,\n.chips_7c30df6f85 .customRenderer_d8cb9ae93a.left_b259d36e8c {\n  margin-right: var(--spacing-xs);\n}\n.chips_7c30df6f85 .icon_53ced64961.right_bfbb25a38f,\n.chips_7c30df6f85 .avatar_c958062eaa.right_bfbb25a38f,\n.chips_7c30df6f85 .customRenderer_d8cb9ae93a.right_bfbb25a38f {\n  margin-left: var(--spacing-xs);\n}\n.chips_7c30df6f85 .icon_53ced64961.close_a30bc3fbfc,\n.chips_7c30df6f85 .avatar_c958062eaa.close_a30bc3fbfc,\n.chips_7c30df6f85 .customRenderer_d8cb9ae93a.close_a30bc3fbfc {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_7c30df6f85.disabled_6059a275a2 .icon_53ced64961 {\n  color: var(--disabled-text-color);\n}\n.chips_7c30df6f85.disabled_6059a275a2 .label_8a1fa39f00 {\n  color: var(--disabled-text-color);\n}\n.chips_7c30df6f85.defaultCursor_6059a275a2 {\n  cursor: default;\n}\n.chips_7c30df6f85.clickable_cc17068872 {\n  cursor: pointer;\n}\n.chips_7c30df6f85.clickable_cc17068872:focus-visible, .chips_7c30df6f85.clickable_cc17068872.focus-visible_78a95fb4b9 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_7c30df6f85.clickable_cc17068872:focus:not(.focus-visible_78a95fb4b9) {\n  outline: none;\n}\n.chips_7c30df6f85.clickable_cc17068872.disabled_6059a275a2 {\n  cursor: default;\n}\n.chips_7c30df6f85.clickable_cc17068872.disableTextSelection_5b5f92e9dc {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_aa59e5eb87 {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
+var e={clickable:"clickable_619e45fcb4","focus-visible":"focus-visible_3e99ea2942",disabled:"disabled_73ed6d6a4c",disableTextSelection:"disableTextSelection_112260fc99",chips:"chips_93f5c9def9","chips-pop-in-emphasized":"chips-pop-in-emphasized_8e936928e7",border:"border_7c394b0712",withUserSelect:"withUserSelect_8032232d80",label:"label_e013cfa852",noAnimation:"noAnimation_8c31b8a198",icon:"icon_cb24970d18",avatar:"avatar_44e700fd23",customRenderer:"customRenderer_6358b59228",left:"left_53bf43a24e",right:"right_0da391aeee",close:"close_6104ee14f4",defaultCursor:"defaultCursor_73ed6d6a4c"};!function(e){const n="s_id-a8c9f55659fd_3_0_0-beta_0";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,c.firstChild?c.insertBefore(i,c.firstChild):c.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_619e45fcb4 {\n  cursor: pointer;\n}\n.clickable_619e45fcb4:focus-visible, .clickable_619e45fcb4.focus-visible_3e99ea2942 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickable_619e45fcb4:focus:not(.focus-visible_3e99ea2942) {\n  outline: none;\n}\n.clickable_619e45fcb4.disabled_73ed6d6a4c {\n  cursor: default;\n}\n.disableTextSelection_112260fc99 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.chips_93f5c9def9 {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, 0 var(--spacing-xs));\n  user-select: none;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized_8e936928e7 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_93f5c9def9.border_7c394b0712 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_93f5c9def9.withUserSelect_8032232d80 {\n  user-select: text;\n  cursor: text;\n}\n.chips_93f5c9def9 .label_e013cfa852 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_93f5c9def9.noAnimation_8c31b8a198 {\n  animation: none;\n}\n.chips_93f5c9def9 .icon_cb24970d18,\n.chips_93f5c9def9 .avatar_44e700fd23,\n.chips_93f5c9def9 .customRenderer_6358b59228 {\n  min-width: 18px;\n}\n.chips_93f5c9def9 .icon_cb24970d18.left_53bf43a24e,\n.chips_93f5c9def9 .avatar_44e700fd23.left_53bf43a24e,\n.chips_93f5c9def9 .customRenderer_6358b59228.left_53bf43a24e {\n  margin-right: var(--spacing-xs);\n}\n.chips_93f5c9def9 .icon_cb24970d18.right_0da391aeee,\n.chips_93f5c9def9 .avatar_44e700fd23.right_0da391aeee,\n.chips_93f5c9def9 .customRenderer_6358b59228.right_0da391aeee {\n  margin-left: var(--spacing-xs);\n}\n.chips_93f5c9def9 .icon_cb24970d18.close_6104ee14f4,\n.chips_93f5c9def9 .avatar_44e700fd23.close_6104ee14f4,\n.chips_93f5c9def9 .customRenderer_6358b59228.close_6104ee14f4 {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_93f5c9def9.disabled_73ed6d6a4c .icon_cb24970d18 {\n  color: var(--disabled-text-color);\n}\n.chips_93f5c9def9.disabled_73ed6d6a4c .label_e013cfa852 {\n  color: var(--disabled-text-color);\n}\n.chips_93f5c9def9.defaultCursor_73ed6d6a4c {\n  cursor: default;\n}\n.chips_93f5c9def9.clickable_619e45fcb4 {\n  cursor: pointer;\n}\n.chips_93f5c9def9.clickable_619e45fcb4:focus-visible, .chips_93f5c9def9.clickable_619e45fcb4.focus-visible_3e99ea2942 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_93f5c9def9.clickable_619e45fcb4:focus:not(.focus-visible_3e99ea2942) {\n  outline: none;\n}\n.chips_93f5c9def9.clickable_619e45fcb4.disabled_73ed6d6a4c {\n  cursor: default;\n}\n.chips_93f5c9def9.clickable_619e45fcb4.disableTextSelection_112260fc99 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n@keyframes chips-pop-in-emphasized_8e936928e7 {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{e as default};
 //# sourceMappingURL=Chips.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_cc17068872","focus-visible":"focus-visible_78a95fb4b9",disabled:"disabled_6059a275a2",disableTextSelection:"disableTextSelection_5b5f92e9dc"};!function(e){const n="s_id-8d33a9ee9e1f_3_0_0-alpha_8";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_cc17068872 {\n  cursor: pointer;\n}\n.clickable_cc17068872:focus-visible, .clickable_cc17068872.focus-visible_78a95fb4b9 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickable_cc17068872:focus:not(.focus-visible_78a95fb4b9) {\n  outline: none;\n}\n.clickable_cc17068872.disabled_6059a275a2 {\n  cursor: default;\n}\n.disableTextSelection_5b5f92e9dc {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}");export{e as default};
+var e={clickable:"clickable_619e45fcb4","focus-visible":"focus-visible_3e99ea2942",disabled:"disabled_73ed6d6a4c",disableTextSelection:"disableTextSelection_112260fc99"};!function(e){const n="s_id-8d33a9ee9e1f_3_0_0-beta_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const l=document.createElement("style");l.id=n,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_619e45fcb4 {\n  cursor: pointer;\n}\n.clickable_619e45fcb4:focus-visible, .clickable_619e45fcb4.focus-visible_3e99ea2942 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickable_619e45fcb4:focus:not(.focus-visible_3e99ea2942) {\n  outline: none;\n}\n.clickable_619e45fcb4.disabled_73ed6d6a4c {\n  cursor: default;\n}\n.disableTextSelection_112260fc99 {\n  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}");export{e as default};
 //# sourceMappingURL=Clickable.module.scss.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { 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"}
+{"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":"21BAiDA,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_314cde2211",colorPickerDialogContent:"colorPickerDialogContent_2c8e5d351e"};!function(e){const t="s_id-ffacbf9b6446_3_0_0-alpha_8";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_314cde2211.colorPickerDialogContent_2c8e5d351e {\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_88be60788b",colorPickerDialogContent:"colorPickerDialogContent_0e13c05af3"};!function(e){const t="s_id-ffacbf9b6446_3_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker_88be60788b.colorPickerDialogContent_0e13c05af3 {\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.module.scss.js

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_ee089cb006",clearColorButton:"clearColorButton_9e918f3024"};!function(e){const n="s_id-774e60a23ee3_3_0_0-alpha_8";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_ee089cb006 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_9e918f3024 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_afe3eaf070",clearColorButton:"clearColorButton_b7b4cdcfef"};!function(e){const t="s_id-774e60a23ee3_3_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".clearColorIcon_afe3eaf070 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_b7b4cdcfef {\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_70c71b8ecf"};!function(e){const n="s_id-0a5f0eb78ee4_3_0_0-alpha_8";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid_70c71b8ecf {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_6670ab67b6"};!function(e){const t="s_id-0a5f0eb78ee4_3_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorsGrid_6670ab67b6 {\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 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};
+import{toConsumableArray as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{difference as r,intersection as e}from"lodash-es";import t,{forwardRef as i,useRef as l,useCallback as n,useMemo as s}from"react";import{BaseSizes as a}from"../../../../constants/sizes.js";import{ColorStyle as c,contentColors as d}from"../../../../utils/colors-vars-map.js";import{ColorShapes as m,DEFAULT_NUMBER_OF_COLORS_IN_LINE as u}from"../../ColorPickerConstants.js";import{calculateColorPickerWidth as f}from"../../services/ColorPickerStyleService.js";import{useGridKeyboardNavigationContext as p,GridKeyboardNavigationContext as C}from"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import{ColorPickerClearButton as v}from"./ColorPickerClearButton.js";import{ColorPickerColorsGrid as I}from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var y=h(i((function(i,c){var m=i.className,h=i.onValueChange,y=i.value,k=i.noColorText,b=i.colorStyle,g=void 0===b?"regular":b,N=i.ColorIndicatorIcon,x=i.SelectedIndicatorIcon,B=i.shouldRenderIndicatorWithoutBackground,E=i.NoColorIcon,M=void 0===E?j:E,P=i.isBlackListMode,w=void 0===P||P,z=i.colorsList,L=i.isMultiselect,O=i.colorSize,R=void 0===O?a.MEDIUM:O,T=i.numberOfColorsInLine,G=void 0===T?u:T,K=i.tooltipContentByColor,U=void 0===K?{}:K,W=i.focusOnMount,_=i.colorShape,q=void 0===_?"square":_,A=i.forceUseRawColorList,D=i.showColorNameTooltip,H=i.id,V=i["data-testid"],F=l(null),J=S(c,F),Q=l(null),X=l(null),Y=n((function(){h(null)}),[h]),Z=s((function(){return A?z:w?r(d,z):e(d,z)}),[A,w,z]),$=n((function(r){if(L){var e=o(y);if(e.includes(r)){var t=e.indexOf(r);t>-1&&e.splice(t,1)}else e.push(r);h(e)}else h([r])}),[L,h,y]),oo=s((function(){return[{topElement:Q,bottomElement:X}]}),[]),ro=p(oo,F),eo=f(R,G);return t.createElement("div",{className:m,style:{width:eo},ref:J,tabIndex:-1},t.createElement(C.Provider,{value:ro},t.createElement(I,{ref:Q,onColorClicked:$,colorsToRender:Z,numberOfColorsInLine:G,focusOnMount:W,value: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(v,{Icon:M,onClick:Y,text:k,ref:X})))})),{sizes:a,colorStyles:c,colorSizes:a,colorShapes:m});export{y 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 \"@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"}
+{"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":"igCA+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_ccb808af47",circle:"circle_d1ac437af0",feedbackIndicator:"feedbackIndicator_4e63b1559d",active:"active_1c2a237175",selectedColor:"selectedColor_15af74e04d",colorItem:"colorItem_9c256bc090",colorIndicatorWrapper:"colorIndicatorWrapper_1b9c15a613",colorItemSizeSmall:"colorItemSizeSmall_2f6b66aa9a",colorItemSizeMedium:"colorItemSizeMedium_8d4b3eea27",colorItemSizeLarge:"colorItemSizeLarge_5b214c8873",colorItemTextMode:"colorItemTextMode_b8b884b86a",colorIconWhite:"colorIconWhite_4f2be58980"};!function(e){const r="s_id-2198989e565d_3_0_0-alpha_8";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_ccb808af47 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_ccb808af47.circle_d1ac437af0 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_ccb808af47 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_ccb808af47 .feedbackIndicator_4e63b1559d {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_ccb808af47:focus,\n.itemWrapper_ccb808af47:focus-visible,\n.itemWrapper_ccb808af47.active_1c2a237175 {\n  outline: none;\n}\n\n.itemWrapper_ccb808af47:focus .feedbackIndicator_4e63b1559d:before,\n.itemWrapper_ccb808af47:focus-visible .feedbackIndicator_4e63b1559d:before,\n.itemWrapper_ccb808af47.active_1c2a237175 .feedbackIndicator_4e63b1559d: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_ccb808af47:focus .feedbackIndicator_4e63b1559d:after,\n.itemWrapper_ccb808af47:focus-visible .feedbackIndicator_4e63b1559d:after,\n.itemWrapper_ccb808af47.active_1c2a237175 .feedbackIndicator_4e63b1559d: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_ccb808af47:hover:not(.active_1c2a237175):not(.selectedColor_15af74e04d) .feedbackIndicator_4e63b1559d {\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_ccb808af47 .colorItem_9c256bc090 {\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_ccb808af47 .colorItem_9c256bc090 .colorIndicatorWrapper_1b9c15a613 {\n  margin-top: 3px;\n}\n\n.itemWrapper_ccb808af47 .colorItem_9c256bc090.colorItemSizeSmall_2f6b66aa9a {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_ccb808af47 .colorItem_9c256bc090.colorItemSizeMedium_8d4b3eea27 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_ccb808af47 .colorItem_9c256bc090.colorItemSizeLarge_5b214c8873 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_ccb808af47.selectedColor_15af74e04d {\n  position: relative;\n}\n\n.itemWrapper_ccb808af47.selectedColor_15af74e04d: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_ccb808af47.selectedColor_15af74e04d .feedbackIndicator_4e63b1559d:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_ccb808af47 .colorItemTextMode_b8b884b86a:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_ccb808af47 .colorIconWhite_4f2be58980 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_5c4734c9c9",circle:"circle_b7945d7f50",feedbackIndicator:"feedbackIndicator_b09e00687c",active:"active_1c2b94df29",selectedColor:"selectedColor_aeecad9b74",colorItem:"colorItem_a50a92cc1c",colorIndicatorWrapper:"colorIndicatorWrapper_a364b83197",colorItemSizeSmall:"colorItemSizeSmall_791386183f",colorItemSizeMedium:"colorItemSizeMedium_5ec830ddd5",colorItemSizeLarge:"colorItemSizeLarge_e6eaacdea1",colorItemTextMode:"colorItemTextMode_2b6d7158f9",colorIconWhite:"colorIconWhite_81bddd69d8"};!function(e){const r="s_id-2198989e565d_3_0_0-beta_0";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,c.firstChild?c.insertBefore(n,c.firstChild):c.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.itemWrapper_5c4734c9c9 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_5c4734c9c9.circle_b7945d7f50 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_5c4734c9c9 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_5c4734c9c9 .feedbackIndicator_b09e00687c {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_5c4734c9c9:focus,\n.itemWrapper_5c4734c9c9:focus-visible,\n.itemWrapper_5c4734c9c9.active_1c2b94df29 {\n  outline: none;\n}\n\n.itemWrapper_5c4734c9c9:focus .feedbackIndicator_b09e00687c:before,\n.itemWrapper_5c4734c9c9:focus-visible .feedbackIndicator_b09e00687c:before,\n.itemWrapper_5c4734c9c9.active_1c2b94df29 .feedbackIndicator_b09e00687c: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_5c4734c9c9:focus .feedbackIndicator_b09e00687c:after,\n.itemWrapper_5c4734c9c9:focus-visible .feedbackIndicator_b09e00687c:after,\n.itemWrapper_5c4734c9c9.active_1c2b94df29 .feedbackIndicator_b09e00687c: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_5c4734c9c9:hover:not(.active_1c2b94df29):not(.selectedColor_aeecad9b74) .feedbackIndicator_b09e00687c {\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_5c4734c9c9 .colorItem_a50a92cc1c {\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_5c4734c9c9 .colorItem_a50a92cc1c .colorIndicatorWrapper_a364b83197 {\n  margin-top: 3px;\n}\n\n.itemWrapper_5c4734c9c9 .colorItem_a50a92cc1c.colorItemSizeSmall_791386183f {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_5c4734c9c9 .colorItem_a50a92cc1c.colorItemSizeMedium_5ec830ddd5 {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_5c4734c9c9 .colorItem_a50a92cc1c.colorItemSizeLarge_e6eaacdea1 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_5c4734c9c9.selectedColor_aeecad9b74 {\n  position: relative;\n}\n\n.itemWrapper_5c4734c9c9.selectedColor_aeecad9b74: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_5c4734c9c9.selectedColor_aeecad9b74 .feedbackIndicator_b09e00687c:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_5c4734c9c9 .colorItemTextMode_2b6d7158f9:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_5c4734c9c9 .colorIconWhite_81bddd69d8 {\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_cde68fc84d",stickyCategory:"stickyCategory_b6c3d0785f",comboboxCategory:"comboboxCategory_8b90e8dfed",sizeSmall:"sizeSmall_f3f961d8be",sizeMedium:"sizeMedium_cde68fc84d",sizeLarge:"sizeLarge_f3f961d8be",empty:"empty_df0f5948da",comboboxSearchWrapper:"comboboxSearchWrapper_56e4ff8c44",comboboxNoResults:"comboboxNoResults_eb7c796809",comboboxMessageWrapper:"comboboxMessageWrapper_c2b7e19043",comboboxMessage:"comboboxMessage_8a1fa39f00",addNewButton:"addNewButton_bb7b49c4ba",buttonLabel:"buttonLabel_8a1fa39f00",comboboxList:"comboboxList_d774004c56"};!function(o){const e="s_id-140391bb7df9_3_0_0-alpha_8";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)}(".combobox_cde68fc84d {\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_cde68fc84d.stickyCategory_b6c3d0785f .comboboxCategory_8b90e8dfed {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox_cde68fc84d.stickyCategory_b6c3d0785f.sizeSmall_f3f961d8be .comboboxCategory_8b90e8dfed {\n  top: 32px;\n}\n\n.combobox_cde68fc84d.stickyCategory_b6c3d0785f.sizeMedium_cde68fc84d .comboboxCategory_8b90e8dfed {\n  top: 40px;\n}\n\n.combobox_cde68fc84d.stickyCategory_b6c3d0785f.sizeLarge_f3f961d8be .comboboxCategory_8b90e8dfed {\n  top: 48px;\n}\n\n.combobox_cde68fc84d.empty_df0f5948da {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper_56e4ff8c44 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults_eb7c796809 {\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_eb7c796809 .comboboxMessageWrapper_c2b7e19043 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults_eb7c796809 .comboboxMessageWrapper_c2b7e19043 .comboboxMessage_8a1fa39f00 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults_eb7c796809 .addNewButton_bb7b49c4ba {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults_eb7c796809 .addNewButton_bb7b49c4ba .buttonLabel_8a1fa39f00 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList_d774004c56 {\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_f0dbd80215",stickyCategory:"stickyCategory_f88188f9ce",comboboxCategory:"comboboxCategory_f315a7406a",sizeSmall:"sizeSmall_5724d974a2",sizeMedium:"sizeMedium_f0dbd80215",sizeLarge:"sizeLarge_5724d974a2",empty:"empty_cda5597e86",comboboxSearchWrapper:"comboboxSearchWrapper_e25b384151",comboboxNoResults:"comboboxNoResults_be99458154",comboboxMessageWrapper:"comboboxMessageWrapper_5a528ce895",comboboxMessage:"comboboxMessage_e013cfa852",addNewButton:"addNewButton_7b67f49057",buttonLabel:"buttonLabel_e013cfa852",comboboxList:"comboboxList_9784a73789"};!function(o){const e="s_id-140391bb7df9_3_0_0-beta_0";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)}(".combobox_f0dbd80215 {\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_f0dbd80215.stickyCategory_f88188f9ce .comboboxCategory_f315a7406a {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox_f0dbd80215.stickyCategory_f88188f9ce.sizeSmall_5724d974a2 .comboboxCategory_f315a7406a {\n  top: 32px;\n}\n\n.combobox_f0dbd80215.stickyCategory_f88188f9ce.sizeMedium_f0dbd80215 .comboboxCategory_f315a7406a {\n  top: 40px;\n}\n\n.combobox_f0dbd80215.stickyCategory_f88188f9ce.sizeLarge_5724d974a2 .comboboxCategory_f315a7406a {\n  top: 48px;\n}\n\n.combobox_f0dbd80215.empty_cda5597e86 {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper_e25b384151 {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults_be99458154 {\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_be99458154 .comboboxMessageWrapper_5a528ce895 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults_be99458154 .comboboxMessageWrapper_5a528ce895 .comboboxMessage_e013cfa852 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxNoResults_be99458154 .addNewButton_7b67f49057 {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults_be99458154 .addNewButton_7b67f49057 .buttonLabel_e013cfa852 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxList_9784a73789 {\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_425858ccce",dividerContainer:"dividerContainer_2df077eb38",divider:"divider_96dd707300",sticky:"sticky_818dbc3dc7"};!function(e){const n="s_id-78c8179b7fe9_3_0_0-alpha_8";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_425858ccce {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_2df077eb38 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_96dd707300 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_818dbc3dc7 {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}");export{e as default};
+var e={comboboxItemContainer:"comboboxItemContainer_a0fcad77dd",dividerContainer:"dividerContainer_0f89935b41",divider:"divider_3be5514a22",sticky:"sticky_a96bfa2446"};!function(e){const n="s_id-78c8179b7fe9_3_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".comboboxItemContainer_a0fcad77dd {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer_0f89935b41 {\n  position: relative;\n  width: 95%;\n}\n\n.divider_3be5514a22 {\n  position: absolute;\n  width: calc(100% + 16px);\n  margin-left: -12px;\n}\n\n.sticky_a96bfa2446 {\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_96e24b0658"};!function(e){const o="s_id-a004d249e1c1_3_0_0-alpha_8";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const n=document.createElement("style");n.id=o,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".comboboxCategory_96e24b0658 {\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_de309c4f03"};!function(e){const t="s_id-a004d249e1c1_3_0_0-beta_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[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))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".comboboxCategory_de309c4f03 {\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_073300a72b",optionsContainer:"optionsContainer_ac29377285",categoryWithOptions:"categoryWithOptions_9c6cb449d1",firstCategory:"firstCategory_2d8eaff1f7",categoryWithoutOptions:"categoryWithoutOptions_f927ec5d35"};!function(t){const e="s_id-4d4facb041a8_3_0_0-alpha_8";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_073300a72b::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_073300a72b::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_ac29377285 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_9c6cb449d1.firstCategory_2d8eaff1f7,\n.categoryWithoutOptions_f927ec5d35.firstCategory_2d8eaff1f7 {\n  padding-top: 0;\n}\n.categoryWithOptions_9c6cb449d1 {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_f927ec5d35 {\n  margin-bottom: 0;\n}");export{t as default};
+var t={scrollableContainer:"scrollableContainer_2d5804dc9b",optionsContainer:"optionsContainer_7ef0312e53",categoryWithOptions:"categoryWithOptions_1f2110029f",firstCategory:"firstCategory_91f623d3f2",categoryWithoutOptions:"categoryWithoutOptions_2610a15b09"};!function(t){const e="s_id-4d4facb041a8_3_0_0-beta_0";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_2d5804dc9b::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_2d5804dc9b::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.optionsContainer_7ef0312e53 {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n.categoryWithOptions_1f2110029f.firstCategory_91f623d3f2,\n.categoryWithoutOptions_2610a15b09.firstCategory_91f623d3f2 {\n  padding-top: 0;\n}\n.categoryWithOptions_1f2110029f {\n  margin-bottom: var(--spacing-xs);\n}\n.categoryWithoutOptions_2610a15b09 {\n  margin-bottom: 0;\n}");export{t as default};
 //# sourceMappingURL=ComboboxItems.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var o={comboboxOption:"comboboxOption_05f66c1d8a",disabled:"disabled_5e125f83a0",selected:"selected_048387885b",active:"active_4ca6d8a025",activeOutline:"activeOutline_c5e902220f",optionLabel:"optionLabel_1f4f59c9a5",optionIcon:"optionIcon_fb52ce32af",left:"left_1bd7088e85"};!function(o){const e="s_id-cc5db5fd586e_3_0_0-alpha_8";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".comboboxOption_05f66c1d8a {\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_05f66c1d8a.disabled_5e125f83a0 {\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_05f66c1d8a.disabled_5e125f83a0:hover {\n  background-color: transparent;\n}\n\n.comboboxOption_05f66c1d8a.selected_048387885b {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption_05f66c1d8a:hover:not(.disabled_5e125f83a0):not(.selected_048387885b),\n.comboboxOption_05f66c1d8a.active_4ca6d8a025 {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption_05f66c1d8a.activeOutline_c5e902220f {\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_05f66c1d8a .optionLabel_1f4f59c9a5 {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption_05f66c1d8a .optionIcon_fb52ce32af {\n  flex: 0 0 auto;\n}\n\n.comboboxOption_05f66c1d8a .optionIcon_fb52ce32af.left_1bd7088e85 {\n  margin-right: 4px;\n}");export{o as default};
+var o={comboboxOption:"comboboxOption_0718c0c92c",disabled:"disabled_c16ecbb4f4",selected:"selected_9bec51262d",active:"active_78c5f0955c",activeOutline:"activeOutline_c839f6c506",optionLabel:"optionLabel_a5eaccce5b",optionIcon:"optionIcon_7e3d96ab65",left:"left_0d50f32eac"};!function(o){const e="s_id-cc5db5fd586e_3_0_0-beta_0";if("undefined"!=typeof document){const c=document.head||document.getElementsByTagName("head")[0];if(c.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,c.firstChild?c.insertBefore(n,c.firstChild):c.appendChild(n),n.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=o)}(".comboboxOption_0718c0c92c {\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_0718c0c92c.disabled_c16ecbb4f4 {\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_0718c0c92c.disabled_c16ecbb4f4:hover {\n  background-color: transparent;\n}\n\n.comboboxOption_0718c0c92c.selected_9bec51262d {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption_0718c0c92c:hover:not(.disabled_c16ecbb4f4):not(.selected_9bec51262d),\n.comboboxOption_0718c0c92c.active_78c5f0955c {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption_0718c0c92c.activeOutline_c839f6c506 {\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_0718c0c92c .optionLabel_a5eaccce5b {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.comboboxOption_0718c0c92c .optionIcon_7e3d96ab65 {\n  flex: 0 0 auto;\n}\n\n.comboboxOption_0718c0c92c .optionIcon_7e3d96ab65.left_0d50f32eac {\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_1da59f1297"};!function(e){const t="s_id-f549b49034f1_3_0_0-alpha_8";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_1da59f1297 {\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_4de9095c37"};!function(e){const t="s_id-f549b49034f1_3_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".stickyCategoryHeader_4de9095c37 {\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_f7d7ff4a94",withAnimation:"withAnimation_16f4f58f8c",counterPopElastic:"counterPopElastic_12e3597dab",sizeSmall:"sizeSmall_73562fa669",sizeLarge:"sizeLarge_096efd856f",kindFill:"kindFill_053c9fff3b",colorPrimary:"colorPrimary_c41fb90cdd",colorDark:"colorDark_14f3bb21c5",colorNegative:"colorNegative_ddba62c1ca",colorLight:"colorLight_0b592ee329",kindLine:"kindLine_e86d1b2344",fadeEnter:"fadeEnter_c6c1207e20",fadeEnterActive:"fadeEnterActive_93fe042902",fadeExit:"fadeExit_e679470392",fadeExitActive:"fadeExitActive_aee87510b3","counter-pop-elastic":"counter-pop-elastic_823945ca59"};!function(n){const o="s_id-2d04cfa2a785_3_0_0-alpha_8";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_f7d7ff4a94 {\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_823945ca59 {\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_16f4f58f8c {\n  animation: counterPopElastic_12e3597dab var(--motion-expressive-short);\n}\n.sizeSmall_73562fa669 {\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_096efd856f {\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_053c9fff3b.colorPrimary_c41fb90cdd {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_053c9fff3b.colorDark_14f3bb21c5 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_053c9fff3b.colorNegative_ddba62c1ca {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_053c9fff3b.colorLight_0b592ee329 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_e86d1b2344 {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_e86d1b2344.colorPrimary_c41fb90cdd {\n  color: var(--primary-color);\n}\n.kindLine_e86d1b2344.colorDark_14f3bb21c5 {\n  color: var(--inverted-color-background);\n}\n.kindLine_e86d1b2344.colorNegative_ddba62c1ca {\n  color: var(--negative-color);\n}\n.kindLine_e86d1b2344.colorLight_0b592ee329 {\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_c6c1207e20 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_93fe042902 {\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_e679470392 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_aee87510b3 {\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_46645dac7a",withAnimation:"withAnimation_b83a0b590d",counterPopElastic:"counterPopElastic_03aca3e2e4",sizeSmall:"sizeSmall_978b7e78a4",sizeLarge:"sizeLarge_15419a7be3",kindFill:"kindFill_00918c2efa",colorPrimary:"colorPrimary_b94342dfdf",colorDark:"colorDark_3839622c15",colorNegative:"colorNegative_77066aa238",colorLight:"colorLight_8419ebd31b",kindLine:"kindLine_1f4e062edf",fadeEnter:"fadeEnter_b8bf408b21",fadeEnterActive:"fadeEnterActive_209693d241",fadeExit:"fadeExit_c602ec8c36",fadeExitActive:"fadeExitActive_70f7c99c98","counter-pop-elastic":"counter-pop-elastic_33bc3b92b8"};!function(n){const o="s_id-2d04cfa2a785_3_0_0-beta_0";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_46645dac7a {\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_33bc3b92b8 {\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_b83a0b590d {\n  animation: counterPopElastic_03aca3e2e4 var(--motion-expressive-short);\n}\n.sizeSmall_978b7e78a4 {\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_15419a7be3 {\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_00918c2efa.colorPrimary_b94342dfdf {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n.kindFill_00918c2efa.colorDark_3839622c15 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.kindFill_00918c2efa.colorNegative_77066aa238 {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n.kindFill_00918c2efa.colorLight_8419ebd31b {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.kindLine_1f4e062edf {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine_1f4e062edf.colorPrimary_b94342dfdf {\n  color: var(--primary-color);\n}\n.kindLine_1f4e062edf.colorDark_3839622c15 {\n  color: var(--inverted-color-background);\n}\n.kindLine_1f4e062edf.colorNegative_77066aa238 {\n  color: var(--negative-color);\n}\n.kindLine_1f4e062edf.colorLight_8419ebd31b {\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_b8bf408b21 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n.fadeEnterActive_209693d241 {\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_c602ec8c36 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n.fadeExitActive_70f7c99c98 {\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 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};
+import t from"react";import o from"../../Icon/Icon.js";import e from"./DateNavigationItem.module.scss.js";import r from"../../../../icons/dist/react/MoveArrowLeft.js";import n from"../../../../icons/dist/react/MoveArrowRight.js";var i={prev:r,next:n},c=function(r){var n=r.onClick;return t.createElement("button",{type:"button",className:e.navigationItemContainer,onClick:function(){return n&&n()}},t.createElement(o,{iconType:"svg",icon:i[r.kind],iconSize:24}))};export{c 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, 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"}
+{"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":"qOAKA,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_d893f5d3e5"};!function(e){const n="s_id-84193b4fa4fe_3_0_0-alpha_8";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_d893f5d3e5 {\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_e82ba0929c"};!function(e){const n="s_id-84193b4fa4fe_3_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".navigationItemContainer_e82ba0929c {\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.module.scss.js

@@ -1,2 +1,2 @@
-var e={datepickerContainer:"datepickerContainer_1d6393fb2c",monthYearSelection:"monthYearSelection_c40c57b24f",rangePickerMode:"rangePickerMode_efe558f87c",withWeekNumber:"withWeekNumber_6fd8e774c4",calendarDayWeekNumber:"calendarDayWeekNumber_c8ed1f3382"};!function(e){const n="s_id-08c822721057_3_0_0-alpha_8";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.datepickerContainer_1d6393fb2c {\n  position: relative;\n  min-height: 302px;\n}\n.datepickerContainer_1d6393fb2c 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_1d6393fb2c td {\n  border: none;\n}\n.datepickerContainer_1d6393fb2c.monthYearSelection_c40c57b24f table tbody {\n  opacity: 0;\n}\n.datepickerContainer_1d6393fb2c.monthYearSelection_c40c57b24f .DayPicker_transitionContainer__horizontal {\n  transition: none;\n}\n.datepickerContainer_1d6393fb2c .CalendarMonthGrid {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_1d6393fb2c .CalendarMonth {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_1d6393fb2c .DayPicker__horizontal {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_1d6393fb2c .DayPicker {\n  box-shadow: none;\n  border: none;\n  border-radius: 0;\n}\n.datepickerContainer_1d6393fb2c .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_1d6393fb2c .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_1d6393fb2c .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_1d6393fb2c .CalendarDay__default.CalendarDay__selected {\n  color: var(--text-color-on-primary);\n}\n.datepickerContainer_1d6393fb2c .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_1d6393fb2c .CalendarDay__default.CalendarDay__selected::before:hover {\n  color: var(--text-color-on-primary);\n  background: var(--primary-color);\n}\n.datepickerContainer_1d6393fb2c .CalendarMonth_caption {\n  color: var(--primary-text-on-secondary-color);\n}\n.datepickerContainer_1d6393fb2c .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_1d6393fb2c .CalendarDay__today:hover::before {\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_1d6393fb2c .CalendarDay__blocked_calendar, .datepickerContainer_1d6393fb2c .CalendarDay__blocked_calendar:active, .datepickerContainer_1d6393fb2c .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_1d6393fb2c .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_1d6393fb2c .DayPickerNavigation_rightButton__horizontal {\n  right: 22px;\n}\n.datepickerContainer_1d6393fb2c .DayPickerNavigation .DayPickerNavigation_button:nth-child(1) {\n  left: 12px;\n}\n.datepickerContainer_1d6393fb2c .DayPickerNavigation .DayPickerNavigation_button:nth-child(2) {\n  right: 12px;\n}\n.datepickerContainer_1d6393fb2c .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_1d6393fb2c.rangePickerMode_efe558f87c .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_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected.CalendarDay__selected_start:hover {\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .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_1d6393fb2c.rangePickerMode_efe558f87c .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_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected.CalendarDay__selected_end:hover {\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .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_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__hovered_span, .datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__hovered_span:hover {\n  border-radius: 0;\n  color: var(--primary-text-color);\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__hovered_span:hover::before, .datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__hovered_span:hover:hover::before {\n  border-radius: 0;\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected_span {\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected_span:hover {\n  color: var(--primary-text-color);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c .CalendarDay__selected_span:hover::before {\n  border-radius: 0;\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c.range-single-date-selected .CalendarDay__hovered_span {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c.range-single-date-selected .CalendarDay__hovered_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_1d6393fb2c.rangePickerMode_efe558f87c.range-single-date-selected .CalendarDay__hovered_span:hover::before {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 {\n  padding: 0 4px 0 8px;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .CalendarDay .calendarDayWeekNumber_c8ed1f3382 {\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_1d6393fb2c.withWeekNumber_6fd8e774c4 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay .calendarDayWeekNumber_c8ed1f3382 {\n  display: flex;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay ~ td.CalendarDay .calendarDayWeekNumber_c8ed1f3382 {\n  display: none;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .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_1d6393fb2c.withWeekNumber_6fd8e774c4 .DayPicker__horizontal {\n  margin: 4px;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {\n  margin-left: 17px;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .DayPicker_weekHeader {\n  padding: 0 !important;\n  left: 30px !important;\n}\n.datepickerContainer_1d6393fb2c.withWeekNumber_6fd8e774c4 .CalendarMonth_caption {\n  margin-right: 20px;\n}');export{e as default};
+var e={datepickerContainer:"datepickerContainer_e521a0282a",monthYearSelection:"monthYearSelection_7774adb039",rangePickerMode:"rangePickerMode_95ce81944c",withWeekNumber:"withWeekNumber_3474372950",calendarDayWeekNumber:"calendarDayWeekNumber_88042fa263"};!function(e){const n="s_id-08c822721057_3_0_0-beta_0";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_e521a0282a {\n  position: relative;\n  min-height: 302px;\n}\n.datepickerContainer_e521a0282a 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_e521a0282a td {\n  border: none;\n}\n.datepickerContainer_e521a0282a.monthYearSelection_7774adb039 table tbody {\n  opacity: 0;\n}\n.datepickerContainer_e521a0282a.monthYearSelection_7774adb039 .DayPicker_transitionContainer__horizontal {\n  transition: none;\n}\n.datepickerContainer_e521a0282a .CalendarMonthGrid {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_e521a0282a .CalendarMonth {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_e521a0282a .DayPicker__horizontal {\n  background-color: var(--secondary-background-color);\n}\n.datepickerContainer_e521a0282a .DayPicker {\n  box-shadow: none;\n  border: none;\n  border-radius: 0;\n}\n.datepickerContainer_e521a0282a .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_e521a0282a .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_e521a0282a .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_e521a0282a .CalendarDay__default.CalendarDay__selected {\n  color: var(--text-color-on-primary);\n}\n.datepickerContainer_e521a0282a .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_e521a0282a .CalendarDay__default.CalendarDay__selected::before:hover {\n  color: var(--text-color-on-primary);\n  background: var(--primary-color);\n}\n.datepickerContainer_e521a0282a .CalendarMonth_caption {\n  color: var(--primary-text-on-secondary-color);\n}\n.datepickerContainer_e521a0282a .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_e521a0282a .CalendarDay__today:hover::before {\n  border: 1px solid var(--primary-color);\n}\n.datepickerContainer_e521a0282a .CalendarDay__blocked_calendar, .datepickerContainer_e521a0282a .CalendarDay__blocked_calendar:active, .datepickerContainer_e521a0282a .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_e521a0282a .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_e521a0282a .DayPickerNavigation_rightButton__horizontal {\n  right: 22px;\n}\n.datepickerContainer_e521a0282a .DayPickerNavigation .DayPickerNavigation_button:nth-child(1) {\n  left: 12px;\n}\n.datepickerContainer_e521a0282a .DayPickerNavigation .DayPickerNavigation_button:nth-child(2) {\n  right: 12px;\n}\n.datepickerContainer_e521a0282a .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_e521a0282a.rangePickerMode_95ce81944c .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_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected.CalendarDay__selected_start:hover {\n  background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .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_e521a0282a.rangePickerMode_95ce81944c .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_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected.CalendarDay__selected_end:hover {\n  background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .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_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__hovered_span, .datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__hovered_span:hover {\n  border-radius: 0;\n  color: var(--primary-text-color);\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__hovered_span:hover::before, .datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__hovered_span:hover:hover::before {\n  border-radius: 0;\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected_span {\n  background: var(--primary-selected-color);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected_span:hover {\n  color: var(--primary-text-color);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c .CalendarDay__selected_span:hover::before {\n  border-radius: 0;\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c.range-single-date-selected .CalendarDay__hovered_span {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c.range-single-date-selected .CalendarDay__hovered_span.CalendarDay__today::before {\n  border-radius: 0;\n}\n.datepickerContainer_e521a0282a.rangePickerMode_95ce81944c.range-single-date-selected .CalendarDay__hovered_span:hover::before {\n  background: var(--primary-background-hover-color);\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 {\n  padding: 0 4px 0 8px;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .CalendarDay .calendarDayWeekNumber_88042fa263 {\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_e521a0282a.withWeekNumber_3474372950 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay .calendarDayWeekNumber_88042fa263 {\n  display: flex;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay ~ td.CalendarDay .calendarDayWeekNumber_88042fa263 {\n  display: none;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .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_e521a0282a.withWeekNumber_3474372950 .DayPicker__horizontal {\n  margin: 4px;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {\n  margin-left: 17px;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .DayPicker_weekHeader {\n  padding: 0 !important;\n  left: 30px !important;\n}\n.datepickerContainer_e521a0282a.withWeekNumber_3474372950 .CalendarMonth_caption {\n  margin-right: 20px;\n}');export{e as default};
 //# sourceMappingURL=DatePicker.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import t from"react";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 o from"../../../../icons/dist/react/DropdownChevronDown.js";import"../../../../icons/dist/react/DropdownChevronRight.js";import e from"../../../../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"../../../../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 i from"moment";import r from"./DatePickerHeader.module.scss.js";import s from"../../Icon/Icon.js";var a=function(a){var c=a.isMonthYearSelection,n=a.onToggleMonthYearPicker,m=a.hideNavigationKeys,d=a["data-testid"],p=a.ariaLabel,l=void 0===p?"Toggle select year":p,j=i(a.currentDate.valueOf()),v=j.format("MMMM"),g=j.format("YYYY");return t.createElement("div",{className:r.datePickerHeader},t.createElement("div",null,v+" "+g),!m&&t.createElement("button",{"data-testid":"".concat(d,"-year-toggle"),type:"button",className:r.button,"aria-label":l,onClick:n},t.createElement("div",{className:r.buttonContent},t.createElement(s,{iconType:"svg",icon:c?e:o,iconSize:24}))))};export{a as default};
+import e from"react";import t from"moment";import o from"./DatePickerHeader.module.scss.js";import r from"../../Icon/Icon.js";import a from"../../../../icons/dist/react/DropdownChevronUp.js";import n from"../../../../icons/dist/react/DropdownChevronDown.js";var i=function(i){var c=i.isMonthYearSelection,m=i.onToggleMonthYearPicker,s=i.hideNavigationKeys,l=i["data-testid"],d=i.ariaLabel,p=void 0===d?"Toggle select year":d,f=t(i.currentDate.valueOf()),u=f.format("MMMM"),v=f.format("YYYY");return e.createElement("div",{className:o.datePickerHeader},e.createElement("div",null,u+" "+v),!s&&e.createElement("button",{"data-testid":"".concat(l,"-year-toggle"),type:"button",className:o.button,"aria-label":p,onClick:m},e.createElement("div",{className:o.buttonContent},e.createElement(r,{iconType:"svg",icon:c?a:n,iconSize:24}))))};export{i as default};
 //# sourceMappingURL=DatePickerHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerHeader.js","sources":["../../../../../src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport moment from \"moment\";\nimport { Moment } from \"../types\";\nimport styles from \"./DatePickerHeader.module.scss\";\nimport Icon from \"../../Icon/Icon\";\n\nexport interface DatePickerHeaderProps {\n  currentDate: Moment;\n  isMonthYearSelection: boolean;\n  onToggleMonthYearPicker: () => void;\n  hideNavigationKeys: boolean;\n  \"data-testid\"?: string;\n  ariaLabel?: string;\n}\n\nconst DatePickerHeader = (props: DatePickerHeaderProps) => {\n  const {\n    currentDate,\n    isMonthYearSelection,\n    onToggleMonthYearPicker,\n    hideNavigationKeys,\n    \"data-testid\": dateTestId,\n    ariaLabel = \"Toggle select year\"\n  } = props;\n\n  const localedDated = moment(currentDate.valueOf());\n  const month = localedDated.format(\"MMMM\");\n  const year = localedDated.format(\"YYYY\");\n  const string = month + \" \" + year;\n  return (\n    <div className={styles.datePickerHeader}>\n      <div>{string}</div>\n      {!hideNavigationKeys && (\n        <button\n          data-testid={`${dateTestId}-year-toggle`}\n          type=\"button\"\n          className={styles.button}\n          aria-label={ariaLabel}\n          onClick={onToggleMonthYearPicker}\n        >\n          <div className={styles.buttonContent}>\n            <Icon iconType=\"svg\" icon={isMonthYearSelection ? DropdownChevronUp : DropdownChevronDown} iconSize={24} />\n          </div>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default DatePickerHeader;\n"],"names":["DatePickerHeader","props","isMonthYearSelection","onToggleMonthYearPicker","hideNavigationKeys","dateTestId","_props$ariaLabel","ariaLabel","localedDated","moment","currentDate","valueOf","month","format","year","React","createElement","className","styles","datePickerHeader","concat","type","button","onClick","buttonContent","Icon","iconType","icon","DropdownChevronUp","DropdownChevronDown","iconSize"],"mappings":"6sCAgBA,IAAMA,EAAmB,SAACC,GACxB,IAEEC,EAKED,EALFC,qBACAC,EAIEF,EAJFE,wBACAC,EAGEH,EAHFG,mBACeC,EAEbJ,EAFF,eAAaK,EAEXL,EADFM,UAAAA,OAAY,IAAHD,EAAG,qBAAoBA,EAG5BE,EAAeC,EAFjBR,EANFS,YAQsCC,WAClCC,EAAQJ,EAAaK,OAAO,QAC5BC,EAAON,EAAaK,OAAO,QAEjC,OACEE,EAAKC,cAAA,MAAA,CAAAC,UAAWC,EAAOC,kBACrBJ,EAAAC,cAAA,MAAA,KAHWJ,EAAQ,IAAME,IAIvBV,GACAW,EAAAC,cAAA,SAAA,CAAA,cAAAI,GAAAA,OACkBf,EAAwB,gBACxCgB,KAAK,SACLJ,UAAWC,EAAOI,oBACNf,EACZgB,QAASpB,GAETY,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOM,eACrBT,EAACC,cAAAS,EAAK,CAAAC,SAAS,MAAMC,KAAMzB,EAAuB0B,EAAoBC,EAAqBC,SAAU,OAMjH"}
+{"version":3,"file":"DatePickerHeader.js","sources":["../../../../../src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport moment from \"moment\";\nimport { Moment } from \"../types\";\nimport styles from \"./DatePickerHeader.module.scss\";\nimport Icon from \"../../Icon/Icon\";\n\nexport interface DatePickerHeaderProps {\n  currentDate: Moment;\n  isMonthYearSelection: boolean;\n  onToggleMonthYearPicker: () => void;\n  hideNavigationKeys: boolean;\n  \"data-testid\"?: string;\n  ariaLabel?: string;\n}\n\nconst DatePickerHeader = (props: DatePickerHeaderProps) => {\n  const {\n    currentDate,\n    isMonthYearSelection,\n    onToggleMonthYearPicker,\n    hideNavigationKeys,\n    \"data-testid\": dateTestId,\n    ariaLabel = \"Toggle select year\"\n  } = props;\n\n  const localedDated = moment(currentDate.valueOf());\n  const month = localedDated.format(\"MMMM\");\n  const year = localedDated.format(\"YYYY\");\n  const string = month + \" \" + year;\n  return (\n    <div className={styles.datePickerHeader}>\n      <div>{string}</div>\n      {!hideNavigationKeys && (\n        <button\n          data-testid={`${dateTestId}-year-toggle`}\n          type=\"button\"\n          className={styles.button}\n          aria-label={ariaLabel}\n          onClick={onToggleMonthYearPicker}\n        >\n          <div className={styles.buttonContent}>\n            <Icon iconType=\"svg\" icon={isMonthYearSelection ? DropdownChevronUp : DropdownChevronDown} iconSize={24} />\n          </div>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default DatePickerHeader;\n"],"names":["DatePickerHeader","props","isMonthYearSelection","onToggleMonthYearPicker","hideNavigationKeys","dateTestId","_props$ariaLabel","ariaLabel","localedDated","moment","currentDate","valueOf","month","format","year","React","createElement","className","styles","datePickerHeader","concat","type","button","onClick","buttonContent","Icon","iconType","icon","DropdownChevronUp","DropdownChevronDown","iconSize"],"mappings":"kQAgBA,IAAMA,EAAmB,SAACC,GACxB,IAEEC,EAKED,EALFC,qBACAC,EAIEF,EAJFE,wBACAC,EAGEH,EAHFG,mBACeC,EAEbJ,EAFF,eAAaK,EAEXL,EADFM,UAAAA,OAAY,IAAHD,EAAG,qBAAoBA,EAG5BE,EAAeC,EAFjBR,EANFS,YAQsCC,WAClCC,EAAQJ,EAAaK,OAAO,QAC5BC,EAAON,EAAaK,OAAO,QAEjC,OACEE,EAAKC,cAAA,MAAA,CAAAC,UAAWC,EAAOC,kBACrBJ,EAAAC,cAAA,MAAA,KAHWJ,EAAQ,IAAME,IAIvBV,GACAW,EAAAC,cAAA,SAAA,CAAA,cAAAI,GAAAA,OACkBf,EAAwB,gBACxCgB,KAAK,SACLJ,UAAWC,EAAOI,oBACNf,EACZgB,QAASpB,GAETY,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOM,eACrBT,EAACC,cAAAS,EAAK,CAAAC,SAAS,MAAMC,KAAMzB,EAAuB0B,EAAoBC,EAAqBC,SAAU,OAMjH"}

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

@@ -1,2 +1,2 @@
-var e={datePickerHeader:"datePickerHeader_1e019f4625",button:"button_b61f88ba05",buttonContent:"buttonContent_40bdf5693d"};!function(e){const n="s_id-89778422f1e0_3_0_0-alpha_8";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)}(".datePickerHeader_1e019f4625 {\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n}\n.datePickerHeader_1e019f4625 .button_b61f88ba05 {\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: none;\n  margin-left: 4px;\n  cursor: pointer;\n}\n.datePickerHeader_1e019f4625 .button_b61f88ba05 .buttonContent_40bdf5693d {\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  transition: all 0.1s ease;\n  color: var(--primary-text-on-secondary-color, true);\n}\n.datePickerHeader_1e019f4625 .button_b61f88ba05 .buttonContent_40bdf5693d:hover {\n  background-color: var(--primary-background-hover-on-secondary-color);\n  text-decoration: none;\n}");export{e as default};
+var e={datePickerHeader:"datePickerHeader_ca87ab8025",button:"button_b8cc2f0001",buttonContent:"buttonContent_e2fcf962cd"};!function(e){const n="s_id-89778422f1e0_3_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".datePickerHeader_ca87ab8025 {\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n}\n.datePickerHeader_ca87ab8025 .button_b8cc2f0001 {\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: none;\n  margin-left: 4px;\n  cursor: pointer;\n}\n.datePickerHeader_ca87ab8025 .button_b8cc2f0001 .buttonContent_e2fcf962cd {\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  transition: all 0.1s ease;\n  color: var(--primary-text-on-secondary-color, true);\n}\n.datePickerHeader_ca87ab8025 .button_b8cc2f0001 .buttonContent_e2fcf962cd:hover {\n  background-color: var(--primary-background-hover-on-secondary-color);\n  text-decoration: none;\n}");export{e as default};
 //# sourceMappingURL=DatePickerHeader.module.scss.js.map