@epfl-sti/poesis 0.1.2 → 0.1.4

package/dist/poesis.js

@@ -2,7 +2,7 @@
 import { useState as N, forwardRef as C, useId as I, useRef as D, useCallback as k, useEffect as $, createContext as S, useContext as A, useSyncExternalStore as ue, useMemo as L } from "react";
 import { useTranslation as Z } from "react-i18next";
 import { jsx as e, jsxs as m, Fragment as B } from "react/jsx-runtime";
-import { SunFill as be, MoonFill as pe, List as fe, ChevronDown as ee, XLg as xe, SortDown as ge, SortNumericDown as he, SortNumericDownAlt as ye, SortAlphaDown as ve, SortAlphaDownAlt as we, InfoCircleFill as te, XCircleFill as re, ExclamationTriangleFill as T, CheckCircleFill as ne, X as M } from "react-bootstrap-icons";
+import { SunFill as be, MoonFill as pe, List as fe, ChevronDown as ee, XLg as xe, SortDown as ge, SortNumericDown as he, SortNumericDownAlt as ye, SortAlphaDown as ve, SortAlphaDownAlt as we, InfoCircleFill as te, XCircleFill as re, ExclamationTriangleFill as R, CheckCircleFill as ne, X as M } from "react-bootstrap-icons";
 import { createPortal as Ne } from "react-dom";
 import { useFloating as O, autoUpdate as V, offset as U, flip as H, shift as q, useClick as oe, useDismiss as K, useRole as G, useListNavigation as ke, useInteractions as X, FloatingPortal as Y, FloatingFocusManager as ie, arrow as Ce, useHover as ze, useFocus as $e } from "@floating-ui/react";
 import De from "react-select";
@@ -15,7 +15,7 @@ function je(t) {
   const r = t.trim().split(/\s+/);
   return r.length === 0 ? "?" : r.length === 1 ? r[0][0].toUpperCase() : (r[0][0] + r[r.length - 1][0]).toUpperCase();
 }
