powr-sdk-web 5.7.1 → 5.8.0

package/dist/auth/index.js

@@ -8,7 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _auth = require("../utils/auth");
 var _firebase = require("../utils/firebase");
 var _AddPhonePanel = _interopRequireDefault(require("../onboarding/AddPhonePanel"));
+var _PhoneInput = _interopRequireDefault(require("../components/PhoneInput"));
 var _utils = require("../onboarding/utils");
+var _phone = require("../utils/phone");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t7 in e) "default" !== _t7 && {}.hasOwnProperty.call(e, _t7) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t7)) && (i.get || i.set) ? o(f, _t7, i) : f[_t7] = e[_t7]); return f; })(e, t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -43,7 +45,16 @@ var PowrLogin = function PowrLogin(_ref) {
     _ref$completeProfileO = _ref.completeProfileOnLogin,
     completeProfileOnLogin = _ref$completeProfileO === void 0 ? false : _ref$completeProfileO,
     _ref$requireTerms = _ref.requireTerms,
-    requireTerms = _ref$requireTerms === void 0 ? false : _ref$requireTerms;
+    requireTerms = _ref$requireTerms === void 0 ? false : _ref$requireTerms,
+    _ref$defaultCountry = _ref.defaultCountry,
+    defaultCountry = _ref$defaultCountry === void 0 ? _phone.DEFAULT_COUNTRY : _ref$defaultCountry,
+    _ref$defaultCountryCo = _ref.defaultCountryCode,
+    defaultCountryCode = _ref$defaultCountryCo === void 0 ? _phone.DEFAULT_COUNTRY_CODE : _ref$defaultCountryCo,
+    _ref$international = _ref.international,
+    international = _ref$international === void 0 ? false : _ref$international,
+    _ref$allowedCountries = _ref.allowedCountries,
+    allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries;
+  var resolvedDefaultCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
   var _useState = (0, _react.useState)(function () {
       switch (mode) {
         case 'login':
@@ -95,13 +106,6 @@ var PowrLogin = function PowrLogin(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     showTooltip = _useState16[0],
     setShowTooltip = _useState16[1];
-  var formatPhone = function formatPhone(phone) {
-    var clean = phone.replace(/\D/g, '');
-    if (!clean.startsWith('91')) {
-      clean = '91' + clean;
-    }
-    return '+' + clean;
-  };
   var _useState17 = (0, _react.useState)(false),
     _useState18 = _slicedToArray(_useState17, 2),
     showOtpOption = _useState18[0],
@@ -146,6 +150,18 @@ var PowrLogin = function PowrLogin(_ref) {
     _useState38 = _slicedToArray(_useState37, 2),
     termsAccepted = _useState38[0],
     setTermsAccepted = _useState38[1];
+  var _useState39 = (0, _react.useState)(resolvedDefaultCountry),
+    _useState40 = _slicedToArray(_useState39, 2),
+    phoneCountry = _useState40[0],
+    setPhoneCountry = _useState40[1];
+  var _useState41 = (0, _react.useState)(false),
+    _useState42 = _slicedToArray(_useState41, 2),
+    registerPhoneValid = _useState42[0],
+    setRegisterPhoneValid = _useState42[1];
+  var _useState43 = (0, _react.useState)(''),
+    _useState44 = _slicedToArray(_useState43, 2),
+    registerPhoneE164 = _useState44[0],
+    setRegisterPhoneE164 = _useState44[1];
   var shouldShowToggle = mode === 'toggle';
   var handleInputChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
@@ -172,8 +188,45 @@ var PowrLogin = function PowrLogin(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  var handlePhoneOrEmailChange = function handlePhoneOrEmailChange(e) {
+    setFormData(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        phoneOrEmail: e.target.value
+      });
+    });
+    setError('');
+    if (fieldErrors.phoneOrEmail) {
+      setFieldErrors(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          phoneOrEmail: ''
+        });
+      });
+    }
+  };
+  var handleRegisterPhoneChange = function handleRegisterPhoneChange(_ref3) {
+    var country = _ref3.country,
+      localNumber = _ref3.localNumber,
+      e164 = _ref3.e164,
+      isValid = _ref3.isValid;
+    setPhoneCountry(country);
+    setRegisterPhoneE164(e164);
+    setRegisterPhoneValid(isValid);
+    setFormData(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        phoneOrEmail: localNumber
+      });
+    });
+    setError('');
+    if (fieldErrors.phoneOrEmail) {
+      setFieldErrors(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          phoneOrEmail: ''
+        });
+      });
+    }
+  };
   var sendFirebaseOtp = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone) {
       var appVerifier, confirmationResult, _t, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
@@ -268,11 +321,11 @@ var PowrLogin = function PowrLogin(_ref) {
       }, _callee2, null, [[2, 4], [1, 7, 8, 9]]);
     }));
     return function sendFirebaseOtp(_x2) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var verifyFirebaseOtp = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       var result, _t3, _t4;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.p = _context3.n) {
@@ -331,7 +384,7 @@ var PowrLogin = function PowrLogin(_ref) {
       }, _callee3, null, [[4, 6], [1, 8, 9, 10]]);
     }));
     return function verifyFirebaseOtp() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 
