@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/button-group/styled-components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderButtonGroupChild = exports.hyperspaceButtonOverrides = exports.StyledRoot = void 0;
+exports.renderButtonGroupChild = exports.hyperspaceButtonOverrides = exports.StyledRoot = exports.getButtonGroupSizeTheme = exports.buttonGroupButtonSizeMap = void 0;
 var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var isArray_1 = (0, tslib_1.__importDefault)(require("lodash/isArray"));
@@ -9,29 +9,73 @@ var styled_components_1 = require("../button/styled-components");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
 // NOTE - This method is meant to be used by ButtonGroup only and not a generic one. This shouldn't be used to take style specific decisions.
 var isHyperSpaceUI = function (theme) { return theme.name.includes('hyperspace'); };
-exports.StyledRoot = (0, styled_1.default)('div', 'inline-flex items-center', function (_a) {
+exports.buttonGroupButtonSizeMap = {
+    xxxs: {
+        height: '20px',
+        marginTop: '1px',
+        marginBottom: '1px',
+        containerBorderRadius: '5px',
+    },
+    xs: {
+        height: '26px',
+        marginTop: '2px',
+        marginBottom: '2px',
+        containerBorderRadius: '7px',
+    },
+    sm: {
+        height: '26px',
+        marginTop: '2px',
+        marginBottom: '2px',
+        containerBorderRadius: '7px',
+    },
+    md: {
+        height: '32px',
+        marginTop: '3px',
+        marginBottom: '3px',
+        containerBorderRadius: '8px',
+    },
+    lg: {
+        height: '32px',
+        marginTop: '3px',
+        marginBottom: '3px',
+        containerBorderRadius: '8px',
+    },
+};
+var getButtonGroupSizeTheme = function (theme, size, prop) {
+    var _a, _b;
+    return ((_a = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'buttonGroup', size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _a === void 0 ? void 0 : _a[prop]) ||
+        ((_b = exports.buttonGroupButtonSizeMap[size || (0, themeHelpers_1.getDefaultSize)(theme)]) === null || _b === void 0 ? void 0 : _b[prop]) ||
+        exports.buttonGroupButtonSizeMap[(0, themeHelpers_1.getDefaultSize)(theme)][prop];
+};
+exports.getButtonGroupSizeTheme = getButtonGroupSizeTheme;
+exports.StyledRoot = (0, styled_1.default)('div', 'inline-flex px-0.5 items-center', function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
     if (!isHyperSpaceUI(theme))
         return {};
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: theme.spr.ui01 }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.spr.ui03)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(px2rem(8)));
+    var containerBorderRadius = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'containerBorderRadius');
+    var paddingX = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginTop');
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ gap: px2rem(3), backgroundColor: theme.spr.ui01 }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.spr.ui03)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(containerBorderRadius)), { paddingLeft: paddingX, paddingRight: paddingX });
 });
 var isSelected = function (selected, index) { return ((0, isArray_1.default)(selected) ? selected.includes(index) : selected === index); };
 var isAnyButtonSelected = function (selected) { return (typeof selected === 'number' && selected >= 0) || Boolean(selected === null || selected === void 0 ? void 0 : selected.length); };
 var hyperspaceButtonOverrides = function (utils, props) {
     var theme = utils.theme, px2rem = utils.px2rem;
-    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected;
-    return (0, merge_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ marginTop: px2rem(2), marginBottom: px2rem(2), 
-        // To keep all the buttons equidistant remove marginLeft from all buttons except the first one
-        marginLeft: $index === 0 ? px2rem(3) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(3) : px2rem(2), fontSize: px2rem(12), lineHeight: px2rem(16) }, (0, longHandHelpers_1.borderRadius)(px2rem(5))), (!$isIconButton
+    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected, $size = props.$size;
+    var height = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'height');
+    var marginTop = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginTop');
+    var marginBottom = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginBottom');
+    return (0, merge_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ fontSize: px2rem(12), lineHeight: px2rem(16) }, (0, longHandHelpers_1.borderRadius)(px2rem(4))), (!$isIconButton
         ? {
             paddingTop: px2rem(8),
             paddingBottom: px2rem(8),
             paddingLeft: px2rem(12),
             paddingRight: px2rem(12),
         }
-        : { height: px2rem(32), width: px2rem(32), marginTop: px2rem(3), marginBottom: px2rem(3) })), (0, styled_components_1.createButtonStyles)({
+        : { height: height, width: height, marginTop: marginTop, marginBottom: marginBottom })), (0, styled_components_1.createButtonStyles)({
         color: theme.spr.text01,
         hoverColor: theme.spr.text01,
         activeColor: theme.spr.text04,
@@ -45,8 +89,11 @@ var hyperspaceButtonOverrides = function (utils, props) {
 exports.hyperspaceButtonOverrides = hyperspaceButtonOverrides;
 var baseButtonStyle = function (childrenCount, index, utils, props) {
     var theme = utils.theme;
-    var $variant = props.$variant;
-    var baseStyles = { fontWeight: theme.fontWeight.normal };
+    var $variant = props.$variant, $size = props.$size;
+    var height = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'height');
+    var marginTop = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginTop');
+    var marginBottom = (0, exports.getButtonGroupSizeTheme)(theme, $size, 'marginBottom');
+    var baseStyles = { fontWeight: theme.fontWeight.normal, height: height, marginTop: marginTop, marginBottom: marginBottom };
     if (isHyperSpaceUI(theme)) {
         return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseStyles), (0, exports.hyperspaceButtonOverrides)(utils, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { $index: index, $childrenCount: childrenCount })));
     }

