@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/popover/popover.js

@@ -2,38 +2,45 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as BasePopover } from 'baseui/popover';
 import * as React from 'react';
+import { useMemo } from 'react';
 import { 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, placement = _a.placement, accessibilityType = _a.accessibilityType, _b = _a.triggerType, triggerType = _b === void 0 ? 'click' : _b, _c = _a.showArrow, showArrow = _c === void 0 ? false : _c, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.focusLock, focusLock = _d === void 0 ? false : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, content = _a.content, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content"]);
-    var _f = useContent({ content: content }), setContentHost = _f.setContentHost, wrappedContent = _f.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, viewportAsBoundary = _a.viewportAsBoundary, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var _g = useContent({ content: content }), setContentHost = _g.setContentHost, wrappedContent = _g.wrappedContent;
+    var isRTL = useStyle().isRTL;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
-    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _g[0], arrowTriangleProps = _g[1];
+    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 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;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
     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, ref: ref, 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

@@ -4,8 +4,8 @@ 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/types.d.ts

@@ -1,7 +1,8 @@
 /// <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 { Override } from '../overrides';
-export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children'> & {
+export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
     } & {
@@ -11,6 +12,10 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
+    innerRef?: React.Ref<HTMLElement>;
+    viewportAsBoundary?: boolean;
 };
 export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
@@ -19,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?: {
@@ -29,4 +36,5 @@ 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 { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } 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 +1,2 @@
-export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } 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/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/circular/styled-component.d.ts

@@ -1,3 +1,4 @@
+export declare const VIEWBOX_SIZE = 44;
 export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }: {
     strokeWidth: number;
     value: number;
@@ -5,7 +6,6 @@ export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }
 }) => {
     strokeDashoffset: string;
 };
-export declare const VIEWBOX_SIZE = 44;
 export declare const StyledRoot: import("../../style/styled").StyledComponent;
 export declare const StyledBarContainer: import("../../style/styled").StyledComponent;
 export declare const StyledSvg: import("../../style/styled").StyledComponent;

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

@@ -11,6 +11,7 @@ var BaseProgress = function (_a) {
     var inlineStyles = _a.inlineStyles, props = __rest(_a, ["inlineStyles"]);
     return (_jsx("circle", __assign({ style: inlineStyles }, props), void 0));
 };
+export var VIEWBOX_SIZE = 44;
 export var getProgressInlineStyles = function (_a) {
     var strokeWidth = _a.strokeWidth, value = _a.value, infinite = _a.infinite;
     var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - strokeWidth) / 2);
@@ -18,7 +19,6 @@ export var getProgressInlineStyles = function (_a) {
         strokeDashoffset: "".concat((((100 - value) / 100) * circumference).toFixed(3), "px"),
     };
 };
-export var VIEWBOX_SIZE = 44;
 export var StyledRoot = styled('span', 'relative inline-flex', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $size = _b.$size;
@@ -58,14 +58,14 @@ export var StyledBar = styled('circle', function (_a, _b) {
         cx: px2rem(VIEWBOX_SIZE),
         cy: px2rem(VIEWBOX_SIZE),
         r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2),
-        strokeWidth: $strokeWidth,
+        strokeWidth: $strokeWidth.toString(),
     });
 });
 export var StyledProgress = styled(BaseProgress, 'stroke-current', { fill: 'none' }, function (_a, _b) {
     var px2rem = _a.px2rem;
     var $infinite = _b.$infinite, $value = _b.$value, $strokeWidth = _b.$strokeWidth;
     var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - $strokeWidth) / 2);
