@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/helpers/StyledTombstone.js

@@ -0,0 +1,17 @@
+import styled from '../style/styled';
+export var StyledTombstone = styled('div', 'spr-ui-03 h-full w-full', {
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'ease-in-out',
+    animationName: {
+        '0%': {
+            opacity: '1',
+        },
+        '50%': {
+            opacity: '0.4',
+        },
+        '100%': {
+            opacity: '1',
+        },
+    },
+});

package/esm/helpers/baseui/useConvertOverrides.js

@@ -1,10 +1,15 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import _reduce from 'lodash/reduce';
 import { useMemo } from 'react';
+import rtlCSSJS from 'rtl-css-js';
 import { mergeOverrides } from '../../overrides';
 import _getStyleWithProps from '../../style/_getStyleWithProps';
 import useStyle from '../../style/useStyle';
-var convertOverrideObject = function (override, utils) { return (__assign(__assign({}, override), { style: function (props) { return _getStyleWithProps(utils, props, override.style); } })); };
+var identity = function (x) { return x; };
+var convertOverrideObject = function (override, utils) { return (__assign(__assign({}, override), { style: function (props) {
+        var decorator = utils.isRTL ? rtlCSSJS : identity;
+        return decorator(_getStyleWithProps(utils, props, override.style));
+    } })); };
 var mergeAndConvertOverrides = function (target, source, utils) {
     if (source === void 0) { source = {}; }
     var mergedOverrides = mergeOverrides(target, source);

package/esm/helpers/commonStyles.js

@@ -1,3 +1,5 @@
+import { __assign } from "tslib";
+import { borderColor, borderRadius, borderStyle, borderWidth } from './longHandHelpers';
 export var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -21,12 +23,7 @@ export var transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': __assign(__assign(__assign(__assign(__assign({ backgroundColor: 'darkgrey' }, borderRadius('8px')), borderWidth('4px')), borderStyle('solid')), borderColor('transparent')), { backgroundClip: 'padding-box' }),
 };
 export var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;

package/esm/helpers/index.d.ts

@@ -17,6 +17,7 @@ export declare const add$props: (props: Record<string, unknown>) => Record<strin
  * @param value
  */
 export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
+export declare const themeTokenToHex: (token: string) => string | null;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

package/esm/helpers/index.js

@@ -44,6 +44,14 @@ export var covertCSSVariablesToValue = function (value) {
     }
     return value;
 };
+export var themeTokenToHex = function (token) {
+    var hex = covertCSSVariablesToValue(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

package/esm/helpers/themeHelpers.d.ts

@@ -2,3 +2,4 @@ import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
 export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
 export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
+export declare const getDefaultSize: (theme: Theme) => 'md' | 'xxxs';

package/esm/helpers/themeHelpers.js

@@ -1,5 +1,6 @@
 export var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -17,3 +18,15 @@ export var getComponentSizeTheme = function (theme, componentName, size, default
     var componentTheme = (_a = getComponentTheme(theme, componentName)) !== null && _a !== void 0 ? _a : {};
     return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
 };
+export var getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};

package/esm/hooks/useAutoFocus.js

@@ -46,6 +46,12 @@ var useAutoFocus = function (_a) {
         try {
             refObj.current.focus({ preventScroll: true });
             refObj.current.setSelectionRange(position, position);
+            // moves cursor at the end of the text in input & textarea
+            // this would have been handled by browser, but we have to do it explicitly because of preventScroll option in ref.focus
+            if (position === refObj.current.value.length) {
+                refObj.current.scrollLeft = refObj.current.scrollWidth;
+                refObj.current.scrollTop = refObj.current.scrollHeight;
+            }
         }
         catch (err) {
             if (__DEV__) {

package/esm/hooks/useMatchMedia.js

@@ -26,11 +26,22 @@ var useMedia = function (query, defaultState) {
             }
             setState(!!mediaQueryList.matches);
         };
-        mediaQueryList.addEventListener('change', onChange);
+        // addListener is deprecated but older version of safari still have not implemented addEventListener so adding check
+        if ('addEventListener' in mediaQueryList) {
+            mediaQueryList.addEventListener('change', onChange);
+        }
+        else {
+            mediaQueryList.addListener(onChange);
+        }
         setState(mediaQueryList.matches);
         return function () {
             mounted = false;
-            mediaQueryList.removeEventListener('change', onChange);
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
         };
     }, [query]);
     return state;

package/esm/icon/components/alert-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function AlertSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "AlertSolid" }, props, { children: _jsx("path", { d: "M7.063.012a6.994 6.994 0 1 0 6.994 6.994A6.996 6.996 0 0 0 7.063.012zm0 7.693a.701.701 0 0 1-.7-.699V4.21a.701.701 0 0 1 .7-.7.701.701 0 0 1 .7.7v2.797a.701.701 0 0 1-.7.7zm0 2.798a.701.701 0 0 1-.7-.7.701.701 0 0 1 .7-.699.701.701 0 0 1 .7.7.701.701 0 0 1-.7.699z" }, void 0) }), void 0));
 }

package/esm/icon/components/alert.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Alert(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Alert" }, props, { children: [_jsx("path", { d: "M5.904 6.5a.5.5 0 0 1-.5-.5V3.25a.5.5 0 1 1 1 0V6a.5.5 0 0 1-.5.5z" }, void 0), _jsx("circle", { cx: "5.904", cy: "8.161", r: ".589" }, void 0), _jsx("path", { d: "M6 12c-3.308 0-6-2.69-6-6s2.692-6 6-6 6 2.692 6 6-2.691 6-6 6zM6 1C3.244 1 1 3.243 1 6s2.244 5 5 5 5-2.243 5-5-2.243-5-5-5z" }, void 0)] }), void 0));
 }

package/esm/icon/components/calendar-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function CalendarSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 15 15", "data-icon-name": "CalendarSolid" }, props, { children: _jsx("path", { d: "M12.4 1.6c.9 0 1.7.8 1.7 1.7v1.2H0V3.3c0-.9.8-1.7 1.7-1.7h.9V0h1.6v1.6h5.6V0h1.6v1.6h1zM0 13.4V6.1h14.1v7.3c0 .9-.8 1.6-1.7 1.6H1.7C.8 15 0 14.3 0 13.4z" }, void 0) }), void 0));
 }

package/esm/icon/components/chevron-down.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ChevronDown(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronDown" }, props, { children: _jsx("path", { d: "M7 10.922a.84.84 0 01-.597-.248L.247 4.518a.843.843 0 111.194-1.192L7 8.884l5.56-5.558a.844.844 0 011.193 1.192l-6.156 6.156a.84.84 0 01-.597.248z" }, void 0) }), void 0));
 }

package/esm/icon/components/chevron-left.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ChevronLeft(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-left.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ChevronLeft(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronLeft" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M10.693 13.728a.931.931 0 00-.001-1.316L5.282 7l5.41-5.41A.93.93 0 009.379.271h-.001l-6.07 6.07a.931.931 0 000 1.316l6.069 6.07a.931.931 0 001.316 0z" }, void 0) }), void 0));
+}

package/esm/icon/components/chevron-right.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ChevronRight(props: IconProps): React.ReactElement;

package/esm/icon/components/chevron-right.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ChevronRight(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ChevronRight" }, props, { className: isRTL ? [{ transform: 'scaleX(-1)' }, props.className] : props.className }, { children: _jsx("path", { d: "M3.307.272a.931.931 0 00.001 1.316L8.718 7l-5.41 5.41a.93.93 0 001.313 1.318h.001l6.07-6.07a.931.931 0 000-1.316L4.623.272a.931.931 0 00-1.316 0z" }, void 0) }), void 0));
+}

package/esm/icon/components/close.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Close(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Close" }, props, { children: _jsx("path", { d: "M12.8 12.7c.3-.3.3-.8 0-1L8 7l4.6-4.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0L6.9 6 2.3 1.3C2 1 1.5 1 1.2 1.3s-.3.7 0 1L5.9 7l-4.7 4.7c-.3.3-.3.8 0 1.1.3.3.8.3 1 0l4.7-4.7 4.7 4.6c.3.3.8.3 1.2 0z" }, void 0) }), void 0));
 }

package/esm/icon/components/error-clr.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ErrorClr(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorClr" }, props, { children: [_jsx("path", { fill: "#FF6060", d: "M6.304 1.636c.385-.63 1.008-.63 1.391-.002l2.147 3.52 3.987 6.541c.385.63.097 1.142-.64 1.142H.81c-.737 0-1.024-.51-.639-1.142l6.133-10.06z" }, void 0), _jsx("path", { fill: "#FFF", d: "M6.69 9.895h.843v.841H6.69zm0-4.624h.843v3.783H6.69z" }, void 0)] }), void 0));
 }

