@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/overrides/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOverrides = exports.useOverrides = exports.mergeOverrides = void 0;
+exports.getOverrides = exports.useOverrides = exports.mergeOverride = exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./types"), exports);
 var mergeOverrides_1 = require("./mergeOverrides");
 Object.defineProperty(exports, "mergeOverrides", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverrides; } });
+Object.defineProperty(exports, "mergeOverride", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverride; } });
 var useOverrides_1 = require("./useOverrides");
 Object.defineProperty(exports, "useOverrides", { enumerable: true, get: function () { return useOverrides_1.useOverrides; } });
 Object.defineProperty(exports, "getOverrides", { enumerable: true, get: function () { return useOverrides_1.getOverrides; } });

package/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/overrides/mergeOverrides.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeOverrides = void 0;
+exports.mergeOverride = exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var react_is_1 = require("react-is");
 var mergeWith_1 = (0, tslib_1.__importDefault)(require("lodash/mergeWith"));
 var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
 var useCombinedRef_1 = require("../hooks/useCombinedRef");
 var mergeOverride = function (_target, _source) {
-    var target = typeof _target === 'function' ? { component: _target } : _target;
-    var source = typeof _source === 'function' ? { component: _source } : _source;
+    var target = (0, react_is_1.isValidElementType)(_target) ? { component: _target } : _target;
+    var source = (0, react_is_1.isValidElementType)(_source) ? { component: _source } : _source;
     var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source);
     if ((target === null || target === void 0 ? void 0 : target.props) && (source === null || source === void 0 ? void 0 : source.props)) {
         // deep merge
@@ -17,7 +18,7 @@ var mergeOverride = function (_target, _source) {
              * React elements are object. _merge deep merges react elements as well, which is not we usually want.
              * Check tests for more information
              */
-            if ((0, react_1.isValidElement)(b))
+            if ((0, react_1.isValidElement)(b) || (0, react_is_1.isValidElementType)(b))
                 return b;
             return undefined;
         });
@@ -34,6 +35,7 @@ var mergeOverride = function (_target, _source) {
     }
     return merged;
 };
+exports.mergeOverride = mergeOverride;
 var mergeOverrides = function (target, source) {
     if (source === void 0) { source = {}; }
     var allIdentifiers = Object.keys((0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "10.1.0",
-  "description": "A React Component library implementing Sprinklr's Hyperspace design language",
+  "version": "12.14.4",
+  "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
   "scripts": {
@@ -22,23 +22,27 @@
   "license": "ISC",
   "sideEffects": false,
   "dependencies": {
+    "@tanstack/react-virtual": "3.0.0-beta.18",
     "@types/react": "^17.0.39",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
-    "baseui": "~10.9.0",
+    "baseui": "~12.2.0",
     "body-scroll-lock": "3.1.5",
     "classnames": "2.2.6",
     "csstype": "^3.0.2",
     "lodash": "^4.17.15",
     "memoize-one": "~5.1.1",
-    "react-input-mask": "^2.0.4",
+    "react-input-mask": "2.0.4",
     "react-transition-group": "4.4.2",
-    "react-virtual": "^2.1.8",
     "styletron": "~3.0.4",
-    "styletron-engine-atomic": "~1.4.6",
-    "styletron-react": "~5.2.7",
-    "timezone-support": "^2.0.2",
-    "tslib": "^2.4.0"
+    "styletron-engine-atomic": "~1.5.0",
+    "styletron-react": "~6.1.0",
+    "timezone-support": "2.0.2",
+    "tslib": "^2.4.0",
+    "react-is": "^17.0.2",
+    "date-fns": "^2.6.0",
+    "date-fns-tz": "^1.2.2",
+    "react-uid": "^2.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.0",
@@ -60,6 +64,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.149",
+    "@types/react-is": "^17.0.2",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-styletron-display-name": "^1.1.3",
     "core-js": "^3.8.3",
@@ -75,7 +80,7 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": ">=10.0.0 <11.0.0",
+    "@sprinklrjs/spaceweb-themes": "12.14.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -84,7 +89,8 @@
     "preset": "ts-jest",
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.ts",
-      "core-js"
+      "core-js",
+      "<rootDir>/../../internals/jest/setupAfterEnv.js"
     ],
     "testMatch": [
       "**/__tests__/**/*.spec.ts",
@@ -99,4 +105,4 @@
       "^@sprinklrjs/spaceweb-themes/(.*)$": "<rootDir>/../spaceweb-themes/dist/$1"
     }
   }
-}
+}

package/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/payment-card/basewebAdapters.js

@@ -1,14 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
 var context_1 = require("../form-control/context");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("../input/basewebAdapters"));
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
 var overrides_1 = require("../overrides");
