@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/button/types.d.ts

@@ -4,6 +4,7 @@ import { Override, StyleOverride } from '../overrides';
 import { StatefulTooltipProps } from '../tooltip';
 import { ClassName, Intent, Variant, SpacewebComponentProps, Size } from '../types';
 import { ValueOf } from '../utility-types';
+import { AriaRole } from 'react';
 export declare type Shape = 'default' | 'round' | 'square' | 'pill';
 export type { Size };
 export declare type ButtonOverrides = {
@@ -35,6 +36,7 @@ export declare type ButtonProps = SpacewebComponentProps<{
     disabled?: boolean;
     fullWidth?: boolean;
     autoFocus?: boolean;
+    role?: AriaRole | undefined;
     href?: string;
     target?: string;
     rel?: string;
@@ -45,5 +47,6 @@ export declare type ButtonProps = SpacewebComponentProps<{
     startEnhancer?: React.ReactNode;
     type?: 'submit' | 'reset' | 'button';
     tooltipContent?: StatefulTooltipProps['content'];
+    tabIndex?: number | undefined;
 }>;
-export declare type VariantAdapterProps = Record<Variant, ValueOf<KIND>>;
+export declare type VariantAdapterProps = Record<Variant, ValueOf<typeof KIND>>;

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

@@ -14,6 +14,7 @@ declare const ButtonGroup: import("react").ForwardRefExoticComponent<Omit<{
     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/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", 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/index.d.ts

@@ -1,4 +1,3 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as StatefulButtonGroup } from './StatefulButtonGroup';
-export type { StatefulContainer, ButtonGroupOverrides, ButtonGroupProps, InitialState, State, StatefulButtonGroupProps, } from 'baseui/button-group';
-export { StyledRoot, MODE, STATE_CHANGE_TYPE } from 'baseui/button-group';
+export type { ButtonGroupChildProps, StatefulButtonGroupProps, ButtonGroupProps } from './types';

package/esm/button-group/index.js

@@ -1,3 +1,2 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as StatefulButtonGroup } from './StatefulButtonGroup';
-export { StyledRoot, MODE, STATE_CHANGE_TYPE } from 'baseui/button-group';

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,73 @@ 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 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');
+    return __assign(__assign(__assign(__assign({ backgroundColor: theme.spr.ui01 }, borderStyle('solid')), borderColor(theme.spr.ui03)), borderWidth('1px')), borderRadius(containerBorderRadius));
 });
 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), 
+    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({ 
         // 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(18) }, borderRadius(px2rem(5))), (!$isIconButton
+        marginLeft: $index === 0 ? px2rem(2) : '0px', marginRight: $index === $childrenCount - 1 ? px2rem(2) : px2rem(3), fontSize: px2rem(12), lineHeight: px2rem(16) }, borderRadius(px2rem(4))), (!$isIconButton
         ? {
             paddingTop: px2rem(8),
             paddingBottom: px2rem(8),
-            paddingLeft: px2rem(22),
-            paddingRight: px2rem(22),
+            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 +85,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 })));
     }