package/esm/icon/components/error-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ErrorSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 11.77", "data-icon-name": "ErrorSolid" }, props, { children: _jsx("path", { d: "M13.87 10.4 7.77.42a.9.9 0 0 0-1.54 0L.13 10.4a.9.9 0 0 0 .78 1.38h12.18a.9.9 0 0 0 .78-1.38zM6.49 3.44a.46.46 0 0 1 .51-.4.46.46 0 0 1 .5.4v2.83a.46.46 0 0 1-.5.4.46.46 0 0 1-.5-.4zM7 9.29a.76.76 0 1 1 .76-.76.76.76 0 0 1-.76.76z", fillRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/error.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Error(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 11.98", "data-icon-name": "Error" }, props, { children: [_jsx("path", { d: "M13.78 9.73L8.26.7a1.48 1.48 0 00-2.53 0L.22 9.73a1.48 1.48 0 001.26 2.25h11.04a1.48 1.48 0 001.26-2.25zm-1 1.2a.5.5 0 01-.26.06H1.48a.5.5 0 01-.42-.75l5.52-9.02A.5.5 0 017 1a.49.49 0 01.26.07.48.48 0 01.16.16l5.52 9.02a.5.5 0 01-.16.68z" }, void 0), _jsx("path", { d: "M7 7.6a.44.44 0 00.48-.37V4.55A.44.44 0 007 4.17a.44.44 0 00-.48.38v2.68A.44.44 0 007 7.6zM7 8.63a.72.72 0 10.72.72.72.72 0 00-.72-.72z" }, void 0)] }), void 0));
 }

package/esm/icon/components/imagePreview.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function ImagePreview(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ImagePreview" }, props, { children: [_jsx("circle", { fillRule: "evenodd", clipRule: "evenodd", cx: "12.5", cy: "3.35", r: "1.5" }, void 0), _jsx("path", { d: "M9.33 14H0l3.87-5.5c.36-.52 1.29-.51 1.64 0L9.33 14zm1.52-.01l-1.52-2.18 1.2-1.4c.09-.13.25-.22.3-.19.11 0 .22.06.3.17L14 14h-3.15v-.01z" }, void 0)] }), void 0));
 }

package/esm/icon/components/info.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Info(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Info" }, props, { children: _jsx("path", { d: "M9.627 11.36a.196.196 0 0 0-.245-.067c-.962.455-2.053.936-2.267.978a.189.189 0 0 1-.025-.029.256.256 0 0 1-.043-.157c0-.544.41-2.198 1.22-4.916.682-2.284.76-2.757.76-2.914a.742.742 0 0 0-.268-.592c-.166-.138-.4-.208-.692-.208-.488 0-1.052.185-1.727.566-.653.369-1.382.993-2.166 1.857a.196.196 0 0 0 .219.312c.275-.112 1.658-.678 1.86-.805.164-.104.307-.156.424-.156a.14.14 0 0 1 .01 0c.002.008.004.02.004.037 0 .119-.025.26-.073.418-1.179 3.819-1.751 6.16-1.751 7.156 0 .352.097.635.29.842.197.211.462.318.788.318.348 0 .77-.145 1.294-.444.506-.29 1.278-.925 2.36-1.944a.195.195 0 0 0 .028-.253zM9.589.297A.985.985 0 0 0 8.857 0c-.366 0-.684.144-.946.429a1.46 1.46 0 0 0-.389 1.021c0 .314.097.575.287.774a.96.96 0 0 0 .722.305c.35 0 .667-.153.94-.453a1.49 1.49 0 0 0 .406-1.033c0-.299-.097-.55-.288-.746z", fillRule: "evenodd", clipRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/play-video.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function PlayVideo(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "PlayVideo" }, props, { children: [_jsx("path", { d: "M6 12c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM6 .5A5.506 5.506 0 00.5 6c0 3.032 2.467 5.5 5.5 5.5 3.032 0 5.5-2.468 5.5-5.5C11.5 2.967 9.032.5 6 .5z" }, void 0), _jsx("path", { d: "M4.624 3.906l3.533 2.04c.08.046.08.163 0 .21l-3.533 2.04a.121.121 0 01-.182-.106V4.011c0-.093.101-.152.182-.105z" }, void 0)] }), void 0));
 }

package/esm/icon/components/reset-color.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+export default function ResetColor(props: IconProps): React.ReactElement;

