@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/LoadingBar.js

@@ -0,0 +1,85 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { useAdoptedStyleSheet as f } from "./useAdoptedStyleSheet.js";
+const s = "malachite-loading-bar-sweep", e = "malachite-loading-bar-band", o = "--malachite-loading-bar-track", r = "--malachite-loading-bar-band", l = 40, A = `
+@keyframes ${s} {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(${100 / (l / 100)}%); }
+}
+.${e} {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: ${l}%;
+    /* Fading to the track colour at both ends (rather than to transparent) means the
+       band has no visible edge, and avoids the muddy interpolation through
+       transparent black. */
+    background-image: linear-gradient(90deg, var(${o}) 0%, var(${r}) 50%, var(${o}) 100%);
+    animation: ${s} 1.3s linear infinite;
+}
+/* Looping motion can cause genuine nausea and dizziness for users with vestibular
+   disorders, and an indeterminate bar loops with nothing to look away from. Stop the
+   sweep but keep the bar obviously busy: a solid full-width line. Freezing the 40% band
+   in place instead would read as "40% complete", which this component never means. */
+@media (prefers-reduced-motion: reduce) {
+    .${e} {
+        animation: none;
+        width: 100%;
+        background-image: none;
+        background-color: var(${r});
+    }
+}`, k = {
+  small: 2,
+  medium: 3,
+  large: 6
+}, v = {
+  default: "var(--malachite-accent-background, rgb(0, 175, 102))",
+  warning: "var(--malachite-warning-background, rgb(241, 139, 10))",
+  error: "var(--malachite-error-background, rgb(197, 63, 63))"
+}, w = 35, E = (a) => `color-mix(in srgb, ${a} ${w}%, white)`, _ = ({
+  active: a = !0,
+  variant: c = "default",
+  size: m = "medium",
+  "aria-label": b = "Loading",
+  "aria-labelledby": h,
+  className: u = "",
+  style: g = {}
+}) => {
+  const n = p(null);
+  f(n, A, "malachite-loading-bar-keyframes");
+  const t = v[c], i = E(t);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: n,
+      role: a ? "progressbar" : void 0,
+      "aria-busy": a || void 0,
+      "aria-hidden": a ? void 0 : !0,
+      "aria-label": a ? b : void 0,
+      "aria-labelledby": a ? h : void 0,
+      className: u,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: `${k[m]}px`,
+        backgroundColor: i,
+        // Hidden but height-preserving when idle, so toggling the bar
+        // never nudges the content below it. The opacity transition lets
+        // a consumer fade it out when work finishes rather than cutting.
+        opacity: a ? 1 : 0,
+        transition: "opacity 250ms ease",
+        [o]: i,
+        [r]: t,
+        ...g
+      },
+      children: a && /* @__PURE__ */ d("div", { className: e })
+    }
+  );
+};
+export {
+  _ as LoadingBar,
+  _ as default
+};
+//# sourceMappingURL=LoadingBar.js.map

