@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/color-picker/ColorPicker.js

@@ -1,70 +1,90 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
+exports.ColorPicker = exports.getOnChangeWithTheme = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 // Components
 var typography_1 = require("../typography");
 var box_1 = require("../box");
-var reset_color_1 = (0, tslib_1.__importDefault)(require("../icon/components/reset-color"));
-var button_1 = require("../button");
-var ColorSelector_1 = (0, tslib_1.__importDefault)(require("./ColorSelector"));
+var ColorSelector_1 = tslib_1.__importDefault(require("./ColorSelector"));
 var select_1 = require("../select");
 var styled_component_1 = require("./styled-component");
-//Utils and Constants
+// Utils and Constants
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var colors_1 = require("./colors");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var theme_1 = require("../theme");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 var utils_1 = require("./utils");
-var RESET_CLASSNAME = [
-    'spr-text-01 hover:spr-text-04',
-    function (_a) {
-        var theme = _a.theme;
-        return ({
-            ':disabled': {
-                color: theme.spr.text01,
-                ':hover': {
-                    color: theme.spr.text01,
-                },
-            },
-        });
-    },
-];
+var adaptiveThemeColor_1 = require("./adaptiveThemeColor");
+var colors_2 = require("../helpers/colors");
+/**
+ * Attach appropriate adaptive theme color values to the data being passed in changeCallbacks
+ */
+function getOnChangeWithTheme(changeCallback, isDarkMode) {
+    return function (colorValue, colorObj) {
+        if (!colorValue)
+            return changeCallback(colorValue, colorObj);
+        var colorString = typeof colorValue === 'string' ? colorValue : (0, colors_2.RgbToHex)(colorValue);
+        var currentTheme = isDarkMode ? 'dark' : 'light';
+        var lightHex = !isDarkMode ? colorString : (0, adaptiveThemeColor_1.invertColor)(colorString);
+        var darkHex = isDarkMode ? colorString : (0, adaptiveThemeColor_1.invertColor)(colorString);
+        var adaptiveThemeColors = {
+            light: lightHex,
+            dark: darkHex,
+            mergedStringColor: "".concat(lightHex, ";").concat(darkHex),
+            sourceTheme: currentTheme,
+        };
+        var newColorObj = !colorObj || colorObj.type === 'gradient' ? colorObj : tslib_1.__assign(tslib_1.__assign({}, colorObj), { adaptiveThemeColors: adaptiveThemeColors });
+        return changeCallback(colorString, newColorObj);
+    };
+}
+exports.getOnChangeWithTheme = getOnChangeWithTheme;
 var ColorPicker = function (_a) {
     var _b;
-    var value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChange = _c === void 0 ? noop_1.default : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? noop_1.default : _d, resetButtonLabel = _a.resetButtonLabel, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e;
+    var _value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChangeProp = _c === void 0 ? noop_1.default : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? noop_1.default : _d, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e, _f = _a.enableAlphaSelector, enableAlphaSelector = _f === void 0 ? false : _f, colorPalette = _a.colorPalette, presets = _a.presets, noReset = _a.noReset, renderColorSuggestionPanel = _a.renderColorSuggestionPanel;
+    var theme = (0, theme_1.useTheme)().theme;
+    var isDarkMode = (0, themeHelpers_1.isDarkTheme)(theme);
+    // support extracting the correct hex if a mergedStringColor is provided
+    var value = (0, utils_1.getHexFromInput)(_value, isDarkMode, enableAlphaSelector);
     var colorSet = (0, react_1.useMemo)(function () { return (0, colors_1.getColorSet)(); }, []);
     var locale = (0, locale_1.useLocale)();
-    var _f = (0, utils_1.getColorSelectorOptions)(locale), COLOR_PALETTE_OPTION = _f.COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION = _f.SOLID_COLOR_OPTION, GRADIENT_COLOR_OPTION = _f.GRADIENT_COLOR_OPTION;
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(value), 2), color = _g[0], setColor = _g[1];
-    var _h = (0, tslib_1.__read)((0, react_1.useState)(value), 2), prevValue = _h[0], setPrevValue = _h[1];
-    if (prevValue !== value) {
+    var _g = (0, utils_1.getColorSelectorOptions)(locale), COLOR_PALETTE_OPTION = _g.COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION = _g.SOLID_COLOR_OPTION, GRADIENT_COLOR_OPTION = _g.GRADIENT_COLOR_OPTION;
+    var _h = tslib_1.__read((0, react_1.useState)(value), 2), color = _h[0], setColor = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(value), 2), prevValue = _j[0], setPrevValue = _j[1];
+    if (value !== prevValue) {
         setPrevValue(value);
         setColor(value);
     }
