@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/select/utils/hidden-element.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+declare const HiddenElement: ({ id, children }: {
+    id: string;
+    children?: ReactNode;
+}) => ReactElement;
+export { HiddenElement };

package/select/utils/hidden-element.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenElement = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HiddenElement = function (_a) {
+    var id = _a.id, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ id: id, style: {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            height: '0px',
+            margin: '-1px',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            width: '0px',
+        } }, { children: children }), void 0));
+};
+exports.HiddenElement = HiddenElement;

package/select/utils/merge-options.d.ts

@@ -0,0 +1,2 @@
+import { Options, Value } from '../types';
+export declare function mergeOptions(valueKey: string, options1?: Options, options2?: Options): Value;

package/select/utils/merge-options.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOptions = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("../../baseui/select/utils");
+var constants_1 = require("../constants");
+function removeDuplicates(valueKey, options) {
+    var keySet = new Set();
+    return options.filter(function (opt) {
+        var key = (opt.__optgroup || constants_1.UNGROUPED_ID) + opt[valueKey];
+        var shouldAdd = !keySet.has(key);
+        keySet.add(key);
+        return shouldAdd;
+    });
+}
+function mergeOptions(valueKey, options1, options2) {
+    if (options1 === void 0) { options1 = []; }
+    if (options2 === void 0) { options2 = []; }
+    var optArr1 = (0, utils_1.normalizeOptions)(options1), optArr2 = (0, utils_1.normalizeOptions)(options2);
+    return removeDuplicates(valueKey, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(optArr1), false), (0, tslib_1.__read)(optArr2), false));
+}
+exports.mergeOptions = mergeOptions;

package/select/utils/test-utils.d.ts

@@ -0,0 +1 @@
+export declare const getSelectedOptions: (container?: HTMLElement | undefined) => (string | null)[];

package/select/utils/test-utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedOptions = void 0;
+var react_1 = require("@testing-library/react");
+var getSelectedOptions = function (container) {
+    var elements = container
+        ? (0, react_1.getAllByTestId)(container, 'combobox-selected-value')
+        : react_1.screen.getAllByTestId('combobox-selected-value');
+    return elements.map(function (item) { return item.textContent; });
+};
+exports.getSelectedOptions = getSelectedOptions;

package/slider/mark.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
-declare const Mark: React.ForwardRefExoticComponent<import("baseui/slider").StyleProps & {
+declare const Mark: React.ForwardRefExoticComponent<import("../baseui/slider").StyleProps & {
     $intent?: boolean | undefined;
     $step: number;
 } & {
     $markIndex: number;
     overrides?: {
-        MarkLabel?: import("../overrides").Override<import("baseui/slider").StyleProps & {
+        MarkLabel?: import("../overrides").Override<import("../baseui/slider").StyleProps & {
             $intent?: boolean | undefined;
             $step: number;
         } & Record<string, any>> | undefined;
     } | undefined;
-    getMarkLabel: (props: import("baseui/slider").StyleProps & {
+    getMarkLabel: (props: import("../baseui/slider").StyleProps & {
         $intent?: boolean | undefined;
         $step: number;
     } & {

package/slider/slider.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var slider_1 = require("baseui/slider");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var react_1 = require("react");
+var slider_1 = require("../baseui/slider");
 var mark_1 = (0, tslib_1.__importDefault)(require("./mark"));
 var styled_components_1 = require("./styled-components");
-var utils_1 = require("../spacewebProvider/utils");
+var useHasMounted_1 = require("../hooks/useHasMounted");
+var overrides_1 = require("../overrides");
 // @ts-ignore
 slider_1.Slider.displayName = 'BaseSlider';
 var defaultMarkLabel = function (_a) {
@@ -15,7 +16,10 @@ var defaultMarkLabel = function (_a) {
 };
 var Slider = function (_a) {
     var overrides = _a.overrides, markLabel = _a.markLabel, _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.getMarkLabel, getMarkLabel = _c === void 0 ? defaultMarkLabel : _c, className = _a.className, style = _a.style, restProps = (0, tslib_1.__rest)(_a, ["overrides", "markLabel", "intent", "getMarkLabel", "className", "style"]);
-    var mergedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
+    // Thumb component not getting correct position on server side also to resolve the hydration error
+    // useHasMounted Hook has been used to so that it triggers renders which allows thumb to get the correct position
+    var hasMounted = (0, useHasMounted_1.useHasMounted)();
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)({
         Root: {
             style: ['p-4', className, style],
             props: {
@@ -46,9 +50,10 @@ var Slider = function (_a) {
             },
         },
         Thumb: {
-            // In SSR, Thumbs are not properly positioned, hence hiding thumbs.
+            // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
             // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
-            component: utils_1.isServer ? function () { return null; } : undefined,
+            // Thumb is made ClientOnly to avoid Hydration mismatch error
+            component: hasMounted ? undefined : function () { return null; },
             style: styled_components_1.getThumbStyles,
             props: {
                 $intent: intent,
@@ -69,7 +74,7 @@ var Slider = function (_a) {
         TickBar: {
             component: function () { return null; },
         },
-    }, overrides);
+    }, overrides); }, [className, getMarkLabel, hasMounted, intent, markLabel, overrides, style]);
     return (0, jsx_runtime_1.jsx)(slider_1.Slider, (0, tslib_1.__assign)({ overrides: mergedOverrides }, restProps), void 0);
 };
 Slider.displayName = 'Slider';

package/slider/stateful-slider-container.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var slider_1 = require("baseui/slider");
+var slider_1 = require("../baseui/slider");
 //@ts-ignore
 slider_1.StatefulContainer.displayName = 'BaseStatefulContainer';
 var StatefulContainer = function (_a) {

package/slider/styled-components.js

@@ -7,7 +7,7 @@ var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var intentHelper_1 = require("../helpers/intentHelper");
 var helpers_1 = require("../helpers");
 var addOpacity = function (token, opacity) {
-    return token.includes('rgb') ? token.split(')')[0] + opacity + ')' : (0, helpers_1.hex2rgb)(token, opacity);
+    return token.includes('rgb') ? "".concat(token.split(')')[0] + opacity, ")") : (0, helpers_1.hex2rgb)(token, opacity);
 };
 var secondaryIntentColor = function (_a, _b) {
     var theme = _a.theme;
@@ -26,13 +26,13 @@ var secondaryIntentColor = function (_a, _b) {
 exports.getInnerTrackStyles = [
     'w-full self-center',
     function (_a, _b) {
-        var theme = _a.theme, direction = _a.direction, px2rem = _a.px2rem;
+        var theme = _a.theme, px2rem = _a.px2rem;
         var $disabled = _b.$disabled, $value = _b.$value, $min = _b.$min, $max = _b.$max, $intent = _b.$intent;
         var intentPrimary = (0, intentHelper_1.intentColor)({ theme: theme }, { $intent: $intent });
         var intentSecondary = secondaryIntentColor({ theme: theme }, { $intent: $intent });
         var scaledValue = $value.map(function (value) { return ((value - $min) / ($max - $min)) * 100; });
-        var gradientDirection = direction === 'rtl' ? 'to left' : 'to right';
-        return (0, tslib_1.__assign)({ background: scaledValue.length == 1
+        var gradientDirection = 'to right';
+        return (0, tslib_1.__assign)({ background: scaledValue.length === 1
                 ? "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentPrimary, " ").concat(scaledValue[0], "%, \n            ").concat(intentSecondary, " ").concat(scaledValue[0], "%)")
                 : "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentSecondary, " ").concat(scaledValue[0], "%,\n            ").concat(intentPrimary, " ").concat(scaledValue[0], "% ").concat(scaledValue[1], "%, \n              ").concat(intentSecondary, " ").concat(scaledValue[1], "%)"), opacity: $disabled ? '0.6' : '1', height: px2rem('6px'), cursor: $disabled ? 'not-allowed' : 'inherit' }, (0, longHandHelpers_1.borderRadius)('6px'));
     },

package/slider/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SharedProps as BaseSharedProps, SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps } from 'baseui/slider';
+import { SharedProps as BaseSharedProps, SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps } from '../baseui/slider';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
 declare type GetMarkLabelFn = (props: SharedProps & {

package/snackbar/Snackbar.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var layer_1 = require("baseui/layer");
+var layer_1 = require("../baseui/layer");
 var react_1 = require("react");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var button_1 = require("../button");
@@ -13,6 +13,7 @@ var constants_1 = require("./constants");
 var layer_2 = require("../layer");
 var styled_component_1 = require("./styled-component");
 var useSnackbar_1 = (0, tslib_1.__importDefault)(require("./useSnackbar"));
+var locale_1 = require("../locale");
 var Snackbar = function (_a) {
     var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message, _c = _a.disableManualClose, disableManualClose = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.autoHideDuration, autoHideDuration = _f === void 0 ? constants_1.TYPE_TO_HIDE_DURATION[_intent] : _f, _g = _a.hideOnClickAway, hideOnClickAway = _g === void 0 ? true : _g, overrides = _a.overrides, _h = _a.onClose, onClose = _h === void 0 ? noop_1.default : _h;
     var _j = (0, useSnackbar_1.default)({
@@ -41,19 +42,18 @@ var Snackbar = function (_a) {
     var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.IconsContainer, styled_component_1.StyledIconsContainer), 2), IconsContainer = _q[0], iconsContainerProps = _q[1];
     var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.IntentIcon, IntentIconComponent), 2), IntentIcon = _r[0], intentIconProps = _r[1];
     var _s = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, close_1.default), 2), Close = _s[0], closeProps = _s[1];
-    var _t = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, button_1.IconButton)), CloseIconButton = _t[0], closeIconButtonProps = _t.slice(1);
-    return shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, (0, tslib_1.__assign)({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsxs)(SnackbarContainer, (0, tslib_1.__assign)({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: [(0, jsx_runtime_1.jsxs)(ContentContainer, (0, tslib_1.__assign)({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, (0, tslib_1.__assign)({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, (0, tslib_1.__assign)({ size: 30, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Message, (0, tslib_1.__assign)({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: (0, react_1.isValidElement)(message) ? (0, react_1.cloneElement)(message) : message }), void 0)] }), void 0), !disableManualClose && ((0, jsx_runtime_1.jsx)(CloseIconButton, (0, tslib_1.__assign)({ shape: "square", className: [
-                                'cursor-pointer absolute h-4 w-4 rounded-2 min-w-0 border-0',
-                                {
-                                    top: '1rem',
-                                    right: '1rem',
-                                    ':focus': {
-                                        backgroundColor: '#48484C',
+    var _t = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, button_1.IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
+    var locale = (0, locale_1.useLocale)();
+    return shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, (0, tslib_1.__assign)({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsx)(SnackbarContainer, (0, tslib_1.__assign)({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: (0, jsx_runtime_1.jsxs)(ContentContainer, (0, tslib_1.__assign)({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, (0, tslib_1.__assign)({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, (0, tslib_1.__assign)({ size: 14, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Message, (0, tslib_1.__assign)({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: (0, react_1.isValidElement)(message) ? (0, react_1.cloneElement)(message) : message }), void 0), !disableManualClose && ((0, jsx_runtime_1.jsx)(CloseIconButton, (0, tslib_1.__assign)({ shape: "square", className: [
+                                    'cursor-pointer h-4 w-4 ml-3 rounded-2 min-w-0 border-0 flex-shrink-0',
+                                    {
+                                        ':focus': {
+                                            backgroundColor: '#48484C',
+                                        },
+                                        ':hover': {
+                                            backgroundColor: '#48484C',
+                                        },
                                     },
-                                    ':hover': {
-                                        backgroundColor: '#48484C',
-                                    },
-                                },
-                            ], onClick: function () { return handleClose('manualClose'); } }, sharedProps, closeIconButtonProps, { children: (0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ "data-testid": "snackbar-close", size: 10, className: { fill: '#A0A0A8' } }, sharedProps, closeProps), void 0) }), void 0))] }), void 0) }), void 0) }), void 0) }), void 0)) : null;
+                                ], onClick: function () { return handleClose('manualClose'); }, "aria-label": locale.snackbar.closeAriaLabel }, sharedProps, closeIconButtonProps, { children: (0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ "data-testid": "snackbar-close", size: 10, className: { fill: '#A0A0A8' } }, sharedProps, closeProps), void 0) }), void 0))] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0)) : null;
 };
 exports.default = Snackbar;

package/snackbar/constants.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { IconProps } from '../icon';
 import { Intent } from './types';
 export declare const TRANSITION_DURATION = 1000;
-export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<IconProps>>;
+export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<React.PropsWithChildren<IconProps>>>;
 export declare const TYPE_TO_HIDE_DURATION: Record<Intent, number>;

package/snackbar/styled-component.js

@@ -59,25 +59,28 @@ exports.StyledPlacementContainer = (0, style_1.styled)('div', 'flex flex-col fix
 exports.StyledSnackbarContainer = (0, style_1.styled)('div', 'pointer-events-auto flex spr-shadow-01 overflow-hidden rounded-8 relative', function (_a) {
     var px2rem = _a.px2rem;
     return ({
-        minHeight: px2rem(80),
+        minHeight: px2rem(52),
         maxWidth: px2rem(432),
         minWidth: px2rem(250),
     });
 });
-exports.StyledIconsContainer = (0, style_1.styled)('div', 'flex items-center justify-center rounded-full', function (_a) {
+exports.StyledIconsContainer = (0, style_1.styled)('div', 'flex items-center justify-center rounded-8', function (_a) {
     var px2rem = _a.px2rem;
     return ({
-        width: px2rem(30),
-        height: px2rem(30),
+        width: px2rem(14),
+        height: px2rem(14),
     });
 });
-exports.StyledContentContainer = (0, style_1.styled)('div', 'py-6 px-8 overflow-hidden flex items-center flex-1', function (_a) {
+exports.StyledContentContainer = (0, style_1.styled)('div', 'py-2 px-3 overflow-hidden flex items-center flex-1', function (_a) {
     var theme = _a.theme;
     return ({
         backgroundColor: theme.name.includes('dark') ? theme.spr.ui05 : '#212123',
     });
 });
-exports.StyledMessage = (0, style_1.styled)('div', 'typography-bs1 ml-3 flex-1 flex items-center spr-text-05');
+exports.StyledMessage = (0, style_1.styled)('div', 'font-500 text-14  ml-3 flex-1 flex items-center spr-text-05', {
+    lineHeight: '18px',
+    wordBreak: 'break-word',
+});
 var getIconStyles = function (utils, props) { return ({
     fill: (0, intentHelper_1.intentColor)(utils, props, utils.theme.supportSuccess),
 }); };

package/snackbar/useSnackbar.js

@@ -14,7 +14,9 @@ var useHideOnClickAway = function (_a) {
                 handleClose('clickaway');
             }
         }
-    }, [open, hideOnClickAway]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    [open, hideOnClickAway]);
     (0, react_1.useEffect)(function () {
         document.addEventListener('click', handleDocumentClick);
         return function () { return document.removeEventListener('click', handleDocumentClick); };
@@ -29,29 +31,36 @@ var useAutoHide = function (_a) {
             return function () { return window.clearTimeout(autoHideTimeoutRef.current); };
         }
         return undefined;
-    }, [open, autoHide, autoHideDuration]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
     var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
     var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
+    var removeFromDomTimeoutRef = (0, react_1.useRef)();
     // handle exit, enter on message change
     (0, react_1.useEffect)(function () {
         if (!message)
             return undefined;
         // enter new snackbar immediately if none is opened already else wait for exit transition to finish.
-        var timeoutId = window.setTimeout(enter, open ? constants_1.TRANSITION_DURATION : 0);
+        var timeoutId = window.setTimeout(function () {
+            window.clearTimeout(removeFromDomTimeoutRef.current);
+            setDomVisibility(true);
+            enter();
+        }, open ? constants_1.TRANSITION_DURATION : 0);
         setDomVisibility(true);
         // exit previously opened snackbar
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
     }, [message, intent]);
     // remove from DOM, once transition is over
     (0, useUpdateEffect_1.default)(function () {
         if (open)
             return undefined;
-        var timeoutId = window.setTimeout(function () { return setDomVisibility(false); }, constants_1.TRANSITION_DURATION);
+        removeFromDomTimeoutRef.current = window.setTimeout(function () { return setDomVisibility(false); }, constants_1.TRANSITION_DURATION);
         return function () {
-            window.clearTimeout(timeoutId);
+            window.clearTimeout(removeFromDomTimeoutRef.current);
         };
     }, [open]);
     return domVisibility;
@@ -61,11 +70,11 @@ var useSnackbar = function (_a) {
     var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
     var _c = (0, tslib_1.__read)((0, react_1.useState)({ intent: nextIntent, message: nextMessage }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
     var autoHideTimeoutRef = (0, react_1.useRef)();
-    var handleClose = function (reason) {
+    var handleClose = (0, react_1.useCallback)(function (reason) {
         setOpen(false);
         window.clearTimeout(autoHideTimeoutRef.current);
         onClose === null || onClose === void 0 ? void 0 : onClose(reason);
-    };
+    }, [onClose]);
     var enter = function () {
         // set the intent and message to be rendered in the Snackbar which we are entering
         setSnackbarContent({ intent: nextIntent, message: nextMessage });

package/spacewebProvider/AiIconLinearGradients.d.ts

@@ -0,0 +1,2 @@
+declare const AiIconLinearGradients: () => import("react/jsx-runtime").JSX.Element;
+export default AiIconLinearGradients;

package/spacewebProvider/AiIconLinearGradients.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var style_1 = require("../style");
+var commonStyles_1 = require("../helpers/commonStyles");
+var AiIconLinearGradients = function () {
+    var theme = (0, style_1.useStyle)().theme;
+    return ((0, jsx_runtime_1.jsx)("svg", (0, tslib_1.__assign)({ style: commonStyles_1.accessibilityStyles }, { children: (0, jsx_runtime_1.jsx)("defs", { children: theme.name.includes('light') ? ((0, jsx_runtime_1.jsxs)("linearGradient", (0, tslib_1.__assign)({ id: "aiGradientID", x1: "10.065", y1: "-152.894", x2: ".289", y2: "-163.48", gradientTransform: "matrix(1 0 0 -1 0 -149.213)", gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: "#de46e1" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: ".487", stopColor: "#8e43ff" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#0e61f6" }, void 0)] }), void 0)) : ((0, jsx_runtime_1.jsxs)("linearGradient", (0, tslib_1.__assign)({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#DE46E1" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "0.486707", stopColor: "#8E43FF" }, void 0), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#0E61F6" }, void 0)] }), void 0)) }, void 0) }), void 0));
+};
+exports.default = AiIconLinearGradients;

package/spacewebProvider/CustomBaseProvider.d.ts

@@ -1,17 +1,8 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
-import { Theme } from 'baseui/theme';
-import { Direction } from '@sprinklrjs/spaceweb-themes/types';
-import { Override } from '../overrides';
 declare const CustomBaseProvider: (props: {
-    theme: Theme & {
-        direction: Direction;
-    };
-    children: React.ReactElement;
-    overrides?: {
-        AppContainer?: Override<any>;
-        LayersContainer?: Override<any>;
-    };
+    children: React.ReactNode;
     zIndex?: number;
+    host?: HTMLElement | null;
 }) => ReactElement;
 export default CustomBaseProvider;

package/spacewebProvider/CustomBaseProvider.js

@@ -2,16 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
-var React = (0, tslib_1.__importStar)(require("react"));
-var baseui_1 = require("baseui");
-// @ts-ignore
-baseui_1.BaseProvider.displayName = 'BaseUIProvider';
-// NOTE: Reason https://baseweb.design/components/layer/#layersmanager
-var BaseProviderOverrides = {
-    AppContainer: { props: { 'data-testid': 'spaceweb-app-container' }, style: { height: '100%' } },
-    // Spaceweb has its own LayersContainer, no need to render Baseweb's container.
-    LayersContainer: React.forwardRef(function () { return null; }),
-};
-var CustomBaseProvider = function (props) { return ((0, jsx_runtime_1.jsx)(baseui_1.BaseProvider, (0, tslib_1.__assign)({}, props, { overrides: (0, useConvertOverrides_1.useConvertOverrides)(BaseProviderOverrides, props.overrides, [props.overrides]) }), void 0)); };
+// todo: add dependency. ideally this should not be reqd with react-18. but baseui internally uses this.
+var react_uid_1 = require("react-uid");
+var layer_1 = require("../layer");
+var CustomBaseProvider = function (props) { return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: props.zIndex, host: props.host }, { children: (0, jsx_runtime_1.jsx)(react_uid_1.UIDReset, (0, tslib_1.__assign)({ prefix: "bui" }, { children: props.children }), void 0) }), void 0)); };
 exports.default = CustomBaseProvider;

package/spacewebProvider/SpacewebProvider.d.ts

@@ -8,6 +8,7 @@ export declare type Props = {
     children: ReactNode;
     debug?: boolean;
     direction?: Direction;
+    langCode?: string;
     styleEngine?: StandardEngine;
     layersZIndex?: number;
     overrides?: {
@@ -17,6 +18,7 @@ export declare type Props = {
     theme: ThemeModule;
     locale?: React.ComponentProps<typeof LocaleProvider>['locale'];
     ownerDocument?: Document;
+    density?: 'COMPACT' | 'COMFORTABLE' | 'SPACIOUS' | 'DEFAULT' | undefined;
 };
 declare function SpacewebProviderWithDoc({ ownerDocument, children, ...rest }: Props): ReactElement;
 export default SpacewebProviderWithDoc;

package/spacewebProvider/SpacewebProvider.js

@@ -4,30 +4,32 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var CustomBaseProvider_1 = (0, tslib_1.__importDefault)(require("./CustomBaseProvider"));
-var focusVisible_1 = require("baseui/utils/focusVisible");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
 var DocumentProvider_1 = require("./DocumentProvider");
 var styleEngine_1 = require("../styleEngine");
-var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
-var utils_1 = require("./utils");
 var locale_1 = require("../locale");
-var layer_1 = require("../layer");
+// import { LAYERS_DEFAULT_ZINDEX } from '../layer';
 var theme_1 = require("../theme");
+var AiIconLinearGradients_1 = (0, tslib_1.__importDefault)(require("./AiIconLinearGradients"));
+var useHasMounted_1 = require("../hooks/useHasMounted");
+var LAYERS_DEFAULT_ZINDEX = 9999;
 function SpacewebProvider(props) {
-    var children = props.children, _a = props.direction, direction = _a === void 0 ? 'ltr' : _a, _b = props.layersZIndex, layersZIndex = _b === void 0 ? layer_1.LAYERS_DEFAULT_ZINDEX : _b, overrides = props.overrides, theme = props.theme, locale = props.locale, _c = props.debug, debug = _c === void 0 ? false : _c;
+    var children = props.children, _a = props.layersZIndex, layersZIndex = _a === void 0 ? LAYERS_DEFAULT_ZINDEX : _a, overrides = props.overrides, theme = props.theme, locale = props.locale, _b = props.debug, debug = _b === void 0 ? false : _b, density = props.density, langCode = props.langCode;
     var doc = (0, DocumentProvider_1.useDocument)();
     var styleEngine = props.styleEngine || (0, styleEngine_1.getStyleEngine)(doc);
     // TODO: This must be removed once baseui code exposes focusVisible from utils/index
     // https://github.com/uber/baseweb/issues/3322
     (0, react_1.useEffect)(function () {
-        if (!utils_1.isServer) {
-            (0, focusVisible_1.initFocusVisible)({ ownerDocument: doc });
-            return function () { return (0, focusVisible_1.teardown)(doc); };
-        }
-        return undefined;
+        (0, focusVisible_1.initFocusVisible)({ ownerDocument: doc });
+        return function () { return (0, focusVisible_1.teardown)(doc); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var outerTheme = (0, theme_1.useTheme)();
+    var direction = props.direction || outerTheme.direction || 'ltr';
+    var localeValue = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, locale), { langCode: langCode })); }, [locale, langCode]);
     var themeValue = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { direction: direction })); }, [theme, direction]);
-    var baseProviderTheme = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, themes_1.default[theme.theme.name]), { direction: direction })); }, [direction, theme]);
-    return ((0, jsx_runtime_1.jsx)(styleEngine_1.StyleProvider, (0, tslib_1.__assign)({ debug: debug, styleEngine: styleEngine }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, (0, tslib_1.__assign)({ theme: themeValue, containerElement: doc === null || doc === void 0 ? void 0 : doc.documentElement }, { children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, (0, tslib_1.__assign)({ locale: locale }, { children: (0, jsx_runtime_1.jsx)(CustomBaseProvider_1.default, (0, tslib_1.__assign)({ overrides: overrides, theme: baseProviderTheme }, { children: (0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: children }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+    var hasMounted = (0, useHasMounted_1.useHasMounted)();
+    return ((0, jsx_runtime_1.jsx)(styleEngine_1.StyleProvider, (0, tslib_1.__assign)({ debug: debug, styleEngine: styleEngine }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, (0, tslib_1.__assign)({ theme: themeValue, containerElement: hasMounted ? doc.documentElement : undefined, density: density }, { children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, (0, tslib_1.__assign)({ locale: localeValue }, { children: (0, jsx_runtime_1.jsxs)(CustomBaseProvider_1.default, (0, tslib_1.__assign)({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: [children, (0, jsx_runtime_1.jsx)(AiIconLinearGradients_1.default, {}, void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
 }
 function SpacewebProviderWithDoc(_a) {
     var ownerDocument = _a.ownerDocument, children = _a.children, rest = (0, tslib_1.__rest)(_a, ["ownerDocument", "children"]);

package/stack/stack.js

@@ -24,23 +24,16 @@ var getStackClassNames = function (props) {
     var direction = props.direction, gap = props.gap;
     var _a = modifyGapParam(gap), prefix = _a.prefix, gapVal = _a.gapVal;
     var stackClassName = [direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col'];
-    var stackItemClassName = [
-        function (_a) {
-            var themeDirection = _a.direction;
-            var marginDir = themeDirection === 'rtl' ? 'mr' : 'ml';
-            return direction === 'horizontal' ? "".concat(prefix).concat(marginDir, "-").concat(gapVal) : "".concat(prefix, "mt-").concat(gapVal);
-        },
-    ];
+    var stackItemClassName = [direction === 'horizontal' ? "".concat(prefix, "ml-").concat(gapVal) : "".concat(prefix, "mt-").concat(gapVal)];
     BREAKPOINTS.forEach(function (bp) {
         if (props[bp]) {
             stackClassName.push(props[bp].direction === 'horizontal' ? "".concat(bp, ":flex ").concat(bp, ":flex-row") : "".concat(bp, ":flex ").concat(bp, ":flex-col"));
-            var _a = modifyGapParam(props[bp].gap), prefix_1 = _a.prefix, gapVal_1 = _a.gapVal;
-            stackItemClassName.push(function (_a) {
-                var themeDirection = _a.direction;
-                var marginDir = themeDirection === 'rtl' ? 'mr' : 'ml';
+            var _a = modifyGapParam(props[bp].gap), prefixBp_1 = _a.prefix, gapValBp_1 = _a.gapVal;
+            stackItemClassName.push(function () {
+                var marginDir = 'ml';
                 return props[bp].direction === 'horizontal'
-                    ? "".concat(bp, ":").concat(prefix_1).concat(marginDir, "-").concat(gapVal_1, " ").concat(bp, ":mt-0")
-                    : "".concat(bp, ":").concat(prefix_1, "mt-").concat(gapVal_1, " ").concat(bp, ":").concat(marginDir, "-0");
+                    ? "".concat(bp, ":").concat(prefixBp_1).concat(marginDir, "-").concat(gapValBp_1, " ").concat(bp, ":mt-0")
+                    : "".concat(bp, ":").concat(prefixBp_1, "mt-").concat(gapValBp_1, " ").concat(bp, ":").concat(marginDir, "-0");
             });
         }
     });

package/style/_buildUtils.d.ts

@@ -1,4 +1,4 @@
 import { StyleUtils, ThemeContext, StyleObject } from '../types';
 declare type StyletronCSS = (arg: StyleObject) => string;
-declare const _default: (ctx: ThemeContext, styletronCSS: StyletronCSS) => StyleUtils;
+declare const _default: (_ctx: ThemeContext, styletronCSS: StyletronCSS) => StyleUtils;
 export default _default;

package/style/_buildUtils.js

@@ -4,7 +4,9 @@ var tslib_1 = require("tslib");
 var _getStyle_1 = (0, tslib_1.__importDefault)(require("./_getStyle"));
 var _css_1 = (0, tslib_1.__importDefault)(require("./_css"));
 var _px2rem_1 = (0, tslib_1.__importDefault)(require("./_px2rem"));
-exports.default = (function (ctx, styletronCSS) {
+exports.default = (function (_ctx, styletronCSS) {
+    // console.log('theme', _ctx.theme);
+    var ctx = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _ctx), { isRTL: _ctx.direction === 'rtl' });
     var css = _css_1.default.bind(null, ctx, styletronCSS);
     var getStyle = _getStyle_1.default.bind(null, ctx);
     var px2rem = _px2rem_1.default.bind(null, ctx);

package/style/_parseStyle.js

@@ -28,7 +28,7 @@ var _parseStyle = function (utils, props) {
     for (var _i = 2; _i < arguments.length; _i++) {
         args[_i - 2] = arguments[_i];
     }
-    var invalidArgs = [];
+    var invalidArgs = [], directionStyleObject;
     if (!args.length)
         return [{}, invalidArgs];
     var styleObject = flattenDeep(args).reduce(function (mergedStyleObject, arg) {
@@ -66,6 +66,11 @@ var _parseStyle = function (utils, props) {
         }
         return (0, merge_1.default)(mergedStyleObject, arg);
     }, {});
-    return [styleObject, invalidArgs];
+    /**
+     * merging directionStyles at last to make sure priority of styles with ltr/rtl pseudo selector is more.
+     * e.g. `rtl:ml-2 ml-3` -> ml-2 should be applied when direction is rtl
+     */
+    var styleObjectWithRtlStyles = directionStyleObject ? (0, merge_1.default)(styleObject, directionStyleObject) : styleObject;
+    return [styleObjectWithRtlStyles, invalidArgs];
 };
 exports.default = _parseStyle;

package/style/styled.d.ts

@@ -4,7 +4,7 @@
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import * as React from 'react';
 import { Styles } from '../types';
-declare type Tag = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+declare type Tag = keyof JSX.IntrinsicElements | React.ComponentType<React.PropsWithChildren<any>>;
 declare type StyledFunc = (ComponentOrTag: Tag, ...args: Styles[]) => StyledComponent;
 export declare type StyledComponent = ForwardRefExoticComponent<PropsWithoutRef<any> & RefAttributes<HTMLElement | React.ComponentClass>>;
 declare const styled: StyledFunc;

package/style/useMemoizedStyletron.d.ts

@@ -1,5 +1,6 @@
+import { useStyletron } from 'styletron-react';
 /**
  * styletron returns new `styletronCSS` function each time the hook is called. This hook memorizes the css function and returns same reference every time.
  */
-declare const useMemoizedStyletron: () => [(a: import("styletron-standard").StyleObject) => string, import("baseui").Theme];
+declare const useMemoizedStyletron: () => ReturnType<typeof useStyletron>;
 export default useMemoizedStyletron;

package/style/useMemoizedStyletron.js

@@ -1,16 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var baseui_1 = require("baseui");
+var styletron_react_1 = require("styletron-react");
 var react_1 = require("react");
+var rtl_css_js_1 = (0, tslib_1.__importDefault)(require("rtl-css-js"));
 var useLatest_1 = require("../hooks/useLatest");
+var context_1 = require("../theme/context");
+var identity = function (x) { return x; };
 /**
  * styletron returns new `styletronCSS` function each time the hook is called. This hook memorizes the css function and returns same reference every time.
  */
 var useMemoizedStyletron = function () {
-    var _a = (0, tslib_1.__read)((0, baseui_1.useStyletron)(), 2), styletronCSS = _a[0], theme = _a[1];
+    var _a = (0, tslib_1.__read)((0, styletron_react_1.useStyletron)(), 1), styletronCSS = _a[0];
+    var ctx = (0, context_1.useTheme)();
     var cssRef = (0, useLatest_1.useLatest)(styletronCSS);
-    var css = (0, react_1.useCallback)(function (arg) { return cssRef.current(arg); }, [cssRef]);
-    return [css, theme];
+    var decorator = ctx.direction === 'rtl' ? rtl_css_js_1.default : identity;
+    var css = (0, react_1.useCallback)(function (arg) { return cssRef.current(decorator(arg)); }, [cssRef, decorator]);
+    return [css];
 };
 exports.default = useMemoizedStyletron;

package/switch/index.d.ts

@@ -1,3 +1,3 @@
 export { Switch, StatefulSwitch } from './switch';
-export { StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from 'baseui/checkbox';
+export { StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledToggle, StyledToggleTrack, } from '../baseui/checkbox';
 export * from './types';