@paolojulian.dev/design-system 4.3.0 → 4.4.0

package/dist/index.es.js

@@ -1,122 +1,1144 @@
-import { jsx as r, jsxs as k } from "react/jsx-runtime";
-import { cn as c } from "./utils.es.js";
-import { forwardRef as j, useId as C, useState as L } from "react";
-const G = ({
-  children: t,
-  gap: n = void 0,
-  alignItems: e = void 0,
-  justifyContent: a = void 0,
+import { jsx as a, jsxs as k, Fragment as nt } from "react/jsx-runtime";
+import { cn as p } from "./utils.es.js";
+import { forwardRef as U, useId as Le, useState as V, useMemo as rt, useRef as Be, useEffect as ot, Children as dt } from "react";
+const Qt = ({
+  children: e,
+  gap: t = void 0,
+  alignItems: n = void 0,
+  justifyContent: r = void 0,
   className: s = ""
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ a(
   "div",
   {
-    className: c("flex flex-row", s),
+    className: p("flex flex-row", s),
     style: {
-      gap: n,
-      alignItems: e,
-      justifyContent: a
+      gap: t,
+      alignItems: n,
+      justifyContent: r
     },
-    children: t
+    children: e
   }
-), T = ({
-  children: t,
-  gap: n = void 0,
-  alignItems: e = void 0,
-  justifyContent: a = void 0,
+), ut = ({
+  children: e,
+  gap: t = void 0,
+  alignItems: n = void 0,
+  justifyContent: r = void 0,
   className: s = ""
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ a(
   "div",
   {
-    className: c("flex flex-col", s),
+    className: p("flex flex-col", s),
     style: {
-      gap: n,
-      alignItems: e,
-      justifyContent: a
+      gap: t,
+      alignItems: n,
+      justifyContent: r
     },
-    children: t
+    children: e
+  }
+), pt = U(
+  ({
+    as: e = "span",
+    variant: t = "neutral",
+    size: n = "sm",
+    appearance: r = "subtle",
+    leftIcon: s,
+    rightIcon: l,
+    children: d,
+    className: f,
+    ...b
+  }, c) => /* @__PURE__ */ k(
+    e,
+    {
+      ...b,
+      ref: c,
+      className: p(
+        "p-badge",
+        `p-badge--${t}`,
+        `p-badge--${n}`,
+        `p-badge--${r}`,
+        f
+      ),
+      children: [
+        s && /* @__PURE__ */ a("span", { className: "p-badge__icon", "aria-hidden": "true", children: s }),
+        /* @__PURE__ */ a("span", { className: "p-badge__label", children: d }),
+        l && /* @__PURE__ */ a("span", { className: "p-badge__icon", "aria-hidden": "true", children: l })
+      ]
+    }
+  )
+);
+pt.displayName = "PBadge";
+const ht = U(
+  ({
+    variant: e = "primary",
+    size: t = "md",
+    fullWidth: n = !1,
+    isActive: r = !1,
+    isLoading: s = !1,
+    leftIcon: l,
+    rightIcon: d,
+    children: f,
+    className: b,
+    ...c
+  }, u) => {
+    const h = !!("disabled" in c && c.disabled || s), v = p(
+      "p-button",
+      `p-button--${e}`,
+      `p-button--${t}`,
+      n && "p-button--full-width",
+      r && "p-button--active",
+      b
+    ), C = /* @__PURE__ */ k(nt, { children: [
+      s ? /* @__PURE__ */ a("span", { className: "p-button__spinner", "aria-hidden": "true" }) : l && /* @__PURE__ */ a("span", { className: "p-button__icon", "aria-hidden": "true", children: l }),
+      /* @__PURE__ */ a("span", { className: "p-button__label", children: f }),
+      !s && d && /* @__PURE__ */ a("span", { className: "p-button__icon", "aria-hidden": "true", children: d })
+    ] });
+    if ("href" in c && typeof c.href == "string") {
+      const { disabled: $, onClick: w, ...x } = c, P = (q) => {
+        if (h) {
+          q.preventDefault();
+          return;
+        }
+        w == null || w(q);
+      };
+      return /* @__PURE__ */ a(
+        "a",
+        {
+          ...x,
+          ref: u,
+          className: v,
+          "aria-disabled": h || void 0,
+          "aria-busy": s || void 0,
+          "data-active": r || void 0,
+          "data-disabled": $ || void 0,
+          tabIndex: h ? -1 : x.tabIndex,
+          onClick: P,
+          children: C
+        }
+      );
+    }
+    const { type: M = "button", disabled: m, ..._ } = c;
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        ..._,
+        ref: u,
+        type: M,
+        disabled: !!(m || s),
+        className: v,
+        "aria-busy": s || void 0,
+        "data-active": r || void 0,
+        children: C
+      }
+    );
   }
 );
-function V(t) {
-  var n, e, a = "";
-  if (typeof t == "string" || typeof t == "number") a += t;
-  else if (typeof t == "object") if (Array.isArray(t)) for (n = 0; n < t.length; n++) t[n] && (e = V(t[n])) && (a && (a += " "), a += e);
-  else for (n in t) t[n] && (a && (a += " "), a += n);
-  return a;
-}
-function $() {
-  for (var t, n, e = 0, a = ""; e < arguments.length; ) (t = arguments[e++]) && (n = V(t)) && (a && (a += " "), a += n);
-  return a;
-}
-const I = (t) => typeof t == "boolean" ? "".concat(t) : t === 0 ? "0" : t, P = $, O = (t, n) => (e) => {
-  var a;
-  if ((n == null ? void 0 : n.variants) == null) return P(t, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
-  const { variants: s, defaultVariants: i } = n, l = Object.keys(s).map((o) => {
-    const u = e == null ? void 0 : e[o], x = i == null ? void 0 : i[o];
+ht.displayName = "PButton";
+function it(e) {
+  var t, n, r = "";
+  if (typeof e == "string" || typeof e == "number") r += e;
+  else if (typeof e == "object") if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (n = it(e[t])) && (r && (r += " "), r += n);
+  else for (t in e) e[t] && (r && (r += " "), r += t);
+  return r;
+}
+function mt() {
+  for (var e, t, n = 0, r = ""; n < arguments.length; ) (e = arguments[n++]) && (t = it(e)) && (r && (r += " "), r += t);
+  return r;
+}
+const Qe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, Xe = mt, gt = (e, t) => (n) => {
+  var r;
+  if ((t == null ? void 0 : t.variants) == null) return Xe(e, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+  const { variants: s, defaultVariants: l } = t, d = Object.keys(s).map((c) => {
+    const u = n == null ? void 0 : n[c], h = l == null ? void 0 : l[c];
     if (u === null) return null;
-    const d = I(u) || I(x);
-    return s[o][d];
-  }), f = e && Object.entries(e).reduce((o, u) => {
-    let [x, d] = u;
-    return d === void 0 || (o[x] = d), o;
-  }, {}), b = n == null || (a = n.compoundVariants) === null || a === void 0 ? void 0 : a.reduce((o, u) => {
-    let { class: x, className: d, ...v } = u;
-    return Object.entries(v).every((h) => {
-      let [p, m] = h;
-      return Array.isArray(m) ? m.includes({
-        ...i,
+    const v = Qe(u) || Qe(h);
+    return s[c][v];
+  }), f = n && Object.entries(n).reduce((c, u) => {
+    let [h, v] = u;
+    return v === void 0 || (c[h] = v), c;
+  }, {}), b = t == null || (r = t.compoundVariants) === null || r === void 0 ? void 0 : r.reduce((c, u) => {
+    let { class: h, className: v, ...C } = u;
+    return Object.entries(C).every((M) => {
+      let [m, _] = M;
+      return Array.isArray(_) ? _.includes({
+        ...l,
         ...f
-      }[p]) : {
-        ...i,
+      }[m]) : {
+        ...l,
         ...f
-      }[p] === m;
+      }[m] === _;
     }) ? [
-      ...o,
-      x,
-      d
-    ] : o;
+      ...c,
+      h,
+      v
+    ] : c;
   }, []);
-  return P(t, l, b, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
-}, R = {
-  serif: "font-serif",
-  body: "text-base",
-  "body-wide": "text-sm tracking-[0.40em] font-medium",
-  heading: "text-[1.5rem] md:text-4xl tracking-[-0.04em] font-medium",
-  "heading-lg": "text-[2.5rem] md:text-[4rem] tracking-[-0.04em] font-medium leading-[2.75rem] md:leading-[4.5rem]",
-  "heading-xl": "text-[4rem] md:text-[7rem] tracking-[-0.04em] leading-[3.5rem] md:leading-[5.5rem] font-medium"
-}, W = O("font-sans", {
+  return Xe(e, d, b, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+}, ft = {
+  serif: "p-typography--serif",
+  body: "p-typography--body",
+  "body-wide": "p-typography--body-wide",
+  heading: "p-typography--heading",
+  "heading-lg": "p-typography--heading-lg",
+  "heading-xl": "p-typography--heading-xl"
+}, yt = gt("p-typography", {
   variants: {
-    variant: R
+    variant: ft
   },
   defaultVariants: {
     variant: "body"
   }
 });
-function F({
-  as: t = "p",
-  children: n,
-  className: e = "",
-  variant: a,
+function Re({
+  as: e = "p",
+  children: t,
+  className: n = "",
+  variant: r,
   ...s
 }) {
-  return /* @__PURE__ */ r(
-    t,
+  return /* @__PURE__ */ a(
+    e,
     {
-      className: c(W({ variant: a, className: e })),
+      className: p(yt({ variant: r, className: n })),
       ...s,
-      children: n
+      children: t
     }
   );
 }
-function J({ title: t }) {
-  return /* @__PURE__ */ r(T, { className: "pt-2 border-t border-white text-white", children: /* @__PURE__ */ r(F, { className: "uppercase", variant: "body-wide", children: t }) });
+function oe(e) {
+  return e != null && e !== !1 && e !== "";
+}
+function Ee(e, t) {
+  return oe(e) ? typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ a(Re, { className: t, variant: "body-wide", children: e }) : /* @__PURE__ */ a("span", { className: p(t, "p-card__meta-custom"), children: e }) : null;
+}
+function Ce(e) {
+  return typeof e == "number" ? `${e}px` : e;
+}
+const _t = U(
+  ({
+    prefix: e,
+    eyebrow: t,
+    title: n,
+    description: r,
+    media: s,
+    actions: l,
+    density: d = "default",
+    fullWidth: f = !1,
+    width: b,
+    minWidth: c,
+    height: u,
+    minHeight: h,
+    className: v,
+    style: C,
+    children: M,
+    ...m
+  }, _) => {
+    const $ = "href" in m && typeof m.href == "string", w = p(
+      "p-card",
+      d !== "default" && `p-card--${d}`,
+      f && "p-card--full-width",
+      b !== void 0 && "p-card--custom-width",
+      c !== void 0 && "p-card--custom-min-width",
+      u !== void 0 && "p-card--custom-height",
+      h !== void 0 && "p-card--custom-min-height",
+      $ && "p-card--interactive",
+      v
+    ), x = {
+      ...C,
+      ...b !== void 0 ? { "--p-card-width": Ce(b) } : {},
+      ...c !== void 0 ? { "--p-card-min-width": Ce(c) } : {},
+      ...u !== void 0 ? { "--p-card-height": Ce(u) } : {},
+      ...h !== void 0 ? { "--p-card-min-height": Ce(h) } : {}
+    }, P = /* @__PURE__ */ k(nt, { children: [
+      oe(s) && /* @__PURE__ */ a("div", { className: "p-card__media", children: s }),
+      (oe(e) || oe(t)) && /* @__PURE__ */ k("div", { className: "p-card__meta", children: [
+        Ee(e, "p-card__prefix"),
+        Ee(t, "p-card__eyebrow")
+      ] }),
+      /* @__PURE__ */ k("div", { className: "p-card__body", children: [
+        /* @__PURE__ */ a(Re, { as: "h3", className: "p-card__title", variant: "heading", children: $ ? /* @__PURE__ */ a("a", { ...m, className: "p-card__link", children: n }) : n }),
+        oe(r) ? /* @__PURE__ */ a(Re, { className: "p-card__description", variant: "body", children: r }) : null
+      ] }),
+      oe(M) && /* @__PURE__ */ a("div", { className: "p-card__content", children: M }),
+      oe(l) && /* @__PURE__ */ a("div", { className: "p-card__actions", children: l })
+    ] });
+    return $ ? /* @__PURE__ */ a("article", { ref: _, className: w, style: x, children: P }) : /* @__PURE__ */ a(
+      "article",
+      {
+        ...m,
+        ref: _,
+        className: w,
+        style: x,
+        children: P
+      }
+    );
+  }
+);
+_t.displayName = "PCard";
+const bt = new Intl.DateTimeFormat(void 0, { weekday: "short" });
+function Se(e) {
+  if (!e)
+    return null;
+  if (e instanceof Date)
+    return Number.isNaN(e.getTime()) ? null : new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  const t = e.split("-").map(Number);
+  if (t.length !== 3 || t.some(Number.isNaN))
+    return null;
+  const [n, r, s] = t, l = new Date(n, r - 1, s);
+  return l.getFullYear() !== n || l.getMonth() !== r - 1 || l.getDate() !== s ? null : l;
+}
+function ke(e) {
+  if (!e)
+    return "";
+  const t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+  return `${t}-${n}-${r}`;
+}
+function ue(e) {
+  return new Date(e.getFullYear(), e.getMonth(), 1);
+}
+function vt(e) {
+  return new Date(e.getFullYear(), e.getMonth() + 1, 0);
+}
+function Ge(e, t) {
+  return new Date(e.getFullYear(), e.getMonth() + t, 1);
+}
+function et(e, t) {
+  const n = Ge(e, t), r = vt(n).getDate();
+  return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
+}
+function R(e, t) {
+  return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function De(e, t) {
+  return !!(e && t && ke(e) === ke(t));
+}
+function de() {
+  const e = /* @__PURE__ */ new Date();
+  return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function Dt(e, t) {
+  const n = ue(e), r = (n.getDay() - t + 7) % 7, s = R(n, -r);
+  return Array.from({ length: 42 }, (l, d) => R(s, d));
+}
+function He(e) {
+  const t = typeof e.value == "function" ? e.value() : e.value;
+  return Se(t);
+}
+function kt(e, t) {
+  return new Intl.DateTimeFormat(t, { month: "long", year: "numeric" }).format(e);
+}
+function Nt(e, t) {
+  return new Intl.DateTimeFormat(t, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(e);
+}
+function wt(e, t) {
+  return new Intl.DateTimeFormat(t, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(e);
+}
+function xt(e, t) {
+  const n = new Date(2024, 0, 7);
+  return Array.from({ length: 7 }, (r, s) => {
+    const l = R(n, e + s);
+    return bt.formatToParts(l).length ? new Intl.DateTimeFormat(t, { weekday: "short" }).format(l) : "";
+  });
+}
+function Oe(e, t) {
+  return !!(t && e.getTime() < t.getTime());
+}
+function Ve(e, t) {
+  return !!(t && e.getTime() > t.getTime());
+}
+function Mt() {
+  return /* @__PURE__ */ k("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: [
+    /* @__PURE__ */ a("path", { d: "M6 3v3" }),
+    /* @__PURE__ */ a("path", { d: "M14 3v3" }),
+    /* @__PURE__ */ a("path", { d: "M4 8h12" }),
+    /* @__PURE__ */ a("path", { d: "M5 5h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" })
+  ] });
+}
+function $t() {
+  return /* @__PURE__ */ a("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "m12 5-5 5 5 5" }) });
+}
+function Pt() {
+  return /* @__PURE__ */ a("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "m8 5 5 5-5 5" }) });
+}
+const Ct = U(
+  ({
+    label: e,
+    value: t,
+    defaultValue: n,
+    onValueChange: r,
+    presets: s = [],
+    customLabel: l = "Custom",
+    showCustom: d = !0,
+    presetColumns: f = "auto",
+    placeholder: b = "Select date",
+    helperText: c,
+    isError: u = !1,
+    errorMessage: h,
+    min: v,
+    max: C,
+    name: M,
+    disabled: m = !1,
+    readOnly: _ = !1,
+    required: $ = !1,
+    locale: w,
+    weekStartsOn: x = 0,
+    className: P,
+    id: q,
+    style: ie,
+    ...se
+  }, pe) => {
+    const ze = Le(), E = q ?? ze, L = `${E}-label`, A = `${E}-panel`, z = `${E}-helper`, he = `${E}-error`, me = t !== void 0, [Ne, Ke] = V(n ?? ""), [Y, T] = V(!1), ge = me ? t : Ne, g = Se(ge), F = rt(de, []), ee = Se(v), Z = Se(C), [G, K] = V(() => ue(g ?? F)), [J, j] = V(() => g ?? F), le = Be(null), te = Be({}), we = Dt(G, x), xe = xt(x, w), ae = s.length > 0, je = ae ? d : !0, ne = f === "auto" ? void 0 : {
+      "--p-date-picker-preset-columns": String(f)
+    }, Me = u && h ? he : c ? z : void 0, fe = g ? Nt(g, w) : b, ye = ae ? s.some((i) => De(He(i), g)) : !1, _e = Y || !!(g && !ye);
+    ot(() => {
+      var i;
+      Y && ((i = te.current[ke(J)]) == null || i.focus());
+    }, [J, Y, G]);
+    const be = (i, N) => {
+      const S = ke(i);
+      me || Ke(S), i && K(ue(i)), r == null || r(S, { date: i, source: N });
+    }, $e = (i) => {
+      if (m || _)
+        return;
+      const N = g ?? F;
+      le.current = i, j(N), K(ue(N)), T(!0);
+    }, W = (i = !1) => {
+      var N;
+      T(!1), i && ((N = le.current) == null || N.focus());
+    }, ve = (i) => {
+      if (m || _)
+        return;
+      const N = He(i);
+      be(N, "preset"), W();
+    }, Pe = (i) => {
+      m || _ || Oe(i, ee) || Ve(i, Z) || (j(i), be(i, "calendar"), W(!0));
+    }, Q = (i) => {
+      Oe(i, ee) || Ve(i, Z) || (j(i), K(ue(i)));
+    }, We = (i) => (N) => {
+      if (N.key === "Escape") {
+        N.preventDefault(), W(!0);
+        return;
+      }
+      const S = (i.getDay() - x + 7) % 7, D = {
+        ArrowLeft: R(i, -1),
+        ArrowRight: R(i, 1),
+        ArrowUp: R(i, -7),
+        ArrowDown: R(i, 7),
+        Home: R(i, -S),
+        End: R(i, 6 - S),
+        PageUp: et(i, -1),
+        PageDown: et(i, 1)
+      }[N.key];
+      D && (N.preventDefault(), Q(D));
+    };
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ...se,
+        ref: pe,
+        id: E,
+        style: ne ? { ...ie, ...ne } : ie,
+        className: p(
+          "p-date-picker",
+          ae && "p-date-picker--with-presets",
+          u && "p-date-picker--error",
+          m && "p-date-picker--disabled",
+          P
+        ),
+        children: [
+          /* @__PURE__ */ k("div", { id: L, className: "p-date-picker__label", children: [
+            /* @__PURE__ */ a("span", { children: e }),
+            ae ? /* @__PURE__ */ a("span", { className: p("p-date-picker__label-value", !g && "p-date-picker__label-value--empty"), children: fe }) : null
+          ] }),
+          ae ? /* @__PURE__ */ k(
+            "div",
+            {
+              "aria-describedby": Me,
+              "aria-labelledby": L,
+              className: p(
+                "p-date-picker__presets",
+                f !== "auto" && "p-date-picker__presets--fixed"
+              ),
+              role: "group",
+              children: [
+                s.map((i) => {
+                  const N = He(i), S = De(N, g);
+                  return /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: p("p-date-picker__preset", S && "p-date-picker__preset--active"),
+                      disabled: m,
+                      "aria-pressed": S,
+                      onClick: () => ve(i),
+                      children: i.label
+                    },
+                    i.label
+                  );
+                }),
+                je ? /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    className: p(
+                      "p-date-picker__preset",
+                      _e && "p-date-picker__preset--active"
+                    ),
+                    disabled: m,
+                    "aria-controls": A,
+                    "aria-expanded": Y,
+                    "aria-pressed": _e,
+                    onClick: (i) => Y ? W(!0) : $e(i.currentTarget),
+                    children: l
+                  }
+                ) : null
+              ]
+            }
+          ) : /* @__PURE__ */ k(
+            "button",
+            {
+              type: "button",
+              className: p("p-date-picker__trigger", !g && "p-date-picker__trigger--empty"),
+              disabled: m,
+              "aria-controls": A,
+              "aria-describedby": Me,
+              "aria-expanded": Y,
+              "aria-haspopup": "dialog",
+              "aria-labelledby": L,
+              onClick: (i) => Y ? W(!0) : $e(i.currentTarget),
+              children: [
+                /* @__PURE__ */ a("span", { children: fe }),
+                /* @__PURE__ */ a("span", { className: "p-date-picker__trigger-icon", children: /* @__PURE__ */ a(Mt, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("input", { type: "hidden", name: M, value: ge ?? "", required: $ }),
+          Y && /* @__PURE__ */ k(
+            "div",
+            {
+              id: A,
+              className: "p-date-picker__panel",
+              role: "dialog",
+              "aria-labelledby": `${A}-title`,
+              onKeyDown: (i) => {
+                i.key === "Escape" && W();
+              },
+              children: [
+                /* @__PURE__ */ k("div", { className: "p-date-picker__calendar-header", children: [
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: "p-date-picker__nav",
+                      "aria-label": "Previous month",
+                      onClick: () => K((i) => Ge(i, -1)),
+                      children: /* @__PURE__ */ a($t, {})
+                    }
+                  ),
+                  /* @__PURE__ */ a("div", { id: `${A}-title`, className: "p-date-picker__month", children: kt(G, w) }),
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: "p-date-picker__nav",
+                      "aria-label": "Next month",
+                      onClick: () => K((i) => Ge(i, 1)),
+                      children: /* @__PURE__ */ a(Pt, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "p-date-picker__weekdays", "aria-hidden": "true", children: xe.map((i) => /* @__PURE__ */ a("span", { children: i }, i)) }),
+                /* @__PURE__ */ a("div", { className: "p-date-picker__grid", role: "grid", "aria-labelledby": `${A}-title`, children: we.map((i) => {
+                  const N = ke(i), S = i.getMonth() !== G.getMonth(), o = De(i, g), D = De(i, F), B = Oe(i, ee) || Ve(i, Z);
+                  return /* @__PURE__ */ a(
+                    "button",
+                    {
+                      ref: (re) => {
+                        te.current[N] = re;
+                      },
+                      type: "button",
+                      role: "gridcell",
+                      "data-date": N,
+                      className: p(
+                        "p-date-picker__day",
+                        S && "p-date-picker__day--outside",
+                        D && "p-date-picker__day--today",
+                        o && "p-date-picker__day--selected"
+                      ),
+                      disabled: B,
+                      "aria-label": wt(i, w),
+                      "aria-selected": o,
+                      tabIndex: De(i, J) ? 0 : -1,
+                      onClick: () => Pe(i),
+                      onKeyDown: We(i),
+                      children: i.getDate()
+                    },
+                    N
+                  );
+                }) })
+              ]
+            }
+          ),
+          u && h ? /* @__PURE__ */ a("p", { id: he, role: "alert", className: "p-date-picker__message p-date-picker__message--error", children: h }) : null,
+          !u && c ? /* @__PURE__ */ a("p", { id: z, className: "p-date-picker__message", children: c }) : null
+        ]
+      }
+    );
+  }
+);
+Ct.displayName = "PDatePicker";
+const Xt = {
+  today: { label: "Today", value: () => de() },
+  yesterday: { label: "Yesterday", value: () => R(de(), -1) },
+  tomorrow: { label: "Tomorrow", value: () => R(de(), 1) },
+  startOfMonth: { label: "Start of month", value: () => ue(de()) },
+  endOfMonth: {
+    label: "End of month",
+    value: () => {
+      const e = de();
+      return new Date(e.getFullYear(), e.getMonth() + 1, 0);
+    }
+  }
+}, It = new Intl.DateTimeFormat(void 0, { weekday: "short" });
+function Ae(e) {
+  if (!e)
+    return null;
+  if (e instanceof Date)
+    return Number.isNaN(e.getTime()) ? null : new Date(e.getFullYear(), e.getMonth(), e.getDate());
+  const t = e.split("-").map(Number);
+  if (t.length !== 3 || t.some(Number.isNaN))
+    return null;
+  const [n, r, s] = t, l = new Date(n, r - 1, s);
+  return l.getFullYear() !== n || l.getMonth() !== r - 1 || l.getDate() !== s ? null : l;
+}
+function y(e) {
+  if (!e)
+    return "";
+  const t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+  return `${t}-${n}-${r}`;
+}
+function X(e) {
+  return new Date(e.getFullYear(), e.getMonth(), 1);
+}
+function Je(e) {
+  return new Date(e.getFullYear(), e.getMonth() + 1, 0);
+}
+function Ye(e, t) {
+  return new Date(e.getFullYear(), e.getMonth() + t, 1);
+}
+function tt(e, t) {
+  const n = Ye(e, t), r = Je(n).getDate();
+  return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
+}
+function I(e, t) {
+  return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function O() {
+  const e = /* @__PURE__ */ new Date();
+  return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function Ft(e, t) {
+  const n = X(e), r = (n.getDay() - t + 7) % 7, s = I(n, -r);
+  return Array.from({ length: 42 }, (l, d) => I(s, d));
+}
+function St(e, t) {
+  return new Intl.DateTimeFormat(t, { month: "long", year: "numeric" }).format(e);
+}
+function Ie(e, t) {
+  return new Intl.DateTimeFormat(t, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(e);
+}
+function Tt(e, t) {
+  return new Intl.DateTimeFormat(t, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(e);
 }
-function H() {
+function Bt(e, t) {
+  const n = new Date(2024, 0, 7);
+  return Array.from({ length: 7 }, (r, s) => {
+    const l = I(n, e + s);
+    return It.formatToParts(l).length ? new Intl.DateTimeFormat(t, { weekday: "short" }).format(l) : "";
+  });
+}
+function Fe(e, t) {
+  return !!(e && t && y(e) === y(t));
+}
+function Ue(e, t) {
+  return !!(t && e.getTime() < t.getTime());
+}
+function qe(e, t) {
+  return !!(t && e.getTime() > t.getTime());
+}
+function Rt(e, t, n) {
+  return !!(t && n && e > t && e < n);
+}
+function At(e, t) {
+  return !e && !t ? {} : e && t && t < e ? {
+    start: y(t),
+    end: y(e)
+  } : {
+    start: y(e),
+    end: y(t)
+  };
+}
+function Ze(e) {
+  return typeof e.value == "function" ? e.value() : e.value;
+}
+function Te(e) {
+  return {
+    startDate: Ae(e == null ? void 0 : e.start),
+    endDate: Ae(e == null ? void 0 : e.end)
+  };
+}
+function at(e, t) {
+  return !!(e != null && e.start && (e != null && e.end) && e.start === (t == null ? void 0 : t.start) && e.end === (t == null ? void 0 : t.end));
+}
+function Yt(e, t, n) {
+  const { startDate: r, endDate: s } = Te(e);
+  return r && s ? `${Ie(r, n)} - ${Ie(s, n)}` : r ? `${Ie(r, n)} -` : s ? `- ${Ie(s, n)}` : t;
+}
+function Lt() {
+  return /* @__PURE__ */ k("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: [
+    /* @__PURE__ */ a("path", { d: "M6 3v3" }),
+    /* @__PURE__ */ a("path", { d: "M14 3v3" }),
+    /* @__PURE__ */ a("path", { d: "M4 8h12" }),
+    /* @__PURE__ */ a("path", { d: "M5 5h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" })
+  ] });
+}
+function zt() {
+  return /* @__PURE__ */ a("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "m12 5-5 5 5 5" }) });
+}
+function Kt() {
+  return /* @__PURE__ */ a("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "m8 5 5 5-5 5" }) });
+}
+const jt = U(
+  ({
+    label: e,
+    value: t,
+    defaultValue: n,
+    onValueChange: r,
+    presets: s = [],
+    customLabel: l = "Custom",
+    showCustom: d = !0,
+    presetColumns: f = "auto",
+    placeholder: b = "Select range",
+    helperText: c,
+    isError: u = !1,
+    errorMessage: h,
+    min: v,
+    max: C,
+    nameStart: M,
+    nameEnd: m,
+    disabled: _ = !1,
+    readOnly: $ = !1,
+    required: w = !1,
+    locale: x,
+    weekStartsOn: P = 0,
+    className: q,
+    id: ie,
+    style: se,
+    ...pe
+  }, ze) => {
+    const E = Le(), L = ie ?? E, A = `${L}-label`, z = `${L}-panel`, he = `${L}-helper`, me = `${L}-error`, Ne = t !== void 0, [Ke, Y] = V(n ?? {}), [T, ge] = V(!1), g = Ne ? t : Ke, { startDate: F, endDate: ee } = Te(g), Z = rt(O, []), G = Ae(v), K = Ae(C), [J, j] = V(() => X(F ?? Z)), [le, te] = V(() => F ?? Z), we = Be(null), xe = Be({}), ae = Ft(J, P), je = Bt(P, x), ne = s.length > 0, Me = ne ? d : !0, fe = f === "auto" ? void 0 : {
+      "--p-date-range-picker-preset-columns": String(f)
+    }, ye = !!(g != null && g.start && (g != null && g.end)), _e = u && h ? me : c ? he : void 0, be = Yt(g, b, x), $e = ne ? s.some((o) => at(Ze(o), g)) : !1, W = T || !!(ye && !$e);
+    ot(() => {
+      var o;
+      T && ((o = xe.current[y(le)]) == null || o.focus());
+    }, [le, T, J]);
+    const ve = (o, D) => {
+      const { startDate: B, endDate: re } = Te(o), H = At(B, re);
+      Ne || Y(H);
+      const ce = Te(H);
+      ce.startDate && j(X(ce.startDate)), r == null || r(H, {
+        startDate: ce.startDate,
+        endDate: ce.endDate,
+        source: D
+      });
+    }, Pe = (o) => {
+      if (_ || $)
+        return;
+      const D = F ?? Z;
+      we.current = o, te(D), j(X(D)), ge(!0);
+    }, Q = (o = !1) => {
+      var D;
+      ge(!1), o && ((D = we.current) == null || D.focus());
+    }, We = (o) => {
+      _ || $ || (ve(Ze(o), "preset"), Q());
+    }, i = (o) => {
+      if (!(_ || $ || Ue(o, G) || qe(o, K))) {
+        if (!F || ee) {
+          te(o), ve({ start: y(o), end: "" }, "calendar");
+          return;
+        }
+        te(o), ve({ start: y(F), end: y(o) }, "calendar"), Q(!0);
+      }
+    }, N = (o) => {
+      Ue(o, G) || qe(o, K) || (te(o), j(X(o)));
+    }, S = (o) => (D) => {
+      if (D.key === "Escape") {
+        D.preventDefault(), Q(!0);
+        return;
+      }
+      const B = (o.getDay() - P + 7) % 7, H = {
+        ArrowLeft: I(o, -1),
+        ArrowRight: I(o, 1),
+        ArrowUp: I(o, -7),
+        ArrowDown: I(o, 7),
+        Home: I(o, -B),
+        End: I(o, 6 - B),
+        PageUp: tt(o, -1),
+        PageDown: tt(o, 1)
+      }[D.key];
+      H && (D.preventDefault(), N(H));
+    };
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ...pe,
+        ref: ze,
+        id: L,
+        style: fe ? { ...se, ...fe } : se,
+        className: p(
+          "p-date-range-picker",
+          ne && "p-date-range-picker--with-presets",
+          u && "p-date-range-picker--error",
+          _ && "p-date-range-picker--disabled",
+          q
+        ),
+        children: [
+          /* @__PURE__ */ k("div", { id: A, className: "p-date-range-picker__label", children: [
+            /* @__PURE__ */ a("span", { children: e }),
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: p(
+                  "p-date-range-picker__label-value",
+                  !ye && "p-date-range-picker__label-value--empty"
+                ),
+                children: be
+              }
+            )
+          ] }),
+          ne ? /* @__PURE__ */ k(
+            "div",
+            {
+              "aria-describedby": _e,
+              "aria-labelledby": A,
+              className: p(
+                "p-date-range-picker__presets",
+                f !== "auto" && "p-date-range-picker__presets--fixed"
+              ),
+              role: "group",
+              children: [
+                s.map((o) => {
+                  const D = Ze(o), B = at(D, g);
+                  return /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: p("p-date-range-picker__preset", B && "p-date-range-picker__preset--active"),
+                      disabled: _,
+                      "aria-pressed": B,
+                      onClick: () => We(o),
+                      children: o.label
+                    },
+                    o.label
+                  );
+                }),
+                Me ? /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    className: p(
+                      "p-date-range-picker__preset",
+                      W && "p-date-range-picker__preset--active"
+                    ),
+                    disabled: _,
+                    "aria-controls": z,
+                    "aria-expanded": T,
+                    "aria-pressed": W,
+                    onClick: (o) => T ? Q(!0) : Pe(o.currentTarget),
+                    children: l
+                  }
+                ) : null
+              ]
+            }
+          ) : /* @__PURE__ */ k(
+            "button",
+            {
+              type: "button",
+              className: p(
+                "p-date-range-picker__trigger",
+                !ye && "p-date-range-picker__trigger--empty"
+              ),
+              disabled: _,
+              "aria-controls": z,
+              "aria-describedby": _e,
+              "aria-expanded": T,
+              "aria-haspopup": "dialog",
+              "aria-labelledby": A,
+              onClick: (o) => T ? Q(!0) : Pe(o.currentTarget),
+              children: [
+                /* @__PURE__ */ a("span", { children: be }),
+                /* @__PURE__ */ a("span", { className: "p-date-range-picker__trigger-icon", children: /* @__PURE__ */ a(Lt, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("input", { type: "hidden", name: M, value: (g == null ? void 0 : g.start) ?? "", required: w }),
+          /* @__PURE__ */ a("input", { type: "hidden", name: m, value: (g == null ? void 0 : g.end) ?? "", required: w }),
+          T && /* @__PURE__ */ k(
+            "div",
+            {
+              id: z,
+              className: "p-date-range-picker__panel",
+              role: "dialog",
+              "aria-labelledby": `${z}-title`,
+              onKeyDown: (o) => {
+                o.key === "Escape" && Q();
+              },
+              children: [
+                /* @__PURE__ */ k("div", { className: "p-date-range-picker__calendar-header", children: [
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: "p-date-range-picker__nav",
+                      "aria-label": "Previous month",
+                      onClick: () => j((o) => Ye(o, -1)),
+                      children: /* @__PURE__ */ a(zt, {})
+                    }
+                  ),
+                  /* @__PURE__ */ a("div", { id: `${z}-title`, className: "p-date-range-picker__month", children: St(J, x) }),
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      className: "p-date-range-picker__nav",
+                      "aria-label": "Next month",
+                      onClick: () => j((o) => Ye(o, 1)),
+                      children: /* @__PURE__ */ a(Kt, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "p-date-range-picker__weekdays", "aria-hidden": "true", children: je.map((o) => /* @__PURE__ */ a("span", { children: o }, o)) }),
+                /* @__PURE__ */ a("div", { className: "p-date-range-picker__grid", role: "grid", "aria-labelledby": `${z}-title`, children: ae.map((o) => {
+                  const D = y(o), B = o.getMonth() !== J.getMonth(), re = Fe(o, F), H = Fe(o, ee), ce = Rt(o, F, ee), st = Fe(o, Z), lt = Ue(o, G) || qe(o, K);
+                  return /* @__PURE__ */ a(
+                    "button",
+                    {
+                      ref: (ct) => {
+                        xe.current[D] = ct;
+                      },
+                      type: "button",
+                      role: "gridcell",
+                      "data-date": D,
+                      className: p(
+                        "p-date-range-picker__day",
+                        B && "p-date-range-picker__day--outside",
+                        st && "p-date-range-picker__day--today",
+                        ce && "p-date-range-picker__day--in-range",
+                        (re || H) && "p-date-range-picker__day--selected"
+                      ),
+                      disabled: lt,
+                      "aria-label": Tt(o, x),
+                      "aria-selected": re || H,
+                      tabIndex: Fe(o, le) ? 0 : -1,
+                      onClick: () => i(o),
+                      onKeyDown: S(o),
+                      children: o.getDate()
+                    },
+                    D
+                  );
+                }) })
+              ]
+            }
+          ),
+          u && h ? /* @__PURE__ */ a("p", { id: me, role: "alert", className: "p-date-range-picker__message p-date-range-picker__message--error", children: h }) : null,
+          !u && c ? /* @__PURE__ */ a("p", { id: he, className: "p-date-range-picker__message", children: c }) : null
+        ]
+      }
+    );
+  }
+);
+jt.displayName = "PDateRangePicker";
+const Et = {
+  thisWeek: {
+    label: "This week",
+    value: () => {
+      const e = O(), t = I(e, -e.getDay());
+      return {
+        start: y(t),
+        end: y(I(t, 6))
+      };
+    }
+  },
+  last7Days: {
+    label: "Last 7 days",
+    value: () => {
+      const e = O();
+      return {
+        start: y(I(e, -6)),
+        end: y(e)
+      };
+    }
+  },
+  last14Days: {
+    label: "Last 14 days",
+    value: () => {
+      const e = O();
+      return {
+        start: y(I(e, -13)),
+        end: y(e)
+      };
+    }
+  },
+  last30Days: {
+    label: "Last 30 days",
+    value: () => {
+      const e = O();
+      return {
+        start: y(I(e, -29)),
+        end: y(e)
+      };
+    }
+  },
+  thisMonth: {
+    label: "This month",
+    value: () => {
+      const e = O(), t = X(e), n = Je(e);
+      return {
+        start: y(t),
+        end: y(n)
+      };
+    }
+  },
+  lastMonth: {
+    label: "Last month",
+    value: () => {
+      const e = O(), t = Ye(e, -1);
+      return {
+        start: y(X(t)),
+        end: y(Je(t))
+      };
+    }
+  },
+  monthToDate: {
+    label: "Month to date",
+    value: () => {
+      const e = O(), t = X(e);
+      return {
+        start: y(t),
+        end: y(e)
+      };
+    }
+  },
+  yearToDate: {
+    label: "Year to date",
+    value: () => {
+      const e = O();
+      return {
+        start: y(new Date(e.getFullYear(), 0, 1)),
+        end: y(e)
+      };
+    }
+  }
+}, Wt = U(
+  ({
+    as: e = "span",
+    variant: t = "primary",
+    appearance: n = "text",
+    color: r,
+    textColor: s,
+    children: l,
+    className: d,
+    style: f,
+    ...b
+  }, c) => {
+    const u = {
+      ...f,
+      ...r ? { "--p-highlight-color": r, "--p-highlight-bg": r } : {},
+      ...s ? { "--p-highlight-text": s } : {}
+    };
+    return /* @__PURE__ */ a(
+      e,
+      {
+        ...b,
+        ref: c,
+        className: p(
+          "p-highlight",
+          `p-highlight--${t}`,
+          n === "background" && "p-highlight--background",
+          d
+        ),
+        style: u,
+        children: l
+      }
+    );
+  }
+);
+Wt.displayName = "PHighlight";
+const Ht = U(
+  ({
+    children: e,
+    ariaLabel: t = "Horizontal content",
+    gap: n,
+    snap: r = !0,
+    className: s,
+    scrollerClassName: l,
+    listClassName: d,
+    itemClassName: f,
+    style: b,
+    ...c
+  }, u) => {
+    const h = {
+      ...b,
+      ...n ? { "--p-horizontal-slider-gap": n } : {}
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ...c,
+        ref: u,
+        className: p("p-horizontal-slider", !r && "p-horizontal-slider--no-snap", s),
+        style: h,
+        children: /* @__PURE__ */ a(
+          "div",
+          {
+            "aria-label": t,
+            className: p("p-horizontal-slider__scroller", l),
+            role: "region",
+            tabIndex: 0,
+            children: /* @__PURE__ */ a("ul", { className: p("p-horizontal-slider__list", d), children: dt.map(e, (v) => /* @__PURE__ */ a("li", { className: p("p-horizontal-slider__item", f), children: v })) })
+          }
+        )
+      }
+    );
+  }
+);
+Ht.displayName = "PHorizontalSlider";
+function ea({ title: e }) {
+  return /* @__PURE__ */ a(ut, { className: "pt-2 border-t border-white text-white", children: /* @__PURE__ */ a(Re, { className: "uppercase", variant: "body-wide", children: e }) });
+}
+function Ot() {
   return /* @__PURE__ */ k(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: "20",
-      height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -125,20 +1147,19 @@ function H() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
+      className: "p-text-input__icon",
       children: [
-        /* @__PURE__ */ r("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ a("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
-function z() {
+function Vt() {
   return /* @__PURE__ */ k(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: "20",
-      height: "20",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -147,246 +1168,213 @@ function z() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
+      className: "p-text-input__icon",
       children: [
-        /* @__PURE__ */ r("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ r("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-        /* @__PURE__ */ r("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-        /* @__PURE__ */ r("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+        /* @__PURE__ */ a("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ a("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+        /* @__PURE__ */ a("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+        /* @__PURE__ */ a("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
       ]
     }
   );
 }
-const K = j(
+const Ut = U(
   ({
-    className: t,
-    inputClassName: n,
-    type: e,
-    label: a,
+    className: e,
+    inputClassName: t,
+    type: n,
+    label: r,
     helperText: s,
-    id: i,
-    isError: l = !1,
+    id: l,
+    isError: d = !1,
     errorMessage: f,
     rightAdornment: b,
-    disabled: o,
+    disabled: c,
     readOnly: u,
-    style: x,
-    ...d
-  }, v) => {
-    const h = C(), p = i ?? h, m = `${p}-error`, g = `${p}-helper`, y = e === "password", N = !!b && !y, [w, A] = L(!1), B = y ? w ? "text" : "password" : e ?? "text", S = [
-      l && f ? m : null,
-      !l && s ? g : null
+    style: h,
+    ...v
+  }, C) => {
+    const M = Le(), m = l ?? M, _ = `${m}-error`, $ = `${m}-helper`, w = n === "password", x = !!b && !w, [P, q] = V(!1), ie = w ? P ? "text" : "password" : n ?? "text", se = [
+      d && f ? _ : null,
+      !d && s ? $ : null
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ k("div", { className: c("p-text-input relative w-full", t), style: x, children: [
-      /* @__PURE__ */ r(
+    return /* @__PURE__ */ k("div", { className: p("p-text-input", e), style: h, children: [
+      /* @__PURE__ */ a(
         "input",
         {
-          ...d,
-          id: p,
-          ref: v,
-          type: B,
-          disabled: o,
+          ...v,
+          id: m,
+          ref: C,
+          type: ie,
+          disabled: c,
           readOnly: u,
           placeholder: " ",
-          "aria-invalid": l || void 0,
-          "aria-describedby": S,
-          "aria-required": d.required,
-          "aria-disabled": o,
+          "aria-invalid": d || void 0,
+          "aria-describedby": se,
+          "aria-required": v.required,
+          "aria-disabled": c,
           "aria-readonly": u,
-          autoComplete: d.autoComplete ?? (y ? "current-password" : void 0),
-          className: c(
-            // Layout — tall enough for the floating label + value
-            "peer h-16 w-full rounded px-4 pt-6 pb-2",
-            (y || N) && "pr-12",
-            // Visuals
-            "bg-(--p-input-bg) text-(--p-input-text)",
-            "font-sans text-sm outline-none",
-            "border border-(--p-input-border) focus:border-(--p-input-border-focus)",
-            // Focus
-            "focus:bg-(--p-input-bg-focus)",
-            "focus:ring-2 focus:ring-(--p-input-ring)",
-            // Motion
-            "transition-all duration-150 ease-in",
-            // States
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "read-only:cursor-default read-only:bg-(--p-input-bg-readonly)",
-            l && "ring-2 ring-red-500",
-            // Date — hide native picker chrome so rightAdornment can replace it
-            N && e === "date" && "[&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0",
-            n
+          autoComplete: v.autoComplete ?? (w ? "current-password" : void 0),
+          className: p(
+            "p-text-input__control",
+            (w || x) && "p-text-input__control--adorned",
+            d && "p-text-input__control--error",
+            x && n === "date" && "p-text-input__control--date-adorned",
+            t
           )
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
           "aria-hidden": "true",
-          className: c(
-            "pointer-events-none absolute top-2 left-4",
-            "font-sans text-xs",
-            "origin-left transition-all duration-150 ease-in",
-            // Hidden by default
-            "scale-0 opacity-0",
-            l ? "text-red-500" : "text-(--p-input-label) peer-focus:text-(--p-input-label-focus)",
-            // Reveal when focused or filled
-            "peer-focus:scale-100 peer-focus:opacity-100",
-            "peer-not-placeholder-shown:scale-100 peer-not-placeholder-shown:opacity-100"
+          className: p(
+            "p-text-input__label p-text-input__floating-label",
+            d && "p-text-input__label--error"
           ),
-          children: a
+          children: r
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "label",
         {
-          htmlFor: p,
-          className: c(
-            "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2",
-            "font-sans text-sm text-(--p-input-text)",
-            "origin-left transition-all duration-150 ease-in",
-            // Collapse when focused or filled
-            "peer-focus:scale-0 peer-focus:opacity-0",
-            "peer-not-placeholder-shown:scale-0 peer-not-placeholder-shown:opacity-0",
-            o && "opacity-50"
-          ),
-          children: a
+          htmlFor: m,
+          className: "p-text-input__label p-text-input__placeholder-label",
+          children: r
         }
       ),
-      y && /* @__PURE__ */ r(
+      w && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => A((q) => !q),
-          disabled: o,
-          className: c(
-            "absolute top-1/2 right-4 -translate-y-1/2",
-            "text-(--p-input-label) hover:text-(--p-input-text)",
-            "transition-colors duration-150",
-            "focus-visible:outline-2 focus-visible:outline-offset-2",
-            "focus-visible:outline-(--p-input-ring)",
-            "disabled:pointer-events-none disabled:opacity-50"
-          ),
-          "aria-label": w ? "Hide password" : "Show password",
-          "aria-pressed": w,
-          "aria-controls": p,
-          children: w ? /* @__PURE__ */ r(H, {}) : /* @__PURE__ */ r(z, {})
+          onClick: () => q((pe) => !pe),
+          disabled: c,
+          className: "p-text-input__action",
+          "aria-label": P ? "Hide password" : "Show password",
+          "aria-pressed": P,
+          "aria-controls": m,
+          children: P ? /* @__PURE__ */ a(Ot, {}) : /* @__PURE__ */ a(Vt, {})
         }
       ),
-      N && /* @__PURE__ */ r(
-        "span",
+      x && /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "p-text-input__adornment", children: b }),
+      d && f && /* @__PURE__ */ a(
+        "p",
         {
-          "aria-hidden": "true",
-          className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-(--p-input-label)",
-          children: b
+          id: _,
+          role: "alert",
+          className: "p-text-input__message p-text-input__message--error",
+          children: f
         }
       ),
-      l && f && /* @__PURE__ */ r("p", { id: m, role: "alert", className: "mt-1 px-4 font-sans text-xs text-red-500", children: f }),
-      !l && s && /* @__PURE__ */ r("p", { id: g, className: "mt-1 px-4 font-sans text-xs text-(--p-input-text-helper)", children: s })
+      !d && s && /* @__PURE__ */ a(
+        "p",
+        {
+          id: $,
+          className: "p-text-input__message p-text-input__message--helper",
+          children: s
+        }
+      )
     ] });
   }
 );
-K.displayName = "PTextInput";
-const M = j(
+Ut.displayName = "PTextInput";
+const qt = U(
   ({
-    className: t,
-    textareaClassName: n,
-    label: e,
-    helperText: a,
+    className: e,
+    textareaClassName: t,
+    label: n,
+    helperText: r,
     id: s,
-    isError: i = !1,
-    errorMessage: l,
+    isError: l = !1,
+    errorMessage: d,
     disabled: f,
     readOnly: b,
-    rows: o = 4,
+    rows: c = 4,
     style: u,
-    ...x
-  }, d) => {
-    const v = C(), h = s ?? v, p = `${h}-error`, m = `${h}-helper`, g = [
-      i && l ? p : null,
-      !i && a ? m : null
+    ...h
+  }, v) => {
+    const C = Le(), M = s ?? C, m = `${M}-error`, _ = `${M}-helper`, $ = [
+      l && d ? m : null,
+      !l && r ? _ : null
     ].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ k("div", { className: c("p-text-area relative w-full", t), style: u, children: [
-      /* @__PURE__ */ r(
+    return /* @__PURE__ */ k("div", { className: p("p-text-area", e), style: u, children: [
+      /* @__PURE__ */ a(
         "textarea",
         {
-          ...x,
-          id: h,
-          ref: d,
-          rows: o,
+          ...h,
+          id: M,
+          ref: v,
+          rows: c,
           disabled: f,
           readOnly: b,
           placeholder: " ",
-          "aria-invalid": i || void 0,
-          "aria-describedby": g,
-          "aria-required": x.required,
+          "aria-invalid": l || void 0,
+          "aria-describedby": $,
+          "aria-required": h.required,
           "aria-disabled": f,
           "aria-readonly": b,
-          className: c(
-            // Layout
-            "peer w-full rounded px-4 pt-8 pb-3",
-            // Visuals
-            "bg-(--p-textarea-bg) text-(--p-textarea-text)",
-            "font-sans text-sm outline-none",
-            "border border-(--p-textarea-border) focus:border-(--p-textarea-border-focus)",
-            // Focus
-            "focus:bg-(--p-textarea-bg-focus)",
-            "focus:ring-2 focus:ring-(--p-textarea-ring)",
-            // Resize
-            "resize-y",
-            // Motion
-            "transition-all duration-150 ease-in",
-            // States
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "read-only:cursor-default read-only:bg-(--p-textarea-bg-readonly)",
-            i && "ring-2 ring-red-500",
-            n
+          className: p(
+            "p-text-area__control",
+            l && "p-text-area__control--error",
+            t
           )
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
           "aria-hidden": "true",
-          className: c(
-            "pointer-events-none absolute top-2 left-4",
-            "font-sans text-xs",
-            "origin-left transition-all duration-150 ease-in",
-            // Hidden by default
-            "scale-0 opacity-0",
-            i ? "text-red-500" : "text-(--p-textarea-label) peer-focus:text-(--p-textarea-label-focus)",
-            // Reveal when focused or filled
-            "peer-focus:scale-100 peer-focus:opacity-100",
-            "peer-not-placeholder-shown:scale-100 peer-not-placeholder-shown:opacity-100"
+          className: p(
+            "p-text-area__label p-text-area__floating-label",
+            l && "p-text-area__label--error"
           ),
-          children: e
+          children: n
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "label",
         {
-          htmlFor: h,
-          className: c(
-            "pointer-events-none absolute top-4 left-4",
-            "font-sans text-sm text-(--p-textarea-text)",
-            "origin-left transition-all duration-150 ease-in",
-            // Collapse when focused or filled
-            "peer-focus:scale-0 peer-focus:opacity-0",
-            "peer-not-placeholder-shown:scale-0 peer-not-placeholder-shown:opacity-0",
-            f && "opacity-50"
-          ),
-          children: e
+          htmlFor: M,
+          className: "p-text-area__label p-text-area__placeholder-label",
+          children: n
+        }
+      ),
+      l && d && /* @__PURE__ */ a(
+        "p",
+        {
+          id: m,
+          role: "alert",
+          className: "p-text-area__message p-text-area__message--error",
+          children: d
         }
       ),
-      i && l && /* @__PURE__ */ r("p", { id: p, role: "alert", className: "mt-1 px-4 font-sans text-xs text-red-500", children: l }),
-      !i && a && /* @__PURE__ */ r("p", { id: m, className: "mt-1 px-4 font-sans text-xs text-(--p-textarea-text-helper)", children: a })
+      !l && r && /* @__PURE__ */ a(
+        "p",
+        {
+          id: _,
+          className: "p-text-area__message p-text-area__message--helper",
+          children: r
+        }
+      )
     ] });
   }
 );
-M.displayName = "PTextArea";
+qt.displayName = "PTextArea";
 export {
-  J as PSectionHeader,
-  M as PTextArea,
-  K as PTextInput,
-  F as PTypography,
-  G as Row,
-  T as Stack
+  pt as PBadge,
+  ht as PButton,
+  _t as PCard,
+  Ct as PDatePicker,
+  Xt as PDatePickerPresets,
+  jt as PDateRangePicker,
+  Et as PDateRangePickerPresets,
+  Wt as PHighlight,
+  Ht as PHorizontalSlider,
+  ea as PSectionHeader,
+  qt as PTextArea,
+  Ut as PTextInput,
+  Re as PTypography,
+  Qt as Row,
+  ut as Stack
 };
 //# sourceMappingURL=index.es.js.map