-    var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
-        if (colorSet.has(value) || value === undefined)
+    var _k = tslib_1.__read((0, react_1.useState)(function () {
+        if (value === undefined || colorSet.has(value))
             return [COLOR_PALETTE_OPTION];
-        else if (enableGradientSelector && (value === null || value === void 0 ? void 0 : value.toLowerCase().includes('gradient')))
+        if (enableGradientSelector && (value === null || value === void 0 ? void 0 : value.toLowerCase().includes('gradient')))
             return [GRADIENT_COLOR_OPTION];
-        else
-            return [SOLID_COLOR_OPTION];
-    }), 2), selectedTab = _j[0], setSelectedTab = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, typography_1.Typography), 2), Heading = _k[0], headingProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _l[0], rootProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Select, select_1.Select), 2), SelectOverride = _m[0], selectProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ResetButton, button_1.Button), 2), ResetButtonOverride = _o[0], resetButtonProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ColorSelectorContainer, box_1.Box), 2), ColorSelectorContainer = _p[0], colorSelectorContainerProps = _p[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({}, rootProps, { children: [heading ? ((0, jsx_runtime_1.jsx)(Heading, (0, tslib_1.__assign)({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, (0, jsx_runtime_1.jsx)(SelectOverride
+        return [SOLID_COLOR_OPTION];
+    }), 2), selectedTab = _k[0], setSelectedTab = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, typography_1.Typography), 2), Heading = _l[0], headingProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _m[0], rootProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Select, select_1.Select), 2), SelectOverride = _o[0], selectProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ColorSelectorContainer, box_1.Box), 2), ColorSelectorContainer = _p[0], colorSelectorContainerProps = _p[1];
+    var handleChange = (0, react_1.useMemo)(function () {
+        var onChange = function (colorString, colorObj) {
+            onChangeProp(colorString, colorObj);
+            setColor(colorString);
+        };
+        return enableGradientSelector ? onChange : getOnChangeWithTheme(onChange, isDarkMode);
+    }, [enableGradientSelector, isDarkMode, onChangeProp]);
+    var handleChangeComplete = enableGradientSelector
+        ? onChangeComplete
+        : getOnChangeWithTheme(onChangeComplete, isDarkMode);
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({}, rootProps, { children: [heading ? ((0, jsx_runtime_1.jsx)(Heading, tslib_1.__assign({ "$as": "div", className: "spr-text-secondary mb-1", weight: "semibold", variant: "body-md" }, headingProps, { children: heading }))) : null, (0, jsx_runtime_1.jsx)(SelectOverride
             // autoFocus
-            , (0, tslib_1.__assign)({ 
+            , tslib_1.__assign({ 
                 // autoFocus
-                clearable: false, virtual: false, options: (0, tslib_1.__spreadArray)([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], (0, tslib_1.__read)((enableGradientSelector ? [GRADIENT_COLOR_OPTION] : [])), false), value: selectedTab, required: true, searchable: false, type: "select", placeholder: locale.colorPicker.selectColorLabel, onChange: function (e) { return setSelectedTab(e.value); } }, selectProps), void 0), (0, jsx_runtime_1.jsx)(ColorSelectorContainer, (0, tslib_1.__assign)({ className: "w-64" }, colorSelectorContainerProps, { children: (0, jsx_runtime_1.jsx)(ColorSelector_1.default, { selectedTab: (_b = selectedTab[0].id) !== null && _b !== void 0 ? _b : 1, color: color, setColor: function (color) { return setColor(color); }, overrides: overrides, onChange: onChange, onChangeComplete: onChangeComplete }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex justify-start " }, { children: (0, jsx_runtime_1.jsx)(ResetButtonOverride, (0, tslib_1.__assign)({ startEnhancer: (0, jsx_runtime_1.jsx)(reset_color_1.default, { size: 12 }, void 0), variant: "minimal", size: "xxxs", className: RESET_CLASSNAME, disabled: !value, onClick: function () {
-                        setColor(undefined);
-                        onChange(undefined);
-                        onChangeComplete(undefined);
-                    } }, resetButtonProps, { children: resetButtonLabel !== null && resetButtonLabel !== void 0 ? resetButtonLabel : locale.colorPicker.resetButtonLabel }), void 0) }), void 0)] }), void 0));
+                clearable: false, virtual: false, options: tslib_1.__spreadArray([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], tslib_1.__read((enableGradientSelector ? [GRADIENT_COLOR_OPTION] : [])), false), value: selectedTab, required: true, searchable: false, backspaceRemoves: false, type: "select", placeholder: locale.colorPicker.selectColorLabel, onChange: function (e) { return setSelectedTab(e.value); } }, selectProps)), (0, jsx_runtime_1.jsx)(ColorSelectorContainer, tslib_1.__assign({ className: "mt-4", style: { width: selectedTab[0] !== COLOR_PALETTE_OPTION && enableAlphaSelector ? '309px' : '276px' } }, colorSelectorContainerProps, { children: (0, jsx_runtime_1.jsx)(ColorSelector_1.default, { selectedTab: (_b = selectedTab[0].id) !== null && _b !== void 0 ? _b : 1, color: color, overrides: overrides, onChange: handleChange, onChangeComplete: handleChangeComplete, enableAlphaSelector: enableAlphaSelector, colorPalette: colorPalette, presets: presets, noReset: noReset, renderColorSuggestionPanel: renderColorSuggestionPanel }) }))] })));
 };
 exports.ColorPicker = ColorPicker;