package/esm/icon/components/reset-color.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ResetColor(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "ResetColor" }, props, { children: _jsx("path", { d: "M4.44444 1.66669L4.69634 1.30338C5.11546 0.698908 6.02178 0.738542 6.38652 1.3773L7.57013 3.45004C8.31387 4.7577 8.83652 6.0973 9.18519 7.22231L4.44444 1.66669ZM3.14308 4.28626L1.10565 1.99387C0.677217 1.51182 1.01942 0.749859 1.66434 0.749859C1.87784 0.749859 2.08116 0.841161 2.223 1.00074L10.8943 10.756C11.3227 11.238 10.9806 12 10.3357 12C10.1222 12 9.91885 11.9087 9.77701 11.7491L8.73097 10.5722C7.94302 11.4637 6.73598 12 5.6 12C3.68 12 1.6 10.5469 1.6 8.33438C1.6 6.89807 2.30094 5.71492 3.14308 4.28626Z" }, void 0) }), void 0));
+}

package/esm/icon/components/search.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Search(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 12 12", "data-icon-name": "Search" }, props, { children: _jsx("path", { d: "M11.854 11.149L7.75 7.037a4.32 4.32 0 00.946-2.68A4.356 4.356 0 004.348 0a4.357 4.357 0 000 8.713 4.299 4.299 0 002.7-.969l4.102 4.11a.496.496 0 00.704 0 .5.5 0 000-.705zM4.348 7.716a3.36 3.36 0 010-6.719 3.36 3.36 0 010 6.719z" }, void 0) }), void 0));
 }

package/esm/icon/components/tick.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function Tick(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "Tick" }, props, { children: _jsx("path", { d: "M4.792 12.037a.935.935 0 0 1-.657-.269L.28 7.975A.936.936 0 0 1 1.593 6.64L4.79 9.784l7.615-7.556a.936.936 0 0 1 1.32 1.329l-8.272 8.208a.935.935 0 0 1-.66.272z" }, void 0) }), void 0));
 }

package/esm/icon/components/tickCircle-solid.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function TickCircleSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "TickCircleSolid" }, props, { children: _jsx("path", { d: "m9.53 4.44-3.64 3.6-1.42-1.4a.72.72 0 1 0-1 1.03l1.92 1.9a.72.72 0 0 0 1.01 0l4.14-4.11a.72.72 0 1 0-1.01-1.02zM7 0a7 7 0 1 1-7 7 7 7 0 0 1 7-7z", fillRule: "evenodd" }, void 0) }), void 0));
 }

package/esm/icon/components/user.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function User(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsxs(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "User" }, props, { children: [_jsx("path", { d: "M13.823 13.946c.003-.081.024-.159.024-.24a6.847 6.847 0 10-13.694-.001c0 .082.021.16.024.241z" }, void 0), _jsx("circle", { cx: "7", cy: "2.889", r: "2.835" }, void 0)] }), void 0));
 }

package/esm/icon/components/video-non-playable.js

@@ -1,6 +1,8 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
 import Icon from '../icon';
 export default function VideoNonPlayable(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
     return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "VideoNonPlayable" }, props, { children: _jsx("path", { d: "M1 3.72v6.56a.092.092 0 00.09.1h.75l-.57 1h-.18A1.095 1.095 0 010 10.28V3.72a1.095 1.095 0 011.09-1.1h5.17l-.57 1h-4.6a.092.092 0 00-.09.1zm13 5.55a.734.734 0 01-.73.73.721.721 0 01-.34-.09L10.47 8.8v1.48a1.095 1.095 0 01-1.09 1.1H3.65l-.91 1.63a.59.59 0 01-.52.31.603.603 0 01-.29-.08.578.578 0 01-.21-.2l.94-1.66.57-1 3.84-6.76.57-1L8.62.9a.191.191 0 00.03-.08.67.67 0 01.18.07.595.595 0 01.23.81l-.51.92h.83a1.095 1.095 0 011.09 1.1v1.46l2.45-1.12a.707.707 0 01.34-.08.721.721 0 01.73.73zM9.48 3.72a.1.1 0 00-.1-.1H7.99l-3.78 6.76h5.17a.1.1 0 00.1-.1zM13 5.13l-2.5 1.14v1.45L13 8.85z" }, void 0) }), void 0));
 }

package/esm/index.d.ts

@@ -1,3 +1,5 @@
 export * from './classNames';
 export * from './spacewebProvider';
 export * from './types';
