@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/phone-input/utils.js

@@ -1,6 +1,8 @@
 import { __assign, __read, __spreadArray } from "tslib";
+import _isEmpty from 'lodash/isEmpty';
 import { filterOptions } from '../select/utils/default-filter-options';
-import { ISO_REGEX, ISO_TO_FLAG_OFFSET } from './constants';
+import { COUNTRIES, ISO_REGEX, ISO_TO_FLAG_OFFSET } from './constants';
+import { defaultValue } from './default-props';
 export var iso2FlagEmoji = function (iso) {
     if (!ISO_REGEX.test(iso)) {
         return undefined;
@@ -25,3 +27,6 @@ export var countrySelectFilterOptions = function (options, filterValue, excludeO
             return label.toLowerCase().includes(filterValueLowerCase) || dialCode.includes(filterValueLowerCase);
         } }));
 };
+export var getDefaultValue = function (countries) {
+    return countries && !_isEmpty(countries) ? { country: COUNTRIES[countries[0].id], phoneNumber: '' } : defaultValue;
+};

package/esm/popover/PopoverEnahncer.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Baseui overrides anchor element's ref. This component clones and stores anchor/child element's ref.
  * TODO: should be removed once https://github.com/uber/baseweb/issues/4032 is addressed
  */
-export declare const PopoverRefHandler: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement | null | undefined>>;
+export declare const PopoverRefHandler: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLElement | null | undefined>>;
 export declare const TargetElementProxy: React.ForwardRefExoticComponent<{
     targetElement?: HTMLElement | null | undefined;
 } & React.RefAttributes<HTMLElement | null | undefined>>;

package/esm/popover/adapter.d.ts

@@ -1,6 +1,7 @@
-import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from '../baseui/popover';
 import { AccessibilityType, TriggerType, Placement } from './types';
 import { ValueOf } from '../utility-types';
 export declare const accessibilityMap: Record<AccessibilityType, ValueOf<typeof ACCESSIBILITY_TYPE>>;
 export declare const triggerTypeMap: Record<TriggerType, ValueOf<typeof TRIGGER_TYPE>>;
 export declare const placementMap: Record<Placement, ValueOf<typeof PLACEMENT>>;
+export declare const rtlPlacementMap: Record<Placement, ValueOf<typeof PLACEMENT>>;

package/esm/popover/adapter.js

