formik-form-components 0.2.21 → 0.2.22

package/dist/index.d.ts

@@ -332,7 +332,6 @@ interface AppPhoneNoInputProps {
     labelSx?: SxProps<Theme>;
     inputSx?: React__default.CSSProperties;
     errorSx?: SxProps<Theme>;
-    [key: string]: unknown;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 

package/dist/index.js

@@ -1513,87 +1513,92 @@ var AppPhoneNoInput = ({
   containerSx,
   labelSx,
   inputSx,
-  errorSx,
-  ...otherProps
+  errorSx
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik.useFormikContext();
   const fieldError = react.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
   const isTouched = react.useMemo(() => _19__default.default.get(touched, name), [touched, name]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "subtitle2",
-        sx: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      sx: [{ mb: 2 }, containerSx, sx],
+      "data-testid": `phone-input-${name}`,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Typography,
           {
-            mb: 0.5,
-            color: isTouched && fieldError ? "error.main" : "text.primary"
-          },
-          labelSx
-        ],
-        children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx(
-            material.Typography,
-            {
-              component: "span",
-              sx: {
-                color: "error.main",
-                ml: 0.3
+            variant: "subtitle2",
+            sx: [
+              {
+                mb: 0.5,
+                color: isTouched && fieldError ? "error.main" : "text.primary"
               },
-              children: "*"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PhoneInput__default.default,
-      {
-        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%"
-        },
-        ...otherProps,
-        value: values[name],
-        onChange: (value) => setFieldValue(name, value),
-        onBlur: () => setFieldTouched(name, true)
-      }
-    ),
-    isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
-      material.Typography,
-      {
-        variant: "caption",
-        id: `${name}-error`,
-        sx: [
+              labelSx
+            ],
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  component: "span",
+                  sx: {
+                    color: "error.main",
+                    ml: 0.3
+                  },
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PhoneInput__default.default,
           {
-            mt: 0.5,
-            display: "block",
-            color: "error.main"
-          },
-          errorSx
-        ],
-        children: String(fieldError)
-      }
-    )
-  ] });
+            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%"
+            },
+            value: values[name],
+            onChange: (value) => setFieldValue(name, value),
+            onBlur: () => setFieldTouched(name, true)
+          }
+        ),
+        isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "caption",
+            id: `${name}-error`,
+            sx: [
+              {
+                mt: 0.5,
+                display: "block",
+                color: "error.main"
+              },
+              errorSx
+            ],
+            children: String(fieldError)
+          }
+        )
+      ]
+    }
+  );
 };
 var AppPhoneNoInput_default = AppPhoneNoInput;
 var AppRadioGroup = react.forwardRef(({