@envisiongroup/porygon 0.1.0-rc.2 → 0.1.0-rc.4

package/dist/react-components/fields/EFWDatePickerField/EFWDatePickerField.js

@@ -1,58 +1,60 @@
 import { jsx as t } from "react/jsx-runtime";
-import { EFWField as C } from "../EFWField/EFWField.js";
-import { EFWDatePicker as E } from "../EFWDatePicker/EFWDatePicker.js";
+import { EFWField as E } from "../EFWField/EFWField.js";
+import { EFWDatePicker as M } from "../EFWDatePicker/EFWDatePicker.js";
 const k = (a) => {
   const {
     title: l,
     infoLabel: o,
     hint: i,
     style: r = {},
-    required: n = !1,
-    validationState: s,
-    validationMessage: d,
+    required: s = !1,
+    validationState: d,
+    validationMessage: n,
     disabled: c = !1,
     editable: e = !0,
-    hidden: h = !1,
-    onChange: m,
-    placeholder: f = "DD/MM/YYYY",
-    selectedDates: D = [],
-    allowRangeSelection: u = !1,
-    restrictedDates: g = [],
-    allowTextInput: p = !0,
-    minDate: b,
-    maxDate: w,
-    showGoToToday: F,
-    showCloseButton: x,
-    onValidationChange: Y
+    hidden: f = !1,
+    onChange: h,
+    placeholder: m = "DD/MM/YYYY",
+    selectedDates: D,
+    defaultSelectedDates: u,
+    allowRangeSelection: g = !1,
+    restrictedDates: p = [],
+    allowTextInput: b = !0,
+    minDate: w,
+    maxDate: F,
+    showGoToToday: x,
+    showCloseButton: Y,
+    onValidationChange: C
   } = a;
   return /* @__PURE__ */ t(
-    C,
+    E,
     {
       style: r,
       title: l,
       infoLabel: o,
       weightLabel: e ? "regular" : "semibold",
       hint: i,
-      hidden: h,
-      required: n,
-      validationState: s,
-      validationMessage: d,
-      onValidationChange: Y,
+      hidden: f,
+      required: s,
+      validationState: d,
+      validationMessage: n,
+      onValidationChange: C,
       children: /* @__PURE__ */ t(
-        E,
+        M,
         {
           editable: e,
           selectedDates: D,
-          minDate: b,
-          maxDate: w,
-          onChange: m,
-          allowTextInput: p,
+          defaultSelectedDates: u,
+          minDate: w,
+          maxDate: F,
+          onChange: h,
+          allowTextInput: b,
           disabled: c,
-          placeholder: f,
-          restrictedDates: g,
-          allowRangeSelection: u,
-          showGoToToday: F,
-          showCloseButton: x
+          placeholder: m,
+          restrictedDates: p,
+          allowRangeSelection: g,
+          showGoToToday: x,
+          showCloseButton: Y
         }
       )
     }

package/dist/react-components/fields/EFWField/EFWField.d.ts

@@ -3,7 +3,8 @@ import { EFWFieldProps } from './EFWField.types';
 /**
  * Componente de campo de formulario estilizado con soporte para validación y personalización.
  *
- * `EFWField` renderiza un campo de formulario con etiqueta, información adicional, mensajes de validación
+ * `EFWField` renderiza un campo de formulario con etiqueta, información adicional, mensajes
+ *  de validación
  * y estilos personalizados. Gestiona el estado de validación internamente y notifica cambios de validación al componente padre si se proporciona
  * `onValidationChange`. Puede ocultarse condicionalmente y permite la integración de componentes hijos
  * con soporte para validación.

package/dist/react-components/fields/EFWField/EFWField.js

@@ -1,8 +1,8 @@
 import { jsx as v } from "react/jsx-runtime";
-import { makeStyles as B, InfoLabel as N, mergeClasses as R, Field as W } from "@fluentui/react-components";
-import $, { useState as x, useMemo as M, useRef as j, useEffect as l, useCallback as q } from "react";
+import { makeStyles as R, InfoLabel as D, mergeClasses as W, Field as $ } from "@fluentui/react-components";
+import j, { useState as x, useMemo as M, useRef as p, useEffect as l, useCallback as q } from "react";
 import { getValidationIcon as z } from "./EFWField.utils.js";
-const D = B({
+const G = R({
   "efw-textField": {
     "& .fui-Field__validationMessage:empty": {
       display: "none !important"
@@ -23,62 +23,68 @@ const D = B({
       borderBottom: "2px solid var(--colorPaletteRedBorder2) !important"
     }
   }
-}), J = (S) => {
+}), K = (V) => {
   const {
     title: o,
-    hint: p,
-    className: V,
-    style: h = {},
-    infoLabel: s,
-    weightLabel: r = "regular",
+    hint: h,
+    className: y,
+    style: _ = {},
+    infoLabel: r,
+    weightLabel: s = "regular",
     required: d = !1,
-    hidden: _ = !1,
-    orientation: b,
-    size: y,
+    hidden: b = !1,
+    orientation: C,
+    size: I,
     children: c,
     validationState: t = "none",
     validationMessage: a = "",
     onValidationChange: f
-  } = S, n = D(), [e, g] = x(t), [i, u] = x(a), C = M(
+  } = V, n = G(), [e, u] = x(t), [i, g] = x(a), E = M(
     () => z(e),
     [e]
-  ), I = M(() => /* @__PURE__ */ v(N, { weight: r, info: s || "", required: d, children: o }), [s, d, r, o]), m = j(0);
+  ), L = M(() => /* @__PURE__ */ v(D, { weight: s, info: r || "", required: d, children: o }), [r, d, s, o]), m = p(0);
   l(() => {
     m.current += 1, console.log(`EFWField ${o} #${m.current}`);
-  }), l(() => {
-    g(t), u(a);
+  });
+  const F = p(!1);
+  l(() => {
+    if (!F.current) {
+      F.current = !0;
+      return;
+    }
+    u(t), g(a);
   }, [t, a]);
