@mvf/external-components 3.30.0 → 3.31.1-dev.4

package/Components/Molecules/PhoneNumberTextFieldCustom/CountryModal.test.js

@@ -0,0 +1,281 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var renderWithProviders_1 = __importDefault(require("../../../Helpers/React/renderWithProviders"));
+var CountryModal_1 = __importDefault(require("./CountryModal"));
+var countryData_1 = require("./__helpers__/utils/countryData");
+// Mock the useTheme hook to provide the required theme structure
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('@emotion/react', function () { return (__assign(__assign({}, jest.requireActual('@emotion/react')), { useTheme: function () { return ({
+        mvf: {
+            palette: {
+                background: {
+                    answerBackgroundColor: '#ffffff',
+                },
+            },
+            boxShadow: {
+                fierce: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+            },
+        },
+    }); } })); });
+describe('CountryModal', function () {
+    var mockCountries = (0, countryData_1.getCountryData)();
+    var mockCountry = mockCountries[0];
+    var mockOnCountryChange = jest.fn();
+    var mockOnClose = jest.fn();
+    var defaultProps = {
+        selectedCountry: mockCountry,
+        onCountryChange: mockOnCountryChange,
+        enableCountrySearch: false,
+        open: false,
+        onClose: mockOnClose,
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    describe('Modal Visibility', function () {
+        it('renders without crashing and does not show modal when closed', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps)));
+            // Modal should not be visible when open is false
+            expect(react_1.screen.queryByText('Select Country')).not.toBeInTheDocument();
+        });
+        it('renders modal content when open is true', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            expect(react_1.screen.getByText('Select Country')).toBeInTheDocument();
+            // Check for modal container instead of dialog role
+            expect(react_1.screen.getByText('Select Country').closest('[role="presentation"]')).toBeInTheDocument();
+        });
+        it('displays close button and can close modal', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var closeButton;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+                        closeButton = react_1.screen.getByRole('button', { name: /close/i });
+                        expect(closeButton).toBeInTheDocument();
+                        react_1.fireEvent.click(closeButton);
+                        // Note: Due to the timeout in the component, we need to wait
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        // Note: Due to the timeout in the component, we need to wait
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Country Search', function () {
+        it('does not render search input when enableCountrySearch is false', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: false })));
+            expect(react_1.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
+        });
+        it('renders search input when enableCountrySearch is true', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            expect(react_1.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
+        });
+        it('filters countries based on search term', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for a specific country (assuming United States exists)
+            user_event_1.default.type(searchInput, 'United States');
+            // Should show filtered results
+            expect(react_1.screen.getByText('United States')).toBeInTheDocument();
+            // Should not show all countries anymore
+            var countryItems = react_1.screen.getAllByRole('option');
+            expect(countryItems.length).toBeLessThan(mockCountries.length);
+        });
+        it('shows "No countries found" when search yields no results', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for something that doesn't exist
+            user_event_1.default.type(searchInput, 'NonexistentCountry');
+            expect(react_1.screen.getByText('No countries found')).toBeInTheDocument();
+        });
+        it('filters countries by dial code', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Search for +1 (should find US, Canada, etc.)
+            user_event_1.default.type(searchInput, '+1');
+            // Should show filtered results
+            var countryItems = react_1.screen.getAllByRole('option');
+            expect(countryItems.length).toBeGreaterThan(0);
+            expect(countryItems.length).toBeLessThan(mockCountries.length);
+        });
+    });
+    describe('Country List and Selection', function () {
+        it('displays country list when open', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            // Should show at least the first few countries
+            expect(react_1.screen.getByText(mockCountries[0].name)).toBeInTheDocument();
+            expect(react_1.screen.getByText(mockCountries[1].name)).toBeInTheDocument();
+            // Should show country list container
+            expect(react_1.screen.getByRole('listbox', { name: /country list/i })).toBeInTheDocument();
+        });
+        it('calls onCountryChange when a country is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countryToSelect, countryOption;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+                        countryToSelect = mockCountries.find(function (c) { return c.name !== mockCountry.name; });
+                        expect(countryToSelect).toBeDefined();
+                        countryOption = react_1.screen.getByRole('option', {
+                            name: new RegExp((countryToSelect === null || countryToSelect === void 0 ? void 0 : countryToSelect.name) || ''),
+                        });
+                        react_1.fireEvent.click(countryOption);
+                        expect(mockOnCountryChange).toHaveBeenCalledWith(countryToSelect);
+                        // Should also trigger close after timeout
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        // Should also trigger close after timeout
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('displays country flags and dial codes', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true })));
+            // Check that dial codes are displayed (use getAllByText since some dial codes might be duplicated)
+            var firstDialCode = react_1.screen.getAllByText(mockCountries[0].dialCode);
+            var secondDialCode = react_1.screen.getAllByText(mockCountries[1].dialCode);
+            expect(firstDialCode.length).toBeGreaterThan(0);
+            expect(secondDialCode.length).toBeGreaterThan(0);
+        });
+    });
+    describe('Keyboard Navigation', function () {
+        it('closes modal when Escape key is pressed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                        searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                        react_1.fireEvent.keyDown(searchInput, { key: 'Escape' });
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('navigates countries with arrow keys when search is enabled', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            var searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+            // Simulate arrow down navigation
+            react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+            // Should highlight second item (index 1)
+            var secondCountryOption = react_1.screen.getByRole('option', {
+                name: new RegExp(mockCountries[1].name),
+            });
+            expect(secondCountryOption).toHaveAttribute('aria-selected', 'true');
+        });
+        it('selects highlighted country with Enter key', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                        searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                        // Navigate to first country and select it
+                        react_1.fireEvent.keyDown(searchInput, { key: 'ArrowDown' });
+                        react_1.fireEvent.keyDown(searchInput, { key: 'Enter' });
+                        expect(mockOnCountryChange).toHaveBeenCalledWith(mockCountries[0]);
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnClose).toHaveBeenCalledTimes(1);
+                            }, { timeout: 300 })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Accessibility', function () {
+        it('has proper ARIA labels and roles', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+            // Modal should have proper ARIA attributes on the presentation container
+            var modal = react_1.screen.getByRole('presentation');
+            expect(modal).toHaveAttribute('aria-labelledby', 'country-selection-modal');
+            expect(modal).toHaveAttribute('aria-describedby', 'country-selection-modal-description');
+            // Search input should have proper label
+            expect(react_1.screen.getByLabelText('Search countries')).toBeInTheDocument();
+            // Country list should have proper role
+            expect(react_1.screen.getByRole('listbox', { name: /country list/i })).toBeInTheDocument();
+            // Country options should have proper roles
+            var countryOptions = react_1.screen.getAllByRole('option');
+            expect(countryOptions.length).toBeGreaterThan(0);
+        });
+        it('renders search input and can be focused when modal opens with search enabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchInput;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(CountryModal_1.default, __assign({}, defaultProps, { open: true, enableCountrySearch: true })));
+                searchInput = react_1.screen.getByPlaceholderText('Search countries...');
+                expect(searchInput).toBeInTheDocument();
+                // Focus the input manually to verify it's focusable
+                searchInput.focus();
+                expect(searchInput).toHaveFocus();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=CountryModal.test.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/CountryModal.test.js.map

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

package/Components/Molecules/PhoneNumberTextFieldCustom/CountrySelector.d.ts

@@ -0,0 +1,10 @@
+import { CountryData } from './__helpers__/utils/countryData';
+export interface CountrySelectorProps {
+    selectedCountry: CountryData;
+    enableCountryChange?: boolean;
+    isCountryMenuOpen?: boolean;
+    onClick?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+declare const CountrySelector: import("react").ForwardRefExoticComponent<CountrySelectorProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CountrySelector;

package/Components/Molecules/PhoneNumberTextFieldCustom/CountrySelector.js

@@ -0,0 +1,32 @@
+"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");
+/** @jsxImportSource @emotion/react */
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var react_1 = require("react");
+var FlagIcon_1 = __importDefault(require("./FlagIcon"));
+var CountrySelector = (0, react_1.forwardRef)(function (_a, ref) {
+    var selectedCountry = _a.selectedCountry, _b = _a.enableCountryChange, enableCountryChange = _b === void 0 ? false : _b, _c = _a.isCountryMenuOpen, isCountryMenuOpen = _c === void 0 ? false : _c, onClick = _a.onClick, onKeyDown = _a.onKeyDown;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: "country-selector", onClick: enableCountryChange ? onClick : undefined, style: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 12px',
+            cursor: enableCountryChange ? 'pointer' : 'default',
+            minWidth: '80px',
+            justifyContent: 'center',
+        }, role: enableCountryChange ? 'button' : undefined, tabIndex: enableCountryChange ? 0 : undefined, "aria-label": enableCountryChange
+            ? "Select country, currently ".concat(selectedCountry.name)
+            : "Country: ".concat(selectedCountry.name), "aria-haspopup": enableCountryChange ? 'listbox' : undefined, "aria-expanded": enableCountryChange ? isCountryMenuOpen : undefined, "aria-controls": enableCountryChange ? 'country-selector-listbox' : undefined, onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsx)(FlagIcon_1.default, { countryCode: selectedCountry.code, style: { marginRight: '8px' } }), enableCountryChange && ((0, jsx_runtime_1.jsx)(ExpandMore_1.default, { style: {
+                    fontSize: '16px',
+                    color: 'rgba(0, 0, 0, 1)',
+                    marginLeft: '4px',
+                    transform: isCountryMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.1s ease-in-out',
+                } }))] }));
+});
+CountrySelector.displayName = 'CountrySelector';
+exports.default = CountrySelector;
+//# sourceMappingURL=CountrySelector.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/CountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/CountrySelector.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,8EAAwD;AACxD,+BAAmC;AAEnC,wDAAkC;AAUlC,IAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,UACE,EAMC,EACD,GAAG;QAND,eAAe,qBAAA,EACf,2BAA2B,EAA3B,mBAAmB,mBAAG,KAAK,KAAA,EAC3B,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,OAAO,aAAA,EACP,SAAS,eAAA;IAIX,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAClD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACnD,QAAQ,EAAE,MAAM;YAChB,cAAc,EAAE,QAAQ;SACzB,EACD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAE3C,mBAAmB;YACjB,CAAC,CAAC,oCAA6B,eAAe,CAAC,IAAI,CAAE;YACrD,CAAC,CAAC,mBAAY,eAAe,CAAC,IAAI,CAAE,mBAEzB,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAC3C,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,mBAEhE,mBAAmB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,EAE9D,SAAS,EAAE,SAAS,aAEpB,uBAAC,kBAAQ,IACP,WAAW,EAAE,eAAe,CAAC,IAAI,EACjC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,GAC7B,EACD,mBAAmB,IAAI,CACtB,uBAAC,oBAAU,IACT,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,kBAAkB;oBACzB,UAAU,EAAE,KAAK;oBACjB,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;oBAChE,UAAU,EAAE,4BAA4B;iBACzC,GACD,CACH,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,kBAAe,eAAe,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.d.ts