package/dist/components/LoadingBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.js","sources":["../../src/components/LoadingBar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport type LoadingBarVariant = 'default' | 'warning' | 'error';\n\nexport type LoadingBarSize = 'small' | 'medium' | 'large';\n\nexport interface LoadingBarProps {\n    /**\n     * Whether the bar is animating. When false the line is hidden but its height\n     * is preserved, so toggling it doesn't shift the layout underneath.\n     */\n    active?: boolean;\n    /**\n     * Semantic colour role. Colours come from theme tokens by design — there is no\n     * free-form colour prop, so a consumer can't paint the bar off-palette. To\n     * restyle a variant, override its tokens via `applyTheme` / `applyCustomTheme`.\n     */\n    variant?: LoadingBarVariant;\n    /** Line thickness. Fixed steps rather than a free px value, to keep bars consistent. */\n    size?: LoadingBarSize;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n// Indeterminate: a full-width pale line with the variant colour sweeping horizontally\n// across it, for work of unknown duration (e.g. a background refetch). Distinct from\n// Progress, which fills to a known value.\nconst KEYFRAME_NAME = 'malachite-loading-bar-sweep';\nconst BAND_CLASS = 'malachite-loading-bar-band';\n// The band's colours vary per variant, but its stylesheet rules are shared. Pass the two\n// resolved colours in as custom properties so the rules below can build both the\n// animated gradient and the reduced-motion fallback. Component-internal, NOT theme\n// tokens — consumers never set these.\nconst TRACK_VAR = '--malachite-loading-bar-track';\nconst BAND_VAR = '--malachite-loading-bar-band';\n\n// Width of the travelling band, as a fraction of the bar.\nconst BAND_WIDTH_PERCENT = 40;\n// Translate the band from fully off the left edge to fully off the right edge.\n// translateX percentages resolve against the BAND's own width, so clearing the full bar\n// means moving 100% / 0.4 = 250% of the band.\n//\n// This deliberately does NOT animate `background-position` on a single oversized\n// gradient. A percentage background-position resolves against (container - image), so at\n// `background-size: 300%` that is -2W: the image travels 4W while the highlight is only\n// inside the visible window for a quarter of the cycle, leaving the bar looking static\n// for the rest and then snapping back. Translating a real element sweeps uniformly and\n// stays on the compositor.\n//\n// The band is styled here rather than inline because a `prefers-reduced-motion` media\n// query lives in a stylesheet and cannot override inline styles.\nconst KEYFRAMES_CSS = `\n@keyframes ${KEYFRAME_NAME} {\n    from { transform: translateX(-100%); }\n    to { transform: translateX(${100 / (BAND_WIDTH_PERCENT / 100)}%); }\n}\n.${BAND_CLASS} {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: ${BAND_WIDTH_PERCENT}%;\n    /* Fading to the track colour at both ends (rather than to transparent) means the\n       band has no visible edge, and avoids the muddy interpolation through\n       transparent black. */\n    background-image: linear-gradient(90deg, var(${TRACK_VAR}) 0%, var(${BAND_VAR}) 50%, var(${TRACK_VAR}) 100%);\n    animation: ${KEYFRAME_NAME} 1.3s linear infinite;\n}\n/* Looping motion can cause genuine nausea and dizziness for users with vestibular\n   disorders, and an indeterminate bar loops with nothing to look away from. Stop the\n   sweep but keep the bar obviously busy: a solid full-width line. Freezing the 40% band\n   in place instead would read as \"40% complete\", which this component never means. */\n@media (prefers-reduced-motion: reduce) {\n    .${BAND_CLASS} {\n        animation: none;\n        width: 100%;\n        background-image: none;\n        background-color: var(${BAND_VAR});\n    }\n}`;\n// Kept local to the component for now — these are line weights, not a shared scale,\n// so they don't warrant a theme token group until something else needs them.\nconst SIZE_HEIGHTS: Record<LoadingBarSize, number> = {\n    small: 2,\n    medium: 3,\n    large: 6,\n};\n\n// One base token per semantic role. Inline fallbacks cover the window before the theme\n// is applied / outside a theme root.\nconst VARIANT_BASE: Record<LoadingBarVariant, string> = {\n    default: 'var(--malachite-accent-background, rgb(0, 175, 102))',\n    warning: 'var(--malachite-warning-background, rgb(241, 139, 10))',\n    error: 'var(--malachite-error-background, rgb(197, 63, 63))',\n};\n\n// The pale track colour is DERIVED from the variant's base by mixing toward white,\n// rather than being a second hand-picked token per variant. Hand-picking ships\n// invisible sweeps: the status *text* tokens sit only ~5-15 perceived luminance from\n// their own background colour, so a warning/error bar barely appeared to move at all.\n// Deriving keeps every variant at a comparable delta and stays on-palette for any\n// variant added later.\n//\n// Lower share of base = paler track = higher contrast against the band. This is the one\n// knob to turn if the sweep reads too subtle or too washed out. At 35% the\n// perceived-luminance gap is ~91 (default), ~65 (warning), ~99 (error).\nconst TRACK_BASE_SHARE_PERCENT = 35;\nconst trackTintFor = (base: string): string =>\n    `color-mix(in srgb, ${base} ${TRACK_BASE_SHARE_PERCENT}%, white)`;\n\nconst LoadingBar: React.FC<LoadingBarProps> = ({\n    active = true,\n    variant = 'default',\n    size = 'medium',\n    'aria-label': ariaLabel = 'Loading',\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style = {},\n}) => {\n    const ref = useRef<HTMLDivElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-loading-bar-keyframes');\n\n    // Pale track with the saturated colour sweeping over it. Reads noticeably cleaner\n    // than the inverse (saturated track, pale band), which looks washed out at these\n    // line weights.\n    const band = VARIANT_BASE[variant];\n    const track = trackTintFor(band);\n\n    return (\n        <div\n            ref={ref}\n            // Idle is a height-preserving placeholder, not a live indicator — take it\n            // out of the a11y tree entirely so a hidden bar is never announced as\n            // \"Loading\". Mirrors Skeleton's aria-busy + aria-hidden pairing.\n            role={active ? 'progressbar' : undefined}\n            aria-busy={active || undefined}\n            aria-hidden={active ? undefined : true}\n            aria-label={active ? ariaLabel : undefined}\n            aria-labelledby={active ? ariaLabelledBy : undefined}\n            className={className}\n            // Cast because CSSProperties has no shape for custom properties.\n            style={\n                {\n                    position: 'relative',\n                    overflow: 'hidden',\n                    width: '100%',\n                    height: `${SIZE_HEIGHTS[size]}px`,\n                    backgroundColor: track,\n                    // Hidden but height-preserving when idle, so toggling the bar\n                    // never nudges the content below it. The opacity transition lets\n                    // a consumer fade it out when work finishes rather than cutting.\n                    opacity: active ? 1 : 0,\n                    transition: 'opacity 250ms ease',\n                    [TRACK_VAR]: track,\n                    [BAND_VAR]: band,\n                    ...style,\n                } as React.CSSProperties\n            }\n        >\n            {/* Mounted only while active, so an idle bar keeps no animation running. */}\n            {active && <div className={BAND_CLASS} />}\n        </div>\n    );\n};\n\nexport default LoadingBar;\nexport { LoadingBar };\n"],"names":["KEYFRAME_NAME","BAND_CLASS","TRACK_VAR","BAND_VAR","BAND_WIDTH_PERCENT","KEYFRAMES_CSS","SIZE_HEIGHTS","VARIANT_BASE","TRACK_BASE_SHARE_PERCENT","trackTintFor","base","LoadingBar","active","variant","size","ariaLabel","ariaLabelledBy","className","style","ref","useRef","useAdoptedStyleSheet","band","track","jsx"],"mappings":";;;AA8BA,MAAMA,IAAgB,+BAChBC,IAAa,8BAKbC,IAAY,iCACZC,IAAW,gCAGXC,IAAqB,IAcrBC,IAAgB;AAAA,aACTL,CAAa;AAAA;AAAA,iCAEO,OAAOI,IAAqB,IAAI;AAAA;AAAA,GAE9DH,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKAG,CAAkB;AAAA;AAAA;AAAA;AAAA,mDAIoBF,CAAS,aAAaC,CAAQ,cAAcD,CAAS;AAAA,iBACvFF,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOvBC,CAAU;AAAA;AAAA;AAAA;AAAA,gCAIeE,CAAQ;AAAA;AAAA,IAKlCG,IAA+C;AAAA,EACjD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAIMC,IAAkD;AAAA,EACpD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX,GAYMC,IAA2B,IAC3BC,IAAe,CAACC,MAClB,sBAAsBA,CAAI,IAAIF,CAAwB,aAEpDG,IAAwC,CAAC;AAAA,EAC3C,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAcC,IAAY;AAAA,EAC1B,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAAMC,EAAuB,IAAI;AACvC,EAAAC,EAAqBF,GAAKd,GAAe,iCAAiC;AAK1E,QAAMiB,IAAOf,EAAaM,CAAO,GAC3BU,IAAQd,EAAaa,CAAI;AAE/B,SACI,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAL;AAAA,MAIA,MAAMP,IAAS,gBAAgB;AAAA,MAC/B,aAAWA,KAAU;AAAA,MACrB,eAAaA,IAAS,SAAY;AAAA,MAClC,cAAYA,IAASG,IAAY;AAAA,MACjC,mBAAiBH,IAASI,IAAiB;AAAA,MAC3C,WAAAC;AAAA,MAEA,OACI;AAAA,QACI,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ,GAAGX,EAAaQ,CAAI,CAAC;AAAA,QAC7B,iBAAiBS;AAAA;AAAA;AAAA;AAAA,QAIjB,SAASX,IAAS,IAAI;AAAA,QACtB,YAAY;AAAA,QACZ,CAACV,CAAS,GAAGqB;AAAA,QACb,CAACpB,CAAQ,GAAGmB;AAAA,QACZ,GAAGJ;AAAA,MAAA;AAAA,MAKV,UAAAN,KAAU,gBAAAY,EAAC,OAAA,EAAI,WAAWvB,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAGnD;"}

package/dist/components/LoadingInput.js

@@ -0,0 +1,29 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+const t = (e) => {
+  switch (e) {
+    case "small":
+      return "h-8";
+    case "medium":
+      return "h-10";
+    case "large":
+      return "h-12";
+    default:
+      return "h-10";
+  }
+}, c = ({ size: e = "medium", helperText: r = !1, helperTextMarginTop: d = !1, heightClass: l }) => (
+  // Decorative height placeholder — kept out of the a11y tree so it is not announced
+  // as an unlabelled box (same as Skeleton).
+  /* @__PURE__ */ s("div", { className: "w-full", "aria-busy": "true", "aria-hidden": "true", children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: `w-full ${l ?? t(e)} rounded-xl border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-border)] flex items-center justify-center shadow-[var(--malachite-shadow-default)]`
+      }
+    ),
+    r && /* @__PURE__ */ a("div", { className: `${d ? "mt-1 " : ""}pl-2 text-[13px]`, children: /* @__PURE__ */ a("span", { className: "inline-block h-2.5 w-40 rounded-md bg-[var(--malachite-card-border)] align-middle" }) })
+  ] })
+);
+export {
+  c as default
+};
+//# sourceMappingURL=LoadingInput.js.map

