@vibe/core 4.5.12 → 4.5.13

package/dist/hooks/useFullKeyboardListeners.d.ts

@@ -1,20 +0,0 @@
-import { type MutableRefObject } from "react";
-import { type KeyboardEventCallback } from "../types/events";
-import { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS } from "@vibe/shared";
-export { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS };
-export declare const SELECTION_KEYS: string[];
-export declare const ENTER_KEYS: string[];
-export declare const ESCAPE_KEYS: string[];
-export declare const END_KEYS: string[];
-export declare const HOME_KEYS: string[];
-export default function useFullKeyboardListeners({ ref, // the reference for the component that listens to keyboard
-onSelectionKey, onArrowNavigation, onEscape, onHome, onEnd, useDocumentEventListeners, focusOnMount }: {
-    ref: MutableRefObject<HTMLElement>;
-    onSelectionKey: KeyboardEventCallback;
-    onArrowNavigation: (type: NavDirections) => void;
-    onEscape: KeyboardEventCallback;
-    onHome?: KeyboardEventCallback;
-    onEnd?: KeyboardEventCallback;
-    useDocumentEventListeners?: boolean;
-    focusOnMount: boolean;
-}): void;

package/dist/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.d.ts

@@ -1,20 +0,0 @@
-import { NavDirections } from "../useFullKeyboardListeners";
-export declare function getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount }: {
-    direction: NavDirections;
-    numberOfItemsInLine: number;
-    itemsCount: number;
-}): number;
-export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes, circularNavigation }: {
-    activeIndex: number;
-    itemsCount: number;
-    numberOfItemsInLine: number;
-    direction: NavDirections;
-    disabledIndexes?: number[];
-    circularNavigation?: boolean;
-}): {
-    isOutbound: boolean;
-    nextIndex?: undefined;
-} | {
-    isOutbound: boolean;
-    nextIndex: number;
-};

package/dist/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -1,42 +0,0 @@
-import { type MutableRefObject, type ReactElement } from "react";
-/**
- * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.
- * @param {Object} options
- * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard
- * @param {number} options.itemsCount - the number of items
- * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid
- * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with "Enter".
- * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index
- * @param {"directional" | "first"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.
- *   - "directional": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.
- *   - "first": Always focuses the first item.
- * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted
- * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with "options.focusOnMount".
- * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.
- * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid
- * @returns {useGridKeyboardNavigationResult}
- *
- * @typedef useGridKeyboardNavigationResult
- * @property {number} activeIndex - the currently active index
- * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See "options.focusItemIndexOnMount".
- * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.
- * It should be called with the selected item's index. Use this callback for onClick handlers, for example.
- * The "isKeyboardAction" can be used to indicate a keyboard selection, which will affect the currently active index.
- */
-export default function useGridKeyboardNavigation({ ref, itemsCount, numberOfItemsInLine, onItemClicked, // the callback to call when an item is selected
-entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes, circularNavigation }: {
-    ref: MutableRefObject<HTMLElement>;
-    itemsCount: number;
-    numberOfItemsInLine: number;
-    onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;
-    entryFocusStrategy?: "directional" | "first";
-    getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;
-    focusOnMount?: boolean;
-    focusItemIndexOnMount?: number;
-    disabledIndexes?: number[];
-    circularNavigation?: boolean;
-}): {
-    activeIndex: number;
-    onSelectionAction: (index: number, isKeyboardAction?: boolean) => void;
-    isInitialActiveState: boolean;
-};

package/dist/mocked_classnames/components/ColorPicker/ColorPicker.d.ts