-    return __assign({ cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth }, (!$infinite
+    return __assign({ cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth.toString() }, (!$infinite
         ? {
             willChange: 'strokeDashoffset',
             transitionTimingFunction: 'ease',

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,16 +1,13 @@
-/// <reference types="react" />
-import { RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
+import * as React from 'react';
+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: import("react").Context<{
+export declare const SpaceRadioContext: React.Context<{
     size?: Size | undefined;
     intent?: Intent | undefined;
 }>;
-export declare function useRadioGroupAdapter<T extends RadioGroupProps>(props: T): {
-    adaptedProps: Omit<T, 'size' | 'overrides' | 'className' | 'style' | 'intent'> & {
-        overrides?: RadioGroupOverrides;
-    };
-};
-export declare const useRadioAdapter: <T extends RadioProps>(props: T) => Omit<T, "style" | "className" | "$outlineColor" | "$outlineWidth" | "$outlineOffset" | "$outlineStyle"> & {
-    overrides: RadioOverrides;
-};
+declare type BaseuiRadioGroupProps = React.ComponentProps<typeof BaseRadioGroup>;
+export declare function useRadioGroupAdapter(props: RadioGroupProps): BaseuiRadioGroupProps;
+declare type BaseuiRadioProps = React.ComponentProps<typeof BaseRadio>;
+export declare const useRadioAdapter: (props: RadioProps) => BaseuiRadioProps;
+export {};

package/esm/radio/basewebAdapters.js

@@ -4,6 +4,7 @@ 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';
 export var SpaceRadioContext = createContext({
     size: 'md',
     intent: 'default',
@@ -16,7 +17,7 @@ export function useRadioGroupAdapter(props) {
             style: [className, style],
         },
     }, overrides);
-    return { adaptedProps: __assign(__assign({}, restProps), { overrides: convertOverrides }) };
+    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;
@@ -40,7 +41,9 @@ export var useRadioAdapter = function (props) {
             props: sharedProps,
         },
         // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/472 - baseui adds position absolute
-        Input: { style: { position: 'static' } },
+        // 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);
-    return __assign(__assign({}, restProps), { overrides: 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/radio.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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';
 // @ts-ignore
 BaseRadio.displayName = 'BaseUIRadio';
 // @ts-ignore
@@ -13,11 +14,11 @@ export var Radio = function (props) {
 };
 Radio.displayName = 'Radio';
 export var RadioGroup = function (props) {
-    var adaptedProps = useRadioGroupAdapter(props).adaptedProps;
-    var memoizedProviderValue = useMemo(function () { return ({ size: props.size || 'md', intent: props.intent || 'default' }); }, [
-        props.size,
-        props.intent,
-    ]);
+    var adaptedProps = useRadioGroupAdapter(props);
+    var _a = useContextualFormProps(props, {
+        intent: 'default',
+    }), formIntent = _a.intent, _b = _a.size, formSize = _b === void 0 ? 'md' : _b;
+    var memoizedProviderValue = useMemo(function () { return ({ size: formSize, intent: formIntent }); }, [formSize, formIntent]);
     return (_jsx(SpaceRadioContext.Provider, __assign({ value: memoizedProviderValue }, { children: _jsx(BaseRadioGroup, __assign({}, adaptedProps), void 0) }), void 0));
 };
 RadioGroup.displayName = 'RadioGroup';

package/esm/radio/styled-components.js

@@ -71,7 +71,7 @@ export var getRadioMarkOuterStyles = function (utils, props) {
 };
 export var getRadioLabelStyles = function (_a, _b) {
     var _c;
-    var direction = _a.direction, px2rem = _a.px2rem;
+    var px2rem = _a.px2rem;
     var $labelPosition = _b.$labelPosition, $size = _b.$size;
     var paddingDirection;
     switch ($labelPosition) {
@@ -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,25 +111,23 @@ 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 = px2rem(6),
-        _c.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(6),
+        _c.marginTop = '0px',
+        _c.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(6),
         _c);
     switch ($size) {
         case 'md':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(38) : undefined;
-            styles.marginTop = px2rem(8);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(8);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(8);
             break;
         case 'lg':
             styles["margin".concat(directionMargin)] = isHorizontal ? px2rem(46) : undefined;
-            styles.marginTop = px2rem(10);
-            styles.marginBottom = $hasDescription && !isHorizontal ? undefined : px2rem(10);
+            styles.marginBottom = isHorizontal || $hasDescription ? undefined : px2rem(10);
             break;
         default:
             break;

package/esm/radio/types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { RadioGroupProps as BaseRadioGroupProps, RadioProps as BaseRadioProps, RadioOverrides, RadioGroupOverrides } from 'baseui/radio';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
@@ -21,17 +22,23 @@ export declare type SharedProps = {
     $size?: Size;
     $labelPosition?: LabelPosition;
 };
-export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError'>> & {
+declare type CommonProps = {
+    onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => unknown;
     size?: Size;
     intent?: Intent;
+};
+export declare type RadioProps = SpacewebComponentProps<Omit<BaseRadioProps, 'overrides' | 'isError' | keyof CommonProps>> & {
     overrides?: {
         [key in keyof RadioOverrides]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides'>> & {
-    intent?: Intent;
-    size?: Size;
+    inputRef?: React.Ref<HTMLInputElement>;
+} & OutlineProps & CommonProps;
+export declare type RadioGroupProps = SpacewebComponentProps<Omit<BaseRadioGroupProps, 'overrides' | keyof CommonProps>> & {
     overrides?: {
         [key in keyof RadioGroupOverrides]?: Override<SharedProps>;
     };
-};
+} & CommonProps;
+export {};

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;

package/esm/search/stateful-search.js

@@ -0,0 +1,15 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Search } from './search';
+export var StatefulSearch = function (_a) {
+    var initialState = _a.initialState, onChange = _a.onChange, restProps = __rest(_a, ["initialState", "onChange"]);
+    var _b = __read(useState(initialState), 2), query = _b[0], setQuery = _b[1];
+    var handleChange = useCallback(function (e) {
+        setQuery(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    }, [onChange]);
+    return _jsx(Search, __assign({ value: query, onChange: handleChange }, restProps), void 0);
+};

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

@@ -1,13 +1,4 @@
 import { Styles } from '../types';
-import { Size } from './types';
-declare type SizeStyle = {
-    paddingX: string;
-    searchIconMarginX: string;
-    height: string;
-    fontSize: string;
-    iconSize: number;
-};
-export declare const SIZES_STYLES_MAP: Record<Size, SizeStyle>;
+export declare const getSearchSizeTheme: (theme: any, size: any, prop: any) => any;
 export declare const getInputContainerStyles: Styles;
 export declare const getRootStyles: Styles;
-export {};