@@ -340,17 +393,14 @@ var PowrLogin = function PowrLogin(_ref) {
     var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   };
-  var isValidPhone = function isValidPhone(phone) {
-    var cleanPhone = phone.replace(/\D/g, '');
-    return cleanPhone.length >= 7 && cleanPhone.length <= 15;
-  };
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(e) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(e) {
       var skipPhoneValidation,
         errors,
         value,
         isEmail,
         endpoint,
+        normalizedPhone,
         payload,
         _yield$apiCall,
         data,
@@ -374,16 +424,16 @@ var PowrLogin = function PowrLogin(_ref) {
             }
 
             // Registration: Only allow phone numbers
-            if (!isLogin && !isValidPhone(value)) {
-              errors.phoneOrEmail = 'Please enter a valid phone number for registration';
+            if (!isLogin && !registerPhoneValid) {
+              errors.phoneOrEmail = international ? 'Please enter a valid phone number' : 'Please enter a valid mobile number';
             }
 
             // Login: Allow both phone and email
             if (isLogin) {
               if (isEmail && !isValidEmail(value)) {
                 errors.phoneOrEmail = 'Please enter a valid email address';
-              } else if (!isEmail && !isValidPhone(value)) {
-                errors.phoneOrEmail = 'Please enter a valid phone number';
+              } else if (!isEmail && !(0, _phone.isValidPhone)(value, resolvedDefaultCountry)) {
+                errors.phoneOrEmail = 'Please enter a valid phone number (include country code, e.g. +1…) or email';
               }
             }
             if (!formData.password.trim()) {
@@ -413,12 +463,13 @@ var PowrLogin = function PowrLogin(_ref) {
           case 1:
             _context4.p = 1;
             endpoint = isLogin ? "/auth/login" : "/auth/register";
+            normalizedPhone = isLogin ? isEmail ? value : (0, _phone.normalizePhone)(value, resolvedDefaultCountry) : registerPhoneE164 || (0, _phone.normalizePhone)(value, phoneCountry);
             payload = isLogin ? {
-              phoneOrEmail: formData.phoneOrEmail,
+              phoneOrEmail: isEmail ? value : normalizedPhone,
               password: formData.password
             } : {
               fullName: formData.fullName,
-              phoneOrEmail: formData.phoneOrEmail,
+              phoneOrEmail: normalizedPhone,
               password: formData.password
             };
             _context4.n = 2;
@@ -504,7 +555,7 @@ var PowrLogin = function PowrLogin(_ref) {
       }, _callee4, null, [[1, 8, 9, 10]]);
     }));
     return function handleSubmit(_x3) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var toggleMode = function toggleMode() {
@@ -522,6 +573,9 @@ var PowrLogin = function PowrLogin(_ref) {
     setAuthView('form');
     setPendingAuth(null);
     setTermsAccepted(false);
+    setPhoneCountry(resolvedDefaultCountry);
+    setRegisterPhoneValid(false);
+    setRegisterPhoneE164('');
     setFormData({
       phoneOrEmail: '',
       password: '',
@@ -549,7 +603,7 @@ var PowrLogin = function PowrLogin(_ref) {
     setSuccess('');
   };
   var handleGetOtp = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       var _yield$apiCall2, data, ok, _t6;
       return _regenerator().w(function (_context5) {
         while (1) switch (_context5.p = _context5.n) {
@@ -601,7 +655,7 @@ var PowrLogin = function PowrLogin(_ref) {
       }, _callee5, null, [[2, 4, 5, 6]]);
     }));
     return function handleGetOtp() {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -639,7 +693,11 @@ var PowrLogin = function PowrLogin(_ref) {
     appName: appName,
     onComplete: handleAddPhoneComplete,
     onBack: handleAddPhoneBack,
-    requirePhoneVerification: requirePhoneVerification
+    requirePhoneVerification: requirePhoneVerification,
+    defaultCountry: resolvedDefaultCountry,
+    defaultCountryCode: defaultCountryCode,
+    international: international,
+    allowedCountries: allowedCountries
   }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("form", {
     onSubmit: handleSubmit,
     style: styles.form
@@ -664,23 +722,31 @@ var PowrLogin = function PowrLogin(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "phoneOrEmail",
     style: styles.label
-  }, isLogin ? 'Phone or Email' : 'Phone Number'), /*#__PURE__*/_react["default"].createElement("input", {
+  }, isLogin ? 'Phone or Email' : 'Phone Number'), !isLogin ? /*#__PURE__*/_react["default"].createElement(_PhoneInput["default"], {
+    value: formData.phoneOrEmail,
+    country: phoneCountry,
+    onChange: handleRegisterPhoneChange,
+    international: international,
+    allowedCountries: allowedCountries,
+    defaultCountry: resolvedDefaultCountry,
+    inputStyle: _objectSpread({}, fieldErrors.phoneOrEmail ? styles.inputError : {})
+  }) : /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     id: "phoneOrEmail",
     name: "phoneOrEmail",
     value: formData.phoneOrEmail,
-    onChange: handleInputChange,
+    onChange: handlePhoneOrEmailChange,
     style: _objectSpread(_objectSpread({}, styles.input), fieldErrors.phoneOrEmail ? styles.inputError : {}),
-    placeholder: isLogin ? "Enter your phone or email" : "Enter your phone number",
+    placeholder: "Phone (+country code) or email",
     required: true
   }), fieldErrors.phoneOrEmail && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.fieldError
   }, fieldErrors.phoneOrEmail), !isLogin && requirePhoneVerification && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.helpText
-  }, "Registration requires phone verification for security"), !isLogin && requirePhoneVerification && isValidPhone(formData.phoneOrEmail) && !isPhoneVerified && /*#__PURE__*/_react["default"].createElement("button", {
+  }, "Registration requires phone verification for security"), !isLogin && requirePhoneVerification && registerPhoneValid && !isPhoneVerified && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
-      return sendFirebaseOtp(formatPhone(formData.phoneOrEmail));
+      return sendFirebaseOtp((0, _phone.formatPhoneForSms)(formData.phoneOrEmail, phoneCountry));
     },
     style: _objectSpread(_objectSpread({}, styles.otpButton), {}, {
       marginTop: '8px'
@@ -964,6 +1030,28 @@ var styles = {
     outline: 'none',
     height: '48px'
   },
+  phoneRow: {
+    display: 'flex',
+    gap: '8px',
+    alignItems: 'stretch',
+    width: '100%'
+  },
+  phonePrefix: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 14px',
+    background: '#fff7ed',
+    color: '#7c2d12',
+    border: '2px solid #ffedd5',
+    borderRadius: '8px',
+    fontWeight: '700',
+    fontSize: '16px',
+    whiteSpace: 'nowrap'
+  },
+  phoneInput: {
+    flex: 1,
+    minWidth: 0
+  },
   inputFocus: {
     borderColor: '#667eea',
     boxShadow: '0 0 0 3px rgba(102, 126, 234, 0.1)'

package/dist/components/PhoneInput.js

@@ -0,0 +1,159 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _phone = require("../utils/phone");
+var _libphonenumberJs = require("libphonenumber-js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var PhoneInput = function PhoneInput(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    countryProp = _ref.country,
+    onChange = _ref.onChange,
+    onCountryChange = _ref.onCountryChange,
+    _ref$international = _ref.international,
+    international = _ref$international === void 0 ? false : _ref$international,
+    _ref$allowedCountries = _ref.allowedCountries,
+    allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries,
+    defaultCountry = _ref.defaultCountry,
+    defaultCountryCode = _ref.defaultCountryCode,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Phone number' : _ref$placeholder,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle,
+    _ref$selectStyle = _ref.selectStyle,
+    selectStyle = _ref$selectStyle === void 0 ? {} : _ref$selectStyle,
+    _ref$rowStyle = _ref.rowStyle,
+    rowStyle = _ref$rowStyle === void 0 ? {} : _ref$rowStyle;
+  var initialCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
+  var _useState = (0, _react.useState)(countryProp || initialCountry),
+    _useState2 = _slicedToArray(_useState, 2),
+    country = _useState2[0],
+    setCountry = _useState2[1];
+  var _useState3 = (0, _react.useState)(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localNumber = _useState4[0],
+    setLocalNumber = _useState4[1];
+  var countryOptions = (0, _react.useMemo)(function () {
+    return (0, _phone.getCountryOptions)(allowedCountries);
+  }, [allowedCountries]);
+  (0, _react.useEffect)(function () {
+    if (countryProp && countryProp !== country) {
+      setCountry(countryProp);
+    }
+  }, [countryProp]);
+  (0, _react.useEffect)(function () {
+    if (value !== localNumber) {
+      setLocalNumber(value);
+    }
+  }, [value]);
+  var callingCode = (0, _libphonenumberJs.getCountryCallingCode)(country);
+  var emitChange = function emitChange(nextCountry, nextLocal) {
+    var e164 = (0, _phone.buildPhoneFromParts)(nextLocal, nextCountry);
+    var valid = (0, _phone.isValidPhone)(nextLocal, nextCountry) || (0, _phone.isValidPhone)(e164, nextCountry);
+    if (typeof onChange === 'function') {
+      onChange({
+        country: nextCountry,
+        localNumber: nextLocal,
+        e164: e164,
+        isValid: valid,
+        callingCode: (0, _libphonenumberJs.getCountryCallingCode)(nextCountry)
+      });
+    }
+  };
+  var handleCountryChange = function handleCountryChange(e) {
+    var nextCountry = e.target.value;
+    setCountry(nextCountry);
+    if (typeof onCountryChange === 'function') onCountryChange(nextCountry);
+    emitChange(nextCountry, localNumber);
+  };
+  var handleLocalChange = function handleLocalChange(e) {
+    var raw = e.target.value || '';
+    var nextLocal = international ? raw.replace(/[^\d\s-]/g, '').slice(0, 15) : raw.replace(/\D/g, '').slice(0, 15);
+    setLocalNumber(nextLocal);
+    emitChange(country, nextLocal);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, styles.row), rowStyle)
+  }, international ? /*#__PURE__*/_react["default"].createElement("select", {
+    value: country,
+    onChange: handleCountryChange,
+    disabled: disabled,
+    style: _objectSpread(_objectSpread({}, styles.select), selectStyle),
+    "aria-label": "Country code"
+  }, countryOptions.map(function (opt) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: opt.code,
+      value: opt.code
+    }, opt.label);
+  })) : /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.prefix
+  }, "+", callingCode), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "tel",
+    value: localNumber,
+    onChange: handleLocalChange,
+    placeholder: placeholder,
+    disabled: disabled,
+    style: _objectSpread(_objectSpread({}, styles.input), inputStyle),
+    autoComplete: "tel-national"
+  }));
+};
+var styles = {
+  row: {
+    display: 'flex',
+    gap: 8,
+    alignItems: 'stretch',
+    width: '100%'
+  },
+  prefix: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 14px',
+    background: '#fff7ed',
+    color: '#7c2d12',
+    border: '2px solid #ffedd5',
+    borderRadius: 8,
+    fontWeight: 700,
+    fontSize: 16,
+    whiteSpace: 'nowrap'
+  },
+  select: {
+    minWidth: 110,
+    maxWidth: 140,
+    padding: '10px 8px',
+    border: '2px solid #e5e7eb',
+    borderRadius: 8,
+    fontSize: 14,
+    background: '#fff',
+    boxSizing: 'border-box'
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: '12px 14px',
+    border: '2px solid #e5e7eb',
+    borderRadius: 8,
+    fontSize: 16,
+    boxSizing: 'border-box',
+    outline: 'none',
+    height: 48
+  }
+};
+var _default = exports["default"] = PhoneInput;

