@stackone/malachite 2.75.0 → 2.77.0

package/dist/components/BaseFormComponent.js

@@ -1,74 +1,84 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useId as z } from "react";
-import F from "./CustomIcons/ArrowUpRightIcon.js";
-import $ from "./CustomIcons/InfoFilledIcon.js";
-import { FormItem as w } from "./FormItem.js";
-import { Link as O } from "./Link.js";
-import { safeHref as _ } from "./safeHref.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useId as k } from "react";
+import w from "./CustomIcons/ArrowUpRightIcon.js";
+import F from "./CustomIcons/InfoFilledIcon.js";
+import { FormItem as $ } from "./FormItem.js";
+import { Link as y } from "./Link.js";
 import x from "./Spacer.js";
-import k from "./Tooltip.js";
-import H from "./Typography/MarkdownBlock.js";
+import O from "./Tooltip.js";
+import _ from "./Typography/MarkdownBlock.js";
 import h from "./Typography/Text.js";
-import { FOCUS_RING as R } from "./focusRing.js";
-import { renderFormItemChildren as y, NO_FIELD_ERROR as L } from "./formItemState.js";
+import { FOCUS_RING as u } from "./focusRing.js";
+import { renderFormItemChildren as H, NO_FIELD_ERROR as R } from "./formItemState.js";
+import { safeHref as L } from "./safeHref.js";
 const T = 0.5, q = ({
-  id: t,
-  label: r,
-  description: i,
+  id: r,
+  label: t,
+  description: o,
   hint: l,
-  helperText: a = !1
+  helperText: s = !1
 }) => {
-  const o = `mal-${z().replace(/[^a-zA-Z0-9_-]/g, "")}-`, p = t ?? `${o}control`, f = r ? `${o}label` : void 0, n = i ? `${o}description` : void 0, m = l ? `${o}hint` : void 0, c = a ? `${o}helper` : void 0, d = [n, m, c].filter(Boolean).join(" ") || void 0;
+  const i = `mal-${k().replace(/[^a-zA-Z0-9_-]/g, "")}-`, p = r ?? `${i}control`, f = t ? `${i}label` : void 0, n = o ? `${i}description` : void 0, m = l ? `${i}hint` : void 0, c = s ? `${i}helper` : void 0, d = [n, m, c].filter(Boolean).join(" ") || void 0;
   return { controlId: p, labelId: f, descriptionId: n, hintId: m, helperTextId: c, describedBy: d };
 }, ee = ({
-  label: t,
-  hint: r,
-  rightSideContent: i,
+  label: r,
+  hint: t,
+  rightSideContent: o,
   tooltip: l,
-  name: a,
-  description: o,
+  name: s,
+  description: i,
   required: p = !1,
   requiredIndicator: f = "optional-suffix",
   loading: n = !1,
   formControl: m,
   loadingComponent: c,
   children: d,
-  controlId: u,
-  labelId: v,
+  controlId: v,
+  labelId: b,
   descriptionId: I,
   hintId: N,
-  fullWidth: b = !1
+  fullWidth: g = !1
 }) => {
-  const g = m ? /* @__PURE__ */ e(w, { control: m, name: a, children: d }) : y(d, L);
-  return /* @__PURE__ */ s(x, { direction: "vertical", size: 6, align: "stretch", fullWidth: b, children: [
-    (t || r || o || i) && /* @__PURE__ */ s(x, { direction: "vertical", size: 4, align: "stretch", children: [
-      /* @__PURE__ */ s("div", { className: "flex justify-between items-start", children: [
+  const z = m ? /* @__PURE__ */ e($, { control: m, name: s, children: d }) : H(d, R);
+  return /* @__PURE__ */ a(x, { direction: "vertical", size: 6, align: "stretch", fullWidth: g, children: [
+    (r || t || i || o) && /* @__PURE__ */ a(x, { direction: "vertical", size: 4, align: "stretch", children: [
+      /* @__PURE__ */ a("div", { className: "flex justify-between items-start", children: [
         /* @__PURE__ */ e(
           E,
           {
-            text: t,
+            text: r,
             required: p,
             requiredIndicator: f,
             tooltip: l,
-            id: v,
-            htmlFor: n ? void 0 : u
+            id: b,
+            htmlFor: n ? void 0 : v
           }
         ),
-        (r || i) && /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-          r && /* @__PURE__ */ e(B, { text: r, id: N }),
-          i && /* @__PURE__ */ e(j, { ...i })
+        (t || o) && /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
+          t && /* @__PURE__ */ e(B, { text: t, id: N }),
+          o && /* @__PURE__ */ e(j, { ...o })
         ] })
       ] }),
-      o && /* @__PURE__ */ e(D, { text: o, id: I })
+      i && /* @__PURE__ */ e(D, { text: i, id: I })
     ] }),
-    n ? c : g
+    n ? c : z
   ] });
-}, j = (t) => {
-  const r = _(t.href);
-  return r ? /* @__PURE__ */ s(
-    O,
+}, j = (r) => {
+  if (r.type === "button")
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: r.onClick,
+        className: `relative top-[3px] shrink-0 cursor-pointer whitespace-nowrap border-0 bg-transparent p-0 text-[length:var(--malachite-font-size-xsmall)] font-medium text-[var(--malachite-accent-foreground)] hover:underline ${u}`,
+        children: r.text
+      }
+    );
+  const t = L(r.href);
+  return t ? /* @__PURE__ */ a(
+    y,
     {
-      href: r,
+      href: t,
       target: "_blank",
       rel: "noopener noreferrer",
       color: "dimmed",
@@ -76,22 +86,22 @@ const T = 0.5, q = ({
       underline: !1,
       className: "shrink-0 whitespace-nowrap inline-flex items-center gap-1 relative top-[3px]",
       children: [
-        t.text,
-        /* @__PURE__ */ e(F, { size: 13 })
+        r.text,
+        /* @__PURE__ */ e(w, { size: 13 })
       ]
     }
   ) : null;
-}, B = ({ text: t, id: r }) => /* @__PURE__ */ e("span", { id: r, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "pr-2 relative top-[3px]", children: t }) }), D = ({ text: t, id: r }) => /* @__PURE__ */ e("div", { className: "pl-2 text-left", id: r, children: /* @__PURE__ */ e(H, { color: "dimmed", size: "small", text: t ?? "", omitMargin: !0 }) }), E = ({
-  text: t,
-  required: r,
-  requiredIndicator: i,
+}, B = ({ text: r, id: t }) => /* @__PURE__ */ e("span", { id: t, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "pr-2 relative top-[3px]", children: r }) }), D = ({ text: r, id: t }) => /* @__PURE__ */ e("div", { className: "pl-2 text-left", id: t, children: /* @__PURE__ */ e(_, { color: "dimmed", size: "small", text: r ?? "", omitMargin: !0 }) }), E = ({
+  text: r,
+  required: t,
+  requiredIndicator: o,
   tooltip: l,
-  id: a,
-  htmlFor: o
-}) => t ? /* @__PURE__ */ s("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e("label", { id: a, htmlFor: o, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "primary", fontWeight: "semi-bold", className: "pl-2", children: t }) }),
-  i === "optional-suffix" && !r && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "ml-1", children: "(Optional)" }) }),
-  i === "asterisk" && r && /* @__PURE__ */ e(
+  id: s,
+  htmlFor: i
+}) => r ? /* @__PURE__ */ a("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e("label", { id: s, htmlFor: i, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "primary", fontWeight: "semi-bold", className: "pl-2", children: r }) }),
+  o === "optional-suffix" && !t && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "ml-1", children: "(Optional)" }) }),
+  o === "asterisk" && t && /* @__PURE__ */ e(
     "span",
     {
       "aria-hidden": "true",
@@ -99,13 +109,13 @@ const T = 0.5, q = ({
       children: "*"
     }
   ),
-  l && /* @__PURE__ */ e(k, { text: l, placement: "right", delay: T, children: /* @__PURE__ */ e(
+  l && /* @__PURE__ */ e(O, { text: l, placement: "right", delay: T, children: /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      "aria-label": `More information about ${t}`,
-      className: `ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${R}`,
-      children: /* @__PURE__ */ e($, { size: 14 })
+      "aria-label": `More information about ${r}`,
+      className: `ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${u}`,
+      children: /* @__PURE__ */ e(F, { size: 14 })
     }
   ) })
 ] }) : /* @__PURE__ */ e("div", {});

