@mvf/external-components 3.31.1 → 3.32.1-dev.2

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.js

@@ -0,0 +1,114 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var react_1 = __importStar(require("react"));
+// Global flag to track if CSS has been loaded
+var flagIconsCssLoaded = false;
+// Function to lazy load the flag-icons CSS
+var loadFlagIconsCSS = function () {
+    return new Promise(function (resolve) {
+        // Check if already loaded
+        if (flagIconsCssLoaded) {
+            resolve();
+            return;
+        }
+        // Check if link already exists in DOM
+        var existingLink = document.querySelector('link[href*="flag-icons"]');
+        if (existingLink) {
+            flagIconsCssLoaded = true;
+            resolve();
+            return;
+        }
+        // Create and append the CSS link
+        var link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href =
+            'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/css/flag-icons.min.css';
+        link.onload = function () {
+            flagIconsCssLoaded = true;
+            resolve();
+        };
+        link.onerror = function () {
+            console.warn('Failed to load flag-icons CSS, falling back to text representation');
+            flagIconsCssLoaded = true; // Prevent retries
+            resolve();
+        };
+        document.head.appendChild(link);
+    });
+};
+var FlagIcon = react_1.default.memo(function (_a) {
+    var countryCode = _a.countryCode, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var _c = (0, react_1.useState)(flagIconsCssLoaded), cssLoaded = _c[0], setCssLoaded = _c[1];
+    (0, react_1.useEffect)(function () {
+        var mounted = true;
+        if (!cssLoaded && !flagIconsCssLoaded) {
+            void loadFlagIconsCSS().then(function () {
+                if (mounted) {
+                    setCssLoaded(true);
+                }
+            });
+        }
+        else if (flagIconsCssLoaded && !cssLoaded) {
+            // If CSS was loaded globally but state doesn't reflect it
+            setCssLoaded(true);
+        }
+        return function () {
+            mounted = false;
+        };
+    }, [cssLoaded]);
+    // Convert country code to lowercase for flag-icons
+    var flagClass = "fi fi-".concat(countryCode.toLowerCase());
+    // Show fallback while CSS is loading
+    if (!cssLoaded) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: className, style: __assign({ fontSize: '16px', lineHeight: 1, display: 'inline-block', width: '20px', height: '15px', backgroundColor: '#f0f0f0', border: '1px solid #ccc', borderRadius: '2px', textAlign: 'center' }, style), "aria-label": "".concat(countryCode, " flag (loading)"), title: "Loading flag..." }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { className: "".concat(flagClass, " ").concat(className), style: __assign({ fontSize: '16px', lineHeight: 1, display: 'inline-block', width: '20px', height: '15px' }, style), "aria-label": "".concat(countryCode, " flag") }));
+});
+FlagIcon.displayName = 'FlagIcon';
+exports.default = FlagIcon;
+//# sourceMappingURL=FlagIcon.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagIcon.js","sourceRoot":"","sources":["../../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.tsx"],"names":[],"mappings":"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"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.d.ts