-  const E = q((F = "none", w = "") => {
-    const P = F !== "none" ? F : t, k = w !== "" ? w : a;
-    g(P), u(k);
+  const P = q((w = "none", S = "") => {
+    const B = w !== "none" ? w : t, N = S !== "" ? S : a;
+    u(B), g(N);
   }, [t, a]);
   if (l(() => {
     f?.({
       currentValidationState: e,
       currentValidationMessage: i
     });
-  }, [e, i, f]), _) return null;
-  const L = R(
-    V,
+  }, [e, i, f]), b) return null;
+  const k = W(
+    y,
     n["efw-textField"],
     e === "success" && n["efw-textField-success"],
     e === "warning" && n["efw-textField-warning"],
     e === "error" && n["efw-textField-error"]
   );
   return /* @__PURE__ */ v(
-    W,
+    $,
     {
-      style: { ...h },
-      className: L,
-      label: I,
-      hint: p,
+      style: { ..._ },
+      className: k,
+      label: L,
+      hint: h,
       validationState: e,
       validationMessage: i,
-      validationMessageIcon: C,
-      orientation: b,
-      size: y,
-      children: c && $.cloneElement(c, {
-        setParentComponentState: E,
+      validationMessageIcon: E,
+      orientation: C,
+      size: I,
+      children: c && j.cloneElement(c, {
+        setParentComponentState: P,
         validationState: e,
         validationMessage: i
       })
@@ -86,5 +92,5 @@ const D = B({
   );
 };
 export {
-  J as EFWField
+  K as EFWField
 };

package/dist/react-components/fields/EFWInput/EFWInput.js

@@ -1,100 +1,119 @@
-import { jsx as h, Fragment as U } from "react/jsx-runtime";
-import { makeStyles as _, tokens as l, mergeClasses as q, Input as D, Text as G } from "@fluentui/react-components";
-import { useId as H, useRef as J, useState as B, useMemo as K, useCallback as v, useEffect as Q } from "react";
-import { stripFormatting as f, applyFormatting as C, validateChileanRut as X, validateEmail as Y } from "./EFWInput.utils.js";
-const Z = _({
+import { jsx as k, Fragment as Y } from "react/jsx-runtime";
+import { makeStyles as Z, tokens as d, mergeClasses as ee, Input as te, Text as re } from "@fluentui/react-components";
+import { useId as oe, useRef as ne, useState as W, useMemo as g, useCallback as z, useEffect as h } from "react";
+import { stripFormatting as c, applyFormatting as f, validateChileanRut as ae, validateEmail as le } from "./EFWInput.utils.js";
+const se = Z({
   efwInputError: {
-    backgroundColor: l.colorPaletteRedBackground1,
+    backgroundColor: d.colorPaletteRedBackground1,
     "::after": {
-      borderBottomColor: l.colorPaletteRedBorder2,
+      borderBottomColor: d.colorPaletteRedBorder2,
       borderBottomStyle: "solid",
       borderBottomWidth: "2px"
     }
   },
   efwInput: {
     "& [disabled]": {
-      backgroundColor: l.colorNeutralBackground3,
-      color: l.colorNeutralForeground2,
+      backgroundColor: d.colorNeutralBackground3,
+      color: d.colorNeutralForeground2,
       "&::placeholder": {
         color: "transparent"
       }
     },
     // Afectar el span que contiene el input disabled
     "&:has(span + [disabled])": {
-      backgroundColor: l.colorNeutralBackground3
+      backgroundColor: d.colorNeutralBackground3
     }
   }
-}), re = (N) => {
+}), fe = ($) => {
   const {
-    value: o = "",
-    onChange: b,
-    editable: P = !0,
-    disabled: V = !1,
-    className: z = "",
-    autoComplete: R = "off",
-    type: T = "text",
-    placeholder: L,
-    contentBefore: W,
-    contentAfter: $,
+    value: m,
+    defaultValue: E,
+    onChange: S,
+    editable: j = !0,
+    disabled: A = !1,
+    className: M = "",
+    autoComplete: O = "off",
+    type: U = "text",
+    placeholder: _,
+    contentBefore: q,
+    contentAfter: G,
     formatType: t = "none",
-    formatPattern: n,
-    formatFunction: y,
-    minLength: s = 0,
-    maxLength: m = 250,
-    validationState: j = "none",
-    setParentComponentState: r
-  } = N, F = Z(), k = H(), x = J(o), [p, E] = B(() => o ? f(o, t) : ""), [g, I] = B(() => C(o || "", t)), i = K(
-    () => ({ formatPattern: n, formatFunction: y }),
-    [n, y]
-  ), S = v((e) => {
-    if (t === "none" || !n) return !0;
+    formatPattern: s,
+    formatFunction: C,
+    minLength: p = 0,
+    maxLength: v = 250,
+    validationState: H = "none",
+    setParentComponentState: l
+  } = $, r = m !== void 0, B = (r ? m : E) ?? "", N = E ?? "", P = se(), R = oe(), w = ne(!1), [u, D] = W(() => c(B, t)), [J, F] = W(() => f(B, t, { formatPattern: s, formatFunction: C })), o = g(
+    () => ({ formatPattern: s, formatFunction: C }),
+    [s, C]
+  ), i = g(
+    () => c(N, t),
+    [N, t]
+  ), b = g(
+    () => f(i, t, o),
+    [i, t, o]
+  ), T = g(() => {
+    if (!r)
+      return { raw: "", formatted: "" };
+    const e = c(m ?? "", t), a = f(e, t, o);
+    return { raw: e, formatted: a };
+  }, [r, m, t, o]), x = r ? T.raw : u, y = r ? T.formatted : J, L = z((e) => {
+    if (t === "none" || !s) return !0;
     try {
-      return new RegExp(n).test(e);
+      return new RegExp(s).test(e);
     } catch {
       return !1;
     }
-  }, [t, n]), u = v((e) => s > 0 && e.length > 0 && e.length < s ? (r?.("error", `Por favor introduzca más de ${s} caracteres.`), !0) : e.length > m ? (r?.("error", `Por favor introduzca menos de ${m} caracteres.`), !0) : t === "chileanRut" && e.length > 0 && !X(e) ? (r?.("error", "El R.U.T ingresado no es válido."), !0) : t === "email" && e.length > 0 && !Y(e) ? (r?.("error", "El correo ingresado no es válido."), !0) : S(e) ? (r?.("none", ""), !1) : (r?.("error", "El formato del valor ingresado no es válido."), !0), [s, m, t, S, r]);
-  Q(() => {
-    if (o !== x.current) {
-      let e = f(o || "", t);
-      if (e !== p) {
-        const a = C(e, t, i);
-        u(e), E(e), I(a);
-      }
-      x.current = o;
-    }
-  }, [o, t, i, u, p]);
-  const A = v((e, a) => {
+  }, [t, s]), n = z((e) => p > 0 && e.length > 0 && e.length < p ? (l?.("error", `Por favor introduzca más de ${p} caracteres.`), !0) : e.length > v ? (l?.("error", `Por favor introduzca menos de ${v} caracteres.`), !0) : t === "chileanRut" && e.length > 0 && !ae(e) ? (l?.("error", "El R.U.T ingresado no es válido."), !0) : t === "email" && e.length > 0 && !le(e) ? (l?.("error", "El correo ingresado no es válido."), !0) : L(e) ? (l?.("none", ""), !1) : (l?.("error", "El formato del valor ingresado no es válido."), !0), [p, v, t, L, l]);
+  h(() => {
+    r && n(x);
+  }, [r, x, n]), h(() => {
+    r || (D((e) => e === i ? e : i), F((e) => e === b ? e : b), n(i));
+  }, [
+    r,
+    i,
+    b,
+    n
+  ]), h(() => {
+    r || F((e) => {
+      const a = f(u, t, o);
+      return a === e ? e : a;
+    });
+  }, [r, u, t, o]), h(() => {
+    r || w.current || (w.current = !0, n(u));
+  }, [r, u, n]);
+  const K = z((e, a) => {
     if (typeof a.value == "string") {
-      const O = f(a.value, t), c = C(O, t, i), d = f(c, t);
-      console.log("*********************************"), console.log("strippedValue", d), console.log("newFormattedValue", c), console.log("*********************************"), u(d), E(d), I(c), b?.(d, c);
+      const X = c(a.value, t), I = f(X, t, o), V = c(I, t);
+      n(V), r || (D(V), F(I)), S?.(V, I);
     }
-  }, [t, i, b, u]), M = q(
-    z,
-    F.efwInput,
-    j === "error" && F.efwInputError
+  }, [t, o, S, n, r]), Q = ee(
+    M,
+    P.efwInput,
+    H === "error" && P.efwInputError
   );
-  return /* @__PURE__ */ h(U, { children: P ? /* @__PURE__ */ h(
-    D,
+  return /* @__PURE__ */ k(Y, { children: j ? /* @__PURE__ */ k(
+    te,
     {
-      className: M,
-      id: k,
-      name: k,
-      type: T,
-      placeholder: L,
-      contentBefore: W,
-      contentAfter: $,
-      disabled: V,
-      value: g,
-      "data-raw-value": p,
-      autoComplete: R,
+      className: Q,
+      id: R,
+      name: R,
+      type: U,
+      placeholder: _,
+      contentBefore: q,
+      contentAfter: G,
+      disabled: A,
+      value: y,
+      "data-raw-value": x,
+      autoComplete: O,
       autoCorrect: "off",
       autoCapitalize: "off",
       spellCheck: "false",
-      onChange: A
+      onChange: K
     }
-  ) : /* @__PURE__ */ h(G, { style: g ? void 0 : { opacity: 0.7 }, children: g || "Sin datos disponibles" }) });
+  ) : /* @__PURE__ */ k(re, { style: y ? void 0 : { opacity: 0.7 }, children: y || "Sin datos disponibles" }) });
 };
 export {
-  re as EFWInput
+  fe as EFWInput
 };

package/dist/react-components/fields/EFWInput/EFWInput.types.d.ts

@@ -16,7 +16,7 @@ import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
  * // En un componente React
  * const [inputValue, setInputValue] = useState<EFWInputValue>("Valor inicial");
  */
-export type EFWInputValue = string | null;
+export type EFWInputValue = string | null | undefined;
 /**
  * Tipos de formato disponibles para el componente EFWInput.
  * Determina cómo se formatea y valida el contenido del campo de entrada.
@@ -103,6 +103,7 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
     /**
      * Valor actual del campo de entrada.
      * Puede ser una cadena de texto o null para campos vacíos.
+     * La presencia de esta propiedad activa el modo controlado del componente.
      *
      * @example
      * value="Juan Pérez"
@@ -111,6 +112,17 @@ export interface EFWInputProps extends Partial<EFWFieldChildrenProps> {
      * value={null}
      */
     value?: EFWInputValue;
+    /**
+     * Valor inicial usado en modo uncontrolled.
+     * Solo se aplica durante el montaje; luego el estado se maneja internamente.
+     *
+     * @example
+     * defaultValue="Texto inicial"
+     *
+     * @example
+     * defaultValue={null}
+     */
+    defaultValue?: EFWInputValue;
     /**
      * Tipo de input HTML que determina el comportamiento del campo.
      * Afecta el teclado virtual en dispositivos móviles y la validación del navegador.

package/dist/react-components/fields/EFWInput/EFWInput.utils.js

@@ -1,50 +1,49 @@
 const p = (t) => {
-  const n = (t || "").toString(), r = n.replace(/^0+/, "");
-  let e = "";
-  if (r != "" && r.length > 1) {
-    const l = r.replace(/\./g, "").replace(/-/g, ""), s = l.substring(0, l.length - 1);
+  const r = (t || "").toString(), e = r.replace(/^0+/, "");
+  let n = "";
+  if (e != "" && e.length > 1) {
+    const l = e.replace(/\./g, "").replace(/-/g, ""), s = l.substring(0, l.length - 1);
     let c = 0, o = 1;
     for (c = s.length - 1; c >= 0; c--)
-      e = s.charAt(c) + e, o % 3 == 0 && o <= s.length - 1 && (e = "." + e), o++;
+      n = s.charAt(c) + n, o % 3 == 0 && o <= s.length - 1 && (n = "." + n), o++;
     const g = l.substring(l.length - 1);
-    return e = e + "-" + g, e;
+    return n = n + "-" + g, n;
   } else
-    return n;
+    return r;
 }, u = (t) => {
   if (t = t || "", t = t.replace(/\./g, ""), !/^[0-9]+[-|‐]{1}[0-9kK]{1}$/.test(t))
     return !1;
-  const n = t.split("-");
-  let r = n[1];
-  const e = n[0], i = function(l) {
+  const r = t.split("-");
+  let e = r[1];
+  const n = r[0], i = function(l) {
     let s = 0, c = 1;
     for (; l; l = Math.floor(l / 10))
       c = (c + l % 10 * (9 - s++ % 6)) % 11;
     return c ? c - 1 : "k";
   };
-  return r == "K" && (r = "k"), i(e) == r;
-}, d = (t) => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(t), m = (t, n, r = ",", e = ".") => {
+  return e == "K" && (e = "k"), i(n) == e;
+}, d = (t) => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(t), m = (t, r, e = ",", n = ".") => {
   if (t == null) return "";
-  typeof t == "number" && (t = t.toString(), Number.isInteger(t) || (t = t.replace(".", e))), r = r || ",", e = e || ".";
-  const i = new RegExp("[^" + e + "\\d]", "g"), s = t.replace(i, "").toString().split(e), c = s[0].length % 3;
+  typeof t == "number" && (t = t.toString(), Number.isInteger(t) || (t = t.replace(".", n))), e = e || ",", n = n || ".";
+  const i = new RegExp("[^" + n + "\\d]", "g"), s = t.replace(i, "").toString().split(n), c = s[0].length % 3;
   let o = s[0].substr(0, c);
   const g = s[0].substr(c).match(/\d{3}/g);
-  return g && (o += (c ? r : "") + g.join(r)), o = s[1] != null ? o + e + s[1] : o, n == null ? o : o ? n + o : "";
+  return g && (o += (c ? e : "") + g.join(e)), o = s[1] != null ? o + n + s[1] : o, r == null ? o : o ? r + o : "";
 }, $ = (t = "") => {
-  const n = t.toString().replace(/[^\d.]/g, "");
-  return isNaN(Number(n)) || n === "" ? "" : n;
+  const r = t.toString().replace(/[^\d.]/g, "");
+  return isNaN(Number(r)) || r === "" ? "" : r;
 }, f = {
   none: (t) => t,
   email: (t) => t,
   phone: (t) => t.replace(/\D/g, ""),
   creditCard: (t) => t.replace(/\D/g, ""),
   chileanRut: (t) => {
-    console.log("value", t, typeof t);
-    const n = t.replace(/[^\dkK-]/gi, ""), r = n.includes("-"), e = n.replace(/-/g, "");
-    if (r && e.length >= 2) {
-      const i = e.length - 1;
-      return e.slice(0, i) + "-" + e.slice(i);
+    const r = t.replace(/[^\dkK-]/gi, ""), e = r.includes("-"), n = r.replace(/-/g, "");
+    if (e && n.length >= 2) {
+      const i = n.length - 1;
+      return n.slice(0, i) + "-" + n.slice(i);
     }
-    return e;
+    return n;
   },
   date: (t) => t.replace(/\D/g, ""),
   //number: (value) => stripFormatNumber(value || ''),
@@ -61,20 +60,20 @@ const p = (t) => {
   // 	if (isNaN(Number(value))) return value; // Si no es un número válido, retornar el valor original
   // 	return formatNumber(value)
   // },
-  custom: (t, n = {}) => {
-    if (n.formatFunction)
-      return n.formatFunction(t) || t;
-    if (n.formatPattern) {
-      let r = "", e = 0;
-      for (let i = 0; i < n.formatPattern.length && e < t.length; i++)
-        n.formatPattern[i] === "#" ? (r += t[e], e++) : (r += n.formatPattern[i], n.formatPattern[i] === t[e] && e++);
-      return r;
+  custom: (t, r = {}) => {
+    if (r.formatFunction)
+      return r.formatFunction(t) || t;
+    if (r.formatPattern) {
+      let e = "", n = 0;
+      for (let i = 0; i < r.formatPattern.length && n < t.length; i++)
+        r.formatPattern[i] === "#" ? (e += t[n], n++) : (e += r.formatPattern[i], r.formatPattern[i] === t[n] && n++);
+      return e;
     }
     return t;
   }
-}, F = (t, n) => t ? (console.log("FormatType", n), (f[n] || f.none)(t)) : "", y = (t, n, r = {}) => t ? (a[n] || a.none)(t, r) : "";
+}, F = (t, r) => t ? (f[r] || f.none)(t) : "", P = (t, r, e = {}) => t ? (a[r] || a.none)(t, e) : "";
 export {
-  y as applyFormatting,
+  P as applyFormatting,
   p as formatChileanRut,
   m as formatNumber,
   $ as stripFormatNumber,

package/dist/react-components/fields/EFWInputField/EFWInputField.js

@@ -5,62 +5,64 @@ const P = (n) => {
   const {
     title: a,
     infoLabel: o,
-    hint: i,
-    style: l = {},
+    hint: l,
+    style: i = {},
     size: r,
     required: d = !1,
     contentBefore: f,
     contentAfter: h,
     minLength: m = 0,
     maxLength: s = 250,
-    validationState: g,
-    validationMessage: p,
-    value: u = "",
+    validationState: u,
+    validationMessage: g,
+    value: p,
+    defaultValue: c,
     editable: e = !0,
-    disabled: c = !1,
-    hidden: C = !1,
-    onChange: F,
-    autoComplete: b = "off",
-    type: x = "text",
-    placeholder: L,
-    formatType: v = "none",
-    formatPattern: y,
-    formatFunction: E,
-    onValidationChange: W
+    disabled: C = !1,
+    hidden: F = !1,
+    onChange: b,
+    autoComplete: x = "off",
+    type: L = "text",
+    placeholder: v,
+    formatType: y = "none",
+    formatPattern: E,
+    formatFunction: W,
+    onValidationChange: I
   } = n;
   return /* @__PURE__ */ t(
     q,
     {
-      style: l,
+      style: i,
       title: a,
       infoLabel: o,
       weightLabel: e ? "regular" : "semibold",
-      hint: i,
+      hint: l,
       size: r,
       required: d,
-      validationState: g,
-      validationMessage: p,
-      onValidationChange: W,
-      hidden: C,
+      validationState: u,
+      validationMessage: g,
+      onValidationChange: I,
+      hidden: F,
       children: /* @__PURE__ */ t(
         w,
         {
-          value: u,
+          value: p,
+          defaultValue: c,
           editable: e,
-          onChange: (I, j) => {
-            F?.(I, j);
+          onChange: (V, j) => {
+            b?.(V, j);
           },
           minLength: m,
           maxLength: s,
-          disabled: c,
-          autoComplete: b,
-          type: x,
-          placeholder: L,
+          disabled: C,
+          autoComplete: x,
+          type: L,
+          placeholder: v,
           contentBefore: f,
           contentAfter: h,
-          formatType: v,
-          formatPattern: y,
-          formatFunction: E
+          formatType: y,
+          formatPattern: E,
+          formatFunction: W
         }
       )
     }