+var input_1 = require("baseui/input");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style/");
+var getBasewebPaymentCardSizeMap = function (_size) {
+    switch (_size) {
+        case 'lg':
+            return input_1.SIZE.default;
+        case 'md':
+            return input_1.SIZE.default;
+        case 'sm':
+            return input_1.SIZE.compact;
+        case 'xs':
+            return input_1.SIZE.compact;
+        case 'xxxs':
+            return input_1.SIZE.mini;
+        default:
+            return input_1.SIZE.default;
+    }
+};
 var usePaymentCardBasewebAdapter = function (props) {
-    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, variant = _a.variant, intent = _a.intent;
-    var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
+    var _a, _b;
+    var contextualProps = (0, context_1.useContextualFormProps)(props);
+    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(contextualProps, ['size', 'variant', 'intent']));
+    var theme = (0, style_1.useStyle)().theme;
+    var _size = (_b = (_a = contextualProps.size) !== null && _a !== void 0 ? _a : sharedProps.$size) !== null && _b !== void 0 ? _b : (0, themeHelpers_1.getDefaultSize)(theme);
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -18,7 +41,7 @@ var usePaymentCardBasewebAdapter = function (props) {
             props: sharedProps,
         },
     };
-    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, props.overrides) }));
-    return adaptedProps;
+    var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, contextualProps), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, contextualProps.overrides) }));
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 exports.default = usePaymentCardBasewebAdapter;

package/payment-card/styled-components.js

@@ -1,16 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIconWrapperStyles = void 0;
+var tslib_1 = require("tslib");
 var themeHelpers_1 = require("../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',
+    },
+};
 var getIconWrapperStyles = function (_a, _b) {
     var theme = _a.theme;
     var $size = _b.$size;
-    var styles = {
-        marginLeft: '',
-        marginRight: '',
-    };
-    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'lg');
+    var styles = (0, tslib_1.__assign)({ marginLeft: '', marginRight: '', lineHeight: '', fontSize: '', borderRadius: '' }, SIZES_STYLES_MAP[$size]);
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.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;
 };
 exports.getIconWrapperStyles = getIconWrapperStyles;

package/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/phone-input/country-select-container.js

@@ -12,6 +12,6 @@ var CountrySelectContainer = function (props) {
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CountrySelectContainer, styled_components_1.StyledCountrySelectContainer), 2), CountrySelectComponent = _a[0], countrySelectContainerProps = _a[1];
     var countrySelectProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'FlagContainer']) });
     var dialCodeProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, pick_1.default)(props, ['size', 'value'])), { overrides: (0, pick_1.default)(overrides, ['DialCode']) });
