@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/modal/styled-components.js

@@ -1,31 +1,22 @@
-import { Modal as BaseModal } from 'baseui/modal';
-import withThemeOverride from '../helpers/baseui/withThemeOverride';
+import { Modal as BaseModal } from '../baseui/modal';
 import { styled } from '../style';
-export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from '../baseui/modal';
 // @ts-ignore
 BaseModal.displayName = 'BaseUIModal';
-export var StyledModal = withThemeOverride(BaseModal, function (theme) { return ({
-    colors: {
-        backgroundPrimary: theme.spr.popup,
-        modalCloseColor: theme.spr.icon02,
-        modalCloseColorHover: theme.spr.icon01,
-        contentPrimary: theme.spr.text01,
-        contentSecondary: theme.spr.text02,
-    },
-}); });
-export var StyledModalHeader = styled('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0', function (_a, _b) {
+export var StyledModal = BaseModal;
+export var StyledModalHeader = styled('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0 pt-4 px-6', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $noBorder = _b.$noBorder;
     return ({ lineHeight: $noBorder ? px2rem(28) : px2rem(24) });
 }, function (utils, _a) {
     var $noBorder = _a.$noBorder;
-    return ($noBorder ? 'py-6 px-7' : 'border-b-1 border-solid spr-border-02 py-5 px-7');
+    return ($noBorder ? 'pb-0' : 'border-b-1 border-solid spr-border-02 pb-4');
 });
-export var ModalBody = styled('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow');
-export var StyledModalFooter = styled('div', 'border-b-0 border-l-0 border-r-0', function (_a) {
-    var px2rem = _a.px2rem, direction = _a.direction;
-    return ({ lineHeight: px2rem(28), textAlign: direction === 'rtl' ? 'left' : 'right' });
+export var ModalBody = styled('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow px-6 py-4');
+export var StyledModalFooter = styled('div', 'border-b-0 border-l-0 border-r-0 pb-4 px-6', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ lineHeight: px2rem(28), textAlign: 'right' });
 }, function (utils, _a) {
     var $noBorder = _a.$noBorder;
-    return ($noBorder ? 'py-6 px-7' : 'border-t-1 border-solid spr-border-02 py-5 px-7');
+    return ($noBorder ? 'pt-0' : 'border-t-1 border-solid spr-border-02 pt-4');
 });

package/esm/modal/types.d.ts

@@ -1,4 +1,4 @@
-import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from 'baseui/modal';
+import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from '../baseui/modal';
 import { Override } from '../overrides';
 import { SpacewebComponentProps } from '../types';
 export declare type Size = 'sm' | 'md' | 'lg' | 'fullPage';
@@ -20,5 +20,5 @@ export declare type ModalHeaderProps = SpacewebComponentProps & {
 export declare type ModalFooterProps = SpacewebComponentProps & {
     noBorder?: boolean;
 };
-export type { ModalState } from 'baseui/modal';
-export { CLOSE_SOURCE } from 'baseui/modal';
+export type { ModalState } from '../baseui/modal';
+export { CLOSE_SOURCE } from '../baseui/modal';

package/esm/modal/types.js

@@ -1 +1 @@
-export { CLOSE_SOURCE } from 'baseui/modal';
+export { CLOSE_SOURCE } from '../baseui/modal';

package/esm/number/Number.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NumberProps } from './types';
+export declare const Number: ({ value, variant, numberOptions }: NumberProps) => JSX.Element;

package/esm/number/Number.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+//hooks
+import { useNumber } from './useNumber';
+//constants
+import { DEFAULT_VARIANT } from './constants';
+export var Number = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var formattedNumber = useNumber({ value: value, variant: variant, numberOptions: numberOptions });
+    return _jsx(_Fragment, { children: formattedNumber }, void 0);
+};

package/esm/number/constants.d.ts

@@ -0,0 +1,2 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;

package/esm/number/constants.js

@@ -0,0 +1,4 @@
+import { NUMBER_VARIANTS } from '../utils/intlNumberFormatUtils/types';
+export var DEFAULT_VARIANT = {
+    type: NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};

package/esm/number/index.d.ts

