formik-form-components 0.2.24 → 0.2.25

package/dist/index.mjs

@@ -12,8 +12,8 @@ import Autocomplete3 from '@mui/material/Autocomplete';
 import Typography9 from '@mui/material/Typography';
 import { Icon } from '@iconify/react';
 import Select from '@mui/material/Select';
-import PhoneInputComponent from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
+import PhoneInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Link from '@tiptap/extension-link';
@@ -1475,18 +1475,19 @@ var AppMultiSelector = forwardRef(
 );
 AppMultiSelector.displayName = "AppMultiSelector";
 var AppMultiSelector_default = AppMultiSelector;
-var PhoneInput = PhoneInputComponent;
 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 } = useFormikContext();
   const fieldError = useMemo(() => _19.get(errors, name), [errors, name]);
@@ -1525,32 +1526,39 @@ var AppPhoneNoInput = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          PhoneInput,
+          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__ */ jsx(
+              PhoneInput,
+              {
+                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__ */ jsx(