package/dist/index.js

@@ -9,12 +9,36 @@ Object.defineProperty(exports, "AddPhonePanel", {
     return _onboarding.AddPhonePanel;
   }
 });
+Object.defineProperty(exports, "DEFAULT_COUNTRY", {
+  enumerable: true,
+  get: function get() {
+    return _phone.DEFAULT_COUNTRY;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_COUNTRY_CODE", {
+  enumerable: true,
+  get: function get() {
+    return _phone.DEFAULT_COUNTRY_CODE;
+  }
+});
 Object.defineProperty(exports, "OnboardingShell", {
   enumerable: true,
   get: function get() {
     return _onboarding.OnboardingShell;
   }
 });
+Object.defineProperty(exports, "PRIORITY_COUNTRIES", {
+  enumerable: true,
+  get: function get() {
+    return _phone.PRIORITY_COUNTRIES;
+  }
+});
+Object.defineProperty(exports, "PhoneInput", {
+  enumerable: true,
+  get: function get() {
+    return _PhoneInput["default"];
+  }
+});
 Object.defineProperty(exports, "PowrBaseActivities", {
   enumerable: true,
   get: function get() {
@@ -147,6 +171,12 @@ Object.defineProperty(exports, "addPhoneStep", {
     return _onboarding.addPhoneStep;
   }
 });
+Object.defineProperty(exports, "buildPhoneFromParts", {
+  enumerable: true,
+  get: function get() {
+    return _phone.buildPhoneFromParts;
+  }
+});
 Object.defineProperty(exports, "defineAppStep", {
   enumerable: true,
   get: function get() {
@@ -165,6 +195,30 @@ Object.defineProperty(exports, "evaluateSteps", {
     return _onboarding.evaluateSteps;
   }
 });
+Object.defineProperty(exports, "formatPhoneForSms", {
+  enumerable: true,
+  get: function get() {
+    return _phone.formatPhoneForSms;
+  }
+});
+Object.defineProperty(exports, "getCountryOptions", {
+  enumerable: true,
+  get: function get() {
+    return _phone.getCountryOptions;
+  }
+});
+Object.defineProperty(exports, "getLocalPhoneNumber", {
+  enumerable: true,
+  get: function get() {
+    return _phone.getLocalPhoneNumber;
+  }
+});
+Object.defineProperty(exports, "getPhoneLookupVariants", {
+  enumerable: true,
+  get: function get() {
+    return _phone.getPhoneLookupVariants;
+  }
+});
 Object.defineProperty(exports, "getUserId", {
   enumerable: true,
   get: function get() {
@@ -177,6 +231,12 @@ Object.defineProperty(exports, "hasValidPhone", {
     return _onboarding.hasValidPhone;
   }
 });
+Object.defineProperty(exports, "isValidPhone", {
+  enumerable: true,
+  get: function get() {
+    return _phone.isValidPhone;
+  }
+});
 Object.defineProperty(exports, "mergePowrSteps", {
   enumerable: true,
   get: function get() {
@@ -195,12 +255,30 @@ Object.defineProperty(exports, "needsPhone", {
     return _onboarding.needsPhone;
   }
 });
+Object.defineProperty(exports, "normalizePhone", {
+  enumerable: true,
+  get: function get() {
+    return _phone.normalizePhone;
+  }
+});
+Object.defineProperty(exports, "parsePhone", {
+  enumerable: true,
+  get: function get() {
+    return _phone.parsePhone;
+  }
+});
 Object.defineProperty(exports, "profileNameStep", {
   enumerable: true,
   get: function get() {
     return _onboarding.profileNameStep;
   }
 });
+Object.defineProperty(exports, "resolveCountry", {
+  enumerable: true,
+  get: function get() {
+    return _phone.resolveCountry;
+  }
+});
 var _table = _interopRequireDefault(require("./table"));
 var _swiper = _interopRequireDefault(require("./swiper"));
 var _reviews = _interopRequireDefault(require("./reviews"));
@@ -221,5 +299,7 @@ var _admin = _interopRequireDefault(require("./admin"));
 var _tools = _interopRequireDefault(require("./tools"));
 var _tasks = _interopRequireDefault(require("./tasks"));
 var _powrVerify = _interopRequireDefault(require("./powrVerify"));
+var _PhoneInput = _interopRequireDefault(require("./components/PhoneInput"));
 var _onboarding = require("./onboarding");
+var _phone = require("./utils/phone");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }