@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/esm/snackbar/useSnackbar.js

@@ -12,7 +12,9 @@ var useHideOnClickAway = function (_a) {
                 handleClose('clickaway');
             }
         }
-    }, [open, hideOnClickAway]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    [open, hideOnClickAway]);
     useEffect(function () {
         document.addEventListener('click', handleDocumentClick);
         return function () { return document.removeEventListener('click', handleDocumentClick); };
@@ -27,29 +29,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 = __read(useState(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
+    var removeFromDomTimeoutRef = useRef();
     // handle exit, enter on message change
     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 ? TRANSITION_DURATION : 0);
+        var timeoutId = window.setTimeout(function () {
+            window.clearTimeout(removeFromDomTimeoutRef.current);
+            setDomVisibility(true);
+            enter();
+        }, open ? 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
     useUpdateEffect(function () {
         if (open)
             return undefined;
-        var timeoutId = window.setTimeout(function () { return setDomVisibility(false); }, TRANSITION_DURATION);
+        removeFromDomTimeoutRef.current = window.setTimeout(function () { return setDomVisibility(false); }, TRANSITION_DURATION);
         return function () {
-            window.clearTimeout(timeoutId);
+            window.clearTimeout(removeFromDomTimeoutRef.current);
         };
     }, [open]);
     return domVisibility;
@@ -59,11 +68,11 @@ var useSnackbar = function (_a) {
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var _c = __read(useState({ intent: nextIntent, message: nextMessage }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
     var autoHideTimeoutRef = useRef();
-    var handleClose = function (reason) {
+    var handleClose = 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/esm/spacewebProvider/AiIconLinearGradients.d.ts

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

package/esm/spacewebProvider/AiIconLinearGradients.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../style';
+import { accessibilityStyles } from '../helpers/commonStyles';
+var AiIconLinearGradients = function () {
+    var theme = useStyle().theme;
+    return (_jsx("svg", __assign({ style: accessibilityStyles }, { children: _jsx("defs", { children: theme.name.includes('light') ? (_jsxs("linearGradient", __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: [_jsx("stop", { offset: "0", stopColor: "#de46e1" }, void 0), _jsx("stop", { offset: ".487", stopColor: "#8e43ff" }, void 0), _jsx("stop", { offset: "1", stopColor: "#0e61f6" }, void 0)] }), void 0)) : (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#DE46E1" }, void 0), _jsx("stop", { offset: "0.486707", stopColor: "#8E43FF" }, void 0), _jsx("stop", { offset: "1", stopColor: "#0E61F6" }, void 0)] }), void 0)) }, void 0) }), void 0));
+};
+export default AiIconLinearGradients;

package/esm/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/esm/spacewebProvider/CustomBaseProvider.js

@@ -1,14 +1,7 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
-import * as React from 'react';
-import { BaseProvider } from 'baseui';
-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 (_jsx(BaseProvider, __assign({}, props, { overrides: 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.
+import { UIDReset } from 'react-uid';
+import { LayersManager } from '../layer';
+var CustomBaseProvider = function (props) { return (_jsx(LayersManager, __assign({ zIndex: props.zIndex, host: props.host }, { children: _jsx(UIDReset, __assign({ prefix: "bui" }, { children: props.children }), void 0) }), void 0)); };
 export default CustomBaseProvider;

package/esm/spacewebProvider/SpacewebProvider.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import * as React from 'react';
-import { StandardEngine } from 'styletron-react';
+import { StandardEngine } from 'styletron-standard';
 import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
 import { Override } from '../overrides';
 import { LocaleProvider } from '../locale';
@@ -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/esm/spacewebProvider/SpacewebProvider.js

@@ -1,31 +1,33 @@
 import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import CustomBaseProvider from './CustomBaseProvider';
-import { initFocusVisible, teardown } from 'baseui/utils/focusVisible';
+import { initFocusVisible, teardown } from '../baseui/utils/focusVisible';
 import { DocumentProvider, useDocument } from './DocumentProvider';
 import { StyleProvider, getStyleEngine } from '../styleEngine';
-import BASEWEB_THEMES from '../themes';
-import { isServer } from './utils';
 import { LocaleProvider } from '../locale';
-import { LAYERS_DEFAULT_ZINDEX, LayersManager } from '../layer';
-import { ThemeProvider } from '../theme';
+// import { LAYERS_DEFAULT_ZINDEX } from '../layer';
+import { ThemeProvider, useTheme } from '../theme';
+import AiIconLinearGradients from './AiIconLinearGradients';
+import { useHasMounted } from '../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 ? 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 = useDocument();
     var styleEngine = props.styleEngine || getStyleEngine(doc);
     // TODO: This must be removed once baseui code exposes focusVisible from utils/index
     // https://github.com/uber/baseweb/issues/3322
     useEffect(function () {
-        if (!isServer) {
-            initFocusVisible({ ownerDocument: doc });
-            return function () { return teardown(doc); };
-        }
-        return undefined;
+        initFocusVisible({ ownerDocument: doc });
+        return function () { return teardown(doc); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var outerTheme = useTheme();
+    var direction = props.direction || outerTheme.direction || 'ltr';
+    var localeValue = useMemo(function () { return (__assign(__assign({}, locale), { langCode: langCode })); }, [locale, langCode]);
     var themeValue = useMemo(function () { return (__assign(__assign({}, theme), { direction: direction })); }, [theme, direction]);
-    var baseProviderTheme = useMemo(function () { return (__assign(__assign({}, BASEWEB_THEMES[theme.theme.name]), { direction: direction })); }, [direction, theme]);
-    return (_jsx(StyleProvider, __assign({ debug: debug, styleEngine: styleEngine }, { children: _jsx(ThemeProvider, __assign({ theme: themeValue, containerElement: doc === null || doc === void 0 ? void 0 : doc.documentElement }, { children: _jsx(LocaleProvider, __assign({ locale: locale }, { children: _jsx(CustomBaseProvider, __assign({ overrides: overrides, theme: baseProviderTheme }, { children: _jsx(LayersManager, __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 = useHasMounted();
+    return (_jsx(StyleProvider, __assign({ debug: debug, styleEngine: styleEngine }, { children: _jsx(ThemeProvider, __assign({ theme: themeValue, containerElement: hasMounted ? doc.documentElement : undefined, density: density }, { children: _jsx(LocaleProvider, __assign({ locale: localeValue }, { children: _jsxs(CustomBaseProvider, __assign({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: [children, _jsx(AiIconLinearGradients, {}, void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
 }
 function SpacewebProviderWithDoc(_a) {
     var ownerDocument = _a.ownerDocument, children = _a.children, rest = __rest(_a, ["ownerDocument", "children"]);

package/esm/stack/stack.js

@@ -22,23 +22,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/esm/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/esm/style/_buildUtils.js

@@ -2,7 +2,9 @@ import { __assign } from "tslib";
 import _getStyle from './_getStyle';
 import _css from './_css';
 import _px2rem from './_px2rem';
-export default (function (ctx, styletronCSS) {
+export default (function (_ctx, styletronCSS) {
+    // console.log('theme', _ctx.theme);
+    var ctx = __assign(__assign({}, _ctx), { isRTL: _ctx.direction === 'rtl' });
     var css = _css.bind(null, ctx, styletronCSS);
     var getStyle = _getStyle.bind(null, ctx);
     var px2rem = _px2rem.bind(null, ctx);

package/esm/style/_parseStyle.js

@@ -5,7 +5,6 @@ import { __read } from "tslib";
 /* eslint @typescript-eslint/no-use-before-define: 0, @typescript-eslint/no-explicit-any: 0 */
 import _flattenDeep from 'lodash/flattenDeep';
 import _merge from 'lodash/merge';
-import _escapeClassName from './_escapeClassName';
 export var PSEUDO_SELECTORS = {
     hover: ':hover',
     focus: ':focus',
@@ -26,7 +25,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) {
@@ -39,18 +38,19 @@ var _parseStyle = function (utils, props) {
                     var _a = __read(className.split(':'), 2), prefix = _a[0], prefixedClassName = _a[1];
                     if (utils.theme.screens[prefix]) {
                         var mediaQuery = "@media screen and (min-width: ".concat(utils.theme.screens[prefix], ")");
-                        mergedStyleObject[mediaQuery] = Object.assign(mergedStyleObject[mediaQuery] || {}, utils.classes[_escapeClassName(prefixedClassName)]);
+                        mergedStyleObject[mediaQuery] = Object.assign(mergedStyleObject[mediaQuery] || {}, utils.classes[prefixedClassName]);
                         isInvalidClassName = false;
                     }
                     if (PSEUDO_SELECTORS[prefix]) {
                         var prefixKey = PSEUDO_SELECTORS[prefix];
-                        mergedStyleObject[prefixKey] = Object.assign(mergedStyleObject[prefixKey] || {}, utils.classes[_escapeClassName(prefixedClassName)]);
+                        mergedStyleObject[prefixKey] = Object.assign(mergedStyleObject[prefixKey] || {}, utils.classes[prefixedClassName]);
                         isInvalidClassName = false;
                     }
                 }
-                var utilityStyle = utils.classes[_escapeClassName(className)];
-                if (utilityStyle)
+                var utilityStyle = utils.classes[className];
+                if (utilityStyle) {
                     Object.assign(mergedStyleObject, utilityStyle);
+                }
                 else if (isInvalidClassName)
                     invalidArgs.push(className);
             });
@@ -63,6 +63,11 @@ var _parseStyle = function (utils, props) {
         }
         return _merge(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 ? _merge(styleObject, directionStyleObject) : styleObject;
+    return [styleObjectWithRtlStyles, invalidArgs];
 };
 export default _parseStyle;

package/esm/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/esm/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: () => [(arg: import("styletron-standard").StyleObject) => string, import("baseui").Theme];
+declare const useMemoizedStyletron: () => ReturnType<typeof useStyletron>;
 export default useMemoizedStyletron;

package/esm/style/useMemoizedStyletron.js

@@ -1,14 +1,19 @@
 import { __read } from "tslib";
-import { useStyletron } from 'baseui';
+import { useStyletron } from 'styletron-react';
 import { useCallback } from 'react';
+import rtlCSSJS from 'rtl-css-js';
 import { useLatest } from '../hooks/useLatest';
+import { useTheme } from '../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 = __read(useStyletron(), 2), styletronCSS = _a[0], theme = _a[1];
+    var _a = __read(useStyletron(), 1), styletronCSS = _a[0];
+    var ctx = useTheme();
     var cssRef = useLatest(styletronCSS);
-    var css = useCallback(function (arg) { return cssRef.current(arg); }, [cssRef]);
-    return [css, theme];
+    var decorator = ctx.direction === 'rtl' ? rtlCSSJS : identity;
+    var css = useCallback(function (arg) { return cssRef.current(decorator(arg)); }, [cssRef, decorator]);
+    return [css];
 };
 export default useMemoizedStyletron;

package/esm/styleEngine/styleEngine.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Sheet } from 'styletron-engine-atomic';
-import { StandardEngine } from '../types';
+import { StandardEngine, Sheet, KeyframesObject } from '../types';
 export declare type ProviderProps = {
     styleEngine?: StandardEngine;
     debug?: boolean;
@@ -16,4 +15,5 @@ export declare const StyleProvider: {
 };
 export declare const getStylesheets: () => Sheet[];
 export declare const getStylesheetsHtml: () => string;
+export declare const deprecatedRenderKeyframes: (keyframes: KeyframesObject) => string;
 export declare const appendCacheContainer: (ownerDocument?: Document) => Element;

package/esm/styleEngine/styleEngine.js

@@ -80,6 +80,10 @@ export var getStylesheetsHtml = function () {
     ensureEngine();
     return styletron.getStylesheetsHtml();
 };
+export var deprecatedRenderKeyframes = function (keyframes) {
+    ensureEngine();
+    return styletron.renderKeyframes(keyframes);
+};
 // Appends cache styles to the DOM and returns element's instance.
 export var appendCacheContainer = function (ownerDocument) {
     ensureClient();

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

package/esm/switch/index.js

@@ -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';

package/esm/switch/styled-components.js

@@ -2,10 +2,9 @@ import { __assign } from "tslib";
 import { hex2rgb } from '../helpers';
 import { borderRadius, margin } from '../helpers/longHandHelpers';
 import { intentColor } from '../helpers/intentHelper';
-import { getOutlineStyles } from '../helpers/commonStyles';
 var getTrackBackgroundColor = function (utils, props) {
     var theme = utils.theme;
-    var $disabled = props.$disabled, $checked = props.$checked, $isFocusVisible = props.$isFocusVisible, $isHovered = props.$isHovered;
+    var $disabled = props.$disabled, $checked = props.$checked;
     if ($disabled) {
         if ($checked) {
             return hex2rgb(intentColor(utils, props), '0.5');
@@ -15,19 +14,12 @@ var getTrackBackgroundColor = function (utils, props) {
     if ($checked) {
         return intentColor(utils, props);
     }
-    if ($isHovered || $isFocusVisible) {
-        return hex2rgb(theme.spr.interactive01, '0.2');
-    }
-    return theme.spr.ui03;
+    return theme.spr.icon03;
 };
 export var getToggleTrackOverrides = function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size, $isFocusVisible = props.$isFocusVisible;
-    var styles = __assign(__assign(__assign({ boxSizing: 'border-box', height: px2rem(16), width: px2rem(28), backgroundColor: getTrackBackgroundColor(utils, props) }, borderRadius(px2rem(27))), margin(0)), ($isFocusVisible
-        ? __assign({}, getOutlineStyles(utils, {
-            $outlineOffset: '2px',
-            $outlineWidth: '2px',
-        })) : {}));
+    var px2rem = utils.px2rem, getStyle = utils.getStyle;
+    var $size = props.$size, $isFocusVisible = props.$isFocusVisible, $isHovered = props.$isHovered, $checked = props.$checked, $disabled = props.$disabled;
+    var styles = __assign(__assign({ height: px2rem(16), width: px2rem(28), backgroundColor: getTrackBackgroundColor(utils, props) }, borderRadius(px2rem(27))), { boxShadow: 'none' });
     switch ($size) {
         case 'lg':
             styles.height = px2rem(20);
@@ -40,16 +32,17 @@ export var getToggleTrackOverrides = function (utils, props) {
         default:
             break;
     }
-    return styles;
+    return getStyle([
+        'box-border border-1 m-0 border-transparent border-solid flex-none',
+        ($isHovered || $isFocusVisible) && !$checked && !$disabled ? 'spr-border-06' : '',
+        $isFocusVisible ? 'outline-01' : '',
+        styles,
+    ]);
 };
 export var getToggleOverrides = function (utils, props) {
-    var px2rem = utils.px2rem, direction = utils.direction, theme = utils.theme;
+    var px2rem = utils.px2rem, theme = utils.theme, getStyle = utils.getStyle;
     var $size = props.$size, $checked = props.$checked, $disabled = props.$disabled, $isFocusVisible = props.$isFocusVisible;
-    var styles = __assign(__assign(__assign(__assign({ boxSizing: 'border-box', backgroundColor: $disabled ? theme.spr.ui03 : theme.spr.ui01, alignItems: 'center', display: 'flex', height: px2rem(12), width: px2rem(12) }, margin(px2rem(2))), borderRadius('50%')), { transform: $checked ? "translateX(".concat(direction === 'rtl' ? '-100%' : '100%', ")") : '', transition: 'transform 200ms' }), ($isFocusVisible
-        ? {
-            boxShadow: 'none',
-        }
-        : {}));
+    var styles = __assign(__assign(__assign({ backgroundColor: $disabled ? theme.spr.ui03 : theme.spr.ui01, height: px2rem(12), width: px2rem(12) }, margin(px2rem(1))), borderRadius('50%')), { transform: $checked ? 'translateX(100%)' : '', transition: 'transform 200ms', boxShadow: 'none' });
     switch ($size) {
         case 'lg':
             styles.height = styles.width = px2rem(16);
@@ -60,7 +53,7 @@ export var getToggleOverrides = function (utils, props) {
         default:
             break;
     }
-    return styles;
+    return getStyle(['flex items-center box-border', styles]);
 };
 export var getLabelOverrides = function (_a, _b) {
     var px2rem = _a.px2rem, theme = _a.theme;
@@ -68,12 +61,10 @@ export var getLabelOverrides = function (_a, _b) {
     var styles = {
         fontSize: px2rem(13),
         color: $disabled ? theme.spr.text02 : theme.spr.text01,
-        paddingLeft: px2rem(8),
         wordBreak: 'break-word',
     };
     if ($size === 'lg') {
         styles.fontSize = px2rem(14);
-        styles.paddingLeft = px2rem(10);
     }
     if ($size === 'sm') {
         styles.fontSize = px2rem(12);

package/esm/switch/switch.js

@@ -1,15 +1,18 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, StatefulCheckbox } from '../checkbox';
-import { STYLE_TYPE } from 'baseui/checkbox';
+import { STYLE_TYPE } from '../baseui/checkbox';
 import { useSwitchAdapter } from './basewebAdapter';
+import { useCombineRefObjects } from '../hooks/useCombinedRef';
 export var Switch = function (props) {
     var _a = useSwitchAdapter(props), overrides = _a.overrides, restProps = __rest(_a, ["overrides"]);
-    return (_jsx(Checkbox, __assign({ overrides: overrides, "data-spaceweb": "Switch", checkmarkType: STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+    var inputRefObj = useCombineRefObjects(props.inputRef);
+    return (_jsx(Checkbox, __assign({ overrides: overrides, "data-spaceweb": "Switch", checkmarkType: STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps, { inputRef: inputRefObj }), void 0));
 };
 Switch.displayName = 'Switch';
 export var StatefulSwitch = function (props) {
     var _a = useSwitchAdapter(props), overrides = _a.overrides, restProps = __rest(_a, ["overrides"]);
-    return (_jsx(StatefulCheckbox, __assign({ overrides: overrides, "data-spaceweb": "StatefulSwitch", checkmarkType: STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+    var inputRefObj = useCombineRefObjects(props.inputRef);
+    return (_jsx(StatefulCheckbox, __assign({ overrides: overrides, "data-spaceweb": "StatefulSwitch", checkmarkType: STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps, { inputRef: inputRefObj }), void 0));
 };
 StatefulSwitch.displayName = 'StatefulSwitch';

package/esm/switch/types.d.ts

@@ -1,8 +1,7 @@
-import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from 'baseui/checkbox';
-import { SharedProps as BaseSharedProps } from 'baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
+import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from '../checkbox';
+import { SharedProps as BaseSharedProps } from '../baseui/input';
 import { Override } from '../overrides';
-import { Intent, SpacewebComponentProps } from '../types';
+import { Intent } from '../types';
 export declare type SwitchSize = 'sm' | 'md' | 'lg';
 export declare type LabelPlacement = 'left' | 'right' | 'top' | 'bottom';
 export declare type SharedProps = BaseSharedProps & {
@@ -12,17 +11,15 @@ export declare type SharedProps = BaseSharedProps & {
     $isHovered: boolean;
     $size: SwitchSize;
 };
-export declare type SwitchProps = SpacewebComponentProps<Omit<BaseSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+export declare type SwitchProps = Omit<BaseSwitchProps, 'overrides' | 'size'> & {
     size?: SwitchSize;
-    intent?: Intent;
     overrides?: {
-        [key in keyof BaseSwitchProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseSwitchProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type StatefulSwitchProps = SpacewebComponentProps<Omit<BaseStatefulSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+};
+export declare type StatefulSwitchProps = Omit<BaseStatefulSwitchProps, 'overrides' | 'size'> & {
     size?: SwitchSize;
-    intent?: Intent;
     overrides?: {
-        [key in keyof BaseStatefulSwitchProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseStatefulSwitchProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
+};

package/esm/tabs/contexts.d.ts

@@ -8,5 +8,5 @@ export declare const useStatefulTabsContext: () => {
     activeTabId: Key;
     onChange: ChangEventHandler;
 };
-export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">>;
-export declare const useTabListContext: () => Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">;
+export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">>;
+export declare const useTabListContext: () => Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">;

package/esm/tabs/styled-components.d.ts

@@ -5,6 +5,6 @@ export declare const Root: (props: PropsWithChildren<SharedPropsTabs>) => ReactE
 export declare const tabsStyles: (utils: any, { $variant, $position }: {
     $variant: any;
     $position: any;
-}) => string;
+}) => any;
 export declare const tabStyle: StyleFn<SharedPropsTab>;
 export declare const StyledTabsPanel: import("../style/styled").StyledComponent;

package/esm/tabs/tab-list.js

@@ -34,7 +34,8 @@ export var TabList = function (props) {
             })
             : null;
     }, [handleKeyDown, activeTabId, statefulTabsContext]);
-    return (_jsx(TabListContext.Provider, __assign({ value: contextValue }, { children: _jsx(TabListComp, __assign({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [tabsStyles, className] }, { children: Children.map(props.children, renderTabChild) }), void 0) }), void 0));
+    var validChildren = Children.toArray(props.children).filter(isValidElement);
+    return (_jsx(TabListContext.Provider, __assign({ value: contextValue }, { children: _jsx(TabListComp, __assign({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [tabsStyles, className] }, { children: validChildren.map(renderTabChild) }), void 0) }), void 0));
 };
 TabList.displayName = 'TabList';
 TabList.defaultProps = {

package/esm/tag/avatar-tag.js

@@ -2,23 +2,30 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Avatar } from '../avatar';
-import { borderRadius } from '../helpers/longHandHelpers';
-import { getComponentTheme } from '../helpers/themeHelpers';
 import Tag from './tag';
-var tagRootStyles = function (_a) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var tagBorderRadius = getComponentTheme(theme, 'multiSelect').tagBorderRadius;
-    return __assign(__assign({}, (tagBorderRadius && borderRadius(tagBorderRadius))), { marginLeft: px2rem(4) });
-};
-var avatarRootStyles = function (_a) {
-    var theme = _a.theme;
-    var avatarMarginLeft = getComponentTheme(theme, 'tag').avatarMarginLeft;
-    return { marginLeft: avatarMarginLeft };
-};
+import { useStyle } from '../style';
+import { getDefaultTagSize, getTagSizeTheme } from './utils';
 var AvatarTag = function (props) {
-    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, tagProps = __rest(props, ["avatarProps", "startEnhancer", "className"]);
-    var startEnhancerOverride = useCallback(function (sharedProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, _jsx(Avatar, __assign({ size: "sm" }, avatarProps, { className: [avatarRootStyles, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer]);
-    var mergedClassName = useMemo(function () { return [tagRootStyles, className]; }, [className]);
-    return _jsx(Tag, __assign({ size: "lg", startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0);
+    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, _size = props.size, tagProps = __rest(props, ["avatarProps", "startEnhancer", "className", "size"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultTagSize(theme);
+    var avatarIconSize = getTagSizeTheme(theme, size).avatarIconSize;
+    var customTagOverrides = {
+        StartEnhancer: {
+            style: function (_a, _b) {
+                var $size = _b.$size;
+                return ($size === 'lg' ? { marginLeft: '8px' } : {});
+            },
+        },
+        Action: {
+            style: function (_a, _b) {
+                var $size = _b.$size;
+                return ($size === 'lg' ? { marginRight: '4px' } : {});
+            },
+        },
+    };
+    var startEnhancerOverride = useCallback(function (sharedProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, _jsx(Avatar, __assign({ size: avatarIconSize }, avatarProps, { className: [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer, avatarIconSize]);
+    var mergedClassName = useMemo(function () { return [className]; }, [className]);
+    return (_jsx(Tag, __assign({ overrides: customTagOverrides, size: size, startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0));
 };
 export default AvatarTag;

package/esm/tag/intentStyles.d.ts

@@ -1,4 +1,8 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { StyleObject } from '../types';
 import { Intent, Variant } from './types';
-export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => StyleObject;
+export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => {
+    styles: StyleObject;
+    hoverStyles: StyleObject;
+    activeStyles: StyleObject;
+};