@@ -0,0 +1,5 @@
+export { Number } from './Number';
+export { useNumber } from './useNumber';
+export { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/esm/number/index.js

@@ -0,0 +1,5 @@
+export { Number } from './Number';
+export { useNumber } from './useNumber';
+export { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/esm/number/types.d.ts

@@ -0,0 +1,6 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type NumberProps = {
+    value: number;
+    variant?: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions;
+};

package/esm/number/types.js

@@ -0,0 +1 @@
+export {};

package/esm/number/useNumber.d.ts

@@ -0,0 +1,2 @@
+import { NumberProps } from './types';
+export declare const useNumber: ({ value, variant, numberOptions }: NumberProps) => string;

package/esm/number/useNumber.js

@@ -0,0 +1,8 @@
+import { useLocale } from '../locale';
+import { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+import { DEFAULT_VARIANT } from './constants';
+export var useNumber = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var langCode = useLocale().langCode;
+    return getFormattedNumber({ value: value, locale: langCode, variant: variant, numberOptions: numberOptions });
+};

package/esm/overrides/index.d.ts

@@ -1,3 +1,3 @@
 export * from './types';
-export { mergeOverrides } from './mergeOverrides';
+export { mergeOverrides, mergeOverride } from './mergeOverrides';
 export { useOverrides, getOverrides } from './useOverrides';

package/esm/overrides/index.js

@@ -1,3 +1,3 @@
 export * from './types';
-export { mergeOverrides } from './mergeOverrides';
+export { mergeOverrides, mergeOverride } from './mergeOverrides';
 export { useOverrides, getOverrides } from './useOverrides';

package/esm/overrides/mergeOverrides.d.ts

@@ -1,3 +1,4 @@
-import { Overrides, OverridesObject } from './types';
+import { Override, OverrideObject, Overrides, OverridesObject } from './types';
+declare const mergeOverride: <T>(_target?: Override<T> | undefined, _source?: Override<T> | undefined) => OverrideObject<T>;
 declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
-export { mergeOverrides };
+export { mergeOverrides, mergeOverride };

package/esm/overrides/mergeOverrides.js

@@ -40,4 +40,4 @@ var mergeOverrides = function (target, source) {
         return acc;
     }, {});
 };
-export { mergeOverrides };
+export { mergeOverrides, mergeOverride };

package/esm/overrides/useOverrides.js

@@ -1,5 +1,5 @@
 /* eslint @typescript-eslint/no-explicit-any: 0 */
-import { getOverrides as baseGetOverrides } from 'baseui/helpers/overrides';
+import { getOverrides as baseGetOverrides } from '../baseui/helpers/overrides';
 import { useMemo } from 'react';
 var getOverrides = function (override, defaultComponent) {
     if (override === void 0) { override = {}; }

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

@@ -1,7 +1,9 @@
-import { PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
+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

@@ -5,9 +5,31 @@ 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, _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' },
@@ -18,6 +40,6 @@ var usePaymentCardBasewebAdapter = function (props) {
         },
     };
     var adaptedProps = useInputBasewebAdapter(__assign(__assign({}, contextualProps), { overrides: mergeOverrides(basePaymentCardStyles, contextualProps.overrides) }));
-    return adaptedProps;
+    return __assign(__assign({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 export default usePaymentCardBasewebAdapter;

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

@@ -1,3 +1,3 @@
-export { StatefulContainer, valid } from 'baseui/payment-card';
+export { StatefulContainer, valid } from '../baseui/payment-card';
 export { PaymentCard, StatefulPaymentCard } from './paymentCard';
 export * from './types';

package/esm/payment-card/index.js

@@ -1,3 +1,3 @@
-export { StatefulContainer, valid } from 'baseui/payment-card';
+export { StatefulContainer, valid } from '../baseui/payment-card';
 export { PaymentCard, StatefulPaymentCard } from './paymentCard';
 export * from './types';

package/esm/payment-card/paymentCard.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PaymentCard as BasePaymentCard, StatefulPaymentCard as BaseStatefulPaymentCard } from 'baseui/payment-card';
+import { PaymentCard as BasePaymentCard, StatefulPaymentCard as BaseStatefulPaymentCard } from '../baseui/payment-card';
 import usePaymentCardBasewebAdpater from './basewebAdapters';
 import useAutoFocus from '../hooks/useAutoFocus';
 // @ts-ignore

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, 'md');
+    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,5 +1,5 @@
 import { Ref } from 'react';
-import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
+import { PaymentCardProps as BasePaymentCardProps, StatefulPaymentCardProps as BaseStatefulPaymentCardProps, PaymentCardOverrides as BasePaymentCardOverrides } from '../baseui/payment-card';
 import { Override } from '../overrides';
 import { SpacewebComponentProps, Intent } from '../types';
 import { InputSize, InputVariant, SharedProps, FocusPosition } from '../input';

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

@@ -16,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 () {
@@ -66,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,
@@ -76,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 }));
             }

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