@@ -1,4 +1,4 @@
-import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from 'baseui/popover';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from '../baseui/popover';
 export var accessibilityMap = {
     menu: ACCESSIBILITY_TYPE.menu,
     none: ACCESSIBILITY_TYPE.none,
@@ -23,3 +23,18 @@ export var placementMap = {
     rightTop: PLACEMENT.rightTop,
     rightBottom: PLACEMENT.rightBottom,
 };
+export var rtlPlacementMap = {
+    auto: PLACEMENT.auto,
+    bottom: PLACEMENT.bottom,
+    bottomLeft: PLACEMENT.bottomRight,
+    bottomRight: PLACEMENT.bottomLeft,
+    top: PLACEMENT.top,
+    topLeft: PLACEMENT.topRight,
+    topRight: PLACEMENT.topLeft,
+    left: PLACEMENT.right,
+    leftTop: PLACEMENT.rightTop,
+    leftBottom: PLACEMENT.rightBottom,
+    right: PLACEMENT.left,
+    rightTop: PLACEMENT.leftTop,
+    rightBottom: PLACEMENT.leftBottom,
+};

package/esm/popover/hooks.d.ts

@@ -7,7 +7,7 @@ export declare const useContent: ({ content }: {
     content: PopoverProps['content'];
 }) => {
     setContentHost: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-    wrappedContent: JSX.Element;
+    wrappedContent: import("react/jsx-runtime").JSX.Element;
 };
 declare type UseFocusLockParams = Pick<PopoverProps, 'focusLock' | 'returnFocus'>;
 export declare const useFocusLock: ({ focusLock, returnFocus }: UseFocusLockParams) => UseFocusLockParams;

package/esm/popover/index.d.ts

@@ -1,4 +1,4 @@
-export { StatefulContainer } from 'baseui/popover';
+export { StatefulContainer } from '../baseui/popover';
 export { default as StatefulPopover } from './stateful-popover';
 export { default as Popover } from './popover';
 export { StyledPadding, StyledBody, StyledArrow, StyledInner } from './styled-components';

package/esm/popover/index.js

@@ -1,4 +1,4 @@
-export { StatefulContainer } from 'baseui/popover';
+export { StatefulContainer } from '../baseui/popover';
 export { default as StatefulPopover } from './stateful-popover';
 export { default as Popover } from './popover';
 export { StyledPadding, StyledBody, StyledArrow, StyledInner } from './styled-components';

package/esm/popover/overrides.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import { getOppositePosition, splitPlacement } from './utils';
 import { ARROW_WIDTH } from './constants';
+import { borderRadius } from '../helpers/longHandHelpers';
 var arrowPositionStyle = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c;
@@ -29,16 +30,7 @@ export var getPseudoElementPosition = function (placement, popoverMargin) {
 export var getBodyStyles = function (_a, _b) {
     var theme = _a.theme;
     var _c = _b.$placement, $placement = _c === void 0 ? 'bottom' : _c, _d = _b.$popoverMargin, $popoverMargin = _d === void 0 ? 0 : _d, $showArrow = _b.$showArrow, rest = __rest(_b, ["$placement", "$popoverMargin", "$showArrow"]);
-    return ({
-        backgroundColor: theme.spr.popup,
-        color: theme.spr.text01,
-        boxShadow: 'none',
-        borderTopLeftRadius: theme.popover.borderRadius,
-        borderTopRightRadius: theme.popover.borderRadius,
-        borderBottomRightRadius: theme.popover.borderRadius,
-        borderBottomLeftRadius: theme.popover.borderRadius,
-        '::before': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)),
-    });
+    return (__assign(__assign({ backgroundColor: theme.spr.popup, color: theme.spr.text01, boxShadow: 'none' }, borderRadius(theme.popover.borderRadius)), { '::before': __assign({ content: '" "', position: 'absolute' }, getPseudoElementPosition($placement, $showArrow ? $popoverMargin + ARROW_WIDTH : $popoverMargin)) }));
 };
 export var arrowStyles = [
     function (utils) {
@@ -57,13 +49,10 @@ export var arrowStyles = [
     },
     arrowPositionStyle,
 ];
-export var getInnerStyles = ['border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup', function (_a) {
+export var getInnerStyles = [
+    'border-solid border-1 spr-popup-border spr-shadow-02 spr-text-01 spr-popup',
+    function (_a) {
         var theme = _a.theme;
-        return ({
-            borderTopLeftRadius: theme.popover.borderRadius,
-            borderTopRightRadius: theme.popover.borderRadius,
-            borderBottomRightRadius: theme.popover.borderRadius,
-            borderBottomLeftRadius: theme.popover.borderRadius,
-            fontFamily: theme.fontFamily.sans,
-        });
-    }];
+        return (__assign(__assign({}, borderRadius(theme.popover.borderRadius)), { fontFamily: theme.fontFamily.sans }));
+    },
+];

package/esm/popover/popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+declare const Popover: React.ForwardRefExoticComponent<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
     overrides?: ({
         Body?: import("../overrides").Override<any> | undefined;
         Arrow?: import("../overrides").Override<any> | undefined;
@@ -14,5 +14,6 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popov
     triggerType?: import("./types").TriggerType | undefined;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     innerRef?: React.Ref<HTMLElement> | undefined;
+    viewportAsBoundary?: boolean | undefined;
 } & React.RefAttributes<HTMLElement>>;
 export default Popover;

package/esm/popover/popover.js

@@ -1,41 +1,50 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Popover as BasePopover } from 'baseui/popover';
+import { Popover as BasePopover } from '../baseui/popover';
 import * as React from 'react';
-import { useOverrides } from '../overrides';
+import { useMemo } from 'react';
+import { mergeOverrides, useOverrides } from '../overrides';
 import { useContent, useFocusLock } from './hooks';
 import useUniqueId from '../hooks/useUniqueId';
 import { PopoverChildEnhancer } from './PopoverEnahncer';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { LayersManager, Z_INDEX } from '../layer';
-import { accessibilityMap, placementMap, triggerTypeMap } from './adapter';
+import { accessibilityMap, placementMap, rtlPlacementMap, triggerTypeMap } from './adapter';
 import { arrowStyles, getBodyStyles, getInnerStyles } from './overrides';
 import { StyledArrowTriangle } from './styled-components';
 import useCombinedRefs from '../hooks/useCombinedRef';
+import { useStyle } from '../style';
+import { getPopperOptions } from './utils';
 // @ts-ignore
 BasePopover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
-    var _g = useContent({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var _h = useContent({ content: content }), setContentHost = _h.setContentHost, wrappedContent = _h.wrappedContent;
+    var isRTL = useStyle().isRTL;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _h[0], arrowTriangleProps = _h[1];
-    var _overrides = useConvertOverrides({
-        Body: { style: getBodyStyles },
-        Arrow: { style: arrowStyles, props: { children: _jsx(ArrowTriangle, __assign({}, arrowTriangleProps), void 0) } },
-        Inner: { style: getInnerStyles, props: { ref: setContentHost } },
-    }, overrides, [overrides, setContentHost]);
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
+    var _overrides = useMemo(function () {
+        return mergeOverrides({
+            Body: { style: getBodyStyles },
+            Arrow: { style: arrowStyles, props: { children: _jsx(ArrowTriangle, __assign({}, arrowTriangleProps), void 0) } },
+            Inner: { style: getInnerStyles, props: { ref: setContentHost } },
+        }, overrides);
+    }, [ArrowTriangle, arrowTriangleProps, overrides, setContentHost]);
     var mappedProps = {
-        placement: placement && placementMap[placement],
+        placement: placement && isRTL ? rtlPlacementMap[placement] : placementMap[placement],
         accessibilityType: accessibilityType && accessibilityMap[accessibilityType],
         triggerType: triggerType && triggerTypeMap[triggerType],
     };
     var combinedRef = useCombinedRefs(ref, restProps.innerRef);
-    var childNode = children;
+    var childNode;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
+    else {
+        childNode = children;
+    }
     var id = useUniqueId();
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 });
 Popover.displayName = 'Popover';
 export default Popover;

package/esm/popover/stateful-popover.js

@@ -1,11 +1,11 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StatefulContainer } from 'baseui/popover';
+import { StatefulContainer } from '../baseui/popover';
 import Popover from './popover';
 import { ON_MOUSE_LEAVE_DELAY } from './constants';
 function StatefulPopover(props) {
-    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = __rest(props, ["children", "overrides"]);
-    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides }, { children: children }), void 0)); } }), void 0));
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = __rest(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }), void 0)); } }), void 0));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: 'menu',

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