@@ -1,80 +0,0 @@
-import React from "react";
-import { type ColorShapes, type ColorPickerSizes, type ColorPickerValue, type ColorPickerArrayValueOnly } from "./ColorPicker.types";
-import { type VibeComponentProps } from "../../types";
-import { type SubIcon } from "@vibe/icon";
-import { type ColorStyle } from "../../types/Colors";
-export interface ColorPickerProps extends VibeComponentProps {
-    /**
-     * The selected color(s).
-     */
-    value?: ColorPickerValue;
-    /**
-     * Callback fired when the selected color(s) change.
-     */
-    onSave?: (value: ColorPickerArrayValueOnly) => void;
-    /**
-     * Icon displayed as an indicator inside the color.
-     */
-    ColorIndicatorIcon?: SubIcon;
-    /**
-     * Icon displayed when a color is selected.
-     */
-    SelectedIndicatorIcon?: SubIcon;
-    /**
-     * Icon used for clearing the color selection.
-     */
-    NoColorIcon?: SubIcon;
-    /**
-     * The style applied to the colors.
-     */
-    colorStyle?: ColorStyle;
-    /**
-     * Text displayed for the "no color" option.
-     */
-    noColorText?: string;
-    /**
-     * If true, renders the color indicator without a background.
-     */
-    shouldRenderIndicatorWithoutBackground?: boolean;
-    /**
-     * If true, treats the color list as a blacklist rather than a whitelist.
-     */
-    isBlackListMode?: boolean;
-    /**
-     * The list of colors available for selection.
-     */
-    colorsList?: ColorPickerArrayValueOnly;
-    /**
-     * If true, allows selecting multiple colors.
-     */
-    isMultiselect?: boolean;
-    /**
-     * The size of the color items.
-     */
-    colorSize?: ColorPickerSizes;
-    /**
-     * The number of colors displayed per row.
-     */
-    numberOfColorsInLine?: number;
-    /**
-     * If true, the first color is focused when the component mounts.
-     */
-    focusOnMount?: boolean;
-    /**
-     * The shape of the color items.
-     */
-    colorShape?: ColorShapes;
-    /**
-     * 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.
-     * Usually, only "monday colors" will be rendered (unless blacklist mode is used). This flag will override this behavior.
-     */
-    forceUseRawColorList?: boolean;
-    /**
-     * Used to enable color name tooltip on each color in the component.
-     * When "tooltipContentByColor" is supplied, it will override the color name tooltip.
-     *
-     */
-    showColorNameTooltip?: boolean;
-}
-declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLElement>>;
-export default ColorPicker;

package/dist/mocked_classnames/components/ColorPicker/ColorPicker.types.d.ts

@@ -1,6 +0,0 @@
-import { type CONTENT_COLORS_VALUES } from "../../utils/colors-vars-map";
-export type ColorShapes = "square" | "circle";
-export type ColorPickerSizes = "small" | "medium" | "large";
-export type ColorPickerValueOnly = CONTENT_COLORS_VALUES | string;
-export type ColorPickerArrayValueOnly = CONTENT_COLORS_VALUES[] | string[];
-export type ColorPickerValue = ColorPickerValueOnly | ColorPickerArrayValueOnly;

package/dist/mocked_classnames/components/ColorPicker/ColorPickerConstants.d.ts

@@ -1,5 +0,0 @@
-import { type BaseSizes } from "../../constants/sizes";
-export declare const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;
-export declare const COLOR_SIZES: Record<BaseSizes, number>;
-export declare const COLOR_PADDING = 8;
-export declare const DIALOG_WIDTH_PADDING = 24;

package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import { type VibeComponentProps } from "../../../../types";
-import { type SubIcon } from "@vibe/icon";
-export interface ColorPickerClearButtonProps extends VibeComponentProps {
-    /**
-     * Callback fired when the clear button is clicked.
-     */
-    onClick: () => void;
-    /**
-     * The text displayed inside the button.
-     */
-    text?: string;
-    /**
-     * The icon displayed inside the button.
-     */
-    Icon: SubIcon;
-}
-declare const ColorPickerClearButton: React.ForwardRefExoticComponent<ColorPickerClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ColorPickerClearButton;

package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.d.ts

