@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/color-picker/Swatch.js

@@ -3,36 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Swatch = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var helpers_1 = require("../helpers");
 var base_button_1 = require("../base-button");
-var tick_1 = (0, tslib_1.__importDefault)(require("../icon/components/tick"));
-var getContrastRatio_1 = require("./getContrastRatio");
-var theme_1 = require("../theme");
 var react_1 = require("react");
-var overrides_1 = require("../overrides");
+var box_1 = require("../box");
+var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
+var colors_1 = require("./colors");
 exports.Swatch = (0, react_1.memo)(function (_a) {
-    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["color", "isSelected", "onChange", "className", "overrides"]);
-    var theme = (0, theme_1.useTheme)().theme;
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TickIcon, tick_1.default), 2), TickIcon = _b[0], tickIconProps = _b[1];
-    var contrastRatioWithTickIcon = (0, react_1.useMemo)(function () { return (isSelected ? (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
-    var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.popup)); }, [theme, color]);
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, props = tslib_1.__rest(_a, ["color", "isSelected", "onChange", "className"]);
     var handleChange = (0, react_1.useCallback)(function () { return onChange(color); }, [color, onChange]);
-    return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ onClick: handleChange, className: [
-            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center scale-0',
-            isSelected ? { transform: 'scale(1.2)' } : {},
-            contrastRatioWithBgColor < 3 ? 'border-1 border-solid spr-border-03' : '',
-            {
-                backgroundColor: color,
-                transition: '0.15s ease-in-out',
-                ':hover': {
-                    transform: 'scale(1.2)',
-                },
-                ':focus-visible': {
-                    transform: 'scale(1.2)',
-                    outlineWidth: '1px',
-                    outlineOffset: '1px',
-                },
-            },
+    var swatchInnerEl = (0, jsx_runtime_1.jsx)(box_1.Box, { className: "h-full w-full rounded-full", style: { backgroundColor: color } });
+    if (!color || color === colors_1.RESET_COLOR) {
+        // reset color
+        swatchInnerEl = (0, jsx_runtime_1.jsx)(transparentBackground_1.default, { size: 20 });
+    }
+    return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, tslib_1.__assign({ onClick: handleChange, "data-testid": "swatch-".concat(color), className: [
+            'z-0 cursor-pointer h-5 w-5 rounded-full flex justify-center items-center p-px border-1 border-solid spr-border-primary hover:spr-border-quaternary',
+            'focus-visible:outline-1 focus-visible:-outline-offset-1',
+            isSelected ? 'spr-border-quinary' : '',
             className,
-        ], tabIndex: 0 }, props, { children: isSelected ? ((0, jsx_runtime_1.jsx)(TickIcon, (0, tslib_1.__assign)({ className: contrastRatioWithTickIcon < 4.5 ? 'spr-icon-01' : 'spr-icon-05', size: 10 }, tickIconProps), void 0)) : null }), void 0));
+        ], "aria-checked": isSelected, tabIndex: 0 }, props, { children: swatchInnerEl })));
 });

package/color-picker/adaptiveThemeColor.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Inverts colors to have a similar contrast ratio on the opposite theme. Maintains H/S values from the HSL colorspace.
+ * @param inputColor Input color, as hex
+ * @param lightTheme Hex of background in light theme
+ * @param darkTheme Hex of background in dark theme
+ */
+export declare function invertColor(inputColor: string, { light: lightTheme, dark: darkTheme }?: {
+    dark?: string;
+    light?: string;
+}): string;
+type THEME = 'dark' | 'light' | undefined;
+/**
+ * Generates an 'adaptive' themed color hex (a color with appropriate contrast) based on given parameters.
+ * @param inputColor Input color, as hex
+ * @param adaptiveTheme Theme that the adaptive themed color was set in
+ * @param currentTheme Current theme
+ * @example
+ * const adaptedColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ * // Returns a light blue hex from a dark blue hex input
+ */
+export declare function adaptiveThemeColor(inputColor: string | undefined, adaptiveTheme: THEME, currentTheme?: THEME): string | undefined;
+/**
+ * Generates an adaptiveThemeColor function for a custom theme
+ * @param lightHex Hex of the light-theme background
+ * @param darkHex Hex of the dark-theme background
+ * @example
+ * const adaptiveThemeColor = customAdaptiveThemeColor('#ffffff', '#1c1c1f');
+ * const adaptedThemeColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ */
+export declare function customAdaptiveThemeColor(lightHex: string, darkHex: string): typeof adaptiveThemeColor;
+export {};

