@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/payment-card/basewebAdapters.d.ts

@@ -1,7 +1,9 @@
 import { PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
 import { PaymentCardProps, StatefulPaymentCardProps } from './types';
 declare type AdapterProps = Omit<PaymentCardProps | StatefulPaymentCardProps, 'autoFocus'>;
+declare type BaseWebCardSize = 'default' | 'mini' | 'compact';
 declare const usePaymentCardBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, 'size' | 'variant' | 'className' | 'overrides' | 'style' | 'intent'> & {
     overrides?: BasePaymentCardOverrides;
+    size: BaseWebCardSize;
 };
 export default usePaymentCardBasewebAdapter;

package/esm/payment-card/basewebAdapters.js

@@ -1,12 +1,35 @@
 import { __assign } from "tslib";
+import _pick from 'lodash/pick';
 import { useContextualFormProps } from '../form-control/context';
 import useInputBasewebAdapter from '../input/basewebAdapters';
 import { getIconWrapperStyles } from './styled-components';
 import { add$props } from '../helpers';
 import { mergeOverrides } from '../overrides';
+import { SIZE } from 'baseui/input';
+import { getDefaultSize } from '../helpers/themeHelpers';
+import { useStyle } from '../style/';
+var getBasewebPaymentCardSizeMap = function (_size) {
+    switch (_size) {
+        case 'lg':
+            return SIZE.default;
+        case 'md':
+            return SIZE.default;
+        case 'sm':
+            return SIZE.compact;
+        case 'xs':
+            return SIZE.compact;
+        case 'xxxs':
+            return SIZE.mini;
+        default:
+            return SIZE.default;
+    }
+};
 var usePaymentCardBasewebAdapter = function (props) {
-    var _a = useContextualFormProps(props), size = _a.size, variant = _a.variant, intent = _a.intent;
-    var sharedProps = add$props({ size: size, variant: variant, intent: intent });
+    var _a, _b;
+    var contextualProps = useContextualFormProps(props);
+    var sharedProps = add$props(_pick(contextualProps, ['size', 'variant', 'intent']));
+    var theme = useStyle().theme;
+    var _size = (_b = (_a = contextualProps.size) !== null && _a !== void 0 ? _a : sharedProps.$size) !== null && _b !== void 0 ? _b : getDefaultSize(theme);
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -16,7 +39,7 @@ var usePaymentCardBasewebAdapter = function (props) {
             props: sharedProps,
         },
     };
-    var adaptedProps = useInputBasewebAdapter(__assign(__assign({}, props), { overrides: mergeOverrides(basePaymentCardStyles, props.overrides) }));
-    return adaptedProps;
+    var adaptedProps = useInputBasewebAdapter(__assign(__assign({}, contextualProps), { overrides: mergeOverrides(basePaymentCardStyles, contextualProps.overrides) }));
+    return __assign(__assign({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 export default usePaymentCardBasewebAdapter;

package/esm/payment-card/styled-components.js

@@ -1,12 +1,31 @@
-import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { __assign } from "tslib";
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
+// todo: fix this and derive from input styles
+var SIZES_STYLES_MAP = {
+    xxxs: {
+        height: '22px',
+    },
+    xs: {
+        height: '30px',
+    },
+    sm: {
+        height: '34px',
+    },
+    md: {
+        height: '38px',
+    },
+    lg: {
+        height: '38px',
+    },
+};
 export var getIconWrapperStyles = function (_a, _b) {
     var theme = _a.theme;
     var $size = _b.$size;
-    var styles = {
-        marginLeft: '',
-        marginRight: '',
-    };
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, 'lg');
+    var styles = __assign({ marginLeft: '', marginRight: '', lineHeight: '', fontSize: '', borderRadius: '' }, SIZES_STYLES_MAP[$size]);
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
     styles.marginLeft = styles.marginRight = inputSizeTheme.paddingX;
+    styles.fontSize = inputSizeTheme.fontSize;
+    styles.lineHeight = inputSizeTheme.lineHeight;
+    styles.borderRadius = (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.borderRadius) || theme.input.borderRadius;
     return styles;
 };

package/esm/payment-card/types.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
 import { Override } from '../overrides';
 import { SpacewebComponentProps, Intent } from '../types';
@@ -11,7 +12,8 @@ declare type CommonInputProps = {
     overrides?: PaymentCardOverrides;
     intent?: Intent;
     autoFocus?: FocusPosition;
+    inputRef?: Ref<HTMLInputElement>;
 };
-export declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
-export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus'> & CommonInputProps;
+export declare type PaymentCardProps = Omit<SpacewebComponentProps<BasePaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
+export declare type StatefulPaymentCardProps = Omit<SpacewebComponentProps<BaseStatefulPaymentCardProps>, 'size' | 'overrides' | 'positive' | 'error' | 'autoFocus' | 'inputRef'> & CommonInputProps;
 export {};

package/esm/phone-input/country-select-container.js

@@ -10,6 +10,6 @@ var CountrySelectContainer = function (props) {
     var _a = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CountrySelectContainer, StyledCountrySelectContainer), 2), CountrySelectComponent = _a[0], countrySelectContainerProps = _a[1];
     var countrySelectProps = __assign(__assign({}, props), { overrides: _pick(overrides, ['CountrySelect', 'FlagContainer']) });
     var dialCodeProps = __assign(__assign({}, _pick(props, ['size', 'value'])), { overrides: _pick(overrides, ['DialCode']) });
-    return (_jsxs(CountrySelectComponent, __assign({}, countrySelectContainerProps, { children: [_jsx(CountrySelect, __assign({}, countrySelectProps), void 0), _jsx(DialCode, __assign({}, dialCodeProps), void 0)] }), void 0));
+    return (_jsxs(CountrySelectComponent, __assign({ dir: "ltr" }, countrySelectContainerProps, { children: [_jsx(CountrySelect, __assign({}, countrySelectProps), void 0), _jsx(DialCode, __assign({}, dialCodeProps), void 0)] }), void 0));
 };
 export default CountrySelectContainer;

package/esm/phone-input/country-select.js

@@ -7,7 +7,6 @@ import { Select as DefaultSelect } from '../select';
 import { ListItem } from '../list';
 import { Typography } from '../typography';
 import FlagContainer from './flag-container';
-import VirtualizedCountrySelectDropdown from './virtualized-country-select-dropdown';
 import { useLocale } from '../locale';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { iso2FlagEmoji, countrySelectFilterOptions } from './utils';
@@ -17,7 +16,7 @@ var SelectListItem = React.forwardRef(function (_a, ref) {
     return (_jsxs(ListItem, __assign({}, rest, { startEnhancer: iso2FlagEmoji(id), ref: ref }, { children: [dialCode, _jsxs(Typography, __assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", mapIsoToLabel ? mapIsoToLabel(id) : label, ")"] }), void 0)] }), void 0));
 });
 var CountrySelect = function (props) {
-    var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;
+    var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, countries = props.countries, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;
     var locale = useLocale();
     var overlayContentContainerRef = useRef();
     var mergedOverrides = useMemo(function () {
@@ -26,7 +25,6 @@ var CountrySelect = function (props) {
                 props: {
                     overrides: {
                         Menu: {
-                            component: VirtualizedCountrySelectDropdown,
                             props: {
                                 'data-testid': 'country-select-menu',
                                 parentRef: overlayContentContainerRef,
@@ -68,7 +66,7 @@ var CountrySelect = function (props) {
                 },
             },
         }, overrides);
-    }, [mapIsoToLabel, maxDropdownHeight, overrides, size]);
+    }, [mapIsoToLabel, overrides, size]);
     var _a = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.CountrySelect, DefaultSelect), 2), Select = _a[0], selectProps = _a[1];
     var flagContainerProps = {
         size: size,
@@ -78,7 +76,7 @@ var CountrySelect = function (props) {
     };
     return (
     // @ts-ignore
-    _jsx(Select, __assign({ type: "overlay", options: COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
+    _jsx(Select, __assign({ type: "overlay", options: countries !== null && countries !== void 0 ? countries : COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
             if (onChange) {
                 onChange(__assign(__assign({}, value), { country: params.option }));
             }
@@ -86,6 +84,6 @@ var CountrySelect = function (props) {
             if (inputRef && inputRef.current) {
                 inputRef.current.focus();
             }
-        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: countrySelectFilterOptions }, selectProps, { children: _jsx(FlagContainer, __assign({}, flagContainerProps), void 0) }), void 0));
+        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: countrySelectFilterOptions, virtual: true }, selectProps, { children: _jsx(FlagContainer, __assign({}, flagContainerProps), void 0) }), void 0));
 };
 export default CountrySelect;

package/esm/phone-input/default-props.d.ts

@@ -1,11 +1,9 @@
-import { Intent } from '../types';
-import { InputSize, InputVariant } from '../input';
-import { PhoneInputOverrides, Country } from './types';
+import { InputVariant } from '../input';
+import { Country, PhoneInputOverrides } from './types';
 declare const defaultProps: {
     clearable: boolean;
     focusLock: boolean;
     disabled: boolean;
-    intent: Intent;
     maxDropdownHeight: string;
     maxDropdownWidth: string;
     name: undefined;
@@ -13,11 +11,10 @@ declare const defaultProps: {
     overrides: PhoneInputOverrides;
     positive: boolean;
     required: boolean;
-    size: InputSize;
     variant: InputVariant;
-    value: {
-        country: Country;
-        phoneNumber: string;
-    };
+};
+export declare const defaultValue: {
+    country: Country;
+    phoneNumber: string;
 };
 export default defaultProps;

package/esm/phone-input/default-props.js

@@ -3,7 +3,6 @@ var defaultProps = {
     clearable: false,
     focusLock: false,
     disabled: false,
-    intent: 'default',
     maxDropdownHeight: DEFAULT_MAX_DROPDOWN_HEIGHT,
     maxDropdownWidth: DEFAULT_MAX_DROPDOWN_WIDTH,
     name: undefined,
@@ -11,15 +10,14 @@ var defaultProps = {
     overrides: {},
     positive: false,
     required: false,
-    size: 'lg',
     variant: 'default',
-    value: {
-        country: {
-            label: 'United States',
-            id: 'US',
-            dialCode: '+1',
-        },
-        phoneNumber: '',
+};
+export var defaultValue = {
+    country: {
+        label: 'United States',
+        id: 'US',
+        dialCode: '+1',
     },
+    phoneNumber: '',
 };
 export default defaultProps;

package/esm/phone-input/flag-container.js

@@ -13,6 +13,6 @@ var FlagContainer = forwardRef(function (props, ref) {
     var locale = useLocale();
     var sharedProps = add$props({ iso: iso, inputSize: inputSize });
     var _a = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.FlagContainer, DefaultButton), 2), Button = _a[0], buttonProps = _a[1];
-    return (_jsx(Button, __assign({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xs", type: "button", className: [getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: iso2FlagEmoji(iso) }), void 0));
+    return (_jsx(Button, __assign({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xxxs", type: "button", className: [getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: iso2FlagEmoji(iso) }), void 0));
 });
 export default FlagContainer;

package/esm/phone-input/phone-input.d.ts

@@ -6,7 +6,6 @@ declare const PhoneInput: {
         clearable: boolean;
         focusLock: boolean;
         disabled: boolean;
-        intent: import("..").Intent;
         maxDropdownHeight: string;
         maxDropdownWidth: string;
         name: undefined;
@@ -14,12 +13,7 @@ declare const PhoneInput: {
         overrides: import("./types").PhoneInputOverrides;
         positive: boolean;
         required: boolean;
-        size: import("../input").InputSize;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default PhoneInput;

package/esm/phone-input/phone-input.js

@@ -5,26 +5,34 @@ import _pick from 'lodash/pick';
 import { Input as DefaultInput } from '../input';
 import CountrySelectContainer from './country-select-container';
 import { getRootStyles, getInputStyles } from './styled-components';
-import { sanitize } from './utils';
+import { getDefaultValue, sanitize } from './utils';
 import { useOverrides, mergeOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import defaultProps from './default-props';
+import { useContextualFormProps } from '../form-control/context';
+import { useStyle } from '../style';
+import { getDefaultSize } from '../helpers/themeHelpers';
 var PhoneInput = function (props) {
-    var size = props.size, variant = props.variant, intent = props.intent, disabled = props.disabled, overrides = props.overrides, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, onInputChange = props.onInputChange, onChange = props.onChange, value = props.value, rest = __rest(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var _a;
+    var _b = useContextualFormProps(props), _size = _b.size, variant = _b.variant, intent = _b.intent, disabled = _b.disabled, overrides = _b.overrides, mapIsoToLabel = _b.mapIsoToLabel, maxDropdownHeight = _b.maxDropdownHeight, maxDropdownWidth = _b.maxDropdownWidth, onInputChange = _b.onInputChange, onChange = _b.onChange, propValue = _b.value, countries = _b.countries, rest = __rest(_b, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value", "countries"]);
+    var _c = useStyle(), isRTL = _c.isRTL, theme = _c.theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
     var locale = useLocale();
     var inputRef = useRef(null);
+    var value = propValue !== null && propValue !== void 0 ? propValue : getDefaultValue(countries);
     var mergedOverrides = mergeOverrides({
         Input: {
             props: {
-                overrides: {
-                    Root: {
-                        style: getRootStyles,
-                        props: { $disabled: disabled },
-                    },
-                    Input: {
-                        style: getInputStyles,
+                overrides: (_a = {
+                        Root: {
+                            style: getRootStyles,
+                            props: { $disabled: disabled },
+                        },
+                        Input: {
+                            style: getInputStyles,
+                        }
                     },
-                    Before: {
+                    _a[isRTL ? 'After' : 'Before'] = {
                         component: CountrySelectContainer,
                         props: {
                             size: size,
@@ -35,14 +43,15 @@ var PhoneInput = function (props) {
                             mapIsoToLabel: mapIsoToLabel,
                             maxDropdownHeight: maxDropdownHeight,
                             maxDropdownWidth: maxDropdownWidth,
+                            countries: countries,
                             overrides: _pick(overrides, ['CountrySelect', 'CountrySelectContainer', 'FlagContainer', 'DialCode']),
                         },
                     },
-                },
+                    _a),
             },
         },
     }, overrides);
-    var _a = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _a[0], inputProps = _a[1];
+    var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _d[0], inputProps = _d[1];
     return (_jsx(Input, __assign({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = sanitize(e.currentTarget.value);
             if (onChange) {

package/esm/phone-input/stateful-phone-input-container.js

@@ -2,10 +2,11 @@ import { __assign, __read } from "tslib";
 import { useState } from 'react';
 import defaultProps from './default-props';
 import { STATE_CHANGE_TYPE } from './constants';
+import { getDefaultValue } from './utils';
 var defaultStateReducer = function (type, nextState) { return nextState; };
 var StatefulPhoneInputContainer = function (props) {
-    var clearable = props.clearable, disabled = props.disabled, id = props.id, _a = props.initialState, initialState = _a === void 0 ? defaultProps.value : _a, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _b = props.onChange, onChange = _b === void 0 ? defaultProps.onChange : _b, overrides = props.overrides, placeholder = props.placeholder, required = props.required, size = props.size, _c = props.stateReducer, stateReducer = _c === void 0 ? defaultStateReducer : _c, variant = props.variant;
-    var _d = __read(useState(initialState), 2), state = _d[0], setState = _d[1];
+    var clearable = props.clearable, disabled = props.disabled, id = props.id, initialState = props.initialState, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _a = props.onChange, onChange = _a === void 0 ? defaultProps.onChange : _a, overrides = props.overrides, placeholder = props.placeholder, required = props.required, size = props.size, _b = props.stateReducer, stateReducer = _b === void 0 ? defaultStateReducer : _b, variant = props.variant, countries = props.countries;
+    var _c = __read(useState(initialState !== null && initialState !== void 0 ? initialState : getDefaultValue(countries)), 2), state = _c[0], setState = _c[1];
     var internalSetState = function (type, nextState) {
         setState(stateReducer(type, nextState, state));
     };
@@ -14,6 +15,6 @@ var StatefulPhoneInputContainer = function (props) {
         onChange({ country: country, phoneNumber: phoneNumber });
         internalSetState(STATE_CHANGE_TYPE.onChange, __assign(__assign({}, state), { country: country, phoneNumber: phoneNumber }));
     };
-    return props.children(__assign(__assign({}, defaultProps), { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], clearable: clearable, disabled: disabled, id: id, intent: intent, maxDropdownHeight: maxDropdownHeight, maxDropdownWidth: maxDropdownWidth, mapIsoToLabel: mapIsoToLabel, name: name, overrides: overrides, placeholder: placeholder, required: required, size: size, variant: variant, value: state, onChange: statefulOnChange }));
+    return props.children(__assign(__assign({}, defaultProps), { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'], 'aria-describedby': props['aria-describedby'], clearable: clearable, disabled: disabled, id: id, intent: intent, maxDropdownHeight: maxDropdownHeight, maxDropdownWidth: maxDropdownWidth, mapIsoToLabel: mapIsoToLabel, name: name, overrides: overrides, placeholder: placeholder, required: required, size: size, variant: variant, value: state, onChange: statefulOnChange, countries: countries }));
 };
 export default StatefulPhoneInputContainer;

package/esm/phone-input/stateful-phone-input.d.ts

@@ -6,7 +6,6 @@ declare const StatefulPhoneInput: {
         clearable: boolean;
         focusLock: boolean;
         disabled: boolean;
-        intent: import("..").Intent;
         maxDropdownHeight: string;
         maxDropdownWidth: string;
         name: undefined;
@@ -14,12 +13,7 @@ declare const StatefulPhoneInput: {
         overrides: import("./types").PhoneInputOverrides;
         positive: boolean;
         required: boolean;
-        size: import("../input").InputSize;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default StatefulPhoneInput;

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

@@ -8,6 +8,14 @@ export declare const getFlagContainerStyles: (string | (({ theme, px2rem }: {
 export declare const getRootStyles: ({}: {}, { $disabled }: {
     $disabled: any;
 }) => "cursor-not-allowed" | undefined;
-export declare const getInputStyles = "pl-1";
+export declare const getInputStyles: ({ theme, px2rem }: {
+    theme: any;
+    px2rem: any;
+}, { $size }: {
+    $size: any;
+}) => {
+    paddingLeft: string;
+    paddingRight: string;
+};
 export declare const StyledCountrySelectContainer: import("../style/styled").StyledComponent;
 export declare const StyledDialCode: import("../style/styled").StyledComponent;

package/esm/phone-input/styled-components.js

@@ -1,35 +1,49 @@
 import { __assign } from "tslib";
 import { styled } from '../style';
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 var dialCodeSizeConfig = function (px2rem) { return ({
-    sm: { fontSize: px2rem(12) },
-    md: { fontSize: px2rem(14) },
+    xxxs: { fontSize: px2rem(10) },
+    xs: { fontSize: px2rem(12) },
+    sm: { fontSize: px2rem(14) },
+    md: { fontSize: px2rem(16) },
     lg: { fontSize: px2rem(16) },
 }); };
 var getSizeConfig = function (px2rem, size) { var _a; return (_a = dialCodeSizeConfig(px2rem)[size]) !== null && _a !== void 0 ? _a : dialCodeSizeConfig(px2rem).lg; };
 export var getFlagContainerStyles = [
-    'min-w-0 spr-ui-05 px-2 text-16 rounded-4',
+    'min-w-0 spr-ui-05 px-2 py-0.5 text-16 rounded-4',
     function (_a, _b) {
         var theme = _a.theme, px2rem = _a.px2rem;
         var $inputSize = _b.$inputSize, $isFocusVisible = _b.$isFocusVisible;
-        return (__assign({ marginLeft: $inputSize === 'sm' ? px2rem(6) : px2rem(10) }, ($isFocusVisible && {
+        var inputSizeTheme = getComponentSizeTheme(theme, 'input', $inputSize, getDefaultSize(theme));
+        return __assign({ marginLeft: inputSizeTheme.paddingX, marginRight: '0 /* @noflip */' }, ($isFocusVisible && {
             ':focus': {
                 outline: "1px solid ".concat(theme.spr.focus01),
             },
-        })));
+        }));
     },
 ];
 export var getRootStyles = function (_a, _b) {
     var $disabled = _b.$disabled;
     return ($disabled ? 'cursor-not-allowed' : undefined);
 };
-export var getInputStyles = 'pl-1';
+export var getInputStyles = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
+    return {
+        paddingLeft: "".concat(px2rem(4), " /* @noflip */"),
+        paddingRight: "".concat(inputSizeTheme.paddingX, " /* @noflip */"),
+    };
+};
 export var StyledCountrySelectContainer = styled('div', 'flex items-center');
-export var StyledDialCode = styled('div', 'flex items-center ml-1 font-medium', function (_a, _b) {
+export var StyledDialCode = styled('div', 'flex items-center font-medium', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $size = _b.$size;
     var sizeTheme = getSizeConfig(px2rem, $size);
     var styles = {
         fontSize: sizeTheme.fontSize,
+        marginLeft: "".concat(px2rem(4), " /* @noflip */"),
+        marginRight: '0 /* @noflip */',
     };
     return styles;
 });

package/esm/phone-input/types.d.ts

@@ -28,6 +28,7 @@ export declare type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     value?: Value;
     mapIsoToLabel?: (iso: string) => string;
     maxDropdownHeight?: string;
+    countries?: Array<Country>;
     maxDropdownWidth?: string;
     overrides?: PhoneInputOverrides;
 };
@@ -37,7 +38,7 @@ export declare type StatefulPhoneInputContainerProps = Omit<PhoneInputProps, 'ch
     stateReducer?: StateReducer;
     children: (props: PhoneInputProps) => any;
 };
-export declare type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth'>> & {
+export declare type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size' | 'disabled' | 'onChange' | 'mapIsoToLabel' | 'maxDropdownHeight' | 'maxDropdownWidth' | 'countries'>> & {
     overrides?: Pick<PhoneInputOverrides, 'CountrySelectContainer' | 'CountrySelect' | 'FlagContainer' | 'DialCode'>;
     value: State;
 };

package/esm/phone-input/utils.d.ts

@@ -1,6 +1,13 @@
-import { OverlaySelectProps } from '../select/types';
-import { Value } from './types';
+import { Value as ValueT } from '../select/types';
+import { Value, Country } from './types';
 export declare const iso2FlagEmoji: (iso: string) => string | undefined;
 export declare const sanitize: (value?: string) => string;
 export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
-export declare const countrySelectFilterOptions: Required<OverlaySelectProps>['filterOptions'];
+export declare const countrySelectFilterOptions: (options: ValueT, filterValue: string, excludeOptions?: ValueT | undefined | null, params?: {
+    valueKey: string;
+    labelKey: string;
+}) => ValueT;
+export declare const getDefaultValue: (countries?: Country[] | undefined) => {
+    country: Country;
+    phoneNumber: string;
+};

package/esm/phone-input/utils.js

@@ -1,9 +1,11 @@
 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;
+        return undefined;
     }
     var chars = Array.from(iso.toUpperCase()).map(function (char) { return char.charCodeAt(0) + ISO_TO_FLAG_OFFSET; });
     return String.fromCodePoint.apply(String, __spreadArray([], __read(chars), false));
@@ -14,14 +16,17 @@ export var sanitize = function (value) {
 };
 export var getPhoneNumberWithCountryDialCode = function (value) {
     if (value === undefined || value.country === undefined || value.phoneNumber === undefined) {
-        return;
+        return undefined;
     }
     return value.country.dialCode.concat(value.phoneNumber);
 };
 export var countrySelectFilterOptions = function (options, filterValue, excludeOptions, params) {
-    return filterOptions(options, filterValue, excludeOptions, __assign(__assign({}, params), { filterOption: function (_a, filterValue) {
+    return filterOptions(options, filterValue, excludeOptions, __assign(__assign({}, params), { filterOption: function (_a, _filterValue) {
             var label = _a.label, dialCode = _a.dialCode;
-            var filterValueLowerCase = filterValue.toLowerCase();
+            var filterValueLowerCase = _filterValue.toLowerCase();
             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/adapter.d.ts

@@ -1,6 +1,7 @@
 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<ACCESSIBILITY_TYPE>>;
-export declare const triggerTypeMap: Record<TriggerType, ValueOf<TRIGGER_TYPE>>;
-export declare const placementMap: Record<Placement, ValueOf<PLACEMENT>>;
+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

@@ -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/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,6 +1,5 @@
-import { Popover as BasePopover } from 'baseui/popover';
 import * as React from 'react';
-declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "overrides" | "children"> & {
+declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
     overrides?: ({
         Body?: import("../overrides").Override<any> | undefined;
         Arrow?: import("../overrides").Override<any> | undefined;
@@ -12,5 +11,9 @@ declare const Popover: React.ForwardRefExoticComponent<Omit<import("baseui/popov
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null | undefined;
-} & React.RefAttributes<BasePopover>>;
+    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;