npm - @vibe/core - Versions diffs - 3.41.0 → 3.43.0 - Mend

@vibe/core 3.41.0 → 3.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (747) hide show

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

	@@ -1 +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 /*\n The text or content displayed inside the chip.\n /\n label?: ElementContent;\n /\n If true, the chip is disabled.\n /\n disabled?: boolean;\n /\n If true, the chip is read-only and cannot be deleted.\n /\n readOnly?: boolean;\n /\n A React element displayed on the right side.\n /\n rightRenderer?: ElementContent;\n /\n A React element displayed on the left side.\n /\n leftRenderer?: ElementContent;\n /\n Icon displayed on the right side.\n /\n rightIcon?: SubIcon;\n /\n Icon displayed on the left side.\n /\n leftIcon?: SubIcon;\n /\n Image URL or text for an avatar displayed on the right.\n /\n rightAvatar?: string;\n /\n The type of avatar displayed on the right.\n /\n rightAvatarType?: AvatarType;\n /\n Image URL or text for an avatar displayed on the left.\n /\n leftAvatar?: string;\n /\n The type of avatar displayed on the left.\n /\n leftAvatarType?: AvatarType;\n /\n Class name applied to left or right icons.\n /\n iconClassName?: string;\n /\n Class name applied to left or right avatars.\n /\n avatarClassName?: string;\n /\n The background color of the chip.\n /\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /\n The size of the icons inside the chip.\n /\n iconSize?: number \| string;\n /\n Callback fired when the chip is deleted.\n /\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables the chip's entry animation.\n /\n noAnimation?: boolean;\n /\n If true, allows the user to select text inside the chip.\n /\n allowTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed on the chip.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback fired when the chip is clicked.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n The label of the chip for accessibility.\n /\n ariaLabel?: string;\n /\n If true, disables all click behaviors.\n /\n disableClickableBehavior?: boolean;\n /\n If true, displays a border around the chip.\n /\n showBorder?: boolean;\n /\n The label for the close button.\n */\n closeButtonAriaLabel?: string;\n}\n\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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"}
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\";\nimport { ElementContent, SubIcon, 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 /*\n The text or content displayed inside the chip.\n /\n label?: ElementContent;\n /\n If true, the chip is disabled.\n /\n disabled?: boolean;\n /\n If true, the chip is read-only and cannot be deleted.\n /\n readOnly?: boolean;\n /\n A React element displayed on the right side.\n /\n rightRenderer?: ElementContent;\n /\n A React element displayed on the left side.\n /\n leftRenderer?: ElementContent;\n /\n Icon displayed on the right side.\n /\n rightIcon?: SubIcon;\n /\n Icon displayed on the left side.\n /\n leftIcon?: SubIcon;\n /\n Image URL or text for an avatar displayed on the right.\n /\n rightAvatar?: string;\n /\n The type of avatar displayed on the right.\n /\n rightAvatarType?: AvatarType;\n /\n Image URL or text for an avatar displayed on the left.\n /\n leftAvatar?: string;\n /\n The type of avatar displayed on the left.\n /\n leftAvatarType?: AvatarType;\n /\n Class name applied to left or right icons.\n /\n iconClassName?: string;\n /\n Class name applied to left or right avatars.\n /\n avatarClassName?: string;\n /\n The background color of the chip.\n /\n color?: Exclude<ElementAllowedColor, \"dark_indigo\" \| \"blackish\">;\n /\n The size of the icons inside the chip.\n /\n iconSize?: number \| string;\n /\n Callback fired when the chip is deleted.\n /\n onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n /\n If true, disables the chip's entry animation.\n /\n noAnimation?: boolean;\n /\n If true, allows the user to select text inside the chip.\n /\n allowTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed on the chip.\n /\n onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n Callback fired when the chip is clicked.\n /\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n /\n The label of the chip for accessibility.\n /\n ariaLabel?: string;\n /\n If true, disables all click behaviors.\n /\n disableClickableBehavior?: boolean;\n /\n If true, displays a border around the chip.\n /\n showBorder?: boolean;\n /\n The label for the close button.\n */\n closeButtonAriaLabel?: string;\n}\n\nconst Chips = forwardRef(\n (\n {\n className,\n avatarClassName,\n iconClassName,\n id,\n label = \"\",\n leftIcon = null,\n rightIcon = null,\n leftAvatar = null,\n rightAvatar = null,\n disabled = false,\n readOnly = false,\n allowTextSelection = false,\n color = \"primary\",\n iconSize = 18,\n onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n onMouseDown,\n onClick,\n noAnimation = true,\n ariaLabel,\n \"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: React.ForwardedRef<HTMLDivElement>\n ) => {\n const componentDataTestId = dataTestId \|\| getTestId(ComponentDefaultTestId.CHIP, id);\n const hasClickableWrapper = (!!onClick \|\| !!onMouseDown) && !disableClickableBehavior;\n const hasCloseButton = !readOnly && !disabled;\n const overrideAriaLabel = ariaLabel \|\| (typeof label === \"string\" && label) \|\| \"\";\n\n const iconButtonRef = useRef(null);\n const componentRef = useRef(null);\n\n const [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\ninterface ChipsStaticProps {\n colors: typeof ElementAllowedColorEnum;\n avatarTypes: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<ChipsProps, ChipsStaticProps>(Chips, {\n colors: ElementAllowedColorEnum,\n avatarTypes: AvatarTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","avatarClassName","iconClassName","id","_ref$label","label","_ref$leftIcon","leftIcon","_ref$rightIcon","rightIcon","_ref$leftAvatar","leftAvatar","_ref$rightAvatar","rightAvatar","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$allowTextSelecti","allowTextSelection","_ref$color","color","_ref$iconSize","iconSize","_ref$onDelete","onDelete","_id","_e","onMouseDown","onClick","_ref$noAnimation","noAnimation","ariaLabel","_ref$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 CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_582f5580ce","focus-visible":"focus-visible_560621c3be",disabled:"disabled_62f47f8a3f",disableTextSelection:"disableTextSelection_9c4e53e409",chips:"chips_ea3cde97d7","chips-pop-in-emphasized":"chips-pop-in-emphasized_2579d4e59d",border:"border_7b131c17c6",withUserSelect:"withUserSelect_37e5d2a873",label:"label_1dbb06e7e6",noAnimation:"noAnimation_d72c68a6e9",icon:"icon_bfb80f2410",avatar:"avatar_59125bcc68",customRenderer:"customRenderer_248931ee34",left:"left_7693f4fa4d",right:"right_8bf528b7fd",close:"close_c78e7c252b",defaultCursor:"defaultCursor_62f47f8a3f"};!function(e){const n="s_id-a8c9f55659fd_3_40_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_582f5580ce {\n  cursor: pointer;\n}\n.clickable_582f5580ce:focus-visible, .clickable_582f5580ce.focus-visible_560621c3be {\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_582f5580ce:focus:not(.focus-visible_560621c3be) {\n  outline: none;\n}\n.clickable_582f5580ce.disabled_62f47f8a3f {\n  cursor: default;\n}\n.disableTextSelection_9c4e53e409 {\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_ea3cde97d7 {\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_2579d4e59d var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_ea3cde97d7.border_7b131c17c6 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_ea3cde97d7.withUserSelect_37e5d2a873 {\n  user-select: text;\n  cursor: text;\n}\n.chips_ea3cde97d7 .label_1dbb06e7e6 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_ea3cde97d7.noAnimation_d72c68a6e9 {\n  animation: none;\n}\n.chips_ea3cde97d7 .icon_bfb80f2410,\n.chips_ea3cde97d7 .avatar_59125bcc68,\n.chips_ea3cde97d7 .customRenderer_248931ee34 {\n  min-width: 18px;\n}\n.chips_ea3cde97d7 .icon_bfb80f2410.left_7693f4fa4d,\n.chips_ea3cde97d7 .avatar_59125bcc68.left_7693f4fa4d,\n.chips_ea3cde97d7 .customRenderer_248931ee34.left_7693f4fa4d {\n  margin-right: var(--spacing-xs);\n}\n.chips_ea3cde97d7 .icon_bfb80f2410.right_8bf528b7fd,\n.chips_ea3cde97d7 .avatar_59125bcc68.right_8bf528b7fd,\n.chips_ea3cde97d7 .customRenderer_248931ee34.right_8bf528b7fd {\n  margin-left: var(--spacing-xs);\n}\n.chips_ea3cde97d7 .icon_bfb80f2410.close_c78e7c252b,\n.chips_ea3cde97d7 .avatar_59125bcc68.close_c78e7c252b,\n.chips_ea3cde97d7 .customRenderer_248931ee34.close_c78e7c252b {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_ea3cde97d7.disabled_62f47f8a3f .icon_bfb80f2410 {\n  color: var(--disabled-text-color);\n}\n.chips_ea3cde97d7.disabled_62f47f8a3f .label_1dbb06e7e6 {\n  color: var(--disabled-text-color);\n}\n.chips_ea3cde97d7.defaultCursor_62f47f8a3f {\n  cursor: default;\n}\n.chips_ea3cde97d7.clickable_582f5580ce {\n  cursor: pointer;\n}\n.chips_ea3cde97d7.clickable_582f5580ce:focus-visible, .chips_ea3cde97d7.clickable_582f5580ce.focus-visible_560621c3be {\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_ea3cde97d7.clickable_582f5580ce:focus:not(.focus-visible_560621c3be) {\n  outline: none;\n}\n.chips_ea3cde97d7.clickable_582f5580ce.disabled_62f47f8a3f {\n  cursor: default;\n}\n.chips_ea3cde97d7.clickable_582f5580ce.disableTextSelection_9c4e53e409 {\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_2579d4e59d {\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_4e952c1b9e","focus-visible":"focus-visible_c98abb5352",disabled:"disabled_78701ded46",disableTextSelection:"disableTextSelection_9c6c118e1c",chips:"chips_41dace729c","chips-pop-in-emphasized":"chips-pop-in-emphasized_e928495f45",border:"border_e71bb3f3e9",withUserSelect:"withUserSelect_ac844e2793",label:"label_14e79a0c9a",noAnimation:"noAnimation_d19ca97872",icon:"icon_a2e2916dec",avatar:"avatar_cbcd162e86",customRenderer:"customRenderer_1d1165987d",left:"left_c7bd79834e",right:"right_0a0a79f696",close:"close_088b7a899e",defaultCursor:"defaultCursor_78701ded46"};!function(e){const c="s_id-a8c9f55659fd_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+c))return;const i=document.createElement("style");i.id=c,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[c]=e)}(".clickable_4e952c1b9e {\n  cursor: pointer;\n}\n.clickable_4e952c1b9e:focus-visible, .clickable_4e952c1b9e.focus-visible_c98abb5352 {\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_4e952c1b9e:focus:not(.focus-visible_c98abb5352) {\n  outline: none;\n}\n.clickable_4e952c1b9e.disabled_78701ded46 {\n  cursor: default;\n}\n.disableTextSelection_9c6c118e1c {\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_41dace729c {\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_e928495f45 var(--motion-productive-medium) var(--motion-timing-emphasize);\n}\n.chips_41dace729c.border_e71bb3f3e9 {\n  border: 1px solid var(--primary-background-color);\n}\n.chips_41dace729c.withUserSelect_ac844e2793 {\n  user-select: text;\n  cursor: text;\n}\n.chips_41dace729c .label_14e79a0c9a {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chips_41dace729c.noAnimation_d19ca97872 {\n  animation: none;\n}\n.chips_41dace729c .icon_a2e2916dec,\n.chips_41dace729c .avatar_cbcd162e86,\n.chips_41dace729c .customRenderer_1d1165987d {\n  min-width: 18px;\n}\n.chips_41dace729c .icon_a2e2916dec.left_c7bd79834e,\n.chips_41dace729c .avatar_cbcd162e86.left_c7bd79834e,\n.chips_41dace729c .customRenderer_1d1165987d.left_c7bd79834e {\n  margin-right: var(--spacing-xs);\n}\n.chips_41dace729c .icon_a2e2916dec.right_0a0a79f696,\n.chips_41dace729c .avatar_cbcd162e86.right_0a0a79f696,\n.chips_41dace729c .customRenderer_1d1165987d.right_0a0a79f696 {\n  margin-left: var(--spacing-xs);\n}\n.chips_41dace729c .icon_a2e2916dec.close_088b7a899e,\n.chips_41dace729c .avatar_cbcd162e86.close_088b7a899e,\n.chips_41dace729c .customRenderer_1d1165987d.close_088b7a899e {\n  margin-left: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.chips_41dace729c.disabled_78701ded46 .icon_a2e2916dec {\n  color: var(--disabled-text-color);\n}\n.chips_41dace729c.disabled_78701ded46 .label_14e79a0c9a {\n  color: var(--disabled-text-color);\n}\n.chips_41dace729c.defaultCursor_78701ded46 {\n  cursor: default;\n}\n.chips_41dace729c.clickable_4e952c1b9e {\n  cursor: pointer;\n}\n.chips_41dace729c.clickable_4e952c1b9e:focus-visible, .chips_41dace729c.clickable_4e952c1b9e.focus-visible_c98abb5352 {\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_41dace729c.clickable_4e952c1b9e:focus:not(.focus-visible_c98abb5352) {\n  outline: none;\n}\n.chips_41dace729c.clickable_4e952c1b9e.disabled_78701ded46 {\n  cursor: default;\n}\n.chips_41dace729c.clickable_4e952c1b9e.disableTextSelection_9c6c118e1c {\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_e928495f45 {\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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Clickable.js","sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport ~~VibeComponentProps~~ ~~from \"../../types/~~VibeComponentProps~~\";\nimport~~ ~~VibeComponent~~ from \"../../types~~/VibeComponent~~\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Clickable.module.scss\";\n\nexport interface ClickableProps extends VibeComponentProps {\n /*\n The HTML element or custom component used as the root.\n /\n elementType?: keyof JSX.IntrinsicElements \| string;\n /\n The content inside the clickable element.\n /\n children?: React.ReactNode;\n /\n The ARIA role of the element.\n /\n role?: AriaRole;\n /\n Callback fired when the element is clicked.\n /\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n /\n If true, allows text selection inside the element.\n /\n enableTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed down on the element.\n /\n onMouseDown?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse enters the element.\n /\n onMouseEnter?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse leaves the element.\n /\n onMouseLeave?: (event: React.MouseEvent) => void;\n /\n The label of the element for accessibility.\n /\n ariaLabel?: string;\n /\n If true, hides the element from assistive technologies.\n /\n ariaHidden?: boolean;\n // TODO: [breaking] remove string type\n /\n Indicates the presence of a popup associated with the element.\n /\n ariaHasPopup?: boolean \| string;\n /\n If true, indicates that the associated popup is open.\n /\n ariaExpanded?: boolean;\n // TODO: [breaking] remove string type\n /\n The tab order of the element.\n /\n tabIndex?: string \| number;\n /\n If true, the element is disabled.\n /\n disabled?: boolean;\n /\n Inline styles applied to the element.\n */\n style?: React.CSSProperties;\n}\n\nconst Clickable: ~~VibeComponent<ClickableProps, HTMLElement>~~ = forwardRef(\n (\n {\n elementType = \"div\",\n className = \"\",\n id,\n children,\n role = \"button\",\n onClick = NOOP,\n enableTextSelection = false,\n onMouseDown = NOOP,\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded,\n tabIndex = \"0\",\n disabled = false,\n style,\n \"data-testid\": dataTestId\n }: ClickableProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const clickableProps = useClickableProps(\n {\n onClick,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n disabled,\n id,\n \"data-testid\": dataTestId,\n role,\n tabIndex,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded\n },\n ref\n );\n const overrideClassName = cx(styles.clickable, className, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !enableTextSelection\n });\n\n return React.createElement(\n elementType,\n {\n ...clickableProps,\n className: overrideClassName,\n style: style\n },\n children\n );\n }\n);\n\nexport default Clickable;\n"],"names":["Clickable","forwardRef","_ref","ref","_ref$elementType","elementType","_ref$className","className","children","_ref$role","role","_ref$onClick","onClick","_ref$enableTextSelect","enableTextSelection","_ref$onMouseDown","onMouseDown","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$tabIndex","tabIndex","_ref$disabled","disabled","style","clickableProps","useClickableProps","NOOP","id","ariaLabel","ariaHidden","ariaHasPopup","ariaExpanded","overrideClassName","cx","styles","clickable","_defineProperty","disableTextSelection","React","createElement","Object","assign"],"mappings":"~~6RAyEMA~~,IAAAA,~~EAAwDC~~,~~GAC5D~~,SAAAC,EAqBEC,GACE,IAAAC,EAAAF,EApBAG,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EAAAE,EAAAJ,EACnBK,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAEdE,EAAQN,EAARM,SAAQC,EAAAP,EACRQ,KAAeC,EAAAT,EACfU,QAAcC,EAAAX,EACdY,oBAAAA,OAAsB,IAAHD,GAAQA,EAAAE,EAAAb,EAC3Bc,YAAkBC,EAAAf,EAClBgB,aAAmBC,EAAAjB,EACnBkB,aAIYC,EAAAnB,EACZoB,SAAcC,EAAArB,EACdsB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAKvB,EAALuB,MAKIC,EAAiBC,EACrB,CACEf,aAlBQgB,IAAHjB,EAAGiB,EAAIjB,EAmBZK,iBAjBYY,IAAHb,EAAGa,EAAIb,EAkBhBG,kBAjBaU,IAAHX,EAAGW,EAAIX,EAkBjBG,kBAjBaQ,IAAHT,EAAGS,EAAIT,EAkBjBK,SAAAA,EACAK,GA1BA3B,EAAF2B,GA2BE,cAZuB3B,EAAzB,eAaEQ,UA1BK,IAAHD,EAAG,SAAQA,EA2Bba,cAjBS,IAAHD,EAAG,IAAGA,EAkBZS,UAtBO5B,EAAT4B,UAuBEC,WAtBQ7B,EAAV6B,WAuBEC,aAtBU9B,EAAZ8B,aAuBEC,aAtBU/B,EAAZ+B,cAwBA9B,GAEI+B,EAAoBC,EAAGC,EAAOC,UAAW9B,EAAS+B,EAAAA,EACrDF,CAAAA,EAAAA,EAAOZ,SAAWA,GAClBY,EAAOG,sBAAwBzB,IAGlC,OAAO0B,EAAMC,cACXpC,EAAWqC,OAAAC,OAAAD,OAAAC,OAAA,GAENjB,GACH,CAAAnB,UAAW2B,EACXT,MAAOA,IAETjB,EAEJ"}
1	+ {"version":3,"file":"Clickable.js","sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"lodash-es\";\nimport { VibeComponentProps } from \"../../types\";\nimport useClickableProps from \"../../hooks/useClickableProps/useClickableProps\";\nimport styles from \"./Clickable.module.scss\";\n\nexport interface ClickableProps extends VibeComponentProps {\n /*\n The HTML element or custom component used as the root.\n /\n elementType?: keyof JSX.IntrinsicElements \| string;\n /\n The content inside the clickable element.\n /\n children?: React.ReactNode;\n /\n The ARIA role of the element.\n /\n role?: AriaRole;\n /\n Callback fired when the element is clicked.\n /\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n /\n If true, allows text selection inside the element.\n /\n enableTextSelection?: boolean;\n /\n Callback fired when the mouse button is pressed down on the element.\n /\n onMouseDown?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse enters the element.\n /\n onMouseEnter?: (event: React.MouseEvent) => void;\n /\n Callback fired when the mouse leaves the element.\n /\n onMouseLeave?: (event: React.MouseEvent) => void;\n /\n The label of the element for accessibility.\n /\n ariaLabel?: string;\n /\n If true, hides the element from assistive technologies.\n /\n ariaHidden?: boolean;\n // TODO: [breaking] remove string type\n /\n Indicates the presence of a popup associated with the element.\n /\n ariaHasPopup?: boolean \| string;\n /\n If true, indicates that the associated popup is open.\n /\n ariaExpanded?: boolean;\n // TODO: [breaking] remove string type\n /\n The tab order of the element.\n /\n tabIndex?: string \| number;\n /\n If true, the element is disabled.\n /\n disabled?: boolean;\n /\n Inline styles applied to the element.\n */\n style?: React.CSSProperties;\n}\n\nconst Clickable = forwardRef(\n (\n {\n elementType = \"div\",\n className = \"\",\n id,\n children,\n role = \"button\",\n onClick = NOOP,\n enableTextSelection = false,\n onMouseDown = NOOP,\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded,\n tabIndex = \"0\",\n disabled = false,\n style,\n \"data-testid\": dataTestId\n }: ClickableProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const clickableProps = useClickableProps(\n {\n onClick,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n disabled,\n id,\n \"data-testid\": dataTestId,\n role,\n tabIndex,\n ariaLabel,\n ariaHidden,\n ariaHasPopup,\n ariaExpanded\n },\n ref\n );\n const overrideClassName = cx(styles.clickable, className, {\n [styles.disabled]: disabled,\n [styles.disableTextSelection]: !enableTextSelection\n });\n\n return React.createElement(\n elementType,\n {\n ...clickableProps,\n className: overrideClassName,\n style: style\n },\n children\n );\n }\n);\n\nexport default Clickable;\n"],"names":["Clickable","forwardRef","_ref","ref","_ref$elementType","elementType","_ref$className","className","children","_ref$role","role","_ref$onClick","onClick","_ref$enableTextSelect","enableTextSelection","_ref$onMouseDown","onMouseDown","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$tabIndex","tabIndex","_ref$disabled","disabled","style","clickableProps","useClickableProps","NOOP","id","ariaLabel","ariaHidden","ariaHasPopup","ariaExpanded","overrideClassName","cx","styles","clickable","_defineProperty","disableTextSelection","React","createElement","Object","assign"],"mappings":"6RAwEMA,IAAAA,EAAYC,GAChB,SAAAC,EAqBEC,GACE,IAAAC,EAAAF,EApBAG,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EAAAE,EAAAJ,EACnBK,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAEdE,EAAQN,EAARM,SAAQC,EAAAP,EACRQ,KAAeC,EAAAT,EACfU,QAAcC,EAAAX,EACdY,oBAAAA,OAAsB,IAAHD,GAAQA,EAAAE,EAAAb,EAC3Bc,YAAkBC,EAAAf,EAClBgB,aAAmBC,EAAAjB,EACnBkB,aAIYC,EAAAnB,EACZoB,SAAcC,EAAArB,EACdsB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAKvB,EAALuB,MAKIC,EAAiBC,EACrB,CACEf,aAlBQgB,IAAHjB,EAAGiB,EAAIjB,EAmBZK,iBAjBYY,IAAHb,EAAGa,EAAIb,EAkBhBG,kBAjBaU,IAAHX,EAAGW,EAAIX,EAkBjBG,kBAjBaQ,IAAHT,EAAGS,EAAIT,EAkBjBK,SAAAA,EACAK,GA1BA3B,EAAF2B,GA2BE,cAZuB3B,EAAzB,eAaEQ,UA1BK,IAAHD,EAAG,SAAQA,EA2Bba,cAjBS,IAAHD,EAAG,IAAGA,EAkBZS,UAtBO5B,EAAT4B,UAuBEC,WAtBQ7B,EAAV6B,WAuBEC,aAtBU9B,EAAZ8B,aAuBEC,aAtBU/B,EAAZ+B,cAwBA9B,GAEI+B,EAAoBC,EAAGC,EAAOC,UAAW9B,EAAS+B,EAAAA,EACrDF,CAAAA,EAAAA,EAAOZ,SAAWA,GAClBY,EAAOG,sBAAwBzB,IAGlC,OAAO0B,EAAMC,cACXpC,EAAWqC,OAAAC,OAAAD,OAAAC,OAAA,GAENjB,GACH,CAAAnB,UAAW2B,EACXT,MAAOA,IAETjB,EAEJ"}

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

@@ -1,2 +1,2 @@
-var e={clickable:"clickable_582f5580ce","focus-visible":"focus-visible_560621c3be",disabled:"disabled_62f47f8a3f",disableTextSelection:"disableTextSelection_9c4e53e409"};!function(e){const n="s_id-8d33a9ee9e1f_3_40_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,i.firstChild?i.insertBefore(c,i.firstChild):i.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clickable_582f5580ce {\n  cursor: pointer;\n}\n.clickable_582f5580ce:focus-visible, .clickable_582f5580ce.focus-visible_560621c3be {\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_582f5580ce:focus:not(.focus-visible_560621c3be) {\n  outline: none;\n}\n.clickable_582f5580ce.disabled_62f47f8a3f {\n  cursor: default;\n}\n.disableTextSelection_9c4e53e409 {\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_4e952c1b9e","focus-visible":"focus-visible_c98abb5352",disabled:"disabled_78701ded46",disableTextSelection:"disableTextSelection_9c6c118e1c"};!function(e){const n="s_id-8d33a9ee9e1f_3_42_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_4e952c1b9e {\n  cursor: pointer;\n}\n.clickable_4e952c1b9e:focus-visible, .clickable_4e952c1b9e.focus-visible_c98abb5352 {\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_4e952c1b9e:focus:not(.focus-visible_c98abb5352) {\n  outline: none;\n}\n.clickable_4e952c1b9e.disabled_78701ded46 {\n  cursor: default;\n}\n.disableTextSelection_9c6c118e1c {\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/Clickable/ClickableWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClickableWrapper.js","sources":["../../../../src/components/Clickable/ClickableWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport Clickable from \"./Clickable\";\nimport ~~VibeComponentProps~~ ~~from \"../../types/~~VibeComponentProps~~\";\nimport~~ ~~VibeComponent~~ from \"../../types~~/VibeComponent~~\";\nimport { ClickableProps } from \"~~../~~Clickable~~/Clickable~~\";\n\nexport interface ClickableWrapperProps extends VibeComponentProps {\n /*\n The content inside the wrapper.\n /\n children: React.ReactNode;\n /\n If true, wraps the content in a `Clickable` component.\n /\n isClickable: boolean;\n /\n Props passed to the `Clickable` component.\n */\n clickableProps: ClickableProps;\n}\n\nconst ClickableWrapper: ~~VibeComponent<ClickableWrapperProps, HTMLElement>~~ = forwardRef(\n ({ children, isClickable = true, clickableProps = {} }: ClickableWrapperProps, ~~ref~~) => {\n if (!isClickable) {\n return <>{children}</>;\n }\n\n return (\n <Clickable {...clickableProps} ref={ref}>\n {children}\n </Clickable>\n );\n }\n);\n\nexport default ClickableWrapper;\n"],"names":["ClickableWrapper","forwardRef","_ref","ref","children","_ref$isClickable","isClickable","_ref$clickableProps","clickableProps","React","createElement","Clickable","Object","assign","Fragment"],"mappings":"~~oEAqBMA~~,IAAAA,~~EAAsEC~~,~~GAC1E~~,SAAAC,~~EAA+EC~~,~~GAAO~~,~~IAAnFC~~,EAAQF,EAARE,SAAQC,EAAAH,EAAEI,YAAkBC,EAAAL,EAAEM,~~eAC/B~~,~~YADyB~~,IAAHH,GAAOA,~~EAM3BI~~,EAAAC,cAACC,EAASC,OAAAC,OAAA,CAAA,~~OANiC~~,IAAAN,EAAG,CAAA,EAAEA,~~EAMnB~~,CAAEJ,IAAKA,IACjCC,GALIK,EAAAC,cAAAD,EAAAK,SAAA,KAAGV,EAQd"}
1	+ {"version":3,"file":"ClickableWrapper.js","sources":["../../../../src/components/Clickable/ClickableWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport Clickable from \"./Clickable\";\nimport { VibeComponentProps } from \"../../types\";\nimport { ClickableProps } from \"./Clickable\";\n\nexport interface ClickableWrapperProps extends VibeComponentProps {\n /*\n The content inside the wrapper.\n /\n children: React.ReactNode;\n /\n If true, wraps the content in a `Clickable` component.\n /\n isClickable: boolean;\n /\n Props passed to the `Clickable` component.\n */\n clickableProps: ClickableProps;\n}\n\nconst ClickableWrapper = forwardRef(\n (\n { children, isClickable = true, clickableProps = {} }: ClickableWrapperProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n if (!isClickable) {\n return <>{children}</>;\n }\n\n return (\n <Clickable {...clickableProps} ref={ref}>\n {children}\n </Clickable>\n );\n }\n);\n\nexport default ClickableWrapper;\n"],"names":["ClickableWrapper","forwardRef","_ref","ref","children","_ref$isClickable","isClickable","_ref$clickableProps","clickableProps","React","createElement","Clickable","Object","assign","Fragment"],"mappings":"oEAoBMA,IAAAA,EAAmBC,GACvB,SAAAC,EAEEC,GACE,IAFAC,EAAQF,EAARE,SAAQC,EAAAH,EAAEI,YAAkBC,EAAAL,EAAEM,eAGhC,YAH0B,IAAHH,GAAOA,EAQ5BI,EAAAC,cAACC,EAASC,OAAAC,OAAA,CAAA,OARkC,IAAAN,EAAG,CAAA,EAAEA,EAQpB,CAAEJ,IAAKA,IACjCC,GALIK,EAAAC,cAAAD,EAAAK,SAAA,KAAGV,EAQd"}

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

	@@ -1 +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\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value?: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onSave?: (value: ColorPickerArrayValueOnly) => void;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The list of colors available for selection.\n /\n colorsList?: ColorPickerArrayValueOnly;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n \n /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker: ~~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 data-vibe={ComponentVibeId.COLOR_PICKER}\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","ComponentVibeId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BA4FA,~~IAyEeA~~,EAAAA,~~EApEXC~~,~~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,EAACC,cAAAS,GACCC,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,GAC/D,YAAAyB,EAAgBD,eAInC,~~IAG0C~~,~~CAC1CE~~,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}
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, 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\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value?: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onSave?: (value: ColorPickerArrayValueOnly) => void;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The list of colors available for selection.\n /\n colorsList?: ColorPickerArrayValueOnly;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n \n /\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n (\n {\n className,\n onSave = NOOP,\n value = \"\",\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList = [],\n isMultiselect,\n colorSize = \"medium\",\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const onChange = useCallback(onSave, [onSave]);\n\n const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <DialogContentContainer\n ref={mergedRef}\n className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n ariaLabelledby=\"Color Picker Dialog\"\n ariaDescribedby=\"Pick color\"\n style={{ width }}\n >\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 data-vibe={ComponentVibeId.COLOR_PICKER}\n />\n </DialogContentContainer>\n );\n }\n);\n\ninterface ColorPickerStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerProps, ColorPickerStaticProps>(ColorPicker, {\n sizes: BaseSizes,\n colorStyles: ColorStyleEnum,\n colorSizes: BaseSizes,\n colorShapes: ColorShapesEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","ariaLabelledby","ariaDescribedby","style","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId","COLOR_PICKER","ComponentVibeId","sizes","BaseSizes","colorStyles","ColorStyleEnum","colorSizes","colorShapes","ColorShapesEnum"],"mappings":"s5BA4FA,IA2EeA,EAAAA,EA3EKC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnE+C,eAAe,sBACfC,gBAAgB,aAChBC,MAAO,CAAEX,MAAAA,IAETE,EAACC,cAAAS,GACCC,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,GAC/D,YAAAyB,EAAgBD,eAInC,IAUoF,CACpFE,MAAOC,EACPC,YAAaC,EACbC,WAAYH,EACZI,YAAaC"}

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-var e={clearColorIcon:"clearColorIcon_97cc9a95be",clearColorButton:"clearColorButton_353f268af3"};!function(e){const n="s_id-774e60a23ee3_3_40_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".clearColorIcon_97cc9a95be {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_353f268af3 {\n  margin-top: var(--spacing-small);\n}");export{e as default};
+var e={clearColorIcon:"clearColorIcon_c5a576cba2",clearColorButton:"clearColorButton_287edba57a"};!function(e){const a="s_id-774e60a23ee3_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".clearColorIcon_c5a576cba2 {\n  margin-right: var(--spacing-small);\n}\n\n.clearColorButton_287edba57a {\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.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { ColorPickerArrayValueOnly, ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { ColorShapes, ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { SubIcon, ~~VibeComponent,~~ VibeComponentProps } from \"../../../../types\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { ColorStyle } from \"../../../../types~~/Colors~~\";\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n return color.replace(/-\|_/g, \" \").replace(/(?:^\|\\s)\\S/g, function (a) {\n return a.toUpperCase();\n });\n};\n\nconst calculateColorTooltip = (\n color: ColorPickerValueOnly,\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n if (tooltipContentByColor && tooltipContentByColor[color]) {\n return tooltipContentByColor[color];\n } else {\n return formatColorNameForTooltip(color);\n }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n /*\n Callback fired when a color is clicked.\n /\n onColorClicked?: (color: ColorPickerValueOnly) => void;\n /\n The list of colors to be displayed.\n /\n colorsToRender?: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The currently selected color or colors.\n /\n value?: string \| string[];\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The number of colors per row.\n /\n numberOfColorsInLine?: number;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n If true, displays a tooltip with the color name.\n */\n showColorNameTooltip?: boolean;\n}\n\~~nexport~~ ~~const~~ ColorPickerColorsGrid: ~~VibeComponent<ColorPickerColorsGridProps, HTMLUListElement>~~ = ~~React.~~forwardRef(\n (\n {\n onColorClicked,\n colorsToRender,\n numberOfColorsInLine,\n focusOnMount,\n value,\n colorStyle,\n ColorIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n SelectedIndicatorIcon,\n colorSize,\n tooltipContentByColor,\n colorShape,\n showColorNameTooltip: showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerColorsGridProps,\n ref\n ) => {\n const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n focusOnMount,\n ref: ref as React.MutableRefObject<HTMLUListElement>,\n onItemClicked: onColorClicked,\n itemsCount: colorsToRender.length,\n numberOfItemsInLine: numberOfColorsInLine,\n getItemByIndex\n });\n\n return (\n <ul className={styles.colorsGrid} ref={ref} tabIndex={-1} id={id} data-testid={dataTestId}>\n {colorsToRender.map((color, index) => {\n return (\n <ColorPickerItemComponent\n key={color}\n color={color}\n onColorClicked={() => onSelectionAction(index)}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n isActive={index === activeIndex}\n colorSize={colorSize}\n tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n colorShape={colorShape}\n />\n );\n })}\n </ul>\n );\n }\n);\n"],"names":["calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","~~React","~~forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","id","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","activeIndex","onSelectionAction","createElement","className","styles","colorsGrid","tabIndex","map","ColorPickerItemComponent","key","isSelected","Array","isArray","includes","isActive","tooltipContent","undefined"],"mappings":"~~4PAUA~~,IAMMA,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,~~EAyDaM~~,~~EAAqFC~~,~~EAAMC~~,~~YACtG,~~SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,~~UACAnB~~,~~EAAqBQ~~,~~EAArBR~~,~~sBACAoB~~,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACAC,EAAEd,EAAFc,GACeC,EAAUf,EAAzB,eAIIgB,EAAiBC,GAAY,SAACC,GAAa,OAAKf,EAAee,KAAQ,CAACf,IAE9EgB,EAA2CC,EAA0B,CACnEf,aAAAA,EACAJ,IAAKA,EACLoB,cAAenB,EACfoB,WAAYnB,EAAeoB,OAC3BC,oBAAqBpB,EACrBY,eAAAA,IANMS,EAAWN,EAAXM,YAAaC,EAAiBP,EAAjBO,kBASrB,~~OACE5B~~,~~EAAA6B~~,cAAA,KAAA,CAAIC,UAAWC,EAAOC,~~WAAY7B~~,IAAKA,~~EAAK8B~~,UAAW,~~EAAGjB~~,GAAIA,EAAiB,cAAAC,GAC5EZ,~~EAAe6B~~,KAAI,SAACzC,~~EAAO2B~~,GAC1B,~~OACEpB~~,~~gBAACmC~~,EAAwB,CACvBC,IAAK3C,EACLA,MAAOA,~~EACPW~~,eAAgB,WAAA,OAAMwB,EAAkBR,EAAM,EAC9CT,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,~~EACvByB~~,WAAYC,MAAMC,~~QAAQ/B~~,GAASA,~~EAAMgC~~,SAAS/C,~~GAASe~~,~~IAAUf~~,EACrEgD,~~SAAUrB~~,IAAUO,EACpBd,UAAWA,~~EACX6B~~,~~eAAgB3B~~,~~EAAuBvB~~,EAAsBC,EAAOC,QAAyBiD,~~EAC7F7B~~,WAAYA,GAGjB,IAGP"}
1	+ {"version":3,"file":"ColorPickerColorsGrid.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { ColorPickerArrayValueOnly, ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { ColorShapes, ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { SubIcon, VibeComponentProps } from \"../../../../types\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { ColorStyle } from \"../../../../types\";\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n return color.replace(/-\|_/g, \" \").replace(/(?:^\|\\s)\\S/g, function (a) {\n return a.toUpperCase();\n });\n};\n\nconst calculateColorTooltip = (\n color: ColorPickerValueOnly,\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n if (tooltipContentByColor && tooltipContentByColor[color]) {\n return tooltipContentByColor[color];\n } else {\n return formatColorNameForTooltip(color);\n }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n /*\n Callback fired when a color is clicked.\n /\n onColorClicked?: (color: ColorPickerValueOnly) => void;\n /\n The list of colors to be displayed.\n /\n colorsToRender?: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The currently selected color or colors.\n /\n value?: string \| string[];\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The number of colors per row.\n /\n numberOfColorsInLine?: number;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n If true, displays a tooltip with the color name.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n (\n {\n onColorClicked,\n colorsToRender,\n numberOfColorsInLine,\n focusOnMount,\n value,\n colorStyle,\n ColorIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n SelectedIndicatorIcon,\n colorSize,\n tooltipContentByColor,\n colorShape,\n showColorNameTooltip: showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerColorsGridProps,\n ref: React.ForwardedRef<HTMLUListElement>\n ) => {\n const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n focusOnMount,\n ref: ref as React.MutableRefObject<HTMLUListElement>,\n onItemClicked: onColorClicked,\n itemsCount: colorsToRender.length,\n numberOfItemsInLine: numberOfColorsInLine,\n getItemByIndex\n });\n\n return (\n <ul className={styles.colorsGrid} ref={ref} tabIndex={-1} id={id} data-testid={dataTestId}>\n {colorsToRender.map((color, index) => {\n return (\n <ColorPickerItemComponent\n key={color}\n color={color}\n onColorClicked={() => onSelectionAction(index)}\n shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n isActive={index === activeIndex}\n colorSize={colorSize}\n tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n colorShape={colorShape}\n />\n );\n })}\n </ul>\n );\n }\n);\n\nexport default ColorPickerColorsGrid;\n"],"names":["calculateColorTooltip","color","tooltipContentByColor","replace","a","toUpperCase","formatColorNameForTooltip","ColorPickerColorsGrid","forwardRef","_ref","ref","onColorClicked","colorsToRender","numberOfColorsInLine","focusOnMount","value","colorStyle","ColorIndicatorIcon","shouldRenderIndicatorWithoutBackground","SelectedIndicatorIcon","colorSize","colorShape","showColorNameTooltip","id","dataTestId","getItemByIndex","useCallback","index","_useGridKeyboardNavig","useGridKeyboardNavigation","onItemClicked","itemsCount","length","numberOfItemsInLine","activeIndex","onSelectionAction","React","createElement","className","styles","colorsGrid","tabIndex","map","ColorPickerItemComponent","key","isSelected","Array","isArray","includes","isActive","tooltipContent","undefined"],"mappings":"4QAUA,IAMMA,EAAwB,SAC5BC,EACAC,GAEA,OAAIA,GAAyBA,EAAsBD,GAC1CC,EAAsBD,GAXC,SAACA,GACjC,OAAOA,EAAME,QAAQ,OAAQ,KAAKA,QAAQ,eAAe,SAAUC,GACjE,OAAOA,EAAEC,aACX,GACF,CASWC,CAA0BL,EAErC,EAyDMM,EAAwBC,GAC5B,SAAAC,EAkBEC,GACE,IAjBAC,EAAcF,EAAdE,eACAC,EAAcH,EAAdG,eACAC,EAAoBJ,EAApBI,qBACAC,EAAYL,EAAZK,aACAC,EAAKN,EAALM,MACAC,EAAUP,EAAVO,WACAC,EAAkBR,EAAlBQ,mBACAC,EAAsCT,EAAtCS,uCACAC,EAAqBV,EAArBU,sBACAC,EAASX,EAATW,UACAlB,EAAqBO,EAArBP,sBACAmB,EAAUZ,EAAVY,WACsBC,EAAoBb,EAA1Ca,qBACAC,EAAEd,EAAFc,GACeC,EAAUf,EAAzB,eAIIgB,EAAiBC,GAAY,SAACC,GAAa,OAAKf,EAAee,KAAQ,CAACf,IAE9EgB,EAA2CC,EAA0B,CACnEf,aAAAA,EACAJ,IAAKA,EACLoB,cAAenB,EACfoB,WAAYnB,EAAeoB,OAC3BC,oBAAqBpB,EACrBY,eAAAA,IANMS,EAAWN,EAAXM,YAAaC,EAAiBP,EAAjBO,kBASrB,OACEC,EAAAC,cAAA,KAAA,CAAIC,UAAWC,EAAOC,WAAY9B,IAAKA,EAAK+B,UAAW,EAAGlB,GAAIA,EAAiB,cAAAC,GAC5EZ,EAAe8B,KAAI,SAACzC,EAAO0B,GAC1B,OACES,gBAACO,EAAwB,CACvBC,IAAK3C,EACLA,MAAOA,EACPU,eAAgB,WAAA,OAAMwB,EAAkBR,EAAM,EAC9CT,uCAAwCD,GAAsBC,EAC9DF,WAAYA,EACZC,mBAAoBA,EACpBE,sBAAuBA,EACvB0B,WAAYC,MAAMC,QAAQhC,GAASA,EAAMiC,SAAS/C,GAASc,IAAUd,EACrEgD,SAAUtB,IAAUO,EACpBd,UAAWA,EACX8B,eAAgB5B,EAAuBtB,EAAsBC,EAAOC,QAAyBiD,EAC7F9B,WAAYA,GAGjB,IAGP"}

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

@@ -1,2 +1,2 @@
-var e={colorsGrid:"colorsGrid_6b67a58cb3"};!function(e){const n="s_id-0a5f0eb78ee4_3_40_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid_6b67a58cb3 {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}");export{e as default};
+var e={colorsGrid:"colorsGrid_f69383b4b4"};!function(e){const n="s_id-0a5f0eb78ee4_3_42_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".colorsGrid_f69383b4b4 {\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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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,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};
+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 v from"./ColorPickerClearButton.js";import I from"./ColorPickerColorsGrid.js";import{withStaticProps as h}from"../../../../types/withStaticProps.js";import S from"../../../../hooks/useMergeRef.js";import j from"../../../../../icons/dist/react/NoColor.js";var 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,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 CHANGED Viewed

	@@ -1 +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 /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent: 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}\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+FA,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,EACtBC,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"}
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\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { VibeComponentProps, SubIcon, withStaticProps } from \"../../../../types\";\nimport useMergeRef from \"../../../../hooks/useMergeRef\";\nimport { ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n /*\n The selected color(s).\n /\n value: ColorPickerValue;\n /\n Callback fired when the selected color(s) change.\n /\n onValueChange: (value: ColorPickerArrayValueOnly) => void;\n /\n The list of colors available for selection.\n /\n colorsList: ColorPickerArrayValueOnly;\n /\n Icon displayed as an indicator inside the color.\n /\n ColorIndicatorIcon?: SubIcon;\n /\n Icon displayed when a color is selected.\n /\n SelectedIndicatorIcon?: SubIcon;\n /\n Icon used for clearing the color selection.\n /\n NoColorIcon?: SubIcon;\n /\n The style applied to the colors.\n /\n colorStyle?: ColorStyle;\n /\n The size of the color items.\n /\n colorSize?: ColorPickerSizes;\n /\n The shape of the color items.\n /\n colorShape?: ColorShapes;\n /\n Custom tooltip content for specific colors.\n /\n tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n /\n Text displayed for the \"no color\" option.\n /\n noColorText?: string;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground?: boolean;\n /\n If true, treats the color list as a blacklist rather than a whitelist.\n /\n isBlackListMode?: boolean;\n /\n The number of colors displayed per row.\n /\n numberOfColorsInLine?: number;\n /\n If true, the first color is focused when the component mounts.\n /\n focusOnMount?: boolean;\n /\n If true, allows selecting multiple colors.\n /\n isMultiselect?: boolean;\n /\n Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n /\n forceUseRawColorList?: boolean;\n /\n Used to enable color name tooltip on each color in the component.\n * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n */\n showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n (\n {\n className,\n onValueChange,\n value,\n noColorText,\n colorStyle = \"regular\",\n ColorIndicatorIcon,\n SelectedIndicatorIcon,\n shouldRenderIndicatorWithoutBackground,\n NoColorIcon = NoColor,\n isBlackListMode = true,\n colorsList,\n isMultiselect,\n colorSize = BaseSizes.MEDIUM,\n numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n tooltipContentByColor = {},\n focusOnMount,\n colorShape = \"square\",\n forceUseRawColorList,\n showColorNameTooltip,\n id,\n \"data-testid\": dataTestId\n }: ColorPickerContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const gridRef = useRef(null);\n const mergedRef = useMergeRef(ref, gridRef);\n const colorsRef = useRef(null);\n const buttonRef = useRef(null);\n\n const onClearButton = useCallback(() => {\n onValueChange(null);\n }, [onValueChange]);\n\n const colorsToRender = useMemo(() => {\n if (forceUseRawColorList) {\n return colorsList;\n }\n return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n const onColorClicked = useCallback(\n (color: CONTENT_COLORS_VALUES) => {\n if (!isMultiselect) {\n onValueChange([color]);\n return;\n }\n const colors = [...value];\n if (colors.includes(color)) {\n const indexInSelected = colors.indexOf(color);\n if (indexInSelected > -1) {\n colors.splice(indexInSelected, 1);\n }\n } else {\n colors.push(color);\n }\n onValueChange(colors);\n },\n [isMultiselect, onValueChange, value]\n );\n\n const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n return (\n <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n <ColorPickerColorsGrid\n ref={colorsRef}\n onColorClicked={onColorClicked}\n colorsToRender={colorsToRender}\n numberOfColorsInLine={numberOfColorsInLine}\n focusOnMount={focusOnMount}\n value={value}\n colorStyle={colorStyle}\n ColorIndicatorIcon={ColorIndicatorIcon}\n shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n SelectedIndicatorIcon={SelectedIndicatorIcon}\n colorSize={colorSize}\n tooltipContentByColor={tooltipContentByColor}\n colorShape={colorShape}\n showColorNameTooltip={showColorNameTooltip}\n id={id}\n data-testid={dataTestId}\n />\n {noColorText && (\n <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n )}\n </GridKeyboardNavigationContext.Provider>\n </div>\n );\n }\n);\n\ninterface ColorPickerContentStaticProps {\n sizes: typeof BaseSizes;\n colorStyles: typeof ColorStyleEnum;\n colorSizes: typeof BaseSizes;\n colorShapes: typeof ColorShapesEnum;\n}\n\nexport default withStaticProps<ColorPickerContentProps, ColorPickerContentStaticProps>(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":"88BA+FA,IAwGeA,EAAAA,EAxGYC,GACzB,SAAAC,EAwBEC,GACE,IAvBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cACAC,EAAKJ,EAALI,MACAC,EAAWL,EAAXK,YAAWC,EAAAN,EACXO,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBR,EAAlBQ,mBACAC,EAAqBT,EAArBS,sBACAC,EAAsCV,EAAtCU,uCAAsCC,EAAAX,EACtCY,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAd,EACrBe,gBAAAA,OAAkB,IAAHD,GAAOA,EACtBE,EAAUhB,EAAVgB,WACAC,EAAajB,EAAbiB,cAAaC,EAAAlB,EACbmB,UAAAA,OAAS,IAAAD,EAAGE,EAAUC,OAAMH,EAAAI,EAAAtB,EAC5BuB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EAAAG,EAAAzB,EACvD0B,sBAAAA,OAAqB,IAAAD,EAAG,CAAE,EAAAA,EAC1BE,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAUC,EAAO,MACjBC,EAAYC,EAAYpC,EAAKiC,GAC7BI,EAAYH,EAAO,MACnBI,EAAYJ,EAAO,MAEnBK,EAAgBC,GAAY,WAChCtC,EAAc,KAChB,GAAG,CAACA,IAEEuC,EAAiBC,GAAQ,WAC7B,OAAIb,EACKd,EAEFD,EAAkB6B,EAAYC,EAAe7B,GAAc8B,EAAcD,EAAe7B,EAChG,GAAE,CAACc,EAAsBf,EAAiBC,IAErC+B,EAAiBN,GACrB,SAACO,GACC,GAAK/B,EAAL,CAIA,IAAMgC,EAAMC,EAAO9C,GACnB,GAAI6C,EAAOE,SAASH,GAAQ,CAC1B,IAAMI,EAAkBH,EAAOI,QAAQL,GACnCI,GAAmB,GACrBH,EAAOK,OAAOF,EAAiB,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,EACtBC,GAAIA,EAAE,cACOC,IAEd5B,GACC0D,EAAAC,cAACM,EAAsB,CAACC,KAAM3D,EAAa4D,QAAShC,EAAeiC,KAAMpE,EAAaJ,IAAKsC,KAKrG,IAUyG,CACzGmC,MAAOtD,EACPuD,YAAaC,EACbC,WAAYzD,EACZ0D,YAAaC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport Clickable from \"../../../Clickable/Clickable\";\nimport { ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { ColorShapes, ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { SubIcon, ~~VibeComponent,~~ VibeComponentProps, ElementContent, ColorStyle } from \"../../../../types\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent: ~~VibeComponent<ColorPickerItemComponentProps>~~ = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n ariaLabel={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex=\"-1\"\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","ariaLabel","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"gvBA+DMA,IAAAA,~~EAAyEC~~,~~GAC7E~~,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,EAAAC,cAACe,EAAS,CACRC,IAAKlC,EACLmC,UAAWxD,EACX0C,UAAWC,EAAGC,EAAOa,UAAWC,EAASd,EAAQe,EAAU,mBAAqBlD,IAAWqC,EAAA,CAAA,EACxFF,EAAOgB,kBAAoBxD,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,EACTsC,SAAS,KACTC,YAAa,SAAAjC,GAAC,OAAIA,EAAEkC,gBAAgB,GAEpCzB,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,EAAOoB,uBAAwBjC,MAAOM,GACtDD,GACCE,EAAAC,cAAC0B,EAAI,CACHC,KAAM1D,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,EAAOuB,gBAAkB/D,IAE5BgE,kBACA,OAOhB"}
1	+ {"version":3,"file":"ColorPickerItemComponent.js","sources":["../../../../../../src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport Clickable from \"../../../Clickable/Clickable\";\nimport { ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { ColorShapes, ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { SubIcon, VibeComponentProps, ElementContent, ColorStyle } from \"../../../../types\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n /*\n The color value of the item.\n /\n color: ColorPickerValueOnly;\n /\n Callback fired when the color is clicked.\n /\n onColorClicked: (color: ColorPickerValueOnly) => void;\n /\n The style applied to the color.\n /\n colorStyle: ColorStyle;\n /\n If true, renders the color indicator without a background.\n /\n shouldRenderIndicatorWithoutBackground: boolean;\n /\n Icon displayed inside the color item.\n /\n ColorIndicatorIcon: SubIcon;\n /\n Icon displayed when the color is selected.\n /\n SelectedIndicatorIcon: SubIcon;\n /\n If true, the color is marked as selected.\n /\n isSelected: boolean;\n /\n The size of the color item.\n /\n colorSize: ColorPickerSizes;\n /\n Tooltip content for the color item.\n /\n tooltipContent: ElementContent;\n /\n If true, the color item is currently active.\n /\n isActive: boolean;\n /\n The shape of the color item.\n */\n colorShape: ColorShapes;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n (\n {\n color,\n onColorClicked,\n colorStyle = \"regular\",\n shouldRenderIndicatorWithoutBackground,\n ColorIndicatorIcon,\n SelectedIndicatorIcon = ColorIndicatorIcon,\n isSelected,\n colorSize,\n tooltipContent,\n isActive,\n colorShape,\n \"data-testid\": dataTestId\n }: ColorPickerItemComponentProps,\n _ref: React.ForwardedRef<HTMLElement>\n ) => {\n const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n const itemRef = useRef<HTMLDivElement>(null);\n\n const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n useEffect(() => {\n if (!itemRef?.current \|\| shouldRenderIndicatorWithoutBackground \|\| !isMondayColor) return;\n const item = itemRef.current;\n const setHoverColor = (e: MouseEvent) => {\n if (colorStyle === \"selected\") {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n } else {\n (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n }\n };\n const restoreToOriginalColor = (e: MouseEvent) => {\n (e.target as HTMLDivElement).style.background = colorAsStyle;\n };\n item.addEventListener(\"mouseenter\", setHoverColor, false);\n item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n return () => {\n item.removeEventListener(\"mouseenter\", setHoverColor, false);\n item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n };\n }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n const shouldRenderIcon = isSelected \|\| ColorIndicatorIcon;\n const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n return (\n <Tooltip content={tooltipContent}>\n <li\n className={cx(styles.itemWrapper, {\n [styles.selectedColor]: isSelected,\n [styles.active]: isActive,\n [styles.circle]: colorShape === \"circle\"\n })}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n >\n <div className={cx(styles.feedbackIndicator)} />\n <Clickable\n ref={itemRef}\n ariaLabel={color}\n className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n })}\n style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n onClick={onClick}\n tabIndex=\"-1\"\n onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n >\n <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n {shouldRenderIcon && (\n <Icon\n icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n className={cx({\n [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n })}\n ignoreFocusStyle\n />\n )}\n </div>\n </Clickable>\n </li>\n </Tooltip>\n );\n }\n);\n\nexport default ColorPickerItemComponent;\n"],"names":["ColorPickerItemComponent","forwardRef","_ref2","_ref","color","onColorClicked","_ref2$colorStyle","colorStyle","shouldRenderIndicatorWithoutBackground","ColorIndicatorIcon","_ref2$SelectedIndicat","SelectedIndicatorIcon","isSelected","colorSize","tooltipContent","isActive","colorShape","dataTestId","isMondayColor","useMemo","contentColors","includes","colorAsStyle","ColorUtils","getMondayColorAsStyle","itemRef","useRef","onClick","useCallback","useEffect","current","item","setHoverColor","e","target","style","background","restoreToOriginalColor","addEventListener","removeEventListener","shouldRenderIcon","colorIndicatorWrapperStyle","React","createElement","Tooltip","content","className","cx","styles","itemWrapper","_defineProperty","selectedColor","active","circle","getTestId","ComponentDefaultTestId","COLOR_PICKER_ITEM","feedbackIndicator","Clickable","ref","ariaLabel","colorItem","getStyle","camelCase","colorItemTextMode","tabIndex","onMouseDown","preventDefault","colorIndicatorWrapper","Icon","icon","colorIconWhite","ignoreFocusStyle"],"mappings":"gvBA+DMA,IAAAA,EAA2BC,GAC/B,SAAAC,EAeEC,GACE,IAdAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAsCN,EAAtCM,uCACAC,EAAkBP,EAAlBO,mBAAkBC,EAAAR,EAClBS,sBAAAA,OAAwBF,IAAHC,EAAGD,EAAkBC,EAC1CE,EAAUV,EAAVU,WACAC,EAASX,EAATW,UACAC,EAAcZ,EAAdY,eACAC,EAAQb,EAARa,SACAC,EAAUd,EAAVc,WACeC,EAAUf,EAAzB,eAIIgB,EAAgBC,GAAQ,WAAA,OAAOC,EAAoCC,SAASjB,EAAM,GAAE,CAACA,IACrFkB,EAAeJ,EAAgBK,EAAWC,sBAAsBpB,EAAOG,GAAcH,EACrFqB,EAAUC,EAAuB,MAEjCC,EAAUC,GAAY,WAAA,OAAMvB,EAAeD,EAAM,GAAE,CAACC,EAAgBD,IAE1EyB,GAAU,WACR,IAAKJ,aAAA,EAAAA,EAASK,WAAWtB,GAA2CU,EAApE,CACA,IAAMa,EAAON,EAAQK,QACfE,EAAgB,SAACC,GAElBA,EAAEC,OAA0BC,MAAMC,WAAab,EAAWC,sBAAsBpB,EADhE,aAAfG,EACsF,UAEA,UAGtF8B,EAAyB,SAACJ,GAC7BA,EAAEC,OAA0BC,MAAMC,WAAad,GAKlD,OAHAS,EAAKO,iBAAiB,aAAcN,GAAe,GACnDD,EAAKO,iBAAiB,aAAcD,GAAwB,GAErD,WACLN,EAAKQ,oBAAoB,aAAcP,GAAe,GACtDD,EAAKQ,oBAAoB,aAAcF,GAAwB,GAjBkB,CAmBrF,GAAG,CAACjC,EAAOkB,EAAcf,EAAYW,EAAeO,EAASjB,IAE7D,IAAMgC,EAAmB5B,GAAcH,EACjCgC,EAA6BjC,EAAyC,CAAEJ,MAAOkB,GAAiB,GACtG,OACEoB,EAACC,cAAAC,EAAQ,CAAAC,QAAS/B,GAChB4B,EAAAC,cAAA,KAAA,CACEG,UAAWC,EAAGC,EAAOC,YAAWC,EAAAA,EAAAA,EAAA,CAAA,EAC7BF,EAAOG,cAAgBvC,GACvBoC,EAAOI,OAASrC,GAChBiC,EAAOK,OAAwB,WAAfrC,IACjB,cACWC,GAAcqC,EAAUC,EAAuBC,kBAAmBpD,IAE/EsC,EAAKC,cAAA,MAAA,CAAAG,UAAWC,EAAGC,EAAOS,qBAC1Bf,EAAAC,cAACe,EAAS,CACRC,IAAKlC,EACLmC,UAAWxD,EACX0C,UAAWC,EAAGC,EAAOa,UAAWC,EAASd,EAAQe,EAAU,mBAAqBlD,IAAWqC,EAAA,CAAA,EACxFF,EAAOgB,kBAAoBxD,IAE9B2B,MAAO,CAAEC,WAAY5B,EAAyC,cAAgBc,GAC9EK,QAASA,EACTsC,SAAS,KACTC,YAAa,SAAAjC,GAAC,OAAIA,EAAEkC,gBAAgB,GAEpCzB,EAAAC,cAAA,MAAA,CAAKG,UAAWC,EAAGC,EAAOoB,uBAAwBjC,MAAOM,GACtDD,GACCE,EAAAC,cAAC0B,EAAI,CACHC,KAAM1D,EAAaD,EAAwBF,EAC3CqC,UAAWC,EAAEG,EACVF,CAAAA,EAAAA,EAAOuB,gBAAkB/D,IAE5BgE,kBACA,OAOhB"}

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

@@ -1,2 +1,2 @@
-var e={itemWrapper:"itemWrapper_67371efad0",circle:"circle_b4e8df9341",feedbackIndicator:"feedbackIndicator_d38283c746",active:"active_30527a347c",selectedColor:"selectedColor_7e67fc7bc7",colorItem:"colorItem_875083f06b",colorIndicatorWrapper:"colorIndicatorWrapper_7fcc0e1c74",colorItemSizeSmall:"colorItemSizeSmall_b47b0936d7",colorItemSizeMedium:"colorItemSizeMedium_111b8652fd",colorItemSizeLarge:"colorItemSizeLarge_a528c2e6f8",colorItemTextMode:"colorItemTextMode_75adfc62d4",colorIconWhite:"colorIconWhite_eb8b9d6ea0"};!function(e){const r="s_id-2198989e565d_3_40_0";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_67371efad0 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_67371efad0.circle_b4e8df9341 {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_67371efad0 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_67371efad0 .feedbackIndicator_d38283c746 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_67371efad0:focus,\n.itemWrapper_67371efad0:focus-visible,\n.itemWrapper_67371efad0.active_30527a347c {\n  outline: none;\n}\n\n.itemWrapper_67371efad0:focus .feedbackIndicator_d38283c746:before,\n.itemWrapper_67371efad0:focus-visible .feedbackIndicator_d38283c746:before,\n.itemWrapper_67371efad0.active_30527a347c .feedbackIndicator_d38283c746: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_67371efad0:focus .feedbackIndicator_d38283c746:after,\n.itemWrapper_67371efad0:focus-visible .feedbackIndicator_d38283c746:after,\n.itemWrapper_67371efad0.active_30527a347c .feedbackIndicator_d38283c746: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_67371efad0:hover:not(.active_30527a347c):not(.selectedColor_7e67fc7bc7) .feedbackIndicator_d38283c746 {\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_67371efad0 .colorItem_875083f06b {\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_67371efad0 .colorItem_875083f06b .colorIndicatorWrapper_7fcc0e1c74 {\n  margin-top: 3px;\n}\n\n.itemWrapper_67371efad0 .colorItem_875083f06b.colorItemSizeSmall_b47b0936d7 {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_67371efad0 .colorItem_875083f06b.colorItemSizeMedium_111b8652fd {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_67371efad0 .colorItem_875083f06b.colorItemSizeLarge_a528c2e6f8 {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_67371efad0.selectedColor_7e67fc7bc7 {\n  position: relative;\n}\n\n.itemWrapper_67371efad0.selectedColor_7e67fc7bc7: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_67371efad0.selectedColor_7e67fc7bc7 .feedbackIndicator_d38283c746:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_67371efad0 .colorItemTextMode_75adfc62d4:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_67371efad0 .colorIconWhite_eb8b9d6ea0 {\n  color: var(--color-snow_white);\n}');export{e as default};
+var e={itemWrapper:"itemWrapper_a24a0d48b4",circle:"circle_51c94b744d",feedbackIndicator:"feedbackIndicator_b2eeaa41d6",active:"active_0783e7438e",selectedColor:"selectedColor_1288542e42",colorItem:"colorItem_90e3f5dc2b",colorIndicatorWrapper:"colorIndicatorWrapper_7ee4e2124b",colorItemSizeSmall:"colorItemSizeSmall_db76469e1b",colorItemSizeMedium:"colorItemSizeMedium_db90905b8f",colorItemSizeLarge:"colorItemSizeLarge_5895f2bdea",colorItemTextMode:"colorItemTextMode_cc9a4105bd",colorIconWhite:"colorIconWhite_c3843698d0"};!function(e){const r="s_id-2198989e565d_3_42_0";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_a24a0d48b4 {\n  --border-radius-multiplier: 1;\n}\n\n.itemWrapper_a24a0d48b4.circle_51c94b744d {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n.itemWrapper_a24a0d48b4 {\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper_a24a0d48b4 .feedbackIndicator_b2eeaa41d6 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper_a24a0d48b4:focus,\n.itemWrapper_a24a0d48b4:focus-visible,\n.itemWrapper_a24a0d48b4.active_0783e7438e {\n  outline: none;\n}\n\n.itemWrapper_a24a0d48b4:focus .feedbackIndicator_b2eeaa41d6:before,\n.itemWrapper_a24a0d48b4:focus-visible .feedbackIndicator_b2eeaa41d6:before,\n.itemWrapper_a24a0d48b4.active_0783e7438e .feedbackIndicator_b2eeaa41d6: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_a24a0d48b4:focus .feedbackIndicator_b2eeaa41d6:after,\n.itemWrapper_a24a0d48b4:focus-visible .feedbackIndicator_b2eeaa41d6:after,\n.itemWrapper_a24a0d48b4.active_0783e7438e .feedbackIndicator_b2eeaa41d6: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_a24a0d48b4:hover:not(.active_0783e7438e):not(.selectedColor_1288542e42) .feedbackIndicator_b2eeaa41d6 {\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_a24a0d48b4 .colorItem_90e3f5dc2b {\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_a24a0d48b4 .colorItem_90e3f5dc2b .colorIndicatorWrapper_7ee4e2124b {\n  margin-top: 3px;\n}\n\n.itemWrapper_a24a0d48b4 .colorItem_90e3f5dc2b.colorItemSizeSmall_db76469e1b {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper_a24a0d48b4 .colorItem_90e3f5dc2b.colorItemSizeMedium_db90905b8f {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper_a24a0d48b4 .colorItem_90e3f5dc2b.colorItemSizeLarge_5895f2bdea {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper_a24a0d48b4.selectedColor_1288542e42 {\n  position: relative;\n}\n\n.itemWrapper_a24a0d48b4.selectedColor_1288542e42: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_a24a0d48b4.selectedColor_1288542e42 .feedbackIndicator_b2eeaa41d6:before {\n  /* hide the outer border from the "active" feedback indicator */\n  display: none;\n}\n\n.itemWrapper_a24a0d48b4 .colorItemTextMode_cc9a4105bd:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper_a24a0d48b4 .colorIconWhite_c3843698d0 {\n  color: var(--color-snow_white);\n}');export{e as default};
 //# sourceMappingURL=ColorPickerItemComponent.module.scss.js.map