+import rtlCSSJS from 'rtl-css-js';
+export { rtlCSSJS };

package/esm/index.js

@@ -1,3 +1,5 @@
 export * from './classNames';
 export * from './spacewebProvider';
 export * from './types';
+import rtlCSSJS from 'rtl-css-js';
+export { rtlCSSJS };

package/esm/input/basewebAdapters.js

@@ -7,8 +7,12 @@ import ClearIconButton from '../helpers/ClearIconButton';
 import { useContextualFormProps } from '../form-control/context';
 import { useDebouncedEventHandler } from '../hooks/useDebouncedEventHandler';
 import _noop from 'lodash/noop';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var useInputBasewebAdapter = function (props) {
-    var _a = useContextualFormProps(props), size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = __rest(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
+    var _a = useContextualFormProps(props), _size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = __rest(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var handleChange = useDebouncedEventHandler(debouncedOnChange !== null && debouncedOnChange !== void 0 ? debouncedOnChange : _noop, onChange, debounceInterval || 200);
     var sharedProps = add$props({ size: size, variant: variant, intent: intent });
     var convertedOverrides = useConvertOverrides({
@@ -25,8 +29,19 @@ var useInputBasewebAdapter = function (props) {
             props: sharedProps,
         },
         Input: {
-            style: [getInputStyles, borderRadius('inherit')],
-            props: sharedProps,
+            style: [
+                getInputStyles,
+                borderRadius('inherit'),
+                // To remove the spin buttons on input field with type number
+                props.type === 'number'
+                    ? {
+                        '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+                        '::-webkit-outer-spin-button': { '-webkit-appearance': 'none' },
+                        '-moz-appearance': 'textfield',
+                    }
+                    : {},
+            ],
+            props: __assign(__assign({}, sharedProps), { 'aria-required': restProps['aria-required'] }),
         },
         StartEnhancer: {
             style: getEnhancerStyles,

package/esm/input/styled-components.js

@@ -1,15 +1,16 @@
 import { __assign } from "tslib";
 import { ADJOINED } from 'baseui/input';
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import { borderWidth, borderColor, borderStyle, borderRadius } from '../helpers/longHandHelpers';
 import { intentColor } from '../helpers/intentHelper';
 var inputBorderRadius = function (_a, _b) {
+    var _c;
     var theme = _a.theme;
-    var _c = _b.$variant, $variant = _c === void 0 ? 'default' : _c, $adjoined = _b.$adjoined;
+    var _d = _b.$variant, $variant = _d === void 0 ? 'default' : _d, $adjoined = _b.$adjoined, $size = _b.$size;
     if ($variant === 'line') {
         return borderRadius(0);
     }
-    var styles = borderRadius(theme.input.borderRadius);
+    var styles = borderRadius(((_c = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme))) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.input.borderRadius);
     switch ($adjoined) {
         case ADJOINED.left:
             return __assign(__assign({}, styles), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
@@ -63,13 +64,14 @@ export var getInputContainerStyles = [
     },
 ];
 var enhancerBorderRadius = function (utils, _a) {
-    var $isStart = _a.$isStart, $variant = _a.$variant;
+    var _b, _c;
+    var $isStart = _a.$isStart, $variant = _a.$variant, $size = _a.$size;
     var theme = utils.theme;
     if ($variant === 'line') {
         return 'rounded-0';
     }
     return $isStart
-        ? __assign(__assign({}, borderRadius(theme.input.borderRadius)), { borderTopRightRadius: 0, borderBottomRightRadius: 0 }) : __assign(__assign({}, borderRadius(theme.input.borderRadius)), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
+        ? __assign(__assign({}, borderRadius(((_b = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme))) === null || _b === void 0 ? void 0 : _b.borderRadius) || theme.input.borderRadius)), { borderTopRightRadius: 0, borderBottomRightRadius: 0 }) : __assign(__assign({}, borderRadius(((_c = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme))) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.input.borderRadius)), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
 };
 var enhancerBorderWidth = function (_a, _b) {
     var _c;
@@ -117,7 +119,7 @@ export var getInputStyles = function (utils, props) {
         // baseweb applies this style in order to support style in safari
         styles['-webkit-text-fill-color'] = theme.spr.text02;
     }
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'md');
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
     styles.lineHeight = inputSizeTheme.lineHeight;
     styles.paddingLeft = styles.paddingRight = inputSizeTheme.paddingX;
     styles.paddingTop = styles.paddingBottom = inputSizeTheme.paddingY;

package/esm/input/types.d.ts

@@ -2,7 +2,10 @@ import { Ref, ChangeEvent } from 'react';
 import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
 import { SpacewebComponentProps, Intent } from '../types';
 import { Override } from '../overrides';
-export declare type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type InputSize = 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type InputVariant = 'default' | 'line';
 export declare type InputOverrides = {
     [key in keyof BaseUIInputOverrides]?: Override<SharedProps & Record<string, any>>;

package/esm/layer/useLayersContextValue.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { LayersContext } from 'baseui/layer';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
@@ -49,6 +49,7 @@ var useLayersContextValue = function () {
             resetHandlers();
         };
     }, [doc, onDocumentClick, onKeyUp]);
-    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, [ctxValue]);
+    var contextValues = ctxValue && typeof ctxValue === 'object' ? Object.values(ctxValue) : [];
+    return useMemo(function () { return (__assign(__assign({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, __spreadArray([], __read(contextValues), false));
 };
 export default useLayersContextValue;

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

@@ -1,33 +1,23 @@
 /// <reference types="react" />
 import { AvatarProps } from '../avatar';
+import { ListItemProps } from './types';
+import { Override } from '../overrides';
 declare type SharedProps = {
     $item?: Record<string, any>;
     $labelKey?: string;
     $valueKey?: string;
     $multi?: boolean;
 };
-declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
-} & {
-    alignItems?: import("./types").AlignItems | undefined;
-    autoFocus?: boolean | undefined;
-    button?: boolean | undefined;
-    children?: import("react").ReactNode;
-    disabled?: boolean | undefined;
-    endEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-    highlighted?: boolean | undefined;
-    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
-    overrides?: {
-        ChildContainer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        EndEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        Root?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        StartEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-    } | undefined;
-    selected?: boolean | undefined;
-    startEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-} & SharedProps & {
+declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "overrides"> & SharedProps & {
     avatarProps: AvatarProps;
+    overrides?: ({
+        ChildContainer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        Root?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+    } & {
+        Avatar?: Override<Record<string, any>> | undefined;
+    }) | undefined;
 } & import("react").RefAttributes<HTMLLIElement>>;
 export default AvatarListItem;

package/esm/list/avatar-list-item.js

@@ -1,14 +1,16 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Avatar } from '../avatar';
 import { Stack } from '../stack';
 import ListItem from './list-item';
+import { useOverrides } from '../overrides';
 var AvatarListItem = forwardRef(function (_a, ref) {
-    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, menuItemProps = __rest(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
+    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, overrides = _a.overrides, menuItemProps = __rest(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps", "overrides"]);
     var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
-    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(Avatar, __assign({ size: "md" }, avatarProps), void 0)] }), void 0)); };
-    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, Avatar), 2), AvatarComponent = _b[0], avatarOverrideProps = _b[1];
+    var startEnhancerOverride = function (enhancerProps) { return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer(__assign(__assign({}, enhancerProps), sharedProps)) : startEnhancer, _jsx(AvatarComponent, __assign({ size: "md" }, avatarProps, avatarOverrideProps), void 0)] }), void 0)); };
+    return (_jsx(ListItem, __assign({ startEnhancer: startEnhancerOverride, overrides: overrides }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
 });
 AvatarListItem.displayName = 'AvatarListItem';
 export default AvatarListItem;

package/esm/list/index.d.ts

@@ -3,5 +3,5 @@ export { default as ListItem } from './list-item';
 export { default as AvatarListItem } from './avatar-list-item';
 export { default as Divider } from './divider';
 export { default as ListItemText } from './list-item-text';
-export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, LIST_MIN_WIDTH, } from './styled-component';
 export type { ListItemProps, AlignItems, ListItemSharedProps, ListProps, DividerProps, ListItemTextProps, } from './types';

package/esm/list/index.js

@@ -3,4 +3,4 @@ export { default as ListItem } from './list-item';
 export { default as AvatarListItem } from './avatar-list-item';
 export { default as Divider } from './divider';
 export { default as ListItemText } from './list-item-text';
-export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, LIST_MIN_WIDTH, } from './styled-component';

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

@@ -12,14 +12,16 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     disabled?: boolean | undefined;
     endEnhancer?: Enhancer<ListItemSharedProps>;
     highlighted?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
     overrides?: {
         ChildContainer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         EndEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         Root?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         StartEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;