@versini/ui-panel 2.0.3 → 2.0.5

package/dist/components/Panel/Panel.js

@@ -1,6 +1,769 @@
-import "react/jsx-runtime";
-import { Panel as t } from "../../index.js";
-import "react";
+import { jsx as c, jsxs as S, Fragment as X } from "react/jsx-runtime";
+import * as b from "react";
+import z, { useRef as _, useLayoutEffect as F, useState as q, useMemo as Z, useEffect as B, useCallback as le, useId as H } from "react";
+import n from "clsx";
+import { useFloating as ce, useClick as se, useDismiss as de, useRole as ue, useInteractions as me, useMergeRefs as ge, FloatingPortal as he, FloatingOverlay as be, FloatingFocusManager as fe } from "@floating-ui/react";
+const U = "av-messagebox", j = "av-panel", Y = "av-button", P = "icon", J = "button", O = "link", ve = ({
+  type: e,
+  size: t,
+  labelRight: r,
+  labelLeft: a,
+  align: i,
+  animated: o
+}) => {
+  const l = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
+  switch (e) {
+    case J:
+    case O:
+      return n({
+        [l]: t === "small",
+        [d]: t === "medium",
+        [s]: t === "large"
+      });
+    case P:
+      return n("flex items-center", {
+        "justify-center": i === "center",
+        "justify-start": i === "left",
+        "justify-end": i === "right",
+        "h-6 w-6 p-0": t === "small" && !o && !(r || a),
+        "h-6 px-2": t === "small" && !o && (r || a),
+        "h-8 w-8 p-1": t === "medium" && !o && !(r || a),
+        "h-8 px-3": t === "medium" && !o && (r || a),
+        "h-12 w-12 p-2": t === "large" && !o && !(r || a),
+        "h-12 px-4": t === "large" && !o && (r || a),
+        "h-6 py-0": t === "small" && o && !(r || a),
+        "h-6": t === "small" && o && (r || a),
+        "h-8 py-1": t === "medium" && o && !(r || a),
+        "h-8": t === "medium" && o && (r || a),
+        "h-12 py-2": t === "large" && o && !(r || a),
+        "h-12": t === "large" && o && (r || a)
+      });
+  }
+}, ye = ({
+  type: e,
+  size: t,
+  labelRight: r,
+  labelLeft: a
+}) => {
+  const i = "text-sm font-medium", o = "text-base font-medium", l = "text-lg font-medium";
+  switch (e) {
+    case J:
+    case O:
+      return n({
+        "text-center": e === O,
+        [i]: t === "small",
+        [o]: t === "medium",
+        [l]: t === "large"
+      });
+    case P:
+      return n({
+        [i]: t === "small" && (r || a),
+        [o]: t === "medium" && (r || a),
+        [l]: t === "large" && (r || a)
+      });
+  }
+}, pe = ({
+  mode: e,
+  noBackground: t,
+  truncate: r,
+  variant: a
+}) => {
+  if (t)
+    return "not-prose";
+  if (a === "primary")
+    return n("not-prose", {
+      truncate: r,
+      "text-copy-light": e === "dark" || e === "system",
+      "text-copy-lighter": e === "light" || e === "alt-system",
+      "dark:text-copy-lighter": e === "system",
+      "dark:text-copy-light": e === "alt-system"
+    });
+  if (a === "secondary")
+    return n("not-prose", {
+      truncate: r,
+      "text-copy-light": e === "light" || e === "system",
+      "text-copy-lighter": e === "dark" || e === "alt-system",
+      "dark:text-copy-lighter": e === "alt-system",
+      "dark:text-copy-light": e === "system"
+    });
+  if (a === "danger")
+    return n("not-prose", {
+      truncate: r,
+      "text-copy-light": e === "dark" || e === "system",
+      "text-copy-lighter": e === "light" || e === "alt-system",
+      "dark:text-copy-lighter": e === "system",
+      "dark:text-copy-light": e === "alt-system"
+    });
+  if (a === "selected")
+    return n("not-prose text-copy-lighter", {
+      truncate: r
+    });
+}, ke = ({
+  mode: e,
+  noBackground: t,
+  variant: r
+}) => {
+  if (!t) {
+    if (r === "primary")
+      return n({
+        "bg-action-dark": e === "dark",
+        "bg-action-light": e === "light",
+        "bg-action-dark dark:bg-action-light": e === "system",
+        "bg-action-light dark:bg-action-dark": e === "alt-system"
+      });
+    if (r === "secondary")
+      return n({
+        "bg-action-dark": e === "light",
+        "bg-action-light": e === "dark",
+        "bg-action-dark dark:bg-action-light": e === "alt-system",
+        "bg-action-light dark:bg-action-dark": e === "system"
+      });
+    if (r === "danger")
+      return n({
+        "bg-action-danger-dark": e === "dark",
+        "bg-action-danger-light": e === "light",
+        "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
+        "bg-action-danger-light dark:bg-action-danger-dark": e === "alt-system"
+      });
+    if (r === "selected")
+      return "bg-action-selected-dark";
+  }
+}, xe = ({
+  radius: e
+}) => n({
+  "rounded-full": e === "large",
+  "rounded-md": e === "medium",
+  "rounded-xs": e === "small"
+}), we = ({
+  mode: e,
+  disabled: t,
+  variant: r
+}) => {
+  if (t)
+    return "";
+  if (r === "primary")
+    return n("hover:text-copy-light-hover", {
+      "hover:bg-action-dark-hover": e === "dark",
+      "hover:bg-action-light-hover": e === "light",
+      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
+      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
+    });
+  if (r === "secondary")
+    return n("hover:text-copy-light-hover", {
+      "hover:bg-action-dark-hover": e === "light",
+      "hover:bg-action-light-hover": e === "dark",
+      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
+      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
+    });
+  if (r === "danger")
+    return n("hover:text-copy-light-hover", {
+      "hover:bg-action-danger-dark-hover": e === "dark",
+      "hover:bg-action-danger-light-hover": e === "light",
+      "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
+      "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": e === "alt-system"
+    });
+  if (r === "selected")
+    return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
+}, _e = ({
+  mode: e,
+  disabled: t,
+  variant: r
+}) => {
+  if (t)
+    return "";
+  if (r === "primary")
+    return n("active:text-copy-light-active", {
+      "active:bg-action-dark-active": e === "dark",
+      "active:bg-action-light-active": e === "light",
+      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
+      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
+    });
+  if (r === "secondary")
+    return n("active:text-copy-light-active", {
+      "active:bg-action-dark-active": e === "light",
+      "active:bg-action-light-active": e === "dark",
+      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
+      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
+    });
+  if (r === "danger")
+    return n("active:text-copy-lighter-active", {
+      "active:bg-action-danger-dark-active": e === "dark",
+      "active:bg-action-danger-light-active": e === "light",
+      "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
+      "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": e === "alt-system"
+    });
+  if (r === "selected")
+    return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
+}, Ie = ({
+  mode: e,
+  noBorder: t,
+  variant: r
+}) => {
+  if (t)
+    return "border border-transparent";
+  if (r === "primary")
+    return n("border", {
+      "border-border-dark": e === "dark",
+      "border-border-accent": e === "light",
+      "border-border-dark dark:border-border-accent": e === "system",
+      "border-border-accent dark:border-border-dark": e === "alt-system"
+    });
+  if (r === "secondary")
+    return n("border", {
+      "border-border-dark": e === "light",
+      "border-border-accent": e === "dark",
+      "border-border-dark dark:border-border-accent": e === "alt-system",
+      "border-border-accent dark:border-border-dark": e === "system"
+    });
+  if (r === "danger")
+    return n("border", {
+      "border-border-danger-dark": e === "dark",
+      "border-border-danger-medium": e === "light",
+      "border-border-danger-dark dark:border-border-danger-medium": e === "system",
+      "border-border-danger-medium dark:border-border-danger-dark": e === "alt-system"
+    });
+  if (r === "selected")
+    return "border border-border-selected-dark";
+}, Ne = ({
+  focusMode: e
+}) => n("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+  "focus:outline-focus-dark": e === "dark",
+  "focus:outline-focus-light": e === "light",
+  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
+  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
+}), Ee = ({
+  mode: e,
+  raw: t,
+  iconClassName: r
+}) => t ? "" : n(
+  {
+    "text-copy-accent-dark": e === "light" || e === "alt-system",
+    "text-copy-light": e === "dark" || e === "system",
+    "dark:text-copy-light": e === "alt-system",
+    "dark:text-copy-accent-dark": e === "system"
+  },
+  r
+), Ce = ({
+  animated: e
+}) => n({
+  "transition-opacity duration-300 ease-in": e
+}), Se = ({
+  type: e,
+  className: t,
+  raw: r,
+  mode: a,
+  focusMode: i,
+  disabled: o,
+  fullWidth: l,
+  size: d,
+  noBorder: s,
+  labelRight: m,
+  labelLeft: f,
+  noBackground: g,
+  variant: u,
+  truncate: h,
+  align: v,
+  radius: I,
+  animated: y
+}) => (u || (u = "primary"), r ? n(Y, t) : n(
+  Y,
+  pe({
+    mode: a,
+    variant: u,
+    noBackground: g,
+    truncate: h
+  }),
+  ke({ mode: a, noBackground: g, variant: u }),
+  xe({ radius: I }),
+  ve({
+    type: e,
+    size: d,
+    labelRight: m,
+    labelLeft: f,
+    align: v,
+    animated: y
+  }),
+  ye({ type: e, size: d, labelRight: m, labelLeft: f }),
+  Ie({ mode: a, variant: u, noBorder: s }),
+  Ne({ focusMode: i }),
+  we({ mode: a, variant: u, disabled: o }),
+  _e({ mode: a, variant: u, disabled: o }),
+  {
+    "w-full": l,
+    "disabled:cursor-not-allowed disabled:opacity-50": o
+  },
+  n({
+    "transition-[width] duration-300 ease-in-out": y
+  }),
+  t
+)), Be = (e, t, r) => {
+  var a;
+  !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
+}, K = z.forwardRef((e, t) => {
+  const { onClick: r, noInternalClick: a = !1, ...i } = e;
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      ref: t,
+      onClick: (o) => {
+        Be(o, a, r);
+      },
+      ...i
+    }
+  );
+});
+K.displayName = "BaseButton";
+function Re() {
+  const e = _(!1);
+  return B(() => (e.current = !0, () => {
+    e.current = !1;
+  }), []), le(() => e.current, []);
+}
+function Me(e) {
+  return Z(() => e.every((t) => t == null) ? () => {
+  } : (t) => {
+    e.forEach((r) => {
+      typeof r == "function" ? r(t) : r != null && (r.current = t);
+    });
+  }, e);
+}
+const Le = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function A(e) {
+  const t = Re(), r = _(0), a = _(null), [i, o] = q(Le), l = Z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+    const s = d[0];
+    s && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+      a.current && t() && o(s.contentRect);
+    }));
+  }), [t]);
+  return B(() => (a.current && (l == null || l.observe(a.current, e)), () => {
+    l == null || l.disconnect(), r.current && cancelAnimationFrame(r.current);
+  }), [l, e]), [a, i];
+}
+const Te = {
+  small: 24,
+  // w-6
+  medium: 32,
+  // w-8
+  large: 48
+  // w-12
+}, Ae = {
+  small: 8 * 2,
+  // px-2 x 2
+  medium: 12 * 2,
+  // px-3 x 2
+  large: 16 * 2
+  // px-4 x 2
+}, Oe = 2, $ = z.forwardRef(
+  ({
+    children: e,
+    disabled: t = !1,
+    mode: r = "system",
+    focusMode: a = "system",
+    fullWidth: i = !1,
+    className: o,
+    type: l = "button",
+    raw: d = !1,
+    noBorder: s = !1,
+    "aria-label": m,
+    label: f,
+    size: g = "medium",
+    labelRight: u,
+    labelLeft: h,
+    noBackground: v = !1,
+    align: I = "center",
+    radius: y = "large",
+    variant: ee = "primary",
+    iconClassName: re,
+    animated: k = !1,
+    ...te
+  }, ae) => {
+    const oe = Se({
+      type: P,
+      mode: r,
+      focusMode: a,
+      fullWidth: i,
+      disabled: t,
+      raw: d,
+      className: o,
+      noBorder: s,
+      size: g,
+      labelRight: u,
+      labelLeft: h,
+      noBackground: v,
+      align: I,
+      radius: y,
+      variant: ee,
+      animated: k
+    }), ie = Ee({ mode: r, raw: d, iconClassName: re }), D = Ce({ animated: k }), [p, M] = A(), [x, L] = A(), [E, V] = A(), T = _(0), w = _(null), ne = Me([ae, w]);
+    return F(() => {
+      E && E.current && k && (T.current = V.width + Ae[g] + (s ? 0 : Oe));
+    }, [V, E, g, s, k]), F(() => {
+      w && w.current && k && (u && p && M.width > 0 ? (p.current && (p.current.style.opacity = "100"), w.current.style.width = `${M.width + T.current}px`) : h && L.width > 0 ? (x.current && (x.current.style.opacity = "100"), w.current.style.width = `${L.width + T.current}px`) : (p.current && (p.current.style.opacity = "0"), x.current && (x.current.style.opacity = "0"), w.current.style.width = `${Te[g]}px`));
+    }, [
+      M,
+      u,
+      p,
+      L,
+      h,
+      x,
+      g,
+      k
+    ]), /* @__PURE__ */ S(
+      K,
+      {
+        ref: ne,
+        className: oe,
+        disabled: t,
+        type: l,
+        "aria-label": m || f,
+        ...te,
+        children: [
+          /* @__PURE__ */ c(
+            G,
+            {
+              label: h,
+              labelRef: x,
+              labelClass: D,
+              labelInnerClass: "pr-2"
+            }
+          ),
+          /* @__PURE__ */ c("span", { ref: E, className: ie, children: e }),
+          /* @__PURE__ */ c(
+            G,
+            {
+              label: u,
+              labelRef: p,
+              labelClass: D,
+              labelInnerClass: "pl-2"
+            }
+          )
+        ]
+      }
+    );
+  }
+), G = ({
+  labelRef: e,
+  labelClass: t,
+  label: r,
+  labelInnerClass: a
+}) => /* @__PURE__ */ c("span", { ref: e, className: t, children: r && /* @__PURE__ */ c("span", { className: a, children: r }) });
+$.displayName = "ButtonIcon";
+/*!
+  @versini/ui-button v6.0.5
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
+    version: "6.0.5",
+    buildTime: "04/12/2025 09:18 AM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const ze = z.forwardRef(
+  ({
+    children: e,
+    mode: t = "system",
+    className: r,
+    active: a = !1,
+    ...i
+  }, o) => {
+    const l = a ? n(
+      "relative",
+      "focus-within:static",
+      "focus-within:after:border-transparent",
+      "after:absolute",
+      "after:content-['']",
+      "after:border-b-2",
+      "after:bottom-[-4px]",
+      "after:left-0",
+      "after:right-0",
+      {
+        "after:border-table-dark": t === "dark",
+        "after:border-table-light": t === "light",
+        "after:border-table-dark dark:after:border-table-light": t === "system",
+        "after:border-table-light dark:after:border-table-dark": t === "alt-system"
+      }
+    ) : "";
+    return /* @__PURE__ */ c("div", { className: l, children: /* @__PURE__ */ c(
+      $,
+      {
+        className: n("justify-center", r),
+        ref: o,
+        mode: t,
+        radius: "small",
+        ...i,
+        children: e
+      }
+    ) });
+  }
+);
+ze.displayName = "ButtonSort";
+const Pe = ({
+  children: e,
+  fill: t,
+  viewBox: r,
+  className: a,
+  defaultViewBox: i,
+  size: o,
+  title: l,
+  semantic: d = !1,
+  ...s
+}) => {
+  const m = n(o, a);
+  return /* @__PURE__ */ c(X, { children: /* @__PURE__ */ S(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: m,
+      viewBox: r || i,
+      fill: t || "currentColor",
+      role: "img",
+      "aria-hidden": !d,
+      focusable: !1,
+      ...s,
+      children: [
+        l && d && /* @__PURE__ */ c("title", { children: l }),
+        e
+      ]
+    }
+  ) });
+};
+/*!
+  @versini/ui-svgicon v4.2.0
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
+    version: "4.2.0",
+    buildTime: "04/05/2025 07:49 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const $e = ({
+  className: e,
+  viewBox: t,
+  title: r,
+  monotone: a,
+  ...i
+}) => /* @__PURE__ */ c(
+  Pe,
+  {
+    defaultViewBox: "0 0 384 512",
+    size: "size-5",
+    viewBox: t,
+    className: e,
+    title: r || "Close",
+    ...i,
+    children: /* @__PURE__ */ c(
+      "path",
+      {
+        d: "M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z",
+        opacity: a ? "1" : "0.4"
+      }
+    )
+  }
+);
+/*!
+  @versini/ui-icons v4.9.0
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
+    version: "4.9.0",
+    buildTime: "04/05/2025 07:49 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const Q = b.createContext(null);
+function De({
+  initialOpen: e = !1,
+  open: t,
+  onOpenChange: r
+} = {}) {
+  const [a, i] = b.useState(e), [o, l] = b.useState(), [d, s] = b.useState(), m = t ?? a, f = r ?? i, g = ce({
+    open: m,
+    onOpenChange: f
+  }), u = g.context, h = se(u, {
+    enabled: t == null
+  }), v = de(u, {
+    outsidePress: !1,
+    outsidePressEvent: "mousedown"
+  }), I = ue(u), y = me([h, v, I]);
+  return b.useMemo(
+    () => ({
+      open: m,
+      setOpen: f,
+      ...y,
+      ...g,
+      labelId: o,
+      descriptionId: d,
+      setLabelId: l,
+      setDescriptionId: s
+    }),
+    [m, f, y, g, o, d]
+  );
+}
+const R = () => {
+  const e = b.useContext(Q);
+  if (e == null)
+    throw new Error("Modal components must be wrapped in <Modal />");
+  return e;
+};
+function Ve({
+  children: e,
+  ...t
+}) {
+  const r = De(t);
+  return /* @__PURE__ */ c(Q.Provider, { value: r, children: e });
+}
+const Fe = b.forwardRef(function(e, t) {
+  const { context: r, ...a } = R(), i = ge([a.refs.setFloating, t]);
+  if (!r.open)
+    return null;
+  const { overlayBackground: o, ...l } = e, d = n("grid place-items-center", {
+    [`${o}`]: o,
+    "bg-black sm:bg-black/[.8]": !o
+  });
+  return /* @__PURE__ */ c(he, { children: /* @__PURE__ */ c(be, { className: d, lockScroll: !0, children: /* @__PURE__ */ c(fe, { context: r, children: /* @__PURE__ */ c(
+    "div",
+    {
+      ref: i,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": a.descriptionId,
+      ...a.getFloatingProps(l),
+      children: l.children
+    }
+  ) }) }) });
+}), Ue = b.forwardRef(function({ children: e, ...t }, r) {
+  const { setLabelId: a } = R(), i = H();
+  return b.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ c("h1", { ...t, ref: r, id: i, children: e });
+}), je = b.forwardRef(function({ children: e, ...t }, r) {
+  const { setDescriptionId: a } = R(), i = H();
+  return b.useLayoutEffect(() => (a(i), () => a(void 0)), [i, a]), /* @__PURE__ */ c("div", { ...t, ref: r, id: i, children: e });
+}), Ye = b.forwardRef(function(e, t) {
+  const { setOpen: r } = R(), { trigger: a, className: i, ...o } = e, l = b.useCallback(() => r(!1), [r]);
+  return /* @__PURE__ */ c("div", { className: i, children: b.cloneElement(a, {
+    ref: t,
+    onClick: l,
+    ...o
+  }) });
+});
+/*!
+  @versini/ui-modal v2.0.2
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
+    version: "2.0.2",
+    buildTime: "04/12/2025 09:18 AM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const N = "panel", C = "messagebox", Ge = ({
+  className: e,
+  kind: t,
+  borderMode: r,
+  animation: a
+}) => ({
+  main: n("prose prose-lighter flex flex-col bg-surface-medium", {
+    "duration-200 ease-out": a,
+    [`${j} max-h-full sm:max-h-[95%] min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: t === N,
+    [`${j} w-full sm:w-[95%] md:max-w-2xl`]: t === N && !e,
+    [`${U} rounded-lg border-2`]: t === C,
+    [`${U} w-[95%] sm:w-[50%] md:max-w-2xl`]: t === C && !e,
+    [`${e}`]: !!e,
+    "sm:border-border-dark": r === "dark" && t === N,
+    "sm:border-border-accent": r === "light" && t === N,
+    "border-border-dark": r === "dark" && t === C,
+    "border-border-accent": r === "light" && t === C
+  }),
+  content: "flex flex-col py-2 sm:py-4 sm:px-4 px-2 overflow-y-auto",
+  footer: "flex grow flex-col sm:p-4 p-2",
+  header: "sm:p-4 mb-0 p-2",
+  close: "sm:p-4 p-2"
+}), We = "slide", W = "fade", Je = ({
+  open: e,
+  onOpenChange: t,
+  title: r,
+  children: a,
+  footer: i,
+  borderMode: o = "light",
+  kind: l = N,
+  className: d,
+  animation: s = !1,
+  animationType: m = We
+}) => {
+  const f = _(""), [g, u] = q(
+    s ? m === W ? { opacity: 0 } : {
+      transform: "translateY(-100vh)"
+    } : {}
+  ), h = Ge({
+    className: d,
+    kind: l,
+    borderMode: o,
+    animation: s
+  });
+  return B(() => (e && (f.current = document.title, document.title = `${r} | ${f.current}`), () => {
+    e && (document.title = f.current);
+  }), [r, e]), B(() => {
+    if (s && e) {
+      u(
+        s ? m === W ? { opacity: 0 } : {
+          transform: "translateY(-666vh)"
+        } : {}
+      );
+      const v = setTimeout(() => {
+        u(
+          s ? m === "fade" ? { opacity: 1 } : {
+            transform: "translateY(0)"
+          } : {}
+        );
+      }, 100);
+      return () => clearTimeout(v);
+    }
+  }, [e, s, m]), /* @__PURE__ */ c(X, { children: e && /* @__PURE__ */ c(Ve, { open: e, onOpenChange: t, children: /* @__PURE__ */ S(Fe, { className: h.main, style: g, children: [
+    /* @__PURE__ */ S("div", { className: "flex flex-row-reverse items-center justify-between", children: [
+      /* @__PURE__ */ c(
+        Ye,
+        {
+          className: h.close,
+          trigger: /* @__PURE__ */ c(
+            $,
+            {
+              mode: "dark",
+              focusMode: "light",
+              noBorder: !0,
+              label: "Close",
+              children: /* @__PURE__ */ c($e, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ c(Ue, { className: h.header, children: r })
+    ] }),
+    /* @__PURE__ */ c(je, { className: h.content, children: a }),
+    i && /* @__PURE__ */ c("div", { className: h.footer, children: i })
+  ] }) }) });
+};
 export {
-  t as Panel
+  U as MESSAGEBOX_CLASSNAME,
+  j as PANEL_CLASSNAME,
+  Je as Panel
 };