@stackone/malachite 2.70.0 → 2.72.0

package/dist/components/Alert.js

@@ -1,16 +1,16 @@
-import { jsxs as i, jsx as e, Fragment as B } from "react/jsx-runtime";
-import { useState as E } from "react";
-import { Button as F } from "./Button.js";
-import S from "./CustomIcons/CaretDownIcon.js";
-import O from "./CustomIcons/CaretUpIcon.js";
-import z from "./CustomIcons/CheckCircleFilled.js";
-import A from "./CustomIcons/ErrorCircleFilled.js";
-import R from "./CustomIcons/InfoCircleFilled.js";
-import W from "./CustomIcons/SparkleIcon.js";
-import H from "./CustomIcons/WarningCircleFilled.js";
-import M from "./Typography/MarkdownBlock.js";
-import { getTextColor as $ } from "./Typography/textStyles.js";
-const C = (r) => {
+import { jsxs as i, jsx as e, Fragment as O } from "react/jsx-runtime";
+import { useState as A } from "react";
+import { Button as R } from "./Button.js";
+import W from "./CustomIcons/CaretDownIcon.js";
+import H from "./CustomIcons/CaretUpIcon.js";
+import M from "./CustomIcons/CheckCircleFilled.js";
+import T from "./CustomIcons/ErrorCircleFilled.js";
+import Y from "./CustomIcons/InfoCircleFilled.js";
+import $ from "./CustomIcons/SparkleIcon.js";
+import D from "./CustomIcons/WarningCircleFilled.js";
+import L from "./Typography/MarkdownBlock.js";
+import { getTextColor as y, getFontSize as U } from "./Typography/textStyles.js";
+const h = (r) => {
   switch (r) {
     case "info":
       return "primary";
@@ -27,130 +27,147 @@ const C = (r) => {
     default:
       return "primary";
   }
-}, s = {
+}, a = {
   width: "13px",
   height: "13px",
   flexShrink: 0
-}, n = {
+}, o = {
   info: "var(--malachite-alert-info-foreground)",
   success: "var(--malachite-alert-success-foreground)",
   error: "var(--malachite-alert-error-foreground)",
   warning: "var(--malachite-alert-warning-foreground)",
   assistant: "var(--malachite-alert-assistant-foreground)"
-}, D = {
+}, I = {
   info: /* @__PURE__ */ e(
-    R,
+    Y,
     {
-      style: { ...s, color: n.info }
+      style: { ...a, color: o.info }
     }
   ),
   success: /* @__PURE__ */ e(
-    z,
+    M,
     {
-      style: { ...s, color: n.success }
+      style: { ...a, color: o.success }
     }
   ),
   error: /* @__PURE__ */ e(
-    A,
+    T,
     {
-      style: { ...s, color: n.error }
+      style: { ...a, color: o.error }
     }
   ),
   warning: /* @__PURE__ */ e(
-    H,
+    D,
     {
-      style: { ...s, color: n.warning }
+      style: { ...a, color: o.warning }
     }
   ),
   // The same sparkle the control that produced the message carries, so the two read as
   // one thread rather than two unrelated affordances.
   assistant: /* @__PURE__ */ e(
-    W,
+    $,
     {
-      style: { ...s, color: n.assistant }
+      style: { ...a, color: o.assistant }
     }
   )
-}, g = (r, l) => l ? /* @__PURE__ */ e(
+}, q = { ...a, width: "16px", height: "16px" }, _ = (r, l, t = !1) => !l && !t ? I[r] : /* @__PURE__ */ e(
   "span",
   {
     className: "alert-status-icon inline-flex shrink-0 [&_svg]:size-full!",
-    style: { ...s, color: n[r] },
-    children: l
+    style: { ...t ? q : a, color: o[r] },
+    children: l || I[r]
   }
-) : D[r], w = ({ text: r, type: l, renderLink: c }) => /* @__PURE__ */ e(
-  M,
+), u = ({ text: r, type: l, lead: t, renderLink: c }) => t ? /* @__PURE__ */ i("div", { className: "alert-lead", children: [
+  /* @__PURE__ */ e(
+    "strong",
+    {
+      style: {
+        color: y(h(l)),
+        fontSize: U("small"),
+        fontWeight: 600
+      },
+      children: t
+    }
+  ),
+  " ",
+  /* @__PURE__ */ e(u, { text: r, type: l, renderLink: c })
+] }) : /* @__PURE__ */ e(
+  L,
   {
     text: r,
-    color: C(l),
+    color: h(l),
     size: "small",
     omitMargin: !0,
     renderLink: c
   }
-), ee = ({
+), ae = ({
   type: r = "info",
   message: l,
-  hasMargin: c = !0,
-  className: N,
-  children: f,
-  isExpanded: d,
-  onToggle: m,
-  action: o,
-  icon: x,
-  live: b = !1,
-  renderLink: u
+  hasMargin: t = !0,
+  className: c,
+  children: p,
+  isExpanded: m,
+  onToggle: f,
+  action: d,
+  icon: v,
+  live: S = !1,
+  renderLink: g,
+  layout: E = "inline",
+  lead: w
 }) => {
-  const t = !!f, h = b ? r === "error" || r === "warning" ? "alert" : "status" : void 0, [I, y] = E(!1), a = d !== void 0 ? d : I, k = () => {
-    const v = !a;
-    d === void 0 && y(v), m == null || m(v);
-  }, p = [
+  const s = !!p, x = E === "banner" && !s, N = S ? r === "error" || r === "warning" ? "alert" : "status" : void 0, [j, k] = A(!1), n = m !== void 0 ? m : j, B = () => {
+    const b = !n;
+    m === void 0 && k(b), f == null || f(b);
+  }, C = [
     "alert-base",
     `alert-${r}`,
     "flex",
     "w-full",
     // Ensure full width
-    t && a ? "flex-col" : "gap-2 items-center min-h-[2rem]",
-    c ? "" : "alert-no-margin",
+    x ? "alert-banner" : s && n ? "flex-col" : "gap-2 items-center min-h-[2rem]",
+    t ? "" : "alert-no-margin",
     "text-left",
-    t ? "rounded-xl !p-0" : "!px-2.5 !py-1.5",
+    x ? "" : s ? "rounded-xl !p-0" : "!px-2.5 !py-1.5",
     // Slightly more vertical padding for centering
-    N
-  ].filter(Boolean).join(" "), _ = [
+    c
+  ].filter(Boolean).join(" "), F = [
     "flex items-center justify-between w-full",
-    t ? "gap-2 px-2.5 py-1" : "gap-2",
-    t && a ? "rounded-t-xl" : t ? "rounded-xl" : ""
-  ].filter(Boolean).join(" "), j = ["w-full", "overflow-hidden"].filter(Boolean).join(" ");
-  return t ? /* @__PURE__ */ i("div", { className: `${p} alert-expandable`, children: [
-    /* @__PURE__ */ i("div", { className: _, children: [
+    s ? "gap-2 px-2.5 py-1" : "gap-2",
+    s && n ? "rounded-t-xl" : s ? "rounded-xl" : ""
+  ].filter(Boolean).join(" "), z = ["w-full", "overflow-hidden"].filter(Boolean).join(" ");
+  return s ? /* @__PURE__ */ i("div", { className: `${C} alert-expandable`, children: [
+    /* @__PURE__ */ i("div", { className: F, children: [
       /* @__PURE__ */ i("div", { className: "flex-1 flex gap-2 items-center", children: [
-        g(r, x),
-        /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: h, children: /* @__PURE__ */ e(
-          w,
+        _(r, v),
+        /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: N, children: /* @__PURE__ */ e(
+          u,
           {
             text: l,
+            lead: w,
             type: r,
-            renderLink: u
+            renderLink: g
           }
         ) }) })
       ] }),
       /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-        o && /* @__PURE__ */ e("div", { className: "alert-action flex items-center", children: o }),
+        d && /* @__PURE__ */ e("div", { className: "alert-action flex items-center", children: d }),
         /* @__PURE__ */ e(
-          F,
+          R,
           {
             variant: "no-style",
             size: "xsmall",
-            onClick: k,
-            "aria-label": a ? "Collapse" : "Expand",
+            onClick: B,
+            "aria-label": n ? "Collapse" : "Expand",
             style: {
-              color: $(C(r))
+              color: y(h(r))
             },
-            children: a ? /* @__PURE__ */ e(
-              O,
+            children: n ? /* @__PURE__ */ e(
+              H,
               {
                 style: { minWidth: "13px", minHeight: "13px" }
               }
             ) : /* @__PURE__ */ e(
-              S,
+              W,
               {
                 style: { minWidth: "13px", minHeight: "13px" }
               }
@@ -159,15 +176,23 @@ const C = (r) => {
         )
       ] })
     ] }),
-    a && /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e("div", { className: j, children: /* @__PURE__ */ e("div", { className: "bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto", children: f }) }) })
-  ] }) : /* @__PURE__ */ i("div", { className: p, children: [
-    g(r, x),
-    /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: h, children: /* @__PURE__ */ e(w, { text: l, type: r, renderLink: u }) }) }),
-    o && /* @__PURE__ */ e("div", { className: "alert-action shrink-0 flex items-center", children: o })
+    n && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e("div", { className: z, children: /* @__PURE__ */ e("div", { className: "bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto", children: p }) }) })
+  ] }) : /* @__PURE__ */ i("div", { className: C, children: [
+    _(r, v, x),
+    /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: N, children: /* @__PURE__ */ e(
+      u,
+      {
+        text: l,
+        type: r,
+        lead: w,
+        renderLink: g
+      }
+    ) }) }),
+    d && /* @__PURE__ */ e("div", { className: "alert-action shrink-0 flex items-center", children: d })
   ] });
 };
 export {
-  ee as Alert,
-  ee as default
+  ae as Alert,
+  ae as default
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button, ButtonVariant } from './Button';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport SparkleIcon from './CustomIcons/SparkleIcon';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport type { RenderLink } from './PageLayout/types';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';\n\ninterface AlertButtonConfig {\n    label: string;\n    onClick: () => void;\n    variant?: ButtonVariant;\n    icon?: React.ReactNode;\n}\n\ninterface AlertProps {\n    type?: AlertType;\n    message: string;\n    hasMargin?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** A control at the end of the alert — a link or button that resolves what it reports. */\n    action?: React.ReactNode;\n    /** Replaces the type's status icon: an svg painting with `currentColor`, such as a CustomIcon,\n     *  is drawn in the type's colour at the same size. */\n    icon?: React.ReactNode;\n    /** Makes its message a live region: `role=\"alert\"` for error and warning, `status` otherwise.\n     *  Screen readers reliably announce an `alert` as it mounts; a `status` is read when its\n     *  `message` changes, so keep a live info or success alert mounted. Off by default. */\n    live?: boolean;\n    /** Routes root-relative links in `message` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n}\n\n// Distinct from the imported `getTextColor`, which maps a TextColor to a CSS variable.\n// This maps an AlertType to a TextColor token; both are used in this file.\nconst getAlertTextColor = (alertType: AlertType): TextColor => {\n    switch (alertType) {\n        case 'info':\n            return 'primary';\n        case 'success':\n            return 'success';\n        case 'error':\n            return 'error';\n        case 'warning':\n            return 'warning';\n        // The violet is on `.alert-assistant` itself; inheriting it keeps one definition\n        // rather than a TextColor token that only this alert would ever name.\n        case 'assistant':\n            return 'inherit';\n        default:\n            return 'primary';\n    }\n};\n\nconst ICON_STYLE = {\n    width: '13px',\n    height: '13px',\n    flexShrink: 0,\n};\n\nconst ICON_COLOR: Record<AlertType, string> = {\n    info: 'var(--malachite-alert-info-foreground)',\n    success: 'var(--malachite-alert-success-foreground)',\n    error: 'var(--malachite-alert-error-foreground)',\n    warning: 'var(--malachite-alert-warning-foreground)',\n    assistant: 'var(--malachite-alert-assistant-foreground)',\n};\n\nconst AlertIcon = {\n    info: (\n        <InfoCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.info }}\n        />\n    ),\n    success: (\n        <CheckCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.success }}\n        />\n    ),\n    error: (\n        <ErrorCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.error }}\n        />\n    ),\n    warning: (\n        <WarningCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.warning }}\n        />\n    ),\n    // The same sparkle the control that produced the message carries, so the two read as\n    // one thread rather than two unrelated affordances.\n    assistant: (\n        <SparkleIcon\n            style={{ ...ICON_STYLE, color: ICON_COLOR.assistant }}\n        />\n    ),\n};\n\nconst statusIcon = (type: AlertType, icon: React.ReactNode) =>\n    icon ? (\n        <span\n            className=\"alert-status-icon inline-flex shrink-0 [&_svg]:size-full!\"\n            style={{ ...ICON_STYLE, color: ICON_COLOR[type] }}\n        >\n            {icon}\n        </span>\n    ) : (\n        AlertIcon[type]\n    );\n\nconst SimpleTextRenderer: React.FC<{\n    text: string;\n    type: AlertType;\n    renderLink?: RenderLink;\n}> = ({ text, type, renderLink }) => {\n    return (\n        <MarkdownBlock\n            text={text}\n            color={getAlertTextColor(type)}\n            size=\"small\"\n            omitMargin\n            renderLink={renderLink}\n        />\n    );\n};\n\nconst Alert: React.FC<AlertProps> = ({\n    type = 'info',\n    message,\n    hasMargin = true,\n    className,\n    children,\n    isExpanded,\n    onToggle,\n    action,\n    icon,\n    live = false,\n    renderLink,\n}) => {\n    const isExpandable = !!children;\n    const urgent = type === 'error' || type === 'warning';\n    const liveRole = live ? (urgent ? 'alert' : 'status') : undefined;\n    const [internalExpanded, setInternalExpanded] = useState(false);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            // Uncontrolled mode\n            setInternalExpanded(newExpanded);\n        }\n        // Call onToggle if provided (for both controlled and uncontrolled)\n        onToggle?.(newExpanded);\n    };\n\n    const alertClasses = [\n        'alert-base',\n        `alert-${type}`,\n        'flex',\n        'w-full', // Ensure full width\n        isExpandable && expanded ? 'flex-col' : 'gap-2 items-center min-h-[2rem]',\n        !hasMargin ? 'alert-no-margin' : '',\n        'text-left',\n        isExpandable ? 'rounded-xl !p-0' : '!px-2.5 !py-1.5', // Slightly more vertical padding for centering\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const headerClasses = [\n        'flex items-center justify-between w-full',\n        isExpandable ? 'gap-2 px-2.5 py-1' : 'gap-2',\n        isExpandable && expanded ? 'rounded-t-xl' : isExpandable ? 'rounded-xl' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const expandableContentClasses = ['w-full', 'overflow-hidden'].filter(Boolean).join(' ');\n\n    // Non-expandable alert (original behavior)\n    if (!isExpandable) {\n        return (\n            <div className={alertClasses}>\n                {statusIcon(type, icon)}\n                <div className=\"flex-1 flex items-center\">\n                    <div className=\"[&>div]:mb-0\" role={liveRole}>\n                        <SimpleTextRenderer text={message} type={type} renderLink={renderLink} />\n                    </div>\n                </div>\n                {action && <div className=\"alert-action shrink-0 flex items-center\">{action}</div>}\n            </div>\n        );\n    }\n\n    // Expandable alert\n    return (\n        <div className={`${alertClasses} alert-expandable`}>\n            {/* Header section with title and expand/collapse button */}\n            <div className={headerClasses}>\n                <div className=\"flex-1 flex gap-2 items-center\">\n                    {statusIcon(type, icon)}\n                    <div className=\"flex-1 flex items-center\">\n                        <div className=\"[&>div]:mb-0\" role={liveRole}>\n                            <SimpleTextRenderer\n                                text={message}\n                                type={type}\n                                renderLink={renderLink}\n                            />\n                        </div>\n                    </div>\n                </div>\n\n                {/* Right side buttons container */}\n                <div className=\"flex items-center gap-2\">\n                    {action && <div className=\"alert-action flex items-center\">{action}</div>}\n                    {/* Expand/collapse button */}\n                    <Button\n                        variant=\"no-style\"\n                        size=\"xsmall\"\n                        onClick={handleToggle}\n                        aria-label={expanded ? 'Collapse' : 'Expand'}\n                        style={{\n                            color: getTextColor(getAlertTextColor(type)),\n                        }}\n                    >\n                        {expanded ? (\n                            <CaretUpIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        ) : (\n                            <CaretDownIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        )}\n                    </Button>\n                </div>\n            </div>\n\n            {/* Expandable content */}\n            {expanded && (\n                <>\n                    <div className={expandableContentClasses}>\n                        <div className=\"bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto\">\n                            {children}\n                        </div>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default Alert;\nexport { Alert };\nexport type { AlertButtonConfig };\n"],"names":["getAlertTextColor","alertType","ICON_STYLE","ICON_COLOR","AlertIcon","jsx","InfoCircleFilled","CheckCircleFilled","ErrorCircleFilled","WarningCircleFilled","SparkleIcon","statusIcon","type","icon","SimpleTextRenderer","text","renderLink","MarkdownBlock","Alert","message","hasMargin","className","children","isExpanded","onToggle","action","live","isExpandable","liveRole","internalExpanded","setInternalExpanded","useState","expanded","handleToggle","newExpanded","alertClasses","headerClasses","expandableContentClasses","jsxs","Button","getTextColor","CaretUpIcon","CaretDownIcon","Fragment"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button, ButtonVariant } from './Button';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport SparkleIcon from './CustomIcons/SparkleIcon';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport type { RenderLink } from './PageLayout/types';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport type { TextColor } from './Typography/Text';\nimport { getFontSize, getTextColor } from './Typography/textStyles';\n\nexport type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';\n\nexport type AlertLayout = 'inline' | 'banner';\n\ninterface AlertButtonConfig {\n    label: string;\n    onClick: () => void;\n    variant?: ButtonVariant;\n    icon?: React.ReactNode;\n}\n\ninterface AlertProps {\n    type?: AlertType;\n    message: string;\n    hasMargin?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** A control at the end of the alert — a link or button that resolves what it reports. */\n    action?: React.ReactNode;\n    /** Replaces the type's status icon: an svg painting with `currentColor`, such as a CustomIcon,\n     *  is drawn in the type's colour at the same size. */\n    icon?: React.ReactNode;\n    /** Makes its message a live region: `role=\"alert\"` for error and warning, `status` otherwise.\n     *  Screen readers reliably announce an `alert` as it mounts; a `status` is read when its\n     *  `message` changes, so keep a live info or success alert mounted. Off by default. */\n    live?: boolean;\n    /** Routes root-relative links in `message` through the app's router; see `MarkdownBlock`. */\n    renderLink?: RenderLink;\n    /** `banner`: a 48px page-wide band. Applies only without `children`. */\n    layout?: AlertLayout;\n    /** A bold sentence the message runs on from. Plain text, not markdown. */\n    lead?: string;\n}\n\n// Distinct from the imported `getTextColor`, which maps a TextColor to a CSS variable.\n// This maps an AlertType to a TextColor token; both are used in this file.\nconst getAlertTextColor = (alertType: AlertType): TextColor => {\n    switch (alertType) {\n        case 'info':\n            return 'primary';\n        case 'success':\n            return 'success';\n        case 'error':\n            return 'error';\n        case 'warning':\n            return 'warning';\n        // The violet is on `.alert-assistant` itself; inheriting it keeps one definition\n        // rather than a TextColor token that only this alert would ever name.\n        case 'assistant':\n            return 'inherit';\n        default:\n            return 'primary';\n    }\n};\n\nconst ICON_STYLE = {\n    width: '13px',\n    height: '13px',\n    flexShrink: 0,\n};\n\nconst ICON_COLOR: Record<AlertType, string> = {\n    info: 'var(--malachite-alert-info-foreground)',\n    success: 'var(--malachite-alert-success-foreground)',\n    error: 'var(--malachite-alert-error-foreground)',\n    warning: 'var(--malachite-alert-warning-foreground)',\n    assistant: 'var(--malachite-alert-assistant-foreground)',\n};\n\nconst AlertIcon = {\n    info: (\n        <InfoCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.info }}\n        />\n    ),\n    success: (\n        <CheckCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.success }}\n        />\n    ),\n    error: (\n        <ErrorCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.error }}\n        />\n    ),\n    warning: (\n        <WarningCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.warning }}\n        />\n    ),\n    // The same sparkle the control that produced the message carries, so the two read as\n    // one thread rather than two unrelated affordances.\n    assistant: (\n        <SparkleIcon\n            style={{ ...ICON_STYLE, color: ICON_COLOR.assistant }}\n        />\n    ),\n};\n\nconst BANNER_ICON_STYLE = { ...ICON_STYLE, width: '16px', height: '16px' };\n\nconst statusIcon = (type: AlertType, icon: React.ReactNode, banner = false) => {\n    if (!icon && !banner) return AlertIcon[type];\n    const style = banner ? BANNER_ICON_STYLE : ICON_STYLE;\n    return (\n        <span\n            className=\"alert-status-icon inline-flex shrink-0 [&_svg]:size-full!\"\n            style={{ ...style, color: ICON_COLOR[type] }}\n        >\n            {icon || AlertIcon[type]}\n        </span>\n    );\n};\n\nconst SimpleTextRenderer: React.FC<{\n    text: string;\n    type: AlertType;\n    lead?: string;\n    renderLink?: RenderLink;\n}> = ({ text, type, lead, renderLink }) => {\n    if (lead) {\n        return (\n            <div className=\"alert-lead\">\n                <strong\n                    style={{\n                        color: getTextColor(getAlertTextColor(type)),\n                        fontSize: getFontSize('small'),\n                        fontWeight: 600,\n                    }}\n                >\n                    {lead}\n                </strong>{' '}\n                <SimpleTextRenderer text={text} type={type} renderLink={renderLink} />\n            </div>\n        );\n    }\n    return (\n        <MarkdownBlock\n            text={text}\n            color={getAlertTextColor(type)}\n            size=\"small\"\n            omitMargin\n            renderLink={renderLink}\n        />\n    );\n};\n\nconst Alert: React.FC<AlertProps> = ({\n    type = 'info',\n    message,\n    hasMargin = true,\n    className,\n    children,\n    isExpanded,\n    onToggle,\n    action,\n    icon,\n    live = false,\n    renderLink,\n    layout = 'inline',\n    lead,\n}) => {\n    const isExpandable = !!children;\n    const banner = layout === 'banner' && !isExpandable;\n    const urgent = type === 'error' || type === 'warning';\n    const liveRole = live ? (urgent ? 'alert' : 'status') : undefined;\n    const [internalExpanded, setInternalExpanded] = useState(false);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            // Uncontrolled mode\n            setInternalExpanded(newExpanded);\n        }\n        // Call onToggle if provided (for both controlled and uncontrolled)\n        onToggle?.(newExpanded);\n    };\n\n    const alertClasses = [\n        'alert-base',\n        `alert-${type}`,\n        'flex',\n        'w-full', // Ensure full width\n        banner\n            ? 'alert-banner'\n            : isExpandable && expanded\n              ? 'flex-col'\n              : 'gap-2 items-center min-h-[2rem]',\n        !hasMargin ? 'alert-no-margin' : '',\n        'text-left',\n        banner ? '' : isExpandable ? 'rounded-xl !p-0' : '!px-2.5 !py-1.5', // Slightly more vertical padding for centering\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const headerClasses = [\n        'flex items-center justify-between w-full',\n        isExpandable ? 'gap-2 px-2.5 py-1' : 'gap-2',\n        isExpandable && expanded ? 'rounded-t-xl' : isExpandable ? 'rounded-xl' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const expandableContentClasses = ['w-full', 'overflow-hidden'].filter(Boolean).join(' ');\n\n    // Non-expandable alert (original behavior)\n    if (!isExpandable) {\n        return (\n            <div className={alertClasses}>\n                {statusIcon(type, icon, banner)}\n                <div className=\"flex-1 flex items-center\">\n                    <div className=\"[&>div]:mb-0\" role={liveRole}>\n                        <SimpleTextRenderer\n                            text={message}\n                            type={type}\n                            lead={lead}\n                            renderLink={renderLink}\n                        />\n                    </div>\n                </div>\n                {action && <div className=\"alert-action shrink-0 flex items-center\">{action}</div>}\n            </div>\n        );\n    }\n\n    // Expandable alert\n    return (\n        <div className={`${alertClasses} alert-expandable`}>\n            {/* Header section with title and expand/collapse button */}\n            <div className={headerClasses}>\n                <div className=\"flex-1 flex gap-2 items-center\">\n                    {statusIcon(type, icon)}\n                    <div className=\"flex-1 flex items-center\">\n                        <div className=\"[&>div]:mb-0\" role={liveRole}>\n                            <SimpleTextRenderer\n                                text={message}\n                                lead={lead}\n                                type={type}\n                                renderLink={renderLink}\n                            />\n                        </div>\n                    </div>\n                </div>\n\n                {/* Right side buttons container */}\n                <div className=\"flex items-center gap-2\">\n                    {action && <div className=\"alert-action flex items-center\">{action}</div>}\n                    {/* Expand/collapse button */}\n                    <Button\n                        variant=\"no-style\"\n                        size=\"xsmall\"\n                        onClick={handleToggle}\n                        aria-label={expanded ? 'Collapse' : 'Expand'}\n                        style={{\n                            color: getTextColor(getAlertTextColor(type)),\n                        }}\n                    >\n                        {expanded ? (\n                            <CaretUpIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        ) : (\n                            <CaretDownIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        )}\n                    </Button>\n                </div>\n            </div>\n\n            {/* Expandable content */}\n            {expanded && (\n                <>\n                    <div className={expandableContentClasses}>\n                        <div className=\"bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto\">\n                            {children}\n                        </div>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default Alert;\nexport { Alert };\nexport type { AlertButtonConfig };\n"],"names":["getAlertTextColor","alertType","ICON_STYLE","ICON_COLOR","AlertIcon","jsx","InfoCircleFilled","CheckCircleFilled","ErrorCircleFilled","WarningCircleFilled","SparkleIcon","BANNER_ICON_STYLE","statusIcon","type","icon","banner","SimpleTextRenderer","text","lead","renderLink","jsxs","getTextColor","getFontSize","MarkdownBlock","Alert","message","hasMargin","className","children","isExpanded","onToggle","action","live","layout","isExpandable","liveRole","internalExpanded","setInternalExpanded","useState","expanded","handleToggle","newExpanded","alertClasses","headerClasses","expandableContentClasses","Button","CaretUpIcon","CaretDownIcon","Fragment"],"mappings":"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"}

