@versini/ui-panel 3.3.1 → 3.4.0

package/dist/index.d.ts

@@ -1,68 +1,69 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
-declare const PANEL_CLASSNAME = "av-panel";
-
-type PanelProps = {
-	/**
-	 * Class name to apply to the Panel - this will ONLY override the default width styles.
-	 */
-	className?: string;
-	/**
-	 * The children to render.
-	 */
-	children: React.ReactNode;
-	/**
-	 * Callback fired when the component is opened or closed.
-	 * @param open whether or not the menu is open
-	 */
-	onOpenChange: (open: boolean) => void;
-	/**
-	 * Whether or not to open the component..
-	 * @default false
-	 */
-	open: boolean;
-	/**
-	 * The title to use for the panel.
-	 */
-	title: string;
-	/**
-	 * The type of Panel border.
-	 */
-	borderMode?: "dark" | "light";
-	/**
-	 * The content to render in the footer.
-	 */
-	footer?: React.ReactNode;
-	/**
-	 * The type of Panel. This will change the layout of the Panel.
-	 */
-	kind?: "panel" | "messagebox";
-	/**
-	 * Whether or not to animate the opening and closing of the Panel.
-	 */
-	animation?: boolean;
-	/**
-	 * The type of animation to use when opening and closing the Panel.
-	 * NOTE: This is only used when `animation` is set to `true`.
-	 * @default "slide"
-	 */
-	animationType?: "slide" | "fade";
-	/**
-	 * The maximum width of the Panel when kind is "panel".
-	 * NOTE: This does not affect messageboxes, which have a fixed width.
-	 * @default "medium"
-	 */
-	maxWidth?: "small" | "medium" | "large";
-	/**
-	 * The maximum height of the Panel or Messagebox.
-	 * For panels: defaults to "large" (95%) if not specified.
-	 * For messageboxes: no max-height is applied unless explicitly set.
-	 * @default "large" (for panels only)
-	 */
-	maxHeight?: "small" | "medium" | "large";
-};
-
-declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, }: PanelProps) => react_jsx_runtime.JSX.Element;
-
-export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel };
+import { JSX } from 'react/jsx-runtime';
+
+export declare const MESSAGEBOX_CLASSNAME = "av-messagebox";
+
+export declare const Panel: ({ open, onOpenChange, title, children, footer, borderMode, kind, className, animation, animationType, maxWidth, maxHeight, }: PanelProps) => JSX.Element;
+
+export declare const PANEL_CLASSNAME = "av-panel";
+
+declare type PanelProps = {
+    /**
+     * Class name to apply to the Panel - this will ONLY override the default width styles.
+     */
+    className?: string;
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback fired when the component is opened or closed.
+     * @param open whether or not the menu is open
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Whether or not to open the component..
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The title to use for the panel.
+     */
+    title: string;
+    /**
+     * The type of Panel border.
+     */
+    borderMode?: "dark" | "light";
+    /**
+     * The content to render in the footer.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The type of Panel. This will change the layout of the Panel.
+     */
+    kind?: "panel" | "messagebox";
+    /**
+     * Whether or not to animate the opening and closing of the Panel.
+     */
+    animation?: boolean;
+    /**
+     * The type of animation to use when opening and closing the Panel.
+     * NOTE: This is only used when `animation` is set to `true`.
+     * @default "slide"
+     */
+    animationType?: "slide" | "fade";
+    /**
+     * The maximum width of the Panel when kind is "panel".
+     * NOTE: This does not affect messageboxes, which have a fixed width.
+     * @default "medium"
+     */
+    maxWidth?: "small" | "medium" | "large";
+    /**
+     * The maximum height of the Panel or Messagebox.
+     * For panels: defaults to "large" (95%) if not specified.
+     * For messageboxes: no max-height is applied unless explicitly set.
+     * @default "large" (for panels only)
+     */
+    maxHeight?: "small" | "medium" | "large";
+};
+
+export { }

package/dist/index.js