package/dist/components/BaseFormComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseFormComponent.js","sources":["../../src/components/BaseFormComponent.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport ArrowUpRightIcon from './CustomIcons/ArrowUpRightIcon';\nimport InfoFilledIcon from './CustomIcons/InfoFilledIcon';\nimport FormItem from './FormItem';\nimport Link from './Link';\nimport { safeHref } from './safeHref';\nimport Spacer from './Spacer';\nimport Tooltip from './Tooltip';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport Text from './Typography/Text';\nimport { FOCUS_RING } from './focusRing';\nimport { type FormItemChildren, NO_FIELD_ERROR, renderFormItemChildren } from './formItemState';\n\n/** Tooltip's own default of 1s reads as broken; 0.5 matches the rest of the library. */\nconst TOOLTIP_DELAY_SECONDS = 0.5;\n\n/** The ids that wire a form field's label / description / hint to its control. */\nexport interface FormFieldIds {\n    controlId: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    helperTextId?: string;\n    describedBy?: string;\n}\n\ninterface FormFieldIdOptions {\n    /** A caller-supplied id always wins, so consumers can label the control themselves. */\n    id?: string;\n    label?: string;\n    description?: string;\n    hint?: string;\n    helperText?: boolean;\n}\n\n/**\n * Generates the stable ids a form field needs to be announced correctly. Shared by\n * `Input`, `TextArea`, `Dropdown` and `MultiSelect` so all four wire up identically.\n */\nexport const useFormFieldIds = ({\n    id,\n    label,\n    description,\n    hint,\n    helperText = false,\n}: FormFieldIdOptions): FormFieldIds => {\n    // useId() emits \":r0:\", and a colon is invalid in a CSS id selector, so a consumer's\n    // querySelector(`#${id}`) throws. Stripping only the delimiters keeps ids unique.\n    const generatedId = `mal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}-`;\n    const controlId = id ?? `${generatedId}control`;\n    const labelId = label ? `${generatedId}label` : undefined;\n    const descriptionId = description ? `${generatedId}description` : undefined;\n    const hintId = hint ? `${generatedId}hint` : undefined;\n    const helperTextId = helperText ? `${generatedId}helper` : undefined;\n    const describedBy =\n        [descriptionId, hintId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n    return { controlId, labelId, descriptionId, hintId, helperTextId, describedBy };\n};\n\ninterface BaseFormComponentProps {\n    label?: string;\n    description?: string;\n    hint?: string;\n    rightSideContent?: RightSideContent;\n    tooltip?: string;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    name: FieldPath<FieldValues>;\n    defaultValue?: string;\n    loading?: boolean;\n    formControl?: Control<FieldValues, unknown>;\n    loadingComponent: React.ReactNode;\n    children?: FormItemChildren;\n    /** Accessibility wiring, from `useFormFieldIds` — see `FormFieldIds`. */\n    controlId?: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    fullWidth?: boolean;\n}\n\nconst BaseFormComponent: React.FC<BaseFormComponentProps> = ({\n    label,\n    hint,\n    rightSideContent,\n    tooltip,\n    name,\n    description,\n    required = false,\n    requiredIndicator = 'optional-suffix',\n    loading = false,\n    formControl,\n    loadingComponent,\n    children,\n    controlId,\n    labelId,\n    descriptionId,\n    hintId,\n    fullWidth = false,\n}) => {\n    const finalComponent = formControl ? (\n        <FormItem control={formControl} name={name}>\n            {children}\n        </FormItem>\n    ) : (\n        renderFormItemChildren(children, NO_FIELD_ERROR)\n    );\n\n    const topHeader = () => (\n        <Spacer direction=\"vertical\" size={4} align=\"stretch\">\n            <div className=\"flex justify-between items-start\">\n                <Label\n                    text={label}\n                    required={required}\n                    requiredIndicator={requiredIndicator}\n                    tooltip={tooltip}\n                    id={labelId}\n                    // No control is rendered while loading, so an htmlFor would be an orphan.\n                    htmlFor={loading ? undefined : controlId}\n                />\n                {(hint || rightSideContent) && (\n                    <div className=\"flex items-start gap-2\">\n                        {hint && <Hint text={hint} id={hintId} />}\n                        {rightSideContent && <RightSide {...rightSideContent} />}\n                    </div>\n                )}\n            </div>\n            {description && <Description text={description} id={descriptionId} />}\n        </Spacer>\n    );\n\n    const showHeader = label || hint || description || rightSideContent;\n\n    return (\n        <Spacer direction=\"vertical\" size={6} align=\"stretch\" fullWidth={fullWidth}>\n            {showHeader && topHeader()}\n            {!loading ? finalComponent : loadingComponent}\n        </Spacer>\n    );\n};\n\n/**\n * What sits at the far end of a field's label row. Data rather than a node, so nothing\n * arbitrary reaches the row; discriminated so a further kind is additive. Plain text is\n * already `hint`.\n */\nexport type RightSideContent = {\n    type?: 'link';\n    text: string;\n    href: string;\n};\n\nconst RightSide = (content: RightSideContent) => {\n    const safe = safeHref(content.href);\n\n    if (!safe) {\n        return null;\n    }\n\n    return (\n        <Link\n            href={safe}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            color=\"dimmed\"\n            size=\"xsmall\"\n            underline={false}\n            className=\"shrink-0 whitespace-nowrap inline-flex items-center gap-1 relative top-[3px]\"\n        >\n            {content.text}\n            <ArrowUpRightIcon size={13} />\n        </Link>\n    );\n};\n\nconst Hint = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <span id={id}>\n            <Text size=\"xsmall\" color=\"dimmed\" className=\"pr-2 relative top-[3px]\">\n                {text}\n            </Text>\n        </span>\n    );\n};\n\nconst Description = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <div className=\"pl-2 text-left\" id={id}>\n            <MarkdownBlock color=\"dimmed\" size=\"small\" text={text ?? ''} omitMargin={true} />\n        </div>\n    );\n};\n\nexport type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';\n\nconst Label = ({\n    text,\n    required,\n    requiredIndicator,\n    tooltip,\n    id,\n    htmlFor,\n}: {\n    text?: string;\n    required: boolean;\n    requiredIndicator: RequiredIndicator;\n    tooltip?: string;\n    id?: string;\n    htmlFor?: string;\n}) => {\n    return text ? (\n        <div className=\"flex items-center\">\n            <label id={id} htmlFor={htmlFor}>\n                <Text size=\"xsmall\" color=\"primary\" fontWeight=\"semi-bold\" className=\"pl-2\">\n                    {text}\n                </Text>\n            </label>\n            {/* Sibling of the <label>, not a child: Testing Library's getByLabelText matches\n                on textContent, so a marker inside it breaks getByLabelText('<label>'). */}\n            {requiredIndicator === 'optional-suffix' && !required && (\n                <span aria-hidden=\"true\">\n                    <Text size=\"xsmall\" color=\"dimmed\" className=\"ml-1\">\n                        (Optional)\n                    </Text>\n                </span>\n            )}\n            {requiredIndicator === 'asterisk' && required && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"ml-1 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]\"\n                >\n                    *\n                </span>\n            )}\n            {tooltip && (\n                <Tooltip text={tooltip} placement=\"right\" delay={TOOLTIP_DELAY_SECONDS}>\n                    <button\n                        type=\"button\"\n                        aria-label={`More information about ${text}`}\n                        className={`ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${FOCUS_RING}`}\n                    >\n                        <InfoFilledIcon size={14} />\n                    </button>\n                </Tooltip>\n            )}\n        </div>\n    ) : (\n        <div />\n    );\n};\n\nexport default BaseFormComponent;\n"],"names":["TOOLTIP_DELAY_SECONDS","useFormFieldIds","id","label","description","hint","helperText","generatedId","useId","controlId","labelId","descriptionId","hintId","helperTextId","describedBy","BaseFormComponent","rightSideContent","tooltip","name","required","requiredIndicator","loading","formControl","loadingComponent","children","fullWidth","finalComponent","jsx","FormItem","renderFormItemChildren","NO_FIELD_ERROR","jsxs","Spacer","Label","Hint","RightSide","Description","content","safe","safeHref","Link","ArrowUpRightIcon","text","Text","MarkdownBlock","htmlFor","Tooltip","FOCUS_RING","InfoFilledIcon"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAwB,KAyBjBC,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAwC;AAGpC,QAAMC,IAAc,OAAOC,EAAA,EAAQ,QAAQ,mBAAmB,EAAE,CAAC,KAC3DC,IAAYP,KAAM,GAAGK,CAAW,WAChCG,IAAUP,IAAQ,GAAGI,CAAW,UAAU,QAC1CI,IAAgBP,IAAc,GAAGG,CAAW,gBAAgB,QAC5DK,IAASP,IAAO,GAAGE,CAAW,SAAS,QACvCM,IAAeP,IAAa,GAAGC,CAAW,WAAW,QACrDO,IACF,CAACH,GAAeC,GAAQC,CAAY,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEvE,SAAO,EAAE,WAAAJ,GAAW,SAAAC,GAAS,eAAAC,GAAe,QAAAC,GAAQ,cAAAC,GAAc,aAAAC,EAAA;AACtE,GAwBMC,KAAsD,CAAC;AAAA,EACzD,OAAAZ;AAAA,EACA,MAAAE;AAAA,EACA,kBAAAW;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAd;AAAA,EACA,UAAAe,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAf;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAa,IAAY;AAChB,MAAM;AACF,QAAMC,IAAiBJ,IACnB,gBAAAK,EAACC,GAAA,EAAS,SAASN,GAAa,MAAAJ,GAC3B,UAAAM,EAAA,CACL,IAEAK,EAAuBL,GAAUM,CAAc;AA4BnD,SACI,gBAAAC,EAACC,KAAO,WAAU,YAAW,MAAM,GAAG,OAAM,WAAU,WAAAP,GACjD,UAAA;AAAA,KAJUtB,KAASE,KAAQD,KAAeY,MAtB/C,gBAAAe,EAACC,GAAA,EAAO,WAAU,YAAW,MAAM,GAAG,OAAM,WACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,oCACX,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,MAAM9B;AAAA,YACN,UAAAgB;AAAA,YACA,mBAAAC;AAAA,YACA,SAAAH;AAAA,YACA,IAAIP;AAAA,YAEJ,SAASW,IAAU,SAAYZ;AAAA,UAAA;AAAA,QAAA;AAAA,SAEjCJ,KAAQW,MACN,gBAAAe,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,UAAA1B,KAAQ,gBAAAsB,EAACO,GAAA,EAAK,MAAM7B,GAAM,IAAIO,GAAQ;AAAA,UACtCI,KAAoB,gBAAAW,EAACQ,GAAA,EAAW,GAAGnB,EAAA,CAAkB;AAAA,QAAA,EAAA,CAC1D;AAAA,MAAA,GAER;AAAA,MACCZ,KAAe,gBAAAuB,EAACS,GAAA,EAAY,MAAMhC,GAAa,IAAIO,EAAA,CAAe;AAAA,IAAA,GACvE;AAAA,IAQMU,IAA2BE,IAAjBG;AAAA,EAAiB,GACjC;AAER,GAaMS,IAAY,CAACE,MAA8B;AAC7C,QAAMC,IAAOC,EAASF,EAAQ,IAAI;AAElC,SAAKC,IAKD,gBAAAP;AAAA,IAACS;AAAA,IAAA;AAAA,MACG,MAAMF;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAD,EAAQ;AAAA,QACT,gBAAAV,EAACc,GAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAdzB;AAiBf,GAEMP,IAAO,CAAC,EAAE,MAAAQ,GAAM,IAAAxC,QAEd,gBAAAyB,EAAC,QAAA,EAAK,IAAAzB,GACF,UAAA,gBAAAyB,EAACgB,GAAA,EAAK,MAAK,UAAS,OAAM,UAAS,WAAU,2BACxC,UAAAD,EAAA,CACL,GACJ,GAIFN,IAAc,CAAC,EAAE,MAAAM,GAAM,IAAAxC,0BAEpB,OAAA,EAAI,WAAU,kBAAiB,IAAAA,GAC5B,4BAAC0C,GAAA,EAAc,OAAM,UAAS,MAAK,SAAQ,MAAMF,KAAQ,IAAI,YAAY,IAAM,GACnF,GAMFT,IAAQ,CAAC;AAAA,EACX,MAAAS;AAAA,EACA,UAAAvB;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAH;AAAA,EACA,IAAAf;AAAA,EACA,SAAA2C;AACJ,MAQWH,IACH,gBAAAX,EAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,EAAA,gBAAAJ,EAAC,SAAA,EAAM,IAAAzB,GAAQ,SAAA2C,GACX,UAAA,gBAAAlB,EAACgB,KAAK,MAAK,UAAS,OAAM,WAAU,YAAW,aAAY,WAAU,QAChE,aACL,GACJ;AAAA,EAGCvB,MAAsB,qBAAqB,CAACD,KACzC,gBAAAQ,EAAC,UAAK,eAAY,QACd,UAAA,gBAAAA,EAACgB,GAAA,EAAK,MAAK,UAAS,OAAM,UAAS,WAAU,QAAO,wBAEpD,GACJ;AAAA,EAEHvB,MAAsB,cAAcD,KACjC,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,eAAY;AAAA,MACZ,WAAU;AAAA,MACb,UAAA;AAAA,IAAA;AAAA,EAAA;AAAA,EAIJV,uBACI6B,GAAA,EAAQ,MAAM7B,GAAS,WAAU,SAAQ,OAAOjB,GAC7C,UAAA,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,0BAA0Be,CAAI;AAAA,MAC1C,WAAW,2FAA2FK,CAAU;AAAA,MAEhH,UAAA,gBAAApB,EAACqB,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA,EAC9B,CACJ;AAAA,EAAA,CAER,sBAEC,OAAA,EAAI;"}
+{"version":3,"file":"BaseFormComponent.js","sources":["../../src/components/BaseFormComponent.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport ArrowUpRightIcon from './CustomIcons/ArrowUpRightIcon';\nimport InfoFilledIcon from './CustomIcons/InfoFilledIcon';\nimport FormItem from './FormItem';\nimport Link from './Link';\nimport Spacer from './Spacer';\nimport Tooltip from './Tooltip';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport Text from './Typography/Text';\nimport { FOCUS_RING } from './focusRing';\nimport { type FormItemChildren, NO_FIELD_ERROR, renderFormItemChildren } from './formItemState';\nimport { safeHref } from './safeHref';\n\n/** Tooltip's own default of 1s reads as broken; 0.5 matches the rest of the library. */\nconst TOOLTIP_DELAY_SECONDS = 0.5;\n\n/** The ids that wire a form field's label / description / hint to its control. */\nexport interface FormFieldIds {\n    controlId: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    helperTextId?: string;\n    describedBy?: string;\n}\n\ninterface FormFieldIdOptions {\n    /** A caller-supplied id always wins, so consumers can label the control themselves. */\n    id?: string;\n    label?: string;\n    description?: string;\n    hint?: string;\n    helperText?: boolean;\n}\n\n/**\n * Generates the stable ids a form field needs to be announced correctly. Shared by\n * `Input`, `TextArea`, `Dropdown` and `MultiSelect` so all four wire up identically.\n */\nexport const useFormFieldIds = ({\n    id,\n    label,\n    description,\n    hint,\n    helperText = false,\n}: FormFieldIdOptions): FormFieldIds => {\n    // useId() emits \":r0:\", and a colon is invalid in a CSS id selector, so a consumer's\n    // querySelector(`#${id}`) throws. Stripping only the delimiters keeps ids unique.\n    const generatedId = `mal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}-`;\n    const controlId = id ?? `${generatedId}control`;\n    const labelId = label ? `${generatedId}label` : undefined;\n    const descriptionId = description ? `${generatedId}description` : undefined;\n    const hintId = hint ? `${generatedId}hint` : undefined;\n    const helperTextId = helperText ? `${generatedId}helper` : undefined;\n    const describedBy =\n        [descriptionId, hintId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n    return { controlId, labelId, descriptionId, hintId, helperTextId, describedBy };\n};\n\ninterface BaseFormComponentProps {\n    label?: string;\n    description?: string;\n    hint?: string;\n    rightSideContent?: RightSideContent;\n    tooltip?: string;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    name: FieldPath<FieldValues>;\n    defaultValue?: string;\n    loading?: boolean;\n    formControl?: Control<FieldValues, unknown>;\n    loadingComponent: React.ReactNode;\n    children?: FormItemChildren;\n    /** Accessibility wiring, from `useFormFieldIds` — see `FormFieldIds`. */\n    controlId?: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    fullWidth?: boolean;\n}\n\nconst BaseFormComponent: React.FC<BaseFormComponentProps> = ({\n    label,\n    hint,\n    rightSideContent,\n    tooltip,\n    name,\n    description,\n    required = false,\n    requiredIndicator = 'optional-suffix',\n    loading = false,\n    formControl,\n    loadingComponent,\n    children,\n    controlId,\n    labelId,\n    descriptionId,\n    hintId,\n    fullWidth = false,\n}) => {\n    const finalComponent = formControl ? (\n        <FormItem control={formControl} name={name}>\n            {children}\n        </FormItem>\n    ) : (\n        renderFormItemChildren(children, NO_FIELD_ERROR)\n    );\n\n    const topHeader = () => (\n        <Spacer direction=\"vertical\" size={4} align=\"stretch\">\n            <div className=\"flex justify-between items-start\">\n                <Label\n                    text={label}\n                    required={required}\n                    requiredIndicator={requiredIndicator}\n                    tooltip={tooltip}\n                    id={labelId}\n                    // No control is rendered while loading, so an htmlFor would be an orphan.\n                    htmlFor={loading ? undefined : controlId}\n                />\n                {(hint || rightSideContent) && (\n                    <div className=\"flex items-start gap-2\">\n                        {hint && <Hint text={hint} id={hintId} />}\n                        {rightSideContent && <RightSide {...rightSideContent} />}\n                    </div>\n                )}\n            </div>\n            {description && <Description text={description} id={descriptionId} />}\n        </Spacer>\n    );\n\n    const showHeader = label || hint || description || rightSideContent;\n\n    return (\n        <Spacer direction=\"vertical\" size={6} align=\"stretch\" fullWidth={fullWidth}>\n            {showHeader && topHeader()}\n            {!loading ? finalComponent : loadingComponent}\n        </Spacer>\n    );\n};\n\n/**\n * What sits at the far end of a field's label row. Data rather than a node, so nothing\n * arbitrary reaches the row; discriminated so a further kind is additive. Plain text is\n * already `hint`.\n */\nexport type RightSideContent =\n    | {\n          type?: 'link';\n          text: string;\n          href: string;\n      }\n    | {\n          /** An action on the form itself, such as showing a panel of help beside it. */\n          type: 'button';\n          text: string;\n          onClick: () => void;\n      };\n\nconst RightSide = (content: RightSideContent) => {\n    if (content.type === 'button') {\n        return (\n            <button\n                type=\"button\"\n                onClick={content.onClick}\n                className={`relative top-[3px] shrink-0 cursor-pointer whitespace-nowrap border-0 bg-transparent p-0 text-[length:var(--malachite-font-size-xsmall)] font-medium text-[var(--malachite-accent-foreground)] hover:underline ${FOCUS_RING}`}\n            >\n                {content.text}\n            </button>\n        );\n    }\n\n    const safe = safeHref(content.href);\n\n    if (!safe) {\n        return null;\n    }\n\n    return (\n        <Link\n            href={safe}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            color=\"dimmed\"\n            size=\"xsmall\"\n            underline={false}\n            className=\"shrink-0 whitespace-nowrap inline-flex items-center gap-1 relative top-[3px]\"\n        >\n            {content.text}\n            <ArrowUpRightIcon size={13} />\n        </Link>\n    );\n};\n\nconst Hint = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <span id={id}>\n            <Text size=\"xsmall\" color=\"dimmed\" className=\"pr-2 relative top-[3px]\">\n                {text}\n            </Text>\n        </span>\n    );\n};\n\nconst Description = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <div className=\"pl-2 text-left\" id={id}>\n            <MarkdownBlock color=\"dimmed\" size=\"small\" text={text ?? ''} omitMargin={true} />\n        </div>\n    );\n};\n\nexport type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';\n\nconst Label = ({\n    text,\n    required,\n    requiredIndicator,\n    tooltip,\n    id,\n    htmlFor,\n}: {\n    text?: string;\n    required: boolean;\n    requiredIndicator: RequiredIndicator;\n    tooltip?: string;\n    id?: string;\n    htmlFor?: string;\n}) => {\n    return text ? (\n        <div className=\"flex items-center\">\n            <label id={id} htmlFor={htmlFor}>\n                <Text size=\"xsmall\" color=\"primary\" fontWeight=\"semi-bold\" className=\"pl-2\">\n                    {text}\n                </Text>\n            </label>\n            {/* Sibling of the <label>, not a child: Testing Library's getByLabelText matches\n                on textContent, so a marker inside it breaks getByLabelText('<label>'). */}\n            {requiredIndicator === 'optional-suffix' && !required && (\n                <span aria-hidden=\"true\">\n                    <Text size=\"xsmall\" color=\"dimmed\" className=\"ml-1\">\n                        (Optional)\n                    </Text>\n                </span>\n            )}\n            {requiredIndicator === 'asterisk' && required && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"ml-1 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]\"\n                >\n                    *\n                </span>\n            )}\n            {tooltip && (\n                <Tooltip text={tooltip} placement=\"right\" delay={TOOLTIP_DELAY_SECONDS}>\n                    <button\n                        type=\"button\"\n                        aria-label={`More information about ${text}`}\n                        className={`ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${FOCUS_RING}`}\n                    >\n                        <InfoFilledIcon size={14} />\n                    </button>\n                </Tooltip>\n            )}\n        </div>\n    ) : (\n        <div />\n    );\n};\n\nexport default BaseFormComponent;\n"],"names":["TOOLTIP_DELAY_SECONDS","useFormFieldIds","id","label","description","hint","helperText","generatedId","useId","controlId","labelId","descriptionId","hintId","helperTextId","describedBy","BaseFormComponent","rightSideContent","tooltip","name","required","requiredIndicator","loading","formControl","loadingComponent","children","fullWidth","finalComponent","jsx","FormItem","renderFormItemChildren","NO_FIELD_ERROR","jsxs","Spacer","Label","Hint","RightSide","Description","content","FOCUS_RING","safe","safeHref","Link","ArrowUpRightIcon","text","Text","MarkdownBlock","htmlFor","Tooltip","InfoFilledIcon"],"mappings":"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"}

