@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/button-group/ButtonGroup.js

@@ -7,14 +7,18 @@ import { useOverrides } from '../overrides';
 import { StyledRoot, renderButtonGroupChild } from './styled-components';
 import useCombinedRefs from '../hooks/useCombinedRef';
 import { useTabsKeyboardNavigation } from '../hooks/useTabsKeyboardNavigation';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var ButtonGroup = forwardRef(function (_a, ref) {
-    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = __rest(_a, ["className", "style", "activateOnFocus", "overrides"]);
-    var _c = useTabsKeyboardNavigation({ activateOnFocus: activateOnFocus }), parentElementRef = _c.parentElementRef, onKeyDown = _c.onKeyDown;
+    var _b;
+    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, role = _a.role, props = __rest(_a, ["className", "style", "activateOnFocus", "overrides", "role"]);
+    var _d = useTabsKeyboardNavigation({ activateOnFocus: activateOnFocus }), parentElementRef = _d.parentElementRef, onKeyDown = _d.onKeyDown;
     var combinedRef = useCombinedRefs(ref, parentElementRef);
-    var _d = __read(useOverrides(overrides.Root, StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+    var theme = useStyle().theme;
+    var _e = __read(useOverrides(overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var renderChild = useMemo(function () { return renderButtonGroupChild.bind(null, __assign(__assign({}, props), { onKeyDown: onKeyDown })); }, [props, onKeyDown]);
-    var sharedProps = add$props(_pick(props, ['intent', 'size', 'variant', 'shape', 'mode']));
-    return (_jsx(Root, __assign({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: Children.map(props.children, renderChild) }), void 0));
+    var sharedProps = add$props(__assign(__assign({}, _pick(props, ['intent', 'variant', 'shape', 'mode'])), { size: (_b = props.size) !== null && _b !== void 0 ? _b : getDefaultSize(theme) }));
+    return (_jsx(Root, __assign({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef, role: role }, sharedProps, rootProps, { children: Children.map(props.children, renderChild) }), void 0));
 });
 ButtonGroup.defaultProps = {
     mode: 'radio',

package/esm/button-group/StatefulButtonGroup.d.ts

@@ -14,6 +14,7 @@ declare const StatefulButtonGroup: import("react").ForwardRefExoticComponent<Omi
     intent?: import("..").Intent | undefined;
     variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: import("react").AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;

package/esm/button-group/styled-components.d.ts

@@ -1,6 +1,39 @@
 import * as React from 'react';
 import { StyleObject, StyleUtils } from '../types';
 import { ButtonGroupChildProps, ButtonGroupProps } from './types';
+export declare const buttonGroupButtonSizeMap: {
+    xxxs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    xs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    sm: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    md: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    lg: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+};
+export declare const getButtonGroupSizeTheme: (theme: any, size: any, prop: any) => any;
 export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const hyperspaceButtonOverrides: (utils: StyleUtils, props: any) => StyleObject;
 export declare const renderButtonGroupChild: (props: Omit<{
@@ -18,6 +51,7 @@ export declare const renderButtonGroupChild: (props: Omit<{
     intent?: import("../types").Intent | undefined;
     variant?: import("../types").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: React.AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("../types").Styles;

package/esm/button-group/styled-components.js

@@ -6,29 +6,72 @@ import { createButtonStyles } from '../button/styled-components';
 import { borderColor, borderRadius, borderStyle, borderWidth } from '../helpers/longHandHelpers';
 import { getFocusVisibleStyles } from '../helpers/commonStyles';
 import styled from '../style/styled';
+import { getComponentSizeTheme, getDefaultSize } from '../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'); };
-export var StyledRoot = styled('div', 'inline-flex items-center', function (_a) {
+export var 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',
+    },
+};
+export var getButtonGroupSizeTheme = function (theme, size, prop) {
+    var _a, _b;
+    return ((_a = getComponentSizeTheme(theme, 'buttonGroup', size, getDefaultSize(theme))) === null || _a === void 0 ? void 0 : _a[prop]) ||
+        ((_b = buttonGroupButtonSizeMap[size || getDefaultSize(theme)]) === null || _b === void 0 ? void 0 : _b[prop]) ||
+        buttonGroupButtonSizeMap[getDefaultSize(theme)][prop];
+};
+export var StyledRoot = styled('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 __assign(__assign(__assign(__assign({ backgroundColor: theme.spr.ui01 }, borderStyle('solid')), borderColor(theme.spr.ui03)), borderWidth('1px')), borderRadius(px2rem(8)));
+    var containerBorderRadius = getButtonGroupSizeTheme(theme, $size, 'containerBorderRadius');
+    var paddingX = getButtonGroupSizeTheme(theme, $size, 'marginTop');
+    return __assign(__assign(__assign(__assign(__assign({ gap: px2rem(3), backgroundColor: theme.spr.ui01 }, borderStyle('solid')), borderColor(theme.spr.ui03)), borderWidth('1px')), borderRadius(containerBorderRadius)), { paddingLeft: paddingX, paddingRight: paddingX });
 });
 var isSelected = function (selected, index) { return (_isArray(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); };
 export 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 _merge(__assign(__assign(__assign(__assign(__assign(__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) }, borderRadius(px2rem(5))), (!$isIconButton
+    var $isIconButton = props.$isIconButton, $index = props.$index, $childrenCount = props.$childrenCount, $isSelected = props.$isSelected, $size = props.$size;
+    var height = getButtonGroupSizeTheme(theme, $size, 'height');
+    var marginTop = getButtonGroupSizeTheme(theme, $size, 'marginTop');
+    var marginBottom = getButtonGroupSizeTheme(theme, $size, 'marginBottom');
+    return _merge(__assign(__assign(__assign(__assign(__assign(__assign({ fontSize: px2rem(12), lineHeight: px2rem(16) }, 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) })), createButtonStyles({
+        : { height: height, width: height, marginTop: marginTop, marginBottom: marginBottom })), createButtonStyles({
         color: theme.spr.text01,
         hoverColor: theme.spr.text01,
         activeColor: theme.spr.text04,
@@ -41,8 +84,11 @@ export var hyperspaceButtonOverrides = function (utils, props) {
 };
 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 = getButtonGroupSizeTheme(theme, $size, 'height');
+    var marginTop = getButtonGroupSizeTheme(theme, $size, 'marginTop');
+    var marginBottom = getButtonGroupSizeTheme(theme, $size, 'marginBottom');
+    var baseStyles = { fontWeight: theme.fontWeight.normal, height: height, marginTop: marginTop, marginBottom: marginBottom };
     if (isHyperSpaceUI(theme)) {
         return __assign(__assign({}, baseStyles), hyperspaceButtonOverrides(utils, __assign(__assign({}, props), { $index: index, $childrenCount: childrenCount })));
     }

package/esm/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/esm/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/esm/checkbox/basewebAdapters.js

@@ -1,33 +1,42 @@
 import { __assign, __rest } from "tslib";
 import { add$props } from '../helpers';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { getCheckmarkOverrides, getLabelOverrides, getRootOverrides } from './styled-components';
 import { useContextualFormProps } from '../form-control/context';
 import { useCombineRefObjects } from '../hooks/useCombinedRef';
+import { mergeOverrides } from '../overrides';
+import { useMemo } from 'react';
 export default function useCheckboxAdapter(props) {
     var _a = 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 = __rest(_a, ["size", "className", "style", "overrides", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
-    var convertedOverrides = useConvertOverrides({
-        Root: {
-            style: [className, style, getRootOverrides],
-        },
-        Checkmark: {
-            style: getCheckmarkOverrides,
-            props: add$props({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
-        },
-        Label: {
-            style: getLabelOverrides,
-            props: add$props({ size: size }),
-        },
-        // SharedProps for switch component
-        Toggle: {
-            props: add$props({ size: size, intent: intent }),
-        },
-        ToggleTrack: {
-            props: 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 = useMemo(function () {
+        return mergeOverrides({
+            Root: {
+                style: [className, style, getRootOverrides],
+            },
+            Checkmark: {
+                style: getCheckmarkOverrides,
+                props: add$props({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
+            },
+            Label: {
+                style: getLabelOverrides,
+                props: add$props({ size: size }),
+            },
+            // SharedProps for switch component
+            Toggle: {
+                props: add$props({ size: size, intent: intent }),
+            },
+            ToggleTrack: {
+                props: 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 = useCombineRefObjects(props.inputRef);
     return __assign(__assign({}, restProps), { overrides: convertedOverrides, inputRef: inputRefObj, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }

package/esm/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from 'baseui/checkbox';
+import { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from '../baseui/checkbox';
 import useCheckboxAdapter from './basewebAdapters';
 // @ts-ignore
 BaseCheckbox.displayName = 'BaseUICheckbox';

package/esm/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/esm/checkbox/index.js

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

package/esm/checkbox/styled-components.js

@@ -2,7 +2,7 @@ import { __assign } from "tslib";
 import { borderColor, borderWidth } from '../helpers/longHandHelpers';
 import { getOutlineStyles } from '../helpers/commonStyles';
 import { hex2rgb } from '../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; }
@@ -17,6 +17,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) {
@@ -26,40 +46,57 @@ var getBorderColor = function (utils, props) {
         return 'transparent';
     }
     if ($disabled) {
-        return hex2rgb(intentColor(utils, props, theme.spr.iconDisable), '0.5');
+        return 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 hex2rgb(intentColor(utils, props), '0.5');
+            return 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;
+}
 export 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 = __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/esm/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/esm/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/esm/color-picker/ColorPalette.js

@@ -0,0 +1,24 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+// import { Typography } from '../typography';
+import { Box } from '../box';
+import { Grid } from '../grid';
+import { Swatch as DefaultSwatch } from './Swatch';
+// import { useTheme } from '../theme';
+import { useOverrides } from '../overrides';
+import { COLOR_PALETTE, SPRINKLR_PRESET_COLORS } from './colors';
+import { Typography } from '../typography';
+export var ColorPalette = memo(function (_a) {
+    // const { theme } = useTheme();
+    var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange;
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, DefaultSwatch), 2), Swatch = _c[0], swatchProps = _c[1];
+    // const sprinklrClrTokens = useMemo(
+    //   () => Object.keys(theme.spr).filter((token: string): boolean => token.startsWith('clr')),
+    //   [theme]
+    // );
+    return (_jsxs(Box, { children: [_jsx(Typography, __assign({ className: "spr-text-02" }, { children: "Spinklr Presets" }), void 0), _jsx(Swatches, __assign({ className: "mb-3 mt-2", cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: SPRINKLR_PRESET_COLORS.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); }) }), void 0), _jsx(Swatches, __assign({ cols: 10, colGap: 1, rowGap: 1 }, swatchesProps, { children: COLOR_PALETTE.map(function (row) {
+                    return row.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps), color)); });
+                }) }), void 0)] }, void 0));
+});

package/esm/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/esm/color-picker/ColorPicker.js

@@ -0,0 +1,66 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+// Components
+import { Typography } from '../typography';
+import { Box } from '../box';
+import ResetColorIcon from '../icon/components/reset-color';
+import { Button } from '../button';
+import ColorSelector from './ColorSelector';
+import { Select } from '../select';
+import { StyledRoot } from './styled-component';
+//Utils and Constants
+import { useOverrides } from '../overrides';
+import { useLocale } from '../locale';
+import { getColorSet } from './colors';
+import _noop from 'lodash/noop';
+import { getColorSelectorOptions } from './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,
+                },
+            },
+        });
+    },
+];
+export var ColorPicker = function (_a) {
+    var _b;
+    var value = _a.value, overrides = _a.overrides, heading = _a.heading, _c = _a.onChange, onChange = _c === void 0 ? _noop : _c, _d = _a.onChangeComplete, onChangeComplete = _d === void 0 ? _noop : _d, resetButtonLabel = _a.resetButtonLabel, _e = _a.enableGradientSelector, enableGradientSelector = _e === void 0 ? false : _e;
+    var colorSet = useMemo(function () { return getColorSet(); }, []);
+    var locale = useLocale();
+    var _f = 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 = __read(useState(value), 2), color = _g[0], setColor = _g[1];
+    var _h = __read(useState(value), 2), prevValue = _h[0], setPrevValue = _h[1];
+    if (prevValue !== value) {
+        setPrevValue(value);
+        setColor(value);
+    }
+    var _j = __read(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 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, Typography), 2), Heading = _k[0], headingProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _l[0], rootProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Select, Select), 2), SelectOverride = _m[0], selectProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ResetButton, Button), 2), ResetButtonOverride = _o[0], resetButtonProps = _o[1];
+    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ColorSelectorContainer, Box), 2), ColorSelectorContainer = _p[0], colorSelectorContainerProps = _p[1];
+    return (_jsxs(Root, __assign({}, rootProps, { children: [heading ? (_jsx(Heading, __assign({ "$as": "div", className: "spr-text-03", weight: "bold", variant: "bs3" }, headingProps, { children: heading }), void 0)) : null, _jsx(SelectOverride
+            // autoFocus
+            , __assign({ 
+                // autoFocus
+                clearable: false, virtual: false, options: __spreadArray([COLOR_PALETTE_OPTION, SOLID_COLOR_OPTION], __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), _jsx(ColorSelectorContainer, __assign({ className: "w-64" }, colorSelectorContainerProps, { children: _jsx(ColorSelector, { 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), _jsx(Box, __assign({ className: "flex justify-start " }, { children: _jsx(ResetButtonOverride, __assign({ startEnhancer: _jsx(ResetColorIcon, { 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));
+};

package/esm/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/esm/color-picker/ColorSelector.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorPalette } from './ColorPalette';
+import { CustomColorSelector } from './CustomColorSelector';
+import GradientColorPicker from './GradientColorPicker';
+import { COLOR_TYPE, TAB_IDS } from './constants';
+import _noop from 'lodash/noop';
+var ColorSelector = function (_a) {
+    var selectedTab = _a.selectedTab, color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? _noop : _c, overrides = _a.overrides, setColor = _a.setColor;
+    var COLOR_PALETTE = TAB_IDS.COLOR_PALETTE, GRADIENT_COLOR = TAB_IDS.GRADIENT_COLOR;
+    if (selectedTab === COLOR_PALETTE) {
+        return (_jsx(ColorPalette, { color: color, onChange: function (colorHex) {
+                setColor(colorHex);
+                onChange(colorHex, { type: COLOR_TYPE.SOLID });
+                onChangeComplete(colorHex, { type: COLOR_TYPE.SOLID });
+            }, overrides: overrides }, void 0));
+    }
+    else if (selectedTab === GRADIENT_COLOR) {
+        return _jsx(GradientColorPicker, { color: color, onChange: onChange, onChangeComplete: onChangeComplete }, void 0);
+    }
+    else {
+        return (_jsx(CustomColorSelector, { color: color, onChange: function (colorObject) {
+                setColor(colorObject.hex);
+                onChange(colorObject.hex, { type: COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            }, onChangeComplete: function (colorObject) {
+                return onChangeComplete(colorObject.hex, { type: COLOR_TYPE.SOLID, colorResultObj: colorObject });
+            } }, void 0));
+    }
+};
+ColorSelector.displayName = 'ColorSelector';
+export default ColorSelector;

package/esm/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/esm/color-picker/CustomColorSelector.js

@@ -0,0 +1,38 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CustomPicker } from 'react-color';
+import { Saturation, EditableInput, Hue } from 'react-color/lib/components/common';
+import { useStyle } from '../style';
+import { Stack } from '../stack';
+import { Box } from '../box';
+var CustomPointer = function () { return (_jsx(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 = 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 = 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 (_jsxs(Stack, __assign({ direction: "vertical", gap: 3 }, { children: [_jsx(Box, __assign({ className: "relative w-full h-40 rounded-8 overflow-hidden" }, { children: _jsx(Saturation, __assign({}, props), void 0) }), void 0), _jsxs(Box, __assign({ className: ['p-2 flex items-center ', { gap: '16px' }] }, { children: [_jsx(Box, __assign({ className: ['rounded-8 relative', { width: '190px', height: '10px' }] }, { children: _jsx(Hue, __assign({ pointer: CustomPointer }, props), void 0) }), void 0), _jsx(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), _jsxs(Box, __assign({ className: [
+                    'text-center spr-text-01 text-13 grid space-between w-full gap-2',
+                    { gridTemplateColumns: '1.5fr 1fr 1fr 1fr' },
+                ] }, { children: [_jsx(EditableInput, { style: inputStyles, label: "HEX", value: hex, onChange: handleChange }, void 0), _jsx(EditableInput, { style: inputStyles, label: "R", value: rgb === null || rgb === void 0 ? void 0 : rgb.r, onChange: handleChange }, void 0), _jsx(EditableInput, { style: inputStyles, label: "G", value: rgb === null || rgb === void 0 ? void 0 : rgb.g, onChange: handleChange }, void 0), _jsx(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';
+export var CustomColorSelector = CustomPicker(ColorPickerComponent);

package/esm/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;