@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/color-picker/ColorSelector.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ColorPalette_1 = require("./ColorPalette");
+var CustomColorSelector_1 = require("./CustomColorSelector");
+var GradientColorPicker_1 = (0, tslib_1.__importDefault)(require("./GradientColorPicker"));
+var constants_1 = require("./constants");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var ColorSelector = function (_a) {
+    var selectedTab = _a.selectedTab, color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? noop_1.default : _c, overrides = _a.overrides, setColor = _a.setColor;
+    var COLOR_PALETTE = constants_1.TAB_IDS.COLOR_PALETTE, GRADIENT_COLOR = constants_1.TAB_IDS.GRADIENT_COLOR;
+    if (selectedTab === COLOR_PALETTE) {
+        return ((0, jsx_runtime_1.jsx)(ColorPalette_1.ColorPalette, { color: color, onChange: function (colorHex) {
+                setColor(colorHex);
+                onChange(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+                onChangeComplete(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+            }, overrides: overrides }, void 0));
+    }
+    else if (selectedTab === GRADIENT_COLOR) {
+        return (0, jsx_runtime_1.jsx)(GradientColorPicker_1.default, { color: color, onChange: onChange, onChangeComplete: onChangeComplete }, void 0);
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: color, onChange: function (colorObject) {
+                setColor(colorObject.hex);
+                onChange(colorObject.hex, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            }, onChangeComplete: function (colorObject) {
+                return onChangeComplete(colorObject.hex, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            } }, void 0));
+    }
+};
+ColorSelector.displayName = 'ColorSelector';
+exports.default = ColorSelector;

package/color-picker/CustomColorSelector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CustomColorSelectorProps } from './types';
+export declare const CustomColorSelector: React.ComponentClass<CustomColorSelectorProps & import("react-color/lib/components/common/ColorWrap").ExportedColorProps, any>;

package/color-picker/CustomColorSelector.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColorSelector = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_color_1 = require("react-color");
+var common_1 = require("react-color/lib/components/common");
+var style_1 = require("../style");
+var stack_1 = require("../stack");
+var box_1 = require("../box");
+var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: { transform: 'translate(-50%, -1px)' }, className: "absolute spr-shadow-03 cursor-pointer w-3 h-3 rounded-full spr-ui-01" }, void 0)); };
+var ColorPickerComponent = function (props) {
+    var getStyle = (0, style_1.useStyle)().getStyle;
+    var inputStyles = {
+        input: getStyle('w-full text-center border-1 spr-border-03 spr-ui-01 mb-1 rounded-4'),
+        label: getStyle(' w-full text-center block'),
+    };
+    var hex = props.hex, rgb = props.rgb, onChange = props.onChange, onChangeComplete = props.onChangeComplete;
+    // Bug in the react-color lib
+    // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
+    // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
+    // color which cause a flickering issue
+    //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
+    var handleChange = (0, react_1.useCallback)(function (data) {
+        if (data.HEX) {
+            onChange({ hex: data.HEX });
+            onChangeComplete({ hex: data.HEX });
+        }
+        else if (data.R || data.G || data.B || data.A) {
+            onChange({ r: data.R || (rgb === null || rgb === void 0 ? void 0 : rgb.r), g: data.G || (rgb === null || rgb === void 0 ? void 0 : rgb.g), b: data.B || (rgb === null || rgb === void 0 ? void 0 : rgb.b), a: data.A || (rgb === null || rgb === void 0 ? void 0 : rgb.a) });
+            onChangeComplete({ r: data.R || (rgb === null || rgb === void 0 ? void 0 : rgb.r), g: data.G || (rgb === null || rgb === void 0 ? void 0 : rgb.g), b: data.B || (rgb === null || rgb === void 0 ? void 0 : rgb.b), a: data.A || (rgb === null || rgb === void 0 ? void 0 : rgb.a) });
+        }
+    }, [onChange, onChangeComplete, rgb]);
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "vertical", gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "relative w-full h-40 rounded-8 overflow-hidden" }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, (0, tslib_1.__assign)({}, props), void 0) }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: ['p-2 flex items-center ', { gap: '16px' }] }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['rounded-8 relative', { width: '190px', height: '10px' }] }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, (0, tslib_1.__assign)({ pointer: CustomPointer }, props), void 0) }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { className: [{ backgroundColor: "rgba(".concat(rgb === null || rgb === void 0 ? void 0 : rgb.r, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.g, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.b, ",").concat(rgb === null || rgb === void 0 ? void 0 : rgb.a, ")") }, 'w-9 h-9 rounded-full'] }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: [
+                    'text-center spr-text-01 text-13 grid space-between w-full gap-2',
+                    { gridTemplateColumns: '1.5fr 1fr 1fr 1fr' },
+                ] }, { children: [(0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "HEX", value: hex, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "R", value: rgb === null || rgb === void 0 ? void 0 : rgb.r, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "G", value: rgb === null || rgb === void 0 ? void 0 : rgb.g, onChange: handleChange }, void 0), (0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: inputStyles, label: "B", value: rgb === null || rgb === void 0 ? void 0 : rgb.b, onChange: handleChange }, void 0)] }), void 0)] }), void 0));
+};
+ColorPickerComponent.displayName = 'ColorPickerComponent';
+exports.CustomColorSelector = (0, react_color_1.CustomPicker)(ColorPickerComponent);

