formik-form-components 0.2.23 → 0.2.25

package/dist/index.d.ts

@@ -323,7 +323,7 @@ declare const AppMultiSelector: React$1.ForwardRefExoticComponent<Omit<AppMultiS
 
 interface AppPhoneNoInputProps {
     name: string;
-    label?: string;
+    label: string;
     required?: boolean;
     defaultCountry?: string;
     placeholder?: string;
@@ -332,6 +332,8 @@ interface AppPhoneNoInputProps {
     labelSx?: SxProps<Theme>;
     inputSx?: React__default.CSSProperties;
     errorSx?: SxProps<Theme>;
+    international?: boolean;
+    withCountryCallingCode?: boolean;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 

package/dist/index.js

@@ -14,8 +14,8 @@ var Autocomplete3 = require('@mui/material/Autocomplete');
 var Typography9 = require('@mui/material/Typography');
 var react$1 = require('@iconify/react');
 var Select = require('@mui/material/Select');
-var PhoneInput = require('react-phone-input-2');
-require('react-phone-input-2/lib/style.css');
+var PhoneInput = require('react-phone-number-input');
+require('react-phone-number-input/style.css');
 var react$2 = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var Link = require('@tiptap/extension-link');
@@ -1507,13 +1507,15 @@ var AppPhoneNoInput = ({
   name,
   label,
   required = false,
-  defaultCountry = "us",
-  placeholder,
+  defaultCountry = "US",
+  placeholder = "Enter phone number",
   sx,
   containerSx,
   labelSx,
   inputSx,
-  errorSx
+  errorSx,
+  international = true,
+  withCountryCallingCode = true
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik.useFormikContext();
   const fieldError = react.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
@@ -1552,32 +1554,39 @@ var AppPhoneNoInput = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          PhoneInput__default.default,
+          material.Box,
           {
-            country: defaultCountry,
-            specialLabel: "",
-            placeholder,
-            inputProps: {
-              name,
-              id: name,
-              required,
-              "aria-describedby": fieldError ? `${name}-error` : void 0,
-              "aria-invalid": !!fieldError,
-              "aria-required": required
-            },
-            inputStyle: {
-              width: "100%",
-              border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
-              padding: "10px",
-              borderRadius: "4px",
-              ...inputSx
-            },
-            containerStyle: {
-              width: "100%"
+            sx: {
+              "& .PhoneInput": {
+                width: "100%"
+              },
+              "& .PhoneInputInput": {
+                width: "100%",
+                border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
+                padding: "10px",
+                borderRadius: "4px",
+                fontFamily: "inherit",
+                fontSize: "inherit",
+                ...inputSx
+              },
+              "& .PhoneInputCountrySelect": {
+                border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
+                borderRadius: "4px"
+              }
             },
-            value: values[name],
-            onChange: (value) => setFieldValue(name, value),
-            onBlur: () => setFieldTouched(name, true)
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              PhoneInput__default.default,
+              {
+                international,
+                withCountryCallingCode,
+                defaultCountry,
+                placeholder,
+                value: values[name],
+                onChange: (value) => setFieldValue(name, value || ""),
+                onBlur: () => setFieldTouched(name, true),
+                error: fieldError ? "Invalid phone number" : void 0
+              }
+            )
           }
         ),
         isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(