@@ -89,7 +136,7 @@ export var renderButtonGroupChild = function (props, child, index) {
         onKeyDown(event);
         (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
-    return React.cloneElement(child, __assign({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
+    return React.cloneElement(child, __assign({ disabled: child.props.disabled || disabled, variant: child.props.variant || variant, size: child.props.size || size, shape: child.props.shape || shape, intent: child.props.intent || intent, isSelected: isSelected(selected, index), 'aria-selected': isSelected(selected, index), className: [baseButtonStyle.bind(null, childrenCount, index), child.props.className], onClick: onChildClick, onKeyDown: onChildKeyDown }, (isAnyButtonSelected(selected)
         ? { tabIndex: (_a = child.props.tabIndex) !== null && _a !== void 0 ? _a : (isSelected(selected, index) ? 0 : -1) }
         : {})));
 };

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;
@@ -33,6 +35,7 @@ export declare type ButtonGroupChildProps = {
     overrides?: Overrides<ButtonSharedProps>;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     tabIndex?: number;
+    'aria-selected'?: boolean;
 };
 export declare type StatefulButtonGroupProps = ButtonGroupProps & {
     initialState?: number[];

package/esm/checkbox/basewebAdapters.d.ts

@@ -1,4 +1,7 @@
+import * as React from 'react';
+import type { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from 'baseui/checkbox';
 import { CheckboxProps, StatefulCheckboxProps } from './types';
-declare type AdaptProps = CheckboxProps | StatefulCheckboxProps;
-export default function useCheckboxAdapter(props: AdaptProps): Omit<AdaptProps, 'size' | 'className' | 'style'>;
+declare type BaseuiAdaptedProps = React.ComponentProps<typeof BaseCheckbox> | React.ComponentProps<typeof BaseStatefulCheckbox>;
+declare type SpacewebProps = CheckboxProps | StatefulCheckboxProps;
+export default function useCheckboxAdapter(props: SpacewebProps): BaseuiAdaptedProps;
 export {};

package/esm/checkbox/basewebAdapters.js

@@ -3,6 +3,7 @@ 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';
 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({
@@ -25,7 +26,13 @@ export default function useCheckboxAdapter(props) {
             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' } },
+        Input: {
+            style: { position: 'static' },
+            props: {
+                'aria-required': restProps['aria-required'],
+            },
+        },
     }, overrides);
-    return __assign(__assign({}, restProps), { overrides: convertedOverrides });
+    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/index.d.ts

@@ -1,5 +1,5 @@
 export { Checkbox, StatefulCheckbox } from './checkbox';
-export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleInner, StyledToggleTrack, } 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, StyledToggleInner, StyledToggleTrack, } 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

@@ -31,7 +31,7 @@ var getBorderColor = function (utils, props) {
     if ($isHovered || $isFocusVisible) {
         return intentColor(utils, props, theme.spr.border06);
     }
-    return intentColor(utils, props, theme.spr.icon03);
+    return intentColor(utils, props, theme.spr.border04);
 };
 var getBackgroundColor = function (utils, props) {
     var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;

package/esm/checkbox/types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps } from 'baseui/checkbox';
 import { SharedProps as BaseSharedProps } from 'baseui/input';
 import { OutlineProps } from '../helpers/commonStyles';
@@ -12,17 +13,23 @@ export declare type SharedProps = BaseSharedProps & {
     $isIndeterminate: boolean;
     $size: CheckboxSize;
 };
-export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
+declare type CommonProps = {
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     size?: CheckboxSize;
     intent?: Intent;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
-        [key in keyof BaseCheckboxProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseCheckboxProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
-    size?: CheckboxSize;
-    intent?: Intent;
+} & OutlineProps & CommonProps;
+export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
-        [key in keyof BaseStatefulCheckboxProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseStatefulCheckboxProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
+} & OutlineProps & CommonProps;
+export {};

package/esm/color-picker/ColorPalette.d.ts

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

package/esm/color-picker/ColorPalette.js

@@ -0,0 +1,22 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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 } from './colors';
+export var ColorPalette = 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 (_jsx(Box, { children: _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, resetButtonLabel, }: ColorPickerProps) => ReactElement;

package/esm/color-picker/ColorPicker.js

@@ -0,0 +1,31 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '../typography';
+import { Box } from '../box';
+import { ColorPalette } from './ColorPalette';
+import ResetColorIcon from '../icon/components/reset-color';
+import { Button } from '../button';
+import { useOverrides } from '../overrides';
+import { useLocale } from '../locale';
+import { StyledRoot } from './styled-component';
+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 value = _a.value, overrides = _a.overrides, heading = _a.heading, onChange = _a.onChange, resetButtonLabel = _a.resetButtonLabel;
+    var locale = useLocale();
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Heading, Typography), 2), Heading = _b[0], headingProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _c[0], rootProps = _c[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(ColorPalette, { color: value, onChange: onChange, overrides: overrides }, void 0), _jsx(Box, __assign({ className: "flex justify-start -ml-1.5" }, { children: _jsx(Button, __assign({ startEnhancer: _jsx(ResetColorIcon, { size: 12 }, void 0), variant: "minimal", size: "xxxs", className: RESET_CLASSNAME, disabled: !value, onClick: function () { return onChange(undefined); } }, { children: resetButtonLabel !== null && resetButtonLabel !== void 0 ? resetButtonLabel : locale.colorPicker.resetButtonLabel }), void 0) }), void 0)] }), void 0));
+};

package/esm/color-picker/Swatch.d.ts

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

package/esm/color-picker/Swatch.js