package/color-picker/GradientColorPicker.d.ts

@@ -0,0 +1,6 @@
+import { GradientColorPickerProps } from './types';
+declare const GradientColorPicker: {
+    ({ color, onChange, onChangeComplete }: GradientColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default GradientColorPicker;

package/color-picker/GradientColorPicker.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var CustomColorSelector_1 = require("./CustomColorSelector");
+var box_1 = require("../box");
+var button_1 = require("../button");
+var form_control_1 = require("../form-control");
+var radio_1 = require("../radio");
+var slider_1 = require("../slider");
+var constants_1 = require("./constants");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var utils_1 = require("./utils");
+var LabelOverrides = { LabelContainer: { style: 'w-24' } };
+var RadioOverrides = { Root: { style: 'mr-2' } };
+var GradientColorPicker = function (_a) {
+    var color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? noop_1.default : _c;
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        var gradientColorData = (0, utils_1.extractColorsFromGradient)(color);
+        return (gradientColorData !== null && gradientColorData !== void 0 ? gradientColorData : {
+            gradientType: 'linear',
+            firstColor: color !== null && color !== void 0 ? color : '#000000',
+            secondColor: '#ffffff',
+            degree: [0],
+            endPoints: [0, 100],
+        });
+    }), 2), gradientColorObj = _d[0], setGradientColorObj = _d[1];
+    var gradientType = gradientColorObj.gradientType, firstColor = gradientColorObj.firstColor, secondColor = gradientColorObj.secondColor, degree = gradientColorObj.degree, endPoints = gradientColorObj.endPoints;
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(1), 2), currentColorSelected = _e[0], setCurrentSelectedColor = _e[1];
+    var handleGradientTypeChange = (0, react_1.useCallback)(function (e) {
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { gradientType: e.target.value });
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        setGradientColorObj(newGradientColorObj);
+        onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+        onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [degree, firstColor, secondColor, endPoints[0], endPoints[1]]);
+    var handleDegreeChange = (0, react_1.useCallback)(function (_a, isChangeCompleted) {
+        var value = _a.value;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { degree: value });
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, firstColor, secondColor, endPoints[0], endPoints[1]]);
+    var handleEndPointsChange = (0, react_1.useCallback)(function (_a, isChangeCompleted) {
+        var value = _a.value;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), { endPoints: value });
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, degree, firstColor, secondColor]);
+    var handleCustomColorOnChange = (0, react_1.useCallback)(function (colorObj, isChangeCompleted) {
+        var _a;
+        var newGradientColorObj = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, gradientColorObj), (_a = {}, _a[currentColorSelected === 1 ? 'firstColor' : 'secondColor'] = colorObj.hex, _a));
+        setGradientColorObj(newGradientColorObj);
+        var gradientColorString = (0, utils_1.getGradientColorString)(newGradientColorObj);
+        isChangeCompleted
+            ? onChangeComplete(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj })
+            : onChange(gradientColorString, { type: 'gradient', colorResultObj: newGradientColorObj });
+    }, [gradientType, degree, firstColor, secondColor, endPoints[0], endPoints[1], currentColorSelected]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: 'Direction', layout: "horizontal" }, { children: (0, jsx_runtime_1.jsxs)(radio_1.RadioGroup, (0, tslib_1.__assign)({ className: "m-2", value: gradientType, onChange: handleGradientTypeChange, align: "horizontal" }, { children: [(0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({ overrides: RadioOverrides, value: constants_1.GRADIENT_TYPE.LINEAR }, { children: constants_1.GRADIENT_TYPE.LINEAR }), void 0), (0, jsx_runtime_1.jsx)(radio_1.Radio, (0, tslib_1.__assign)({ overrides: RadioOverrides, value: constants_1.GRADIENT_TYPE.RADIAL }, { children: constants_1.GRADIENT_TYPE.RADIAL }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: function () { return 'Degree'; }, layout: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { disabled: gradientType === constants_1.GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: function (data) { return handleDegreeChange(data, false); }, onFinalChange: function (data) { return handleDegreeChange(data, true); } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, (0, tslib_1.__assign)({ overrides: LabelOverrides, label: 'End Points', layout: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: endPoints, max: 100, onChange: function (data) { return handleEndPointsChange(data, false); }, onFinalChange: function (data) { return handleEndPointsChange(data, true); } }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-between items-center" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-center items-center" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: "w-7 border-1 h-7 rounded-full", style: { background: "".concat(firstColor) } }, void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ isSelected: currentColorSelected === 1, shape: "pill", variant: "tertiary", size: "xxs", className: "m-1", onClick: function () { return setCurrentSelectedColor(1); } }, { children: "Color 1" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-center items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ isSelected: currentColorSelected === 2, shape: "pill", variant: "tertiary", size: "xxs", className: "m-1", onClick: function () { return setCurrentSelectedColor(2); } }, { children: "Color 2" }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { className: "w-7 border-1 h-7 rounded-full", style: { background: "".concat(secondColor) } }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { background: (0, utils_1.getGradientColorString)(gradientColorObj) }, className: "my-2 w-full h-10 rounded-8" }, void 0), (0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: currentColorSelected === 1 ? firstColor : secondColor, onChange: function (data) { return handleCustomColorOnChange(data, false); }, onChangeComplete: function (data) { return handleCustomColorOnChange(data, true); } }, void 0)] }, void 0));
+};
+GradientColorPicker.displayName = 'GradientColorPicker';
+exports.default = GradientColorPicker;