@@ -1,2 +1,2 @@
-export { StyledInner, StyledArrow, StyledBody, StyledPadding } from 'baseui/popover';
+export { StyledInner, StyledArrow, StyledBody, StyledPadding } from '../baseui/popover';
 export declare const StyledArrowTriangle: import("../style/styled").StyledComponent;

package/esm/popover/styled-components.js

@@ -1,5 +1,5 @@
 import { ARROW_SIZE } from './constants';
-export { StyledInner, StyledArrow, StyledBody, StyledPadding } from 'baseui/popover';
+export { StyledInner, StyledArrow, StyledBody, StyledPadding } from '../baseui/popover';
 import styled from '../style/styled';
 export var StyledArrowTriangle = styled('div', function (_a) {
     var theme = _a.theme;

package/esm/popover/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TetherPlacement } from 'baseui/layer';
-import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from 'baseui/popover';
+import { TetherPlacement } from '../baseui/layer';
+import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from '../baseui/popover';
 import { Override } from '../overrides';
 export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
     overrides?: {
@@ -15,6 +15,7 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
     triggerType?: TriggerType;
     placement?: TetherPlacement;
     innerRef?: React.Ref<HTMLElement>;
+    viewportAsBoundary?: boolean;
 };
 export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
@@ -23,6 +24,8 @@ export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overr
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
+    targetElement?: HTMLElement | null;
+    viewportAsBoundary?: boolean;
 };
 export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
     overrides?: {
@@ -32,6 +35,6 @@ export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverCont
 export declare type AccessibilityType = 'none' | 'menu' | 'tooltip';
 export declare type TriggerType = 'click' | 'hover';
 export declare type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
-export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from 'baseui/popover';
-export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from 'baseui/popover';
-export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from 'baseui/popover/constants';
+export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from '../baseui/popover';
+export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from '../baseui/popover';
+export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from '../baseui/popover/constants';

package/esm/popover/types.js

@@ -1,2 +1,2 @@
-export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from 'baseui/popover';
-export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from 'baseui/popover/constants';
+export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from '../baseui/popover';
+export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from '../baseui/popover/constants';

package/esm/popover/utils.d.ts

@@ -12,3 +12,15 @@ export declare function splitPlacement(placement: Placement): string[];
  * left -> right
  */
 export declare function getOppositePosition(position: string): string;
+export declare const getPopperOptions: ({ ignoreBoundary, viewportAsBoundary, }: {
+    ignoreBoundary?: boolean | undefined;
+    viewportAsBoundary?: boolean | undefined;
+}) => {
+    modifiers: {
+        preventOverflow: {
+            boundariesElement?: string | undefined;
+            enabled: boolean;
+            padding: number;
+        };
+    };
+};

package/esm/popover/utils.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 /**
  * Splits something like 'topLeft' to ['top', 'left'] for easier usage
  * https://github.com/uber/baseweb/blob/master/src/popover/utils.js#L58
@@ -25,3 +26,11 @@ var OPPOSITE_POSITIONS = {
 export function getOppositePosition(position) {
     return OPPOSITE_POSITIONS[position];
 }
+export var getPopperOptions = function (_a) {
+    var ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary;
+    return ({
+        modifiers: {
+            preventOverflow: __assign({ enabled: !ignoreBoundary, padding: 0 }, (viewportAsBoundary && { boundariesElement: 'viewport' })),
+        },
+    });
+};

package/esm/progress/linear/styled-component.d.ts

@@ -8,7 +8,7 @@ export declare const StyledRoot: import("../../style/styled").StyledComponent;
 export declare const StyledBar: import("../../style/styled").StyledComponent;
 export declare const StyledProgress: import("../../style/styled").StyledComponent;
 export declare const StyledLabel: import("../../style/styled").StyledComponent;
-export declare const progressSegmentStyles: ({ direction }: StyleUtils, { $first, $last }: {
+export declare const progressSegmentStyles: ({ isRTL }: StyleUtils, { $first, $last }: {
     $first: any;
     $last: any;
 }) => string[];

package/esm/progress/linear/styled-component.js

@@ -20,10 +20,10 @@ export var StyledBar = styled('div', 'w-full relative overflow-hidden flex', fun
 });
 export var StyledProgress = styled(BaseProgress, 'h-full', function (_a, _b) {
     var _c, _d, _e;
-    var theme = _a.theme, direction = _a.direction;
+    var theme = _a.theme, isRTL = _a.isRTL;
     var $color = _b.$color, $intent = _b.$intent, $value = _b.$value, $infinite = _b.$infinite;
-    var progressStart = direction === 'rtl' ? 'right' : 'left';
-    var progressEnd = direction === 'rtl' ? 'left' : 'right';
+    var progressStart = isRTL ? 'right' : 'left';
+    var progressEnd = isRTL ? 'left' : 'right';
     return __assign(__assign(__assign({ backgroundColor: $color || getIntentColor($intent, theme), willChange: 'width' }, borderRadius('3px')), { transitionProperty: 'width', transitionTimingFunction: 'ease', transitionDuration: '400ms' }), ($infinite && {
         width: '100%',
         position: 'absolute',
@@ -48,10 +48,10 @@ export var StyledProgress = styled(BaseProgress, 'h-full', function (_a, _b) {
 });
 export var StyledLabel = styled('div', 'spr-text-02 mt-3 typography-l2', { fontVariantNumeric: 'tabular-nums' });
 export var progressSegmentStyles = function (_a, _b) {
-    var direction = _a.direction;
+    var isRTL = _a.isRTL;
     var $first = _b.$first, $last = _b.$last;
     var style = [];
-    if (direction === 'rtl') {
+    if (isRTL) {
         if (!$first)
             style.push('rounded-r-0');
         if (!$last)

package/esm/radio/basewebAdapters.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from 'baseui/radio';
+import type { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from '../baseui/radio';
 import { RadioGroupProps, RadioProps, Size } from './types';
 import { Intent } from '../types';
 export declare const SpaceRadioContext: React.Context<{

package/esm/radio/basewebAdapters.js

@@ -1,10 +1,10 @@
 import { __assign, __rest } from "tslib";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { add$props } from '../helpers';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { getRadioLabelStyles, getRadioMarkInnerStyles, getRadioMarkOuterStyles, getRootStyles, } from './styled-components';
 import { useContextualFormProps } from '../form-control/context';
 import { useCombineRefObjects } from '../hooks/useCombinedRef';
+import { mergeOverrides } from '../overrides';
 export var SpaceRadioContext = createContext({
     size: 'md',
     intent: 'default',
@@ -12,38 +12,42 @@ export var SpaceRadioContext = createContext({
 SpaceRadioContext.displayName = 'SpaceRadioContext';
 export function useRadioGroupAdapter(props) {
     var _a = useContextualFormProps(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, restProps = __rest(_a, ["size", "className", "style", "overrides", "intent"]);
-    var convertOverrides = useConvertOverrides({
-        RadioGroupRoot: {
-            style: [className, style],
-        },
-    }, overrides);
+    var convertOverrides = useMemo(function () {
+        return mergeOverrides({
+            RadioGroupRoot: {
+                style: [className, style],
+            },
+        }, overrides);
+    }, [className, overrides, style]);
     return __assign(__assign({}, restProps), { overrides: convertOverrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur });
 }
 export var useRadioAdapter = function (props) {
     var _a = useContext(SpaceRadioContext), size = _a.size, intent = _a.intent;
     var className = props.className, style = props.style, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth, restProps = __rest(props, ["className", "style", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
-    var sharedProps = add$props({ size: size, intent: intent });
-    var overrides = useConvertOverrides({
-        Root: {
-            style: [className, style, getRootStyles],
-            props: sharedProps,
-        },
-        RadioMarkInner: {
-            style: getRadioMarkInnerStyles,
-            props: sharedProps,
-        },
-        RadioMarkOuter: {
-            style: getRadioMarkOuterStyles,
-            props: __assign(__assign({}, sharedProps), add$props({ $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })),
-        },
-        Label: {
-            style: getRadioLabelStyles,
-            props: sharedProps,
-        },
-        // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
-        // static position gives unexpected behaviour in Safari. Using position fixed works well for the above issue and Safari as well.
-        Input: { style: { position: 'fixed' } },
-    }, props.overrides);
+    var sharedProps = useMemo(function () { return add$props({ size: size, intent: intent }); }, [intent, size]);
+    var overrides = useMemo(function () {
+        return mergeOverrides({
+            Root: {
+                style: [className, style, getRootStyles],
+                props: sharedProps,
+            },
+            RadioMarkInner: {
+                style: getRadioMarkInnerStyles,
+                props: sharedProps,
+            },
+            RadioMarkOuter: {
+                style: getRadioMarkOuterStyles,
+                props: __assign(__assign({}, sharedProps), add$props({ $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })),
+            },
+            Label: {
+                style: getRadioLabelStyles,
+                props: sharedProps,
+            },
+            // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
+            // static position gives unexpected behaviour in Safari. Using position fixed works well for the above issue and Safari as well.
+            Input: { style: { position: 'fixed' } },
+        }, props.overrides);
+    }, [className, style, sharedProps, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, props.overrides]);
     var inputRefObj = useCombineRefObjects(props.inputRef);
     return __assign(__assign({}, restProps), { overrides: overrides, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, inputRef: inputRefObj });
 };

package/esm/radio/index.d.ts

@@ -1,3 +1,3 @@
 export { Radio, RadioGroup } from './radio';
-export { StatefulRadioGroup, StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledDescription, StyledRadioMarkInner, StyledRadioMarkOuter, StyledRadioGroupRoot, ALIGN, } from 'baseui/radio';
+export { StatefulRadioGroup, StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledDescription, StyledRadioMarkInner, StyledRadioMarkOuter, StyledRadioGroupRoot, ALIGN, } from '../baseui/radio';
 export * from './types';

package/esm/radio/index.js

@@ -1,3 +1,3 @@
 export { Radio, RadioGroup } from './radio';
-export { StatefulRadioGroup, StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledDescription, StyledRadioMarkInner, StyledRadioMarkOuter, StyledRadioGroupRoot, ALIGN, } from 'baseui/radio';
+export { StatefulRadioGroup, StatefulContainer, StyledRoot, StyledLabel, StyledInput, StyledDescription, StyledRadioMarkInner, StyledRadioMarkOuter, StyledRadioGroupRoot, ALIGN, } from '../baseui/radio';
 export * from './types';

package/esm/radio/radio.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from 'baseui/radio';
+import { Radio as BaseRadio, RadioGroup as BaseRadioGroup } from '../baseui/radio';
 import { useMemo } from 'react';
 import { useRadioGroupAdapter, useRadioAdapter, SpaceRadioContext } from './basewebAdapters';
 import { useContextualFormProps } from '../form-control/context';

package/esm/radio/styled-components.js

@@ -71,10 +71,10 @@ export var getRadioMarkOuterStyles = function (utils, props) {
 };
 export var getRadioLabelStyles = function (_a, _b) {
     var _c;
-    var direction = _a.direction, px2rem = _a.px2rem;
-    var $labelPosition = _b.$labelPosition, $size = _b.$size;
+    var px2rem = _a.px2rem;
+    var $labelPlacement = _b.$labelPlacement, $size = _b.$size;
     var paddingDirection;
-    switch ($labelPosition) {
+    switch ($labelPlacement) {
         case 'top':
             paddingDirection = 'Bottom';
             break;
@@ -82,11 +82,11 @@ export var getRadioLabelStyles = function (_a, _b) {
             paddingDirection = 'Top';
             break;
         case 'left':
-            paddingDirection = direction === 'rtl' ? 'Left' : 'Right';
+            paddingDirection = 'Right';
             break;
         default:
         case 'right':
-            paddingDirection = direction === 'rtl' ? 'Right' : 'Left';
+            paddingDirection = 'Left';
             break;
     }
     var styles = (_c = {
@@ -111,10 +111,10 @@ export var getRadioLabelStyles = function (_a, _b) {
 };
 export var getRootStyles = function (_a, _b) {
     var _c;
-    var direction = _a.direction, px2rem = _a.px2rem;
+    var px2rem = _a.px2rem;
     var $align = _b.$align, $hasDescription = _b.$hasDescription, $size = _b.$size;
     var isHorizontal = $align === 'horizontal';
-    var directionMargin = direction === 'rtl' ? 'Left' : 'Right';
+    var directionMargin = 'Right';
     var styles = (_c = {},
         _c["margin".concat(directionMargin)] = isHorizontal ? px2rem(30) : undefined,
         _c.marginTop = '0px',

package/esm/radio/types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
+import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from '../baseui/radio';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
 import { OutlineProps } from '../helpers/commonStyles';
@@ -20,7 +20,6 @@ export declare type SharedProps = {
     $required?: boolean;
     $value?: string;
     $size?: Size;
-    $labelPosition?: LabelPosition;
 };
 declare type CommonProps = {
     onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;

package/esm/search/index.d.ts

@@ -1,2 +1,3 @@
 export { Search } from './search';
+export { StatefulSearch } from './stateful-search';
 export * from './types';

package/esm/search/index.js

@@ -1,2 +1,3 @@
 export { Search } from './search';
+export { StatefulSearch } from './stateful-search';
 export * from './types';

package/esm/search/search.d.ts

@@ -3,6 +3,6 @@ import { IconButtonProps } from '../button/IconButton';
 import { SearchProps } from './types';
 export declare const ClearIconButton: ({ overrides, ...props }: IconButtonProps) => ReactElement;
 export declare const Search: {
-    ({ size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
+    ({ size: _size, debounceInterval, placeholder, overrides, className, style, variant, ...props }: SearchProps): ReactElement;
     displayName: string;
 };

package/esm/search/search.js

@@ -10,7 +10,10 @@ import ClearIcon from '../icon/components/close';
 import DefaultSearchIcon from '../icon/components/search';
 import { Input } from '../input';
 import { mergeOverrides, useOverrides } from '../overrides';
-import { getInputContainerStyles, getRootStyles, SIZES_STYLES_MAP } from './styled-components';
+import { getInputContainerStyles, getRootStyles, getSearchSizeTheme } from './styled-components';
+import { useLocale } from '../locale';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var SearchIconContainer = function (_a) {
     var _b;
     var size = _a.size, marginX = _a.marginX, className = _a.className, overrides = _a.overrides, props = __rest(_a, ["size", "marginX", "className", "overrides"]);
@@ -37,8 +40,14 @@ export var ClearIconButton = function (_a) {
     return (_jsx(IconButton, __assign({}, props, { overrides: mergedOverrides }, { children: _jsx(ClearIcon, { "data-testid": "search-clear", size: 10 }, void 0) }), void 0));
 };
 export var Search = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.debounceInterval, debounceInterval = _c === void 0 ? 200 : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Search' : _d, overrides = _a.overrides, className = _a.className, style = _a.style, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, props = __rest(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
-    var _f = SIZES_STYLES_MAP[size], searchIconMarginX = _f.searchIconMarginX, searchIconSize = _f.iconSize, fontSize = _f.fontSize;
+    var _size = _a.size, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? 200 : _b, placeholder = _a.placeholder, overrides = _a.overrides, className = _a.className, style = _a.style, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, props = __rest(_a, ["size", "debounceInterval", "placeholder", "overrides", "className", "style", "variant"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
+    var searchIconMarginX = getSearchSizeTheme(theme, size, 'searchIconMarginX');
+    var searchIconSize = getSearchSizeTheme(theme, size, 'iconSize');
+    var fontSize = getSearchSizeTheme(theme, size, 'fontSize');
+    var lineHeight = getSearchSizeTheme(theme, size, 'lineHeight');
+    var locale = useLocale();
     var mergedOverrides = React.useMemo(function () {
         var sharedProps = add$props({ size: size, variant: variant });
         return mergeOverrides({
@@ -51,7 +60,7 @@ export var Search = function (_a) {
                 props: sharedProps,
             },
             Input: {
-                style: ['px-0 py-0', { fontSize: fontSize, lineHeight: 1.5 }],
+                style: ['px-0 py-0', { fontSize: fontSize, lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : '18px' }],
                 props: sharedProps,
             },
             Before: {
@@ -60,7 +69,7 @@ export var Search = function (_a) {
             },
             ClearIcon: ClearIconButton,
         }, overrides);
-    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX]);
-    return (_jsx(Input, __assign({ "data-spaceweb": "Search", placeholder: placeholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
+    }, [overrides, size, className, style, variant, fontSize, searchIconSize, searchIconMarginX, lineHeight]);
+    return (_jsx(Input, __assign({ "data-spaceweb": "Search", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.search.searchPlaceholder, overrides: mergedOverrides, debounceInterval: debounceInterval }, props), void 0));
 };
 Search.displayName = 'Search';

package/esm/search/stateful-search.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { StatefulSearchProps } from './types';
+export declare const StatefulSearch: ({ initialState, onChange, ...restProps }: StatefulSearchProps) => ReactElement;