package/color-picker/adaptiveThemeColor.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customAdaptiveThemeColor = exports.adaptiveThemeColor = exports.invertColor = void 0;
+var colors_1 = require("../helpers/colors");
+/**
+ * Inverts colors to have a similar contrast ratio on the opposite theme. Maintains H/S values from the HSL colorspace.
+ * @param inputColor Input color, as hex
+ * @param lightTheme Hex of background in light theme
+ * @param darkTheme Hex of background in dark theme
+ */
+function invertColor(inputColor, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.light, lightTheme = _c === void 0 ? '#ffffff' : _c, _d = _b.dark, darkTheme = _d === void 0 ? '#121214' : _d;
+    // Generate a hex with a contrast ratio on black roughly
+    // equal to the given hex's contrast ratio on white.
+    // Is applicable for both light->dark and dark->light and
+    // maintains the same hue and saturation as the given color.
+    var inputRgb = (0, colors_1.hexToRgb)(inputColor);
+    var inputHsl = (0, colors_1.RgbToHsl)(inputRgb);
+    var lightLuminance = (0, colors_1.getRelativeLuminance)((0, colors_1.hexToRgb)(lightTheme));
+    var darkLuminance = (0, colors_1.getRelativeLuminance)((0, colors_1.hexToRgb)(darkTheme));
+    var targetLuminance = ((lightLuminance + 0.05) * (darkLuminance + 0.05)) / ((0, colors_1.getRelativeLuminance)(inputRgb) + 0.05) - 0.05;
+    var lowerLight = 0, upperLight = 100;
+    // Since yellow looks horrible on inversion, we make yellow hues redder while inverting
+    var oldHue = inputHsl[0];
+    var newHue = oldHue >= 70 ? oldHue : Math.min(oldHue, 30 + 100 / (70 - oldHue));
+    var currentRgb = inputRgb;
+    // The Newton-Raphson method is used for lightness -> luminance inversion
+    // Luminance vs lightness is not a strictly monotonic relation
+    // but is invertible for fixed values of hue and saturation.
+    // Refer to the resources in helpers/colors.ts for explanations.
+    for (var i = 0; i < 10; i += 1) {
+        var currentHsl = [newHue, inputHsl[1], (lowerLight + upperLight) / 2, inputHsl[3]];
+        currentRgb = (0, colors_1.HslToRgb)(currentHsl);
+        var newNode = { light: currentHsl[2], lum: (0, colors_1.getRelativeLuminance)(currentRgb) };
+        if (Math.abs(newNode.lum - targetLuminance) < 0.005)
+            break;
+        else if (newNode.lum > targetLuminance)
+            upperLight = newNode.light;
+        else if (newNode.lum < targetLuminance)
+            lowerLight = newNode.light;
+    }
+    return (0, colors_1.RgbToHex)(currentRgb);
+}
+exports.invertColor = invertColor;
+/**
+ * Generates an 'adaptive' themed color hex (a color with appropriate contrast) based on given parameters.
+ * @param inputColor Input color, as hex
+ * @param adaptiveTheme Theme that the adaptive themed color was set in
+ * @param currentTheme Current theme
+ * @example
+ * const adaptedColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ * // Returns a light blue hex from a dark blue hex input
+ */
+function adaptiveThemeColor(inputColor, adaptiveTheme, currentTheme) {
+    if (currentTheme === void 0) { currentTheme = 'light'; }
+    if (!inputColor)
+        return inputColor;
+    if (!adaptiveTheme)
+        return inputColor;
+    if (adaptiveTheme === currentTheme)
+        return inputColor;
+    return invertColor(inputColor);
+}
+exports.adaptiveThemeColor = adaptiveThemeColor;
+/**
+ * Generates an adaptiveThemeColor function for a custom theme
+ * @param lightHex Hex of the light-theme background
+ * @param darkHex Hex of the dark-theme background
+ * @example
+ * const adaptiveThemeColor = customAdaptiveThemeColor('#ffffff', '#1c1c1f');
+ * const adaptedThemeColor = adaptiveThemeColor('#0000ff', 'light', 'dark');
+ */
+function customAdaptiveThemeColor(lightHex, darkHex) {
+    return function customAdaptiveColor(inputColor, adaptiveTheme, currentTheme) {
+        if (currentTheme === void 0) { currentTheme = 'light'; }
+        if (!inputColor)
+            return inputColor;
+        if (!adaptiveTheme)
+            return inputColor;
+        if (adaptiveTheme === currentTheme)
+            return inputColor;
+        return invertColor(inputColor, { light: lightHex, dark: darkHex });
+    };
+}
+exports.customAdaptiveThemeColor = customAdaptiveThemeColor;