package/dist/components/LoadingInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingInput.js","sources":["../../src/components/LoadingInput.tsx"],"sourcesContent":["import { InputSize } from './Input/types';\n\nconst getHeightClass = (size: InputSize): string => {\n    switch (size) {\n        case 'small':\n            return 'h-8';\n        case 'medium':\n            return 'h-10';\n        case 'large':\n            return 'h-12';\n        default:\n            return 'h-10';\n    }\n};\n\nconst LoadingInput: React.FC<{\n    size?: InputSize;\n    helperText?: boolean;\n    helperTextMarginTop?: boolean;\n    heightClass?: string;\n}> = ({ size = 'medium', helperText = false, helperTextMarginTop = false, heightClass }) => {\n    return (\n        // Decorative height placeholder — kept out of the a11y tree so it is not announced\n        // as an unlabelled box (same as Skeleton).\n        <div className=\"w-full\" aria-busy=\"true\" aria-hidden=\"true\">\n            <div\n                className={`w-full ${heightClass ?? getHeightClass(size)} rounded-xl border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-border)] flex items-center justify-center shadow-[var(--malachite-shadow-default)]`}\n            />\n            {helperText && (\n                <div className={`${helperTextMarginTop ? 'mt-1 ' : ''}pl-2 text-[13px]`}>\n                    <span className=\"inline-block h-2.5 w-40 rounded-md bg-[var(--malachite-card-border)] align-middle\" />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default LoadingInput;\n"],"names":["getHeightClass","size","LoadingInput","helperText","helperTextMarginTop","heightClass","jsx"],"mappings":";AAEA,MAAMA,IAAiB,CAACC,MAA4B;AAChD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAKD,CAAC,EAAE,MAAAD,IAAO,UAAU,YAAAE,IAAa,IAAO,qBAAAC,IAAsB,IAAO,aAAAC;;;oBAIjE,OAAA,EAAI,WAAU,UAAS,aAAU,QAAO,eAAY,QACjD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,UAAUD,KAAeL,EAAeC,CAAI,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3DE,KACG,gBAAAG,EAAC,OAAA,EAAI,WAAW,GAAGF,IAAsB,UAAU,EAAE,oBACjD,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,qFAAoF,EAAA,CACxG;AAAA,EAAA,EAAA,CAER;AAAA;"}

package/dist/components/MalachiteContext.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ShadowRootWrapper as h } from "../ShadowRootWrapper.js";
+const i = ({
+  children: r,
+  className: e = "",
+  fillHeight: o = !1
+}) => /* @__PURE__ */ t(
+  h,
+  {
+    fillHeight: o,
+    hostStyle: o ? { height: "100%" } : void 0,
+    children: /* @__PURE__ */ t("div", { className: e, style: o ? { height: "100%" } : void 0, children: r })
+  }
+);
+export {
+  i as MalachiteContext
+};
+//# sourceMappingURL=MalachiteContext.js.map

package/dist/components/MalachiteContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MalachiteContext.js","sources":["../../src/components/MalachiteContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\n\ninterface MalachiteContextProps {\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Stretches the shadow host, and every plain div between it and `children`, to 100% of\n     * the height available from this component's own parent. Without it, the host sizes to\n     * its content: a percentage height set further down (inside `children`) has nothing\n     * non-`auto` to resolve against, and a chain of plain `<div>`s does not propagate a\n     * parent's height to its children on its own. Off by default: every existing consumer\n     * relies on the host hugging its content, and turning this on for all of them would\n     * change how much space they take up.\n     */\n    fillHeight?: boolean;\n}\n\n/**\n * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.\n * Use this to wrap groups of Malachite components instead of each component managing its own Shadow DOM.\n *\n * @example\n * <MalachiteContext>\n *   <Button variant=\"filled\">Click me</Button>\n *   <Card>\n *     <CardContent>Hello world</CardContent>\n *   </Card>\n * </MalachiteContext>\n */\nexport const MalachiteContext: React.FC<MalachiteContextProps> = ({\n    children,\n    className = '',\n    fillHeight = false,\n}) => {\n    return (\n        <ShadowRootWrapper\n            fillHeight={fillHeight}\n            hostStyle={fillHeight ? { height: '100%' } : undefined}\n        >\n            <div className={className} style={fillHeight ? { height: '100%' } : undefined}>\n                {children}\n            </div>\n        </ShadowRootWrapper>\n    );\n};\n\nexport default MalachiteContext;\n"],"names":["MalachiteContext","children","className","fillHeight","jsx","ShadowRootWrapper"],"mappings":";;AA8BO,MAAMA,IAAoD,CAAC;AAAA,EAC9D,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AACjB,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,YAAAF;AAAA,IACA,WAAWA,IAAa,EAAE,QAAQ,WAAW;AAAA,IAE7C,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAAF,GAAsB,OAAOC,IAAa,EAAE,QAAQ,WAAW,QAC/D,UAAAF,EAAA,CACL;AAAA,EAAA;AAAA;"}

package/dist/components/Modal.js

@@ -0,0 +1,212 @@
+import { jsx as r, jsxs as a, Fragment as D } from "react/jsx-runtime";
+import { useId as Z, useState as f, useRef as i, useEffect as j, useCallback as P } from "react";
+import { createPortal as J } from "react-dom";
+import { ShadowRootWrapper as Q } from "../ShadowRootWrapper.js";
+import ee from "./CustomIcons/DismissIcon.js";
+import { getDeepActiveElement as re } from "./activeElement.js";
+import { GLASS_SURFACE_STYLE as ae } from "./glassSurface.js";
+import { MODAL_TRAY_BACKGROUND as le, MODAL_TRAY_CAPTION_COLOR as ie } from "./modalTray.js";
+import { useOverlayBehaviour as te, OVERLAY_ICON_BUTTON_CLASSES as ne } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as oe, overlayIdentity as V } from "./portalOverlay.js";
+const Y = {
+  small: "420px",
+  medium: "612px",
+  large: "760px"
+}, x = 200, be = ({
+  open: s,
+  onClose: c,
+  title: d,
+  subtitle: m,
+  icon: h,
+  headerExtra: v,
+  titleAdornment: b,
+  tray: e,
+  headerDivider: g = !1,
+  footer: N,
+  size: w = "medium",
+  showCloseButton: y = !0,
+  closeOnOverlayClick: B = !0,
+  bodyPadding: R = !0,
+  role: F = "dialog",
+  "aria-label": U,
+  "aria-labelledby": A,
+  "aria-describedby": W,
+  busy: t = !1,
+  children: T
+}) => {
+  const I = Z(), [u, _] = f(!1), [z, k] = f(!1), [G, S] = f(!1), E = i(null), n = i(null), l = i(null), O = i(t), C = i(c);
+  j(() => {
+    O.current = t, C.current = c;
+  }, [t, c]);
+  const $ = P(() => {
+    O.current || C.current();
+  }, []), L = i(null), {
+    ref: M,
+    isTopmost: q,
+    zIndex: H,
+    elevated: K
+  } = te({
+    open: s,
+    onClose: c,
+    hostRef: L
+  }), X = P(
+    (o) => {
+      E.current = o, M(o);
+    },
+    [M]
+  );
+  return j(() => {
+    var o;
+    if (s)
+      k(!0), S(!1), l.current && (clearTimeout(l.current), l.current = null), n.current = requestAnimationFrame(() => {
+        n.current = null, _(!0);
+      });
+    else {
+      const p = re();
+      p && ((o = E.current) != null && o.contains(p)) && p.blur(), S(!0), _(!1), l.current = setTimeout(() => {
+        l.current = null, k(!1);
+      }, x);
+    }
+    return () => {
+      n.current !== null && (cancelAnimationFrame(n.current), n.current = null), l.current && (clearTimeout(l.current), l.current = null);
+    };
+  }, [s]), z ? J(
+    // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise
+    // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.
+    /* @__PURE__ */ r(
+      Q,
+      {
+        hostRef: L,
+        hostStyle: { position: "relative", zIndex: H },
+        hostProps: K ? { ...V("modal"), [oe]: "" } : V("modal"),
+        children: /* @__PURE__ */ a(
+          "div",
+          {
+            className: `fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${s ? "" : "pointer-events-none"}`,
+            children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  onClick: B ? $ : void 0,
+                  className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${u ? "opacity-100" : "opacity-0"}`
+                }
+              ),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  ref: X,
+                  role: F,
+                  "aria-hidden": G ? "true" : void 0,
+                  "aria-modal": q ? "true" : void 0,
+                  "aria-describedby": [W, e != null && e.caption ? I : null].filter(Boolean).join(" ") || void 0,
+                  "aria-busy": t || void 0,
+                  tabIndex: -1,
+                  "aria-label": A ? void 0 : U ?? (typeof d == "string" ? d : void 0),
+                  "aria-labelledby": A,
+                  className: e ? "relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]" : "relative flex max-h-full w-full 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-glow,var(--malachite-shadow-lg))]",
+                  style: {
+                    maxWidth: e ? `calc(${Y[w]} + 8px)` : Y[w],
+                    ...e ? {
+                      backgroundColor: le[e.tone ?? "neutral"]
+                    } : {},
+                    // Inline: Tailwind scale/translate utilities silently break inside
+                    // shadow roots (see CLAUDE.md Shadow DOM caveats).
+                    transform: u ? "scale(1)" : "scale(0.96)",
+                    opacity: u ? 1 : 0,
+                    transition: `transform ${x}ms ease-out, opacity ${x}ms ease-out`
+                  },
+                  children: [
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        className: e ? "flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]" : "contents",
+                        children: [
+                          /* @__PURE__ */ a(
+                            "div",
+                            {
+                              className: `flex gap-[20px] p-[20px] ${m ? "items-start" : "items-center"} ${g ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                              children: [
+                                /* @__PURE__ */ a("div", { className: "flex h-[18px] min-w-0 flex-1 items-center gap-[12px]", children: [
+                                  /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-[8px]", children: [
+                                    h ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: h }) : null,
+                                    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col gap-[4px]", children: [
+                                      /* @__PURE__ */ r("span", { className: "truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]", children: d }),
+                                      m ? /* @__PURE__ */ r("span", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: m }) : null
+                                    ] })
+                                  ] }),
+                                  b ? /* @__PURE__ */ a(D, { children: [
+                                    /* @__PURE__ */ r(
+                                      "span",
+                                      {
+                                        "aria-hidden": "true",
+                                        className: "h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center overflow-hidden", children: b })
+                                  ] }) : null
+                                ] }),
+                                v ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: v }) : null,
+                                y ? /* @__PURE__ */ r(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    "aria-label": "Close",
+                                    onClick: $,
+                                    disabled: t,
+                                    className: ne,
+                                    children: /* @__PURE__ */ r(ee, { size: 10 })
+                                  }
+                                ) : null
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ r(
+                            "div",
+                            {
+                              className: `min-h-0 flex-1 overflow-y-auto ${R ? "px-[20px]" : ""}`,
+                              children: R ? /* @__PURE__ */ r("div", { className: `pb-[20px] ${g ? "pt-[18px]" : ""}`, children: T }) : T
+                            }
+                          ),
+                          N ? /* @__PURE__ */ r(
+                            "div",
+                            {
+                              className: "flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]",
+                              style: ae,
+                              children: N
+                            }
+                          ) : null
+                        ]
+                      }
+                    ),
+                    e != null && e.caption ? /* @__PURE__ */ r(
+                      "div",
+                      {
+                        id: I,
+                        className: "flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]",
+                        style: { color: ie[e.tone ?? "neutral"] },
+                        children: /* @__PURE__ */ a("span", { children: [
+                          e.caption.label ? /* @__PURE__ */ a(D, { children: [
+                            /* @__PURE__ */ r("span", { className: "font-medium", children: e.caption.label }),
+                            " "
+                          ] }) : null,
+                          e.caption.message
+                        ] })
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  be as Modal,
+  be as default
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { getDeepActiveElement } from './activeElement';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\nimport { MODAL_TRAY_BACKGROUND, MODAL_TRAY_CAPTION_COLOR, type ModalTrayTone } from './modalTray';\nimport { OVERLAY_ICON_BUTTON_CLASSES, useOverlayBehaviour } from './overlayBehaviour';\nimport { OVERLAY_ELEVATED_ATTR, overlayIdentity } from './portalOverlay';\n\nexport type ModalSize = 'small' | 'medium' | 'large';\n\n/** Widths keyed to the size union — a raw `width` prop would let a consumer off the scale. */\nconst SIZE_MAX_WIDTH: Record<ModalSize, string> = {\n    small: '420px',\n    medium: '612px',\n    large: '760px',\n};\n\nconst TRANSITION_MS = 200;\n\nexport interface ModalProps {\n    open: boolean;\n    /** Dismiss handler — close button, ESC, or overlay click. */\n    onClose: () => void;\n    title: React.ReactNode;\n    /** Secondary line beneath the title. */\n    subtitle?: React.ReactNode;\n    /** Leading header slot, typically an icon or logo. */\n    icon?: React.ReactNode;\n    /** Content pinned right in the header, before the close button. */\n    headerExtra?: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    tray?: { tone?: ModalTrayTone; caption?: { label?: string; message: string } };\n    /** Divider under the header. Default: false. */\n    headerDivider?: boolean;\n    /** Pinned action row below the scrolling body. */\n    footer?: React.ReactNode;\n    size?: ModalSize;\n    /** Default: true. */\n    showCloseButton?: boolean;\n    /** Default: true. Turn off for a dialog whose choice must be made deliberately. */\n    closeOnOverlayClick?: boolean;\n    /** Whether the body gets default padding. Default: true. */\n    bodyPadding?: boolean;\n    /**\n     * `alertdialog` for a dialog interrupting the user over a consequential choice — it\n     * tells assistive tech to announce the body, not just the name.\n     */\n    role?: 'dialog' | 'alertdialog';\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    /** ID of the element describing what the dialog is asking. */\n    'aria-describedby'?: string;\n    /**\n     * Work is in flight: suppresses the pointer dismissal routes and announces the busy\n     * state. Never ESC — that is the only guaranteed keyboard exit from a focus trap, so it\n     * always reaches `onClose` and whether to abort is left to the caller.\n     */\n    busy?: boolean;\n    children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n    open,\n    onClose,\n    title,\n    subtitle,\n    icon,\n    headerExtra,\n    titleAdornment,\n    tray,\n    headerDivider = false,\n    footer,\n    size = 'medium',\n    showCloseButton = true,\n    closeOnOverlayClick = true,\n    bodyPadding = true,\n    role = 'dialog',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    busy = false,\n    children,\n}) => {\n    const captionId = useId();\n    const [isVisible, setIsVisible] = useState(false);\n    // Starts false even when `open` does: portals are unsupported on the server, so the\n    // dialog must reach `document.body` from the client effect below and nowhere else.\n    const [isMounted, setIsMounted] = useState(false);\n    // Distinct from `!isVisible`, which is also false on the frame the dialog opens.\n    const [isExiting, setIsExiting] = useState(false);\n    const panelRef = useRef<HTMLElement | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const unmountTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const busyRef = useRef(busy);\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n        busyRef.current = busy;\n        onCloseRef.current = onClose;\n    }, [busy, onClose]);\n\n    // Pointer routes only. Removing ESC too would leave a focus-trapped keyboard user no\n    // exit while a request hangs (WCAG 2.1.2), so ESC always reaches onClose.\n    const dismissByPointer = useCallback(() => {\n        if (!busyRef.current) {\n            onCloseRef.current();\n        }\n    }, []);\n    const hostRef = useRef<HTMLDivElement | null>(null);\n    // No prop of its own: it stays in the base band unless a SidePanel elevated the stack,\n    // and follows it up when one has.\n    const {\n        ref: takePanelRef,\n        isTopmost,\n        zIndex,\n        elevated,\n    } = useOverlayBehaviour({\n        open,\n        onClose,\n        hostRef,\n    });\n    const handlePanelRef = useCallback(\n        (node: HTMLElement | null) => {\n            panelRef.current = node;\n            takePanelRef(node);\n        },\n        [takePanelRef],\n    );\n\n    // Mounted outlives `open` by one transition, so the dialog can animate out.\n    useEffect(() => {\n        if (open) {\n            setIsMounted(true);\n            setIsExiting(false);\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            // A browser refuses `aria-hidden` on a subtree still holding focus, so the\n            // attribute waits for this point — after useOverlayBehaviour's cleanup has\n            // returned focus to the trigger — and blurs what is left if the trigger has gone.\n            const active = getDeepActiveElement();\n            if (active && panelRef.current?.contains(active)) {\n                active.blur();\n            }\n            setIsExiting(true);\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    return createPortal(\n        // Host carries the stacking context — ShadowRootWrapper's `isolation` would otherwise\n        // flatten our z-index. Not promoted to the top layer, so host dialogs can cover us.\n        <ShadowRootWrapper\n            hostRef={hostRef}\n            hostStyle={{ position: 'relative', zIndex }}\n            hostProps={\n                elevated\n                    ? { ...overlayIdentity('modal'), [OVERLAY_ELEVATED_ATTR]: '' }\n                    : overlayIdentity('modal')\n            }\n        >\n            {/* The exit transition outlives `open`, so a closed-but-mounted dialog has to stop\n                taking clicks and leave the a11y tree — a faded opacity does neither. */}\n            <div\n                className={`fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${\n                    open ? '' : 'pointer-events-none'\n                }`}\n            >\n                <div\n                    aria-hidden=\"true\"\n                    onClick={closeOnOverlayClick ? dismissByPointer : undefined}\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={role}\n                    aria-hidden={isExiting ? 'true' : undefined}\n                    aria-modal={isTopmost ? 'true' : undefined}\n                    aria-describedby={\n                        [ariaDescribedBy, tray?.caption ? captionId : null]\n                            .filter(Boolean)\n                            .join(' ') || undefined\n                    }\n                    aria-busy={busy || undefined}\n                    tabIndex={-1}\n                    aria-label={\n                        ariaLabelledBy\n                            ? undefined\n                            : (ariaLabel ?? (typeof title === 'string' ? title : undefined))\n                    }\n                    aria-labelledby={ariaLabelledBy}\n                    className={\n                        tray\n                            ? 'relative flex max-h-full w-full flex-col gap-[4px] rounded-[20px] p-[4px] text-[var(--malachite-card-foreground)] outline-none [box-shadow:var(--malachite-shadow-glow,var(--malachite-shadow-lg))]'\n                            : 'relative flex max-h-full w-full 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-glow,var(--malachite-shadow-lg))]'\n                    }\n                    style={{\n                        maxWidth: tray\n                            ? `calc(${SIZE_MAX_WIDTH[size]} + 8px)`\n                            : SIZE_MAX_WIDTH[size],\n                        ...(tray\n                            ? {\n                                  backgroundColor: MODAL_TRAY_BACKGROUND[tray.tone ?? 'neutral'],\n                              }\n                            : {}),\n                        // Inline: Tailwind scale/translate utilities silently break inside\n                        // shadow roots (see CLAUDE.md Shadow DOM caveats).\n                        transform: isVisible ? 'scale(1)' : 'scale(0.96)',\n                        opacity: isVisible ? 1 : 0,\n                        transition: `transform ${TRANSITION_MS}ms ease-out, opacity ${TRANSITION_MS}ms ease-out`,\n                    }}\n                >\n                    <div\n                        className={\n                            tray\n                                ? 'flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] [box-shadow:var(--malachite-shadow-glow-lg,var(--malachite-shadow-xl))]'\n                                : 'contents'\n                        }\n                    >\n                        <div\n                            className={`flex gap-[20px] p-[20px] ${\n                                subtitle ? 'items-start' : 'items-center'\n                            } ${\n                                headerDivider\n                                    ? 'border-0 border-b border-solid border-[var(--malachite-card-border)]'\n                                    : ''\n                            }`}\n                        >\n                            <div className=\"flex h-[18px] min-w-0 flex-1 items-center gap-[12px]\">\n                                <div className=\"flex min-w-0 items-center gap-[8px]\">\n                                    {icon ? (\n                                        <span className=\"flex shrink-0 items-center\">{icon}</span>\n                                    ) : null}\n                                    <div className=\"flex min-w-0 flex-col gap-[4px]\">\n                                        <span className=\"truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]\">\n                                            {title}\n                                        </span>\n                                        {subtitle ? (\n                                            <span className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\">\n                                                {subtitle}\n                                            </span>\n                                        ) : null}\n                                    </div>\n                                </div>\n                                {titleAdornment ? (\n                                    <>\n                                        <span\n                                            aria-hidden=\"true\"\n                                            className=\"h-[12px] w-px shrink-0 bg-[var(--malachite-card-border)]\"\n                                        />\n                                        <span className=\"flex min-w-0 items-center overflow-hidden\">\n                                            {titleAdornment}\n                                        </span>\n                                    </>\n                                ) : null}\n                            </div>\n                            {headerExtra ? (\n                                <span className=\"flex shrink-0 items-center\">{headerExtra}</span>\n                            ) : null}\n                            {showCloseButton ? (\n                                <button\n                                    type=\"button\"\n                                    aria-label=\"Close\"\n                                    onClick={dismissByPointer}\n                                    disabled={busy}\n                                    className={OVERLAY_ICON_BUTTON_CLASSES}\n                                >\n                                    <DismissIcon size={10} />\n                                </button>\n                            ) : null}\n                        </div>\n                        <div\n                            className={`min-h-0 flex-1 overflow-y-auto ${\n                                bodyPadding ? 'px-[20px]' : ''\n                            }`}\n                        >\n                            {bodyPadding ? (\n                                <div className={`pb-[20px] ${headerDivider ? 'pt-[18px]' : ''}`}>\n                                    {children}\n                                </div>\n                            ) : (\n                                children\n                            )}\n                        </div>\n                        {footer ? (\n                            <div\n                                className=\"flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]\"\n                                style={GLASS_SURFACE_STYLE}\n                            >\n                                {footer}\n                            </div>\n                        ) : null}\n                    </div>\n                    {tray?.caption ? (\n                        <div\n                            id={captionId}\n                            className=\"flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]\"\n                            style={{ color: MODAL_TRAY_CAPTION_COLOR[tray.tone ?? 'neutral'] }}\n                        >\n                            <span>\n                                {tray.caption.label ? (\n                                    <>\n                                        <span className=\"font-medium\">\n                                            {tray.caption.label}\n                                        </span>{' '}\n                                    </>\n                                ) : null}\n                                {tray.caption.message}\n                            </span>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </ShadowRootWrapper>,\n        document.body,\n    );\n};\n\nexport default Modal;\nexport { Modal };\n"],"names":["SIZE_MAX_WIDTH","TRANSITION_MS","Modal","open","onClose","title","subtitle","icon","headerExtra","titleAdornment","tray","headerDivider","footer","size","showCloseButton","closeOnOverlayClick","bodyPadding","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","busy","children","captionId","useId","isVisible","setIsVisible","useState","isMounted","setIsMounted","isExiting","setIsExiting","panelRef","useRef","frameRef","unmountTimerRef","busyRef","onCloseRef","useEffect","dismissByPointer","useCallback","hostRef","takePanelRef","isTopmost","zIndex","elevated","useOverlayBehaviour","handlePanelRef","node","active","getDeepActiveElement","_a","createPortal","jsx","ShadowRootWrapper","overlayIdentity","OVERLAY_ELEVATED_ATTR","jsxs","MODAL_TRAY_BACKGROUND","Fragment","OVERLAY_ICON_BUTTON_CLASSES","DismissIcon","GLASS_SURFACE_STYLE","MODAL_TRAY_CAPTION_COLOR"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA4C;AAAA,EAC9C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAgB,KA8ChBC,KAA8B,CAAC;AAAA,EACjC,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,iBAAAC,IAAkB;AAAA,EAClB,qBAAAC,IAAsB;AAAA,EACtB,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,oBAAoBC;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAYC,EAAA,GACZ,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAG1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1C,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAWC,EAA2B,IAAI,GAC1CC,IAAWD,EAAsB,IAAI,GACrCE,IAAkBF,EAA6C,IAAI,GACnEG,IAAUH,EAAOZ,CAAI,GACrBgB,IAAaJ,EAAO7B,CAAO;AACjC,EAAAkC,EAAU,MAAM;AACZ,IAAAF,EAAQ,UAAUf,GAClBgB,EAAW,UAAUjC;AAAA,EACzB,GAAG,CAACiB,GAAMjB,CAAO,CAAC;AAIlB,QAAMmC,IAAmBC,EAAY,MAAM;AACvC,IAAKJ,EAAQ,WACTC,EAAW,QAAA;AAAA,EAEnB,GAAG,CAAA,CAAE,GACCI,IAAUR,EAA8B,IAAI,GAG5C;AAAA,IACF,KAAKS;AAAA,IACL,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACAC,GAAoB;AAAA,IACpB,MAAA3C;AAAA,IACA,SAAAC;AAAA,IACA,SAAAqC;AAAA,EAAA,CACH,GACKM,IAAiBP;AAAA,IACnB,CAACQ,MAA6B;AAC1B,MAAAhB,EAAS,UAAUgB,GACnBN,EAAaM,CAAI;AAAA,IACrB;AAAA,IACA,CAACN,CAAY;AAAA,EAAA;AA2CjB,SAvCAJ,EAAU,MAAM;;AACZ,QAAInC;AACA,MAAA0B,EAAa,EAAI,GACjBE,EAAa,EAAK,GACdI,EAAgB,YAChB,aAAaA,EAAgB,OAAO,GACpCA,EAAgB,UAAU,OAE9BD,EAAS,UAAU,sBAAsB,MAAM;AAC3C,QAAAA,EAAS,UAAU,MACnBR,EAAa,EAAI;AAAA,MACrB,CAAC;AAAA,SACE;AAIH,YAAMuB,IAASC,GAAA;AACf,MAAID,OAAUE,IAAAnB,EAAS,YAAT,QAAAmB,EAAkB,SAASF,OACrCA,EAAO,KAAA,GAEXlB,EAAa,EAAI,GACjBL,EAAa,EAAK,GAClBS,EAAgB,UAAU,WAAW,MAAM;AACvC,QAAAA,EAAgB,UAAU,MAC1BN,EAAa,EAAK;AAAA,MACtB,GAAG5B,CAAa;AAAA,IACpB;AACA,WAAO,MAAM;AACT,MAAIiC,EAAS,YAAY,SACrB,qBAAqBA,EAAS,OAAO,GACrCA,EAAS,UAAU,OAEnBC,EAAgB,YAChB,aAAaA,EAAgB,OAAO,GACpCA,EAAgB,UAAU;AAAA,IAElC;AAAA,EACJ,GAAG,CAAChC,CAAI,CAAC,GAEJyB,IAIEwB;AAAA;AAAA;AAAA,IAGH,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,SAAAb;AAAA,QACA,WAAW,EAAE,UAAU,YAAY,QAAAG,EAAA;AAAA,QACnC,WACIC,IACM,EAAE,GAAGU,EAAgB,OAAO,GAAG,CAACC,EAAqB,GAAG,GAAA,IACxDD,EAAgB,OAAO;AAAA,QAKjC,UAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,oEACPtD,IAAO,KAAK,qBAChB;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAkD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,eAAY;AAAA,kBACZ,SAAStC,IAAsBwB,IAAmB;AAAA,kBAClD,WAAW,oGACPd,IAAY,gBAAgB,WAChC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEJ,gBAAAgC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,KAAKV;AAAA,kBACL,MAAA9B;AAAA,kBACA,eAAaa,IAAY,SAAS;AAAA,kBAClC,cAAYa,IAAY,SAAS;AAAA,kBACjC,oBACI,CAACvB,GAAiBV,KAAA,QAAAA,EAAM,UAAUa,IAAY,IAAI,EAC7C,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAAA,kBAEtB,aAAWF,KAAQ;AAAA,kBACnB,UAAU;AAAA,kBACV,cACIF,IACM,SACCD,MAAc,OAAOb,KAAU,WAAWA,IAAQ;AAAA,kBAE7D,mBAAiBc;AAAA,kBACjB,WACIT,IACM,wMACA;AAAA,kBAEV,OAAO;AAAA,oBACH,UAAUA,IACJ,QAAQV,EAAea,CAAI,CAAC,YAC5Bb,EAAea,CAAI;AAAA,oBACzB,GAAIH,IACE;AAAA,sBACI,iBAAiBgD,GAAsBhD,EAAK,QAAQ,SAAS;AAAA,oBAAA,IAEjE,CAAA;AAAA;AAAA;AAAA,oBAGN,WAAWe,IAAY,aAAa;AAAA,oBACpC,SAASA,IAAY,IAAI;AAAA,oBACzB,YAAY,aAAaxB,CAAa,wBAAwBA,CAAa;AAAA,kBAAA;AAAA,kBAG/E,UAAA;AAAA,oBAAA,gBAAAwD;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,WACI/C,IACM,iOACA;AAAA,wBAGV,UAAA;AAAA,0BAAA,gBAAA+C;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACG,WAAW,4BACPnD,IAAW,gBAAgB,cAC/B,IACIK,IACM,yEACA,EACV;AAAA,8BAEA,UAAA;AAAA,gCAAA,gBAAA8C,EAAC,OAAA,EAAI,WAAU,wDACX,UAAA;AAAA,kCAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,oCAAAlD,IACG,gBAAA8C,EAAC,QAAA,EAAK,WAAU,8BAA8B,aAAK,IACnD;AAAA,oCACJ,gBAAAI,EAAC,OAAA,EAAI,WAAU,mCACX,UAAA;AAAA,sCAAA,gBAAAJ,EAAC,QAAA,EAAK,WAAU,2GACX,UAAAhD,GACL;AAAA,sCACCC,IACG,gBAAA+C,EAAC,QAAA,EAAK,WAAU,oEACX,aACL,IACA;AAAA,oCAAA,EAAA,CACR;AAAA,kCAAA,GACJ;AAAA,kCACC5C,IACG,gBAAAgD,EAAAE,GAAA,EACI,UAAA;AAAA,oCAAA,gBAAAN;AAAA,sCAAC;AAAA,sCAAA;AAAA,wCACG,eAAY;AAAA,wCACZ,WAAU;AAAA,sCAAA;AAAA,oCAAA;AAAA,oCAEd,gBAAAA,EAAC,QAAA,EAAK,WAAU,6CACX,UAAA5C,EAAA,CACL;AAAA,kCAAA,EAAA,CACJ,IACA;AAAA,gCAAA,GACR;AAAA,gCACCD,IACG,gBAAA6C,EAAC,QAAA,EAAK,WAAU,8BAA8B,aAAY,IAC1D;AAAA,gCACHvC,IACG,gBAAAuC;AAAA,kCAAC;AAAA,kCAAA;AAAA,oCACG,MAAK;AAAA,oCACL,cAAW;AAAA,oCACX,SAASd;AAAA,oCACT,UAAUlB;AAAA,oCACV,WAAWuC;AAAA,oCAEX,UAAA,gBAAAP,EAACQ,IAAA,EAAY,MAAM,GAAA,CAAI;AAAA,kCAAA;AAAA,gCAAA,IAE3B;AAAA,8BAAA;AAAA,4BAAA;AAAA,0BAAA;AAAA,0BAER,gBAAAR;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACG,WAAW,kCACPrC,IAAc,cAAc,EAChC;AAAA,8BAEC,UAAAA,IACG,gBAAAqC,EAAC,OAAA,EAAI,WAAW,aAAa1C,IAAgB,cAAc,EAAE,IACxD,UAAAW,EAAA,CACL,IAEAA;AAAA,4BAAA;AAAA,0BAAA;AAAA,0BAGPV,IACG,gBAAAyC;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACG,WAAU;AAAA,8BACV,OAAOS;AAAA,8BAEN,UAAAlD;AAAA,4BAAA;AAAA,0BAAA,IAEL;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEPF,KAAA,QAAAA,EAAM,UACH,gBAAA2C;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,IAAI9B;AAAA,wBACJ,WAAU;AAAA,wBACV,OAAO,EAAE,OAAOwC,GAAyBrD,EAAK,QAAQ,SAAS,EAAA;AAAA,wBAE/D,4BAAC,QAAA,EACI,UAAA;AAAA,0BAAAA,EAAK,QAAQ,QACV,gBAAA+C,EAAAE,GAAA,EACI,UAAA;AAAA,4BAAA,gBAAAN,EAAC,QAAA,EAAK,WAAU,eACX,UAAA3C,EAAK,QAAQ,OAClB;AAAA,4BAAQ;AAAA,0BAAA,EAAA,CACZ,IACA;AAAA,0BACHA,EAAK,QAAQ;AAAA,wBAAA,EAAA,CAClB;AAAA,sBAAA;AAAA,oBAAA,IAEJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,IAEJ,SAAS;AAAA,EAAA,IA1KF;AA4Kf;"}