package/dist/components/Button.js

@@ -1,27 +1,27 @@
 import { jsx as r, jsxs as i, Fragment as d } from "react/jsx-runtime";
-import { forwardRef as O } from "react";
-import T from "./Tooltip.js";
-import { getIconOnlySizeClasses as U, getIconSizeClass as V } from "./buttonSizing.js";
-import { resolveRel as W } from "./linkRel.js";
-const A = (s) => {
-  switch (s) {
+import { forwardRef as E } from "react";
+import H from "./Tooltip.js";
+import { getIconOnlySizeClasses as M, getIconSizeClass as q } from "./buttonSizing.js";
+import { resolveRel as D } from "./linkRel.js";
+const O = (t) => {
+  switch (t) {
     // Figma has no text X-Small button, only the icon-only square — nothing to align to.
     case "xsmall":
-      return "px-2 py-1 text-xs";
+      return "[--btn-px:calc(var(--spacing)*2)] px-[var(--btn-px)] py-1 text-xs";
     case "small":
-      return "min-h-[var(--malachite-control-height-small,28px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
+      return "min-h-[var(--malachite-control-height-small,28px)] [--btn-px:10px] px-[var(--btn-px)] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
     case "medium":
-      return "min-h-[var(--malachite-control-height-medium,32px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
+      return "min-h-[var(--malachite-control-height-medium,32px)] [--btn-px:10px] px-[var(--btn-px)] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
     case "large":
-      return "min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
+      return "min-h-[var(--malachite-control-height-large,42px)] [--btn-px:12px] px-[var(--btn-px)] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
     default:
-      return "min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
+      return "min-h-[var(--malachite-control-height-large,42px)] [--btn-px:12px] px-[var(--btn-px)] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
   }
-}, D = (s, t) => {
-  switch (s) {
+}, T = "-mx-[calc(var(--btn-px)+1px)]", V = "-mx-[var(--btn-px)]", W = (t, a) => {
+  switch (t) {
     // Only the square rounds at 8px — text buttons at this size keep their 6px corner.
     case "xsmall":
-      return t ? "rounded-lg" : "rounded-md";
+      return a ? "rounded-lg" : "rounded-md";
     case "small":
       return "rounded-[var(--malachite-radius-10,10px)]";
     case "medium":
@@ -31,17 +31,17 @@ const A = (s) => {
     default:
       return "rounded-[var(--malachite-radius-xxl,14px)]";
   }
-}, k = (s, t) => {
-  const e = t === "start";
-  switch (s) {
+}, R = (t, a) => {
+  const e = a === "start";
+  switch (t) {
     case "small":
     case "medium":
       return e ? "mr-[6px]" : "ml-[6px]";
     default:
       return e ? "mr-2" : "ml-2";
   }
-}, E = (s) => {
-  switch (s) {
+}, G = (t) => {
+  switch (t) {
     case "md":
       return "rounded-md";
     case "lg":
@@ -51,40 +51,43 @@ const A = (s) => {
     default:
       return "rounded-xl";
   }
-}, a = {
+}, s = {
   neutral: "focus-visible:[outline:2px_solid_var(--malachite-text-primary)]",
   destructive: "focus-visible:[outline:2px_solid_var(--malachite-text-destructive)]",
   success: "focus-visible:[outline:2px_solid_var(--malachite-text-success)]",
   warning: "focus-visible:[outline:2px_solid_var(--malachite-text-warning)]",
   error: "focus-visible:[outline:2px_solid_var(--malachite-text-error)]",
-  assistant: "focus-visible:[outline:2px_solid_var(--malachite-assistant-foreground)]"
-}, H = (s, t) => {
-  const e = `font-medium transition-[color,background-color,border-color,opacity,box-shadow] duration-200 ease-in-out outline-none focus-visible:outline-offset-2 border border-solid ${t} cursor-pointer`;
-  switch (s) {
+  assistant: "focus-visible:[outline:2px_solid_var(--malachite-assistant-foreground)]",
+  accent: "focus-visible:[outline:2px_solid_var(--malachite-accent-foreground)]"
+}, J = (t, a) => {
+  const e = `font-medium transition-[color,background-color,border-color,opacity,box-shadow] duration-200 ease-in-out outline-none focus-visible:outline-offset-2 border border-solid ${a} cursor-pointer`;
+  switch (t) {
     case "filled":
-      return `${e} ${a.neutral} btn-filled shadow-default`;
+      return `${e} ${s.neutral} btn-filled shadow-default`;
     case "outline":
-      return `${e} ${a.neutral} btn-outline shadow-default`;
+      return `${e} ${s.neutral} btn-outline shadow-default`;
     case "surface":
-      return `${e} ${a.neutral} btn-surface shadow-default`;
+      return `${e} ${s.neutral} btn-surface shadow-default`;
     case "assistant":
-      return `${e} ${a.assistant} btn-assistant shadow-default`;
+      return `${e} ${s.assistant} btn-assistant shadow-default`;
     case "destructive":
-      return `${e} ${a.destructive} btn-destructive`;
+      return `${e} ${s.destructive} btn-destructive`;
     case "success":
-      return `${e} ${a.success} btn-glass-success`;
+      return `${e} ${s.success} btn-glass-success`;
     case "warning":
-      return `${e} ${a.warning} btn-glass-warning`;
+      return `${e} ${s.warning} btn-glass-warning`;
     case "error":
-      return `${e} ${a.error} btn-glass-error`;
+      return `${e} ${s.error} btn-glass-error`;
     case "ghost":
-      return `${e} ${a.neutral} btn-ghost`;
+      return `${e} ${s.neutral} btn-ghost`;
+    case "quiet":
+      return `${e} ${s.accent} btn-quiet`;
     case "no-style":
-      return `${e} ${a.neutral} btn-no-style border-none`;
+      return `${e} ${s.neutral} btn-no-style border-none`;
     default:
-      return `${e} ${a.neutral} btn-filled shadow-default`;
+      return `${e} ${s.neutral} btn-filled shadow-default`;
   }
-}, M = () => /* @__PURE__ */ i(
+}, K = () => /* @__PURE__ */ i(
   "svg",
   {
     className: "animate-spin -ml-1 mr-2 h-4 w-4",
@@ -113,103 +116,107 @@ const A = (s) => {
       )
     ]
   }
-), q = O(
+), Q = E(
   ({
-    variant: s,
-    size: t = "large",
+    variant: t,
+    size: a = "large",
     radius: e,
-    loading: f = !1,
-    disabled: j = !1,
-    icon: o,
-    iconPosition: g = "start",
+    loading: g = !1,
+    disabled: I = !1,
+    icon: c,
+    iconPosition: b = "start",
     leading: v,
-    contentAlign: I = "center",
+    contentAlign: k = "center",
     flexGrow: m = !1,
-    fill: z = !1,
+    width: j = "auto",
+    fill: B = !1,
     tooltip: x,
-    tooltipPlacement: B = "top",
-    iconOnly: w = !1,
+    tooltipPlacement: L = "top",
+    iconOnly: p = !1,
+    flush: z = !1,
     children: n,
-    className: R = "",
-    href: b,
+    className: F = "",
+    href: w,
     target: $,
-    rel: F,
-    ...C
-  }, _) => {
-    const L = e ? E(e) : D(t, w), l = j || f, N = I === "start", y = [
+    rel: U,
+    ..._
+  }, C) => {
+    const A = e ? G(e) : W(a, p), l = I || g, N = k === "start", y = [
       N ? "flex items-center justify-start text-left" : "flex items-center justify-center",
-      w ? `p-0 ${U(t)}` : A(t),
-      H(s, L),
+      p ? `p-0 ${M(a)}` : O(a),
+      J(t, A),
       m ? "w-full" : "",
-      z ? "max-w-full" : "",
+      j === "wide" ? "min-w-[120px]" : "",
+      B ? "max-w-full" : "",
       l ? "cursor-not-allowed" : "",
       x && l ? "pointer-events-none" : "",
-      R
-    ].filter(Boolean).join(" "), c = N ? /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-1 items-center", children: n }) : n, u = v ? /* @__PURE__ */ r(
+      z && !p ? t === "no-style" ? V : T : "",
+      F
+    ].filter(Boolean).join(" "), o = N ? /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-1 items-center", children: n }) : n, u = v ? /* @__PURE__ */ r(
       "span",
       {
         className: n ? "btn-leading inline-flex shrink-0 items-center me-2" : "btn-leading inline-flex shrink-0 items-center",
         children: v
       }
     ) : null, S = () => {
-      if (f)
+      if (g)
         return /* @__PURE__ */ i(d, { children: [
           u,
-          /* @__PURE__ */ r(M, {}),
-          c
+          /* @__PURE__ */ r(K, {}),
+          o
         ] });
-      const h = `inline-flex items-center shrink-0 ${V(t)}`;
-      return o && g === "start" ? /* @__PURE__ */ i(d, { children: [
+      const f = `inline-flex items-center shrink-0 ${q(a)}`;
+      return c && b === "start" ? /* @__PURE__ */ i(d, { children: [
         u,
         /* @__PURE__ */ r(
           "span",
           {
-            className: `${h}${n ? ` ${k(t, "start")}` : ""}`,
-            children: o
+            className: `${f}${n ? ` ${R(a, "start")}` : ""}`,
+            children: c
           }
         ),
-        c
-      ] }) : o && g === "end" ? /* @__PURE__ */ i(d, { children: [
+        o
+      ] }) : c && b === "end" ? /* @__PURE__ */ i(d, { children: [
         u,
-        c,
+        o,
         /* @__PURE__ */ r(
           "span",
           {
-            className: `${h}${n ? ` ${k(t, "end")}` : ""}`,
-            children: o
+            className: `${f}${n ? ` ${R(a, "end")}` : ""}`,
+            children: c
           }
         )
       ] }) : /* @__PURE__ */ i(d, { children: [
         u,
-        c
+        o
       ] });
-    }, p = b && !l ? /* @__PURE__ */ r(
+    }, h = w && !l ? /* @__PURE__ */ r(
       "a",
       {
-        ref: _,
-        href: b,
+        ref: C,
+        href: w,
         target: $,
-        rel: W(F, $),
+        rel: D(U, $),
         className: y,
-        ...C,
+        ..._,
         children: S()
       }
     ) : /* @__PURE__ */ r(
       "button",
       {
-        ref: _,
+        ref: C,
         disabled: l,
         className: y,
-        ...C,
+        ..._,
         children: S()
       }
     );
-    return x ? /* @__PURE__ */ r(T, { text: x, placement: B, fill: m, children: l ? /* @__PURE__ */ r("span", { className: `inline-flex cursor-not-allowed${m ? " w-full" : ""}`, children: p }) : p }) : p;
+    return x ? /* @__PURE__ */ r(H, { text: x, placement: L, fill: m, children: l ? /* @__PURE__ */ r("span", { className: `inline-flex cursor-not-allowed${m ? " w-full" : ""}`, children: h }) : h }) : h;
   }
 );
-q.displayName = "Button";
+Q.displayName = "Button";
 export {
-  q as Button,
-  q as default
+  Q as Button,
+  Q as default
 };
 //# sourceMappingURL=Button.js.map