+exports.ColorPicker.displayName = 'ColorPicker';
+exports.ColorPicker.__standard = 'Component';

package/color-picker/ColorSelector.d.ts

@@ -1,6 +1,7 @@
-import { ColorSelectorProps } from './types';
+import { type ReactElement } from 'react';
+import type { ColorSelectorProps } from './types';
 declare const ColorSelector: {
-    ({ selectedTab, color, onChange, onChangeComplete, overrides, setColor, }: ColorSelectorProps): import("react/jsx-runtime").JSX.Element;
+    ({ selectedTab, color, onChange, onChangeComplete, overrides, enableAlphaSelector, colorPalette, presets, noReset, renderColorSuggestionPanel, }: ColorSelectorProps): ReactElement;
     displayName: string;
 };
 export default ColorSelector;

package/color-picker/ColorSelector.js

@@ -2,32 +2,50 @@
 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 noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 var ColorPalette_1 = require("./ColorPalette");
 var CustomColorSelector_1 = require("./CustomColorSelector");
-var GradientColorPicker_1 = (0, tslib_1.__importDefault)(require("./GradientColorPicker"));
+var GradientColorPicker_1 = tslib_1.__importDefault(require("./GradientColorPicker"));
+var colors_1 = require("../helpers/colors");
 var constants_1 = require("./constants");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var colors_2 = require("./colors");
 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 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, enableAlphaSelector = _a.enableAlphaSelector, colorPalette = _a.colorPalette, presets = _a.presets, noReset = _a.noReset, renderColorSuggestionPanel = _a.renderColorSuggestionPanel;
     var COLOR_PALETTE = constants_1.TAB_IDS.COLOR_PALETTE, GRADIENT_COLOR = constants_1.TAB_IDS.GRADIENT_COLOR;
+    var handlePaletteChange = (0, react_1.useCallback)(function (colorHex) {
+        onChange(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+        onChangeComplete(colorHex, { type: constants_1.COLOR_TYPE.SOLID });
+    }, [onChange, onChangeComplete]);
+    var handleCustomChange = (0, react_1.useCallback)(function (colorObject) {
+        if (!colorObject) {
+            onChange(undefined, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+        }
+        else {
+            var colorHex = (0, colors_1.RgbToHex)(colorObject.rgb);
+            onChange(colorHex, {
+                type: constants_1.COLOR_TYPE.SOLID,
+                colorResultObj: colorObject,
+            });
+        }
+    }, [onChange]);
+    var handleCustomChangeComplete = (0, react_1.useCallback)(function (colorObject) {
+        if (!colorObject)
+            onChangeComplete(undefined, { type: constants_1.COLOR_TYPE.SOLID, colorResultObj: colorObject });
+        else {
+            onChangeComplete((0, colors_1.RgbToHex)(colorObject.rgb), {
+                type: constants_1.COLOR_TYPE.SOLID,
+                colorResultObj: colorObject,
+            });
+        }
+    }, [onChangeComplete]);
     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));
+        return ((0, jsx_runtime_1.jsx)(ColorPalette_1.ColorPalette, { color: color, onChange: handlePaletteChange, overrides: overrides, colorPalette: colorPalette, presets: presets, noReset: noReset }));
     }
-    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));
+    if (selectedTab === GRADIENT_COLOR) {
+        return ((0, jsx_runtime_1.jsx)(GradientColorPicker_1.default, { color: color, onChange: onChange, onChangeComplete: onChangeComplete, enableAlphaSelector: enableAlphaSelector }));
     }
+    return ((0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: color ? (0, colors_1.hexToRgb)(color) : colors_2.RESET_COLOR, onChange: handleCustomChange, onChangeComplete: handleCustomChangeComplete, enableAlphaSelector: enableAlphaSelector, renderColorSuggestionPanel: renderColorSuggestionPanel }));
 };
 ColorSelector.displayName = 'ColorSelector';
 exports.default = ColorSelector;

package/color-picker/CustomColorSelector.d.ts

@@ -1,3 +1,10 @@
-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>;
+import { type ReactElement } from 'react';
+import { type RGBColor } from 'react-color';
+import type { CustomColorSelectorProps } from './types';
+import type { ClassName, Styles } from '../types';
+export declare const ColorPreview: ({ color, className, style, }: {
+    color?: RGBColor | undefined;
+    className?: ClassName;
+    style?: Styles;
+}) => ReactElement;
+export declare const CustomColorSelector: import("react").ComponentClass<CustomColorSelectorProps & import("react-color/lib/components/common/ColorWrap").ExportedColorProps, any>;

package/color-picker/CustomColorSelector.js