@@ -0,0 +1,12 @@
+export interface UseCountrySelectorOptions {
+    enableCountryChange?: boolean;
+    disabled?: boolean;
+}
+export interface UseCountrySelectorReturn {
+    isCountryMenuOpen: boolean;
+    openCountryMenu: () => void;
+    closeCountryMenu: () => void;
+    handleCountrySelectClick: () => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare const useCountrySelector: ({ enableCountryChange, disabled, }?: UseCountrySelectorOptions) => UseCountrySelectorReturn;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCountrySelector = void 0;
+var react_1 = require("react");
+var useCountrySelector = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.enableCountryChange, enableCountryChange = _c === void 0 ? true : _c, _d = _b.disabled, disabled = _d === void 0 ? false : _d;
+    var _e = (0, react_1.useState)(false), isCountryMenuOpen = _e[0], setIsCountryMenuOpen = _e[1];
+    var openCountryMenu = (0, react_1.useCallback)(function () {
+        if (enableCountryChange && !disabled) {
+            setIsCountryMenuOpen(true);
+        }
+    }, [enableCountryChange, disabled]);
+    var closeCountryMenu = (0, react_1.useCallback)(function () {
+        setIsCountryMenuOpen(false);
+    }, []);
+    var handleCountrySelectClick = (0, react_1.useCallback)(function () {
+        openCountryMenu();
+    }, [openCountryMenu]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        if (enableCountryChange &&
+            !disabled &&
+            (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            openCountryMenu();
+        }
+    }, [enableCountryChange, disabled, openCountryMenu]);
+    return {
+        isCountryMenuOpen: isCountryMenuOpen,
+        openCountryMenu: openCountryMenu,
+        closeCountryMenu: closeCountryMenu,
+        handleCountrySelectClick: handleCountrySelectClick,
+        handleKeyDown: handleKeyDown,
+    };
+};
+exports.useCountrySelector = useCountrySelector;
+//# sourceMappingURL=useCountrySelector.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCountrySelector.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.ts"],"names":[],"mappings":";;;AAAA,+BAA8C;AAevC,IAAM,kBAAkB,GAAG,UAAC,EAGF;QAHE,qBAGJ,EAAE,KAAA,EAF/B,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAC1B,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAEV,IAAA,KAA4C,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1D,iBAAiB,QAAA,EAAE,oBAAoB,QAAmB,CAAC;IAElE,IAAM,eAAe,GAAG,IAAA,mBAAW,EAAC;QAClC,IAAI,mBAAmB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;QACnC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,wBAAwB,GAAG,IAAA,mBAAW,EAAC;QAC3C,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,UAAC,CAAsB;QACrB,IACE,mBAAmB;YACnB,CAAC,QAAQ;YACT,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EACpC,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,mBAAmB,EAAE,QAAQ,EAAE,eAAe,CAAC,CACjD,CAAC;IAEF,OAAO;QACL,iBAAiB,mBAAA;QACjB,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,wBAAwB,0BAAA;QACxB,aAAa,eAAA;KACd,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,kBAAkB,sBAyC7B"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.d.ts

