@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

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,6 +1,6 @@
 "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");
@@ -35,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/overrides/useOverrides.js

@@ -2,7 +2,7 @@
 /* eslint @typescript-eslint/no-explicit-any: 0 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverrides = exports.getOverrides = void 0;
-var overrides_1 = require("baseui/helpers/overrides");
+var overrides_1 = require("../baseui/helpers/overrides");
 var react_1 = require("react");
 var getOverrides = function (override, defaultComponent) {
     if (override === void 0) { override = {}; }

package/package.json

@@ -1,45 +1,60 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "11.0.0",
-  "description": "A React Component library implementing Sprinklr's Hyperspace design language",
+  "version": "12.33.2-rc.1",
+  "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
   "scripts": {
     "build:package-json": "node ./scripts/build-package-json.js",
     "build:icons": "node ./scripts/build-icons.js",
-    "build:cjs": "tsc --module commonjs --outDir ./dist",
-    "build:esm": "tsc --module es2015 --outDir ./dist/esm",
+    "build:cjs": "yarn run tsc --module commonjs --outDir ./dist",
+    "build:esm": "yarn run tsc --module es2015 --outDir ./dist/esm",
     "build:assets": "node scripts/build-assets.js",
     "build:themes": "node scripts/build-themes.js",
     "build": "yarn clean && yarn build:icons && yarn build:cjs && yarn build:esm && yarn build:assets && yarn build:package-json",
     "build:watch": "yarn build:cjs --watch",
     "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
+    "storybook": "start-storybook -p 6006 --no-dll",
+    "build-storybook": "build-storybook --no-dll",
     "test": "jest ./src",
     "test:watch": "jest --watch ./src",
-    "test:coverage": "jest ./src --coverage"
+    "test:coverage": "jest ./src --coverage",
+    "tsc": "../../scripts/tsbuild.sh"
   },
   "author": "",
   "license": "ISC",
   "sideEffects": false,
   "dependencies": {
+    "@date-io/date-fns": "^2.6.2",
     "@tanstack/react-virtual": "3.0.0-beta.18",
-    "@types/react": "^17.0.39",
+    "@types/react": ">=17.0.39 <19.0.0",
+    "@types/react-color": "^3.0.6",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
-    "baseui": "~12.2.0",
+    "any-date-parser": "^1.5.4",
     "body-scroll-lock": "3.1.5",
+    "card-validator": "^6.2.0",
     "classnames": "2.2.6",
     "csstype": "^3.0.2",
+    "date-fns": "^2.6.0",
+    "date-fns-tz": "^1.2.2",
     "lodash": "^4.17.15",
     "memoize-one": "~5.1.1",
+    "polished": "^3.2.0",
+    "popper.js": "^1.16.0",
+    "react-color": "^2.19.3",
+    "react-focus-lock": "^2.7.1",
     "react-input-mask": "2.0.4",
+    "react-is": "^17.0.2",
+    "react-range": "^1.8.0",
     "react-transition-group": "4.4.2",
+    "react-uid": "^2.3.3",
+    "rtl-css-js": "^1.16.1",
     "styletron": "~3.0.4",
     "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"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.0",
@@ -55,8 +70,12 @@
     "@babel/traverse": "^7.7.0",
     "@babel/types": "^7.7.1",
     "@sheerun/mutationobserver-shim": "^0.3.3",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.24",
@@ -77,9 +96,9 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "11.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@sprinklrjs/spaceweb-themes": "12.33.2-rc.1",
+    "react": ">=17.0.2 <19.0.0",
+    "react-dom": ">=17.0.2 <19.0.0"
   },
   "jest": {
     "verbose": true,
@@ -102,4 +121,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 { 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

@@ -7,9 +7,31 @@ var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("../input/basewebAd
 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, _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' },
@@ -20,6 +42,6 @@ var usePaymentCardBasewebAdapter = function (props) {
         },
     };
     var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, contextualProps), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, contextualProps.overrides) }));
-    return adaptedProps;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 exports.default = usePaymentCardBasewebAdapter;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulPaymentCard = exports.PaymentCard = exports.valid = exports.StatefulContainer = void 0;
 var tslib_1 = require("tslib");
-var payment_card_1 = require("baseui/payment-card");
+var payment_card_1 = require("../baseui/payment-card");
 Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return payment_card_1.StatefulContainer; } });
 Object.defineProperty(exports, "valid", { enumerable: true, get: function () { return payment_card_1.valid; } });
 var paymentCard_1 = require("./paymentCard");

package/payment-card/paymentCard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulPaymentCard = exports.PaymentCard = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var payment_card_1 = require("baseui/payment-card");
+var payment_card_1 = require("../baseui/payment-card");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
 var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus"));
 // @ts-ignore

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, 'md');
+    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,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/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

@@ -18,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 () {
@@ -68,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,
@@ -78,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 }));
             }

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValue = void 0;
 var constants_1 = require("./constants");
 var defaultProps = {
     clearable: false,
@@ -13,13 +14,13 @@ var defaultProps = {
     positive: false,
     required: false,
     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

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

@@ -12,22 +12,29 @@ 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 _a = (0, context_1.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 = (0, tslib_1.__rest)(_a, ["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,
@@ -38,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 _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _c[0], inputProps = _c[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

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

@@ -3,37 +3,44 @@ 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 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; };
+var themeHelpers_1 = require("../helpers/themeHelpers");
 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) {
-    var $disabled = _b.$disabled;
+var getRootStyles = function (_, _a) {
+    var $disabled = _a.$disabled;
     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) {
-    var px2rem = _a.px2rem;
+exports.StyledDialCode = (0, style_1.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 = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
     var styles = {
-        fontSize: sizeTheme.fontSize,
+        fontSize: inputSizeTheme.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;
 };
@@ -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/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;
+};