@@ -0,0 +1,9 @@
+export interface ErrorDisplayProps {
+    id?: string;
+    errorMessage?: string;
+    isValidating?: boolean;
+    role?: string;
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+}
+declare const ErrorDisplay: React.FC<ErrorDisplayProps>;
+export default ErrorDisplay;

package/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.js

@@ -0,0 +1,26 @@
+"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");
+/** @jsxImportSource @emotion/react */
+var FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+var ErrorDisplay = function (_a) {
+    var id = _a.id, errorMessage = _a.errorMessage, _b = _a.isValidating, isValidating = _b === void 0 ? false : _b, role = _a.role, ariaLive = _a["aria-live"];
+    if (isValidating) {
+        return ((0, jsx_runtime_1.jsxs)(FormHelperText_1.default, { id: id, role: role, "aria-live": ariaLive, sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                color: 'text.secondary',
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 12, thickness: 4 }), (0, jsx_runtime_1.jsx)("span", { children: "Validating..." })] }));
+    }
+    if (errorMessage) {
+        return ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { id: id, error: true, role: role, "aria-live": ariaLive, children: errorMessage }));
+    }
+    return null;
+};
+exports.default = ErrorDisplay;
+//# sourceMappingURL=ErrorDisplay.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/ErrorDisplay.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,gFAA0D;AAC1D,oFAA8D;AAU9D,IAAM,YAAY,GAAgC,UAAC,EAMlD;QALC,EAAE,QAAA,EACF,YAAY,kBAAA,EACZ,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,IAAI,UAAA,EACS,QAAQ,kBAAA;IAErB,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL,wBAAC,wBAAc,IACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,eACC,QAAQ,EACnB,EAAE,EAAE;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,gBAAgB;aACxB,aAED,uBAAC,0BAAgB,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,GAAI,EAC5C,6DAA0B,IACX,CAClB,CAAC;IACJ,CAAC;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CACL,uBAAC,wBAAc,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,QAAC,IAAI,EAAE,IAAI,eAAa,QAAQ,YAC1D,YAAY,GACE,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/Components/Molecules/PhoneNumberTextFieldCustom/FlagIcon.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { CountryCode } from './__helpers__/utils/countryData';
+interface FlagIconProps {
+    countryCode: CountryCode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const FlagIcon: React.FC<FlagIconProps>;
+export default FlagIcon;

package/Components/Molecules/PhoneNumberTextFieldCustom/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/FlagIcon.js.map

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

package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.d.ts

@@ -0,0 +1,57 @@
+import { MouseEventHandler } from 'react';
+import { CountryData } from './__helpers__/utils/countryData';
+import { PhoneValidationResult } from './__helpers__/utils/phoneValidation';
+export interface IPhoneNumberChangeParams {
+    id: string;
+    phoneNumber: string;
+    e164Number: string;
+}
+export interface ICountryChangeParams {
+    id: string;
+    selectedCountry: CountryData;
+    previousCountry: CountryData;
+}
+export interface IValidationChangeParams {
+    id: string;
+    isValid: boolean;
+    validationResult: PhoneValidationResult;
+    phoneNumber: string;
+}
+export interface IFormattedValueChangeParams {
+    id: string;
+    formattedValue: string;
+    e164Value: string;
+}
+export interface IPhoneNumberTextFieldCallbackParams {
+    id: string;
+    value: string;
+    isValid: boolean;
+    selectedCountry: CountryData;
+    validationResult?: PhoneValidationResult;
+}
+interface IPhoneNumberTextFieldProps {
+    disabled: boolean;
+    errorMessage?: string;
+    type: string;
+    id: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    isAnswered: boolean;
+    label: string;
+    onBlur: () => void;
+    onPhoneNumberChange?: (params: IPhoneNumberChangeParams) => void;
+    onCountryChange?: (params: ICountryChangeParams) => void;
+    onValidationChange?: (params: IValidationChangeParams) => void;
+    onFormattedValueChange?: (params: IFormattedValueChangeParams) => void;
+    onChange?: (item: IPhoneNumberTextFieldCallbackParams) => void;
+    onClick: MouseEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    value: string;
+    initialCountry?: string;
+    isSafari: boolean;
+    isAutoFilledActive: boolean;
+    enableCountryChange?: boolean;
+    enableCountrySearch?: boolean;
+    useModalForCountrySelection?: boolean;
+    strictMode?: boolean;
+}
+export default IPhoneNumberTextFieldProps;

package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=IPhoneNumberTextFieldProps.js.map

package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPhoneNumberTextFieldProps.js","sourceRoot":"","sources":["../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.ts"],"names":[],"mappings":""}

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneInput.d.ts

@@ -0,0 +1,22 @@
+export interface PhoneInputProps {
+    id: string;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    isAnswered?: boolean;
+    isSafari?: boolean;
+    isAutoFilledActive?: boolean;
+    experimentName?: string;
+    type?: string;
+    onChange: (params: {
+        id: string;
+        value: string;
+    }) => void;
+    onBlur?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    strictMode?: boolean;
+    [key: string]: any;
+}
+declare const PhoneInput: import("react").ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default PhoneInput;