package/button-group/types.d.ts

@@ -3,6 +3,7 @@ import { Overrides, Override } from '../overrides';
 import { Variant, Size, ClassName, SpacewebComponentProps, Intent } from '../types';
 import { Variant as IconTextButtonVariant } from '../button/IconTextButton';
 import { Shape, ButtonSharedProps } from '../button';
+import { AriaRole } from 'react';
 declare type ButtonGroupOverrides = {
     Root?: Override<any>;
 };
@@ -20,6 +21,7 @@ export declare type ButtonGroupProps = SpacewebComponentProps<{
     intent?: Intent;
     variant?: Variant | IconTextButtonVariant;
     activateOnFocus?: boolean;
+    role?: AriaRole | undefined;
 }>;
 export declare type ButtonGroupChildProps = {
     className?: ClassName;

package/checkbox/basewebAdapters.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from 'baseui/checkbox';
+import type { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from '../baseui/checkbox';
 import { CheckboxProps, StatefulCheckboxProps } from './types';
 declare type BaseuiAdaptedProps = React.ComponentProps<typeof BaseCheckbox> | React.ComponentProps<typeof BaseStatefulCheckbox>;
 declare type SpacewebProps = CheckboxProps | StatefulCheckboxProps;

package/checkbox/basewebAdapters.js

@@ -2,34 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var helpers_1 = require("../helpers");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var styled_components_1 = require("./styled-components");
 var context_1 = require("../form-control/context");
 var useCombinedRef_1 = require("../hooks/useCombinedRef");
+var overrides_1 = require("../overrides");
+var react_1 = require("react");
 function useCheckboxAdapter(props) {
     var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, restProps = (0, tslib_1.__rest)(_a, ["size", "className", "style", "overrides", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
-    var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
-        Root: {
-            style: [className, style, styled_components_1.getRootOverrides],
-        },
-        Checkmark: {
-            style: styled_components_1.getCheckmarkOverrides,
-            props: (0, helpers_1.add$props)({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
-        },
-        Label: {
-            style: styled_components_1.getLabelOverrides,
-            props: (0, helpers_1.add$props)({ size: size }),
-        },
-        // SharedProps for switch component
-        Toggle: {
-            props: (0, helpers_1.add$props)({ size: size, intent: intent }),
-        },
-        ToggleTrack: {
-            props: (0, helpers_1.add$props)({ size: size, intent: intent }),
-        },
-        // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
-        Input: { style: { position: 'static' } },
-    }, overrides);
+    var convertedOverrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            Root: {
+                style: [className, style, styled_components_1.getRootOverrides],
+            },
+            Checkmark: {
+                style: styled_components_1.getCheckmarkOverrides,
+                props: (0, helpers_1.add$props)({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
+            },
+            Label: {
+                style: styled_components_1.getLabelOverrides,
+                props: (0, helpers_1.add$props)({ size: size }),
+            },
+            // SharedProps for switch component
+            Toggle: {
+                props: (0, helpers_1.add$props)({ size: size, intent: intent }),
+            },
+            ToggleTrack: {
+                props: (0, helpers_1.add$props)({ size: size, intent: intent }),
+            },
+            // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
+            Input: {
+                style: { position: 'static' },
+                props: {
+                    'aria-required': restProps['aria-required'],
+                    'aria-checked': !!restProps.checked,
+                },
+            },
+        }, overrides);
+    }, [$outlineColor, $outlineOffset, $outlineStyle, $outlineWidth, className, intent, overrides, restProps, size, style]);
     var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: convertedOverrides, inputRef: inputRefObj, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }

package/checkbox/checkbox.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulCheckbox = exports.Checkbox = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var checkbox_1 = require("baseui/checkbox");
+var checkbox_1 = require("../baseui/checkbox");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
 // @ts-ignore
 checkbox_1.Checkbox.displayName = 'BaseUICheckbox';

package/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
-export type { StateReducer, StatefulContainerProps, CheckboxOverrides, CheckboxState } from 'baseui/checkbox';
-export { STATE_TYPE, STYLE_TYPE } from 'baseui/checkbox';
+export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from '../baseui/checkbox';
+export type { StateReducer, StatefulContainerProps, CheckboxOverrides, CheckboxState } from '../baseui/checkbox';
+export { STATE_TYPE, STYLE_TYPE } from '../baseui/checkbox';
 export * from './types';

package/checkbox/index.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var checkbox_1 = require("./checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
 Object.defineProperty(exports, "StatefulCheckbox", { enumerable: true, get: function () { return checkbox_1.StatefulCheckbox; } });
-var checkbox_2 = require("baseui/checkbox");
+var checkbox_2 = require("../baseui/checkbox");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return checkbox_2.StatefulContainer; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return checkbox_2.StyledRoot; } });
 Object.defineProperty(exports, "StyledCheckmark", { enumerable: true, get: function () { return checkbox_2.StyledCheckmark; } });
@@ -13,7 +13,7 @@ Object.defineProperty(exports, "StyledLabel", { enumerable: true, get: function
 Object.defineProperty(exports, "StyledInput", { enumerable: true, get: function () { return checkbox_2.StyledInput; } });
 Object.defineProperty(exports, "StyledToggle", { enumerable: true, get: function () { return checkbox_2.StyledToggle; } });
 Object.defineProperty(exports, "StyledToggleTrack", { enumerable: true, get: function () { return checkbox_2.StyledToggleTrack; } });
-var checkbox_3 = require("baseui/checkbox");
+var checkbox_3 = require("../baseui/checkbox");
 Object.defineProperty(exports, "STATE_TYPE", { enumerable: true, get: function () { return checkbox_3.STATE_TYPE; } });
 Object.defineProperty(exports, "STYLE_TYPE", { enumerable: true, get: function () { return checkbox_3.STYLE_TYPE; } });
 (0, tslib_1.__exportStar)(require("./types"), exports);

package/checkbox/styled-components.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var helpers_1 = require("../helpers");
-var intentColor = function (_a, _b, defaultColor) {
+var getBackgroundIntentColor = function (_a, _b, defaultColor) {
     var theme = _a.theme;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
     if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
@@ -20,6 +20,26 @@ var intentColor = function (_a, _b, defaultColor) {
             return theme.spr.supportWarning;
         case 'error':
             return theme.spr.supportError;
+        case 'ai':
+            return theme.spr.clrViolet;
+    }
+};
+var getBorderIntentColor = function (_a, _b, defaultColor) {
+    var theme = _a.theme;
+    var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
+    if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
+    switch ($intent) {
+        case 'default':
+        case 'ai':
+        default: {
+            return defaultColor;
+        }
+        case 'success':
+            return theme.spr.supportSuccess;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'error':
+            return theme.spr.supportError;
     }
 };
 var getBorderColor = function (utils, props) {
@@ -29,40 +49,57 @@ var getBorderColor = function (utils, props) {
         return 'transparent';
     }
     if ($disabled) {
-        return (0, helpers_1.hex2rgb)(intentColor(utils, props, theme.spr.iconDisable), '0.5');
+        return (0, helpers_1.hex2rgb)(getBorderIntentColor(utils, props, theme.spr.iconDisable), '0.5');
     }
     if ($isHovered || $isFocusVisible) {
-        return intentColor(utils, props, theme.spr.border06);
+        return getBorderIntentColor(utils, props, theme.spr.border06);
     }
-    return intentColor(utils, props, theme.spr.border04);
+    return getBorderIntentColor(utils, props, theme.spr.border04);
 };
 var getBackgroundColor = function (utils, props) {
     var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;
     if ($disabled) {
         if ($checked || $isIndeterminate) {
-            return (0, helpers_1.hex2rgb)(intentColor(utils, props), '0.5');
+            return (0, helpers_1.hex2rgb)(getBackgroundIntentColor(utils, props), '0.5');
         }
         return 'transparent';
     }
     if ($checked || $isIndeterminate) {
-        return intentColor(utils, props);
+        return getBackgroundIntentColor(utils, props);
     }
     return 'transparent';
 };
+function getLabelPadding(_a, _b) {
+    var _c;
+    var px2rem = _a.px2rem;
+    var $labelPlacement = _b.$labelPlacement, $size = _b.$size;
+    var paddingDirection;
+    switch ($labelPlacement) {
+        case 'top':
+            paddingDirection = 'Bottom';
+            break;
+        case 'bottom':
+            paddingDirection = 'Top';
+            break;
+        case 'left':
+            paddingDirection = 'Right';
+            break;
+        default:
+        case 'right':
+            paddingDirection = 'Left';
+            break;
+    }
+    return _c = {},
+        _c["padding".concat(paddingDirection)] = $size === 'lg' ? px2rem(10) : px2rem(8),
+        _c;
+}
 var getLabelOverrides = function (_a, _b) {
     var px2rem = _a.px2rem, theme = _a.theme;
-    var $disabled = _b.$disabled, $size = _b.$size;
-    var styles = {
-        fontSize: theme.typography.bs2.fontSize,
-        lineHeight: theme.typography.bs2.lineHeight,
-        color: $disabled ? theme.spr.text02 : theme.spr.text01,
-        paddingLeft: px2rem(8),
-        wordBreak: 'break-word',
-    };
+    var $disabled = _b.$disabled, $size = _b.$size, $labelPlacement = _b.$labelPlacement;
+    var styles = (0, tslib_1.__assign)({ fontSize: theme.typography.bs2.fontSize, lineHeight: theme.typography.bs2.lineHeight, color: $disabled ? theme.spr.text02 : theme.spr.text01, wordBreak: 'break-word' }, getLabelPadding({ px2rem: px2rem }, { $labelPlacement: $labelPlacement, $size: $size }));
     if ($size === 'lg') {
         styles.fontSize = theme.typography.bs1.fontSize;
         styles.lineHeight = theme.typography.bs1.lineHeight;
-        styles.paddingLeft = px2rem(10);
     }
     if ($size === 'sm') {
         styles.fontSize = theme.typography.bs3.fontSize;

package/checkbox/types.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps } from 'baseui/checkbox';
-import { SharedProps as BaseSharedProps } from 'baseui/input';
+import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps, LabelPlacement } from '../baseui/checkbox';
+import { SharedProps as BaseSharedProps } from '../baseui/input';
 import { OutlineProps } from '../helpers/commonStyles';
 import { Override } from '../overrides';
 import { Intent, SpacewebComponentProps } from '../types';
 export declare type CheckboxSize = 'sm' | 'md' | 'lg';
 export declare type SharedProps = BaseSharedProps & {
     $checked: boolean;
-    $intent: boolean;
+    $intent: Intent;
     $isFocusVisible: boolean;
     $isHovered: boolean;
     $isIndeterminate: boolean;
     $size: CheckboxSize;
+    $labelPlacement: LabelPlacement;
 };
 declare type CommonProps = {
     onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;

package/color-picker/ColorPalette.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ColorPickerOverrides } from './types';
+declare type ContentProps = {
+    color?: string;
+    overrides?: ColorPickerOverrides;
+    onChange: (color?: string) => void;
+};
+export declare const ColorPalette: import("react").NamedExoticComponent<ContentProps>;
+export {};

package/color-picker/ColorPalette.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPalette = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+// import { Typography } from '../typography';
+var box_1 = require("../box");
+var grid_1 = require("../grid");
+var Swatch_1 = require("./Swatch");
+// import { useTheme } from '../theme';
+var overrides_1 = require("../overrides");
+var colors_1 = require("./colors");
+var typography_1 = require("../typography");
+exports.ColorPalette = (0, react_1.memo)(function (_a) {
+    // const { theme } = useTheme();
+    var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange;
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, grid_1.Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, Swatch_1.Swatch), 2), Swatch = _c[0], swatchProps = _c[1];
+    // const sprinklrClrTokens = useMemo(
+    //   () => Object.keys(theme.spr).filter((token: string): boolean => token.startsWith('clr')),
+    //   [theme]
+    // );
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "spr-text-02" }, { children: "Spinklr Presets" }), void 0), (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ className: "mb-3 mt-2", cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.SPRINKLR_PRESET_COLORS.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); }) }), void 0), (0, jsx_runtime_1.jsx)(Swatches, (0, tslib_1.__assign)({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: colors_1.COLOR_PALETTE.map(function (row) {
+                    return row.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, (0, tslib_1.__assign)({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
+                }) }), void 0)] }, void 0));
+});

package/color-picker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ColorPickerProps } from './types';
+export declare const ColorPicker: ({ value, overrides, heading, onChange, onChangeComplete, resetButtonLabel, enableGradientSelector, }: ColorPickerProps) => ReactElement;

package/color-picker/ColorPicker.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = 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 select_1 = require("../select");
+var styled_component_1 = require("./styled-component");
+//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 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 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 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) {
+        setPrevValue(value);
+        setColor(value);
+    }
+    var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        if (colorSet.has(value) || value === undefined)
+            return [COLOR_PALETTE_OPTION];
+        else 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
+            // autoFocus
+            , (0, 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));
+};
+exports.ColorPicker = ColorPicker;

package/color-picker/ColorSelector.d.ts

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

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 flikering 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;