package/dist/components/Modal.js

@@ -1,169 +1,186 @@
-import { jsx as r, jsxs as l, Fragment as j } from "react/jsx-runtime";
-import { useId as B, useState as h, useRef as n, useEffect as P, useCallback as V } from "react";
-import { createPortal as le } from "react-dom";
-import { ShadowRootWrapper as te } from "../ShadowRootWrapper.js";
-import ie from "./CalloutStrip.js";
-import ne from "./CustomIcons/DismissIcon.js";
-import { getDeepActiveElement as oe } from "./activeElement.js";
-import { GLASS_SURFACE_STYLE as se } from "./glassSurface.js";
-import { MODAL_TRAY_BACKGROUND as ce, MODAL_TRAY_CAPTION_COLOR as de } from "./modalTray.js";
-import { useOverlayBehaviour as me, OVERLAY_ICON_BUTTON_CLASSES as ue } from "./overlayBehaviour.js";
-import { OVERLAY_ELEVATED_ATTR as pe, overlayIdentity as F } from "./portalOverlay.js";
-const U = {
+import { jsx as e, jsxs as l, Fragment as V } from "react/jsx-runtime";
+import { useId as F, useState as g, useRef as i, useEffect as U, useCallback as W } from "react";
+import { createPortal as ce } from "react-dom";
+import { ShadowRootWrapper as de } from "../ShadowRootWrapper.js";
+import me from "./CalloutStrip.js";
+import ue from "./CustomIcons/DismissIcon.js";
+import { getDeepActiveElement as pe } from "./activeElement.js";
+import { GLASS_SURFACE_STYLE as fe } from "./glassSurface.js";
+import { MODAL_TRAY_BACKGROUND as xe, MODAL_TRAY_CAPTION_COLOR as he } from "./modalTray.js";
+import { useOverlayBehaviour as ve, OVERLAY_ICON_BUTTON_CLASSES as be } from "./overlayBehaviour.js";
+import { OVERLAY_ELEVATED_ATTR as ge, overlayIdentity as G } from "./portalOverlay.js";
+const q = {
   small: "420px",
   medium: "612px",
-  large: "760px"
-}, v = 200, xe = "flex-[0_1_auto] h-[min(600px,calc(100dvh-160px))]", Ie = ({
+  large: "760px",
+  fullscreen: "100%"
+}, N = 200, z = "flex-[0_1_auto] h-[min(600px,calc(100dvh-160px))]", Oe = ({
   open: c,
   onClose: d,
-  title: u,
-  subtitle: p,
-  icon: b,
-  headerExtra: g,
-  titleAdornment: N,
-  tray: e,
-  headerDivider: w = !1,
-  footer: R,
-  size: _ = "medium",
-  showCloseButton: W = !0,
-  closeOnOverlayClick: z = !0,
-  bodyPadding: A = !0,
-  bodyHeight: G = "auto",
-  callouts: x,
-  renderLink: q,
-  role: H = "dialog",
-  "aria-label": K,
-  "aria-labelledby": T,
-  "aria-describedby": X,
+  title: p,
+  subtitle: f,
+  icon: w,
+  headerExtra: y,
+  titleAdornment: R,
+  tray: K,
+  headerDivider: _ = !1,
+  footer: A,
+  size: x = "medium",
+  surface: X = "card",
+  showCloseButton: Z = !0,
+  closeOnOverlayClick: H = !0,
+  bodyPadding: T = !0,
+  bodyHeight: I = "auto",
+  callouts: J,
+  renderLink: Q,
+  role: ee = "dialog",
+  "aria-label": ae,
+  "aria-labelledby": $,
+  "aria-describedby": re,
   busy: o = !1,
-  children: I
+  children: h
 }) => {
-  const k = B(), S = B(), m = (x == null ? void 0 : x.filter((a) => a.message.trim())) ?? [], [f, $] = h(!1), [Z, O] = h(!1), [J, E] = h(!1), C = n(null), s = n(null), t = n(null), L = n(o), D = n(d);
-  P(() => {
-    L.current = o, D.current = d;
+  var P;
+  const k = F(), S = F(), m = X === "none", a = m ? void 0 : K, u = ((P = m ? void 0 : J) == null ? void 0 : P.filter((r) => r.message.trim())) ?? [], [v, O] = g(!1), [le, C] = g(!1), [te, E] = g(!1), L = i(null), s = i(null), t = i(null), D = i(o), M = i(d);
+  U(() => {
+    D.current = o, M.current = d;
   }, [o, d]);
-  const M = V(() => {
-    L.current || D.current();
-  }, []), y = n(null), {
-    ref: Y,
-    isTopmost: Q,
-    zIndex: ee,
-    elevated: re
-  } = me({
+  const B = W(() => {
+    D.current || M.current();
+  }, []), Y = i(null), {
+    ref: j,
+    isTopmost: ne,
+    zIndex: ie,
+    elevated: oe
+  } = ve({
     open: c,
     onClose: d,
-    hostRef: y
-  }), ae = V(
-    (a) => {
-      C.current = a, Y(a);
+    hostRef: Y
+  }), se = W(
+    (r) => {
+      L.current = r, j(r);
     },
-    [Y]
+    [j]
   );
-  return P(() => {
-    var a;
+  if (U(() => {
+    var r;
     if (c)
-      O(!0), E(!1), t.current && (clearTimeout(t.current), t.current = null), s.current = requestAnimationFrame(() => {
-        s.current = null, $(!0);
+      C(!0), E(!1), t.current && (clearTimeout(t.current), t.current = null), s.current = requestAnimationFrame(() => {
+        s.current = null, O(!0);
       });
     else {
-      const i = oe();
-      i && ((a = C.current) != null && a.contains(i)) && i.blur(), E(!0), $(!1), t.current = setTimeout(() => {
-        t.current = null, O(!1);
-      }, v);
+      const n = pe();
+      n && ((r = L.current) != null && r.contains(n)) && n.blur(), E(!0), O(!1), t.current = setTimeout(() => {
+        t.current = null, C(!1);
+      }, N);
     }
     return () => {
       s.current !== null && (cancelAnimationFrame(s.current), s.current = null), t.current && (clearTimeout(t.current), t.current = null);
     };
-  }, [c]), Z ? le(
+  }, [c]), !le)
+    return null;
+  let b = "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))]";
+  return m ? b = "relative flex max-h-full w-full flex-col outline-none" : a && (b = "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))]"), ce(
     // 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(
-      te,
+    /* @__PURE__ */ e(
+      de,
       {
-        hostRef: y,
-        hostStyle: { position: "relative", zIndex: ee },
-        hostProps: re ? { ...F("modal"), [pe]: "" } : F("modal"),
+        hostRef: Y,
+        hostStyle: { position: "relative", zIndex: ie },
+        hostProps: oe ? { ...G("modal"), [ge]: "" } : G("modal"),
         children: /* @__PURE__ */ l(
           "div",
           {
             className: `fixed inset-0 z-[1000] flex items-center justify-center p-[16px] ${c ? "" : "pointer-events-none"}`,
             children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ e(
                 "div",
                 {
                   "aria-hidden": "true",
-                  onClick: z ? M : void 0,
-                  className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${f ? "opacity-100" : "opacity-0"}`
+                  onClick: H ? B : void 0,
+                  className: `absolute inset-0 bg-[var(--malachite-overlay-scrim)] transition-opacity duration-200 ease-in-out ${v ? "opacity-100" : "opacity-0"}`
                 }
               ),
               /* @__PURE__ */ l(
                 "div",
                 {
-                  ref: ae,
-                  role: H,
-                  "aria-hidden": J ? "true" : void 0,
-                  "aria-modal": Q ? "true" : void 0,
+                  ref: se,
+                  role: ee,
+                  "aria-hidden": te ? "true" : void 0,
+                  "aria-modal": ne ? "true" : void 0,
                   "aria-describedby": [
-                    ...m.map((a, i) => `${S}-${i}`),
-                    X,
-                    e != null && e.caption ? k : null
+                    ...u.map((r, n) => `${S}-${n}`),
+                    re,
+                    a != null && a.caption ? k : null
                   ].filter(Boolean).join(" ") || void 0,
                   "aria-busy": o || void 0,
                   tabIndex: -1,
-                  "aria-label": T ? void 0 : K ?? (typeof u == "string" ? u : void 0),
-                  "aria-labelledby": T,
-                  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))]",
+                  "aria-label": $ ? void 0 : ae ?? (typeof p == "string" ? p : void 0),
+                  "aria-labelledby": $,
+                  className: b,
                   style: {
-                    maxWidth: e ? `calc(${U[_]} + 8px)` : U[_],
-                    ...e ? {
-                      backgroundColor: ce[e.tone ?? "neutral"]
+                    maxWidth: a ? `calc(${q[x]} + 8px)` : q[x],
+                    ...x === "fullscreen" ? { height: "100%" } : {},
+                    ...a ? {
+                      backgroundColor: xe[a.tone ?? "neutral"]
                     } : {},
                     // Inline: Tailwind scale/translate utilities silently break inside
                     // shadow roots (see CLAUDE.md Shadow DOM caveats).
-                    transform: f ? "scale(1)" : "scale(0.96)",
-                    opacity: f ? 1 : 0,
-                    transition: `transform ${v}ms ease-out, opacity ${v}ms ease-out`
+                    transform: v ? "scale(1)" : "scale(0.96)",
+                    opacity: v ? 1 : 0,
+                    transition: `transform ${N}ms ease-out, opacity ${N}ms ease-out`
                   },
                   children: [
-                    /* @__PURE__ */ l(
+                    m ? (
+                      // Still a scroll body: the page behind is locked, so content taller
+                      // than the viewport has nowhere else to scroll.
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: `min-h-0 ${I === "tall" ? z : "flex-1"} overflow-y-auto`,
+                          children: h
+                        }
+                      )
+                    ) : /* @__PURE__ */ l(
                       "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",
+                        className: a ? "flex min-h-0 flex-1 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__ */ l(
                             "div",
                             {
-                              className: `flex gap-[20px] p-[20px] ${p ? "items-start" : "items-center"} ${w ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
+                              className: `flex gap-[20px] p-[20px] ${f ? "items-start" : "items-center"} ${_ ? "border-0 border-b border-solid border-[var(--malachite-card-border)]" : ""}`,
                               children: [
                                 /* @__PURE__ */ l("div", { className: "flex h-[18px] min-w-0 flex-1 items-center gap-[12px]", children: [
                                   /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-[8px]", children: [
-                                    b ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: b }) : null,
+                                    w ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: w }) : null,
                                     /* @__PURE__ */ l("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: u }),
-                                      p ? /* @__PURE__ */ r("span", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: p }) : null
+                                      /* @__PURE__ */ e("span", { className: "truncate text-[14px] font-medium leading-[1.25] tracking-[-0.14px] text-[var(--malachite-text-primary)]", children: p }),
+                                      f ? /* @__PURE__ */ e("span", { className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]", children: f }) : null
                                     ] })
                                   ] }),
-                                  N ? /* @__PURE__ */ l(j, { children: [
-                                    /* @__PURE__ */ r(
+                                  R ? /* @__PURE__ */ l(V, { children: [
+                                    /* @__PURE__ */ e(
                                       "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: N })
+                                    /* @__PURE__ */ e("span", { className: "flex min-w-0 items-center overflow-hidden", children: R })
                                   ] }) : null
                                 ] }),
-                                g ? /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", children: g }) : null,
-                                W ? /* @__PURE__ */ r(
+                                y ? /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: y }) : null,
+                                Z ? /* @__PURE__ */ e(
                                   "button",
                                   {
                                     type: "button",
                                     "aria-label": "Close",
-                                    onClick: M,
+                                    onClick: B,
                                     disabled: o,
-                                    className: ue,
-                                    children: /* @__PURE__ */ r(ne, { size: 10 })
+                                    className: be,
+                                    children: /* @__PURE__ */ e(ue, { size: 10 })
                                   }
                                 ) : null
                               ]
@@ -172,51 +189,51 @@ const U = {
                           /* @__PURE__ */ l(
                             "div",
                             {
-                              className: `min-h-0 ${G === "tall" ? xe : "flex-1"} overflow-y-auto ${A && m.length === 0 ? "px-[20px]" : ""}`,
+                              className: `min-h-0 ${I === "tall" ? z : "flex-1"} overflow-y-auto ${T && u.length === 0 ? "px-[20px]" : ""}`,
                               children: [
-                                m.map((a, i) => /* @__PURE__ */ r(
-                                  ie,
+                                u.map((r, n) => /* @__PURE__ */ e(
+                                  me,
                                   {
-                                    id: `${S}-${i}`,
-                                    type: a.type,
-                                    message: a.message,
-                                    renderLink: q
+                                    id: `${S}-${n}`,
+                                    type: r.type,
+                                    message: r.message,
+                                    renderLink: Q
                                   },
-                                  i
+                                  n
                                 )),
-                                A ? /* @__PURE__ */ r(
+                                T ? /* @__PURE__ */ e(
                                   "div",
                                   {
-                                    className: m.length > 0 ? "px-[20px] pt-[18px] pb-[20px]" : `pb-[20px] ${w ? "pt-[18px]" : ""}`,
-                                    children: I
+                                    className: u.length > 0 ? "px-[20px] pt-[18px] pb-[20px]" : `pb-[20px] ${_ ? "pt-[18px]" : ""}`,
+                                    children: h
                                   }
-                                ) : I
+                                ) : h
                               ]
                             }
                           ),
-                          R ? /* @__PURE__ */ r(
+                          A ? /* @__PURE__ */ e(
                             "div",
                             {
                               className: "flex min-h-[56px] shrink-0 items-center border-0 border-t border-solid border-[var(--malachite-card-border)] px-[12px]",
-                              style: se,
-                              children: R
+                              style: fe,
+                              children: A
                             }
                           ) : null
                         ]
                       }
                     ),
-                    e != null && e.caption ? /* @__PURE__ */ r(
+                    a != null && a.caption ? /* @__PURE__ */ e(
                       "div",
                       {
                         id: k,
                         className: "flex h-[48px] shrink-0 items-center justify-center px-[16px] text-[13px] tracking-[0.13px]",
-                        style: { color: de[e.tone ?? "neutral"] },
+                        style: { color: he[a.tone ?? "neutral"] },
                         children: /* @__PURE__ */ l("span", { children: [
-                          e.caption.label ? /* @__PURE__ */ l(j, { children: [
-                            /* @__PURE__ */ r("span", { className: "font-medium", children: e.caption.label }),
+                          a.caption.label ? /* @__PURE__ */ l(V, { children: [
+                            /* @__PURE__ */ e("span", { className: "font-medium", children: a.caption.label }),
                             " "
                           ] }) : null,
-                          e.caption.message
+                          a.caption.message
                         ] })
                       }
                     ) : null
@@ -229,10 +246,10 @@ const U = {
       }
     ),
     document.body
-  ) : null;
+  );
 };
 export {
-  Ie as Modal,
-  Ie as default
+  Oe as Modal,
+  Oe as default
 };
 //# sourceMappingURL=Modal.js.map