@@ -1,41 +1,146 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomColorSelector = void 0;
+exports.CustomColorSelector = exports.ColorPreview = 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;
+var colors_1 = require("../helpers/colors");
+var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
+var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: function (_a) {
+        var rtlCompatible = _a.rtlCompatible;
+        return rtlCompatible({ transform: 'translate(-50%, -2px)' });
+    }, className: "absolute spr-shadow-200 cursor-pointer w-4 h-4 rounded-full spr-bg-primary" })); };
+var ColorPreview = function (_a) {
+    var color = _a.color, className = _a.className, style = _a.style;
+    var _b = color !== null && color !== void 0 ? color : {}, r = _b.r, g = _b.g, b = _b.b, a = _b.a;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: ['w-8 h-8 rounded-full shrink-0 border border-solid spr-border-primary relative', className], style: style }, { children: [(0, jsx_runtime_1.jsx)(transparentBackground_1.default, { className: "rounded-full h-full w-full absolute top-0 left-0 p-px" }), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { backgroundColor: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a !== null && a !== void 0 ? a : 1, ")") }, className: "rounded-full h-full w-full absolute top-0 left-0 border border-solid spr-border-inverse" })] })));
+};
+exports.ColorPreview = ColorPreview;
+var EDITABLE_INPUT_STYLES = {
+    input: {
+        width: '100%',
+        height: '32px',
+        textAlign: 'center',
+        fontSize: '14px',
+        lineHeight: '150%',
+        color: 'var(--spr-text-secondary, #252627)',
+        borderWidth: '1px',
+        borderColor: 'var(--spr-border-primary, #ECEDEE)',
+        backgroundColor: 'var(--spr-bg-primary, #FFFFFF)',
+        borderRadius: '8px',
+    },
+    label: {
+        width: '100%',
+        textAlign: 'center',
+        fontSize: '14px',
+        lineHeight: '150%',
+        color: 'var(--spr-text-primary, #1E2022)',
+        marginBlockEnd: '0.4rem',
+        display: 'block',
+    },
+    wrap: { display: 'flex', flexDirection: 'column-reverse' },
+};
+var CustomEditableInput = function (_a) {
+    var _b;
+    var label = _a.label, value = _a.value, onChange = _a.onChange;
+    var _c = tslib_1.__read((0, react_1.useState)(null), 2), editableInput = _c[0], setInput = _c[1];
+    var typedValue = (0, react_1.useRef)((_b = {}, _b[label] = value, _b));
+    var handleChange = (0, react_1.useCallback)(function (data) {
+        typedValue.current = data;
+    }, []);
+    (0, react_1.useEffect)(function () {
+        // Sync typedValue to value if value changes due to another input being edited
+        if (label in typedValue.current && typedValue.current[label] !== value) {
+            typedValue.current[label] = value;
+        }
+    }, [label, value]);
+    (0, react_1.useEffect)(function () {
+        if (!editableInput)
+            return undefined;
+        // @ts-ignore -- @types/react-color doesn't properly include types for input
+        var input = editableInput.input;
+        var fireChange = function () {
+            onChange(typedValue.current);
+        };
+        var keydownHandler = function (event) {
+            if (event.type === 'keydown' && event.key === 'Enter')
+                fireChange();
+        };
+        input.addEventListener('blur', fireChange);
+        input.addEventListener('keydown', keydownHandler);
+        return function () {
+            input.removeEventListener('blur', fireChange);
+            input.removeEventListener('keydown', keydownHandler);
+        };
+    }, [editableInput, label, onChange]);
+    return ((0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
+};
+function getNumberWithFallback(input, fallback) {
+    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
+    if (!input)
+        return _fallback;
+    if (Number.isNaN(+input))
+        return _fallback;
+    return parseInt(input);
+}
+var ColorPickerComponent = function (_props) {
+    // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
+    // but @types/react-color simply passes the types through CustomPicker as-is
+    // We forward CustomColorSelectorProps to the component signature but internally use InternalCustomColorSelectorProps
+    var props = _props;
+    var _hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
     // 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 flikering issue
+    // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
+    var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // react-color doesn't support alpha hexes, so we need to insert it ourselves
+    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, a);
+    var handleHueChange = (0, react_1.useCallback)(function (data) {
+        // If alpha was zero and the saturation/lightness is changed, reset alpha to full
+        if ('a' in data && data.a === 0) {
+            onChange(tslib_1.__assign(tslib_1.__assign({}, data), { a: 1 }));
+        }
+        else
+            onChange(data);
+    }, [onChange]);
     var handleChange = (0, react_1.useCallback)(function (data) {
-        if (data.HEX) {
-            onChange({ hex: data.HEX });
-            onChangeComplete({ hex: data.HEX });
+        // react-color emitted data is very dynamic and uses properties from labels
+        if ('Hex' in data) {
+            var newHex = data.Hex;
+            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
+            var newRgba = enableAlphaSelector ? parsedRgba : tslib_1.__assign(tslib_1.__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
+            onChange(newRgba);
+            // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
+            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
+            if ((0, colors_1.isValidHex)(newHex))
+                onChangeComplete({ rgb: newRgba });
         }
         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) });
+            var _a = tslib_1.__read(Object.keys(data), 1), changedKey = _a[0];
+            // Reset alpha IF:
+            // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
+            var resetAlpha = changedKey !== 'A' && a === 0 && data[changedKey] !== { R: r, G: g, B: b }[changedKey];
+            var newRgba = {
+                r: getNumberWithFallback(data.R, r),
+                g: getNumberWithFallback(data.G, g),
+                b: getNumberWithFallback(data.B, b),
+                a: enableAlphaSelector && !resetAlpha ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
+            };
+            onChange(newRgba);
+            onChangeComplete({ rgb: newRgba });
         }
-    }, [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));
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex gap-2 justify-between ml-2" }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col items-start gap-2" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, tslib_1.__assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsx)(exports.ColorPreview, { color: rgb })] })), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: '261px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Alpha, tslib_1.__assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "grid w-full gap-2", 
+                        // 5 columns with alpha, 4 columns without
+                        style: {
+                            gridTemplateColumns: "".concat(enableAlphaSelector ? '73' : '99', "fr").concat(' 51fr'.repeat(enableAlphaSelector ? 4 : 3)),
+                        } }, { children: [(0, jsx_runtime_1.jsx)(CustomEditableInput, { label: "Hex", value: hex, onChange: handleChange }), (0, jsx_runtime_1.jsx)(CustomEditableInput, { label: "R", value: r, onChange: handleChange }), (0, jsx_runtime_1.jsx)(CustomEditableInput, { label: "G", value: g, onChange: handleChange }), (0, jsx_runtime_1.jsx)(CustomEditableInput, { label: "B", value: b, onChange: handleChange }), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(CustomEditableInput, { label: "A", value: a !== undefined ? Math.round(a * 100) : 1, onChange: handleChange })) : null] }))] }))] })));
 };
 ColorPickerComponent.displayName = 'ColorPickerComponent';
 exports.CustomColorSelector = (0, react_color_1.CustomPicker)(ColorPickerComponent);