@@ -1,63 +0,0 @@
-import React from "react";
-import { type CONTENT_COLORS_VALUES } from "../../../../utils/colors-vars-map";
-import { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from "../../ColorPicker.types";
-import { type ColorShapes, type ColorPickerSizes } from "../../ColorPicker.types";
-import { type VibeComponentProps } from "../../../../types";
-import { type SubIcon } from "@vibe/icon";
-import { type ColorStyle } from "../../../../types";
-export interface ColorPickerColorsGridProps extends VibeComponentProps {
-    /**
-     * Callback fired when a color is clicked.
-     */
-    onColorClicked?: (color: ColorPickerValueOnly) => void;
-    /**
-     * The list of colors to be displayed.
-     */
-    colorsToRender?: ColorPickerArrayValueOnly;
-    /**
-     * Icon displayed as an indicator inside the color.
-     */
-    ColorIndicatorIcon?: SubIcon;
-    /**
-     * Icon displayed when a color is selected.
-     */
-    SelectedIndicatorIcon?: SubIcon;
-    /**
-     * The style applied to the colors.
-     */
-    colorStyle?: ColorStyle;
-    /**
-     * The currently selected color or colors.
-     */
-    value?: string | string[];
-    /**
-     * If true, renders the color indicator without a background.
-     */
-    shouldRenderIndicatorWithoutBackground?: boolean;
-    /**
-     * The size of the color items.
-     */
-    colorSize?: ColorPickerSizes;
-    /**
-     * The number of colors per row.
-     */
-    numberOfColorsInLine?: number;
-    /**
-     * Custom tooltip content for specific colors.
-     */
-    tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;
-    /**
-     * If true, the first color is focused when the component mounts.
-     */
-    focusOnMount?: boolean;
-    /**
-     * The shape of the color items.
-     */
-    colorShape?: ColorShapes;
-    /**
-     * If true, displays a tooltip with the color name.
-     */
-    showColorNameTooltip?: boolean;
-}
-declare const ColorPickerColorsGrid: React.ForwardRefExoticComponent<ColorPickerColorsGridProps & React.RefAttributes<HTMLUListElement>>;
-export default ColorPickerColorsGrid;

package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.d.ts

@@ -1,84 +0,0 @@
-import React from "react";
-import { type CONTENT_COLORS_VALUES } from "../../../../utils/colors-vars-map";
-import { type ColorShapes, type ColorPickerSizes, type ColorPickerValue, type ColorPickerArrayValueOnly } from "../../ColorPicker.types";
-import { type VibeComponentProps } from "../../../../types";
-import { type SubIcon } from "@vibe/icon";
-import { type ColorStyle } from "../../../../types";
-export interface ColorPickerContentProps extends VibeComponentProps {
-    /**
-     * The selected color(s).
-     */
-    value: ColorPickerValue;
-    /**
-     * Callback fired when the selected color(s) change.
-     */
-    onValueChange: (value: ColorPickerArrayValueOnly) => void;
-    /**
-     * The list of colors available for selection.
-     */
-    colorsList: ColorPickerArrayValueOnly;
-    /**
-     * Icon displayed as an indicator inside the color.
-     */
-    ColorIndicatorIcon?: SubIcon;
-    /**
-     * Icon displayed when a color is selected.
-     */
-    SelectedIndicatorIcon?: SubIcon;
-    /**
-     * Icon used for clearing the color selection.
-     */
-    NoColorIcon?: SubIcon;
-    /**
-     * The style applied to the colors.
-     */
-    colorStyle?: ColorStyle;
-    /**
-     * The size of the color items.
-     */
-    colorSize?: ColorPickerSizes;
-    /**
-     * The shape of the color items.
-     */
-    colorShape?: ColorShapes;
-    /**
-     * Custom tooltip content for specific colors.
-     */
-    tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;
-    /**
-     * Text displayed for the "no color" option.
-     */
-    noColorText?: string;
-    /**
-     * If true, renders the color indicator without a background.
-     */
-    shouldRenderIndicatorWithoutBackground?: boolean;
-    /**
-     * If true, treats the color list as a blacklist rather than a whitelist.
-     */
-    isBlackListMode?: boolean;
-    /**
-     * The number of colors displayed per row.
-     */
-    numberOfColorsInLine?: number;
-    /**
-     * If true, the first color is focused when the component mounts.
-     */
-    focusOnMount?: boolean;
-    /**
-     * If true, allows selecting multiple colors.
-     */
-    isMultiselect?: boolean;
-    /**
-     * 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.
-     * Usually, only "monday colors" will be rendered (unless blacklist mode is used). This flag will override this behavior.
-     */
-    forceUseRawColorList?: boolean;
-    /**
-     * Used to enable color name tooltip on each color in the component.
-     * When "tooltipContentByColor" is supplied, it will override the color name tooltip.
-     */
-    showColorNameTooltip?: boolean;
-}
-declare const ColorPickerContent: React.ForwardRefExoticComponent<ColorPickerContentProps & React.RefAttributes<HTMLDivElement>>;
-export default ColorPickerContent;

package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.d.ts

@@ -1,57 +0,0 @@
-import React from "react";
-import { type ColorPickerValueOnly } from "../../ColorPicker.types";
-import { type ColorShapes, type ColorPickerSizes } from "../../ColorPicker.types";
-import { type VibeComponentProps, type ElementContent, type ColorStyle } from "../../../../types";
-import { type SubIcon } from "@vibe/icon";
-export interface ColorPickerItemComponentProps extends VibeComponentProps {
-    /**
-     * The color value of the item.
-     */
-    color: ColorPickerValueOnly;
-    /**
-     * Callback fired when the color is clicked.
-     */
-    onColorClicked: (color: ColorPickerValueOnly) => void;
-    /**
-     * The style applied to the color.
-     */
-    colorStyle: ColorStyle;
-    /**
-     * If true, renders the color indicator without a background.
-     */
-    shouldRenderIndicatorWithoutBackground: boolean;
-    /**
-     * Icon displayed inside the color item.
-     */
-    ColorIndicatorIcon: SubIcon;
-    /**
-     * Icon displayed when the color is selected.
-     */
-    SelectedIndicatorIcon: SubIcon;
-    /**
-     * If true, the color is marked as selected.
-     */
-    isSelected: boolean;
-    /**
-     * The size of the color item.
-     */
-    colorSize: ColorPickerSizes;
-    /**
-     * Tooltip content for the color item.
-     */
-    tooltipContent: ElementContent;
-    /**
-     * If true, the color item is currently active.
-     */
-    isActive: boolean;
-    /**
-     * The shape of the color item.
-     */
-    colorShape: ColorShapes;
-    /**
-     * Human-readable label for the color, used for screen reader announcements.
-     */
-    colorAriaLabel: string;
-}
-declare const ColorPickerItemComponent: React.ForwardRefExoticComponent<ColorPickerItemComponentProps & React.RefAttributes<HTMLElement>>;
-export default ColorPickerItemComponent;

package/dist/mocked_classnames/components/ColorPicker/index.d.ts

@@ -1,3 +0,0 @@
-export { default as ColorPicker, type ColorPickerProps } from "./ColorPicker";
-export { default as ColorPickerContent, type ColorPickerContentProps } from "./components/ColorPickerContent/ColorPickerContent";
-export * from "./ColorPicker.types";

package/dist/mocked_classnames/components/ColorPicker/services/ColorPickerStyleService.d.ts

@@ -1,3 +0,0 @@
-import { type BaseSizes } from "../../../constants/sizes";
-export declare const calculateColorPickerWidth: (colorSize: BaseSizes, numberOfColorsInLine: number) => number;
-export declare const calculateColorPickerDialogWidth: (colorSize: BaseSizes, numberOfColorsInLine: number) => number;

package/dist/mocked_classnames/hooks/useFullKeyboardListeners.d.ts

@@ -1,20 +0,0 @@
-import { type MutableRefObject } from "react";
-import { type KeyboardEventCallback } from "../types/events";
-import { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS } from "@vibe/shared";
-export { NavDirections, ARROW_DOWN_KEYS, ARROW_UP_KEYS, ARROW_RIGHT_KEYS, ARROW_LEFT_KEYS };
-export declare const SELECTION_KEYS: string[];
-export declare const ENTER_KEYS: string[];
-export declare const ESCAPE_KEYS: string[];
-export declare const END_KEYS: string[];
-export declare const HOME_KEYS: string[];
-export default function useFullKeyboardListeners({ ref, // the reference for the component that listens to keyboard
-onSelectionKey, onArrowNavigation, onEscape, onHome, onEnd, useDocumentEventListeners, focusOnMount }: {
-    ref: MutableRefObject<HTMLElement>;
-    onSelectionKey: KeyboardEventCallback;
-    onArrowNavigation: (type: NavDirections) => void;
-    onEscape: KeyboardEventCallback;
-    onHome?: KeyboardEventCallback;
-    onEnd?: KeyboardEventCallback;
-    useDocumentEventListeners?: boolean;
-    focusOnMount: boolean;
-}): void;

package/dist/mocked_classnames/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.d.ts

@@ -1,20 +0,0 @@
-import { NavDirections } from "../useFullKeyboardListeners";
-export declare function getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount }: {
-    direction: NavDirections;
-    numberOfItemsInLine: number;
-    itemsCount: number;
-}): number;
-export declare function calcActiveIndexAfterArrowNavigation({ activeIndex, itemsCount, numberOfItemsInLine, direction, disabledIndexes, circularNavigation }: {
-    activeIndex: number;
-    itemsCount: number;
-    numberOfItemsInLine: number;
-    direction: NavDirections;
-    disabledIndexes?: number[];
-    circularNavigation?: boolean;
-}): {
-    isOutbound: boolean;
-    nextIndex?: undefined;
-} | {
-    isOutbound: boolean;
-    nextIndex: number;
-};