@@ -1,5 +1,5 @@
 import { InputVariant } from '../input';
-import { PhoneInputOverrides, Country } from './types';
+import { Country, PhoneInputOverrides } from './types';
 declare const defaultProps: {
     clearable: boolean;
     focusLock: boolean;
@@ -12,9 +12,9 @@ declare const defaultProps: {
     positive: boolean;
     required: boolean;
     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

@@ -11,13 +11,13 @@ var defaultProps = {
     positive: false,
     required: false,
     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

@@ -14,10 +14,6 @@ declare const PhoneInput: {
         positive: boolean;
         required: boolean;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default PhoneInput;

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

@@ -5,27 +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 _a = useContextualFormProps(props), _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, intent = _a.intent, disabled = _a.disabled, overrides = _a.overrides, mapIsoToLabel = _a.mapIsoToLabel, maxDropdownHeight = _a.maxDropdownHeight, maxDropdownWidth = _a.maxDropdownWidth, onInputChange = _a.onInputChange, onChange = _a.onChange, value = _a.value, rest = __rest(_a, ["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,
@@ -36,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 _c = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _c[0], inputProps = _c[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

@@ -14,10 +14,6 @@ declare const StatefulPhoneInput: {
         positive: boolean;
         required: boolean;
         variant: import("../input").InputVariant;
-        value: {
-            country: import("./types").Country;
-            phoneNumber: string;
-        };
     };
 };
 export default StatefulPhoneInput;

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

@@ -5,9 +5,17 @@ export declare const getFlagContainerStyles: (string | (({ theme, px2rem }: {
     $inputSize: any;
     $isFocusVisible: any;
 }) => any))[];
-export declare const getRootStyles: ({}: {}, { $disabled }: {
+export declare const getRootStyles: (_: any, { $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,41 @@
 import { __assign } from "tslib";
 import { styled } from '../style';
-var dialCodeSizeConfig = function (px2rem) { return ({
-    sm: { fontSize: px2rem(12) },
-    md: { fontSize: px2rem(14) },
-    lg: { fontSize: px2rem(16) },
-}); };
-var getSizeConfig = function (px2rem, size) { var _a; return (_a = dialCodeSizeConfig(px2rem)[size]) !== null && _a !== void 0 ? _a : dialCodeSizeConfig(px2rem).lg; };
+import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 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;
+export var getRootStyles = function (_, _a) {
+    var $disabled = _a.$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) {
-    var px2rem = _a.px2rem;
+export var StyledDialCode = styled('div', 'flex items-center font-medium', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
     var $size = _b.$size;
-    var sizeTheme = getSizeConfig(px2rem, $size);
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', $size, getDefaultSize(theme));
     var styles = {
-        fontSize: sizeTheme.fontSize,
+        fontSize: inputSizeTheme.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;
 };
@@ -55,7 +56,7 @@ export declare type FixedSizeListItemProps = {
     top: number;
 };
 export declare type VirtualizedCountrySelectDropdownProps = MenuProps & {
-    ListItem: React.ComponentType<FixedSizeListItemProps>;
+    ListItem: React.ComponentType<React.PropsWithChildren<FixedSizeListItemProps>>;
     emptyListHeight?: number;
     listItemHeight?: number;
     overscanCount?: number;

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

@@ -1,5 +1,5 @@
 import { Value as ValueT } from '../select/types';
-import { Value } from './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;
@@ -7,3 +7,7 @@ export declare const countrySelectFilterOptions: (options: ValueT, filterValue:
     valueKey: string;
     labelKey: string;
 }) => ValueT;
+export declare const getDefaultValue: (countries?: Country[] | undefined) => {
+    country: Country;
+    phoneNumber: string;
+};