welcome-ui 10.0.0-alpha.10 → 10.0.0-alpha.11

package/dist/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import './Checkbox.css';
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
 import { a as x } from "./KPUWHTQJ-Dv3cAqjP.js";
 import { forwardRef as C, useState as l } from "react";
 import { useField as g } from "./Field.js";
@@ -14,9 +14,9 @@ const y = "_root_luk8p_2", F = "_indeterminate_luk8p_67", I = {
   "variant-success": "_variant-success_luk8p_61",
   indeterminate: F
 }, N = w(I), j = C(
-  ({ checked: m = !1, className: u, indeterminate: a = !1, onChange: i, variant: f, ...o }, p) => {
-    const [e, _] = l(m), [k, t] = l(!1), { getInputProps: n, variant: v } = g(), r = v || f, { disabled: c } = n(o), h = () => {
-      _(!e), i && i(!e);
+  ({ checked: m = !1, className: u, indeterminate: s = !1, onChange: a, variant: f, ...t }, p) => {
+    const [e, _] = l(m), [k, n] = l(!1), { getInputProps: o, variant: v } = g(), r = v || f, { disabled: c } = o(t), h = () => {
+      _(!e), a && a(!e);
     };
     return /* @__PURE__ */ b(
       "div",
@@ -26,24 +26,25 @@ const y = "_root_luk8p_2", F = "_indeterminate_luk8p_67", I = {
         className: N(
           "root",
           r && `variant-${r}`,
-          a && "indeterminate",
+          s && "indeterminate",
+          "field-input",
           u
         ),
         "data-focus-visible": k || void 0,
         onClick: c ? void 0 : h,
         children: [
-          /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(
+          /* @__PURE__ */ i(V, { children: /* @__PURE__ */ i(
             x,
             {
-              ...n(o),
+              ...o(t),
               checked: e,
-              onBlur: () => t(!1),
-              onFocusVisible: () => t(!0),
+              onBlur: () => n(!1),
+              onFocusVisible: () => n(!0),
               ref: p
             }
           ) }),
-          e ? /* @__PURE__ */ s(d, { name: "check", size: "sm" }) : null,
-          !e && a ? /* @__PURE__ */ s(d, { name: "minus", size: "sm" }) : null
+          e ? /* @__PURE__ */ i(d, { name: "check", size: "sm" }) : null,
+          !e && s ? /* @__PURE__ */ i(d, { name: "minus", size: "sm" }) : null
         ]
       }
     );

package/dist/DatePicker.js

@@ -1,15 +1,15 @@
 "use client";
 import './DatePicker.css';
-import { jsxs as q, jsx as l } from "react/jsx-runtime";
-import { useState as $, useMemo as k, useEffect as j, forwardRef as G, useRef as J } from "react";
-import { D as Q, C as V } from "./CustomPopper-C1wIDHbM.js";
-import { Button as F } from "./Button.js";
-import { Icon as M } from "./Icon.js";
-import { Select as w } from "./Select.js";
-import { c as P } from "./index-PAaZGbyz.js";
-import { g as W, a as X, s as v, b as Z, D as K } from "./utils-BD597oo6.js";
-import { InputText as Y } from "./InputText.js";
-const g = P(v), B = ({
+import { jsxs as G, jsx as l } from "react/jsx-runtime";
+import { useState as A, useMemo as $, useEffect as S, forwardRef as J, useRef as Q } from "react";
+import { D as V, C as W } from "./CustomPopper-C1wIDHbM.js";
+import { Button as j } from "./Button.js";
+import { Icon as F } from "./Icon.js";
+import { Select as M } from "./Select.js";
+import { c as v } from "./index-PAaZGbyz.js";
+import { g as X, a as Z, s as B, b as Y, D as K } from "./utils-BD597oo6.js";
+import { InputText as g } from "./InputText.js";
+const C = v(B), L = ({
   changeMonth: x,
   changeYear: N,
   date: f,
@@ -22,49 +22,49 @@ const g = P(v), B = ({
   locale: D,
   startYear: a
 }) => {
-  const [u, R] = $(null), [i, E] = $(null), o = k(() => W(D), [D]), r = k(() => X(a, c), [a, c]), m = (t || u === o[0].label) && i === a, H = (t || u === o[o.length - 1].label) && i === c;
-  return j(() => {
-    const b = new Date(f), d = o[b.getMonth()].label, A = b.getFullYear();
-    R(d), E(A);
-  }, [f, o]), /* @__PURE__ */ q("div", { className: g("custom-header"), children: [
+  const [p, R] = A(null), [m, w] = A(null), i = $(() => X(D), [D]), r = $(() => Z(a, c), [a, c]), o = (t || p === i[0].label) && m === a, E = (t || p === i[i.length - 1].label) && m === c;
+  return S(() => {
+    const b = new Date(f), u = i[b.getMonth()].label, H = b.getFullYear();
+    R(u), w(H);
+  }, [f, i]), /* @__PURE__ */ G("div", { className: C("custom-header"), children: [
     /* @__PURE__ */ l(
-      F,
+      j,
       {
-        disabled: m,
+        disabled: o,
         onClick: t ? z : T,
         size: "sm",
         title: `Previous ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ l(M, { name: "angle-left-b", size: "xs" })
+        children: /* @__PURE__ */ l(F, { name: "angle-left-b", size: "xs" })
       }
     ),
     !t && /* @__PURE__ */ l(
-      w,
+      M,
       {
         id: "month",
         name: "month",
         onChange: x,
-        options: o,
+        options: i,
         size: "md",
-        value: u
+        value: p
       }
     ),
-    /* @__PURE__ */ l(w, { id: "year", name: "year", onChange: N, options: r, size: "md", value: i }),
+    /* @__PURE__ */ l(M, { id: "year", name: "year", onChange: N, options: r, size: "md", value: m }),
     /* @__PURE__ */ l(
-      F,
+      j,
       {
-        disabled: H,
+        disabled: E,
         onClick: t ? y : I,
         size: "sm",
         title: `Next ${t ? "year" : "month"}`,
         variant: "tertiary",
-        children: /* @__PURE__ */ l(M, { name: "angle-right-b", size: "xs" })
+        children: /* @__PURE__ */ l(F, { name: "angle-right-b", size: "xs" })
       }
     )
   ] });
 };
-B.displayName = "DateTimePicker.CustomHeader";
-const h = P(v), C = G(
+L.displayName = "DateTimePicker.CustomHeader";
+const P = v(B), h = J(
   ({
     autoFocus: x,
     className: N,
@@ -77,93 +77,94 @@ const h = P(v), C = G(
     onChange: t,
     placeholder: D,
     preventVirtualKeyboard: a = !1,
-    showMonthYearPicker: u,
+    showMonthYearPicker: p,
     size: R = "md",
-    startYear: i = 1900,
-    transparent: E,
-    useWeekdaysShort: o = !0,
+    startYear: m = 1900,
+    transparent: w,
+    useWeekdaysShort: i = !0,
     value: r = K,
-    ...m
-  }, H) => {
-    const b = m == null ? void 0 : m.timeIntervals, d = (e) => Z(e, b), [A, n] = $(d(r)), L = J(), S = H || L;
-    j(() => {
-      t == null || t(d(r));
-    }, []), j(() => {
-      var p;
-      const e = d(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
-      ((p = new Date(Date.parse(s))) == null ? void 0 : p.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), n(e);
+    ...o
+  }, E) => {
+    const b = o == null ? void 0 : o.timeIntervals, u = (e) => Y(e, b), [H, d] = A(u(r)), O = Q(), k = E || O;
+    S(() => {
+      t == null || t(u(r));
+    }, []), S(() => {
+      var n;
+      const e = u(r), s = typeof r == "object" ? r == null ? void 0 : r.toISOString() : r;
+      ((n = new Date(Date.parse(s))) == null ? void 0 : n.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), d(e);
     }, [r]);
-    const O = (e) => {
+    const U = (e) => {
       var s;
-      ["Enter", "Escape"].includes(e.key) && ((s = S.current) == null || s.blur());
-    }, U = (e) => {
-      var s;
-      e.preventDefault(), (s = S.current) == null || s.blur(), n(null), t == null || t(null);
+      ["Enter", "Escape"].includes(e.key) && ((s = k.current) == null || s.blur());
     }, _ = (e) => {
+      var s;
+      e.preventDefault(), (s = k.current) == null || s.blur(), d(null), t == null || t(null);
+    }, q = (e) => {
       if (!e) {
-        n(null), t == null || t(null);
+        d(null), t == null || t(null);
         return;
       }
       const s = Array.isArray(e) ? e[0] : e;
       if (!s) {
-        n(null), t == null || t(null);
+        d(null), t == null || t(null);
         return;
       }
-      const p = d(s);
-      s.setHours(p.getHours(), p.getMinutes()), n(s), t == null || t(new Date(s));
+      const n = u(s);
+      s.setHours(n.getHours(), n.getMinutes()), d(s), t == null || t(new Date(s));
     };
     return (
       // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       /* @__PURE__ */ l(
-        Q,
+        V,
         {
           autoComplete: "off",
           calendarClassName: "date-picker-popper",
           customInput: /* @__PURE__ */ l(
-            Y,
+            g,
             {
               autoFocus: x,
-              className: h("date-picker", N),
-              "data-testid": m["data-testid"],
+              className: P("date-picker", N),
+              "data-testid": o["data-testid"],
               disabled: T,
               icon: c,
               iconPlacement: I,
               inputMode: a ? "none" : "text",
               isClearable: !0,
-              onReset: U,
+              onReset: _,
               placeholder: D,
-              ref: S,
+              ref: k,
               size: R,
-              transparent: E
+              transparent: w
             }
           ),
           dateFormat: f,
           locale: y,
-          onChange: _,
-          onKeyDown: O,
-          popperContainer: V,
+          onChange: q,
+          onKeyDown: U,
+          popperContainer: W,
           renderCustomHeader: (e) => /* @__PURE__ */ l(
-            B,
+            L,
             {
               endYear: z,
-              isMonthYearPicker: u,
+              isMonthYearPicker: p,
               locale: y,
-              startYear: i,
+              startYear: m,
               ...e
             }
           ),
-          selected: A,
-          showMonthYearPicker: u,
-          useWeekdaysShort: o,
-          ...m
+          selected: H,
+          showMonthYearPicker: p,
+          useWeekdaysShort: i,
+          ...o,
+          wrapperClassName: P(o.wrapperClassName, "date-picker-wrapper", "field-input")
         }
       )
     );
   }
 );
-C.displayName = "DatePicker";
+h.displayName = "DatePicker";
 export {
-  C as DatePicker
+  h as DatePicker
 };

package/dist/DateTimePicker.js

@@ -10,11 +10,11 @@ const L = F(j), M = E(
     locale: p,
     onChange: s,
     size: D = "md",
-    transparent: k,
-    value: r = b,
+    transparent: n,
+    value: i = b,
     ...l
-  }, n) => {
-    const u = l == null ? void 0 : l.timeIntervals, i = (t) => I(t, u), [T, c] = P(i(r)), y = x(), R = n || y, m = (t) => {
+  }, k) => {
+    const u = l == null ? void 0 : l.timeIntervals, r = (t) => I(t, u), [T, c] = P(r(i)), y = x(), R = k || y, m = (t) => {
       if (!t) {
         c(null), s == null || s(null);
         return;
@@ -24,16 +24,16 @@ const L = F(j), M = E(
         c(null), s == null || s(null);
         return;
       }
-      const f = i(e);
+      const f = r(e);
       e.setHours(f.getHours(), f.getMinutes()), c(e), s == null || s(new Date(e));
     };
     return a(() => {
-      m(i(r));
+      m(r(i));
     }, []), a(() => {
       var e;
-      const t = i(r);
-      ((e = new Date(r)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
-    }, [r]), /* @__PURE__ */ A("div", { className: L("date-time-picker"), children: N.map(o, (t, e) => H(t, {
+      const t = r(i);
+      ((e = new Date(i)) == null ? void 0 : e.getTime()) - (t == null ? void 0 : t.getTime()) !== 0 && m(t), c(t);
+    }, [i]), /* @__PURE__ */ A("div", { className: L("date-time-picker", "field-input"), children: N.map(o, (t, e) => H(t, {
       disabled: d,
       inputRef: e === 0 ? R : null,
       // give ref only to the DatePicker
@@ -42,7 +42,7 @@ const L = F(j), M = E(
       onChange: m,
       size: D,
       timeIntervals: u,
-      transparent: k,
+      transparent: n,
       value: T
     })) });
   }

package/dist/Field.css

@@ -1 +1 @@
-@layer components{._root_6ifwm_2{display:grid;grid-template-areas:"label" "input";width:100%}._root_6ifwm_2:has(._label_6ifwm_7):has(._hint_6ifwm_7){grid-template-areas:"label" "input" "hint"}._root_6ifwm_2:not(:has(._label_6ifwm_7)):has(._hint_6ifwm_7){grid-template-areas:"input" "hint"}._root_6ifwm_2:not(._inline_6ifwm_13) ._hint_6ifwm_7{margin-top:var(--components-dimensions-field-gap-assistive)}._root_6ifwm_2:not(._inline_6ifwm_13) ._label_6ifwm_7{margin-bottom:var(--components-dimensions-field-gap-label)}._inline_6ifwm_13{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--components-dimensions-field-gap-assistive);grid-column-gap:var(--components-dimensions-field-gap-label)}._inline_6ifwm_13:has(._label_6ifwm_7):has(._hint_6ifwm_7){grid-template-areas:"input label" ". hint"}._inline_6ifwm_13:not(:has(._label_6ifwm_7)):has(._hint_6ifwm_7){grid-template-areas:"input ." ". hint"}._label_6ifwm_7{grid-area:label}._input_6ifwm_35{display:flex;align-items:center;grid-area:input;width:100%}._hint_6ifwm_7{grid-area:hint}._visuallyHidden_6ifwm_44{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}
+@layer components{._root_wx4cj_2{display:grid;grid-template-areas:"label" "input";width:100%}._root_wx4cj_2:has(._label_wx4cj_7):has(._hint_wx4cj_7){grid-template-areas:"label" "input" "hint"}._root_wx4cj_2:not(:has(._label_wx4cj_7)):has(._hint_wx4cj_7){grid-template-areas:"input" "hint"}._root_wx4cj_2:not(._inline_wx4cj_13) ._hint_wx4cj_7{margin-top:var(--components-dimensions-field-gap-assistive)}._root_wx4cj_2:not(._inline_wx4cj_13) ._label_wx4cj_7{margin-bottom:var(--components-dimensions-field-gap-label)}._root_wx4cj_2 .field-input{align-self:center;grid-area:input}._root_wx4cj_2 .field-input.date-picker-wrapper{justify-self:start}._inline_wx4cj_13{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--components-dimensions-field-gap-assistive);grid-column-gap:var(--components-dimensions-field-gap-label)}._inline_wx4cj_13:has(._label_wx4cj_7):has(._hint_wx4cj_7){grid-template-areas:"input label" ". hint"}._inline_wx4cj_13:not(:has(._label_wx4cj_7)):has(._hint_wx4cj_7){grid-template-areas:"input ." ". hint"}._label_wx4cj_7{grid-area:label}._hint_wx4cj_7{grid-area:hint}._visuallyHidden_wx4cj_45{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}}

package/dist/Field.js

@@ -1,90 +1,89 @@
 "use client";
 import './Field.css';
-import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { jsx as m, jsxs as C } from "react/jsx-runtime";
 import { createContext as L, useMemo as q, useId as A, useContext as M } from "react";
 import { Hint as R } from "./Hint.js";
 import { Label as S } from "./Label.js";
 import { c as T } from "./index-PAaZGbyz.js";
 import { f as W } from "./forwardRefWithAs-8eP3ZN15.js";
-const k = "_root_6ifwm_2", z = "_label_6ifwm_7", E = "_hint_6ifwm_7", G = "_inline_6ifwm_13", J = "_input_6ifwm_35", K = "_visuallyHidden_6ifwm_44", O = {
+const k = "_root_wx4cj_2", z = "_label_wx4cj_7", E = "_hint_wx4cj_7", G = "_inline_wx4cj_13", J = "_visuallyHidden_wx4cj_45", K = {
   root: k,
   label: z,
   hint: E,
   inline: G,
-  input: J,
-  visuallyHidden: K
-}, o = T(O), p = L({
-  getInputProps: (i) => i,
+  visuallyHidden: J
+}, b = T(K), x = L({
+  getInputProps: (e) => e,
   hintID: "",
   labelID: "",
   variant: void 0
 });
-function b(i) {
-  const d = A();
-  return i || d;
+function f(e) {
+  const s = A();
+  return e || s;
 }
-function P() {
-  return M(p);
+function $() {
+  return M(x);
 }
-const Q = W((i, d) => {
+const O = W((e, s) => {
   const {
     children: y,
     className: I,
-    disabled: c,
-    error: _,
-    hideLabel: x,
-    hint: D,
+    disabled: o,
+    error: h,
+    hideLabel: j,
+    hint: p,
     hintProps: n,
-    id: g,
-    inline: w,
-    label: N,
+    id: D,
+    inline: g,
+    label: w,
     labelProps: t,
-    required: u,
-    success: h,
+    required: d,
+    success: _,
     warning: v,
-    ...F
-  } = i, e = _ ? "danger" : h ? "success" : v ? "warning" : void 0, l = _ ?? v ?? h ?? D, a = b(t == null ? void 0 : t.id), s = b(n == null ? void 0 : n.id), m = b(g), H = q(
+    ...N
+  } = e, i = h ? "danger" : _ ? "success" : v ? "warning" : void 0, l = h ?? v ?? _ ?? p, a = f(t == null ? void 0 : t.id), r = f(n == null ? void 0 : n.id), c = f(D), F = q(
     () => ({
-      getInputProps(f) {
-        const j = [f["aria-describedby"], l && s].filter(Boolean).join(" ") || void 0, B = [f["aria-labelledby"], a].filter(Boolean).join(" ");
+      getInputProps(u) {
+        const H = [u["aria-describedby"], l && r].filter(Boolean).join(" ") || void 0, B = [u["aria-labelledby"], a].filter(Boolean).join(" ");
         return {
-          ...f,
-          "aria-describedby": j,
-          "aria-invalid": e === "danger" ? !0 : void 0,
+          ...u,
+          "aria-describedby": H,
+          "aria-invalid": i === "danger" ? !0 : void 0,
           "aria-labelledby": B,
-          disabled: c,
-          id: m,
-          required: u
+          disabled: o,
+          id: c,
+          required: d
         };
       },
-      hintID: s,
+      hintID: r,
       labelID: a,
-      variant: e
+      variant: i
     }),
-    [s, a, e, l, c, m, u]
+    [r, a, i, l, o, c, d]
   );
-  return /* @__PURE__ */ r(p.Provider, { value: H, children: /* @__PURE__ */ C("div", { ref: d, ...F, className: o("root", w && "inline", I), children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ m(x.Provider, { value: F, children: /* @__PURE__ */ C("div", { ref: s, ...N, className: b("root", g && "inline", I), children: [
+    /* @__PURE__ */ m(
       S,
       {
-        className: o("label", x && "visuallyHidden"),
-        disabled: c,
-        htmlFor: m,
+        className: b("label", j && "visuallyHidden"),
+        disabled: o,
+        htmlFor: c,
         id: a,
-        required: u,
-        variant: e,
+        required: d,
+        variant: i,
         ...t,
-        children: N
+        children: w
       }
     ),
-    /* @__PURE__ */ r("div", { className: o("input"), children: y }),
-    l ? /* @__PURE__ */ r(R, { className: o("hint"), id: s, variant: e, ...n, children: l }) : null
+    y,
+    l ? /* @__PURE__ */ m(R, { className: b("hint"), id: r, variant: i, ...n, children: l }) : null
   ] }) });
 });
-Q.displayName = "Field";
+O.displayName = "Field";
 export {
-  Q as Field,
-  p as FieldContext,
-  b as useDefaultID,
-  P as useField
+  O as Field,
+  x as FieldContext,
+  f as useDefaultID,
+  $ as useField
 };

package/dist/FileDrop.js

@@ -2273,7 +2273,13 @@ const vi = /\.(jpeg|jpg|gif|png|webp)$/, Nt = (a) => a ? typeof a == "string" ?
     return /* @__PURE__ */ L(
       "div",
       {
-        className: ha("root", n && "disabled", U && "drag-reject", t),
+        className: ha(
+          "root",
+          n && "disabled",
+          U && "drag-reject",
+          "field-input",
+          t
+        ),
         ...f({
           disabled: n,
           handleRemoveFile: h,

package/dist/InputText.js

@@ -27,11 +27,11 @@ const D = "_root_13hsf_8", F = "_transparent_13hsf_68", L = "_clearable_13hsf_88
   "icon-placement-right-md": "_icon-placement-right-md_13hsf_124"
 }, a = B(C), O = { lg: "md", md: "md", sm: "sm" }, V = T(
   ({
-    children: c,
+    children: p,
     className: v,
     icon: t,
     iconPlacement: s = "left",
-    isClearable: p,
+    isClearable: c,
     name: _,
     onChange: r,
     size: m = "lg",
@@ -41,13 +41,13 @@ const D = "_root_13hsf_8", F = "_transparent_13hsf_68", L = "_clearable_13hsf_88
     variant: z,
     ...I
   }, b) => {
-    const { getInputProps: N, variant: $ } = y(), d = $ || z, i = t && s, h = i && s === "right", R = i && s === "left", n = O[m], l = N(I), o = !!c, S = p || h || o, E = () => {
+    const { getInputProps: N, variant: $ } = y(), d = $ || z, i = t && s, h = i && s === "right", R = i && s === "left", n = O[m], l = N(I), o = !!p, S = c || h || o, E = () => {
       r && r({
         preventDefault: () => null,
         target: { name: _, value: "" }
       });
     };
-    return /* @__PURE__ */ u("div", { className: a("input-text-wrapper"), children: [
+    return /* @__PURE__ */ u("div", { className: a("input-text-wrapper", "field-input"), children: [
       /* @__PURE__ */ e(
         "input",
         {
@@ -87,9 +87,9 @@ const D = "_root_13hsf_8", F = "_transparent_13hsf_68", L = "_clearable_13hsf_88
             l.disabled && "disabled"
           ),
           children: [
-            p && f ? /* @__PURE__ */ e(j, { onClick: E, size: "sm" }) : null,
+            c && f ? /* @__PURE__ */ e(j, { onClick: E, size: "sm" }) : null,
             h && !o ? /* @__PURE__ */ e(g, { ...t.props, name: t.props.name, size: n }) : null,
-            o ? c : null
+            o ? p : null
           ]
         }
       ) : null

package/dist/Modal.js

@@ -1,9 +1,9 @@
 "use client";
 import './Modal.css';
-import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
 import { b as R } from "./RTNCFSKZ-BywELldk.js";
 import { D as V, u as q } from "./NI3IVY7K-Dy240mkD.js";
-import { forwardRef as l, isValidElement as G, cloneElement as J, useState as K, useEffect as L } from "react";
+import { forwardRef as i, isValidElement as G, cloneElement as J, useState as K, useEffect as L } from "react";
 import { c as r } from "./index-PAaZGbyz.js";
 import { f as j } from "./forwardRefWithAs-8eP3ZN15.js";
 import { D as y } from "./DSAASPLT-Fx1kuAsk.js";
@@ -12,7 +12,7 @@ import { Button as Q } from "./Button.js";
 import { Text as m } from "./Text.js";
 import { CloseButton as U } from "./CloseButton.js";
 import { D as X } from "./ZTXFEM5L-WGHY_jqg.js";
-const Y = "_root_1ruus_3", Z = "_hideOnInteractOutside_1ruus_19", ee = "_dialog_1ruus_117", i = {
+const Y = "_root_1ruus_3", Z = "_hideOnInteractOutside_1ruus_19", ee = "_dialog_1ruus_117", c = {
   root: Y,
   "asset-backdrop": "_asset-backdrop_1ruus_8",
   hideOnInteractOutside: Z,
@@ -23,49 +23,50 @@ const Y = "_root_1ruus_3", Z = "_hideOnInteractOutside_1ruus_19", ee = "_dialog_
   "asset-content": "_asset-content_1ruus_96",
   dialog: ee,
   "close-button": "_close-button_1ruus_159"
-}, te = r(i), x = ({ children: e, ...t }) => /* @__PURE__ */ s(Q, { className: te("close-button"), variant: "primary-neutral", ...t, children: e });
+}, te = r(c), x = ({ children: e, ...t }) => /* @__PURE__ */ o(Q, { className: te("close-button"), variant: "primary-neutral", ...t, children: e });
 x.displayName = "AssetModal.Close";
-const se = r(i), M = l(
-  ({ hideOnInteractOutside: e, ...t }, o) => /* @__PURE__ */ s(
+const se = r(c), M = i(
+  ({ hideOnInteractOutside: e, ...t }, s) => /* @__PURE__ */ o(
     "div",
     {
       className: se("asset-backdrop", e && "hideOnInteractOutside"),
       ...t,
-      ref: o,
-      children: /* @__PURE__ */ s(
+      ref: s,
+      children: /* @__PURE__ */ o(
         y,
         {
-          render: /* @__PURE__ */ s(x, { children: /* @__PURE__ */ s(P, { name: "times" }) })
+          render: /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(P, { name: "times" }) })
         }
       )
     }
   )
 );
 M.displayName = "AssetModal.Backdrop";
-const oe = r(i), $ = ({
+const oe = r(c), $ = ({
   children: e,
-  ...t
-}) => /* @__PURE__ */ s("div", { className: oe("root", "asset-content"), ...t, children: e });
+  className: t,
+  ...s
+}) => /* @__PURE__ */ o("div", { className: oe("root", "asset-content", t), ...s, children: e });
 $.displayName = "AssetModal.Content";
-const ae = r(i), f = ({ children: e, ...t }) => /* @__PURE__ */ s(m, { as: "p", className: ae("asset-title"), lines: 2, variant: "heading-md-strong", ...t, children: e });
+const ae = r(c), f = ({ children: e, ...t }) => /* @__PURE__ */ o(m, { as: "p", className: ae("asset-title"), lines: 2, variant: "heading-md-strong", ...t, children: e });
 f.displayName = "AssetModal.Title";
-const g = r(i), v = l(
-  ({ children: e, customContent: t, subtitle: o, title: a, ...d }, n) => /* @__PURE__ */ _("div", { className: g("root", "asset-wrapper"), ref: n, ...d, children: [
+const g = r(c), v = i(
+  ({ children: e, customContent: t, subtitle: s, title: a, ...n }, l) => /* @__PURE__ */ _("div", { className: g("root", "asset-wrapper"), ref: l, ...n, children: [
     e,
     /* @__PURE__ */ _("div", { className: g("root", "asset-title-wrapper"), children: [
       t,
-      !t && o ? /* @__PURE__ */ s(m, { variant: "label-md", children: o }) : null,
-      !t && a ? /* @__PURE__ */ s(f, { children: a }) : null
+      !t && s ? /* @__PURE__ */ o(m, { variant: "label-md", children: s }) : null,
+      !t && a ? /* @__PURE__ */ o(f, { children: a }) : null
     ] })
   ] })
 );
 v.displayName = "AssetModal.AssetWithTitle";
-const re = r(i), w = ({
+const re = r(c), w = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ s("div", { className: re("root", "dialog"), ...t, children: e });
+}) => /* @__PURE__ */ o("div", { className: re("root", "dialog"), ...t, children: e });
 w.displayName = "AssetModal";
-const ne = r(i), O = ({ children: e }) => /* @__PURE__ */ s("div", { className: ne("root", "iframe-wrapper"), children: e });
+const ne = r(c), O = ({ children: e }) => /* @__PURE__ */ o("div", { className: ne("root", "iframe-wrapper"), children: e });
 O.displayName = "AssetModal.Iframe";
 const le = Object.assign(w, {
   AssetWithTitle: v,
@@ -73,7 +74,7 @@ const le = Object.assign(w, {
   Content: $,
   Iframe: O,
   Title: f
-}), ie = "_root_a4zjh_4", ce = "_body_a4zjh_48", de = "_footer_a4zjh_48", _e = "_header_a4zjh_48", me = "_scrollable_a4zjh_60", ue = "_content_a4zjh_66", pe = "_close_a4zjh_66", he = "_backdrop_a4zjh_85", fe = "_hideOnInteractOutside_a4zjh_96", Ne = "_icon_a4zjh_127", c = {
+}), ie = "_root_a4zjh_4", ce = "_body_a4zjh_48", de = "_footer_a4zjh_48", _e = "_header_a4zjh_48", me = "_scrollable_a4zjh_60", ue = "_content_a4zjh_66", pe = "_close_a4zjh_66", he = "_backdrop_a4zjh_85", fe = "_hideOnInteractOutside_a4zjh_96", Ne = "_icon_a4zjh_127", d = {
   root: ie,
   body: ce,
   footer: de,
@@ -95,57 +96,65 @@ const le = Object.assign(w, {
   "footer-information": "_footer-information_a4zjh_163",
   "footer-information-title": "_footer-information-title_a4zjh_170",
   "footer-information-subtitle": "_footer-information-subtitle_a4zjh_174"
-}, be = r(c), A = l(
-  ({ backdrop: e, hideOnInteractOutside: t, ...o }, a) => e === !0 ? /* @__PURE__ */ s(
+}, be = r(d), A = i(
+  ({ backdrop: e, hideOnInteractOutside: t, ...s }, a) => e === !0 ? /* @__PURE__ */ o(
     "div",
     {
       className: be("backdrop", t && "hideOnInteractOutside"),
       ref: a,
-      ...o
+      ...s
     }
-  ) : G(e) ? J(e, { ref: a, ...o }) : null
+  ) : G(e) ? J(e, { ref: a, ...s }) : null
 );
 A.displayName = "Modal.Backdrop";
-const ze = r(c), k = l((e, t) => /* @__PURE__ */ s("section", { className: ze("body"), ref: t, ...e }));
+const ze = r(d), k = i(({ className: e, ...t }, s) => /* @__PURE__ */ o("section", { className: ze("body", e), ref: s, ...t }));
 k.displayName = "Modal.Body";
-const ge = r(c), N = (e) => /* @__PURE__ */ s(y, { render: /* @__PURE__ */ s(U, { className: ge("close"), ...e }) });
+const ge = r(d), N = (e) => /* @__PURE__ */ o(y, { render: /* @__PURE__ */ o(U, { className: ge("close"), ...e }) });
 N.displayName = "Modal.Close";
-const je = r(c), B = l(
-  ({ children: e, withClosingButton: t = !0, ...o }, a) => /* @__PURE__ */ _("div", { className: je("content", t && "with-close-button"), ref: a, ...o, children: [
-    /* @__PURE__ */ s(N, {}),
-    e
-  ] })
+const je = r(d), B = i(
+  ({ children: e, className: t, withClosingButton: s = !0, ...a }, n) => /* @__PURE__ */ _(
+    "div",
+    {
+      className: (je("content", s && "with-close-button"), t),
+      ref: n,
+      ...a,
+      children: [
+        /* @__PURE__ */ o(N, {}),
+        e
+      ]
+    }
+  )
 );
 B.displayName = "Modal.Content";
-const u = r(c), C = l(
-  ({ children: e, information: t, ...o }, a) => /* @__PURE__ */ _("footer", { className: u("footer"), ref: a, ...o, children: [
-    e ? /* @__PURE__ */ s("div", { className: u("footer-children-wrapper"), children: e }) : null,
-    t ? /* @__PURE__ */ _("div", { className: u("footer-information"), children: [
-      /* @__PURE__ */ s(m, { className: u("footer-information-title"), variant: "label-md", children: t.title }),
-      /* @__PURE__ */ s(m, { className: u("footer-information-subtitle"), variant: "body-md", children: t.subtitle })
+const u = r(d), C = i(
+  ({ children: e, className: t, information: s, ...a }, n) => /* @__PURE__ */ _("footer", { className: u("footer", t), ref: n, ...a, children: [
+    e ? /* @__PURE__ */ o("div", { className: u("footer-children-wrapper"), children: e }) : null,
+    s ? /* @__PURE__ */ _("div", { className: u("footer-information"), children: [
+      /* @__PURE__ */ o(m, { className: u("footer-information-title"), variant: "label-md", children: s.title }),
+      /* @__PURE__ */ o(m, { className: u("footer-information-subtitle"), variant: "body-md", children: s.subtitle })
     ] }) : null
   ] })
 );
 C.displayName = "Modal.Footer";
-const h = r(c), D = l(
-  ({ icon: e, subtitle: t, title: o, ...a }, d) => /* @__PURE__ */ _("header", { className: h("header", e && "icon"), ref: d, ...a, children: [
-    /* @__PURE__ */ s(N, {}),
-    e,
-    /* @__PURE__ */ s(m, { as: "h4", className: h("header-title"), variant: "heading-md-strong", children: o }),
-    t ? /* @__PURE__ */ s(m, { className: h("header-subtitle"), children: t }) : null
+const h = r(d), D = i(
+  ({ className: e, icon: t, subtitle: s, title: a, ...n }, l) => /* @__PURE__ */ _("header", { className: h("header", t && "icon", e), ref: l, ...n, children: [
+    /* @__PURE__ */ o(N, {}),
+    t,
+    /* @__PURE__ */ o(m, { as: "h4", className: h("header-title"), variant: "heading-md-strong", children: a }),
+    s ? /* @__PURE__ */ o(m, { className: h("header-subtitle"), children: s }) : null
   ] })
 );
 D.displayName = "Modal.Header";
 const I = j(
-  ({ as: e, store: t, ...o }, a) => /* @__PURE__ */ s(X, { ref: a, render: e ? /* @__PURE__ */ s(e, {}) : void 0, store: t, ...o })
+  ({ as: e, store: t, ...s }, a) => /* @__PURE__ */ o(X, { ref: a, render: e ? /* @__PURE__ */ o(e, {}) : void 0, store: t, ...s })
 );
 I.displayName = "Modal.Trigger";
-const ye = r(c);
+const ye = r(d);
 function Te(e) {
-  const { onClose: t, setOpen: o, ...a } = e || {};
+  const { onClose: t, setOpen: s, ...a } = e || {};
   return q({
-    setOpen: (n) => {
-      !n && t && t(), o == null || o(n);
+    setOpen: (l) => {
+      !l && t && t(), s == null || s(l);
     },
     ...a
   });
@@ -155,10 +164,10 @@ const T = j(
     ariaLabel: e,
     /** for render property */
     as: t,
-    backdrop: o = !0,
+    backdrop: s = !0,
     children: a,
-    className: d,
-    hideOnInteractOutside: n = !0,
+    className: n,
+    hideOnInteractOutside: l = !0,
     size: S = "lg",
     store: b,
     ...E
@@ -166,13 +175,13 @@ const T = j(
     const [W, F] = K(!1), { contentElement: p, open: z } = R(b);
     return L(() => {
       z && p && F(p.scrollHeight > p.offsetHeight);
-    }, [p, z]), /* @__PURE__ */ s(
+    }, [p, z]), /* @__PURE__ */ o(
       V,
       {
-        backdrop: /* @__PURE__ */ s(A, { backdrop: o, hideOnInteractOutside: n }),
-        hideOnInteractOutside: n,
+        backdrop: /* @__PURE__ */ o(A, { backdrop: s, hideOnInteractOutside: l }),
+        hideOnInteractOutside: l,
         ref: H,
-        render: t ? /* @__PURE__ */ s(t, {}) : /* @__PURE__ */ s("div", { className: ye("root", `size-${S}`, W && "scrollable", d) }),
+        render: t ? /* @__PURE__ */ o(t, {}) : /* @__PURE__ */ o("div", { className: ye("root", `size-${S}`, W && "scrollable", n) }),
         store: b,
         ...E,
         "aria-label": e,

package/dist/Search.js

@@ -126,7 +126,7 @@ const qe = "_wrapper_qaadj_2", we = "_indicators_qaadj_5", Ne = "_root_qaadj_33"
             variant: b ? "focused" : f,
             ...j
           });
-          return /* @__PURE__ */ w("div", { ...se, className: t("wrapper"), children: [
+          return /* @__PURE__ */ w("div", { ...se, className: t("wrapper", "field-input"), children: [
             /* @__PURE__ */ w("div", { className: t("input-wrapper"), children: [
               /* @__PURE__ */ a(
                 "input",

package/dist/Select.js

@@ -967,7 +967,7 @@ const ee = "", xt = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|
             variant: N ? "focused" : ae,
             ...oe
           });
-          return /* @__PURE__ */ L("div", { ...We, className: w("wrapper", i && "disabled"), children: [
+          return /* @__PURE__ */ L("div", { ...We, className: w("wrapper", i && "disabled", "field-input"), children: [
             m ? /* @__PURE__ */ v(
               "input",
               {

package/dist/Slider.js

@@ -337,7 +337,7 @@ const _e = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, y) => (d = q(d
       !isNaN(f) && f !== v && f && (A(f), z(f));
     }, [f]);
     const j = ee();
-    return /* @__PURE__ */ D("div", { className: N("slider-root", _), ref: G, children: [
+    return /* @__PURE__ */ D("div", { className: N("slider-root", "field-input", _), ref: G, children: [
       h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "body-md", children: h }) : null,
       /* @__PURE__ */ D("div", { className: N("input-wrapper"), children: [
         (m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(

package/dist/Textarea.js

@@ -2,34 +2,35 @@
 import './Textarea.css';
 import { jsx as _ } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { useField as v } from "./Field.js";
-import { c as p } from "./index-PAaZGbyz.js";
-const m = "_root_161f5_2", d = "_adaptative_161f5_45", l = {
-  root: m,
+import { useField as p } from "./Field.js";
+import { c as v } from "./index-PAaZGbyz.js";
+const d = "_root_161f5_2", m = "_adaptative_161f5_45", l = {
+  root: d,
   "variant-danger": "_variant-danger_161f5_36",
   "variant-warning": "_variant-warning_161f5_39",
   "variant-success": "_variant-success_161f5_42",
-  adaptative: d
-}, x = p(l), u = f(
-  ({ className: t, isAdaptative: r = !1, minRows: e = 5, variant: o, ...s }, n) => {
-    const { getInputProps: i, variant: c } = v(), a = c || o;
+  adaptative: m
+}, u = v(l), x = f(
+  ({ className: t, isAdaptative: r = !1, minRows: e = 5, variant: n, ...o }, s) => {
+    const { getInputProps: i, variant: c } = p(), a = c || n;
     return /* @__PURE__ */ _(
       "textarea",
       {
-        className: x(
+        className: u(
           "root",
           a && `variant-${a}`,
           r && "adaptative",
+          "field-input",
           t
         ),
-        ref: n,
+        ref: s,
         rows: e,
-        ...i(s)
+        ...i(o)
       }
     );
   }
 );
-u.displayName = "Textarea";
+x.displayName = "Textarea";
 export {
-  u as Textarea
+  x as Textarea
 };

package/dist/TimePicker.js

@@ -1,83 +1,84 @@
 "use client";
 import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as S, useState as w, useRef as j, useEffect as d } from "react";
-import { D as F, C as I } from "./CustomPopper-C1wIDHbM.js";
-import { b as L, D as M, s as O } from "./utils-BD597oo6.js";
-import { InputText as U } from "./InputText.js";
-import { c as _ } from "./index-PAaZGbyz.js";
-const q = _(O), z = S(
+import { forwardRef as S, useState as j, useRef as F, useEffect as d } from "react";
+import { D as I, C as L } from "./CustomPopper-C1wIDHbM.js";
+import { b as M, D as O, s as U } from "./utils-BD597oo6.js";
+import { InputText as _ } from "./InputText.js";
+import { c as q } from "./index-PAaZGbyz.js";
+const a = q(U), z = S(
   ({
     autoFocus: o,
     className: T,
     dateFormat: D = "HH:mm",
-    disabled: a,
-    icon: R,
-    iconPlacement: k = "left",
+    disabled: k,
+    icon: N,
+    iconPlacement: R = "left",
     onChange: t,
-    placeholder: x,
-    size: y = "md",
-    timeIntervals: i = 15,
-    transparent: A,
-    value: r = M,
-    ...m
+    placeholder: w,
+    size: x = "md",
+    timeIntervals: m = 15,
+    transparent: y,
+    value: r = O,
+    ...c
   }, p) => {
-    const l = (s) => L(s, i), [H, c] = w(l(r)), N = j(), P = p || N;
+    const i = (e) => M(e, m), [A, l] = j(i(r)), H = F(), P = p || H;
     d(() => {
-      t == null || t(l(r));
+      t == null || t(i(r));
     }, []), d(() => {
-      var e;
-      const s = l(r);
-      ((e = new Date(r)) == null ? void 0 : e.getTime()) - (s == null ? void 0 : s.getTime()) !== 0 && (t == null || t(s)), c(s);
+      var s;
+      const e = i(r);
+      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && (t == null || t(e)), l(e);
     }, [r]);
-    const b = (s) => {
-      var e;
-      s.preventDefault(), (e = P.current) == null || e.blur(), c(null), t == null || t(null);
-    }, E = (s) => {
-      if (!s) {
-        c(null), t == null || t(null);
+    const b = (e) => {
+      var s;
+      e.preventDefault(), (s = P.current) == null || s.blur(), l(null), t == null || t(null);
+    }, E = (e) => {
+      if (!e) {
+        l(null), t == null || t(null);
         return;
       }
-      const e = Array.isArray(s) ? s[0] : s;
-      if (!e) {
-        c(null), t == null || t(null);
+      const s = Array.isArray(e) ? e[0] : e;
+      if (!s) {
+        l(null), t == null || t(null);
         return;
       }
-      const u = l(e);
-      e.setHours(u.getHours(), u.getMinutes()), c(e), t == null || t(new Date(e));
+      const u = i(s);
+      s.setHours(u.getHours(), u.getMinutes()), l(s), t == null || t(new Date(s));
     };
     return (
       // type issue in react-datepicker (https://github.com/Hacker0x01/react-datepicker/issues/5391)
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       /* @__PURE__ */ f(
-        F,
+        I,
         {
           calendarClassName: "time-picker-popper",
           customInput: /* @__PURE__ */ f(
-            U,
+            _,
             {
               autoFocus: o,
-              className: q("time-picker", T),
-              "data-testid": m["data-testid"],
-              disabled: a,
-              icon: R,
-              iconPlacement: k,
+              className: a("time-picker", T),
+              "data-testid": c["data-testid"],
+              disabled: k,
+              icon: N,
+              iconPlacement: R,
               isClearable: !1,
               onReset: b,
               ref: p,
-              size: y,
-              transparent: A
+              size: x,
+              transparent: y
             }
           ),
           dateFormat: D,
           onChange: E,
-          placeholderText: x,
-          popperContainer: I,
-          selected: H,
+          placeholderText: w,
+          popperContainer: L,
+          selected: A,
           showTimeSelect: !0,
           showTimeSelectOnly: !0,
-          timeIntervals: i,
-          ...m
+          timeIntervals: m,
+          ...c,
+          wrapperClassName: a(c.wrapperClassName, "date-picker-wrapper", "field-input")
         }
       )
     );

package/dist/Toggle.js

@@ -2,24 +2,24 @@
 import './Toggle.css';
 import { jsxs as z, jsx as e } from "react/jsx-runtime";
 import { a as v } from "./KPUWHTQJ-Dv3cAqjP.js";
-import { forwardRef as g } from "react";
-import { useField as f } from "./Field.js";
+import { forwardRef as f } from "react";
+import { useField as g } from "./Field.js";
 import { Icon as n } from "./Icon.js";
 import { c as h } from "./index-PAaZGbyz.js";
-const w = "_root_1czvn_2", k = "_wrapper_1czvn_100", u = "_checked_1czvn_120", x = "_disabled_1czvn_124", N = {
+const w = "_root_1czvn_2", u = "_wrapper_1czvn_100", k = "_checked_1czvn_120", x = "_disabled_1czvn_124", N = {
   root: w,
   "size-sm": "_size-sm_1czvn_82",
   "size-md": "_size-md_1czvn_88",
   "size-lg": "_size-lg_1czvn_94",
-  wrapper: k,
+  wrapper: u,
   "icon-wrapper": "_icon-wrapper_1czvn_106",
-  checked: u,
+  checked: k,
   disabled: x
-}, c = h(N), b = g(
-  ({ checked: o, className: a, disabled: s, onClick: i, size: r = "md", withVisibilityIcon: t, ...l }, p) => {
-    const { getInputProps: m } = f(), _ = m(l), d = s ? null : i;
-    return /* @__PURE__ */ z("div", { className: c("wrapper"), onClick: d, children: [
-      t ? /* @__PURE__ */ e(
+}, c = h(N), b = f(
+  ({ checked: o, className: i, disabled: s, onClick: t, size: r = "md", withVisibilityIcon: a, ...l }, p) => {
+    const { getInputProps: m } = g(), _ = m(l), d = s ? null : t;
+    return /* @__PURE__ */ z("div", { className: c("wrapper", "field-input"), onClick: d, children: [
+      a ? /* @__PURE__ */ e(
         "div",
         {
           className: c(
@@ -35,7 +35,7 @@ const w = "_root_1czvn_2", k = "_wrapper_1czvn_100", u = "_checked_1czvn_120", x
         v,
         {
           checked: o,
-          className: c("root", `size-${r}`, a),
+          className: c("root", `size-${r}`, i),
           disabled: s,
           ref: p,
           ..._

package/dist/types/components/Modal/Assets/AssetContent.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, default as React } from 'react';
 export declare const AssetContent: {
-    ({ children, ...rest }: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, ...rest }: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/components/Modal/Assets/index.d.ts

@@ -5,7 +5,7 @@ export declare const Assets: {
     AssetWithTitle: import('react').ForwardRefExoticComponent<Omit<import('./types').AssetWithTitleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Backdrop: import('react').ForwardRefExoticComponent<import('../types').BackdropProps & import('react').RefAttributes<HTMLDivElement>>;
     Content: {
-        ({ children, ...rest }: React.PropsWithChildren<import('react').HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...rest }: React.PropsWithChildren<import('react').HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Iframe: {

package/dist/types/components/Modal/components/Content.d.ts

@@ -1,7 +1,7 @@
 /**
  * @name Modal.Content
  */
-export declare const Content: import('react').ForwardRefExoticComponent<{
+export declare const Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
     withClosingButton?: boolean;
 } & {
     children?: import('react').ReactNode | undefined;

package/dist/types/components/Modal/index.d.ts

@@ -4,7 +4,7 @@ export declare const Modal: import('../../utils').FunctionComponentWithAs<"div",
     Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLElement> & {
         children?: import('react').ReactNode | undefined;
     } & import('react').RefAttributes<HTMLElement>>;
-    Content: import('react').ForwardRefExoticComponent<{
+    Content: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
         withClosingButton?: boolean;
     } & {
         children?: import('react').ReactNode | undefined;
@@ -20,7 +20,7 @@ export declare const AssetModal: {
     AssetWithTitle: import('react').ForwardRefExoticComponent<Omit<import('./Assets/types').AssetWithTitleProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Backdrop: import('react').ForwardRefExoticComponent<import('./types').BackdropProps & import('react').RefAttributes<HTMLDivElement>>;
     Content: {
-        ({ children, ...rest }: React.PropsWithChildren<import('react').HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...rest }: React.PropsWithChildren<import('react').HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Iframe: {

package/dist/types/components/Modal/types.d.ts

@@ -27,7 +27,7 @@ export interface HeaderOptions {
 }
 export type HeaderProps = MergeProps<HeaderOptions, HTMLAttributes<HTMLDivElement>>;
 export type BodyProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export type ContentProps = PropsWithChildren<{
+export type ContentProps = PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
     /**
      * show or hide the closing button
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "10.0.0-alpha.10",
+  "version": "10.0.0-alpha.11",
   "description": "Customizable design system with react, typescript, tailwindcss and ariakit.",
   "files": [
     "dist"