@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/input/basewebAdapters.js

@@ -1,5 +1,4 @@
 import { __assign, __rest } from "tslib";
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { add$props } from '../helpers';
 import { borderRadius, borderStyle, padding } from '../helpers/longHandHelpers';
 import { getInputContainerStyles, getInputStyles, getEnhancerStyles } from './styled-components';
@@ -9,52 +8,56 @@ import { useDebouncedEventHandler } from '../hooks/useDebouncedEventHandler';
 import _noop from 'lodash/noop';
 import { useStyle } from '../style';
 import { getDefaultSize } from '../helpers/themeHelpers';
+import { mergeOverrides } from '../overrides';
+import { useMemo } from 'react';
 var useInputBasewebAdapter = function (props) {
     var _a = useContextualFormProps(props), _size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = __rest(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
     var theme = useStyle().theme;
     var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var handleChange = useDebouncedEventHandler(debouncedOnChange !== null && debouncedOnChange !== void 0 ? debouncedOnChange : _noop, onChange, debounceInterval || 200);
-    var sharedProps = add$props({ size: size, variant: variant, intent: intent });
-    var convertedOverrides = useConvertOverrides({
-        Root: {
-            style: [
-                __assign(__assign(__assign({ backgroundColor: 'transparent' }, borderStyle('none')), padding(0)), borderRadius(0)),
-                className,
-                style,
-            ],
-            props: sharedProps,
-        },
-        InputContainer: {
-            style: getInputContainerStyles,
-            props: sharedProps,
-        },
-        Input: {
-            style: [
-                getInputStyles,
-                borderRadius('inherit'),
-                // To remove the spin buttons on input field with type number
-                props.type === 'number'
-                    ? {
-                        '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
-                        '::-webkit-outer-spin-button': { '-webkit-appearance': 'none' },
-                        '-moz-appearance': 'textfield',
-                    }
-                    : {},
-            ],
-            props: __assign(__assign({}, sharedProps), { 'aria-required': restProps['aria-required'] }),
-        },
-        StartEnhancer: {
-            style: getEnhancerStyles,
-            props: add$props({ isStart: true, intent: intent, variant: variant }),
-        },
-        EndEnhancer: {
-            style: getEnhancerStyles,
-            props: add$props({ isStart: false, intent: intent, variant: variant }),
-        },
-        ClearIcon: {
-            component: ClearIconButton,
-        },
-    }, overrides, [overrides, className, style, size, variant, intent, handleChange]);
+    var sharedProps = useMemo(function () { return add$props({ size: size, variant: variant, intent: intent }); }, [intent, size, variant]);
+    var convertedOverrides = useMemo(function () {
+        return mergeOverrides({
+            Root: {
+                style: [
+                    __assign(__assign(__assign({ backgroundColor: 'transparent' }, borderStyle('none')), padding(0)), borderRadius(0)),
+                    className,
+                    style,
+                ],
+                props: sharedProps,
+            },
+            InputContainer: {
+                style: getInputContainerStyles,
+                props: sharedProps,
+            },
+            Input: {
+                style: [
+                    getInputStyles,
+                    borderRadius('inherit'),
+                    // To remove the spin buttons on input field with type number
+                    props.type === 'number'
+                        ? {
+                            '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+                            '::-webkit-outer-spin-button': { '-webkit-appearance': 'none' },
+                            '-moz-appearance': 'textfield',
+                        }
+                        : {},
+                ],
+                props: __assign(__assign({}, sharedProps), { 'aria-required': restProps['aria-required'] }),
+            },
+            StartEnhancer: {
+                style: getEnhancerStyles,
+                props: add$props({ isStart: true, intent: intent, variant: variant }),
+            },
+            EndEnhancer: {
+                style: getEnhancerStyles,
+                props: add$props({ isStart: false, intent: intent, variant: variant }),
+            },
+            ClearIcon: {
+                component: ClearIconButton,
+            },
+        }, overrides);
+    }, [className, style, sharedProps, props.type, restProps['aria-required'], intent, variant, overrides]);
     return __assign(__assign({}, restProps), { onChange: handleChange, overrides: convertedOverrides });
 };
 export default useInputBasewebAdapter;

package/esm/input/index.d.ts

@@ -1,5 +1,6 @@
-export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
-export type { BaseInput, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
-export { ENHANCER_POSITION } from 'baseui/input/constants';
+export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from '../baseui/input';
+export type { BaseInput, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from '../baseui/input';
+export { ENHANCER_POSITION } from '../baseui/input/constants';
 export { Input, StatefulInput, MaskedInput } from './input';
 export * from './types';
+export { InputContainer } from './InputContainer';

package/esm/input/index.js

@@ -1,4 +1,5 @@
-export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
-export { ENHANCER_POSITION } from 'baseui/input/constants';
+export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from '../baseui/input';
+export { ENHANCER_POSITION } from '../baseui/input/constants';
 export { Input, StatefulInput, MaskedInput } from './input';
 export * from './types';
+export { InputContainer } from './InputContainer';

package/esm/input/input.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Input as BaseInput, StatefulInput as BaseStatefulInput, MaskedInput as BaseMaskedInput } from 'baseui/input';
+import { Input as BaseInput, StatefulInput as BaseStatefulInput, MaskedInput as BaseMaskedInput, } from '../baseui/input';
 import useInputBasewebAdapter from './basewebAdapters';
 import useAutoFocus from '../hooks/useAutoFocus';
 // @ts-ignore

package/esm/input/styled-components.js

@@ -1,5 +1,5 @@
 import { __assign } from "tslib";
-import { ADJOINED } from 'baseui/input';
+import { ADJOINED } from '../baseui/input';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import { borderWidth, borderColor, borderStyle, borderRadius } from '../helpers/longHandHelpers';
 import { intentColor } from '../helpers/intentHelper';

package/esm/input/types.d.ts

@@ -1,5 +1,5 @@
 import { Ref, ChangeEvent } from 'react';
-import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
+import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from '../baseui/input';
 import { SpacewebComponentProps, Intent } from '../types';
 import { Override } from '../overrides';
 /**

package/esm/layer/LayersManager.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LayersContext } from 'baseui/layer';
+import { LayersContext } from '../baseui/layer';
 import { useMemo } from 'react';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
 import { LAYERS_DEFAULT_ZINDEX } from './constants';
@@ -15,6 +15,8 @@ var LayersManager = function (_a) {
         var _a, _b;
         return (__assign(__assign({}, ctxValue), { host: (_a = hostToOverride !== null && hostToOverride !== void 0 ? hostToOverride : ctxValue.host) !== null && _a !== void 0 ? _a : defaultHostContainer, zIndex: (_b = zIndexToOverride !== null && zIndexToOverride !== void 0 ? zIndexToOverride : ctxValue.zIndex) !== null && _b !== void 0 ? _b : LAYERS_DEFAULT_ZINDEX }));
     }, [ctxValue, hostToOverride, zIndexToOverride, defaultHostContainer]);
+    // TODO :- To remove this ts error
+    // @ts-ignore
     return _jsx(LayersContext.Provider, __assign({ value: value }, { children: children }), void 0);
 };
 export default LayersManager;

package/esm/layer/useLayersContextValue.d.ts

@@ -1,3 +1,3 @@
-import { LayersContext } from 'baseui/layer';
+import { LayersContext } from '../baseui/layer';
 declare const useLayersContextValue: () => React.ContextType<typeof LayersContext>;
 export default useLayersContextValue;

package/esm/layer/useLayersContextValue.js

@@ -1,16 +1,37 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import { useCallback, useContext, useEffect, useMemo } from 'react';
-import { LayersContext } from 'baseui/layer';
+import { LayersContext } from '../baseui/layer';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
 var handlersInitialized = false;
 var docClickHandlers = [];
 var escapeKeyHandlers = [];
+var keyUpHandlers = [];
+var keyDownHandlers = [];
+var keyPressHandlers = [];
 var addEscapeHandler = function (escapeKeyHandler) {
     escapeKeyHandlers.push(escapeKeyHandler);
 };
 var removeEscapeHandler = function (escapeKeyHandler) {
     escapeKeyHandlers = escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; });
 };
+var addKeyUpHandler = function (keyUpHandler) {
+    keyUpHandlers.push(keyUpHandler);
+};
+var removeKeyUpHandler = function (keyUpHandler) {
+    keyUpHandlers = keyUpHandlers.filter(function (handler) { return handler !== keyUpHandler; });
+};
+var addKeyDownHandler = function (keyDownHandler) {
+    keyDownHandlers.push(keyDownHandler);
+};
+var removeKeyDownHandler = function (keyDownHandler) {
+    keyDownHandlers = keyDownHandlers.filter(function (handler) { return handler !== keyDownHandler; });
+};
+var addKeyPressHandler = function (keyPressHandler) {
+    keyPressHandlers.push(keyPressHandler);
+};
+var removeKeyPressHandler = function (keyPressHandler) {
+    keyPressHandlers = keyPressHandlers.filter(function (handler) { return handler !== keyPressHandler; });
+};
 var addDocClickHandler = function (docClickHandler) {
     docClickHandlers.push(docClickHandler);
 };
@@ -21,6 +42,9 @@ var resetHandlers = function () {
     handlersInitialized = false;
     docClickHandlers = [];
     escapeKeyHandlers = [];
+    keyUpHandlers = [];
+    keyPressHandlers = [];
+    keyDownHandlers = [];
 };
 var useLayersContextValue = function () {
     var ctxValue = useContext(LayersContext);
@@ -35,21 +59,42 @@ var useLayersContextValue = function () {
                 escapeKeyHandler(event);
             }
         }
+        var keyUpKeyHandler = keyUpHandlers[keyUpHandlers.length - 1];
+        if (keyUpKeyHandler) {
+            keyUpKeyHandler(event);
+        }
+    }, []);
+    var onKeyPress = useCallback(function (event) {
+        var keyPressHandler = keyPressHandlers[keyPressHandlers.length - 1];
+        if (keyPressHandler) {
+            keyPressHandler(event);
+        }
+    }, []);
+    var onKeyDown = useCallback(function (event) {
+        var keyDownHandler = keyDownHandlers[keyDownHandlers.length - 1];
+        if (keyDownHandler) {
+            keyDownHandler(event);
+        }
     }, []);
     useEffect(function () {
         if (handlersInitialized)
             return undefined;
         doc === null || doc === void 0 ? void 0 : doc.addEventListener('keyup', onKeyUp);
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keypress', onKeyPress);
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keydown', onKeyDown);
         // using mousedown event so that callback runs before events on children inside of the layer
         doc === null || doc === void 0 ? void 0 : doc.addEventListener('mousedown', onDocumentClick);
         handlersInitialized = true;
         return function () {
             doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keyup', onKeyUp);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keypress', onKeyPress);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keydown', onKeyDown);
             doc === null || doc === void 0 ? void 0 : doc.removeEventListener('mousedown', onDocumentClick);
             resetHandlers();
         };
-    }, [doc, onDocumentClick, onKeyUp]);
+    }, [doc, onDocumentClick, onKeyDown, onKeyPress, onKeyUp]);
     var contextValues = ctxValue && typeof ctxValue === 'object' ? Object.values(ctxValue) : [];
-    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, __spreadArray([], __read(contextValues), false));
+    // @ts-ignore
+    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addKeyDownHandler: addKeyDownHandler, removeKeyDownHandler: removeKeyDownHandler, addKeyPressHandler: addKeyPressHandler, removeKeyPressHandler: removeKeyPressHandler, addKeyUpHandler: addKeyUpHandler, removeKeyUpHandler: removeKeyUpHandler, addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, __spreadArray([], __read(contextValues), false));
 };
 export default useLayersContextValue;

package/esm/list/list-item-text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemTextProps } from './types';
-declare const ListItemText: ({ overrides, children, secondary }: ListItemTextProps) => JSX.Element;
+declare const ListItemText: ({ overrides, children, secondary }: ListItemTextProps) => import("react/jsx-runtime").JSX.Element;
 export default ListItemText;

package/esm/list/list-item.d.ts

@@ -22,6 +22,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/list/list-item.js

@@ -48,7 +48,7 @@ var ListItem = React.forwardRef(function (_a, ref) {
     };
     var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
     var listEl = (_jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
-    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
+    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 export default React.memo(ListItem);

package/esm/loader/loader.d.ts

@@ -2,5 +2,7 @@
 import { LoaderProps } from './types';
 export declare const DEFAULT_SIZE = 16;
 export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/esm/loader/loader.js

@@ -1,20 +1,29 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from 'react';
+import _times from 'lodash/times';
 import { isTypographyNode } from '../helpers/typography';
 import { useOverrides } from '../overrides';
 import { Typography } from '../typography';
-import { StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot } from './styled-component';
+import { StyledSpinner, StyledSpinnerStick, StyledBeatLoader, StyledBeatLoaderBall, StyledClipLoader, StyledRoot, } from './styled-component';
 export var DEFAULT_SIZE = 16;
 export var DEFAULT_DELAY = 0;
 var Loader = forwardRef(function (_a, ref) {
     var _b = _a.delay, delay = _b === void 0 ? DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = __rest(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
     // should be visible from start if delay is 0
     var _e = __read(useState(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var LoaderComponent;
+    if (variant === 'beat')
+        LoaderComponent = StyledBeatLoader;
+    else if (variant === 'clip')
+        LoaderComponent = StyledClipLoader;
+    else
+        LoaderComponent = StyledSpinner;
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _f[0], rootProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? StyledBeatLoader : StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
     var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
     useEffect(function () {
         var delayTimer;
         if (delay) {
@@ -32,7 +41,7 @@ var Loader = forwardRef(function (_a, ref) {
         ? loadingContent
         : loadingContent && (_jsx(Text, __assign({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
     // todo: aria-label localization
-    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsx(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+    return visible ? (_jsxs(Root, __assign({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [_jsxs(LoaderInternal, __assign({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && (_jsxs(_Fragment, { children: [_jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), _jsx(BeatLoaderBall, __assign({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && (_jsx(_Fragment, { children: _times(8).map(function (index) { return (_jsx(SpinnerStick, __assign({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
 });
 Loader.displayName = 'Loader';
 export default Loader;

package/esm/loader/styled-component.d.ts

@@ -2,3 +2,5 @@ export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledClipLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;
+export declare const StyledSpinner: import("../style/styled").StyledComponent;
+export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;

package/esm/loader/styled-component.js

@@ -56,3 +56,64 @@ export var StyledBeatLoaderBall = styled('div', 'spr-tooltip-01 rounded-full inl
         marginRight: px2rem(2),
     };
 });
+var spinnerAnimationStyles = function (_, _a) {
+    var $index = _a.$index;
+    return ({
+        animationDuration: '1000ms',
+        animationDelay: "".concat($index * 125, "ms"),
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'step-start',
+        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+        animationName: {
+            '10%': {
+                opacity: 0.125,
+            },
+            '100%': {
+                opacity: 1,
+            },
+        },
+    });
+};
+var spinnerStyles = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, index = props.$index;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    var stickHeightOffset = stickHeight / 2;
+    var stickWidthOffset = stickWidth / 2;
+    // Adjust the baseRadius to be the radius minus the stick width
+    var baseRadius = radius - stickWidth;
+    // Calculate the angle in degrees
+    var angle = (index - 1) * 45;
+    // Calculate the x and y offsets based on the adjusted baseRadius
+    var yOffset = Math.sin((Math.PI * angle) / 180) * baseRadius;
+    var xOffset = Math.cos((Math.PI * angle) / 180) * baseRadius;
+    return {
+        top: px2rem(radius + yOffset - stickHeightOffset),
+        left: px2rem(radius + xOffset - stickWidthOffset),
+        transform: "rotate(".concat(angle + 90, "deg)"),
+    };
+};
+export var StyledSpinner = styled('div', function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    return {
+        height: px2rem($size),
+        width: px2rem($size),
+        position: 'relative',
+    };
+});
+export var StyledSpinnerStick = styled('div', 'box-border spr-tooltip-01', spinnerStyles, spinnerAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    return {
+        height: px2rem(stickHeight),
+        width: px2rem(stickWidth),
+        borderRadius: px2rem(16),
+        position: 'absolute',
+    };
+});

package/esm/loader/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Variant = 'clip' | 'beat';
+export declare type Variant = 'clip' | 'beat' | 'spinner';
 export declare type SharedProps = {
     $variant: Variant;
     $hasLoadingContent: boolean;
@@ -19,5 +19,6 @@ export declare type LoaderProps = {
         Text?: Override<SharedProps & Record<string, any>>;
         Loader?: Override<SharedProps & Record<string, any>>;
         BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
+        SpinnerStick?: Override<SharedProps & Record<string, any>>;
     };
 };

package/esm/locale/context.d.ts

@@ -10,7 +10,7 @@ export declare const LocaleProvider: {
     (props: {
         children?: React.ReactNode;
         locale?: DeepPartial<Locale>;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/locale/en_US.js

@@ -1,6 +1,10 @@
 export var DEFAULT_LOCALE = {
     colorPicker: {
         resetButtonLabel: 'Reset Color',
+        colorLibraryLabel: 'Color Library',
+        solidColorLabel: 'Solid Color',
+        gradientColorLabel: 'Gradient Color',
+        selectColorLabel: 'Select Color',
     },
     select: {
         noResultsMsg: 'No Results',
@@ -9,6 +13,7 @@ export var DEFAULT_LOCALE = {
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
         selectedValuesPrefix: 'Selected ${values}.',
+        collapsibleMenuDescription: 'You are currently using a collapsible grouped menu. To move to next group press Shift and down arrow. To move to previous group press Shift and up arrow.',
     },
     asyncSelect: {
         searchingText: 'Searching',

package/esm/locale/types.d.ts

@@ -1,10 +1,10 @@
-import { TimeRangePickerLocale } from '../time-range-picker';
-import { SelectLocale } from '../select';
-import { AsyncSelectLocale } from '../asyncSelect';
-import { PhoneInputLocale } from '../phone-input';
-import { DatePickerLocale } from '../date-picker/locale';
-import { BannerLocale } from '../banner';
-import { ColorPickerLocale } from '../color-picker/locale';
+import type { TimeRangePickerLocale } from '../time-range-picker/locale';
+import type { SelectLocale } from '../select/locale';
+import type { AsyncSelectLocale } from '../asyncSelect/locale';
+import type { PhoneInputLocale } from '../phone-input/locale';
+import type { DatePickerLocale } from '../date-picker/locale';
+import type { BannerLocale } from '../banner/locale';
+import type { ColorPickerLocale } from '../color-picker/locale';
 export declare type Locale = {
     select: SelectLocale;
     colorPicker: ColorPickerLocale;

package/esm/menu/helpers.d.ts

@@ -1,8 +1,15 @@
-import { Reducer } from './types';
+import { Reducer, TraversalFunction } from './types';
+export declare const nextItem: TraversalFunction;
+export declare const prevItem: TraversalFunction;
 /**
  * Checks if given item can be highlighted
  */
 export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+/**
+ * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
+ * Get index of next element which is not disabled
+ */
+export declare const getNextItemIndexToHighlight: (highlightedItem: HTMLElement | null, parentContainer: HTMLElement, traversalFunction: TraversalFunction) => HTMLElement | null;
 export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
     firstHighlightableItem: HTMLElement | null;
     firstSelectedItem: HTMLElement | null;

package/esm/menu/helpers.js

@@ -1,11 +1,11 @@
-var nextItem = function (highlightedItem, parentContainer) {
+export var nextItem = function (highlightedItem, parentContainer) {
     var _a;
     if (highlightedItem) {
         return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.nextElementSibling) !== null && _a !== void 0 ? _a : highlightedItem);
     }
-    return parentContainer.firstElementChild;
+    return parentContainer === null || parentContainer === void 0 ? void 0 : parentContainer.firstElementChild;
 };
-var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
+export var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
 /**
  * Checks if given item can be highlighted
  */
@@ -14,7 +14,7 @@ export var canHighlightItem = function (item) { return (item === null || item ==
  * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
  * Get index of next element which is not disabled
  */
-var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, traversalFunction) {
+export var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, traversalFunction) {
     var previousItem = highlightedItem, nextHighlightableItem = traversalFunction(highlightedItem, parentContainer);
     while (previousItem !== nextHighlightableItem) {
         if (!canHighlightItem(nextHighlightableItem)) {

package/esm/menu/menu-item.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
     getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
@@ -27,9 +27,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-            tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+            tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
-        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+        Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
             overrides?: ({
                 Body?: import("../overrides").Override<any> | undefined;
                 Arrow?: import("../overrides").Override<any> | undefined;

package/esm/menu/menu-item.js

@@ -24,10 +24,14 @@ var listItemOverrides = {
                         var getStyle = _a.getStyle, theme = _a.theme;
                         var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected, $outlined = _b.$outlined;
                         var hoverBackgroundColor = getComponentTheme(theme, 'list').hoverBackgroundColor;
-                        return getStyle(cx({ 'outline-01 outline-offset-0': $outlined }), {
+                        return getStyle(cx({ 'outline-01': $outlined }), {
                             backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
                             cursor: $disabled ? 'not-allowed' : 'pointer',
-                        });
+                        }, $outlined
+                            ? {
+                                outlineOffset: '-2px',
+                            }
+                            : {});
                     },
                 },
             },

package/esm/modal/adapter.d.ts

@@ -1,4 +1,4 @@
-import { ROLE } from 'baseui/modal';
+import { ROLE } from '../baseui/modal';
 import { StyleUtils } from '../types';
 import { Role, Size } from './types';
 import { ValueOf } from '../utility-types';

package/esm/modal/adapter.js

@@ -1,4 +1,4 @@
-import { ROLE } from 'baseui/modal';
+import { ROLE } from '../baseui/modal';
 export var getWidthFromSize = function (_a, size) {
     var px2rem = _a.px2rem;
     switch (size) {

package/esm/modal/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from 'baseui/modal';
+export { FocusOnce } from '../baseui/modal';
 export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
 export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/index.js

@@ -1,6 +1,6 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from 'baseui/modal';
+export { FocusOnce } from '../baseui/modal';
 export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
 export { CLOSE_SOURCE } from './types';

package/esm/modal/modal-footer.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ModalFooterProps } from './types';
 declare const ModalFooter: {
-    (props: ModalFooterProps): ReactElement;
+    ({ noBorder, ...props }: ModalFooterProps): ReactElement;
     displayName: string;
 };
 export default ModalFooter;