-    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({}, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({ dir: "ltr" }, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
 };
 exports.default = CountrySelectContainer;

package/phone-input/country-select.js

@@ -9,7 +9,6 @@ var select_1 = require("../select");
 var list_1 = require("../list");
 var typography_1 = require("../typography");
 var flag_container_1 = (0, tslib_1.__importDefault)(require("./flag-container"));
-var virtualized_country_select_dropdown_1 = (0, tslib_1.__importDefault)(require("./virtualized-country-select-dropdown"));
 var locale_1 = require("../locale");
 var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
@@ -19,7 +18,7 @@ var SelectListItem = React.forwardRef(function (_a, ref) {
     return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, (0, tslib_1.__assign)({}, rest, { startEnhancer: (0, utils_1.iso2FlagEmoji)(id), ref: ref }, { children: [dialCode, (0, jsx_runtime_1.jsxs)(typography_1.Typography, (0, tslib_1.__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 = (0, locale_1.useLocale)();
     var overlayContentContainerRef = (0, react_1.useRef)();
     var mergedOverrides = (0, react_1.useMemo)(function () {
@@ -28,7 +27,6 @@ var CountrySelect = function (props) {
                 props: {
                     overrides: {
                         Menu: {
-                            component: virtualized_country_select_dropdown_1.default,
                             props: {
                                 'data-testid': 'country-select-menu',
                                 parentRef: overlayContentContainerRef,
@@ -70,7 +68,7 @@ var CountrySelect = function (props) {
                 },
             },
         }, overrides);
-    }, [mapIsoToLabel, maxDropdownHeight, overrides, size]);
+    }, [mapIsoToLabel, overrides, size]);
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.CountrySelect, select_1.Select), 2), Select = _a[0], selectProps = _a[1];
     var flagContainerProps = {
         size: size,
@@ -80,7 +78,7 @@ var CountrySelect = function (props) {
     };
     return (
     // @ts-ignore
-    (0, jsx_runtime_1.jsx)(Select, (0, tslib_1.__assign)({ type: "overlay", options: constants_1.COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
+    (0, jsx_runtime_1.jsx)(Select, (0, tslib_1.__assign)({ type: "overlay", options: countries !== null && countries !== void 0 ? countries : constants_1.COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {
             if (onChange) {
                 onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), { country: params.option }));
             }
@@ -88,6 +86,6 @@ var CountrySelect = function (props) {
             if (inputRef && inputRef.current) {
                 inputRef.current.focus();
             }
-        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: utils_1.countrySelectFilterOptions }, selectProps, { children: (0, jsx_runtime_1.jsx)(flag_container_1.default, (0, tslib_1.__assign)({}, flagContainerProps), void 0) }), void 0));
+        }, disabled: disabled, placeholder: locale.phoneInput.countrySelectPlaceholder, maxDropdownHeight: maxDropdownHeight, overlayWidth: maxDropdownWidth, filterOptions: utils_1.countrySelectFilterOptions, virtual: true }, selectProps, { children: (0, jsx_runtime_1.jsx)(flag_container_1.default, (0, tslib_1.__assign)({}, flagContainerProps), void 0) }), void 0));
 };
 exports.default = CountrySelect;

package/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/phone-input/default-props.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValue = void 0;
 var constants_1 = require("./constants");
 var defaultProps = {
     clearable: false,
     focusLock: false,
     disabled: false,
-    intent: 'default',
     maxDropdownHeight: constants_1.DEFAULT_MAX_DROPDOWN_HEIGHT,
     maxDropdownWidth: constants_1.DEFAULT_MAX_DROPDOWN_WIDTH,
     name: undefined,
@@ -13,15 +13,14 @@ var defaultProps = {
     overrides: {},
     positive: false,
     required: false,
-    size: 'lg',
     variant: 'default',
-    value: {
-        country: {
-            label: 'United States',
-            id: 'US',
-            dialCode: '+1',
-        },
-        phoneNumber: '',
+};
+exports.defaultValue = {
+    country: {
+        label: 'United States',
+        id: 'US',
+        dialCode: '+1',
     },
+    phoneNumber: '',
 };
 exports.default = defaultProps;

package/phone-input/flag-container.js

@@ -15,6 +15,6 @@ var FlagContainer = (0, react_1.forwardRef)(function (props, ref) {
     var locale = (0, locale_1.useLocale)();
     var sharedProps = (0, helpers_1.add$props)({ iso: iso, inputSize: inputSize });
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.FlagContainer, button_1.Button), 2), Button = _a[0], buttonProps = _a[1];
-    return ((0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xs", type: "button", className: [styled_components_1.getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: (0, utils_1.iso2FlagEmoji)(iso) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xxxs", type: "button", className: [styled_components_1.getFlagContainerStyles], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: (0, utils_1.iso2FlagEmoji)(iso) }), void 0));
 });
 exports.default = FlagContainer;

package/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/phone-input/phone-input.js

@@ -11,22 +11,30 @@ var utils_1 = require("./utils");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var context_1 = require("../form-control/context");
+var style_1 = require("../style");
+var themeHelpers_1 = require("../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 = (0, tslib_1.__rest)(props, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value"]);
+    var _a;
+    var _b = (0, context_1.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 = (0, tslib_1.__rest)(_b, ["size", "variant", "intent", "disabled", "overrides", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "onInputChange", "onChange", "value", "countries"]);
+    var _c = (0, style_1.useStyle)(), isRTL = _c.isRTL, theme = _c.theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var locale = (0, locale_1.useLocale)();
     var inputRef = (0, react_1.useRef)(null);
+    var value = propValue !== null && propValue !== void 0 ? propValue : (0, utils_1.getDefaultValue)(countries);
     var mergedOverrides = (0, overrides_1.mergeOverrides)({
         Input: {
             props: {
-                overrides: {
-                    Root: {
-                        style: styled_components_1.getRootStyles,
-                        props: { $disabled: disabled },
-                    },
-                    Input: {
-                        style: styled_components_1.getInputStyles,
+                overrides: (_a = {
+                        Root: {
+                            style: styled_components_1.getRootStyles,
+                            props: { $disabled: disabled },
+                        },
+                        Input: {
+                            style: styled_components_1.getInputStyles,
+                        }
                     },
-                    Before: {
+                    _a[isRTL ? 'After' : 'Before'] = {
                         component: country_select_container_1.default,
                         props: {
                             size: size,
@@ -37,14 +45,15 @@ var PhoneInput = function (props) {
                             mapIsoToLabel: mapIsoToLabel,
                             maxDropdownHeight: maxDropdownHeight,
                             maxDropdownWidth: maxDropdownWidth,
+                            countries: countries,
                             overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'CountrySelectContainer', 'FlagContainer', 'DialCode']),
                         },
                     },
-                },
+                    _a),
             },
         },
     }, overrides);
-    var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _a[0], inputProps = _a[1];
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _d[0], inputProps = _d[1];
     return ((0, jsx_runtime_1.jsx)(Input, (0, tslib_1.__assign)({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = (0, utils_1.sanitize)(e.currentTarget.value);
             if (onChange) {

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

@@ -4,10 +4,11 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
 var constants_1 = require("./constants");
+var utils_1 = require("./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 ? default_props_1.default.value : _a, intent = props.intent, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, mapIsoToLabel = props.mapIsoToLabel, name = props.name, _b = props.onChange, onChange = _b === void 0 ? default_props_1.default.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 = (0, tslib_1.__read)((0, react_1.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 ? default_props_1.default.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 = (0, tslib_1.__read)((0, react_1.useState)(initialState !== null && initialState !== void 0 ? initialState : (0, utils_1.getDefaultValue)(countries)), 2), state = _c[0], setState = _c[1];
     var internalSetState = function (type, nextState) {
         setState(stateReducer(type, nextState, state));
     };
@@ -16,6 +17,6 @@ var StatefulPhoneInputContainer = function (props) {
         onChange({ country: country, phoneNumber: phoneNumber });
         internalSetState(constants_1.STATE_CHANGE_TYPE.onChange, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, state), { country: country, phoneNumber: phoneNumber }));
     };
-    return props.children((0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { '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((0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { '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 }));
 };
 exports.default = StatefulPhoneInputContainer;

package/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/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/phone-input/styled-components.js

@@ -3,22 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledDialCode = exports.StyledCountrySelectContainer = exports.getInputStyles = exports.getRootStyles = exports.getFlagContainerStyles = void 0;
 var tslib_1 = require("tslib");
 var style_1 = require("../style");
+var themeHelpers_1 = require("../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; };
 exports.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 ((0, tslib_1.__assign)({ marginLeft: $inputSize === 'sm' ? px2rem(6) : px2rem(10) }, ($isFocusVisible && {
+        var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $inputSize, (0, themeHelpers_1.getDefaultSize)(theme));
+        return (0, tslib_1.__assign)({ marginLeft: inputSizeTheme.paddingX, marginRight: '0 /* @noflip */' }, ($isFocusVisible && {
             ':focus': {
                 outline: "1px solid ".concat(theme.spr.focus01),
             },
-        })));
+        }));
     },
 ];
 var getRootStyles = function (_a, _b) {
@@ -26,14 +30,25 @@ var getRootStyles = function (_a, _b) {
     return ($disabled ? 'cursor-not-allowed' : undefined);
 };
 exports.getRootStyles = getRootStyles;
-exports.getInputStyles = 'pl-1';
+var getInputStyles = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $size = _b.$size;
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
+    return {
+        paddingLeft: "".concat(px2rem(4), " /* @noflip */"),
+        paddingRight: "".concat(inputSizeTheme.paddingX, " /* @noflip */"),
+    };
+};
+exports.getInputStyles = getInputStyles;
 exports.StyledCountrySelectContainer = (0, style_1.styled)('div', 'flex items-center');
-exports.StyledDialCode = (0, style_1.styled)('div', 'flex items-center ml-1 font-medium', function (_a, _b) {
+exports.StyledDialCode = (0, style_1.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/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/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;
+};