@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

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;

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 {};

package/esm/search/styled-components.js

@@ -1,5 +1,6 @@
 import { __assign } from "tslib";
 import { borderColor as borderColorLongHand, borderRadius, borderStyle, borderWidth } from '../helpers/longHandHelpers';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 var VARIANTS_TOKENS_MAP = {
     default: {
         backgroundColor: 'ui02',
@@ -12,36 +13,66 @@ var VARIANTS_TOKENS_MAP = {
         disabledBackgroundColor: 'ui02',
         hoverBorderColor: 'border06',
         focusBorderColor: 'interactive01',
+        borderColor: 'border03',
     },
 };
 var getSearchComponentTokens = function (variant) { var _a; return (_a = VARIANTS_TOKENS_MAP[variant !== null && variant !== void 0 ? variant : 'default']) !== null && _a !== void 0 ? _a : {}; };
-export var SIZES_STYLES_MAP = {
+var SIZES_STYLES_MAP = {
+    xxxs: {
+        paddingX: '2px',
+        searchIconMarginX: '4px',
+        height: '24px',
+        fontSize: '13px',
+        iconSize: 10,
+        borderRadius: '5px',
+        lineHeight: '16px',
+    },
+    xxs: {
+        paddingX: '5px',
+        searchIconMarginX: '4px',
+        height: '28px',
+        fontSize: '14px',
+        iconSize: 10,
+        borderRadius: '6px',
+    },
+    xs: {
+        paddingX: '5px',
+        searchIconMarginX: '5px',
+        height: '32px',
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '7px',
+    },
     sm: {
-        paddingX: '4px',
-        searchIconMarginX: '8px',
-        height: '30px',
+        paddingX: '6px',
+        searchIconMarginX: '7px',
+        height: '36px',
         fontSize: '14px',
-        iconSize: 14,
+        iconSize: 12,
+        borderRadius: '8px',
     },
     md: {
-        paddingX: '8px',
-        searchIconMarginX: '8px',
+        paddingX: '6px',
+        searchIconMarginX: '7px',
         height: '40px',
-        fontSize: '16px',
-        iconSize: 14,
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '8px',
     },
     lg: {
-        paddingX: '10px',
-        searchIconMarginX: '14px',
-        height: '60px',
-        fontSize: '18px',
-        iconSize: 18,
+        paddingX: '6px',
+        searchIconMarginX: '7px',
+        height: '40px',
+        fontSize: '14px',
+        iconSize: 12,
+        borderRadius: '8px',
     },
 };
+export var getSearchSizeTheme = function (theme, size, prop) { var _a; return ((_a = getComponentSizeTheme(theme, 'search', size, getDefaultSize(theme))) === null || _a === void 0 ? void 0 : _a[prop]) || SIZES_STYLES_MAP[size][prop]; };
 var rootBackgroundColor = function (_a, _b) {
     var theme = _a.theme;
     var $isFocused = _b.$isFocused, $disabled = _b.$disabled, _c = _b.$variant, $variant = _c === void 0 ? 'default' : _c;
-    var _d = getSearchComponentTokens($variant), backgroundColor = _d.backgroundColor, disabledBackgroundColor = _d.disabledBackgroundColor;
+    var _d = getSearchComponentTokens($variant), backgroundColor = _d.backgroundColor, disabledBackgroundColor = _d.disabledBackgroundColor, borderColor = _d.borderColor;
     return {
         backgroundColor: $disabled ? theme.spr[disabledBackgroundColor] : theme.spr[backgroundColor],
     };
@@ -49,14 +80,14 @@ var rootBackgroundColor = function (_a, _b) {
 var rootBorderColor = function (utils, props) {
     var theme = utils.theme;
     var $isFocused = props.$isFocused, $disabled = props.$disabled, $variant = props.$variant;
-    var _a = getSearchComponentTokens($variant), hoverBorderColor = _a.hoverBorderColor, focusBorderColor = _a.focusBorderColor;
+    var _a = getSearchComponentTokens($variant), hoverBorderColor = _a.hoverBorderColor, focusBorderColor = _a.focusBorderColor, borderColor = _a.borderColor;
     if ($disabled) {
         return borderColorLongHand(theme.input.disabledBorderColor);
     }
     if ($isFocused) {
         return borderColorLongHand(theme.spr[focusBorderColor]);
     }
-    return __assign(__assign({}, borderColorLongHand('transparent')), { ':hover': borderColorLongHand(theme.spr[hoverBorderColor]) });
+    return __assign(__assign({}, borderColorLongHand(borderColor ? theme.spr[borderColor] : 'transparent')), { ':hover': borderColorLongHand(theme.spr[hoverBorderColor]) });
 };
 export var getInputContainerStyles = __assign(__assign(__assign(__assign({ outline: 'none', boxSizing: 'border-box' }, borderColorLongHand('transparent')), { backgroundColor: 'transparent', ':hover': { backgroundColor: 'transparent' } }), borderStyle('none')), borderRadius('0'));
 export var getRootStyles = [
@@ -64,14 +95,13 @@ export var getRootStyles = [
     borderWidth('1px'),
     rootBorderColor,
     rootBackgroundColor,
-    function (_a) {
+    function (_a, _b) {
         var theme = _a.theme;
-        return borderRadius(theme.borderRadius['8']);
-    },
-    function (_, _a) {
-        var $size = _a.$size;
-        var _b = SIZES_STYLES_MAP[$size], paddingX = _b.paddingX, height = _b.height;
-        return { height: height, paddingLeft: paddingX, paddingRight: paddingX };
+        var $size = _b.$size;
+        var paddingX = getSearchSizeTheme(theme, $size, 'paddingX');
+        var height = getSearchSizeTheme(theme, $size, 'height');
+        var _borderRadius = getSearchSizeTheme(theme, $size, 'borderRadius');
+        return __assign({ height: height, paddingLeft: paddingX, paddingRight: paddingX }, borderRadius(_borderRadius));
     },
     { outline: 'none', boxSizing: 'border-box' },
 ];

package/esm/search/types.d.ts

@@ -1,8 +1,11 @@
 import { InputProps, SharedProps as InputSharedProps } from '../input/types';
 import { Override } from '../overrides';
-export declare type Size = 'sm' | 'md' | 'lg';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type Variant = 'default' | 'light';
-export declare type SearchProps = Omit<InputProps, 'size | type' | 'required' | 'variant' | 'intent' | 'startEnhancer' | 'endEnhancer'> & {
+export declare type SearchProps = Omit<InputProps, 'size' | 'type' | 'required' | 'variant' | 'intent' | 'startEnhancer' | 'endEnhancer'> & {
     size?: Size;
     bordered?: boolean;
     debounceInterval?: number;
@@ -17,3 +20,6 @@ export declare type SharedProps = Omit<InputSharedProps, '$size'> & {
     $bordered: boolean;
     $variant: Variant;
 };
+export declare type StatefulSearchProps = Omit<SearchProps, 'value'> & {
+    initialState?: string;
+};

package/esm/select/adaptor.d.ts

@@ -1,4 +1,4 @@
-import { TYPE } from 'baseui/select';
+import { TYPE } from '../baseui/select';
 import { Type } from './types';
 import { ValueOf } from '../utility-types';
 export declare const typeAdaptor: Record<Type, ValueOf<typeof TYPE>>;

package/esm/select/adaptor.js

@@ -1,4 +1,4 @@
-import { TYPE } from 'baseui/select';
+import { TYPE } from '../baseui/select';
 export var typeAdaptor = {
     select: TYPE.select,
     search: TYPE.search,