@@ -0,0 +1,39 @@
+import { CountryData } from '../utils/countryData';
+import { PhoneValidationResult } from '../utils/phoneValidation';
+export interface UsePhoneNumberOptions {
+    initialCountry?: string;
+    initialValue?: string;
+    enableCountryChange?: boolean;
+    preferredCountries?: string[];
+    onPhoneNumberChange?: (params: {
+        phoneNumber: string;
+        e164Number: string;
+    }) => void;
+    onCountryChange?: (params: {
+        selectedCountry: CountryData;
+        previousCountry: CountryData;
+    }) => void;
+    onValidationChange?: (params: {
+        isValid: boolean;
+        validationResult: PhoneValidationResult;
+        phoneNumber: string;
+    }) => void;
+}
+export interface UsePhoneNumberReturn {
+    phoneNumber: string;
+    selectedCountry: CountryData;
+    validationResult: PhoneValidationResult | null;
+    countries: CountryData[];
+    setPhoneNumber: (value: string) => void;
+    setSelectedCountry: (country: CountryData) => void;
+    autoDetectedCountryChange: {
+        newCountry: CountryData;
+        previousCountry: CountryData;
+    } | null;
+    clearAutoDetectedCountryChange: () => void;
+    isValid: boolean;
+    errorMessage?: string;
+    formattedE164: string;
+    phoneNumberType?: string;
+}
+export declare const usePhoneNumber: ({ initialCountry, initialValue, enableCountryChange, preferredCountries, }?: Omit<UsePhoneNumberOptions, "onPhoneNumberChange" | "onCountryChange" | "onValidationChange">) => UsePhoneNumberReturn;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePhoneNumber = void 0;
+var react_1 = require("react");
+var google_libphonenumber_1 = require("google-libphonenumber");
+var countryData_1 = require("../utils/countryData");
+var phoneValidation_1 = require("../utils/phoneValidation");
+var usePhoneNumber = function (_a) {
+    var _b, _c;
+    var _d = _a === void 0 ? {} : _a, initialCountry = _d.initialCountry, _e = _d.initialValue, initialValue = _e === void 0 ? '' : _e, _f = _d.enableCountryChange, enableCountryChange = _f === void 0 ? true : _f, preferredCountries = _d.preferredCountries;
+    // Memoize countries data to prevent unnecessary recalculations
+    var countries = (0, react_1.useMemo)(function () { return (0, countryData_1.getCountryData)(preferredCountries); }, [preferredCountries]);
+    // Initialize selected country
+    var _g = (0, react_1.useState)(function () {
+        if (initialCountry) {
+            var initialCountryData = countries.find(function (c) { return c.code === initialCountry; });
+            if (initialCountryData)
+                return initialCountryData;
+        }
+        return countries[0]; // Fallback to first country
+    }), selectedCountry = _g[0], setSelectedCountryState = _g[1];
+    var _h = (0, react_1.useState)(''), phoneNumber = _h[0], setPhoneNumberState = _h[1];
+    var _j = (0, react_1.useState)(null), validationResult = _j[0], setValidationResult = _j[1];
+    var _k = (0, react_1.useState)(null), autoDetectedCountryChange = _k[0], setAutoDetectedCountryChange = _k[1];
+    var previousValueRef = (0, react_1.useRef)('');
+    // Process phone number with country-specific formatting and validation
+    var processPhoneNumber = (0, react_1.useCallback)(function (phoneValue, countryCode, useNationalFormat) {
+        if (useNationalFormat === void 0) { useNationalFormat = true; }
+        var validation = (0, phoneValidation_1.validatePhoneNumber)(phoneValue, countryCode);
+        if (useNationalFormat && validation.nationalFormatted) {
+            return { formattedNumber: validation.nationalFormatted, validation: validation };
+        }
+        var formattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneValue, countryCode, true);
+        return { formattedNumber: formattedNumber, validation: validation };
+    }, []);
+    // Update country if different from current
+    var updateCountryIfDifferent = (0, react_1.useCallback)(function (detectedCountryCode) {
+        var detectedCountry = countries.find(function (c) { return c.code === detectedCountryCode; });
+        if (detectedCountry && detectedCountry.code !== selectedCountry.code) {
+            return detectedCountry;
+        }
+        return null;
+    }, [countries, selectedCountry.code]);
+    // Handle external value changes (controlled component behavior)
+    (0, react_1.useEffect)(function () {
+        if (previousValueRef.current === initialValue)
+            return;
+        previousValueRef.current = initialValue || '';
+        if (!initialValue) {
+            setPhoneNumberState('');
+            setValidationResult(null);
+            return;
+        }
+        // Try to extract country code from the input value
+        var detectedCountryCode = (0, phoneValidation_1.extractCountryCodeFromNumber)(initialValue, selectedCountry.code);
+        if (detectedCountryCode && enableCountryChange) {
+            // Update country if different and country change is enabled
+            var newCountry = updateCountryIfDifferent(detectedCountryCode);
+            if (newCountry) {
+                var previousCountry = selectedCountry;
+                setSelectedCountryState(newCountry);
+                // Trigger auto-detected country change notification
+                setAutoDetectedCountryChange({
+                    newCountry: newCountry,
+                    previousCountry: previousCountry,
+                });
+            }
+            // Process with detected country
+            var _a = processPhoneNumber(initialValue, detectedCountryCode, true), formattedNumber = _a.formattedNumber, validation = _a.validation;
+            setPhoneNumberState(formattedNumber);
+            setValidationResult(validation);
+        }
+        else {
+            // Use current selected country
+            var _b = processPhoneNumber(initialValue, selectedCountry.code, false), formattedNumber = _b.formattedNumber, validation = _b.validation;
+            setPhoneNumberState(formattedNumber);
+            setValidationResult(validation);
+        }
+    }, [
+        initialValue,
+        selectedCountry.code,
+        enableCountryChange,
+        processPhoneNumber,
+        updateCountryIfDifferent,
+    ]);
+    // Handle phone number changes
+    var setPhoneNumber = (0, react_1.useCallback)(function (newPhoneNumber) {
+        // Format as you type using the selected country
+        var formattedNumber = (0, phoneValidation_1.formatAsYouType)(newPhoneNumber, selectedCountry.code, enableCountryChange);
+        setPhoneNumberState(formattedNumber);
+        // Validate based on enableCountryChange setting
+        var validation;
+        if (enableCountryChange) {
+            // Auto-detection enabled: validate with auto-detection first, then fallback to selected country
+            validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber);
+            if (!validation.countryCode || !validation.isValid) {
+                validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber, selectedCountry.code);
+            }
+            // Auto-update country if detected and different from current
+            if (validation.countryCode &&
+                validation.countryCode !== selectedCountry.code) {
+                var detectedCountry = countries.find(function (c) { return c.code === validation.countryCode; });
+                if (detectedCountry) {
+                    var previousCountry = selectedCountry;
+                    setSelectedCountryState(detectedCountry);
+                    // Trigger auto-detected country change notification
+                    setAutoDetectedCountryChange({
+                        newCountry: detectedCountry,
+                        previousCountry: previousCountry,
+                    });
+                }
+            }
+        }
+        else {
+            // Auto-detection disabled: only validate against the selected country
+            // If input starts with +, treat it as invalid for the selected country
+            // unless it matches the selected country's international prefix
+            var phoneUtil = google_libphonenumber_1.PhoneNumberUtil.getInstance();
+            var countryCallingCode = phoneUtil.getCountryCodeForRegion(selectedCountry.code);
+            var expectedPrefix = "+".concat(countryCallingCode);
+            if (formattedNumber.startsWith('+') &&
+                !formattedNumber.startsWith(expectedPrefix)) {
+                // International number that doesn't match the selected country
+                validation = {
+                    isValid: false,
+                    formattedNumber: formattedNumber,
+                    countryCode: selectedCountry.code,
+                    nationalNumber: formattedNumber,
+                    nationalFormatted: formattedNumber,
+                    errorMessage: 'Please enter a valid phone number for the selected country',
+                };
+            }
+            else {
+                // National number or correct international prefix - validate against selected country
+                validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber, selectedCountry.code);
+            }
+        }
+        setValidationResult(validation);
+    }, [selectedCountry, countries, enableCountryChange]);
+    // Handle country changes
+    var setSelectedCountry = (0, react_1.useCallback)(function (country) {
+        setSelectedCountryState(country);
+        // Reformat existing phone number with new country's rules
+        if (phoneNumber) {
+            var reformattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneNumber, country.code, true); // Allow international formatting when manually changing country
+            setPhoneNumberState(reformattedNumber);
+            // Re-validate with new country
+            var validation = (0, phoneValidation_1.validatePhoneNumber)(reformattedNumber, country.code);
+            setValidationResult(validation);
+        }
+        else {
+            setValidationResult(null);
+        }
+    }, [selectedCountry, phoneNumber]);
+    // Clear auto-detected country change
+    var clearAutoDetectedCountryChange = (0, react_1.useCallback)(function () {
+        setAutoDetectedCountryChange(null);
+    }, []);
+    return {
+        // State
+        phoneNumber: phoneNumber,
+        selectedCountry: selectedCountry,
+        validationResult: validationResult,
+        countries: countries,
+        // Actions
+        setPhoneNumber: setPhoneNumber,
+        setSelectedCountry: setSelectedCountry,
+        // Auto-detection
+        autoDetectedCountryChange: autoDetectedCountryChange,
+        clearAutoDetectedCountryChange: clearAutoDetectedCountryChange,
+        // Computed
+        isValid: (_b = validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) !== null && _b !== void 0 ? _b : false,
+        errorMessage: validationResult === null || validationResult === void 0 ? void 0 : validationResult.errorMessage,
+        formattedE164: (_c = validationResult === null || validationResult === void 0 ? void 0 : validationResult.formattedNumber) !== null && _c !== void 0 ? _c : '',
+        phoneNumberType: (validationResult === null || validationResult === void 0 ? void 0 : validationResult.phoneNumberType) !== undefined
+            ? String(validationResult.phoneNumberType)
+            : undefined,
+    };
+};
+exports.usePhoneNumber = usePhoneNumber;
+//# sourceMappingURL=usePhoneNumber.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePhoneNumber.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.ts"],"names":[],"mappings":"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"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type StoryType = React.FunctionComponent<{
+    disabled: boolean;
+    errorMessage?: string;
+    isAnswered: boolean;
+    label: string;
+    placeholder?: string;
+    type: 'tel' | 'text';
+    value: string;
+    initialCountry?: string;
+    experimentName: string;
+    parentContainerMaxWidth: number;
+    isSafari: boolean;
+    isAutoFilledActive: boolean;
+    enableCountryChange: boolean;
+    enableCountrySearch: boolean;
+    useModalForCountrySelection: boolean;
+    strictMode?: boolean;
+    countrySearchPlaceholder?: string;
+    countryModalHeading?: string;
+    preferredCountries?: string[];
+}>;
+declare const PhoneNumberTextFieldStory: StoryType;
+export default PhoneNumberTextFieldStory;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var addon_actions_1 = require("@storybook/addon-actions");
+var PhoneNumberTextField_1 = __importDefault(require("../../PhoneNumberTextField"));
+var handlePhoneNumberChange = function (_a) {
+    var id = _a.id, phoneNumber = _a.phoneNumber, e164Number = _a.e164Number;
+    (0, addon_actions_1.action)('Phone Number Change')({ id: id, phoneNumber: phoneNumber, e164Number: e164Number });
+};
+var handleCountryChange = function (_a) {
+    var id = _a.id, selectedCountry = _a.selectedCountry, previousCountry = _a.previousCountry;
+    (0, addon_actions_1.action)('Country Change')({
+        id: id,
+        selectedCountry: selectedCountry.name,
+        previousCountry: previousCountry.name,
+        selectedCountryCode: selectedCountry.code,
+        previousCountryCode: previousCountry.code,
+    });
+};
+var handleValidationChange = function (_a) {
+    var id = _a.id, isValid = _a.isValid, validationResult = _a.validationResult, phoneNumber = _a.phoneNumber;
+    (0, addon_actions_1.action)('Validation Change')({
+        id: id,
+        isValid: isValid,
+        phoneNumber: phoneNumber,
+        errorMessage: (validationResult === null || validationResult === void 0 ? void 0 : validationResult.errorMessage) || 'No error message',
+    });
+};
+var handleFormattedValueChange = function (_a) {
+    var id = _a.id, formattedValue = _a.formattedValue, e164Value = _a.e164Value;
+    (0, addon_actions_1.action)('Formatted Value Change')({ id: id, formattedValue: formattedValue, e164Value: e164Value });
+};
+var PhoneNumberTextFieldStory = function (_a) {
+    var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, value = _a.value, initialCountry = _a.initialCountry, experimentName = _a.experimentName, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, strictMode = _a.strictMode, countrySearchPlaceholder = _a.countrySearchPlaceholder, countryModalHeading = _a.countryModalHeading, preferredCountries = _a.preferredCountries;
+    return ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: parentContainerMaxWidth }, children: (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onPhoneNumberChange: handlePhoneNumberChange, onCountryChange: handleCountryChange, onValidationChange: handleValidationChange, onFormattedValueChange: handleFormattedValueChange, type: type, id: "id", isAnswered: isAnswered, label: label, placeholder: placeholder, value: value, initialCountry: initialCountry, experimentName: experimentName, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection, strictMode: strictMode, onBlur: function () { return (0, addon_actions_1.action)('Blur')(); }, onClick: function () { return (0, addon_actions_1.action)('Click')(); }, countrySearchPlaceholder: countrySearchPlaceholder, countryModalHeading: countryModalHeading, preferredCountries: preferredCountries }) }));
+};
+exports.default = PhoneNumberTextFieldStory;
+//# sourceMappingURL=PhoneNumberTextFieldStory.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberTextFieldStory.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.tsx"],"names":[],"mappings":";;;;;;AAAA,0DAAkD;AAQlD,oFAA8D;AAwB9D,IAAM,uBAAuB,GAAG,UAAC,EAIN;QAHzB,EAAE,QAAA,EACF,WAAW,iBAAA,EACX,UAAU,gBAAA;IAEV,IAAA,sBAAM,EAAC,qBAAqB,CAAC,CAAC,EAAE,EAAE,IAAA,EAAE,WAAW,aAAA,EAAE,UAAU,YAAA,EAAE,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,IAAM,mBAAmB,GAAG,UAAC,EAIN;QAHrB,EAAE,QAAA,EACF,eAAe,qBAAA,EACf,eAAe,qBAAA;IAEf,IAAA,sBAAM,EAAC,gBAAgB,CAAC,CAAC;QACvB,EAAE,IAAA;QACF,eAAe,EAAE,eAAe,CAAC,IAAI;QACrC,eAAe,EAAE,eAAe,CAAC,IAAI;QACrC,mBAAmB,EAAE,eAAe,CAAC,IAAI;QACzC,mBAAmB,EAAE,eAAe,CAAC,IAAI;KAC1C,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,IAAM,sBAAsB,GAAG,UAAC,EAKN;QAJxB,EAAE,QAAA,EACF,OAAO,aAAA,EACP,gBAAgB,sBAAA,EAChB,WAAW,iBAAA;IAEX,IAAA,sBAAM,EAAC,mBAAmB,CAAC,CAAC;QAC1B,EAAE,IAAA;QACF,OAAO,SAAA;QACP,WAAW,aAAA;QACX,YAAY,EAAE,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY,KAAI,kBAAkB;KACnE,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,EAIN;QAH5B,EAAE,QAAA,EACF,cAAc,oBAAA,EACd,SAAS,eAAA;IAET,IAAA,sBAAM,EAAC,wBAAwB,CAAC,CAAC,EAAE,EAAE,IAAA,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,IAAM,yBAAyB,GAAc,UAAC,EAoB7C;QAnBC,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,uBAAuB,6BAAA,EACvB,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,mBAAmB,yBAAA,EACnB,mBAAmB,yBAAA,EACnB,2BAA2B,iCAAA,EAC3B,UAAU,gBAAA,EACV,wBAAwB,8BAAA,EACxB,mBAAmB,yBAAA,EACnB,kBAAkB,wBAAA;IAElB,OAAO,CACL,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,YAC/C,uBAAC,8BAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,uBAAuB,EAC5C,eAAe,EAAE,mBAAmB,EACpC,kBAAkB,EAAE,sBAAsB,EAC1C,sBAAsB,EAAE,0BAA0B,EAClD,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,IAAI,EACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,mBAAmB,EACxC,2BAA2B,EAAE,2BAA2B,EACxD,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,cAAM,OAAA,IAAA,sBAAM,EAAC,MAAM,CAAC,EAAE,EAAhB,CAAgB,EAC9B,OAAO,EAAE,cAAM,OAAA,IAAA,sBAAM,EAAC,OAAO,CAAC,EAAE,EAAjB,CAAiB,EAChC,wBAAwB,EAAE,wBAAwB,EAClD,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,GACtC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,yBAAyB,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@emotion/react';
+interface IMakeFormControlPhoneNumberStylingProps {
+    isAnswered: boolean;
+    isAutoFilledActive: boolean;
+    isSafari: boolean;
+    hasError?: boolean;
+    theme: Theme;
+}
+declare const makeFormControlPhoneNumberStyling: ({ isAnswered, isAutoFilledActive, isSafari, hasError, theme, }: IMakeFormControlPhoneNumberStylingProps) => import("@emotion/react").SerializedStyles;
+export default makeFormControlPhoneNumberStyling;

package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var makeFormControlPhoneNumberStyling = function (_a) {
+    var _b, _c;
+    var isAnswered = _a.isAnswered, isAutoFilledActive = _a.isAutoFilledActive, isSafari = _a.isSafari, hasError = _a.hasError, theme = _a.theme;
+    return (0, react_1.css)({
+        width: '100%',
+        '& .MuiInputLabel-shrink': {
+            marginLeft: 87,
+        },
+        '& .MuiInputBase-root input': {
+            paddingLeft: '1.2rem !important',
+            borderLeft: 'none',
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            backgroundColor: 'transparent',
+        },
+        '& .MuiInputBase-root': {
+            boxShadow: 'none',
+        },
+        '& .phone-input-container': __assign(__assign(__assign(__assign(__assign({ width: '100%', display: 'flex', alignItems: 'stretch', position: 'relative', border: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor), borderRadius: '4px', overflow: 'hidden', backgroundColor: "".concat(theme.mvf.palette.background.answerBackgroundColor, " !important") }, (isAutoFilledActive && {
+            backgroundColor: "".concat(isSafari ? 'rgb(250, 255, 189)' : 'rgb(232, 240, 254)', " !important"),
+        })), { boxShadow: theme.mvf.boxShadow.timid }), (isAnswered &&
+            !hasError && {
+            borderColor: theme.mvf.palette.component.answerSelectedColor,
+        })), { '@media (hover: hover)': {
+                '&:hover': {
+                    borderColor: hasError
+                        ? theme.mvf.palette.status.error
+                        : theme.mvf.palette.component.answerSelectedColor,
+                    '& .country-selector': {
+                        borderRightColor: hasError
+                            ? theme.mvf.palette.status.error
+                            : theme.mvf.palette.component.answerSelectedColor,
+                    },
+                },
+            }, '&:has(input:focus)': {
+                borderColor: hasError
+                    ? theme.mvf.palette.status.error
+                    : theme.mvf.palette.component.answerSelectedColor,
+                boxShadow: theme.mvf.boxShadow.fierce,
+                '& .country-selector': {
+                    borderRightColor: hasError
+                        ? theme.mvf.palette.status.error
+                        : theme.mvf.palette.component.answerSelectedColor,
+                },
+            } }), (hasError && {
+            borderColor: theme.mvf.palette.status.error,
+        })),
+        '& .MuiInputBase-root.MuiInputBase-formControl': {
+            width: '100%',
+            flex: 1,
+            border: 'none',
+            backgroundColor: 'transparent',
+            boxShadow: 'none !important',
+            '& .MuiInputBase-input': {
+                border: 'none',
+                borderRadius: 0,
+                backgroundColor: 'transparent',
+            },
+        },
+        '&:has(.MuiInputLabel-root) .phone-input-container .MuiInputBase-root input': {
+            paddingTop: '2.2rem !important',
+        },
+        '& .country-selector': __assign(__assign({ paddingLeft: theme.mvf.spacing.smedium, paddingRight: theme.mvf.spacing.smedium, borderRight: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor), backgroundColor: 'transparent' }, (isAnswered &&
+            !hasError && {
+            borderRightColor: theme.mvf.palette.component.answerSelectedColor,
+        })), (hasError && {
+            borderRightColor: theme.mvf.palette.status.error,
+        })),
+        '& .Mui-error .phone-input-container': {
+            borderColor: theme.mvf.palette.status.error,
+            '& .country-selector': {
+                borderRightColor: theme.mvf.palette.status.error,
+            },
+        },
+        '& .Mui-focused .phone-input-container .country-selector': {
+            borderColor: theme.mvf.palette.component.answerSelectedColor,
+            '& .country-selector': {
+                borderRightColor: theme.mvf.palette.component.answerSelectedColor,
+            },
+        },
+        '& .MuiSelect-root': {
+            position: 'absolute',
+            opacity: 0,
+            pointerEvents: 'none',
+        },
+        // Theme styling for the country picker dropdown
+        '& .MuiPaper-root': {
+            backgroundColor: theme.mvf.palette.background.answerBackgroundColor,
+            border: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor),
+            boxShadow: theme.mvf.boxShadow.timid,
+            '& .MuiMenuItem-root': (_b = {
+                    color: theme.mvf.palette.text.primaryTextColor,
+                    fontSize: theme.mvf.fontSize.mini
+                },
+                _b[theme.breakpoints.up('mobileMedium')] = {
+                    fontSize: theme.mvf.fontSize.small,
+                },
+                _b['&:hover'] = {
+                    backgroundColor: (0, material_1.lighten)(theme.mvf.palette.component.answerSelectedColor, theme.mvf.filters.lighten.extreme),
+                },
+                _b['&.Mui-selected'] = {
+                    backgroundColor: (0, material_1.lighten)(theme.mvf.palette.component.answerSelectedColor, 0.9),
+                    color: theme.mvf.palette.component.answerSelectedColor,
+                    fontWeight: theme.mvf.typography.weight.thick,
+                },
+                _b),
+        },
+        // Search input styling within dropdown
+        '& .country-search-input': {
+            '& .MuiInputBase-input': (_c = {
+                    fontSize: theme.mvf.fontSize.mini
+                },
+                _c[theme.breakpoints.up('mobileMedium')] = {
+                    fontSize: theme.mvf.fontSize.small,
+                },
+                _c.color = theme.mvf.palette.text.primaryTextColor,
+                _c['&::placeholder'] = {
+                    color: theme.mvf.palette.text.secondaryTextColor,
+                    fontWeight: theme.mvf.typography.weight.medium,
+                },
+                _c),
+        },
+        // Autofill styling support for browsers that support :has() selector
+        '@supports (selector(:has(*)))': {
+            '& .phone-input-container:has(input:-webkit-autofill) .country-selector': {
+                backgroundColor: "".concat(isSafari ? 'rgb(250, 255, 189)' : 'rgb(232, 240, 254)', " !important"),
+            },
+        },
+    });
+};
+exports.default = makeFormControlPhoneNumberStyling;
+//# sourceMappingURL=makeFormControlPhoneNumberStyling.js.map