package/color-picker/GradientColorPicker.d.ts

@@ -1,6 +1,4 @@
-import { GradientColorPickerProps } from './types';
-declare const GradientColorPicker: {
-    ({ color, onChange, onChangeComplete }: GradientColorPickerProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+import type { GradientColorPickerProps } from './types';
+declare const GradientColorPicker: import("react").MemoExoticComponent<({ color, onChange, onChangeComplete, enableAlphaSelector }: GradientColorPickerProps) => import("react/jsx-runtime").JSX.Element>;
 export default GradientColorPicker;

package/color-picker/GradientColorPicker.js

@@ -3,20 +3,22 @@ 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 noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 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 CustomColorSelector_1 = require("./CustomColorSelector");
+var Swatch_1 = require("./Swatch");
 var constants_1 = require("./constants");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var locale_1 = require("../locale");
 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 colors_1 = require("../helpers/colors");
+var LabelOverrides = { Label: { className: 'spr-text-primary font-600 text-16 leading-150' } };
+var GradientColorPicker = (0, react_1.memo)(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, _d = _a.enableAlphaSelector, enableAlphaSelector = _d === void 0 ? false : _d;
+    var locale = (0, locale_1.useLocale)();
+    var _e = tslib_1.__read((0, react_1.useState)(function () {
         var gradientColorData = (0, utils_1.extractColorsFromGradient)(color);
         return (gradientColorData !== null && gradientColorData !== void 0 ? gradientColorData : {
             gradientType: 'linear',
@@ -25,44 +27,52 @@ var GradientColorPicker = function (_a) {
             degree: [0],
             endPoints: [0, 100],
         });
-    }), 2), gradientColorObj = _d[0], setGradientColorObj = _d[1];
+    }), 2), gradientColorObj = _e[0], setGradientColorObj = _e[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 _f = tslib_1.__read((0, react_1.useState)(utils_1.SELECTED_COLOR.FIRST_COLOR), 2), currentColorSelected = _f[0], setCurrentSelectedColor = _f[1];
+    var currentColorAsRgb = (0, react_1.useMemo)(function () { return (0, colors_1.hexToRgb)(currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR ? firstColor : secondColor); }, [currentColorSelected, firstColor, secondColor]);
+    var updateGradient = function (changedValues) {
+        var changeHandlers = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            changeHandlers[_i - 1] = arguments[_i];
+        }
+        var colorResultObj = tslib_1.__assign(tslib_1.__assign({}, gradientColorObj), changedValues);
+        var gradientColorString = (0, utils_1.getGradientColorString)(colorResultObj);
+        setGradientColorObj(colorResultObj);
+        changeHandlers.forEach(function (handle) { return handle(gradientColorString, { type: 'gradient', colorResultObj: colorResultObj }); });
+    };
+    var handleGradientTypeChange = function (e) {
+        return updateGradient({ gradientType: e.target.value }, onChange, onChangeComplete);
+    };
+    var handleDegreeChange = function (_a) {
+        var value = _a.value;
+        return updateGradient({ degree: value }, onChange);
+    };
+    var handleDegreeChangeComplete = function (_a) {
+        var value = _a.value;
+        return updateGradient({ degree: value }, onChangeComplete);
+    };
+    var handleEndPointsChange = function (_a) {
         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) {
+        return updateGradient({ endPoints: value }, onChange);
+    };
+    var handleEndPointsChangeComplete = function (_a) {
         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));