-function wt({ src: t, name: r, size: o = "md", alt: n, className: s = "", ...i }) {
+function wt({ src: t, name: r, size: o = "md", alt: n, className: i = "", ...s }) {
   const [a, c] = N(!1), d = !!t && !a;
   return /* @__PURE__ */ e(
     "span",
@@ -26,9 +26,9 @@ function wt({ src: t, name: r, size: o = "md", alt: n, className: s = "", ...i }
         "inline-flex items-center justify-center rounded-full overflow-hidden",
         "bg-primary text-white font-semibold select-none shrink-0",
         Ie[o],
-        s
+        i
       ].join(" "),
-      ...i,
+      ...s,
       children: d ? /* @__PURE__ */ e(
         "img",
         {
@@ -54,13 +54,13 @@ const Fe = {
   error: "bg-error",
   info: "bg-info"
 };
-function Nt({ color: t = "default", dot: r, className: o = "", children: n, ...s }) {
+function Nt({ color: t = "default", dot: r, className: o = "", children: n, ...i }) {
   return r ? /* @__PURE__ */ e(
     "span",
     {
       role: "status",
       className: `inline-block size-2.5 rounded-full ${Ee[t]} ${o}`,
-      ...s
+      ...i
     }
   ) : /* @__PURE__ */ e(
     "span",
@@ -71,7 +71,7 @@ function Nt({ color: t = "default", dot: r, className: o = "", children: n, ...s
         Fe[t],
         o
       ].join(" "),
-      ...s,
+      ...i,
       children: n
     }
   );
@@ -133,14 +133,14 @@ const Ae = {
   variant: r = "primary",
   size: o = "md",
   loading: n = !1,
-  disabled: s,
-  iconLeft: i,
+  disabled: i,
+  iconLeft: s,
   iconRight: a,
   className: c = "",
   children: d,
   ...l
 }, u) {
-  const b = s || n;
+  const b = i || n;
   return /* @__PURE__ */ m(
     "button",
     {
@@ -162,7 +162,7 @@ const Ae = {
       ].filter(Boolean).join(" "),
       ...l,
       children: [
-        n ? /* @__PURE__ */ e(se, { size: Be[o], "aria-hidden": "true" }) : i,
+        n ? /* @__PURE__ */ e(se, { size: Be[o], "aria-hidden": "true" }) : s,
         d,
         !n && a
       ]
@@ -173,12 +173,12 @@ const Ae = {
   secondary: "border border-border text-text-primary bg-bg-primary hover:bg-bg-tertiary focus-visible:ring-primary",
   ghost: "text-text-primary hover:bg-bg-tertiary focus-visible:ring-primary",
   danger: "bg-error text-white hover:opacity-90 focus-visible:ring-error"
-}, Re = {
+}, Te = {
   sm: "size-7 text-small",
   md: "size-9 text-body",
   lg: "size-11 text-body"
-}, Te = C(function({ variant: r = "ghost", size: o = "md", loading: n = !1, disabled: s, icon: i, className: a = "", ...c }, d) {
-  const l = s || n;
+}, Re = C(function({ variant: r = "ghost", size: o = "md", loading: n = !1, disabled: i, icon: s, className: a = "", ...c }, d) {
+  const l = i || n;
   return /* @__PURE__ */ e(
     "button",
     {
@@ -193,26 +193,26 @@ const Ae = {
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         // variant + size
         Le[r],
-        Re[o],
+        Te[o],
         // disabled / loading
         l && "opacity-50 pointer-events-none",
         a
       ].filter(Boolean).join(" "),
       ...c,
-      children: n ? /* @__PURE__ */ e(se, { size: "sm", "aria-hidden": "true" }) : i
+      children: n ? /* @__PURE__ */ e(se, { size: "sm", "aria-hidden": "true" }) : s
     }
   );
 }), Ct = C(function({
   label: r,
   indeterminate: o = !1,
   helperText: n,
-  error: s,
-  className: i = "",
+  error: i,
+  className: s = "",
   id: a,
   disabled: c,
   ...d
 }, l) {
-  const u = I(), b = a ?? u, h = `${b}-helper`, p = !!s, y = D(null), f = k(
+  const u = I(), b = a ?? u, h = `${b}-helper`, p = !!i, y = D(null), f = k(
     (v) => {
       y.current = v, typeof l == "function" ? l(v) : l && (l.current = v);
     },
@@ -220,7 +220,7 @@ const Ae = {
   );
   return $(() => {
     y.current && (y.current.indeterminate = o);
-  }, [o]), /* @__PURE__ */ m("div", { className: `flex flex-col gap-1 ${i}`, children: [
+  }, [o]), /* @__PURE__ */ m("div", { className: `flex flex-col gap-1 ${s}`, children: [
     /* @__PURE__ */ m("div", { className: "flex items-start gap-2", children: [
       /* @__PURE__ */ e(
         "input",
@@ -230,7 +230,7 @@ const Ae = {
           type: "checkbox",
           disabled: c,
           "aria-invalid": p || void 0,
-          "aria-describedby": n || s ? h : void 0,
+          "aria-describedby": n || i ? h : void 0,
           className: [
             "mt-0.5 size-4 shrink-0 cursor-pointer rounded-sm border appearance-none",
             "bg-bg-primary transition-colors",
@@ -256,12 +256,12 @@ const Ae = {
         }
       )
     ] }),
-    (n || s) && /* @__PURE__ */ e(
+    (n || i) && /* @__PURE__ */ e(
       "p",
       {
         id: h,
         className: `text-caption pl-6 ${p ? "text-error" : "text-text-secondary"}`,
-        children: s ?? n
+        children: i ?? n
       }
     )
   ] });
@@ -285,8 +285,8 @@ const Ae = {
   label: r,
   helperText: o,
   error: n,
-  leftIcon: s,
-  rightIcon: i,
+  leftIcon: i,
+  rightIcon: s,
   inputSize: a = "md",
   className: c = "",
   id: d,
@@ -297,12 +297,12 @@ const Ae = {
   return /* @__PURE__ */ m("div", { className: `flex flex-col gap-1.5 ${c}`, children: [
     r && /* @__PURE__ */ e("label", { htmlFor: p, className: "text-small font-medium text-text-primary", children: r }),
     /* @__PURE__ */ m("div", { className: "relative", children: [
-      s && /* @__PURE__ */ e(
+      i && /* @__PURE__ */ e(
         "span",
         {
           className: `pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-text-secondary ${J[a]}`,
           "aria-hidden": "true",
-          children: s
+          children: i
         }
       ),
       /* @__PURE__ */ e(
@@ -320,18 +320,18 @@ const Ae = {
             "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-bg-secondary",
             f ? "border-error focus:border-error focus:ring-error" : "border-border hover:border-border-strong",
             Me[a],
-            s ? Oe[a] : "",
-            i ? Ve[a] : ""
+            i ? Oe[a] : "",
+            s ? Ve[a] : ""
           ].join(" "),
           ...u
         }
       ),
-      i && /* @__PURE__ */ e(
+      s && /* @__PURE__ */ e(
         "span",
         {
           className: `pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-text-secondary ${J[a]}`,
           "aria-hidden": "true",
-          children: i
+          children: s
         }
       )
     ] }),
@@ -355,19 +355,19 @@ function He({
   value: r,
   onChange: o,
   label: n,
-  helperText: s,
-  error: i,
+  helperText: i,
+  error: s,
   orientation: a = "vertical",
   disabled: c = !1,
   children: d,
   className: l = ""
 }) {
-  const u = I(), b = t ?? u, p = `${`${b}-group`}-helper`, y = !!i;
+  const u = I(), b = t ?? u, p = `${`${b}-group`}-helper`, y = !!s;
   return /* @__PURE__ */ e(ae.Provider, { value: { name: b, value: r, onChange: o, disabled: c, hasError: y }, children: /* @__PURE__ */ m(
     "fieldset",
     {
       className: `flex flex-col gap-2 ${l}`,
-      "aria-describedby": s || i ? p : void 0,
+      "aria-describedby": i || s ? p : void 0,
       disabled: c,
       children: [
         n && /* @__PURE__ */ e("legend", { className: "text-small font-medium text-text-primary mb-1", children: n }),
@@ -379,12 +379,12 @@ function He({
             children: d
           }
         ),
-        (s || i) && /* @__PURE__ */ e(
+        (i || s) && /* @__PURE__ */ e(
           "p",
           {
             id: p,
             className: `text-caption ${y ? "text-error" : "text-text-secondary"}`,
-            children: i ?? s
+            children: s ?? i
           }
         )
       ]
@@ -393,8 +393,8 @@ function He({
 }
 function qe({ value: t, label: r, description: o, disabled: n }) {
   const {
-    name: s,
-    value: i,
+    name: i,
+    value: s,
     onChange: a,
     disabled: c,
     hasError: d
@@ -405,9 +405,9 @@ function qe({ value: t, label: r, description: o, disabled: n }) {
       {
         id: l,
         type: "radio",
-        name: s,
+        name: i,
         value: t,
-        checked: i !== void 0 ? i === t : void 0,
+        checked: s !== void 0 ? s === t : void 0,
         disabled: u,
         onChange: () => a?.(t),
         className: [
@@ -473,8 +473,8 @@ const Ke = (t) => ({
   option: ({ isFocused: t, isSelected: r }) => `${r ? "!bg-primary !text-white" : t ? "!bg-bg-tertiary" : ""}`,
   multiValue: () => "!rounded-sm !bg-bg-tertiary"
 };
-function $t({ label: t, helperText: r, error: o, className: n = "", ...s }) {
-  const i = I(), a = s.inputId ?? i, c = `${a}-helper`, d = !!o;
+function $t({ label: t, helperText: r, error: o, className: n = "", ...i }) {
+  const s = I(), a = i.inputId ?? s, c = `${a}-helper`, d = !!o;
   return /* @__PURE__ */ m("div", { className: `flex flex-col gap-1.5 ${n}`, children: [
     t && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-small font-medium text-text-primary", children: t }),
     /* @__PURE__ */ e(
@@ -482,6 +482,11 @@ function $t({ label: t, helperText: r, error: o, className: n = "", ...s }) {
       {
         inputId: a,
         theme: Ke,
+        menuPortalTarget: document.body,
+        styles: {
+          menuPortal: (l) => ({ ...l, zIndex: 50 }),
+          ...i.styles
+        },
         classNames: {
           ...Q,
           control: (l) => {
@@ -491,7 +496,7 @@ function $t({ label: t, helperText: r, error: o, className: n = "", ...s }) {
         },
         "aria-invalid": d || void 0,
         "aria-errormessage": d ? c : void 0,
-        ...s
+        ...i
       }
     ),
     (r || o) && /* @__PURE__ */ e(
@@ -504,8 +509,8 @@ function $t({ label: t, helperText: r, error: o, className: n = "", ...s }) {
     )
   ] });
 }
-const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disabled: i, ...a }, c) {
-  const d = I(), l = s ?? d, u = `${l}-helper`;
+const Dt = C(function({ label: r, helperText: o, className: n = "", id: i, disabled: s, ...a }, c) {
+  const d = I(), l = i ?? d, u = `${l}-helper`;
   return /* @__PURE__ */ m("div", { className: `flex flex-col gap-1 ${n}`, children: [
     /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ m("div", { className: "relative inline-flex items-center", children: [
@@ -516,7 +521,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
             id: l,
             type: "checkbox",
             role: "switch",
-            disabled: i,
+            disabled: s,
             "aria-describedby": o ? u : void 0,
             className: "peer sr-only",
             ...a
@@ -532,7 +537,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
               "peer-checked:bg-primary",
               "peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
               "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed",
-              i ? "cursor-not-allowed" : "cursor-pointer",
+              s ? "cursor-not-allowed" : "cursor-pointer",
               // Thumb
               "after:content-[''] after:absolute after:top-0.5 after:left-0.5",
               "after:size-5 after:rounded-full after:bg-white after:shadow-sm",
@@ -546,7 +551,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
         "label",
         {
           htmlFor: l,
-          className: `text-body select-none ${i ? "text-text-muted cursor-not-allowed" : "text-text-primary cursor-pointer"}`,
+          className: `text-body select-none ${s ? "text-text-muted cursor-not-allowed" : "text-text-primary cursor-pointer"}`,
           children: r
         }
       )
@@ -557,8 +562,8 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
   label: r,
   helperText: o,
   error: n,
-  autoGrow: s = !1,
-  minRows: i = 3,
+  autoGrow: i = !1,
+  minRows: s = 3,
   className: a = "",
   id: c,
   disabled: d,
@@ -567,8 +572,8 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
 }, b) {
   const h = I(), p = c ?? h, y = `${p}-helper`, f = !!n, v = D(null), w = k(() => {
     const x = v.current;
-    !x || !s || (x.style.height = "auto", x.style.height = `${x.scrollHeight}px`);
-  }, [s]);
+    !x || !i || (x.style.height = "auto", x.style.height = `${x.scrollHeight}px`);
+  }, [i]);
   $(() => {
     w();
   }, [w, u.value, u.defaultValue]);
@@ -585,7 +590,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
       {
         ref: g,
         id: p,
-        rows: i,
+        rows: s,
         disabled: d,
         "aria-invalid": f || void 0,
         "aria-describedby": o || n ? y : void 0,
@@ -597,7 +602,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
           "px-3 py-2 text-body outline-none transition-colors",
           "focus:border-primary focus:ring-1 focus:ring-primary",
           "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-bg-secondary",
-          s ? "resize-none overflow-hidden" : "resize-y",
+          i ? "resize-none overflow-hidden" : "resize-y",
           f ? "border-error focus:border-error focus:ring-error" : "border-border hover:border-border-strong"
         ].join(" "),
         ...u
@@ -623,7 +628,7 @@ const Dt = C(function({ label: r, helperText: o, className: n = "", id: s, disab
 function jt() {
   return /* @__PURE__ */ e("div", { role: "separator", className: "my-1 border-t border-border" });
 }
-const Ft = C(function({ children: r, icon: o, danger: n = !1, disabled: s = !1, onClick: i, className: a = "", ...c }, d) {
+const Ft = C(function({ children: r, icon: o, danger: n = !1, disabled: i = !1, onClick: s, className: a = "", ...c }, d) {
   const { close: l } = A(le);
   return /* @__PURE__ */ m(
     "button",
@@ -631,15 +636,15 @@ const Ft = C(function({ children: r, icon: o, danger: n = !1, disabled: s = !1,
       ref: d,
       type: "button",
       role: "menuitem",
-      disabled: s,
+      disabled: i,
       onClick: () => {
-        s || (i?.(), l());
+        i || (s?.(), l());
       },
       className: [
         "flex w-full items-center gap-2 px-3 py-2 text-small rounded-md",
         "text-left transition-colors outline-none cursor-pointer",
         n ? "text-error hover:bg-error-bg focus:bg-error-bg" : "text-text-primary hover:bg-bg-tertiary focus:bg-bg-tertiary",
-        s && "opacity-50 pointer-events-none",
+        i && "opacity-50 pointer-events-none",
         a
       ].filter(Boolean).join(" "),
       ...c,
@@ -656,9 +661,9 @@ function Et({
   placement: o = "bottom-start",
   className: n = ""
 }) {
-  const [s, i] = N(!1), [a, c] = N(null), d = D([]), { refs: l, floatingStyles: u, context: b } = O({
-    open: s,
-    onOpenChange: i,
+  const [i, s] = N(!1), [a, c] = N(null), d = D([]), { refs: l, floatingStyles: u, context: b } = O({
+    open: i,
+    onOpenChange: s,
     placement: o,
     middleware: [U(4), H(), q({ padding: 8 })],
     whileElementsMounted: V
@@ -672,10 +677,10 @@ function Et({
     p,
     y,
     f
-  ]), x = k(() => i(!1), []);
+  ]), x = k(() => s(!1), []);
   return /* @__PURE__ */ m(B, { children: [
     /* @__PURE__ */ e("span", { ref: l.setReference, className: "inline-flex", ...v(), children: t }),
-    s && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(ie, { context: b, modal: !1, children: /* @__PURE__ */ e(
+    i && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(ie, { context: b, modal: !1, children: /* @__PURE__ */ e(
       "div",
       {
         ref: l.setFloating,
@@ -702,10 +707,10 @@ function St({
   children: r,
   placement: o = "bottom",
   open: n,
-  onOpenChange: s,
-  className: i = ""
+  onOpenChange: i,
+  className: s = ""
 }) {
-  const [a, c] = N(!1), d = n !== void 0, l = d ? n : a, u = d ? (x) => s?.(x) : c, { refs: b, floatingStyles: h, context: p } = O({
+  const [a, c] = N(!1), d = n !== void 0, l = d ? n : a, u = d ? (x) => i?.(x) : c, { refs: b, floatingStyles: h, context: p } = O({
     open: l,
     onOpenChange: u,
     placement: o,
@@ -722,7 +727,7 @@ function St({
         className: [
           "z-50 rounded-lg border border-border p-md",
           "bg-bg-primary shadow-lg animate-floating-in",
-          i
+          s
         ].join(" "),
         ...g(),
         children: r
@@ -735,17 +740,17 @@ const ce = S({
   idPrefix: ""
 });
 function At({ value: t, children: r, className: o = "" }) {
-  const { activeValue: n, idPrefix: s } = A(ce), i = n === t;
+  const { activeValue: n, idPrefix: i } = A(ce), s = n === t;
   return /* @__PURE__ */ e(
     "div",
     {
-      id: `${s}-panel-${t}`,
+      id: `${i}-panel-${t}`,
       role: "tabpanel",
-      "aria-labelledby": `${s}-tab-${t}`,
-      hidden: !i,
+      "aria-labelledby": `${i}-tab-${t}`,
+      hidden: !s,
       tabIndex: 0,
       className: o,
-      children: i && r
+      children: s && r
     }
   );
 }
@@ -754,8 +759,8 @@ function Pt({
   value: r,
   defaultValue: o,
   onChange: n,
-  children: s,
-  className: i = ""
+  children: i,
+  className: s = ""
 }) {
   const a = I().replace(/:/g, ""), c = D(null), d = r !== void 0, [l, u] = N(
     () => o ?? t.find((f) => !f.disabled)?.value ?? t[0]?.value ?? ""
@@ -790,7 +795,7 @@ function Pt({
       `[data-tab-value="${g.value}"]`
     )?.focus());
   };
-  return /* @__PURE__ */ e(ce.Provider, { value: { activeValue: b, idPrefix: a }, children: /* @__PURE__ */ m("div", { className: i, children: [
+  return /* @__PURE__ */ e(ce.Provider, { value: { activeValue: b, idPrefix: a }, children: /* @__PURE__ */ m("div", { className: s, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -830,7 +835,7 @@ function Pt({
         })
       }
     ),
-    s
+    i
   ] }) });
 }
 const Ge = {
@@ -844,16 +849,16 @@ function Bt({
   content: r,
   placement: o = "top",
   delay: n = 200,
-  className: s = ""
+  className: i = ""
 }) {
-  const [i, a] = N(!1), c = D(null), {
+  const [s, a] = N(!1), c = D(null), {
     refs: d,
     floatingStyles: l,
     context: u,
     middlewareData: b,
     placement: h
   } = O({
-    open: i,
+    open: s,
     onOpenChange: a,
     placement: o,
     middleware: [
@@ -867,7 +872,7 @@ function Bt({
   }), p = ze(u, { delay: n, move: !1 }), y = $e(u), f = K(u), v = G(u, { role: "tooltip" }), { getReferenceProps: w, getFloatingProps: g } = X([p, y, f, v]), x = h.split("-")[0], z = b.arrow?.x, P = b.arrow?.y;
   return /* @__PURE__ */ m(B, { children: [
     /* @__PURE__ */ e("span", { ref: d.setReference, className: "inline-flex", ...w(), children: t }),
-    i && r && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ m(
+    s && r && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ m(
       "div",
       {
         ref: d.setFloating,
@@ -877,7 +882,7 @@ function Bt({
           "z-50 max-w-[var(--container-xs)] px-3 py-1.5 rounded-md text-small",
           "bg-text-primary text-bg-primary shadow-md",
           "pointer-events-none animate-floating-in",
-          s
+          i
         ].join(" "),
         ...g(),
         children: [
@@ -901,8 +906,8 @@ function Bt({
 }
 function Xe() {
   const { i18n: t } = Z(), r = t.language ?? "en", o = k(
-    (s) => {
-      t.changeLanguage(s);
+    (i) => {
+      t.changeLanguage(i);
     },
     [t]
   ), n = k(() => {
@@ -925,20 +930,20 @@ function Lt({ className: t = "" }) {
         "inline-flex items-center rounded-full border border-border bg-bg-secondary p-0.5",
         t
       ].filter(Boolean).join(" "),
-      children: Ye.map(({ value: n, label: s }) => {
-        const i = r === n;
+      children: Ye.map(({ value: n, label: i }) => {
+        const s = r === n;
         return /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             role: "radio",
-            "aria-checked": i,
+            "aria-checked": s,
             onClick: () => o(n),
             className: [
               "rounded-full px-2.5 py-0.5 text-caption font-medium transition-colors cursor-pointer",
-              i ? "bg-primary text-white shadow-sm" : "text-text-secondary hover:text-text-primary"
+              s ? "bg-primary text-white shadow-sm" : "text-text-secondary hover:text-text-primary"
             ].join(" "),
-            children: s
+            children: i
           },
           n
         );
@@ -946,12 +951,12 @@ function Lt({ className: t = "" }) {
     }
   );
 }
-const _ = "poesis-theme", R = /* @__PURE__ */ new Set();
+const _ = "poesis-theme", T = /* @__PURE__ */ new Set();
 function _e() {
-  R.forEach((t) => t());
+  T.forEach((t) => t());
 }
 function We(t) {
-  return R.add(t), () => R.delete(t);
+  return T.add(t), () => T.delete(t);
 }
 function Je() {
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
@@ -962,7 +967,7 @@ function Qe() {
 function E(t) {
   t === "dark" ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"), localStorage.setItem(_, t), _e();
 }
-function Rt() {
+function Tt() {
   const t = localStorage.getItem(_);
   if (t) {
     E(t);
@@ -974,10 +979,10 @@ function Rt() {
 function Ze() {
   const t = ue(We, Je, Qe);
   $(() => {
-    const n = window.matchMedia("(prefers-color-scheme: dark)"), s = (i) => {
-      localStorage.getItem(_) || E(i.matches ? "dark" : "light");
+    const n = window.matchMedia("(prefers-color-scheme: dark)"), i = (s) => {
+      localStorage.getItem(_) || E(s.matches ? "dark" : "light");
     };
-    return n.addEventListener("change", s), () => n.removeEventListener("change", s);
+    return n.addEventListener("change", i), () => n.removeEventListener("change", i);
   }, []);
   const r = k(() => {
     E(t === "dark" ? "light" : "dark");
@@ -986,16 +991,16 @@ function Ze() {
   }, []);
   return { theme: t, toggleTheme: r, setTheme: o, isDark: t === "dark" };
 }
-function Tt({ variant: t = "ghost", size: r = "md", className: o }) {
-  const { isDark: n, toggleTheme: s } = Ze(), { t: i } = Z();
+function Rt({ variant: t = "ghost", size: r = "md", className: o }) {
+  const { isDark: n, toggleTheme: i } = Ze(), { t: s } = Z();
   return /* @__PURE__ */ e(
-    Te,
+    Re,
     {
       variant: t,
       size: r,
       icon: n ? /* @__PURE__ */ e(be, { size: 16 }) : /* @__PURE__ */ e(pe, { size: 16 }),
-      "aria-label": i("theme.toggleTheme"),
-      onClick: s,
+      "aria-label": s("theme.toggleTheme"),
+      onClick: i,
       className: o
     }
   );
@@ -1005,15 +1010,15 @@ function et({
   categories: r = [],
   activeCategoryId: o,
   onCategoryChange: n,
-  actions: s,
-  onBurgerClick: i
+  actions: i,
+  onBurgerClick: s
 }) {
   return /* @__PURE__ */ m("header", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center border-b border-border bg-bg-primary px-md", children: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: i,
+        onClick: s,
         className: "mr-sm flex size-9 items-center justify-center rounded-md text-text-secondary hover:bg-bg-tertiary hover:text-text-primary lg:hidden",
         "aria-label": "Open menu",
         children: /* @__PURE__ */ e(fe, { size: 22 })
@@ -1041,7 +1046,7 @@ function et({
       );
     }) }),
     /* @__PURE__ */ e("div", { className: "flex-1 lg:hidden" }),
-    s && /* @__PURE__ */ e("div", { className: "flex items-center gap-xs", children: s })
+    i && /* @__PURE__ */ e("div", { className: "flex items-center gap-xs", children: i })
   ] });
 }
 function tt({
@@ -1057,15 +1062,15 @@ function tt({
         "hidden lg:flex flex-col border-r border-border bg-bg-secondary overflow-y-auto transition-[width] duration-200",
         n ? "w-16" : "w-64"
       ].join(" "),
-      children: /* @__PURE__ */ e("nav", { className: "flex flex-col gap-xs p-sm", "aria-label": "Page navigation", children: t.map((s) => /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("nav", { className: "flex flex-col gap-xs p-sm", "aria-label": "Page navigation", children: t.map((i) => /* @__PURE__ */ e(
         rt,
         {
-          section: s,
+          section: i,
           activeLinkId: r,
           onLinkClick: o,
           collapsed: n
         },
-        s.id
+        i.id
       )) })
     }
   );
@@ -1076,13 +1081,13 @@ function rt({
   onLinkClick: o,
   collapsed: n
 }) {
-  const [s, i] = N(!0);
+  const [i, s] = N(!0);
   return /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
     t.title && !n && /* @__PURE__ */ m(
       "button",
       {
         type: "button",
-        onClick: () => i((a) => !a),
+        onClick: () => s((a) => !a),
         className: "flex items-center justify-between rounded-md px-sm py-xs text-caption font-semibold uppercase tracking-wide text-text-muted hover:text-text-secondary",
         children: [
           /* @__PURE__ */ e("span", { children: t.title }),
@@ -1090,13 +1095,13 @@ function rt({
             ee,
             {
               size: 14,
-              className: `transition-transform ${s ? "" : "-rotate-90"}`
+              className: `transition-transform ${i ? "" : "-rotate-90"}`
             }
           )
         ]
       }
     ),
-    (s || n) && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.links.map((a) => {
+    (i || n) && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.links.map((a) => {
       const c = a.id === r;
       return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ m(
         "button",
@@ -1124,8 +1129,8 @@ function nt({
   onClose: r,
   categories: o = [],
   activeCategoryId: n,
-  onCategoryChange: s,
-  sections: i = [],
+  onCategoryChange: i,
+  sections: s = [],
   activeLinkId: a,
   onLinkClick: c
 }) {
@@ -1189,7 +1194,7 @@ function nt({
                   {
                     type: "button",
                     onClick: () => {
-                      s?.(l.id);
+                      i?.(l.id);
                     },
                     className: [
                       "flex items-center gap-sm rounded-md px-sm py-xs text-small font-medium transition-colors",
@@ -1204,7 +1209,7 @@ function nt({
                 );
               })
             ] }),
-            i.map((l) => /* @__PURE__ */ e(
+            s.map((l) => /* @__PURE__ */ e(
               ot,
               {
                 section: l,
@@ -1226,13 +1231,13 @@ function ot({
   activeLinkId: r,
   onLinkClick: o
 }) {
-  const [n, s] = N(!0);
+  const [n, i] = N(!0);
   return /* @__PURE__ */ m("div", { className: "mb-xs flex flex-col", children: [
     t.title && /* @__PURE__ */ m(
       "button",
       {
         type: "button",
-        onClick: () => s((i) => !i),
+        onClick: () => i((s) => !s),
         className: "flex items-center justify-between rounded-md px-sm py-xs text-caption font-semibold uppercase tracking-wide text-text-muted hover:text-text-secondary",
         children: [
           /* @__PURE__ */ e("span", { children: t.title }),
@@ -1246,24 +1251,24 @@ function ot({
         ]
       }
     ),
-    n && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.links.map((i) => {
-      const a = i.id === r;
+    n && /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.links.map((s) => {
+      const a = s.id === r;
       return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ m(
         "button",
         {
           type: "button",
-          onClick: () => o?.(i.href),
+          onClick: () => o?.(s.href),
           className: [
             "flex w-full items-center gap-sm rounded-md px-sm py-xs text-small transition-colors",
             a ? "bg-primary/10 font-medium text-primary" : "text-text-secondary hover:bg-bg-tertiary hover:text-text-primary"
           ].join(" "),
           "aria-current": a ? "page" : void 0,
           children: [
-            i.icon && /* @__PURE__ */ e(i.icon, { size: 18 }),
-            /* @__PURE__ */ e("span", { children: i.label })
+            s.icon && /* @__PURE__ */ e(s.icon, { size: 18 }),
+            /* @__PURE__ */ e("span", { children: s.label })
           ]
         }
-      ) }, i.id);
+      ) }, s.id);
     }) })
   ] });
 }
@@ -1272,8 +1277,8 @@ function Mt({
   logo: r,
   categories: o = [],
   activeCategoryId: n,
-  onCategoryChange: s,
-  sections: i = [],
+  onCategoryChange: i,
+  sections: s = [],
   activeLinkId: a,
   onLinkClick: c,
   actions: d,
@@ -1287,7 +1292,7 @@ function Mt({
         logo: r,
         categories: o,
         activeCategoryId: n,
-        onCategoryChange: s,
+        onCategoryChange: i,
         actions: d,
         onBurgerClick: () => b(!0)
       }
@@ -1296,7 +1301,7 @@ function Mt({
       /* @__PURE__ */ e(
         tt,
         {
-          sections: i,
+          sections: s,
           activeLinkId: a,
           onLinkClick: c,
           collapsed: l
@@ -1312,9 +1317,9 @@ function Mt({
         categories: o,
         activeCategoryId: n,
         onCategoryChange: (h) => {
-          s?.(h), b(!1);
+          i?.(h), b(!1);
         },
-        sections: i,
+        sections: s,
         activeLinkId: a,
         onLinkClick: (h) => {
           c?.(h), b(!1);
@@ -1323,7 +1328,7 @@ function Mt({
     )
   ] });
 }
-const Ot = C(function({ header: r, footer: o, actions: n, noPadding: s = !1, className: i = "", children: a, ...c }, d) {
+const Ot = C(function({ header: r, footer: o, actions: n, noPadding: i = !1, className: s = "", children: a, ...c }, d) {
   const l = o || n;
   return /* @__PURE__ */ m(
     "div",
@@ -1332,12 +1337,12 @@ const Ot = C(function({ header: r, footer: o, actions: n, noPadding: s = !1, cla
       className: [
         "rounded-md shadow-md border border-border bg-bg-secondary",
         "flex flex-col overflow-hidden",
-        i
+        s
       ].filter(Boolean).join(" "),
       ...c,
       children: [
         r && /* @__PURE__ */ e("div", { className: "px-lg py-md border-b border-border", children: /* @__PURE__ */ e("div", { className: "font-semibold text-body text-text-primary", children: r }) }),
-        /* @__PURE__ */ e("div", { className: s ? "" : "p-lg", children: a }),
+        /* @__PURE__ */ e("div", { className: i ? "" : "p-lg", children: a }),
         l && /* @__PURE__ */ m("div", { className: "px-lg py-md border-t border-border flex items-center gap-3", children: [
           o && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: o }),
           n && /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-2", children: n })
@@ -1346,14 +1351,14 @@ const Ot = C(function({ header: r, footer: o, actions: n, noPadding: s = !1, cla
     }
   );
 }), Vt = C(
-  function({ items: r, layout: o = "horizontal", dividers: n = !0, className: s = "", ...i }, a) {
+  function({ items: r, layout: o = "horizontal", dividers: n = !0, className: i = "", ...s }, a) {
     const c = o === "horizontal";
     return /* @__PURE__ */ e(
       "dl",
       {
         ref: a,
-        className: ["text-body", n && "divide-y divide-border", s].filter(Boolean).join(" "),
-        ...i,
+        className: ["text-body", n && "divide-y divide-border", i].filter(Boolean).join(" "),
+        ...s,
         children: r.map((d, l) => /* @__PURE__ */ m(
           "div",
           {
@@ -1380,21 +1385,21 @@ const Ot = C(function({ header: r, footer: o, actions: n, noPadding: s = !1, cla
       }
     );
   }
-), Ut = C(function({ illustration: r, title: o, description: n, action: s, className: i = "", ...a }, c) {
+), Ut = C(function({ illustration: r, title: o, description: n, action: i, className: s = "", ...a }, c) {
   return /* @__PURE__ */ m(
     "div",
     {
       ref: c,
       className: [
         "flex flex-col items-center justify-center text-center py-2xl px-lg",
-        i
+        s
       ].filter(Boolean).join(" "),
       ...a,
       children: [
         r && /* @__PURE__ */ e("div", { className: "mb-lg text-text-secondary", children: r }),
         /* @__PURE__ */ e("h3", { className: "text-h3 font-semibold text-text-primary", children: o }),
         n && /* @__PURE__ */ e("p", { className: "mt-xs text-body text-text-secondary max-w-[var(--container-md)]", children: n }),
-        s && /* @__PURE__ */ e("div", { className: "mt-lg", children: s })
+        i && /* @__PURE__ */ e("div", { className: "mt-lg", children: i })
       ]
     }
   );
@@ -1418,14 +1423,14 @@ const Ht = C(function({
   columns: r,
   data: o,
   rowKey: n,
-  striped: s = !1,
-  sort: i,
+  striped: i = !1,
+  sort: s,
   onSortChange: a,
   emptyContent: c,
   className: d = "",
   ...l
 }, u) {
-  const [b, h] = N(), p = i ?? b, y = k(
+  const [b, h] = N(), p = s ?? b, y = k(
     (g) => {
       const x = p?.column === g && p.direction === "asc" ? { column: g, direction: "desc" } : { column: g, direction: "asc" };
       a ? a(x) : h(x);
@@ -1496,7 +1501,7 @@ const Ht = C(function({
           {
             className: [
               "border-b border-border last:border-b-0 transition-colors",
-              s && x % 2 === 1 && "bg-bg-tertiary/50",
+              i && x % 2 === 1 && "bg-bg-tertiary/50",
               "hover:bg-bg-tertiary/70"
             ].filter(Boolean).join(" "),
             children: r.map((z) => /* @__PURE__ */ e(
@@ -1527,7 +1532,7 @@ const Ht = C(function({
     bg: "bg-warning-bg",
     border: "border-warning/30",
     text: "text-warning",
-    icon: T
+    icon: R
   },
   error: {
     bg: "bg-error-bg",
@@ -1547,19 +1552,19 @@ function qt({
   title: r,
   children: o,
   dismissible: n = !1,
-  onDismiss: s,
-  className: i = ""
+  onDismiss: i,
+  className: s = ""
 }) {
   const [a, c] = N(!0), { bg: d, border: l, text: u, icon: b } = at[t];
   if (!a) return null;
   const h = () => {
-    c(!1), s?.();
+    c(!1), i?.();
   };
   return /* @__PURE__ */ m(
     "div",
     {
       role: "alert",
-      className: `flex gap-3 rounded-md border p-md ${d} ${l} ${i}`,
+      className: `flex gap-3 rounded-md border p-md ${d} ${l} ${s}`,
       children: [
         /* @__PURE__ */ e(b, { size: 20, className: `shrink-0 mt-0.5 ${u}`, "aria-hidden": !0 }),
         /* @__PURE__ */ m("div", { className: "flex-1 min-w-0", children: [
@@ -1590,8 +1595,8 @@ function ct({
   onClose: r,
   title: o,
   size: n = "md",
-  children: s,
-  footer: i,
+  children: i,
+  footer: s,
   className: a = ""
 }) {
   const c = D(null);
@@ -1680,8 +1685,8 @@ function ct({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto px-lg py-md text-body text-text-primary", children: s }),
-                    i && /* @__PURE__ */ e("div", { className: "flex items-center justify-end gap-sm px-lg py-md border-t border-border", children: i })
+                    /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto px-lg py-md text-body text-text-primary", children: i }),
+                    s && /* @__PURE__ */ e("div", { className: "flex items-center justify-end gap-sm px-lg py-md border-t border-border", children: s })
                   ]
                 }
               )
@@ -1698,8 +1703,8 @@ function Kt({
   onCancel: r,
   onConfirm: o,
   title: n,
-  children: s,
-  confirmLabel: i = "Confirm",
+  children: i,
+  confirmLabel: s = "Confirm",
   cancelLabel: a = "Cancel",
   danger: c = !1,
   size: d = "sm"
@@ -1707,14 +1712,14 @@ function Kt({
   return /* @__PURE__ */ m(ct, { open: t, onClose: r, title: n, size: d, children: [
     /* @__PURE__ */ m("div", { className: "flex gap-3", children: [
       c && /* @__PURE__ */ e(
-        T,
+        R,
         {
           size: 22,
           className: "shrink-0 mt-0.5 text-error",
           "aria-hidden": !0
         }
       ),
-      /* @__PURE__ */ e("div", { className: "text-body text-text-secondary", children: s })
+      /* @__PURE__ */ e("div", { className: "text-body text-text-secondary", children: i })
     ] }),
     /* @__PURE__ */ m("div", { className: "flex items-center justify-end gap-sm mt-lg", children: [
       /* @__PURE__ */ e(
@@ -1732,7 +1737,7 @@ function Kt({
           type: "button",
           onClick: o,
           className: `px-4 py-2 rounded-md text-small font-medium text-white transition-colors cursor-pointer ${c ? "bg-error hover:bg-error/80" : "bg-primary hover:bg-primary-hover"}`,
-          children: i
+          children: s
         }
       )
     ] })
@@ -1755,7 +1760,7 @@ const dt = {
     bg: "bg-bg-primary",
     accent: "bg-warning",
     text: "text-warning",
-    icon: T
+    icon: R
   },
   error: {
     bg: "bg-bg-primary",
@@ -1771,12 +1776,12 @@ const dt = {
   }
 };
 function mt({ toast: t, onRemove: r }) {
-  const { variant: o, title: n, message: s, duration: i = 5e3 } = t, { bg: a, accent: c, text: d, icon: l } = dt[o], [u, b] = N(100), h = D(0), p = D(0);
+  const { variant: o, title: n, message: i, duration: s = 5e3 } = t, { bg: a, accent: c, text: d, icon: l } = dt[o], [u, b] = N(100), h = D(0), p = D(0);
   return $(() => {
-    if (i <= 0) return;
+    if (s <= 0) return;
     h.current = performance.now();
     const y = (f) => {
-      const v = f - h.current, w = Math.max(0, 100 - v / i * 100);
+      const v = f - h.current, w = Math.max(0, 100 - v / s * 100);
       if (b(w), w <= 0) {
         r(t.id);
         return;
@@ -1784,7 +1789,7 @@ function mt({ toast: t, onRemove: r }) {
       p.current = requestAnimationFrame(y);
     };
     return p.current = requestAnimationFrame(y), () => cancelAnimationFrame(p.current);
-  }, [i, t.id, r]), /* @__PURE__ */ m(
+  }, [s, t.id, r]), /* @__PURE__ */ m(
     "div",
     {
       role: "status",
@@ -1795,7 +1800,7 @@ function mt({ toast: t, onRemove: r }) {
           /* @__PURE__ */ e(l, { size: 18, className: `shrink-0 mt-0.5 ${d}`, "aria-hidden": !0 }),
           /* @__PURE__ */ m("div", { className: "flex-1 min-w-0", children: [
             n && /* @__PURE__ */ e("p", { className: "font-semibold text-small text-text-primary", children: n }),
-            /* @__PURE__ */ e("p", { className: "text-small text-text-secondary", children: s })
+            /* @__PURE__ */ e("p", { className: "text-small text-text-secondary", children: i })
           ] }),
           /* @__PURE__ */ e(
             "button",
@@ -1808,7 +1813,7 @@ function mt({ toast: t, onRemove: r }) {
             }
           )
         ] }),
-        i > 0 && /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-bg-tertiary", children: /* @__PURE__ */ e(
+        s > 0 && /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-bg-tertiary", children: /* @__PURE__ */ e(
           "div",
           {
             className: `h-full ${c} transition-none`,
@@ -1821,20 +1826,20 @@ function mt({ toast: t, onRemove: r }) {
 }
 let ut = 0;
 function Xt({ children: t }) {
-  const [r, o] = N([]), n = k((i) => {
+  const [r, o] = N([]), n = k((s) => {
     const a = `toast-${++ut}`;
-    return o((c) => [...c, { ...i, id: a }]), a;
-  }, []), s = k((i) => {
-    o((a) => a.filter((c) => c.id !== i));
+    return o((c) => [...c, { ...s, id: a }]), a;
+  }, []), i = k((s) => {
+    o((a) => a.filter((c) => c.id !== s));
   }, []);
-  return /* @__PURE__ */ m(de, { value: { addToast: n, removeToast: s }, children: [
+  return /* @__PURE__ */ m(de, { value: { addToast: n, removeToast: i }, children: [
     t,
     /* @__PURE__ */ e(
       "div",
       {
         "aria-label": "Notifications",
         className: "fixed bottom-lg right-lg z-50 flex flex-col-reverse gap-sm pointer-events-none",
-        children: r.map((i) => /* @__PURE__ */ e("div", { className: "pointer-events-auto", children: /* @__PURE__ */ e(mt, { toast: i, onRemove: s }) }, i.id))
+        children: r.map((s) => /* @__PURE__ */ e("div", { className: "pointer-events-auto", children: /* @__PURE__ */ e(mt, { toast: s, onRemove: i }) }, s.id))
       }
     )
   ] });
@@ -1845,8 +1850,8 @@ const me = S(null), bt = {
   role: "admin"
 };
 function Yt({ initialUser: t = bt, children: r }) {
-  const [o, n] = N(t), s = (a) => n((c) => ({ ...c, role: a })), i = L(() => ({ user: o, setRole: s }), [o]);
-  return /* @__PURE__ */ e(me.Provider, { value: i, children: r });
+  const [o, n] = N(t), i = (a) => n((c) => ({ ...c, role: a })), s = L(() => ({ user: o, setRole: i }), [o]);
+  return /* @__PURE__ */ e(me.Provider, { value: s, children: r });
 }
 function _t() {
   const t = A(me);
@@ -1869,7 +1874,7 @@ export {
   Ft as DropdownItem,
   Et as DropdownMenu,
   Ut as EmptyState,
-  Te as IconButton,
+  Re as IconButton,
   zt as Input,
   Lt as LanguageSwitcher,
   Mt as PageShell,
@@ -1883,13 +1888,13 @@ export {
   Ht as Table,
   Pt as Tabs,
   It as Textarea,
-  Tt as ThemeToggle,
+  Rt as ThemeToggle,
   Xt as ToastProvider,
   Bt as Tooltip,
   et as TopNav,
   Q as epflSelectClassNames,
   Ke as epflSelectTheme,
-  Rt as initTheme,
+  Tt as initTheme,
   _t as useAuth,
   Xe as useLanguage,
   Ze as useTheme,