package/dist/mocked_classnames/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -1,42 +0,0 @@
-import { type MutableRefObject, type ReactElement } from "react";
-/**
- * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.
- * @param {Object} options
- * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard
- * @param {number} options.itemsCount - the number of items
- * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid
- * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with "Enter".
- * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index
- * @param {"directional" | "first"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.
- *   - "directional": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.
- *   - "first": Always focuses the first item.
- * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted
- * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with "options.focusOnMount".
- * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.
- * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid
- * @returns {useGridKeyboardNavigationResult}
- *
- * @typedef useGridKeyboardNavigationResult
- * @property {number} activeIndex - the currently active index
- * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See "options.focusItemIndexOnMount".
- * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.
- * It should be called with the selected item's index. Use this callback for onClick handlers, for example.
- * The "isKeyboardAction" can be used to indicate a keyboard selection, which will affect the currently active index.
- */
-export default function useGridKeyboardNavigation({ ref, itemsCount, numberOfItemsInLine, onItemClicked, // the callback to call when an item is selected
-entryFocusStrategy, getItemByIndex, focusOnMount, focusItemIndexOnMount, disabledIndexes, circularNavigation }: {
-    ref: MutableRefObject<HTMLElement>;
-    itemsCount: number;
-    numberOfItemsInLine: number;
-    onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;
-    entryFocusStrategy?: "directional" | "first";
-    getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;
-    focusOnMount?: boolean;
-    focusItemIndexOnMount?: number;
-    disabledIndexes?: number[];
-    circularNavigation?: boolean;
-}): {
-    activeIndex: number;
-    onSelectionAction: (index: number, isKeyboardAction?: boolean) => void;
-    isInitialActiveState: boolean;
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { type BaseSizes } from \"../../constants\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport {\n  type ColorShapes,\n  type ColorPickerSizes,\n  type ColorPickerValue,\n  type ColorPickerArrayValueOnly\n} from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value?: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Icon used for clearing the color selection.\n   */\n  NoColorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * Text displayed for the \"no color\" option.\n   */\n  noColorText?: string;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * If true, treats the color list as a blacklist rather than a whitelist.\n   */\n  isBlackListMode?: boolean;\n  /**\n   * The list of colors available for selection.\n   */\n  colorsList?: ColorPickerArrayValueOnly;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors displayed per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n   * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n   */\n  forceUseRawColorList?: boolean;\n  /**\n   * Used to enable color name tooltip on each color in the component.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   *\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n  (\n    {\n      className,\n      onSave = NOOP,\n      value = \"\",\n      noColorText,\n      colorStyle = \"regular\",\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      NoColorIcon = NoColor,\n      isBlackListMode = true,\n      colorsList = [],\n      isMultiselect,\n      colorSize = \"medium\",\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        aria-labelledby=\"Color Picker Dialog\"\n        aria-describedby=\"Pick color\"\n        style={{ width }}\n        data-vibe={ComponentVibeId.COLOR_PICKER}\n      >\n        <ColorPickerContent\n          onValueChange={onChange}\n          value={value}\n          noColorText={noColorText}\n          shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n          colorStyle={colorStyle}\n          ColorIndicatorIcon={ColorIndicatorIcon}\n          SelectedIndicatorIcon={SelectedIndicatorIcon}\n          NoColorIcon={NoColorIcon}\n          colorsList={colorsList}\n          isBlackListMode={isBlackListMode}\n          isMultiselect={isMultiselect}\n          colorSize={colorSize}\n          numberOfColorsInLine={numberOfColorsInLine}\n          focusOnMount={focusOnMount}\n          colorShape={colorShape}\n          forceUseRawColorList={forceUseRawColorList}\n          showColorNameTooltip={showColorNameTooltip}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n        />\n      </DialogContentContainer>\n    );\n  }\n);\n\nexport default ColorPicker;\n"],"names":["ColorPicker","forwardRef","_ref","ref","className","_ref$onSave","onSave","NOOP","_ref$value","value","noColorText","_ref$colorStyle","colorStyle","ColorIndicatorIcon","SelectedIndicatorIcon","shouldRenderIndicatorWithoutBackground","_ref$NoColorIcon","NoColorIcon","NoColor","_ref$isBlackListMode","isBlackListMode","_ref$colorsList","colorsList","isMultiselect","_ref$colorSize","colorSize","_ref$numberOfColorsIn","numberOfColorsInLine","DEFAULT_NUMBER_OF_COLORS_IN_LINE","focusOnMount","_ref$colorShape","colorShape","forceUseRawColorList","showColorNameTooltip","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","onChange","useCallback","width","calculateColorPickerDialogWidth","React","createElement","DialogContentContainer","cx","styles","colorPicker","colorPickerDialogContent","style","ComponentVibeId","COLOR_PICKER","ColorPickerContent","onValueChange","getTestId","ComponentDefaultTestId"],"mappings":"+pBAiGMA,IAAAA,EAAcC,GAClB,SAAAC,EAuBEC,GACE,IAtBAC,EAASF,EAATE,UAASC,EAAAH,EACTI,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAAWR,EAAXQ,YAAWC,EAAAT,EACXU,WAAAA,OAAa,IAAHD,EAAG,UAASA,EACtBE,EAAkBX,EAAlBW,mBACAC,EAAqBZ,EAArBY,sBACAC,EAAsCb,EAAtCa,uCAAsCC,EAAAd,EACtCe,YAAAA,OAAcC,IAAHF,EAAGE,EAAOF,EAAAG,EAAAjB,EACrBkB,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAAAnB,EACtBoB,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EACfE,EAAarB,EAAbqB,cAAaC,EAAAtB,EACbuB,UAAAA,OAAY,IAAHD,EAAG,SAAQA,EAAAE,EAAAxB,EACpByB,qBAAAA,OAAuBC,IAAHF,EAAGE,EAAgCF,EACvDG,EAAY3B,EAAZ2B,aAAYC,EAAA5B,EACZ6B,WAAAA,OAAa,IAAHD,EAAG,SAAQA,EACrBE,EAAoB9B,EAApB8B,qBACAC,EAAoB/B,EAApB+B,qBACAC,EAAEhC,EAAFgC,GACeC,EAAUjC,EAAzB,eAIIkC,EAAeC,EAAO,MACtBC,EAAYC,EAAYpC,EAAKiC,GAE7BI,EAAWC,EAAYnC,EAAQ,CAACA,IAEhCoC,EAAQC,EAAgClB,EAAwBE,GAEtE,OACEiB,EAAAC,cAACC,EAAsB,CACrB3C,IAAKmC,EACLlC,UAAW2C,EAAGC,EAAOC,YAAaD,EAAOE,yBAA0B9C,GACnD,kBAAA,yCACC,aACjB+C,MAAO,CAAET,MAAAA,GACE,YAAAU,EAAgBC,cAE3BT,EAAAC,cAACS,EACC,CAAAC,cAAef,EACf/B,MAAOA,EACPC,YAAaA,EACbK,uCAAwCF,GAAsBE,EAC9DH,WAAYA,EACZC,mBAAoBA,EACpBC,sBAAuBA,EACvBG,YAAaA,EACbK,WAAYA,EACZF,gBAAiBA,EACjBG,cAAeA,EACfE,UAAWA,EACXE,qBAAsBA,EACtBE,aAAcA,EACdE,WAAYA,EACZC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,GAAIA,EAAE,cACOC,GAAcqB,EAAUC,EAAuBJ,aAAcnB,KAIlF"}

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

@@ -1,2 +0,0 @@
-var e={colorPicker:"colorPicker",colorPickerDialogContent:"colorPickerDialogContent"};!function(e){const t="s_id-ffacbf9b6446_4_5_11";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".colorPicker.colorPickerDialogContent {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}");export{e as default};
-//# sourceMappingURL=ColorPicker.module.scss.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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