@stackone/malachite 2.70.0 → 2.72.0

package/dist/components/SidePanel.js

@@ -1,148 +1,165 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useId as k, useState as _, useRef as u, useEffect as q } from "react";
-import { createPortal as U } from "react-dom";
-import { ShadowRootWrapper as G } from "../ShadowRootWrapper.js";
-import H from "./CalloutStrip.js";
-import J from "./CustomIcons/ArrowLeftIcon.js";
-import K from "./CustomIcons/DismissIcon.js";
-import z from "./Typography/EllipsisText.js";
-import { useOverlayBehaviour as Q, OVERLAY_ICON_BUTTON_CLASSES as E } from "./overlayBehaviour.js";
-import { OVERLAY_ELEVATED_ATTR as Z, overlayIdentity as O } from "./portalOverlay.js";
-const P = 200, ee = (t) => typeof t == "number" ? `${t}px` : t, me = ({
-  open: t,
-  onClose: c,
-  title: o,
-  subtitle: d,
-  titleExtra: f,
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useId as V, useState as B, useRef as u, useEffect as Z } from "react";
+import { createPortal as ee } from "react-dom";
+import { ShadowRootWrapper as re } from "../ShadowRootWrapper.js";
+import le from "./CalloutStrip.js";
+import ae from "./CustomIcons/ArrowLeftIcon.js";
+import te from "./CustomIcons/DismissIcon.js";
+import C from "./Typography/EllipsisText.js";
+import { useOverlayBehaviour as ie, OVERLAY_ICON_BUTTON_CLASSES as L } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as ne, overlayIdentity as j } from "./portalOverlay.js";
+const M = 200, se = (a) => typeof a == "number" ? `${a}px` : a, ve = ({
+  open: a,
+  onClose: d,
+  title: s,
+  subtitle: o,
+  subtitlePlacement: W = "inline",
+  titleExtra: x,
   description: m,
-  headerDivider: V = !1,
-  icon: x,
+  toolbar: f,
+  headerDivider: D = !1,
+  icon: h,
   headerExtra: b,
-  footer: h,
-  onBack: v,
-  maxWidth: C = 1080,
-  "aria-label": L,
+  footer: v,
+  onBack: N,
+  maxWidth: F = 1080,
+  "aria-label": X,
   "aria-labelledby": y,
-  bodyPadding: N = !0,
-  stacking: j = "default",
+  bodyPadding: g = !0,
+  stacking: Y = "default",
   callouts: p,
-  renderLink: B,
-  children: g
+  renderLink: q,
+  children: w
 }) => {
-  const T = k(), I = k(), [w, S] = _(!1), [M, R] = _(!1), i = u(null), r = u(null), $ = u(null), {
-    ref: W,
-    isTopmost: D,
-    zIndex: F,
-    elevated: X
-  } = Q({
-    open: t,
-    onClose: c,
-    elevated: j === "above-app-overlays",
+  const T = V(), I = V(), [S, k] = B(!1), [U, R] = B(!1), i = u(null), l = u(null), $ = u(null), {
+    ref: G,
+    isTopmost: H,
+    zIndex: J,
+    elevated: K
+  } = ie({
+    open: a,
+    onClose: d,
+    elevated: Y === "above-app-overlays",
     hostRef: $
   });
-  if (q(() => (t ? (R(!0), r.current && (clearTimeout(r.current), r.current = null), i.current = requestAnimationFrame(() => {
-    i.current = null, S(!0);
-  })) : (S(!1), r.current = setTimeout(() => {
-    r.current = null, R(!1);
-  }, P)), () => {
-    i.current !== null && (cancelAnimationFrame(i.current), i.current = null), r.current && (clearTimeout(r.current), r.current = null);
-  }), [t]), !M)
+  if (Z(() => (a ? (R(!0), l.current && (clearTimeout(l.current), l.current = null), i.current = requestAnimationFrame(() => {
+    i.current = null, k(!0);
+  })) : (k(!1), l.current = setTimeout(() => {
+    l.current = null, R(!1);
+  }, M)), () => {
+    i.current !== null && (cancelAnimationFrame(i.current), i.current = null), l.current && (clearTimeout(l.current), l.current = null);
+  }), [a]), !U)
     return null;
-  const l = p == null ? void 0 : p.filter((n) => n.message.trim()), A = !!(l != null && l.length), Y = N ? /* @__PURE__ */ e("div", { className: A ? "p-[28px]" : "py-[28px]", children: g }) : g;
-  return U(
+  const t = p == null ? void 0 : p.filter((n) => n.message.trim()), A = !!(t != null && t.length), Q = g ? /* @__PURE__ */ e("div", { className: A ? "p-[28px]" : "py-[28px]", children: w }) : w, E = W === "below" && !!o, _ = /* @__PURE__ */ e(
+    "span",
+    {
+      className: E ? "flex min-w-0 shrink" : "flex min-w-0 max-w-full shrink-0",
+      children: /* @__PURE__ */ e(
+        C,
+        {
+          tooltip: s,
+          tooltipWhenTruncated: !0,
+          tooltipPlacement: "bottom",
+          className: "min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold",
+          children: s
+        }
+      )
+    }
+  ), z = o ? /* @__PURE__ */ e(
+    C,
+    {
+      tooltip: o,
+      tooltipWhenTruncated: !0,
+      tooltipPlacement: "bottom",
+      color: "secondary",
+      className: "min-w-0 text-[13px]",
+      children: o
+    }
+  ) : null, O = x ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: x }) : null, P = b ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-baseline", children: b }) : null;
+  return ee(
     // Host carries the stacking context — ShadowRootWrapper's `isolation` would
     // otherwise flatten our z-index and let sticky page elements paint over us.
     /* @__PURE__ */ e(
-      G,
+      re,
       {
         hostRef: $,
-        hostStyle: { position: "relative", zIndex: F },
-        hostProps: X ? { ...O("sidepanel"), [Z]: "" } : O("sidepanel"),
-        children: /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[1000]", children: [
+        hostStyle: { position: "relative", zIndex: J },
+        hostProps: K ? { ...j("sidepanel"), [ne]: "" } : j("sidepanel"),
+        children: /* @__PURE__ */ r("div", { className: "fixed inset-0 z-[1000]", children: [
           /* @__PURE__ */ e(
             "div",
             {
               "aria-hidden": "true",
-              onClick: c,
-              className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${w ? "opacity-100" : "opacity-0"}`
+              onClick: d,
+              className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${S ? "opacity-100" : "opacity-0"}`
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "div",
             {
-              ref: W,
+              ref: G,
               role: "dialog",
-              "aria-modal": D ? "true" : void 0,
+              "aria-modal": H ? "true" : void 0,
               "aria-describedby": [
-                ...(l ?? []).map((n, s) => `${T}-${s}`),
+                ...(t ?? []).map((n, c) => `${T}-${c}`),
                 m ? I : null
               ].filter(Boolean).join(" ") || void 0,
               tabIndex: -1,
-              "aria-label": y ? void 0 : L ?? (typeof o == "string" ? o : void 0),
+              "aria-label": y ? void 0 : X ?? (typeof s == "string" ? s : void 0),
               "aria-labelledby": y,
               className: "absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]",
               style: {
-                width: `min(calc(100% - 16px), ${ee(C)})`,
+                width: `min(calc(100% - 16px), ${se(F)})`,
                 // Inline: Tailwind translate utilities silently break inside
                 // shadow roots (see CLAUDE.md Shadow DOM caveats).
-                transform: w ? "translateX(0)" : "translateX(calc(100% + 16px))",
-                transition: `transform ${P}ms ease-in-out`
+                transform: S ? "translateX(0)" : "translateX(calc(100% + 16px))",
+                transition: `transform ${M}ms ease-in-out`
               },
               children: [
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${V ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                    className: `flex flex-col gap-[20px] px-[20px] py-[18px] ${D ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
                     children: [
-                      /* @__PURE__ */ a("div", { className: "flex items-center gap-[12px]", children: [
-                        v ? /* @__PURE__ */ e(
+                      /* @__PURE__ */ r("div", { className: "flex items-center gap-[12px]", children: [
+                        N ? /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Back",
-                            onClick: v,
-                            className: E,
-                            children: /* @__PURE__ */ e(J, { size: 16 })
+                            onClick: N,
+                            className: L,
+                            children: /* @__PURE__ */ e(ae, { size: 16 })
                           }
                         ) : null,
-                        x ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: x }) : null,
-                        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[12px]", children: [
-                          /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-baseline gap-[8px]", children: [
-                            /* @__PURE__ */ a("div", { className: "flex min-w-0 items-baseline gap-[8px]", children: [
-                              /* @__PURE__ */ e("span", { className: "flex min-w-0 max-w-full shrink-0", children: /* @__PURE__ */ e(
-                                z,
-                                {
-                                  tooltip: o,
-                                  tooltipWhenTruncated: !0,
-                                  tooltipPlacement: "bottom",
-                                  className: "min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold",
-                                  children: o
-                                }
-                              ) }),
-                              d ? /* @__PURE__ */ e(
-                                z,
-                                {
-                                  tooltip: d,
-                                  tooltipWhenTruncated: !0,
-                                  tooltipPlacement: "bottom",
-                                  color: "secondary",
-                                  className: "min-w-0 text-[13px]",
-                                  children: d
-                                }
-                              ) : null
+                        h ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: h }) : null,
+                        E ? /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-center gap-[12px]", children: [
+                          /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
+                            /* @__PURE__ */ r("div", { className: "flex min-w-0 items-baseline gap-[8px]", children: [
+                              _,
+                              O
                             ] }),
-                            f ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: f }) : null
+                            z
                           ] }),
-                          b ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-baseline", children: b }) : null
+                          P
+                        ] }) : /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-baseline gap-[12px]", children: [
+                          /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-baseline gap-[8px]", children: [
+                            /* @__PURE__ */ r("div", { className: "flex min-w-0 items-baseline gap-[8px]", children: [
+                              _,
+                              z
+                            ] }),
+                            O
+                          ] }),
+                          P
                         ] }),
                         /* @__PURE__ */ e(
                           "button",
                           {
                             type: "button",
                             "aria-label": "Close",
-                            onClick: c,
-                            className: E,
-                            children: /* @__PURE__ */ e(K, { size: 10 })
+                            onClick: d,
+                            className: L,
+                            children: /* @__PURE__ */ e(te, { size: 10 })
                           }
                         )
                       ] }),
@@ -157,26 +174,27 @@ const P = 200, ee = (t) => typeof t == "number" ? `${t}px` : t, me = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ a(
+                f ? /* @__PURE__ */ e("div", { className: "shrink-0 px-[16px] pt-[16px] pb-[8px]", children: f }) : null,
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: `min-h-0 flex-1 overflow-y-auto ${N && !A ? "px-[28px]" : ""}`,
+                    className: `min-h-0 flex-1 overflow-y-auto ${g && !A ? "px-[28px]" : ""}`,
                     children: [
-                      l == null ? void 0 : l.map((n, s) => /* @__PURE__ */ e(
-                        H,
+                      t == null ? void 0 : t.map((n, c) => /* @__PURE__ */ e(
+                        le,
                         {
-                          id: `${T}-${s}`,
+                          id: `${T}-${c}`,
                           type: n.type,
                           message: n.message,
-                          renderLink: B
+                          renderLink: q
                         },
-                        s
+                        c
                       )),
-                      Y
+                      Q
                     ]
                   }
                 ),
-                h ? /* @__PURE__ */ e("div", { className: "border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]", children: h }) : null
+                v ? /* @__PURE__ */ e("div", { className: "border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]", children: v }) : null
               ]
             }
           )
@@ -187,7 +205,7 @@ const P = 200, ee = (t) => typeof t == "number" ? `${t}px` : t, me = ({
   );
 };
 export {
-  me as SidePanel,
-  me as default
+  ve as SidePanel,
+  ve as default
 };
 //# sourceMappingURL=SidePanel.js.map

package/dist/components/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport EllipsisText from './Typography/EllipsisText';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary text, inline after the title. */\n    subtitle?: React.ReactNode;\n    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */\n    titleExtra?: React.ReactNode;\n    /** Block paragraph below the title row, spanning the header width. Announced as the panel's description. */\n    description?: React.ReactNode;\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Leading header slot, typically a logo or icon. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    footer?: React.ReactNode;\n    /** Renders a back button before the header icon. */\n    onBack?: () => void;\n    /** Maximum panel width. Default: 1080. */\n    maxWidth?: number | string;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. */\n    stacking?: 'default' | 'above-app-overlays';\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`, and announced ahead of `description`. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number | string): string =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    titleExtra,\n    description,\n    headerDivider = false,\n    icon,\n    headerExtra,\n    footer,\n    onBack,\n    maxWidth = 1080,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    bodyPadding = true,\n    stacking = 'default',\n    callouts,\n    renderLink,\n    children,\n}) => {\n    const calloutId = useId();\n    const descriptionId = useId();\n    const [isVisible, setIsVisible] = useState(false);\n    const [isMounted, setIsMounted] = useState(false);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const {\n        ref: handlePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        elevated: stacking === 'above-app-overlays',\n        hostRef,\n    });\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim());\n    const hasCallouts = !!shownCallouts?.length;\n    const paddedBody = bodyPadding ? (\n        <div className={hasCallouts ? 'p-[28px]' : 'py-[28px]'}>{children}</div>\n    ) : (\n        children\n    );\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n        // otherwise flatten our z-index and let sticky page elements paint over us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('sidepanel')\n            }\n        >\n            <div className=\"fixed inset-0 z-[1000]\">\n                <div\n                    aria-hidden=\"true\"\n                    onClick={onClose}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role=\"dialog\"\n                    // Only the topmost overlay may claim it, or a screen reader can still\n                    // browse the one underneath.\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [\n                            ...(shownCallouts ?? []).map((_, index) => `${calloutId}-${index}`),\n                            description ? descriptionId : null,\n                        ]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    tabIndex={-1}\n                    // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n                    style={{\n                        width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n                        // Inline: Tailwind translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n                        transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n                    }}\n                >\n                    <div\n                        className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n                            headerDivider\n                                ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                : ''\n                        }`}\n                    >\n                        <div className=\"flex items-center gap-[12px]\">\n                            {onBack ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Back\"\n                                    onClick={onBack}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <ArrowLeftIcon size={16} />\n                                </button>\n                            ) : null}\n                            {icon ? (\n                                <span className=\"flex shrink-0 items-center\">{icon}</span>\n                            ) : null}\n                            <div className=\"flex min-w-0 flex-1 items-baseline gap-[12px]\">\n                                <div className=\"flex min-w-0 flex-1 items-baseline gap-[8px]\">\n                                    <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n                                        <span className=\"flex min-w-0 max-w-full shrink-0\">\n                                            <EllipsisText\n                                                tooltip={title}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                className=\"min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold\"\n                                            >\n                                                {title}\n                                            </EllipsisText>\n                                        </span>\n                                        {subtitle ? (\n                                            <EllipsisText\n                                                tooltip={subtitle}\n                                                tooltipWhenTruncated\n                                                tooltipPlacement=\"bottom\"\n                                                color=\"secondary\"\n                                                className=\"min-w-0 text-[13px]\"\n                                            >\n                                                {subtitle}\n                                            </EllipsisText>\n                                        ) : null}\n                                    </div>\n                                    {titleExtra ? (\n                                        <span className=\"flex shrink-0 items-center\">\n                                            {titleExtra}\n                                        </span>\n                                    ) : null}\n                                </div>\n                                {headerExtra ? (\n                                    <span className=\"flex shrink-0 items-baseline\">\n                                        {headerExtra}\n                                    </span>\n                                ) : null}\n                            </div>\n                            <button\n                                type=\"button\"\n                                aria-label=\"Close\"\n                                onClick={onClose}\n                                className={OVERLAY_ICON_BUTTON_CLASSES}\n                            >\n                                <DismissIcon size={10} />\n                            </button>\n                        </div>\n                        {description ? (\n                            <div\n                                id={descriptionId}\n                                className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\"\n                            >\n                                {description}\n                            </div>\n                        ) : null}\n                    </div>\n                    {/* Callouts move the horizontal padding inward so their strips run full-bleed. */}\n                    <div\n                        className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding && !hasCallouts ? 'px-[28px]' : ''}`}\n                    >\n                        {shownCallouts?.map((callout, index) => (\n                            <CalloutStrip\n                                key={index}\n                                id={`${calloutId}-${index}`}\n                                type={callout.type}\n                                message={callout.message}\n                                renderLink={renderLink}\n                            />\n                        ))}\n                        {paddedBody}\n                    </div>\n                    {footer ? (\n                        <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n                            {footer}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","titleExtra","description","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","callouts","renderLink","children","calloutId","useId","descriptionId","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","shownCallouts","callout","hasCallouts","paddedBody","jsx","createPortal","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","_","index","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","EllipsisText","DismissIcon","CalloutStrip"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","sources":["../../src/components/SidePanel.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { AlertType } from './Alert';\nimport CalloutStrip from './CalloutStrip';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport type { RenderLink } from './PageLayout/types';\nimport EllipsisText from './Typography/EllipsisText';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport interface SidePanelProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    subtitle?: React.ReactNode;\n    /** `below` stacks the subtitle under the title, so neither truncates the other. */\n    subtitlePlacement?: 'inline' | 'below';\n    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */\n    titleExtra?: React.ReactNode;\n    /** Block paragraph below the title row, spanning the header width. Announced as the panel's description. */\n    description?: React.ReactNode;\n    /** Pinned between the header and the scrolling body. */\n    toolbar?: React.ReactNode;\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Leading header slot, typically a logo or icon. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    footer?: React.ReactNode;\n    /** Renders a back button before the header icon. */\n    onBack?: () => void;\n    /** Maximum panel width. Default: 1080. */\n    maxWidth?: number | string;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /** `above-app-overlays` lifts the overlay stack clear of chrome pinned near max-int. */\n    stacking?: 'default' | 'above-app-overlays';\n    /** Full-width Alert bands at the top of the body, above `children`, in order. Unaffected by\n     *  `bodyPadding`, and announced ahead of `description`. The message is markdown. */\n    callouts?: { type?: AlertType; message: string }[];\n    /** Routes root-relative links in `callouts` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    children: React.ReactNode;\n}\n\nconst TRANSITION_MS = 200;\n\nconst toCssSize = (value: number | string): string =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity\n * without leaving the page. Portals to `document.body`, locks background scroll and\n * traps keyboard focus while open (restoring both on close), dismisses on ESC\n * (topmost open overlay only), overlay click or the close button, and exposes header\n * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.\n */\nconst SidePanel: React.FC<SidePanelProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    subtitlePlacement = 'inline',\n    titleExtra,\n    description,\n    toolbar,\n    headerDivider = false,\n    icon,\n    headerExtra,\n    footer,\n    onBack,\n    maxWidth = 1080,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    bodyPadding = true,\n    stacking = 'default',\n    callouts,\n    renderLink,\n    children,\n}) => {\n    const calloutId = useId();\n    const descriptionId = useId();\n    const [isVisible, setIsVisible] = useState(false);\n    const [isMounted, setIsMounted] = useState(false);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    const {\n        ref: handlePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        elevated: stacking === 'above-app-overlays',\n        hostRef,\n    });\n\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n            frameRef.current = requestAnimationFrame(() => {\n                frameRef.current = null;\n                setIsVisible(true);\n            });\n        } else {\n            setIsVisible(false);\n            unmountTimerRef.current = setTimeout(() => {\n                unmountTimerRef.current = null;\n                setIsMounted(false);\n            }, TRANSITION_MS);\n        }\n        return () => {\n            if (frameRef.current !== null) {\n                cancelAnimationFrame(frameRef.current);\n                frameRef.current = null;\n            }\n            if (unmountTimerRef.current) {\n                clearTimeout(unmountTimerRef.current);\n                unmountTimerRef.current = null;\n            }\n        };\n    }, [open]);\n\n    if (!isMounted) {\n        return null;\n    }\n\n    const shownCallouts = callouts?.filter((callout) => callout.message.trim());\n    const hasCallouts = !!shownCallouts?.length;\n    const paddedBody = bodyPadding ? (\n        <div className={hasCallouts ? 'p-[28px]' : 'py-[28px]'}>{children}</div>\n    ) : (\n        children\n    );\n\n    const subtitleBelow = subtitlePlacement === 'below' && !!subtitle;\n    const titleNode = (\n        <span\n            className={subtitleBelow ? 'flex min-w-0 shrink' : 'flex min-w-0 max-w-full shrink-0'}\n        >\n            <EllipsisText\n                tooltip={title}\n                tooltipWhenTruncated\n                tooltipPlacement=\"bottom\"\n                className=\"min-w-0 text-[length:var(--malachite-font-size-15,15px)] font-semibold\"\n            >\n                {title}\n            </EllipsisText>\n        </span>\n    );\n    const subtitleNode = subtitle ? (\n        <EllipsisText\n            tooltip={subtitle}\n            tooltipWhenTruncated\n            tooltipPlacement=\"bottom\"\n            color=\"secondary\"\n            className=\"min-w-0 text-[13px]\"\n        >\n            {subtitle}\n        </EllipsisText>\n    ) : null;\n    const titleExtraNode = titleExtra ? (\n        <span className=\"flex shrink-0 items-center\">{titleExtra}</span>\n    ) : null;\n    const headerExtraNode = headerExtra ? (\n        <span className=\"flex shrink-0 items-baseline\">{headerExtra}</span>\n    ) : null;\n\n    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would\n        // otherwise flatten our z-index and let sticky page elements paint over us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('sidepanel'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('sidepanel')\n            }\n        >\n            <div className=\"fixed inset-0 z-[1000]\">\n                <div\n                    aria-hidden=\"true\"\n                    onClick={onClose}\n                    className={`absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${\n                        isVisible ? 'opacity-100' : 'opacity-0'\n                    }`}\n                />\n                <div\n                    ref={handlePanelRef}\n                    role=\"dialog\"\n                    // Only the topmost overlay may claim it, or a screen reader can still\n                    // browse the one underneath.\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [\n                            ...(shownCallouts ?? []).map((_, index) => `${calloutId}-${index}`),\n                            description ? descriptionId : null,\n                        ]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    tabIndex={-1}\n                    // Prefer aria-labelledby; only fall back to aria-label when it's absent.\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className=\"absolute top-[8px] right-[8px] bottom-[8px] flex flex-col overflow-hidden rounded-[20px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-lg)]\"\n                    style={{\n                        width: `min(calc(100% - 16px), ${toCssSize(maxWidth)})`,\n                        // Inline: Tailwind translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'translateX(0)' : 'translateX(calc(100% + 16px))',\n                        transition: `transform ${TRANSITION_MS}ms ease-in-out`,\n                    }}\n                >\n                    <div\n                        className={`flex flex-col gap-[20px] px-[20px] py-[18px] ${\n                            headerDivider\n                                ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                : ''\n                        }`}\n                    >\n                        <div className=\"flex items-center gap-[12px]\">\n                            {onBack ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Back\"\n                                    onClick={onBack}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <ArrowLeftIcon size={16} />\n                                </button>\n                            ) : null}\n                            {icon ? (\n                                <span className=\"flex shrink-0 items-center\">{icon}</span>\n                            ) : null}\n                            {subtitleBelow ? (\n                                <div className=\"flex min-w-0 flex-1 items-center gap-[12px]\">\n                                    <div className=\"flex min-w-0 flex-1 flex-col gap-[2px]\">\n                                        <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n                                            {titleNode}\n                                            {titleExtraNode}\n                                        </div>\n                                        {subtitleNode}\n                                    </div>\n                                    {headerExtraNode}\n                                </div>\n                            ) : (\n                                <div className=\"flex min-w-0 flex-1 items-baseline gap-[12px]\">\n                                    <div className=\"flex min-w-0 flex-1 items-baseline gap-[8px]\">\n                                        <div className=\"flex min-w-0 items-baseline gap-[8px]\">\n                                            {titleNode}\n                                            {subtitleNode}\n                                        </div>\n                                        {titleExtraNode}\n                                    </div>\n                                    {headerExtraNode}\n                                </div>\n                            )}\n                            <button\n                                type=\"button\"\n                                aria-label=\"Close\"\n                                onClick={onClose}\n                                className={OVERLAY_ICON_BUTTON_CLASSES}\n                            >\n                                <DismissIcon size={10} />\n                            </button>\n                        </div>\n                        {description ? (\n                            <div\n                                id={descriptionId}\n                                className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\"\n                            >\n                                {description}\n                            </div>\n                        ) : null}\n                    </div>\n                    {toolbar ? (\n                        <div className=\"shrink-0 px-[16px] pt-[16px] pb-[8px]\">{toolbar}</div>\n                    ) : null}\n                    {/* Callouts move the horizontal padding inward so their strips run full-bleed. */}\n                    <div\n                        className={`min-h-0 flex-1 overflow-y-auto ${bodyPadding && !hasCallouts ? 'px-[28px]' : ''}`}\n                    >\n                        {shownCallouts?.map((callout, index) => (\n                            <CalloutStrip\n                                key={index}\n                                id={`${calloutId}-${index}`}\n                                type={callout.type}\n                                message={callout.message}\n                                renderLink={renderLink}\n                            />\n                        ))}\n                        {paddedBody}\n                    </div>\n                    {footer ? (\n                        <div className=\"border-0 border-t border-solid border-[var(--malachite-card-border)] px-[24px] py-[16px]\">\n                            {footer}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default SidePanel;\nexport { SidePanel };\n"],"names":["TRANSITION_MS","toCssSize","value","SidePanel","open","onClose","title","subtitle","subtitlePlacement","titleExtra","description","toolbar","headerDivider","icon","headerExtra","footer","onBack","maxWidth","ariaLabel","ariaLabelledBy","bodyPadding","stacking","callouts","renderLink","children","calloutId","useId","descriptionId","isVisible","setIsVisible","useState","isMounted","setIsMounted","frameRef","useRef","unmountTimerRef","hostRef","handlePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","useEffect","shownCallouts","callout","hasCallouts","paddedBody","jsx","subtitleBelow","titleNode","EllipsisText","subtitleNode","titleExtraNode","headerExtraNode","createPortal","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","_","index","OVERLAY_ICON_BUTTON_CLASSES","ArrowLeftIcon","DismissIcon","CalloutStrip"],"mappings":"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"}

package/dist/components/StatusPill.js

@@ -0,0 +1,61 @@
+import { jsxs as o, jsx as r, Fragment as p } from "react/jsx-runtime";
+import u from "./CustomIcons/CheckCircleFilled.js";
+import x from "./CustomIcons/ErrorCircleFilled.js";
+import g from "./CustomIcons/InfoCircleFilled.js";
+import f from "./CustomIcons/WarningCircleFilled.js";
+import h from "./Spinner.js";
+const b = {
+  success: "bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]",
+  neutral: "bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]",
+  warning: "bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]",
+  error: "bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]"
+}, v = {
+  success: u,
+  neutral: g,
+  warning: f,
+  error: x
+}, _ = "border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]", F = ({
+  label: n,
+  detail: l,
+  tone: i = "neutral",
+  icon: s,
+  busy: e = !1,
+  live: a = !1,
+  "aria-label": c,
+  "aria-labelledby": t,
+  className: m = ""
+}) => {
+  const d = v[i];
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      role: a ? "status" : void 0,
+      "aria-label": a && !t ? c : void 0,
+      "aria-labelledby": a ? t : void 0,
+      "aria-busy": e || void 0,
+      className: `inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${_} ${b[i]} ${m}`,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `inline-flex shrink-0 items-center justify-center size-[16px] ${e ? "" : "[&_svg]:size-full!"}`,
+            children: e ? /* @__PURE__ */ r(h, { size: "xxxsmall" }) : s ?? /* @__PURE__ */ r(d, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: [
+          n,
+          l ? /* @__PURE__ */ o(p, { children: [
+            " · ",
+            /* @__PURE__ */ r("span", { className: "font-mono", children: l })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+export {
+  F as StatusPill,
+  F as default
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../src/components/StatusPill.tsx"],"sourcesContent":["import React from 'react';\nimport CheckCircleFilled, { type IconProps } from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport Spinner from './Spinner';\n\nexport type StatusPillTone = 'success' | 'neutral' | 'warning' | 'error';\n\nexport interface StatusPillProps {\n    label: string;\n    /** Set in the mono face after a `·`. */\n    detail?: string;\n    tone?: StatusPillTone;\n    icon?: React.ReactNode;\n    busy?: boolean;\n    /** Makes it a `status` live region. Off by default, as on `Alert`. */\n    live?: boolean;\n    /** Names the live region; only applies with `live`. */\n    'aria-label'?: string;\n    /** Only applies with `live`. */\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// Text leans 30% toward the primary colour so every tone holds 4.5:1 on its tint.\nconst TONE_CLASSES: Record<StatusPillTone, string> = {\n    success:\n        'bg-[var(--malachite-alert-success-background)] text-[var(--malachite-alert-success-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-success-foreground)_70%,var(--malachite-text-primary))]',\n    neutral:\n        'bg-[var(--malachite-alert-info-background)] text-[var(--malachite-alert-info-foreground)]',\n    warning:\n        'bg-[var(--malachite-alert-warning-background)] text-[var(--malachite-alert-warning-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-warning-foreground)_70%,var(--malachite-text-primary))]',\n    error: 'bg-[var(--malachite-alert-error-background)] text-[var(--malachite-alert-error-foreground)] supports-[color:color-mix(in_srgb,red,red)]:text-[color-mix(in_srgb,var(--malachite-alert-error-foreground)_70%,var(--malachite-text-primary))]',\n};\n\nconst TONE_ICONS: Record<StatusPillTone, React.FC<IconProps>> = {\n    success: CheckCircleFilled,\n    neutral: InfoCircleFilled,\n    warning: WarningCircleFilled,\n    error: ErrorCircleFilled,\n};\n\nconst BORDER =\n    'border border-solid border-[var(--malachite-card-border)] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,currentColor_24%,transparent)]';\n\nconst StatusPill: React.FC<StatusPillProps> = ({\n    label,\n    detail,\n    tone = 'neutral',\n    icon,\n    busy = false,\n    live = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const ToneIcon = TONE_ICONS[tone];\n\n    return (\n        <span\n            role={live ? 'status' : undefined}\n            aria-label={live && !ariaLabelledBy ? ariaLabel : undefined}\n            aria-labelledby={live ? ariaLabelledBy : undefined}\n            aria-busy={busy || undefined}\n            className={`inline-flex items-center gap-[6px] h-[28px] max-w-full min-w-0 pl-[8px] pr-[10px] rounded-full overflow-hidden whitespace-nowrap text-[12px] font-medium ${BORDER} ${TONE_CLASSES[tone]} ${className}`}\n        >\n            <span\n                aria-hidden=\"true\"\n                className={`inline-flex shrink-0 items-center justify-center size-[16px] ${busy ? '' : '[&_svg]:size-full!'}`}\n            >\n                {busy ? <Spinner size=\"xxxsmall\" /> : (icon ?? <ToneIcon size={16} />)}\n            </span>\n            <span className=\"min-w-0 overflow-hidden text-ellipsis\">\n                {label}\n                {detail ? (\n                    <>\n                        {' · '}\n                        <span className=\"font-mono\">{detail}</span>\n                    </>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default StatusPill;\nexport { StatusPill };\n"],"names":["TONE_CLASSES","TONE_ICONS","CheckCircleFilled","InfoCircleFilled","WarningCircleFilled","ErrorCircleFilled","BORDER","StatusPill","label","detail","tone","icon","busy","live","ariaLabel","ariaLabelledBy","className","ToneIcon","jsxs","jsx","Spinner","Fragment"],"mappings":";;;;;;AA0BA,MAAMA,IAA+C;AAAA,EACjD,SACI;AAAA,EACJ,SACI;AAAA,EACJ,SACI;AAAA,EACJ,OAAO;AACX,GAEMC,IAA0D;AAAA,EAC5D,SAASC;AAAA,EACT,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACX,GAEMC,IACF,kKAEEC,IAAwC,CAAC;AAAA,EAC3C,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAWhB,EAAWS,CAAI;AAEhC,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAML,IAAO,WAAW;AAAA,MACxB,cAAYA,KAAQ,CAACE,IAAiBD,IAAY;AAAA,MAClD,mBAAiBD,IAAOE,IAAiB;AAAA,MACzC,aAAWH,KAAQ;AAAA,MACnB,WAAW,4JAA4JN,CAAM,IAAIN,EAAaU,CAAI,CAAC,IAAIM,CAAS;AAAA,MAEhN,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,eAAY;AAAA,YACZ,WAAW,gEAAgEP,IAAO,KAAK,oBAAoB;AAAA,YAE1G,UAAAA,IAAO,gBAAAO,EAACC,GAAA,EAAQ,MAAK,YAAW,IAAMT,KAAQ,gBAAAQ,EAACF,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEvE,gBAAAC,EAAC,QAAA,EAAK,WAAU,yCACX,UAAA;AAAA,UAAAV;AAAA,UACAC,IACG,gBAAAS,EAAAG,GAAA,EACK,UAAA;AAAA,YAAA;AAAA,YACD,gBAAAF,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAV,EAAA,CAAO;AAAA,UAAA,EAAA,CACxC,IACA;AAAA,QAAA,EAAA,CACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}