@sprinklrjs/spaceweb 10.1.0 → 12.14.4

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.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/esm/hooks/useAutoFocus.js

@@ -1,26 +1,26 @@
-import * as React from 'react';
+import { useEffect } from 'react';
+import { useCombineRefObjects } from './useCombinedRef';
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = useCombineRefObjects(inputRef);
+    useEffect(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -34,7 +34,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -44,15 +44,21 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            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__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 export default useAutoFocus;

package/esm/hooks/useCombinedRef.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
 declare type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
 export default useCombinedRefs;

package/esm/hooks/useCombinedRef.js

@@ -1,5 +1,6 @@
 import { __read, __spreadArray } from "tslib";
 import { useCallback } from 'react';
+import * as React from 'react';
 export function combineRefs() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -18,6 +19,38 @@ export function combineRefs() {
         });
     };
 }
+export function useCombineRefObjects() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    var targetRef = React.useRef(null);
+    React.useEffect(function () {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+        return function () {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        };
+    }, __spreadArray([], __read(refs), false)); // eslint-disable-line react-hooks/exhaustive-deps
+    return targetRef;
+}
 /*
  * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
  * https://github.com/facebook/react/issues/13029#issue-331682836

package/esm/hooks/useIsMobileDevice.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileDevice: () => boolean;

package/esm/hooks/useIsMobileDevice.js

@@ -0,0 +1,6 @@
+import { useTheme } from '../theme';
+import useMedia from './useMatchMedia';
+export var useIsMobileDevice = function () {
+    var currentTheme = useTheme();
+    return useMedia("(max-width: ".concat(currentTheme.theme.screens.md, ")"), false);
+};

package/esm/hooks/useMatchMedia.d.ts

@@ -0,0 +1,3 @@
+export declare const isBrowser: boolean;
+declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
+export default useMedia;

package/esm/hooks/useMatchMedia.js

@@ -0,0 +1,49 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+export var isBrowser = typeof window !== 'undefined';
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
+var useMedia = function (query, defaultState) {
+    var _a = __read(useState(getInitialState(query, defaultState)), 2), state = _a[0], setState = _a[1];
+    useEffect(function () {
+        var mounted = true;
+        var mediaQueryList = window.matchMedia(query);
+        var onChange = function () {
+            if (!mounted) {
+                return;
+            }
+            setState(!!mediaQueryList.matches);
+        };
+        // 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;
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
+        };
+    }, [query]);
+    return state;
+};
+export default useMedia;

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.d.ts

@@ -2,6 +2,6 @@ import { InputProps, StatefulInputProps } from './types';
 import { BaseInputOverrides } from 'baseui/input';
 declare type AdapterProps = Omit<InputProps | StatefulInputProps, 'autoFocus'>;
 declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "variant" | "intent"> & {
-    overrides?: BaseInputOverrides<any> | undefined;
+    overrides?: BaseInputOverrides | undefined;
 };
 export default useInputBasewebAdapter;

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/index.d.ts

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

package/esm/input/index.js

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

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

@@ -3,4 +3,4 @@ import { SharedProps } from './types';
 export declare const getInputContainerStyles: Styles;
 export declare const getEnhancerStyles: Styles;
 export declare const getPlaceholderTypography: Styles;
-export declare const getInputStyles: StyleFn<SharedProps>;
+export declare const getInputStyles: StyleFn<Partial<Pick<SharedProps, '$size' | '$disabled' | '$variant'>>>;

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, 'lg');
+    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

@@ -1,7 +1,11 @@
+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>>;
@@ -20,9 +24,11 @@ declare type CommonInputProps = {
     size?: InputSize;
     overrides?: InputOverrides;
     intent?: Intent;
-    debouncedOnChange?: BaseInputProps['onChange'];
+    debouncedOnChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     debounceInterval?: number;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' | '$error'> & {
     $isStart: boolean;
@@ -30,8 +36,8 @@ export declare type SharedProps = Omit<BaseSharedProps, '$size' | '$positive' |
     $variant: InputVariant;
     $intent: Intent;
 };
-export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
-export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type InputProps = Omit<SpacewebComponentProps<BaseInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
+export declare type StatefulInputProps = Omit<SpacewebComponentProps<BaseStatefulInputProps>, 'positive' | 'error' | keyof CommonInputProps> & CommonInputProps;
 export interface MaskedInputProps extends InputProps {
     mask?: string;
     maskChar?: string;