package/color-picker/Swatch.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ClassName } from '../types';
+import { ColorPickerOverrides } from './types';
+declare type SwatchProps = {
+    color: string;
+    isSelected: boolean;
+    onChange: (color?: string) => void;
+    className?: ClassName;
+    overrides?: ColorPickerOverrides;
+};
+export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, overrides, ...props }: SwatchProps) => ReactElement>;
+export {};

package/color-picker/Swatch.js

@@ -0,0 +1,38 @@
+"use strict";
+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 colors_1 = require("../helpers/colors");
+var theme_1 = require("../theme");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+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, colors_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
+    var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, colors_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.popup)); }, [theme, color]);
+    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',
+                },
+            },
+            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));
+});

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;
+declare 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 ? '#1c1c1f' : _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;
+    // Newton's 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];
+        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

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

package/color-picker/colors.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorSet = exports.COLOR_PALETTE = exports.SPRINKLR_PRESET_COLORS = void 0;
+var SLATE_COLORS = [
+    '#FFFFFE',
+    '#F3F3F3',
+    '#EFEFEF',
+    '#DADAD9',
+    '#CCCCCC',
+    '#B7B7B7',
+    '#999999',
+    '#676666',
+    '#444343',
+    '#000000',
+];
+var RED_COLORS = [
+    '#fef2f2',
+    '#fee2e2',
+    '#fecaca',
+    '#fca5a5',
+    '#f87171',
+    '#dc2626',
+    '#b91c1c',
+    '#991b1b',
+    '#7f1d1d',
+    '#450a0a',
+];
+var AMBER_COLORS = [
+    '#fffbeb',
+    '#fef3c7',
+    '#fde68a',
+    '#fcd34d',
+    '#fbbf24',
+    '#d97706',
+    '#b45309',
+    '#92400e',
+    '#78350f',
+    '#451a03',
+];
+var GREEN_COLORS = [
+    '#f0fdf4',
+    '#dcfce7',
+    '#bbf7d0',
+    '#86efac',
+    '#4ade80',
+    '#16a34a',
+    '#15803d',
+    '#166534',
+    '#14532d',
+    '#052e16',
+];
+var BLUE_COLORS = [
+    '#eff6ff',
+    '#dbeafe',
+    '#bfdbfe',
+    '#93c5fd',
+    '#60a5fa',
+    '#2563eb',
+    '#1d4ed8',
+    '#1e40af',
+    '#1e3a8a',
+    '#172554',
+];
+var VIOLET_COLORS = [
+    '#f5f3ff',
+    '#ede9fe',
+    '#ddd6fe',
+    '#c4b5fd',
+    '#a78bfa',
+    '#7c3aed',
+    '#6d28d9',
+    '#5b21b6',
+    '#4c1d95',
+    '#2e1065',
+];
+var FUCHSIA_COLORS = [
+    '#fdf4ff',
+    '#fae8ff',
+    '#f5d0fe',
+    '#f0abfc',
+    '#e879f9',
+    '#c026d3',
+    '#a21caf',
+    '#86198f',
+    '#701a75',
+    '#4a044e',
+];
+var ROSE_COLORS = [
+    '#fff1f2',
+    '#ffe4e6',
+    '#fecdd3',
+    '#fda4af',
+    '#fb7185',
+    '#e11d48',
+    '#be123c',
+    '#9f1239',
+    '#881337',
+    '#4c0519',
+];
+exports.SPRINKLR_PRESET_COLORS = [
+    '#54BEEE',
+    '#1DA4DD',
+    '#2E6DB8',
+    '#518EDD',
+    '#5CC8C3',
+    '#38A5A0',
+    '#C579BE',
+    '#A7469D',
+    '#8A3C8B',
+    '#723B86',
+    '#9785FE',
+    '#483A98',
+    '#F86CAE',
+    '#B1306C',
+    '#FFA371',
+    '#FD7D34',
+];
+exports.COLOR_PALETTE = [
+    SLATE_COLORS,
+    RED_COLORS,
+    AMBER_COLORS,
+    GREEN_COLORS,
+    BLUE_COLORS,
+    VIOLET_COLORS,
+    FUCHSIA_COLORS,
+    ROSE_COLORS,
+];
+var getColorSet = function () {
+    var set = new Set();
+    exports.COLOR_PALETTE.forEach(function (arr) { return arr.forEach(function (element) { return set.add(element); }); });
+    exports.SPRINKLR_PRESET_COLORS.forEach(function (element) { return set.add(element); });
+    return set;
+};
+exports.getColorSet = getColorSet;