@@ -1,19 +1,198 @@
-import { MESSAGEBOX_CLASSNAME as o, PANEL_CLASSNAME as E, Panel as A } from "./components/Panel/Panel.js";
 /*!
-  @versini/ui-panel v3.3.1
+  @versini/ui-panel v3.4.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_PANEL__ || (window.__VERSINI_UI_PANEL__ = {
-    version: "3.3.1",
-    buildTime: "11/04/2025 10:24 AM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_PANEL__) {
+    window.__VERSINI_UI_PANEL__ = {
+      version: "3.4.0",
+      buildTime: "11/04/2025 03:43 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  o as MESSAGEBOX_CLASSNAME,
-  E as PANEL_CLASSNAME,
-  A as Panel
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconClose } from "@versini/ui-icons";
+import { Modal, ModalClose, ModalContent, ModalDescription, ModalHeading } from "@versini/ui-modal";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const MESSAGEBOX_CLASSNAME = "av-messagebox";
+const PANEL_CLASSNAME = "av-panel";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "@versini/ui-modal"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
+
+
+const TYPE_PANEL = "panel";
+const TYPE_MESSAGEBOX = "messagebox";
+const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth = "medium", maxHeight })=>{
+    // Apply default maxHeight only for TYPE_PANEL to maintain backward compatibility
+    const effectiveMaxHeight = maxHeight ?? (kind === TYPE_PANEL ? "large" : undefined);
+    return {
+        main: clsx("prose prose-lighter flex flex-col bg-surface-dark", {
+            "duration-200 ease-out": animation,
+            /**
+			 * Panel styles
+			 */ [`${PANEL_CLASSNAME} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: kind === TYPE_PANEL,
+            ["w-full sm:w-[95%] md:max-w-2xl"]: kind === TYPE_PANEL && !className && maxWidth === "small",
+            ["w-full sm:w-[95%] md:max-w-3xl"]: kind === TYPE_PANEL && !className && maxWidth === "medium",
+            ["w-full sm:w-[95%] md:max-w-4xl"]: kind === TYPE_PANEL && !className && maxWidth === "large",
+            "max-h-full sm:max-h-[40%]": kind === TYPE_PANEL && effectiveMaxHeight === "small",
+            "max-h-full sm:max-h-[60%]": kind === TYPE_PANEL && effectiveMaxHeight === "medium",
+            "max-h-full sm:max-h-[95%]": kind === TYPE_PANEL && effectiveMaxHeight === "large",
+            "sm:border-border-dark": borderMode === "dark" && kind === TYPE_PANEL,
+            "sm:border-border-accent": borderMode === "light" && kind === TYPE_PANEL,
+            /**
+			 * Messagebox styles
+			 */ [`${MESSAGEBOX_CLASSNAME} rounded-lg border-2`]: kind === TYPE_MESSAGEBOX,
+            ["w-[95%] sm:w-[50%] md:max-w-2xl"]: kind === TYPE_MESSAGEBOX && !className,
+            "max-h-[20%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "small",
+            "max-h-[50%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "medium",
+            "max-h-[95%]": kind === TYPE_MESSAGEBOX && effectiveMaxHeight === "large",
+            "border-border-dark": borderMode === "dark" && kind === TYPE_MESSAGEBOX,
+            "border-border-accent": borderMode === "light" && kind === TYPE_MESSAGEBOX,
+            [`${className}`]: !!className
+        }),
+        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"
+    };
 };
+
+;// CONCATENATED MODULE: ./src/components/Panel/Panel.tsx
+
+
+
+
+
+
+const ANIMATION_SLIDE = "slide";
+const ANIMATION_FADE = "fade";
+const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = TYPE_PANEL, className, animation = false, animationType = ANIMATION_SLIDE, maxWidth = "medium", maxHeight })=>{
+    const originalTitleRef = useRef("");
+    /* v8 ignore next 9 */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === ANIMATION_FADE ? {
+        opacity: 0
+    } : {
+        transform: "translateY(-100vh)"
+    });
+    const panelClassName = getPanelClassName({
+        className,
+        kind,
+        borderMode,
+        animation,
+        maxWidth,
+        maxHeight
+    });
+    /**
+	 * If the panel is opened, set the document
+	 * title to the panel's title. If it's closed,
+	 * restore the original document.title.
+	 */ useEffect(()=>{
+        if (open) {
+            originalTitleRef.current = document.title;
+            document.title = `${title} | ${originalTitleRef.current}`;
+        }
+        return ()=>{
+            if (open) {
+                document.title = originalTitleRef.current;
+            }
+        };
+    }, [
+        title,
+        open
+    ]);
+    /**
+	 * Effect to handle the opening and closing animations.
+	 */ /* v8 ignore next 30 */ useEffect(()=>{
+        if (!animation) {
+            return;
+        }
+        if (open) {
+            setAnimationStyles(!animation ? {} : animationType === ANIMATION_FADE ? {
+                opacity: 0
+            } : {
+                transform: "translateY(-666vh)"
+            });
+            // Small delay to ensure the opening state is applied after
+            // the component is rendered.
+            const timer = setTimeout(()=>{
+                setAnimationStyles(!animation ? {} : animationType === "fade" ? {
+                    opacity: 1
+                } : {
+                    transform: "translateY(0)"
+                });
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        open,
+        animation,
+        animationType
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: open && /*#__PURE__*/ jsx(Modal, {
+            open: open,
+            onOpenChange: onOpenChange,
+            children: /*#__PURE__*/ jsxs(ModalContent, {
+                className: panelClassName.main,
+                style: animationStyles,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-row-reverse items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx(ModalClose, {
+                                className: panelClassName.close,
+                                trigger: /*#__PURE__*/ jsx(ButtonIcon, {
+                                    mode: "dark",
+                                    focusMode: "light",
+                                    noBorder: true,
+                                    label: "Close",
+                                    children: /*#__PURE__*/ jsx(IconClose, {
+                                        monotone: true
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ModalHeading, {
+                                className: panelClassName.header,
+                                children: title
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ModalDescription, {
+                        className: panelClassName.content,
+                        children: children
+                    }),
+                    footer && /*#__PURE__*/ jsx("div", {
+                        className: panelClassName.footer,
+                        children: footer
+                    })
+                ]
+            })
+        })
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { MESSAGEBOX_CLASSNAME, PANEL_CLASSNAME, Panel };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "3.3.1",
+	"version": "3.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -41,14 +41,14 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-button": "8.3.0",
+		"@versini/ui-button": "8.3.1",
 		"@versini/ui-icons": "4.15.1",
-		"@versini/ui-modal": "3.0.2",
+		"@versini/ui-modal": "3.1.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "2169d82d7a8199466642cad5b4cf01cc3b8a3128"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/Panel/Panel.js

@@ -1,263 +0,0 @@
-import { jsx as l, jsxs as v, Fragment as y } from "react/jsx-runtime";
-import { ButtonIcon as A } from "@versini/ui-button";
-import S from "clsx";
-import * as a from "react";
-import { useId as C, useRef as L, useState as O, useEffect as E } from "react";
-import { useFloating as R, useClick as P, useDismiss as T, useRole as D, useInteractions as F, useMergeRefs as V, FloatingPortal as $, FloatingOverlay as B, FloatingFocusManager as U } from "@floating-ui/react";
-const Y = "av-messagebox", G = "av-panel";
-/*!
-  @versini/ui-icons v4.15.1
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.15.1",
-    buildTime: "11/03/2025 07:21 PM EST",
-    homepage: "https://github.com/aversini/ui-icons",
-    license: "MIT"
-  });
-} catch {
-}
-/*!
-  @versini/ui-svgicon v4.3.0
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "4.3.0",
-    buildTime: "11/03/2025 07:21 PM EST",
-    homepage: "https://github.com/aversini/ui-icons",
-    license: "MIT"
-  });
-} catch {
-}
-const j = ({ children: r, fill: e, viewBox: t, className: s, defaultViewBox: o, size: c, title: n, semantic: d = !1, ...m }) => {
-  const u = S(c, s);
-  return /* @__PURE__ */ v("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    className: u,
-    viewBox: t || o,
-    fill: e || "currentColor",
-    role: "img",
-    "aria-hidden": !d,
-    focusable: !1,
-    ...m,
-    children: [
-      n && d && /* @__PURE__ */ l("title", {
-        children: n
-      }),
-      r
-    ]
-  });
-}, z = ({ className: r, viewBox: e, title: t, monotone: s, ...o }) => /* @__PURE__ */ l(j, {
-  defaultViewBox: "0 0 384 512",
-  size: "size-5",
-  viewBox: e,
-  className: r,
-  title: t || "Close",
-  ...o,
-  children: /* @__PURE__ */ l("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: s ? "1" : "0.4"
-  })
-}), M = a.createContext(null);
-function X({
-  initialOpen: r = !1,
-  open: e,
-  onOpenChange: t
-} = {}) {
-  const [s, o] = a.useState(r), [c, n] = a.useState(), [d, m] = a.useState(), u = e ?? s, p = t ?? o, I = R({
-    open: u,
-    onOpenChange: p
-  }), f = I.context, b = P(f, {
-    enabled: e == null
-  }), w = T(f, {
-    outsidePress: !1,
-    outsidePressEvent: "mousedown"
-  }), h = D(f), _ = F([b, w, h]);
-  return a.useMemo(
-    () => ({
-      open: u,
-      setOpen: p,
-      ..._,
-      ...I,
-      labelId: c,
-      descriptionId: d,
-      setLabelId: n,
-      setDescriptionId: m
-    }),
-    [u, p, _, I, c, d]
-  );
-}
-const x = () => {
-  const r = a.useContext(M);
-  if (r == null)
-    throw new Error("Modal components must be wrapped in <Modal />");
-  return r;
-};
-function H({
-  children: r,
-  ...e
-}) {
-  const t = X(e);
-  return /* @__PURE__ */ l(M.Provider, { value: t, children: r });
-}
-const q = a.forwardRef(function(r, e) {
-  const { context: t, ...s } = x(), o = V([s.refs.setFloating, e]);
-  if (!t.open)
-    return null;
-  const { overlayBackground: c, ...n } = r, d = S("grid place-items-center", {
-    [`${c}`]: c,
-    "bg-black sm:bg-black/[.8]": !c
-  });
-  return /* @__PURE__ */ l($, { children: /* @__PURE__ */ l(B, { className: d, lockScroll: !0, children: /* @__PURE__ */ l(U, { context: t, children: /* @__PURE__ */ l(
-    "div",
-    {
-      ref: o,
-      "aria-labelledby": s.labelId,
-      "aria-describedby": s.descriptionId,
-      ...s.getFloatingProps(n),
-      children: n.children
-    }
-  ) }) }) });
-}), J = a.forwardRef(function({ children: r, ...e }, t) {
-  const { setLabelId: s } = x(), o = C();
-  return a.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("h1", { ...e, ref: t, id: o, children: r });
-}), K = a.forwardRef(function({ children: r, ...e }, t) {
-  const { setDescriptionId: s } = x(), o = C();
-  return a.useLayoutEffect(() => (s(o), () => s(void 0)), [o, s]), /* @__PURE__ */ l("div", { ...e, ref: t, id: o, children: r });
-}), Q = a.forwardRef(function(r, e) {
-  const { setOpen: t } = x(), { trigger: s, className: o, ...c } = r, n = a.useCallback(() => t(!1), [t]);
-  return /* @__PURE__ */ l("div", { className: o, children: a.cloneElement(s, {
-    ref: e,
-    onClick: n,
-    ...c
-  }) });
-});
-/*!
-  @versini/ui-modal v3.0.2
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
-    version: "3.0.2",
-    buildTime: "11/04/2025 10:24 AM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const i = "panel", g = "messagebox", Z = ({
-  className: r,
-  kind: e,
-  borderMode: t,
-  animation: s,
-  maxWidth: o = "medium",
-  maxHeight: c
-}) => {
-  const n = c ?? (e === i ? "large" : void 0);
-  return {
-    main: S("prose prose-lighter flex flex-col bg-surface-dark", {
-      "duration-200 ease-out": s,
-      /**
-       * Panel styles
-       */
-      [`${G} min-h-full sm:min-h-[10rem] sm:rounded-lg sm:border-2`]: e === i,
-      "w-full sm:w-[95%] md:max-w-2xl": e === i && !r && o === "small",
-      "w-full sm:w-[95%] md:max-w-3xl": e === i && !r && o === "medium",
-      "w-full sm:w-[95%] md:max-w-4xl": e === i && !r && o === "large",
-      "max-h-full sm:max-h-[40%]": e === i && n === "small",
-      "max-h-full sm:max-h-[60%]": e === i && n === "medium",
-      "max-h-full sm:max-h-[95%]": e === i && n === "large",
-      "sm:border-border-dark": t === "dark" && e === i,
-      "sm:border-border-accent": t === "light" && e === i,
-      /**
-       * Messagebox styles
-       */
-      [`${Y} rounded-lg border-2`]: e === g,
-      "w-[95%] sm:w-[50%] md:max-w-2xl": e === g && !r,
-      "max-h-[20%]": e === g && n === "small",
-      "max-h-[50%]": e === g && n === "medium",
-      "max-h-[95%]": e === g && n === "large",
-      "border-border-dark": t === "dark" && e === g,
-      "border-border-accent": t === "light" && e === g,
-      [`${r}`]: !!r
-    }),
-    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"
-  };
-}, W = "slide", N = "fade", oe = ({
-  open: r,
-  onOpenChange: e,
-  title: t,
-  children: s,
-  footer: o,
-  borderMode: c = "light",
-  kind: n = i,
-  className: d,
-  animation: m = !1,
-  animationType: u = W,
-  maxWidth: p = "medium",
-  maxHeight: I
-}) => {
-  const f = L(""), [b, w] = O(
-    m ? u === N ? { opacity: 0 } : {
-      transform: "translateY(-100vh)"
-    } : {}
-  ), h = Z({
-    className: d,
-    kind: n,
-    borderMode: c,
-    animation: m,
-    maxWidth: p,
-    maxHeight: I
-  });
-  return E(() => (r && (f.current = document.title, document.title = `${t} | ${f.current}`), () => {
-    r && (document.title = f.current);
-  }), [t, r]), E(() => {
-    if (m && r) {
-      w(
-        m ? u === N ? { opacity: 0 } : {
-          transform: "translateY(-666vh)"
-        } : {}
-      );
-      const _ = setTimeout(() => {
-        w(
-          m ? u === "fade" ? { opacity: 1 } : {
-            transform: "translateY(0)"
-          } : {}
-        );
-      }, 100);
-      return () => clearTimeout(_);
-    }
-  }, [r, m, u]), /* @__PURE__ */ l(y, { children: r && /* @__PURE__ */ l(H, { open: r, onOpenChange: e, children: /* @__PURE__ */ v(q, { className: h.main, style: b, children: [
-    /* @__PURE__ */ v("div", { className: "flex flex-row-reverse items-center justify-between", children: [
-      /* @__PURE__ */ l(
-        Q,
-        {
-          className: h.close,
-          trigger: /* @__PURE__ */ l(
-            A,
-            {
-              mode: "dark",
-              focusMode: "light",
-              noBorder: !0,
-              label: "Close",
-              children: /* @__PURE__ */ l(z, { monotone: !0 })
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(J, { className: h.header, children: t })
-    ] }),
-    /* @__PURE__ */ l(K, { className: h.content, children: s }),
-    o && /* @__PURE__ */ l("div", { className: h.footer, children: o })
-  ] }) }) });
-};
-export {
-  Y as MESSAGEBOX_CLASSNAME,
-  G as PANEL_CLASSNAME,
-  oe as Panel
-};