@@ -0,0 +1,37 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeTokenToHex } from '../helpers';
+import { BaseButton } from '../base-button';
+import DefaultTickIcon from '../icon/components/tick';
+import { getContrastRatio } from './getContrastRatio';
+import { useTheme } from '../theme';
+import { memo, useCallback, useMemo } from 'react';
+import { useOverrides } from '../overrides';
+export var Swatch = memo(function (_a) {
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, overrides = _a.overrides, props = __rest(_a, ["color", "isSelected", "onChange", "className", "overrides"]);
+    var theme = useTheme().theme;
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TickIcon, DefaultTickIcon), 2), TickIcon = _b[0], tickIconProps = _b[1];
+    var contrastRatioWithTickIcon = useMemo(function () { return (isSelected ? getContrastRatio(color, themeTokenToHex(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
+    var contrastRatioWithBgColor = useMemo(function () { return getContrastRatio(color, themeTokenToHex(theme.spr.popup)); }, [theme, color]);
+    var handleChange = useCallback(function () { return onChange(color); }, [color, onChange]);
+    return (_jsx(BaseButton, __assign({ onClick: handleChange, className: [
+            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center',
+            contrastRatioWithBgColor < 1.1 ? 'border-1 border-solid spr-border-03' : '',
+            {
+                backgroundColor: color,
+                transition: '0.15s ease-in-out',
+                ':hover': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus-visible': {
+                    transform: 'scale(1.2)',
+                    outlineWidth: '1px',
+                    outlineOffset: '1px',
+                },
+            },
+            className,
+        ], tabIndex: 0 }, props, { children: isSelected ? (_jsx(TickIcon, __assign({ className: contrastRatioWithTickIcon < 4.5 ? 'spr-icon-01' : 'spr-icon-05', size: 10 }, tickIconProps), void 0)) : null }), void 0));
+});

package/esm/color-picker/colors.d.ts

@@ -0,0 +1 @@
+export declare const COLOR_PALETTE: string[][];

package/esm/color-picker/colors.js

@@ -0,0 +1,106 @@
+var SLATE_COLORS = [
+    '#FFFFFE',
+    '#F3F3F3',
+    '#EFEFEF',
+    '#DADAD9',
+    '#CCCCCC',
+    '#B7B7B7',
+    '#999999',
+    '#676666',
+    '#444343',
+    '#000000',
+];
+var RED_COLORS = [
+    '#fef2f2',
+    '#fee2e2',
+    '#fecaca',
+    '#fca5a5',
+    '#f87171',
+    '#dc2626',
+    '#b91c1c',
+    '#991b1b',
+    '#7f1d1d',
+    '#450a0a',
+];
+var AMBER_COLORS = [
+    '#fffbeb',
+    '#fef3c7',
+    '#fde68a',
+    '#fcd34d',
+    '#fbbf24',
+    '#d97706',
+    '#b45309',
+    '#92400e',
+    '#78350f',
+    '#451a03',
+];
+var GREEN_COLORS = [
+    '#f0fdf4',
+    '#dcfce7',
+    '#bbf7d0',
+    '#86efac',
+    '#4ade80',
+    '#16a34a',
+    '#15803d',
+    '#166534',
+    '#14532d',
+    '#052e16',
+];
+var BLUE_COLORS = [
+    '#eff6ff',
+    '#dbeafe',
+    '#bfdbfe',
+    '#93c5fd',
+    '#60a5fa',
+    '#2563eb',
+    '#1d4ed8',
+    '#1e40af',
+    '#1e3a8a',
+    '#172554',
+];
+var VIOLET_COLORS = [
+    '#f5f3ff',
+    '#ede9fe',
+    '#ddd6fe',
+    '#c4b5fd',
+    '#a78bfa',
+    '#7c3aed',
+    '#6d28d9',
+    '#5b21b6',
+    '#4c1d95',
+    '#2e1065',
+];
+var FUCHSIA_COLORS = [
+    '#fdf4ff',
+    '#fae8ff',
+    '#f5d0fe',
+    '#f0abfc',
+    '#e879f9',
+    '#c026d3',
+    '#a21caf',
+    '#86198f',
+    '#701a75',
+    '#4a044e',
+];
+var ROSE_COLORS = [
+    '#fff1f2',
+    '#ffe4e6',
+    '#fecdd3',
+    '#fda4af',
+    '#fb7185',
+    '#e11d48',
+    '#be123c',
+    '#9f1239',
+    '#881337',
+    '#4c0519',
+];
+export var COLOR_PALETTE = [
+    SLATE_COLORS,
+    RED_COLORS,
+    AMBER_COLORS,
+    GREEN_COLORS,
+    BLUE_COLORS,
+    VIOLET_COLORS,
+    FUCHSIA_COLORS,
+    ROSE_COLORS,
+];

package/esm/color-picker/getContrastRatio.d.ts

@@ -0,0 +1 @@
+export declare const getContrastRatio: (color1: string, color2: string) => number;

package/esm/color-picker/getContrastRatio.js

@@ -0,0 +1,19 @@
+import { __read } from "tslib";
+// https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+var hexToRgb = function (hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+};
+var getRelativeLuminance = function (rgb) {
+    var _a = __read(rgb.map(function (c) { return c / 255; }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+export var getContrastRatio = function (color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+};

package/esm/color-picker/index.d.ts

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

package/esm/color-picker/index.js

@@ -0,0 +1,2 @@
+export { ColorPicker } from './ColorPicker';
+export { COLOR_PALETTE } from './colors';

package/esm/color-picker/locale.d.ts

@@ -0,0 +1,3 @@
+export declare type ColorPickerLocale = {
+    resetButtonLabel: string;
+};

package/esm/color-picker/locale.js

@@ -0,0 +1 @@
+export {};

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

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