package/color-picker/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const GRADIENT_TYPE: {
+    LINEAR: string;
+    RADIAL: string;
+};
+export declare const TAB_IDS: {
+    COLOR_PALETTE: number;
+    SOLID_COLOR: number;
+    GRADIENT_COLOR: number;
+};
+export declare const COLOR_TYPE: {
+    readonly SOLID: "solid";
+    readonly GRADIENT: "gradient";
+};

package/color-picker/constants.js

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

package/color-picker/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerOverrides } from './types';
+export { adaptiveThemeColor, invertColor, customAdaptiveThemeColor } from './adaptiveThemeColor';
+export { COLOR_PALETTE } from './colors';

package/color-picker/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = exports.customAdaptiveThemeColor = exports.invertColor = exports.adaptiveThemeColor = exports.ColorPicker = void 0;
+var ColorPicker_1 = require("./ColorPicker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+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; } });

package/color-picker/locale.d.ts

@@ -0,0 +1,7 @@
+export declare type ColorPickerLocale = {
+    resetButtonLabel: string;
+    colorLibraryLabel: string;
+    solidColorLabel: string;
+    gradientColorLabel: string;
+    selectColorLabel: string;
+};

package/color-picker/locale.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/color-picker/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/color-picker/index.js"
+}

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

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

package/color-picker/styled-component.js

@@ -0,0 +1,5 @@
+"use strict";
+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');

package/color-picker/types.d.ts

@@ -0,0 +1,83 @@
+import { Override } from '../overrides';
+import { Color, ColorResult } from 'react-color';
+import { GRADIENT_TYPE } from './constants';
+import { SelectProps } from '../select';
+import { ButtonProps } from '../button';
+import { BoxProps } from '../box';
+export declare 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 = {
+    overrides?: ColorPickerOverrides;
+    value?: string;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+    heading?: string;
+    resetButtonLabel?: string;
+    enableGradientSelector?: boolean;
+};
+export declare type GradientColorResult = {
+    gradientType: (typeof GRADIENT_TYPE)[keyof typeof GRADIENT_TYPE];
+    firstColor: string;
+    secondColor: string;
+    degree: [number];
+    endPoints: [number, number];
+};
+export declare 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 comma
+     * @example '#ffffff,#1c1c1f'
+     */
+    mergedStringColor: string;
+    /** The theme the color was set on
+     */
+    sourceTheme?: 'light' | 'dark';
+};
+export declare type OnChange = (colorString?: string, colorObj?: {
+    type: 'solid';
+    colorResultObj?: ColorResult;
+    adaptiveThemeColors?: AdaptiveThemeColors;
+} | {
+    type: 'gradient';
+    colorResultObj?: GradientColorResult;
+    adaptiveThemeColors?: undefined;
+}) => void;
+export declare type GradientColorPickerProps = {
+    color?: string;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+};
+export declare type ColorSelectorProps = {
+    selectedTab: number;
+    color?: string;
+    onChange?: OnChange;
+    onChangeComplete?: OnChange;
+    overrides?: ColorPickerOverrides;
+    setColor: (color: string | undefined) => void;
+};
+export declare type CustomColorSelectorProps = {
+    color?: string;
+    onChange: (color: Color | {
+        hex: string;
+    }) => void;
+    hex?: ColorResult['hex'];
+    rgb?: ColorResult['rgb'];
+    onChangeComplete: (color: Color | {
+        hex: string;
+    }) => void;
+};

package/color-picker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });