@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/select/utils/merge-options.js

@@ -0,0 +1,18 @@
+import { __read, __spreadArray } from "tslib";
+import { normalizeOptions } from 'baseui/select/utils';
+import { UNGROUPED_ID } from '../constants';
+function removeDuplicates(valueKey, options) {
+    var keySet = new Set();
+    return options.filter(function (opt) {
+        var key = (opt.__optgroup || UNGROUPED_ID) + opt[valueKey];
+        var shouldAdd = !keySet.has(key);
+        keySet.add(key);
+        return shouldAdd;
+    });
+}
+export function mergeOptions(valueKey, options1, options2) {
+    if (options1 === void 0) { options1 = []; }
+    if (options2 === void 0) { options2 = []; }
+    var optArr1 = normalizeOptions(options1), optArr2 = normalizeOptions(options2);
+    return removeDuplicates(valueKey, __spreadArray(__spreadArray([], __read(optArr1), false), __read(optArr2), false));
+}

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

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

package/esm/select/utils/test-utils.js

@@ -0,0 +1,7 @@
+import { getAllByTestId, screen } from '@testing-library/react';
+export var getSelectedOptions = function (container) {
+    var elements = container
+        ? getAllByTestId(container, 'combobox-selected-value')
+        : screen.getAllByTestId('combobox-selected-value');
+    return elements.map(function (item) { return item.textContent; });
+};

package/esm/slider/mark.d.ts

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

package/esm/slider/slider.js

@@ -5,10 +5,11 @@ import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import Mark from './mark';
 import { getInnerTrackStyles, getThumbStyles, getInnerThumbStyles, getThumbValueStyles } from './styled-components';
 import { isServer } from '../spacewebProvider/utils';
+// @ts-ignore
 BaseSlider.displayName = 'BaseSlider';
 var defaultMarkLabel = function (_a) {
     var $markIndex = _a.$markIndex, $min = _a.$min, $step = _a.$step;
-    return "".concat($min + $markIndex * $step);
+    return "".concat(($min || 0) + $markIndex * $step);
 };
 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 = __rest(_a, ["overrides", "markLabel", "intent", "getMarkLabel", "className", "style"]);

package/esm/slider/stateful-slider.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import StatefulContainer from './stateful-slider-container';
 import Slider from './slider';
-var StatefulSlider = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { children: function (sliderProps) { return _jsx(Slider, __assign({}, sliderProps), void 0); } }), void 0)); };
+var StatefulSlider = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { children: function (sliderProps) { return _jsx(Slider, __assign({}, sliderProps, { overrides: props.overrides }), void 0); } }), void 0)); };
 StatefulSlider.displayName = 'StatefulSlider';
 export default StatefulSlider;

package/esm/slider/styled-components.js

@@ -4,7 +4,7 @@ import { borderRadius, borderColor } from '../helpers/longHandHelpers';
 import { intentColor } from '../helpers/intentHelper';
 import { hex2rgb } from '../helpers';
 var addOpacity = function (token, opacity) {
-    return token.includes('rgb') ? token.split(')')[0] + opacity + ')' : hex2rgb(token, opacity);
+    return token.includes('rgb') ? "".concat(token.split(')')[0] + opacity, ")") : hex2rgb(token, opacity);
 };
 var secondaryIntentColor = function (_a, _b) {
     var theme = _a.theme;
@@ -23,13 +23,13 @@ var secondaryIntentColor = function (_a, _b) {
 export var 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 = 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 __assign({ background: scaledValue.length == 1
+        var gradientDirection = 'to right';
+        return __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' }, borderRadius('6px'));
     },

package/esm/slider/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps, SharedProps as BaseSharedProps } 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 & {
@@ -26,7 +26,14 @@ export declare type SharedProps = BaseSharedProps & {
     $step: number;
 };
 export declare type SliderProps = SpacewebComponentProps<Omit<BaseSliderProps, 'overrides'>> & CommonSliderProps;
-export declare type StatefulContainerProps = SpacewebComponentProps<Omit<BaseStatefulContainerProps, 'overrides'>> & CommonSliderProps;
+export declare type StatefulContainerProps = SpacewebComponentProps<Omit<BaseStatefulContainerProps, 'overrides' | 'stateReducer' | 'min' | 'max' | 'step' | 'onChange' | 'onFinalChange'>> & CommonSliderProps & {
+    stateReducer?: BaseStatefulContainerProps['stateReducer'];
+    min?: BaseStatefulContainerProps['min'];
+    max?: BaseStatefulContainerProps['max'];
+    step?: BaseStatefulContainerProps['step'];
+    onChange?: BaseStatefulContainerProps['onChange'];
+    onFinalChange?: BaseStatefulContainerProps['onFinalChange'];
+};
 export declare type StatefulSliderProps = SpacewebComponentProps<Omit<BaseStatefulSliderProps, 'overrides'>> & CommonSliderProps;
 export declare type MarkProps = SharedProps & {
     $markIndex: number;

package/esm/snackbar/Snackbar.js

@@ -11,6 +11,7 @@ import { INTENT_TO_ICON, TYPE_TO_HIDE_DURATION } from './constants';
 import { LayersManager, Z_INDEX } from '../layer';
 import { StyledContentContainer, StyledIconsContainer, StyledMessage, StyledPlacementContainer, StyledSnackbarContainer, getIconStyles, } from './styled-component';
 import useSnackbar from './useSnackbar';
+import { useLocale } from '../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 ? 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 : _h;
     var _j = useSnackbar({
@@ -40,18 +41,17 @@ var Snackbar = function (_a) {
     var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.IntentIcon, IntentIconComponent), 2), IntentIcon = _r[0], intentIconProps = _r[1];
     var _s = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, CloseIcon), 2), Close = _s[0], closeProps = _s[1];
     var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, IconButton)), CloseIconButton = _t[0], closeIconButtonProps = _t.slice(1);
-    return shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsxs(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: [_jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 30, className: getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), _jsx(Message, __assign({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: isValidElement(message) ? cloneElement(message) : message }), void 0)] }), void 0), !disableManualClose && (_jsx(CloseIconButton, __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 locale = useLocale();
+    return shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsx(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: _jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 14, className: getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), _jsx(Message, __assign({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: isValidElement(message) ? cloneElement(message) : message }), void 0), !disableManualClose && (_jsx(CloseIconButton, __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: _jsx(Close, __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: _jsx(Close, __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;
 };
 export default Snackbar;

package/esm/snackbar/styled-component.js

@@ -56,25 +56,28 @@ export var StyledPlacementContainer = styled('div', 'flex flex-col fixed right-0
 export var StyledSnackbarContainer = 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),
     });
 });
-export var StyledIconsContainer = styled('div', 'flex items-center justify-center rounded-full', function (_a) {
+export var StyledIconsContainer = 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),
     });
 });
-export var StyledContentContainer = styled('div', 'py-6 px-8 overflow-hidden flex items-center flex-1', function (_a) {
+export var StyledContentContainer = 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',
     });
 });
-export var StyledMessage = styled('div', 'typography-bs1 ml-3 flex-1 flex items-center spr-text-05');
+export var StyledMessage = styled('div', 'font-500 text-14  ml-3 flex-1 flex items-center spr-text-05', {
+    lineHeight: '18px',
+    wordBreak: 'break-word',
+});
 export var getIconStyles = function (utils, props) { return ({
     fill: intentColor(utils, props, utils.theme.supportSuccess),
 }); };

package/esm/spacewebProvider/CustomBaseProvider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import * as React from 'react';
 import { BaseProvider } from 'baseui';
+// @ts-ignore
 BaseProvider.displayName = 'BaseUIProvider';
 // NOTE: Reason https://baseweb.design/components/layer/#layersmanager
 var BaseProviderOverrides = {

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

@@ -6,26 +6,26 @@ 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 { ThemeProvider, useTheme } from '../theme';
 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));
+    return (_jsx(StyleProvider, __assign({ debug: debug, styleEngine: styleEngine }, { children: _jsx(ThemeProvider, __assign({ theme: themeValue, containerElement: doc === null || doc === void 0 ? void 0 : doc.documentElement, density: density }, { children: _jsx(LocaleProvider, __assign({ locale: localeValue }, { 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));
 }
 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/useMemoizedStyletron.d.ts

@@ -1,5 +1,5 @@
 /**
  * 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: () => [(a: import("styletron-standard").StyleObject) => string, import("baseui").Theme];
 export default useMemoizedStyletron;

package/esm/style/useMemoizedStyletron.js

@@ -1,14 +1,19 @@
 import { __read } from "tslib";
 import { useStyletron } from 'baseui';
 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 ctx = useTheme();
     var cssRef = useLatest(styletronCSS);
-    var css = useCallback(function (arg) { return cssRef.current(arg); }, [cssRef]);
+    var decorator = ctx.direction === 'rtl' ? rtlCSSJS : identity;
+    var css = useCallback(function (arg) { return cssRef.current(decorator(arg)); }, [cssRef, decorator]);
     return [css, theme];
 };
 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 } from '../types';
 export declare type ProviderProps = {
     styleEngine?: StandardEngine;
     debug?: boolean;

package/esm/switch/__test__/switch.spec.js

@@ -5,6 +5,7 @@ import '@testing-library/jest-dom/extend-expect';
 import { Switch } from '../index';
 import { TestProvider, getCSSFromEl, getTestStyleUtils, setupBreakpoints } from '../../test-utils/test-provider';
 import { mount } from 'enzyme';
+import * as React from 'react';
 var renderSwitch = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, rest = __rest(_a, ["size", "intent"]);
     return render(_jsx(TestProvider, { children: _jsx(Switch, __assign({ size: size, intent: intent }, rest, { children: "Switch Label" }), void 0) }, void 0));
@@ -91,4 +92,16 @@ describe('Switch', function () {
             });
         });
     });
+    describe('inputRef', function () {
+        test('refObject should have the reference of input.', function () {
+            var inputRef = React.createRef();
+            var container = renderSwitch({ inputRef: inputRef }).container;
+            expect(inputRef.current).toBe(container.querySelector('input'));
+        });
+        test('refCallback should be called with input ref.', function () {
+            var inputRefCallback = jest.fn();
+            var container = renderSwitch({ inputRef: inputRefCallback }).container;
+            expect(inputRefCallback).toHaveBeenCalledWith(container.querySelector('input'));
+        });
+    });
 });

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;

package/esm/switch/switch.js

@@ -3,13 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, StatefulCheckbox } from '../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 { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from '../checkbox';
 import { SharedProps as BaseSharedProps } from 'baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
 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;
+};