-};
+        return updateGradient({ endPoints: value }, onChangeComplete);
+    };
+    var handleCustomColorChange = function (_a) {
+        var _b;
+        var newRgb = _a.rgb;
+        return updateGradient((_b = {},
+            _b[currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR ? 'firstColor' : 'secondColor'] = (0, colors_1.RgbToHex)(newRgb),
+            _b), onChange);
+    };
+    var handleCustomColorChangeComplete = function (_a) {
+        var _b;
+        var newRgb = _a.rgb;
+        return updateGradient(tslib_1.__assign(tslib_1.__assign({}, gradientColorObj), (_b = {}, _b[currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR ? 'firstColor' : 'secondColor'] = (0, colors_1.RgbToHex)(newRgb), _b)), onChangeComplete);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-2", overrides: LabelOverrides, label: locale.colorPicker.gradientDirection, layout: "vertical" }, { children: (0, jsx_runtime_1.jsxs)(radio_1.RadioGroup, tslib_1.__assign({ value: gradientType, onChange: handleGradientTypeChange, size: "medium" }, { children: [(0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.LINEAR }, { children: constants_1.GRADIENT_TYPE.LINEAR })), (0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.RADIAL }, { children: constants_1.GRADIENT_TYPE.RADIAL }))] })) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientDegree, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", disabled: gradientType === constants_1.GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: handleDegreeChange, onFinalChange: handleDegreeChangeComplete }) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientEndPoints, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", value: endPoints, max: 100, onChange: handleEndPointsChange, onFinalChange: handleEndPointsChangeComplete }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex justify-between items-center mb-3" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: firstColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.FIRST_COLOR); }, "aria-label": locale.colorPicker.selectFirstColorAriaLabel }) })), (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: secondColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.SECOND_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.SECOND_COLOR); }, "aria-label": locale.colorPicker.selectSecondColorAriaLabel }) }))] })), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { background: (0, utils_1.getGradientColorString)(gradientColorObj) }, className: "mb-4 w-full h-6 rounded-48" }), (0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: currentColorAsRgb, onChange: handleCustomColorChange, onChangeComplete: handleCustomColorChangeComplete, enableAlphaSelector: enableAlphaSelector })] }));
+});
 GradientColorPicker.displayName = 'GradientColorPicker';
 exports.default = GradientColorPicker;

package/color-picker/Swatch.d.ts

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