package/color-picker/colors.d.ts

@@ -1,3 +1,4 @@
 export declare const SPRINKLR_PRESET_COLORS: string[];
+export declare const RESET_COLOR = "#00000000";
 export declare const COLOR_PALETTE: string[][];
-export declare const getColorSet: () => Set<string | undefined>;
+export declare const getColorSet: () => Set<string>;

package/color-picker/colors.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorSet = exports.COLOR_PALETTE = exports.SPRINKLR_PRESET_COLORS = void 0;
+exports.getColorSet = exports.COLOR_PALETTE = exports.RESET_COLOR = exports.SPRINKLR_PRESET_COLORS = void 0;
 var SLATE_COLORS = [
-    '#FFFFFE',
-    '#F3F3F3',
-    '#EFEFEF',
-    '#DADAD9',
-    '#CCCCCC',
-    '#B7B7B7',
+    '#fffffe',
+    '#f3f3f3',
+    '#efefef',
+    '#dadad9',
+    '#cccccc',
+    '#b7b7b7',
     '#999999',
     '#676666',
     '#444343',
@@ -98,23 +98,24 @@ var ROSE_COLORS = [
     '#4c0519',
 ];
 exports.SPRINKLR_PRESET_COLORS = [
-    '#54BEEE',
-    '#1DA4DD',
-    '#2E6DB8',
-    '#518EDD',
-    '#5CC8C3',
-    '#38A5A0',
-    '#C579BE',
-    '#A7469D',
-    '#8A3C8B',
-    '#723B86',
-    '#9785FE',
-    '#483A98',
-    '#F86CAE',
-    '#B1306C',
-    '#FFA371',
-    '#FD7D34',
+    '#54beee',
+    '#1da4dd',
+    '#2e6db8',
+    '#518edd',
+    '#5cc8c3',
+    '#38a5a0',
+    '#c579be',
+    '#a7469d',
+    '#8a3c8b',
+    '#723b86',
+    '#9785fe',
+    '#483a98',
+    '#f86cae',
+    '#b1306c',
+    '#ffa371',
+    '#fd7d34',
 ];
+exports.RESET_COLOR = '#00000000';
 exports.COLOR_PALETTE = [
     SLATE_COLORS,
     RED_COLORS,

package/color-picker/constants.d.ts

@@ -11,3 +11,4 @@ export declare const COLOR_TYPE: {
     readonly SOLID: "solid";
     readonly GRADIENT: "gradient";
 };
+export declare const SWATCHES_PER_ROW = 10;

package/color-picker/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
+exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
 exports.GRADIENT_TYPE = {
     LINEAR: 'linear',
     RADIAL: 'radial',
@@ -10,3 +10,4 @@ exports.COLOR_TYPE = {
     SOLID: 'solid',
     GRADIENT: 'gradient',
 };
+exports.SWATCHES_PER_ROW = 10;

package/color-picker/index.d.ts

@@ -1,3 +1,8 @@
-export { ColorPicker } from './ColorPicker';
-export type { ColorPickerProps, ColorPickerOverrides } from './types';
-export { COLOR_PALETTE } from './colors';
+export { ColorPicker, getOnChangeWithTheme } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerOverrides, OnChange } from './types';
+export { adaptiveThemeColor, invertColor, customAdaptiveThemeColor } from './adaptiveThemeColor';
+export { COLOR_PALETTE, SPRINKLR_PRESET_COLORS, RESET_COLOR } from './colors';
+export { SWATCHES_PER_ROW, COLOR_TYPE } from './constants';
+export { Swatch } from './Swatch';
+export type { SwatchProps } from './Swatch';
+export { ColorPreview } from './CustomColorSelector';

package/color-picker/index.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_PALETTE = exports.ColorPicker = void 0;
+exports.ColorPreview = exports.Swatch = exports.COLOR_TYPE = exports.SWATCHES_PER_ROW = exports.RESET_COLOR = exports.SPRINKLR_PRESET_COLORS = exports.COLOR_PALETTE = exports.customAdaptiveThemeColor = exports.invertColor = exports.adaptiveThemeColor = exports.getOnChangeWithTheme = exports.ColorPicker = void 0;
 var ColorPicker_1 = require("./ColorPicker");
 Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+Object.defineProperty(exports, "getOnChangeWithTheme", { enumerable: true, get: function () { return ColorPicker_1.getOnChangeWithTheme; } });
+var adaptiveThemeColor_1 = require("./adaptiveThemeColor");
+Object.defineProperty(exports, "adaptiveThemeColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.adaptiveThemeColor; } });
+Object.defineProperty(exports, "invertColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.invertColor; } });
+Object.defineProperty(exports, "customAdaptiveThemeColor", { enumerable: true, get: function () { return adaptiveThemeColor_1.customAdaptiveThemeColor; } });
 var colors_1 = require("./colors");
 Object.defineProperty(exports, "COLOR_PALETTE", { enumerable: true, get: function () { return colors_1.COLOR_PALETTE; } });
+Object.defineProperty(exports, "SPRINKLR_PRESET_COLORS", { enumerable: true, get: function () { return colors_1.SPRINKLR_PRESET_COLORS; } });
+Object.defineProperty(exports, "RESET_COLOR", { enumerable: true, get: function () { return colors_1.RESET_COLOR; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "SWATCHES_PER_ROW", { enumerable: true, get: function () { return constants_1.SWATCHES_PER_ROW; } });
+Object.defineProperty(exports, "COLOR_TYPE", { enumerable: true, get: function () { return constants_1.COLOR_TYPE; } });
+var Swatch_1 = require("./Swatch");
+Object.defineProperty(exports, "Swatch", { enumerable: true, get: function () { return Swatch_1.Swatch; } });
+var CustomColorSelector_1 = require("./CustomColorSelector");
+Object.defineProperty(exports, "ColorPreview", { enumerable: true, get: function () { return CustomColorSelector_1.ColorPreview; } });

package/color-picker/locale.d.ts

@@ -1,7 +1,13 @@
-export declare type ColorPickerLocale = {
+export type ColorPickerLocale = {
     resetButtonLabel: string;
     colorLibraryLabel: string;
     solidColorLabel: string;
     gradientColorLabel: string;
+    gradientDirection: string;
+    gradientDegree: string;
+    gradientEndPoints: string;
     selectColorLabel: string;
+    sprinklrPresets: string;
+    selectFirstColorAriaLabel: string;
+    selectSecondColorAriaLabel: string;
 };

package/color-picker/styled-component.d.ts

@@ -1 +1 @@
-export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;

package/color-picker/styled-component.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRoot = void 0;
 var style_1 = require("../style");
-exports.StyledRoot = (0, style_1.styled)('div', 'flex flex-col gap-3');
+exports.StyledRoot = (0, style_1.styled)('div', 'flex flex-col');

package/color-picker/types.d.ts

@@ -1,64 +1,108 @@
-import { Override } from '../overrides';
-import { Color, ColorResult } from 'react-color';
+import type { Override } from '../overrides';
+import type { ColorResult, RGBColor } from 'react-color';
 import { GRADIENT_TYPE } from './constants';
-import { SelectProps } from '../select';
-import { ButtonProps } from '../button';
-import { BoxProps } from '../box';
-export declare type ColorPickerOverrides = {
+import type { SelectProps } from '../select';
+import type { BoxProps } from '../box';
+import { ReactElement } from 'react';
+export type ColorPickerOverrides = {
     Root?: Override<Record<string, any>>;
     Heading?: Override<Record<string, any>>;
     Swatches?: Override<Record<string, any>>;
     Swatch?: Override<Record<string, any>>;
-    TickIcon?: Override<Record<string, any>>;
     Select?: Override<SelectProps & Record<string, any>>;
-    ResetButton?: Override<ButtonProps & Record<string, any>>;
     ColorSelectorContainer?: Override<BoxProps & Record<string, any>>;
 };
-export declare type ColorPickerProps = {
+export type SwatchColor = string | undefined;
+export type ColorPickerPreset = {
+    label: string;
+    colors: SwatchColor[];
+};
+export type ColorPickerProps = {
     overrides?: ColorPickerOverrides;
     value?: string;
-    onChange?: onChangeCallback;
-    onChangeComplete?: onChangeCallback;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
     heading?: string;
-    resetButtonLabel?: string;
     enableGradientSelector?: boolean;
+    enableAlphaSelector?: boolean;
+    colorPalette?: (string | undefined)[];
+    presets?: ColorPickerPreset[] | ((defaultPreset: ColorPickerPreset) => ColorPickerPreset[]);
+    noReset?: boolean;
+    renderColorSuggestionPanel?: (color?: string) => ReactElement;
 };
-export declare type GradientColorResult = {
+export type GradientColorResult = {
     gradientType: (typeof GRADIENT_TYPE)[keyof typeof GRADIENT_TYPE];
     firstColor: string;
     secondColor: string;
     degree: [number];
     endPoints: [number, number];
 };
-declare type onChangeCallback = (colorString?: string, colorObj?: {
+export type AdaptiveThemeColors = {
+    /**
+     * Hex for the color in light theme
+     */
+    light: string;
+    /**
+     * Hex for the color in dark theme
+     */
+    dark: string;
+    /**
+     * String with both light and dark theme hexes, separated by a semicolon
+     * @example '#ffffff;#1c1c1f'
+     */
+    mergedStringColor: string;
+    /** The theme the color was set on
+     */
+    sourceTheme?: 'light' | 'dark';
+};
+export type OnChange = (colorString?: string, colorObj?: {
+    type: 'solid';
+    colorResultObj?: ColorResult;
+    adaptiveThemeColors?: AdaptiveThemeColors;
+} | {
+    type: 'gradient';
+    colorResultObj?: GradientColorResult;
+    adaptiveThemeColors?: undefined;
+}) => void;
+export type OnColorChange = (colorRgba?: RGBColor | string, colorObject?: {
     type: 'solid';
     colorResultObj?: ColorResult;
+    adaptiveThemeColors?: AdaptiveThemeColors;
 } | {
     type: 'gradient';
     colorResultObj?: GradientColorResult;
+    adaptiveThemeColors?: undefined;
 }) => void;
-export declare type GradientColorPickerProps = {
+export type GradientColorPickerProps = {
     color?: string;
-    onChange?: onChangeCallback;
-    onChangeComplete?: onChangeCallback;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+    enableAlphaSelector?: boolean;
 };
-export declare type ColorSelectorProps = {
+export type ColorSelectorProps = {
     selectedTab: number;
     color?: string;
-    onChange?: onChangeCallback;
-    onChangeComplete?: onChangeCallback;
+    onChange?: OnColorChange;
+    onChangeComplete?: OnColorChange;
     overrides?: ColorPickerOverrides;
-    setColor: (color: string | undefined) => void;
-};
-export declare type CustomColorSelectorProps = {
-    color?: string;
-    onChange: (color: Color | {
+} & Pick<ColorPickerProps, 'enableAlphaSelector' | 'colorPalette' | 'presets' | 'noReset' | 'renderColorSuggestionPanel'>;
+export type CustomColorSelectorProps = {
+    color?: RGBColor | string;
+    onChange: (color: ColorResult | {
+        rgb: RGBColor;
+    } | undefined) => void;
+    onChangeComplete: (color: ColorResult | {
+        rgb: RGBColor;
+    } | {
         hex: string;
-    }) => void;
+    } | undefined) => void;
     hex?: ColorResult['hex'];
-    rgb?: ColorResult['rgb'];
-    onChangeComplete: (color: Color | {
+    rgb?: RGBColor;
+    enableAlphaSelector?: boolean;
+    renderColorSuggestionPanel?: (color?: string) => ReactElement;
+};
+export type InternalCustomColorSelectorProps = Omit<CustomColorSelectorProps, 'onChange'> & {
+    onChange: (color: ColorResult | RGBColor | {
         hex: string;
     }) => void;
 };
-export {};

package/color-picker/utils.d.ts

@@ -1,17 +1,13 @@
-import { GradientColorResult } from './types';
-export declare const getGradientColorString: (gradientColorObject: any) => string;
-export declare const extractColorsFromGradient: (gradientString: any) => GradientColorResult | null;
-export declare const getColorSelectorOptions: (locale: any) => {
-    COLOR_PALETTE_OPTION: {
-        label: any;
-        id: number;
-    };
-    SOLID_COLOR_OPTION: {
-        label: any;
-        id: number;
-    };
-    GRADIENT_COLOR_OPTION: {
-        label: any;
-        id: number;
-    };
+import type { GradientColorResult } from './types';
+import type { Locale } from '../locale';
+export declare const SELECTED_COLOR: {
+    readonly FIRST_COLOR: "FIRST_COLOR";
+    readonly SECOND_COLOR: "SECOND_COLOR";
 };
+export declare const getGradientColorString: (gradientColorObject: GradientColorResult) => string;
+export declare const extractColorsFromGradient: (gradientString?: string) => GradientColorResult | null;
+export declare const getColorSelectorOptions: (locale: Locale) => Record<'COLOR_PALETTE_OPTION' | 'SOLID_COLOR_OPTION' | 'GRADIENT_COLOR_OPTION', {
+    label: string;
+    id: number;
+}>;
+export declare const getHexFromInput: (value: string | undefined, isDarkMode: boolean, enableAlphaSelector?: boolean) => string | undefined;

package/color-picker/utils.js

@@ -1,34 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorSelectorOptions = exports.extractColorsFromGradient = exports.getGradientColorString = void 0;
+exports.getHexFromInput = exports.getColorSelectorOptions = exports.extractColorsFromGradient = exports.getGradientColorString = exports.SELECTED_COLOR = void 0;
+var tslib_1 = require("tslib");
 var constants_1 = require("./constants");
+var colors_1 = require("../helpers/colors");
+exports.SELECTED_COLOR = {
+    FIRST_COLOR: 'FIRST_COLOR',
+    SECOND_COLOR: 'SECOND_COLOR',
+};
 var getGradientColorString = function (gradientColorObject) {
     var gradientType = gradientColorObject.gradientType, firstColor = gradientColorObject.firstColor, secondColor = gradientColorObject.secondColor, endPoints = gradientColorObject.endPoints, degree = gradientColorObject.degree;
     return "".concat(gradientType, "-gradient(").concat(gradientType === constants_1.GRADIENT_TYPE.LINEAR ? "".concat(degree, "deg,") : '', " ").concat(firstColor, " ").concat(endPoints[0], "%, ").concat(secondColor, " ").concat(endPoints[1], "%)");
 };
 exports.getGradientColorString = getGradientColorString;
 var extractColorsFromGradient = function (gradientString) {
-    var gradientRegex = /^(linear|radial)-gradient\((\d+deg,)?\s*(#[0-9A-Fa-f]{6}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\s*,\s*(#[0-9A-Fa-f]{6}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\)$/i;
+    var gradientRegex = /^(linear|radial)-gradient\((\d+deg,)?\s*(#[0-9A-Fa-f]{6,8}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\s*,\s*(#[0-9A-Fa-f]{6,8}|rgba?\(.*?\)|rgb\(.*?\)|[a-z]+)\s*(\d+%?)?\)$/i;
     var match = gradientString && gradientString.match(gradientRegex);
-    if (match) {
-        var gradientType = match[1].toLowerCase();
-        var hasDegree = !!match[2];
-        var degree = hasDegree ? parseInt(match[2]) : 0;
-        var firstColor = match[3];
-        var firstColorPercentage = isNaN(parseInt(match[4])) ? 0 : parseInt(match[4]);
-        var secondColor = match[5];
-        var secondColorPercentage = isNaN(parseInt(match[6])) ? 100 : parseInt(match[6]);
-        return {
-            gradientType: gradientType,
-            degree: [degree],
-            firstColor: firstColor,
-            secondColor: secondColor,
-            endPoints: [firstColorPercentage, secondColorPercentage],
-        };
-    }
-    else {
+    if (!match)
         return null;
-    }
+    var gradientType = match[1].toLowerCase();
+    var hasDegree = !!match[2];
+    var degree = hasDegree ? parseInt(match[2]) : 0;
+    var firstColor = match[3];
+    var firstColorPercentage = Number.isNaN(parseInt(match[4])) ? 0 : parseInt(match[4]);
+    var secondColor = match[5];
+    var secondColorPercentage = Number.isNaN(parseInt(match[6])) ? 100 : parseInt(match[6]);
+    return {
+        gradientType: gradientType,
+        degree: [degree],
+        firstColor: firstColor,
+        secondColor: secondColor,
+        endPoints: [firstColorPercentage, secondColorPercentage],
+    };
 };
 exports.extractColorsFromGradient = extractColorsFromGradient;
 var getColorSelectorOptions = function (locale) { return ({
@@ -37,3 +40,14 @@ var getColorSelectorOptions = function (locale) { return ({
     GRADIENT_COLOR_OPTION: { label: locale.colorPicker.gradientColorLabel, id: constants_1.TAB_IDS.GRADIENT_COLOR },
 }); };
 exports.getColorSelectorOptions = getColorSelectorOptions;
+var getHexFromInput = function (value, isDarkMode, enableAlphaSelector) {
+    if (enableAlphaSelector === void 0) { enableAlphaSelector = true; }
+    if (!(value === null || value === void 0 ? void 0 : value.includes(';')))
+        return enableAlphaSelector ? value : (0, colors_1.noAlphaHex)(value);
+    var _a = tslib_1.__read(value.split(';'), 2), lightValue = _a[0], darkValue = _a[1];
+    var themedValue = isDarkMode ? darkValue : lightValue;
+    if (!enableAlphaSelector)
+        return (0, colors_1.noAlphaHex)(themedValue);
+    return themedValue;
+};
+exports.getHexFromInput = getHexFromInput;

package/container/ContainerProps.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-declare type ContainerProps = {
+type ContainerProps = {
     children: ReactNode;
     variant: 'fixed' | 'fluid';
 };

package/currency/Currency.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { CurrencyProps } from './types';
-export declare const Currency: ({ value, variant, currency, currencyOptions, }: CurrencyProps) => JSX.Element;
+export declare const Currency: {
+    ({ value, variant, currency, currencyOptions, }: CurrencyProps): JSX.Element;
+    __standard: string;
+};

package/currency/Currency.js

@@ -9,6 +9,7 @@ var constants_1 = require("./constants");
 var Currency = function (_a) {
     var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, _c = _a.currency, currency = _c === void 0 ? constants_1.DEFAULT_CURRENCY : _c, currencyOptions = _a.currencyOptions;
     var formattedCurrency = (0, useCurrency_1.useCurrency)({ value: value, variant: variant, currency: currency, currencyOptions: currencyOptions });
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedCurrency }, void 0);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedCurrency });
 };
 exports.Currency = Currency;
+exports.Currency.__standard = 'Component';

package/currency/index.js

@@ -8,5 +8,5 @@ var useCurrency_1 = require("./useCurrency");
 Object.defineProperty(exports, "useCurrency", { enumerable: true, get: function () { return useCurrency_1.useCurrency; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getFormattedCurrency", { enumerable: true, get: function () { return utils_1.getFormattedCurrency; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
-(0, tslib_1.__exportStar)(require("../utils/intlNumberFormatUtils/types"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("../utils/intlNumberFormatUtils/types"), exports);

package/currency/types.d.ts

@@ -1,5 +1,5 @@
 import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
-export declare type CurrencyProps = {
+export type CurrencyProps = {
     value: number;
     variant?: NumberVariant;
     currency?: string;

package/currency/utils.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
 var getFormattedCurrency = function (_a) {
     var value = _a.value, locale = _a.locale, variant = _a.variant, currencyOptions = _a.currencyOptions, currency = _a.currency;
-    var intlNumberFormatterOptions = (0, tslib_1.__assign)({ style: 'currency', currency: currency }, currencyOptions);
+    var intlNumberFormatterOptions = tslib_1.__assign({ style: 'currency', currency: currency }, currencyOptions);
     return (0, intlNumberFormatUtils_1.getFormattedNumber)({ value: value, locale: locale, variant: variant, numberOptions: intlNumberFormatterOptions });
 };
 exports.getFormattedCurrency = getFormattedCurrency;

package/date-input/DateInput.d.ts

@@ -1,3 +1,6 @@
 import { ReactElement } from 'react';
-import { DateInputProps } from './types';
-export declare const DateInput: ({ adapter, formatString: _formatString, onChange, value, locale, weekStartsOn, overrides, minDate, maxDate, timeSelect, showTimezone, timezone, onFocus: _onFocus, onKeyDown: _onKeyDown, placeholder, ...restProps }: DateInputProps) => ReactElement;
+import type { DateInputProps } from './types';
+export declare const DateInput: {
+    ({ adapter, formatString: _formatString, onChange, value: _value, locale, weekStartsOn, overrides, minDate: _minDate, maxDate: _maxDate, timeSelect, showTimezone, timezone, timezoneOptions, onFocus: _onFocus, onBlur: _onBlur, onKeyDown: _onKeyDown, placeholder, getTimeRangesForDate, onOpen, onClose, inputToDateParser, disableTimezoneSwitch, disableOutOfBoundaryDateAdaptation, ...restProps }: DateInputProps): ReactElement;
+    __standard: string;
+};