@producteca/producteca-ui-kit 1.71.2 → 1.72.1

package/dist/producteca-ui-kit.es.js

@@ -21,31 +21,49 @@ function clsx() {
 }
 const DEBUG_ENVS = ["local", "development"];
 const readEnv = () => {
+  const override = globalThis.__PRODUCTECA_UI_ENV__;
+  if (typeof override === "string") return override;
   const proc = globalThis.process;
-  if (proc?.env?.ENV) return proc.env.ENV;
-  const escapeHatch = globalThis.__PRODUCTECA_UI_ENV__;
-  if (typeof escapeHatch === "string") return escapeHatch;
+  if (proc?.env?.NODE_ENV) return proc.env.NODE_ENV;
   return void 0;
 };
 const isDebugEnabled = () => DEBUG_ENVS.indexOf(readEnv() ?? "") !== -1;
 const logHandler = (component, handler, args) => {
   console.debug(`[producteca-ui-kit] ${component}.${handler} →`, ...args);
 };
-const isHandlerProp = (key, value) => /^on[A-Z]/.test(key) && typeof value === "function";
+const MAX_DEPTH = 4;
+const isFunction$5 = (value) => typeof value === "function";
+const isHandlerKey = (key) => /^on[A-Z]/.test(key);
+const isReactElement = (value) => typeof value === "object" && value !== null && "$$typeof" in value;
+const isPlainObject$3 = (value) => {
+  if (typeof value !== "object" || value === null || isReactElement(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+const wrapHandler = (fn3, componentName, path) => (...args) => {
+  logHandler(componentName, path, args);
+  return fn3(...args);
+};
+const wrapDeep = (value, componentName, path, depth) => {
+  if (depth > MAX_DEPTH) return value;
+  if (Array.isArray(value)) {
+    return value.map((item2, index2) => wrapDeep(item2, componentName, `${path}[${index2}]`, depth + 1));
+  }
+  if (isPlainObject$3(value)) {
+    const next2 = {};
+    for (const key of Object.keys(value)) {
+      const child = value[key];
+      const childPath = path ? `${path}.${key}` : key;
+      next2[key] = isHandlerKey(key) && isFunction$5(child) ? wrapHandler(child, componentName, childPath) : wrapDeep(child, componentName, childPath, depth + 1);
+    }
+    return next2;
+  }
+  return value;
+};
 function withDebugHandlers(Component2, componentName) {
   if (!isDebugEnabled()) return Component2;
   const Wrapped = forwardRef((props, ref) => {
-    const source = props;
-    const next2 = { ...source };
-    for (const key of Object.keys(source)) {
-      const value = source[key];
-      if (isHandlerProp(key, value)) {
-        next2[key] = (...args) => {
-          logHandler(componentName, key, args);
-          return value(...args);
-        };
-      }
-    }
+    const next2 = wrapDeep(props, componentName, "", 0);
     const Cmp = Component2;
     return /* @__PURE__ */ jsx$1(Cmp, { ...next2, ...ref ? { ref } : {} });
   });
@@ -10014,7 +10032,7 @@ const ColorValues = map$2(allColors, "color");
 const Shades = map$2(Colors["grey"], (color2, shade) => shade);
 const Categories = map$2(Colors, (shades, category) => category);
 const isValidColor = (color2) => includes$1(ColorValues, color2);
-const CustomIcon = ({
+const CustomIconBase = ({
   color: color2 = getColor("grey", "500"),
   size: size2 = "16",
   sx,
@@ -10055,6 +10073,7 @@ const _translateSizeToFontSize = (size2) => {
   };
   return transform[size2] || transform["16"];
 };
+const CustomIcon = withDebugHandlers(CustomIconBase, "CustomIcon");
 const chip = "chip-module_chip_U3kfP";
 const title$8 = "chip-module_title_DARz9";
 const text = "chip-module_text_4xvju";
@@ -10064,6 +10083,7 @@ const tab$1 = "chip-module_tab_TQ-ke";
 const grey = "chip-module_grey_M9U8T";
 const active$3 = "chip-module_active_uJfiq";
 const disabled$8 = "chip-module_disabled_21ZO5";
+const clickable = "chip-module_clickable_M0dZ3";
 const success$1 = "chip-module_success_BJKfz";
 const error$3 = "chip-module_error_an-gm";
 const secondary = "chip-module_secondary_3aQ1S";
@@ -10079,26 +10099,44 @@ const styles$H = {
   grey,
   active: active$3,
   disabled: disabled$8,
+  clickable,
   success: success$1,
   error: error$3,
   secondary,
   primary,
   action: action$1
 };
-const ChipBase = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
+const ChipBase = ({ isActive, title: title2, text: text2, content: content2, onRemove = void 0, onClick = void 0, disabled: disabled2 = false, variant = "primary", size: size2 = "lg" }) => {
   const canRemove = onRemove && !disabled2;
-  return /* @__PURE__ */ jsx$1(Grow, { in: !!text2 || !!title2 || !!content2, unmountOnExit: true, children: /* @__PURE__ */ jsxs("span", { className: clsx(styles$H.chip, styles$H[variant], styles$H[size2], { [styles$H.disabled]: disabled2, [styles$H.active]: isActive }), children: [
-    content2,
-    (!!title2 || !!text2) && /* @__PURE__ */ jsxs("span", { children: [
-      !!title2 && /* @__PURE__ */ jsxs("span", { className: styles$H.title, children: [
-        title2,
-        " ",
-        text2 && ": "
-      ] }),
-      !!text2 && /* @__PURE__ */ jsx$1("span", { className: styles$H.text, children: text2 })
-    ] }),
-    canRemove && /* @__PURE__ */ jsx$1(CustomIcon, { className: styles$H.action, size: "8", onClick: canRemove ? onRemove : void 0, color: getColor("grey", "700"), children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
-  ] }) });
+  const isClickable = !!onClick && !disabled2;
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  };
+  return /* @__PURE__ */ jsx$1(Grow, { in: !!text2 || !!title2 || !!content2, unmountOnExit: true, children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(styles$H.chip, styles$H[variant], styles$H[size2], { [styles$H.disabled]: disabled2, [styles$H.active]: isActive, [styles$H.clickable]: isClickable }),
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick: isClickable ? onClick : void 0,
+      onKeyDown: isClickable ? handleKeyDown : void 0,
+      children: [
+        content2,
+        (!!title2 || !!text2) && /* @__PURE__ */ jsxs("span", { children: [
+          !!title2 && /* @__PURE__ */ jsxs("span", { className: styles$H.title, children: [
+            title2,
+            " ",
+            text2 && ": "
+          ] }),
+          !!text2 && /* @__PURE__ */ jsx$1("span", { className: styles$H.text, children: text2 })
+        ] }),
+        canRemove && /* @__PURE__ */ jsx$1(CustomIcon, { className: styles$H.action, size: "8", onClick: canRemove ? onRemove : void 0, color: getColor("grey", "700"), children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
+      ]
+    }
+  ) });
 };
 const Chip$1 = withDebugHandlers(ChipBase, "Chip");
 const defaultColor$c = getColor("grey", "500");
@@ -19067,14 +19105,12 @@ const breadcrumbItemFormat = `
 
   - **\`text\`** (string, requerido): El texto que se muestra para el item del breadcrumb
   - **\`onClick\`** (function, opcional): Función que se ejecuta al hacer click en el item
-  - **\`isActive\`** (boolean, opcional): Indica si el item está activo. Por defecto, el último item se considera activo
   - **\`href\`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)
 
   ### Comportamiento:
 
   - Los items con \`onClick\` se renderizan como botones clickeables
   - Los items sin \`onClick\` se renderizan como texto estático
-  - El último item siempre se considera activo (a menos que se especifique \`isActive: true\` en otro item)
   - Cada item se separa automáticamente con el símbolo ">"
 
   ### Ejemplo de uso:
@@ -19083,7 +19119,7 @@ const breadcrumbItemFormat = `
   const breadcrumbItems = [
     { text: 'Dashboard' },
     { text: 'Productos', onClick: () => navigate('/products') },
-    { text: 'Detalles', isActive: true }
+    { text: 'Detalles' }
   ]
 
   <Breadcrumb items={breadcrumbItems} />
@@ -19788,7 +19824,7 @@ const columns: TableColumn<MyRow>[] = [
 const tableBodyExample = `
 ## Uso del componente
 
-\`Table.Body\` renderiza las filas de datos. Lee las columnas del contexto provisto por \`Table\`. Cuando \`data\` está vacío muestra un \`EmptyState\` con \`emptyMessage\`.
+\`Table.Body\` renderiza las filas de datos. Lee las columnas del contexto provisto por \`Table\`. Integra \`AsyncContent\` internamente, por lo que acepta las props de estado (\`isLoading\`, \`error\`, \`empty\`, \`success\`) para mostrar el loader, el error o el estado vacío dentro de la tabla.
 
 ### Ejemplo básico:
 
@@ -19798,13 +19834,15 @@ const tableBodyExample = `
 </Table>
 \`\`\`
 
-### Estado vacío personalizado:
+### Con estados asíncronos:
 
 \`\`\`tsx
 <Table columns={columns}>
+  <Table.Header />
   <Table.Body
-    data={[]}
-    emptyMessage="No encontramos resultados para tu búsqueda"
+    data={rows}
+    isLoading={isLoading}
+    empty={{ text: 'No hay datos', actionText: 'Cargar', onClick: loadData }}
   />
 </Table>
 \`\`\`
@@ -19838,6 +19876,28 @@ const columns: TableColumn<MyRow>[] = [
 ]
 \`\`\`
 `;
+const tableAsyncContentExample = `
+\`Table.Body\` integra \`AsyncContent\` internamente: recibe las mismas props de estado (\`isLoading\`, \`error\`, \`empty\`, \`success\`) y resuelve el loader, el error y el estado vacío **dentro** de la tabla, sin desmontar el \`Table.Header\`.
+
+El estado vacío se deriva de \`data\` (no hace falta pasar \`items\`). Cuando hay filas y no hay carga/error, se renderizan las filas normalmente.
+
+### Ejemplo:
+
+\`\`\`tsx
+<Table columns={columns}>
+  <Table.Header />
+  <Table.Body
+    data={rows}
+    isLoading={isLoading}
+    empty={{
+      text: 'No hay datos disponibles',
+      actionText: 'Cargar datos',
+      onClick: loadData,
+    }}
+  />
+</Table>
+\`\`\`
+`;
 const spinnerExample = `
 ## Uso del componente
 
@@ -20116,7 +20176,8 @@ const es$3 = {
       example: spinnerExample
     },
     table: {
-      example: tableExample
+      example: tableExample,
+      asyncContent: tableAsyncContentExample
     },
     tableHeader: {
       example: tableHeaderExample
@@ -20244,6 +20305,7 @@ const es$3 = {
     text: "Texto",
     title: "Título",
     onRemove: "Función que se ejecuta al hacer clic en el ícono de cerrar",
+    onClick: "Callback que se ejecuta al hacer clic en el chip. Cuando se define, el chip se vuelve interactivo (clickable, accesible por teclado)",
     disabled: "Deshabilita el chip y oculta el ícono de cerrar",
     variant: "Variante visual del chip que cambia el color de fondo (default, success, error, warning, info)",
     size: "Tamaño del chip (sm: pequeño, lg: grande, undefined: tamaño por defecto)"
@@ -20971,293 +21033,287 @@ const VisibilityIcon = ({ showPassword, setShowPassword }) => {
   return /* @__PURE__ */ jsx$1("div", { "data-testid": "visibility-toggle", onClick: () => setShowPassword(!showPassword), children: showPassword ? /* @__PURE__ */ jsx$1(Visibility, {}) : /* @__PURE__ */ jsx$1(VisibilityOff, {}) });
 };
 var dayjs_min = { exports: {} };
-var hasRequiredDayjs_min;
-function requireDayjs_min() {
-  if (hasRequiredDayjs_min) return dayjs_min.exports;
-  hasRequiredDayjs_min = 1;
-  (function(module, exports) {
-    !function(t, e) {
-      module.exports = e();
-    }(commonjsGlobal, function() {
-      var t = 1e3, e = 6e4, n = 36e5, r2 = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
-        var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
-        return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
-      } }, m = function(t2, e2, n2) {
-        var r3 = String(t2);
-        return !r3 || r3.length >= e2 ? t2 : "" + Array(e2 + 1 - r3.length).join(n2) + t2;
-      }, v = { s: m, z: function(t2) {
-        var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r3 = Math.floor(n2 / 60), i2 = n2 % 60;
-        return (e2 <= 0 ? "+" : "-") + m(r3, 2, "0") + ":" + m(i2, 2, "0");
-      }, m: function t2(e2, n2) {
-        if (e2.date() < n2.date()) return -t2(n2, e2);
-        var r3 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r3, c), s2 = n2 - i2 < 0, u2 = e2.clone().add(r3 + (s2 ? -1 : 1), c);
-        return +(-(r3 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
-      }, a: function(t2) {
-        return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
-      }, p: function(t2) {
-        return { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r2, Q: f }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
-      }, u: function(t2) {
-        return void 0 === t2;
-      } }, g = "en", D = {};
-      D[g] = M;
-      var p = "$isDayjsObject", S = function(t2) {
-        return t2 instanceof _ || !(!t2 || !t2[p]);
-      }, w2 = function t2(e2, n2, r3) {
-        var i2;
-        if (!e2) return g;
-        if ("string" == typeof e2) {
-          var s2 = e2.toLowerCase();
-          D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
-          var u2 = e2.split("-");
-          if (!i2 && u2.length > 1) return t2(u2[0]);
-        } else {
-          var a2 = e2.name;
-          D[a2] = e2, i2 = a2;
-        }
-        return !r3 && i2 && (g = i2), i2 || !r3 && g;
-      }, O = function(t2, e2) {
-        if (S(t2)) return t2.clone();
-        var n2 = "object" == typeof e2 ? e2 : {};
-        return n2.date = t2, n2.args = arguments, new _(n2);
-      }, b = v;
-      b.l = w2, b.i = S, b.w = function(t2, e2) {
-        return O(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
-      };
-      var _ = function() {
-        function M2(t2) {
-          this.$L = w2(t2.locale, null, true), this.parse(t2), this.$x = this.$x || t2.x || {}, this[p] = true;
-        }
-        var m2 = M2.prototype;
-        return m2.parse = function(t2) {
-          this.$d = function(t3) {
-            var e2 = t3.date, n2 = t3.utc;
-            if (null === e2) return /* @__PURE__ */ new Date(NaN);
-            if (b.u(e2)) return /* @__PURE__ */ new Date();
-            if (e2 instanceof Date) return new Date(e2);
-            if ("string" == typeof e2 && !/Z$/i.test(e2)) {
-              var r3 = e2.match($);
-              if (r3) {
-                var i2 = r3[2] - 1 || 0, s2 = (r3[7] || "0").substring(0, 3);
-                return n2 ? new Date(Date.UTC(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2)) : new Date(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2);
-              }
+(function(module, exports) {
+  !function(t, e) {
+    module.exports = e();
+  }(commonjsGlobal, function() {
+    var t = 1e3, e = 6e4, n = 36e5, r2 = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
+      var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
+      return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
+    } }, m = function(t2, e2, n2) {
+      var r3 = String(t2);
+      return !r3 || r3.length >= e2 ? t2 : "" + Array(e2 + 1 - r3.length).join(n2) + t2;
+    }, v = { s: m, z: function(t2) {
+      var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r3 = Math.floor(n2 / 60), i2 = n2 % 60;
+      return (e2 <= 0 ? "+" : "-") + m(r3, 2, "0") + ":" + m(i2, 2, "0");
+    }, m: function t2(e2, n2) {
+      if (e2.date() < n2.date()) return -t2(n2, e2);
+      var r3 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r3, c), s2 = n2 - i2 < 0, u2 = e2.clone().add(r3 + (s2 ? -1 : 1), c);
+      return +(-(r3 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
+    }, a: function(t2) {
+      return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
+    }, p: function(t2) {
+      return { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r2, Q: f }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
+    }, u: function(t2) {
+      return void 0 === t2;
+    } }, g = "en", D = {};
+    D[g] = M;
+    var p = "$isDayjsObject", S = function(t2) {
+      return t2 instanceof _ || !(!t2 || !t2[p]);
+    }, w2 = function t2(e2, n2, r3) {
+      var i2;
+      if (!e2) return g;
+      if ("string" == typeof e2) {
+        var s2 = e2.toLowerCase();
+        D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
+        var u2 = e2.split("-");
+        if (!i2 && u2.length > 1) return t2(u2[0]);
+      } else {
+        var a2 = e2.name;
+        D[a2] = e2, i2 = a2;
+      }
+      return !r3 && i2 && (g = i2), i2 || !r3 && g;
+    }, O = function(t2, e2) {
+      if (S(t2)) return t2.clone();
+      var n2 = "object" == typeof e2 ? e2 : {};
+      return n2.date = t2, n2.args = arguments, new _(n2);
+    }, b = v;
+    b.l = w2, b.i = S, b.w = function(t2, e2) {
+      return O(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
+    };
+    var _ = function() {
+      function M2(t2) {
+        this.$L = w2(t2.locale, null, true), this.parse(t2), this.$x = this.$x || t2.x || {}, this[p] = true;
+      }
+      var m2 = M2.prototype;
+      return m2.parse = function(t2) {
+        this.$d = function(t3) {
+          var e2 = t3.date, n2 = t3.utc;
+          if (null === e2) return /* @__PURE__ */ new Date(NaN);
+          if (b.u(e2)) return /* @__PURE__ */ new Date();
+          if (e2 instanceof Date) return new Date(e2);
+          if ("string" == typeof e2 && !/Z$/i.test(e2)) {
+            var r3 = e2.match($);
+            if (r3) {
+              var i2 = r3[2] - 1 || 0, s2 = (r3[7] || "0").substring(0, 3);
+              return n2 ? new Date(Date.UTC(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2)) : new Date(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2);
             }
-            return new Date(e2);
-          }(t2), this.init();
-        }, m2.init = function() {
-          var t2 = this.$d;
-          this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
-        }, m2.$utils = function() {
-          return b;
-        }, m2.isValid = function() {
-          return !(this.$d.toString() === l);
-        }, m2.isSame = function(t2, e2) {
-          var n2 = O(t2);
-          return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
-        }, m2.isAfter = function(t2, e2) {
-          return O(t2) < this.startOf(e2);
-        }, m2.isBefore = function(t2, e2) {
-          return this.endOf(e2) < O(t2);
-        }, m2.$g = function(t2, e2, n2) {
-          return b.u(t2) ? this[e2] : this.set(n2, t2);
-        }, m2.unix = function() {
-          return Math.floor(this.valueOf() / 1e3);
-        }, m2.valueOf = function() {
-          return this.$d.getTime();
-        }, m2.startOf = function(t2, e2) {
-          var n2 = this, r3 = !!b.u(e2) || e2, f2 = b.p(t2), l2 = function(t3, e3) {
-            var i2 = b.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
-            return r3 ? i2 : i2.endOf(a);
-          }, $2 = function(t3, e3) {
-            return b.w(n2.toDate()[t3].apply(n2.toDate("s"), (r3 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
-          }, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
-          switch (f2) {
-            case h:
-              return r3 ? l2(1, 0) : l2(31, 11);
-            case c:
-              return r3 ? l2(1, M3) : l2(0, M3 + 1);
-            case o:
-              var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
-              return l2(r3 ? m3 - D2 : m3 + (6 - D2), M3);
-            case a:
-            case d:
-              return $2(v2 + "Hours", 0);
-            case u:
-              return $2(v2 + "Minutes", 1);
-            case s:
-              return $2(v2 + "Seconds", 2);
-            case i:
-              return $2(v2 + "Milliseconds", 3);
-            default:
-              return this.clone();
-          }
-        }, m2.endOf = function(t2) {
-          return this.startOf(t2, false);
-        }, m2.$set = function(t2, e2) {
-          var n2, o2 = b.p(t2), f2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = f2 + "Date", n2[d] = f2 + "Date", n2[c] = f2 + "Month", n2[h] = f2 + "FullYear", n2[u] = f2 + "Hours", n2[s] = f2 + "Minutes", n2[i] = f2 + "Seconds", n2[r2] = f2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
-          if (o2 === c || o2 === h) {
-            var y2 = this.clone().set(d, 1);
-            y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
-          } else l2 && this.$d[l2]($2);
-          return this.init(), this;
-        }, m2.set = function(t2, e2) {
-          return this.clone().$set(t2, e2);
-        }, m2.get = function(t2) {
-          return this[b.p(t2)]();
-        }, m2.add = function(r3, f2) {
-          var d2, l2 = this;
-          r3 = Number(r3);
-          var $2 = b.p(f2), y2 = function(t2) {
-            var e2 = O(l2);
-            return b.w(e2.date(e2.date() + Math.round(t2 * r3)), l2);
-          };
-          if ($2 === c) return this.set(c, this.$M + r3);
-          if ($2 === h) return this.set(h, this.$y + r3);
-          if ($2 === a) return y2(1);
-          if ($2 === o) return y2(7);
-          var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r3 * M3;
-          return b.w(m3, this);
-        }, m2.subtract = function(t2, e2) {
-          return this.add(-1 * t2, e2);
-        }, m2.format = function(t2) {
-          var e2 = this, n2 = this.$locale();
-          if (!this.isValid()) return n2.invalidDate || l;
-          var r3 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, c2 = n2.months, f2 = n2.meridiem, h2 = function(t3, n3, i3, s3) {
-            return t3 && (t3[n3] || t3(e2, r3)) || i3[n3].slice(0, s3);
-          }, d2 = function(t3) {
-            return b.s(s2 % 12 || 12, t3, "0");
-          }, $2 = f2 || function(t3, e3, n3) {
-            var r4 = t3 < 12 ? "AM" : "PM";
-            return n3 ? r4.toLowerCase() : r4;
-          };
-          return r3.replace(y, function(t3, r4) {
-            return r4 || function(t4) {
-              switch (t4) {
-                case "YY":
-                  return String(e2.$y).slice(-2);
-                case "YYYY":
-                  return b.s(e2.$y, 4, "0");
-                case "M":
-                  return a2 + 1;
-                case "MM":
-                  return b.s(a2 + 1, 2, "0");
-                case "MMM":
-                  return h2(n2.monthsShort, a2, c2, 3);
-                case "MMMM":
-                  return h2(c2, a2);
-                case "D":
-                  return e2.$D;
-                case "DD":
-                  return b.s(e2.$D, 2, "0");
-                case "d":
-                  return String(e2.$W);
-                case "dd":
-                  return h2(n2.weekdaysMin, e2.$W, o2, 2);
-                case "ddd":
-                  return h2(n2.weekdaysShort, e2.$W, o2, 3);
-                case "dddd":
-                  return o2[e2.$W];
-                case "H":
-                  return String(s2);
-                case "HH":
-                  return b.s(s2, 2, "0");
-                case "h":
-                  return d2(1);
-                case "hh":
-                  return d2(2);
-                case "a":
-                  return $2(s2, u2, true);
-                case "A":
-                  return $2(s2, u2, false);
-                case "m":
-                  return String(u2);
-                case "mm":
-                  return b.s(u2, 2, "0");
-                case "s":
-                  return String(e2.$s);
-                case "ss":
-                  return b.s(e2.$s, 2, "0");
-                case "SSS":
-                  return b.s(e2.$ms, 3, "0");
-                case "Z":
-                  return i2;
-              }
-              return null;
-            }(t3) || i2.replace(":", "");
-          });
-        }, m2.utcOffset = function() {
-          return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-        }, m2.diff = function(r3, d2, l2) {
-          var $2, y2 = this, M3 = b.p(d2), m3 = O(r3), v2 = (m3.utcOffset() - this.utcOffset()) * e, g2 = this - m3, D2 = function() {
-            return b.m(y2, m3);
-          };
-          switch (M3) {
-            case h:
-              $2 = D2() / 12;
-              break;
-            case c:
-              $2 = D2();
-              break;
-            case f:
-              $2 = D2() / 3;
-              break;
-            case o:
-              $2 = (g2 - v2) / 6048e5;
-              break;
-            case a:
-              $2 = (g2 - v2) / 864e5;
-              break;
-            case u:
-              $2 = g2 / n;
-              break;
-            case s:
-              $2 = g2 / e;
-              break;
-            case i:
-              $2 = g2 / t;
-              break;
-            default:
-              $2 = g2;
           }
-          return l2 ? $2 : b.a($2);
-        }, m2.daysInMonth = function() {
-          return this.endOf(c).$D;
-        }, m2.$locale = function() {
-          return D[this.$L];
-        }, m2.locale = function(t2, e2) {
-          if (!t2) return this.$L;
-          var n2 = this.clone(), r3 = w2(t2, e2, true);
-          return r3 && (n2.$L = r3), n2;
-        }, m2.clone = function() {
-          return b.w(this.$d, this);
-        }, m2.toDate = function() {
-          return new Date(this.valueOf());
-        }, m2.toJSON = function() {
-          return this.isValid() ? this.toISOString() : null;
-        }, m2.toISOString = function() {
-          return this.$d.toISOString();
-        }, m2.toString = function() {
-          return this.$d.toUTCString();
-        }, M2;
-      }(), k = _.prototype;
-      return O.prototype = k, [["$ms", r2], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function(t2) {
-        k[t2[1]] = function(e2) {
-          return this.$g(e2, t2[0], t2[1]);
+          return new Date(e2);
+        }(t2), this.init();
+      }, m2.init = function() {
+        var t2 = this.$d;
+        this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
+      }, m2.$utils = function() {
+        return b;
+      }, m2.isValid = function() {
+        return !(this.$d.toString() === l);
+      }, m2.isSame = function(t2, e2) {
+        var n2 = O(t2);
+        return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
+      }, m2.isAfter = function(t2, e2) {
+        return O(t2) < this.startOf(e2);
+      }, m2.isBefore = function(t2, e2) {
+        return this.endOf(e2) < O(t2);
+      }, m2.$g = function(t2, e2, n2) {
+        return b.u(t2) ? this[e2] : this.set(n2, t2);
+      }, m2.unix = function() {
+        return Math.floor(this.valueOf() / 1e3);
+      }, m2.valueOf = function() {
+        return this.$d.getTime();
+      }, m2.startOf = function(t2, e2) {
+        var n2 = this, r3 = !!b.u(e2) || e2, f2 = b.p(t2), l2 = function(t3, e3) {
+          var i2 = b.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
+          return r3 ? i2 : i2.endOf(a);
+        }, $2 = function(t3, e3) {
+          return b.w(n2.toDate()[t3].apply(n2.toDate("s"), (r3 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
+        }, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
+        switch (f2) {
+          case h:
+            return r3 ? l2(1, 0) : l2(31, 11);
+          case c:
+            return r3 ? l2(1, M3) : l2(0, M3 + 1);
+          case o:
+            var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
+            return l2(r3 ? m3 - D2 : m3 + (6 - D2), M3);
+          case a:
+          case d:
+            return $2(v2 + "Hours", 0);
+          case u:
+            return $2(v2 + "Minutes", 1);
+          case s:
+            return $2(v2 + "Seconds", 2);
+          case i:
+            return $2(v2 + "Milliseconds", 3);
+          default:
+            return this.clone();
+        }
+      }, m2.endOf = function(t2) {
+        return this.startOf(t2, false);
+      }, m2.$set = function(t2, e2) {
+        var n2, o2 = b.p(t2), f2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = f2 + "Date", n2[d] = f2 + "Date", n2[c] = f2 + "Month", n2[h] = f2 + "FullYear", n2[u] = f2 + "Hours", n2[s] = f2 + "Minutes", n2[i] = f2 + "Seconds", n2[r2] = f2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
+        if (o2 === c || o2 === h) {
+          var y2 = this.clone().set(d, 1);
+          y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
+        } else l2 && this.$d[l2]($2);
+        return this.init(), this;
+      }, m2.set = function(t2, e2) {
+        return this.clone().$set(t2, e2);
+      }, m2.get = function(t2) {
+        return this[b.p(t2)]();
+      }, m2.add = function(r3, f2) {
+        var d2, l2 = this;
+        r3 = Number(r3);
+        var $2 = b.p(f2), y2 = function(t2) {
+          var e2 = O(l2);
+          return b.w(e2.date(e2.date() + Math.round(t2 * r3)), l2);
         };
-      }), O.extend = function(t2, e2) {
-        return t2.$i || (t2(e2, _, O), t2.$i = true), O;
-      }, O.locale = w2, O.isDayjs = S, O.unix = function(t2) {
-        return O(1e3 * t2);
-      }, O.en = D[g], O.Ls = D, O.p = {}, O;
-    });
-  })(dayjs_min);
-  return dayjs_min.exports;
-}
-var dayjs_minExports = requireDayjs_min();
+        if ($2 === c) return this.set(c, this.$M + r3);
+        if ($2 === h) return this.set(h, this.$y + r3);
+        if ($2 === a) return y2(1);
+        if ($2 === o) return y2(7);
+        var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r3 * M3;
+        return b.w(m3, this);
+      }, m2.subtract = function(t2, e2) {
+        return this.add(-1 * t2, e2);
+      }, m2.format = function(t2) {
+        var e2 = this, n2 = this.$locale();
+        if (!this.isValid()) return n2.invalidDate || l;
+        var r3 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, c2 = n2.months, f2 = n2.meridiem, h2 = function(t3, n3, i3, s3) {
+          return t3 && (t3[n3] || t3(e2, r3)) || i3[n3].slice(0, s3);
+        }, d2 = function(t3) {
+          return b.s(s2 % 12 || 12, t3, "0");
+        }, $2 = f2 || function(t3, e3, n3) {
+          var r4 = t3 < 12 ? "AM" : "PM";
+          return n3 ? r4.toLowerCase() : r4;
+        };
+        return r3.replace(y, function(t3, r4) {
+          return r4 || function(t4) {
+            switch (t4) {
+              case "YY":
+                return String(e2.$y).slice(-2);
+              case "YYYY":
+                return b.s(e2.$y, 4, "0");
+              case "M":
+                return a2 + 1;
+              case "MM":
+                return b.s(a2 + 1, 2, "0");
+              case "MMM":
+                return h2(n2.monthsShort, a2, c2, 3);
+              case "MMMM":
+                return h2(c2, a2);
+              case "D":
+                return e2.$D;
+              case "DD":
+                return b.s(e2.$D, 2, "0");
+              case "d":
+                return String(e2.$W);
+              case "dd":
+                return h2(n2.weekdaysMin, e2.$W, o2, 2);
+              case "ddd":
+                return h2(n2.weekdaysShort, e2.$W, o2, 3);
+              case "dddd":
+                return o2[e2.$W];
+              case "H":
+                return String(s2);
+              case "HH":
+                return b.s(s2, 2, "0");
+              case "h":
+                return d2(1);
+              case "hh":
+                return d2(2);
+              case "a":
+                return $2(s2, u2, true);
+              case "A":
+                return $2(s2, u2, false);
+              case "m":
+                return String(u2);
+              case "mm":
+                return b.s(u2, 2, "0");
+              case "s":
+                return String(e2.$s);
+              case "ss":
+                return b.s(e2.$s, 2, "0");
+              case "SSS":
+                return b.s(e2.$ms, 3, "0");
+              case "Z":
+                return i2;
+            }
+            return null;
+          }(t3) || i2.replace(":", "");
+        });
+      }, m2.utcOffset = function() {
+        return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
+      }, m2.diff = function(r3, d2, l2) {
+        var $2, y2 = this, M3 = b.p(d2), m3 = O(r3), v2 = (m3.utcOffset() - this.utcOffset()) * e, g2 = this - m3, D2 = function() {
+          return b.m(y2, m3);
+        };
+        switch (M3) {
+          case h:
+            $2 = D2() / 12;
+            break;
+          case c:
+            $2 = D2();
+            break;
+          case f:
+            $2 = D2() / 3;
+            break;
+          case o:
+            $2 = (g2 - v2) / 6048e5;
+            break;
+          case a:
+            $2 = (g2 - v2) / 864e5;
+            break;
+          case u:
+            $2 = g2 / n;
+            break;
+          case s:
+            $2 = g2 / e;
+            break;
+          case i:
+            $2 = g2 / t;
+            break;
+          default:
+            $2 = g2;
+        }
+        return l2 ? $2 : b.a($2);
+      }, m2.daysInMonth = function() {
+        return this.endOf(c).$D;
+      }, m2.$locale = function() {
+        return D[this.$L];
+      }, m2.locale = function(t2, e2) {
+        if (!t2) return this.$L;
+        var n2 = this.clone(), r3 = w2(t2, e2, true);
+        return r3 && (n2.$L = r3), n2;
+      }, m2.clone = function() {
+        return b.w(this.$d, this);
+      }, m2.toDate = function() {
+        return new Date(this.valueOf());
+      }, m2.toJSON = function() {
+        return this.isValid() ? this.toISOString() : null;
+      }, m2.toISOString = function() {
+        return this.$d.toISOString();
+      }, m2.toString = function() {
+        return this.$d.toUTCString();
+      }, M2;
+    }(), k = _.prototype;
+    return O.prototype = k, [["$ms", r2], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function(t2) {
+      k[t2[1]] = function(e2) {
+        return this.$g(e2, t2[0], t2[1]);
+      };
+    }), O.extend = function(t2, e2) {
+      return t2.$i || (t2(e2, _, O), t2.$i = true), O;
+    }, O.locale = w2, O.isDayjs = S, O.unix = function(t2) {
+      return O(1e3 * t2);
+    }, O.en = D[g], O.Ls = D, O.p = {}, O;
+  });
+})(dayjs_min);
+var dayjs_minExports = dayjs_min.exports;
 const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 var es$2 = { exports: {} };
 (function(module, exports) {
   !function(e, o) {
-    module.exports = o(requireDayjs_min());
+    module.exports = o(dayjs_minExports);
   }(commonjsGlobal, function(e) {
     function o(e2) {
       return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
@@ -30823,11 +30879,11 @@ const useUtilityClasses$W = (ownerState) => {
     size: size2,
     color: color2,
     onDelete,
-    clickable,
+    clickable: clickable2,
     variant
   } = ownerState;
   const slots = {
-    root: ["root", variant, disabled2 && "disabled", `size${capitalize$1(size2)}`, `color${capitalize$1(color2)}`, clickable && "clickable", onDelete && "deletable"],
+    root: ["root", variant, disabled2 && "disabled", `size${capitalize$1(size2)}`, `color${capitalize$1(color2)}`, clickable2 && "clickable", onDelete && "deletable"],
     label: ["label"],
     avatar: ["avatar"],
     icon: ["icon"],
@@ -30845,7 +30901,7 @@ const ChipRoot = styled("div", {
     } = props;
     const {
       color: color2,
-      clickable,
+      clickable: clickable2,
       onDelete,
       size: size2,
       variant
@@ -30856,7 +30912,7 @@ const ChipRoot = styled("div", {
       [`& .${chipClasses.icon}`]: styles2.icon
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles2.deleteIcon
-    }, styles2.root, styles2[`size${capitalize$1(size2)}`], styles2[`color${capitalize$1(color2)}`], clickable && styles2.clickable, onDelete && styles2.deletable, styles2[variant]];
+    }, styles2.root, styles2[`size${capitalize$1(size2)}`], styles2[`color${capitalize$1(color2)}`], clickable2 && styles2.clickable, onDelete && styles2.deletable, styles2[variant]];
   }
 })(memoTheme(({
   theme
@@ -31194,8 +31250,8 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
       onKeyUp(event);
     }
   };
-  const clickable = clickableProp !== false && onClick ? true : clickableProp;
-  const component = clickable || onDelete ? ButtonBase : ComponentProp || "div";
+  const clickable2 = clickableProp !== false && onClick ? true : clickableProp;
+  const component = clickable2 || onDelete ? ButtonBase : ComponentProp || "div";
   const ownerState = {
     ...props,
     component,
@@ -31204,7 +31260,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
     color: color2,
     iconColor: /* @__PURE__ */ React.isValidElement(iconProp) ? iconProp.props.color || color2 : color2,
     onDelete: !!onDelete,
-    clickable,
+    clickable: clickable2,
     variant
   };
   const classes = useUtilityClasses$W(ownerState);
@@ -31262,7 +31318,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
     ref: handleRef,
     className: clsx(classes.root, className),
     additionalProps: {
-      disabled: clickable && disabled2 ? true : void 0,
+      disabled: clickable2 && disabled2 ? true : void 0,
       tabIndex: skipFocusWhenDisabled && disabled2 ? -1 : tabIndex,
       ...moreProps
     },
@@ -57526,11 +57582,11 @@ const datePickerDayStyles = {
   backgroundColor: "white",
   color: "#252525",
   borderRadius: "4px",
-  "&.MuiPickersDay-root": {
+  "&.MuiPickerDay-root": {
     fontSize: "14px",
     textTransform: "capitalize"
   },
-  "&.MuiPickersDay-today": {
+  "&.MuiPickerDay-today": {
     backgroundColor: "white",
     color: "#252525",
     border: "1px solid #252525"
@@ -57588,34 +57644,34 @@ const datePickerDigitalClockStyles = {
   }
 };
 const datePickerYearStyles = {
+  // MUI X v9 dropped the MuiPickersYear wrapper: year buttons are now
+  // .MuiYearCalendar-button rendered directly inside .MuiYearCalendar-root
   "& .MuiYearCalendar-root": {
-    "& .MuiPickersYear-root": {
-      "& .MuiPickersYear-yearButton": {
-        fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
-        fontSize: "14px",
-        backgroundColor: "white",
-        color: "#252525",
-        borderRadius: "4px",
-        "&.Mui-selected": {
-          backgroundColor: "#0066ff",
-          color: "white",
-          "&:hover": {
-            backgroundColor: "#0066ff"
-          },
-          "&:focus": {
-            backgroundColor: "#0066ff"
-          }
+    "& .MuiYearCalendar-button": {
+      fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+      fontSize: "14px",
+      backgroundColor: "white",
+      color: "#252525",
+      borderRadius: "4px",
+      "&.Mui-selected": {
+        backgroundColor: "#0066ff",
+        color: "white",
+        "&:hover": {
+          backgroundColor: "#0066ff"
         },
-        "&:hover:not(.Mui-selected)": {
-          backgroundColor: "#EDEDED",
-          color: "#252525"
+        "&:focus": {
+          backgroundColor: "#0066ff"
         }
+      },
+      "&:hover:not(.Mui-selected)": {
+        backgroundColor: "#EDEDED",
+        color: "#252525"
       }
     }
   }
 };
 const datePickerPopperStyles = {
-  "& .MuiPickersPopper-paper": {
+  "& .MuiPickerPopper-paper": {
     boxShadow: "0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)"
   }
 };
@@ -57635,7 +57691,17 @@ const styles$w = {
 };
 dayjs.extend(customParseFormat);
 const ActionComponent = ({ showClearIcon, onClear, onOpen }) => /* @__PURE__ */ jsxs("div", { className: styles$w["calendar-icon-container"], "data-testid": "action-component", children: [
-  showClearIcon && /* @__PURE__ */ jsx$1("div", { onClick: onClear, className: styles$w["clear-icon"], children: /* @__PURE__ */ jsx$1(CustomIcon, { children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) }) }),
+  showClearIcon && /* @__PURE__ */ jsx$1(
+    "div",
+    {
+      onClick: (event) => {
+        event.stopPropagation();
+        onClear?.();
+      },
+      className: styles$w["clear-icon"],
+      children: /* @__PURE__ */ jsx$1(CustomIcon, { children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
+    }
+  ),
   /* @__PURE__ */ jsx$1("div", { className: styles$w["divider-line"] }),
   /* @__PURE__ */ jsx$1("div", { onClick: onOpen, className: styles$w["calendar-icon"], children: /* @__PURE__ */ jsx$1(CustomIcon, { size: "12", children: /* @__PURE__ */ jsx$1(CalendarTodayIcon, {}) }) })
 ] });
@@ -57656,7 +57722,7 @@ const ReadOnlyDateField = ({
   return /* @__PURE__ */ jsx$1(
     TextField,
     {
-      ref: (element) => triggerRef(element),
+      ref: triggerRef,
       value: displayValue,
       placeholder,
       name,
@@ -57729,6 +57795,7 @@ const getPickerProps = ({
   currentValue,
   finalFormat,
   onChange: onChange2,
+  onDraftChange,
   disabled: disabled2,
   minDate,
   maxDate,
@@ -57742,6 +57809,7 @@ const getPickerProps = ({
 }) => ({
   open,
   value: convertToDate$1(currentValue, finalFormat),
+  onChange: onDraftChange,
   onAccept: onChange2,
   onClose,
   disabled: disabled2,
@@ -57828,8 +57896,11 @@ const DatePickerInputBase = (props) => {
       return date ? date.toDate() : null;
     }
   });
-  const _handleChange = (date) => {
+  const _handleDraftChange = (date) => {
     setCurrentValue(date ? date.format(finalFormat) : null);
+  };
+  const _handleChange = (date) => {
+    _handleDraftChange(date);
     fieldHandleChange(date);
   };
   const _handleClear = () => {
@@ -57844,7 +57915,7 @@ const DatePickerInputBase = (props) => {
     setIsOpen(false);
   };
   dayjs.locale("es");
-  const Picker = () => {
+  const renderPicker = () => {
     const commonProps = getPickerProps({
       currentValue,
       finalFormat,
@@ -57854,6 +57925,7 @@ const DatePickerInputBase = (props) => {
       placeholder,
       name,
       onChange: _handleChange,
+      onDraftChange: _handleDraftChange,
       onClear: _handleClear,
       onOpen: _handleOpen,
       onClose: _handleClose,
@@ -57907,7 +57979,7 @@ const DatePickerInputBase = (props) => {
             }
           ),
           children: [
-            /* @__PURE__ */ jsx$1(Picker, {}),
+            renderPicker(),
             !noErrors && validated && /* @__PURE__ */ jsx$1(ErrorMessage, { validationProps })
           ]
         }
@@ -65636,7 +65708,7 @@ const _convertValueToOption = (value) => {
   if (!value) return null;
   return { value, label: value };
 };
-const Searcher = (props) => {
+const SearcherBase = (props) => {
   const {
     name,
     label: label2,
@@ -65826,6 +65898,7 @@ const Searcher = (props) => {
     )
   ] });
 };
+const Searcher = withDebugHandlers(SearcherBase, "Searcher");
 const title$5 = "switchInput-module_title_lBK2p";
 const disabled$4 = "switchInput-module_disabled_yz9dR";
 const lg$5 = "switchInput-module_lg_WMIDO";
@@ -66207,7 +66280,7 @@ const Check = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
 const ContentCopy = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
 }), "ContentCopy");
-const CopyButton = ({
+const CopyButtonBase = ({
   onClick,
   copyText = locale("copyButton.copy"),
   copiedText = locale("copyButton.copied"),
@@ -66251,6 +66324,7 @@ const Icons = ({ copied }) => /* @__PURE__ */ jsxs("div", { className: "copy-btn
   /* @__PURE__ */ jsx$1("div", { className: `copy-icon ${copied ? "hidden" : ""}`, children: /* @__PURE__ */ jsx$1(ContentCopy, { "data-testid": "ContentCopyIcon" }) }),
   /* @__PURE__ */ jsx$1("div", { className: `check-icon ${!copied ? "hidden" : ""}`, children: /* @__PURE__ */ jsx$1(Check, {}) })
 ] });
+const CopyButton = withDebugHandlers(CopyButtonBase, "CopyButton");
 const dense = "headerSection-module_dense_f1FWn";
 const content = "headerSection-module_content_5y2PB";
 const title$4 = "headerSection-module_title_cabYm";
@@ -68206,38 +68280,19 @@ const AlertBase = ({
   );
 };
 const Alert = withDebugHandlers(AlertBase, "Alert");
-var baseKeys = _baseKeys, getTag = _getTag, isArrayLike$1 = isArrayLike_1, isString = isString_1, stringSize = _stringSize;
-var mapTag = "[object Map]", setTag = "[object Set]";
-function size(collection) {
-  if (collection == null) {
-    return 0;
-  }
-  if (isArrayLike$1(collection)) {
-    return isString(collection) ? stringSize(collection) : collection.length;
-  }
-  var tag = getTag(collection);
-  if (tag == mapTag || tag == setTag) {
-    return collection.size;
-  }
-  return baseKeys(collection).length;
-}
-var size_1 = size;
-const size$1 = /* @__PURE__ */ getDefaultExportFromCjs(size_1);
 const breadcrumb = "breadcrumb-module_breadcrumb_r-ILp";
 const styles$8 = {
   breadcrumb,
   "breadcrumb-item": "breadcrumb-module_breadcrumb-item_suTUF"
 };
 const BreadcrumbItemComponent = ({ item: item2, index: index2, items }) => {
-  const isLast = index2 === size$1(items) - 1;
   const text2 = `${item2.text} >`;
-  return item2.isActive || isLast ? /* @__PURE__ */ jsx$1(
-    Button$2,
+  return item2?.onClick || item2?.href ? /* @__PURE__ */ jsx$1(
+    Link,
     {
-      variant: "link",
-      size: "sm",
-      label: text2,
-      onClick: item2.onClick
+      href: `${item2?.href}`,
+      onClick: item2?.onClick,
+      children: text2
     }
   ) : /* @__PURE__ */ jsxs("div", { className: styles$8["breadcrumb-item"], children: [
     " ",
@@ -68245,13 +68300,14 @@ const BreadcrumbItemComponent = ({ item: item2, index: index2, items }) => {
     " "
   ] });
 };
-const Breadcrumb = ({
+const BreadcrumbBase = ({
   items,
   className,
   ...otherProps
 }) => {
   return /* @__PURE__ */ jsx$1("nav", { className: clsx(styles$8["breadcrumb"], className), "aria-label": "Breadcrumb", ...otherProps, children: map$2(items, (item2, index2) => /* @__PURE__ */ jsx$1(BreadcrumbItemComponent, { item: item2, index: index2, items }, index2)) });
 };
+const Breadcrumb = withDebugHandlers(BreadcrumbBase, "Breadcrumb");
 const MoreVertIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
 }), "MoreVert");
@@ -68400,8 +68456,7 @@ const MenuAction = ({
         onClose: handleClose,
         disableScrollLock: true,
         slotProps: {
-          list: { "aria-labelledby": id },
-          transition: Grow
+          list: { "aria-labelledby": id }
         },
         anchorOrigin: {
           vertical: "bottom",
@@ -68493,11 +68548,11 @@ const WarningModalBase = ({
   }
 );
 const WarningModal = withDebugHandlers(WarningModalBase, "WarningModal");
-var baseIteratee$1 = _baseIteratee, isArrayLike = isArrayLike_1, keys = keys_1;
+var baseIteratee$1 = _baseIteratee, isArrayLike$1 = isArrayLike_1, keys = keys_1;
 function createFind$1(findIndexFunc) {
   return function(collection, predicate, fromIndex) {
     var iterable = Object(collection);
-    if (!isArrayLike(collection)) {
+    if (!isArrayLike$1(collection)) {
       var iteratee = baseIteratee$1(predicate);
       collection = keys(collection);
       predicate = function(key) {
@@ -77095,6 +77150,23 @@ const DraggableListBase = ({
   ] });
 };
 const DraggableList = withDebugHandlers(DraggableListBase, "DraggableList");
+var baseKeys = _baseKeys, getTag = _getTag, isArrayLike = isArrayLike_1, isString = isString_1, stringSize = _stringSize;
+var mapTag = "[object Map]", setTag = "[object Set]";
+function size(collection) {
+  if (collection == null) {
+    return 0;
+  }
+  if (isArrayLike(collection)) {
+    return isString(collection) ? stringSize(collection) : collection.length;
+  }
+  var tag = getTag(collection);
+  if (tag == mapTag || tag == setTag) {
+    return collection.size;
+  }
+  return baseKeys(collection).length;
+}
+var size_1 = size;
+const size$1 = /* @__PURE__ */ getDefaultExportFromCjs(size_1);
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded");
@@ -77183,12 +77255,23 @@ const styles = {
   "header-row": "table-module_header-row_ry6Lv",
   "body-row": "table-module_body-row_OMOX0",
   "header-cell": "table-module_header-cell_0FEWz",
-  "body-cell": "table-module_body-cell_p4019"
+  "body-cell": "table-module_body-cell_p4019",
+  "body-async": "table-module_body-async_21Z7L"
 };
-const TableBody = ({ data, emptyMessage }) => {
+const TableBody = ({ data, isLoading, error: error2, empty, success: success2 }) => {
   const columns = useContext(TableContext);
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, children: /* @__PURE__ */ jsx$1(EmptyState, { text: emptyMessage }) }) }) });
+  const showContent = !isLoading && !error2?.value && !success2?.value && data.length > 0;
+  if (!showContent) {
+    return /* @__PURE__ */ jsx$1("tbody", { children: /* @__PURE__ */ jsx$1("tr", { children: /* @__PURE__ */ jsx$1("td", { colSpan: columns.length, className: styles["body-async"], children: /* @__PURE__ */ jsx$1(
+      AsyncContent,
+      {
+        isLoading,
+        error: error2,
+        success: success2,
+        empty: { ...empty, items: data },
+        children: /* @__PURE__ */ jsx$1(Fragment$1, {})
+      }
+    ) }) }) });
   }
   return /* @__PURE__ */ jsx$1("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx$1("tr", { className: styles["body-row"], children: columns.map((col) => {
     const value = row[col.key];