@stackone/malachite 2.72.0 → 2.74.0

package/dist/components/Button.js

@@ -1,217 +1,106 @@
-import { jsx as r, jsxs as i, Fragment as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as o } from "react/jsx-runtime";
 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 "[--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)] [--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)] [--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)] [--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)] [--btn-px:12px] px-[var(--btn-px)] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
-  }
-}, 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 a ? "rounded-lg" : "rounded-md";
-    case "small":
-      return "rounded-[var(--malachite-radius-10,10px)]";
-    case "medium":
-      return "rounded-xl";
-    case "large":
-      return "rounded-[var(--malachite-radius-xxl,14px)]";
-    default:
-      return "rounded-[var(--malachite-radius-xxl,14px)]";
-  }
-}, 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";
-  }
-}, G = (t) => {
-  switch (t) {
-    case "md":
-      return "rounded-md";
-    case "lg":
-      return "rounded-lg";
-    case "xl":
-      return "rounded-xl";
-    default:
-      return "rounded-xl";
-  }
-}, 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)]",
-  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} ${s.neutral} btn-filled shadow-default`;
-    case "outline":
-      return `${e} ${s.neutral} btn-outline shadow-default`;
-    case "surface":
-      return `${e} ${s.neutral} btn-surface shadow-default`;
-    case "assistant":
-      return `${e} ${s.assistant} btn-assistant shadow-default`;
-    case "destructive":
-      return `${e} ${s.destructive} btn-destructive`;
-    case "success":
-      return `${e} ${s.success} btn-glass-success`;
-    case "warning":
-      return `${e} ${s.warning} btn-glass-warning`;
-    case "error":
-      return `${e} ${s.error} btn-glass-error`;
-    case "ghost":
-      return `${e} ${s.neutral} btn-ghost`;
-    case "quiet":
-      return `${e} ${s.accent} btn-quiet`;
-    case "no-style":
-      return `${e} ${s.neutral} btn-no-style border-none`;
-    default:
-      return `${e} ${s.neutral} btn-filled shadow-default`;
-  }
-}, K = () => /* @__PURE__ */ i(
-  "svg",
-  {
-    className: "animate-spin -ml-1 mr-2 h-4 w-4",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    children: [
-      /* @__PURE__ */ r(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          className: "opacity-75",
-          fill: "currentColor",
-          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        }
-      )
-    ]
-  }
-), Q = E(
+import { ButtonSpinner as H } from "./ButtonSpinner.js";
+import M from "./Tooltip.js";
+import { getIconOnlySizeClasses as U, getIconSizeClass as G } from "./buttonSizing.js";
+import { getSizeClasses as T, getVariantClasses as V, getIconGapClass as j, getRadiusClass as W, getDefaultRadiusClass as q } from "./buttonStyles.js";
+import { resolveRel as J } from "./linkRel.js";
+const K = "-mx-[calc(var(--btn-px)+1px)]", O = "-mx-[var(--btn-px)]", Q = E(
   ({
-    variant: t,
-    size: a = "large",
-    radius: e,
+    variant: d,
+    size: t = "large",
+    radius: x,
     loading: g = !1,
-    disabled: I = !1,
-    icon: c,
-    iconPosition: b = "start",
-    leading: v,
-    contentAlign: k = "center",
-    flexGrow: m = !1,
-    width: j = "auto",
-    fill: B = !1,
-    tooltip: x,
-    tooltipPlacement: L = "top",
-    iconOnly: p = !1,
-    flush: z = !1,
-    children: n,
-    className: F = "",
-    href: w,
-    target: $,
-    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",
-      p ? `p-0 ${M(a)}` : O(a),
-      J(t, A),
-      m ? "w-full" : "",
-      j === "wide" ? "min-w-[120px]" : "",
-      B ? "max-w-full" : "",
-      l ? "cursor-not-allowed" : "",
-      x && l ? "pointer-events-none" : "",
-      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(
+    disabled: B = !1,
+    icon: l,
+    iconPosition: C = "start",
+    leading: N,
+    contentAlign: v = "center",
+    flexGrow: c = !1,
+    width: k = "auto",
+    fill: y = !1,
+    tooltip: m,
+    tooltipPlacement: F = "top",
+    iconOnly: f = !1,
+    flush: L = !1,
+    children: s,
+    className: _ = "",
+    href: S,
+    target: b,
+    rel: A,
+    ...h
+  }, $) => {
+    const D = x ? W(x) : q(t, f), n = B || g, R = v === "start", w = [
+      R ? "flex items-center justify-start text-left" : "flex items-center justify-center",
+      f ? `p-0 ${U(t)}` : T(t),
+      V(d, D),
+      c ? "w-full" : "",
+      k === "wide" ? "min-w-[120px]" : "",
+      y ? "max-w-full" : "",
+      n ? "cursor-not-allowed" : "",
+      m && n ? "pointer-events-none" : "",
+      L && !f ? d === "no-style" ? O : K : "",
+      _
+    ].filter(Boolean).join(" "), a = R ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center", children: s }) : s, r = N ? /* @__PURE__ */ e(
       "span",
       {
-        className: n ? "btn-leading inline-flex shrink-0 items-center me-2" : "btn-leading inline-flex shrink-0 items-center",
-        children: v
+        className: s ? "btn-leading inline-flex shrink-0 items-center me-2" : "btn-leading inline-flex shrink-0 items-center",
+        children: N
       }
-    ) : null, S = () => {
+    ) : null, I = () => {
       if (g)
-        return /* @__PURE__ */ i(d, { children: [
-          u,
-          /* @__PURE__ */ r(K, {}),
-          o
+        return /* @__PURE__ */ i(o, { children: [
+          r,
+          /* @__PURE__ */ e(H, {}),
+          a
         ] });
-      const f = `inline-flex items-center shrink-0 ${q(a)}`;
-      return c && b === "start" ? /* @__PURE__ */ i(d, { children: [
-        u,
-        /* @__PURE__ */ r(
+      const p = `inline-flex items-center shrink-0 ${G(t)}`;
+      return l && C === "start" ? /* @__PURE__ */ i(o, { children: [
+        r,
+        /* @__PURE__ */ e(
           "span",
           {
-            className: `${f}${n ? ` ${R(a, "start")}` : ""}`,
-            children: c
+            className: `${p}${s ? ` ${j(t, "start")}` : ""}`,
+            children: l
           }
         ),
-        o
-      ] }) : c && b === "end" ? /* @__PURE__ */ i(d, { children: [
-        u,
-        o,
-        /* @__PURE__ */ r(
+        a
+      ] }) : l && C === "end" ? /* @__PURE__ */ i(o, { children: [
+        r,
+        a,
+        /* @__PURE__ */ e(
           "span",
           {
-            className: `${f}${n ? ` ${R(a, "end")}` : ""}`,
-            children: c
+            className: `${p}${s ? ` ${j(t, "end")}` : ""}`,
+            children: l
           }
         )
-      ] }) : /* @__PURE__ */ i(d, { children: [
-        u,
-        o
+      ] }) : /* @__PURE__ */ i(o, { children: [
+        r,
+        a
       ] });
-    }, h = w && !l ? /* @__PURE__ */ r(
+    }, u = S && !n ? /* @__PURE__ */ e(
       "a",
       {
-        ref: C,
-        href: w,
-        target: $,
-        rel: D(U, $),
-        className: y,
-        ..._,
-        children: S()
+        ref: $,
+        href: S,
+        target: b,
+        rel: J(A, b),
+        className: w,
+        ...h,
+        children: I()
       }
-    ) : /* @__PURE__ */ r(
+    ) : /* @__PURE__ */ e(
       "button",
       {
-        ref: C,
-        disabled: l,
-        className: y,
-        ..._,
-        children: S()
+        ref: $,
+        disabled: n,
+        className: w,
+        ...h,
+        children: I()
       }
     );
-    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;
+    return m ? /* @__PURE__ */ e(M, { text: m, placement: F, fill: c, children: n ? /* @__PURE__ */ e("span", { className: `inline-flex cursor-not-allowed${c ? " w-full" : ""}`, children: u }) : u }) : u;
   }
 );
 Q.displayName = "Button";

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { getIconOnlySizeClasses, getIconSizeClass } from './buttonSizing';\nimport { resolveRel } from './linkRel';\n\n// Button variant types matching the old component\nexport type ButtonVariant =\n    | 'filled'\n    | 'outline'\n    /**\n     * `outline`'s geometry on a ground of its own. For a button sitting on a tinted or\n     * patterned surface, where `outline`'s transparent background lets that surface through\n     * and the control stops reading as a button.\n     */\n    | 'surface'\n    /**\n     * The violet the assistant is named in elsewhere — for a control that hands work to it, or\n     * acts on what it produced. Provenance, not a severity: it says who is being asked, not\n     * that anything is wrong.\n     */\n    | 'assistant'\n    | 'destructive'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'ghost'\n    /** Text only, in the accent colour, for a secondary action beside a primary one. */\n    | 'quiet'\n    | 'no-style';\n\nexport type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';\n\nexport type ButtonRadius = 'md' | 'lg' | 'xl';\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    variant: ButtonVariant;\n    size?: ButtonSize;\n    radius?: ButtonRadius;\n    loading?: boolean;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n    iconPosition?: 'start' | 'end';\n    /** Before the label at its own size, never squeezed (an avatar); pairs with an end `icon`. */\n    leading?: React.ReactNode;\n    /** `start` aligns the label to the leading edge and pins an end `icon` to the far edge. */\n    contentAlign?: 'center' | 'start';\n    /** Fills the container's width. */\n    flexGrow?: boolean;\n    /** `wide` holds a 120px floor for a primary action. */\n    width?: 'auto' | 'wide';\n    fill?: boolean;\n    tooltip?: string;\n    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n    iconOnly?: boolean;\n    /** Pulls a borderless button out by its own padding, so its label lines up with the text around it. */\n    flush?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>;\n    /** Renders the button as a real anchor, so a link action is never an <a> nested in a <button>. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n}\n\n// Geometry from the Figma component library, which is variant-independent.\n// `min-h` not `h`: Tailwind emits `h-*` after `min-h-*`, so a hard height would beat a\n// consumer's own `h-*`. Paired with `whitespace-nowrap` (as Figma has it) so a long label\n// cannot wrap into a line the height would clip.\nconst getSizeClasses = (size: ButtonSize) => {\n    switch (size) {\n        // Figma has no text X-Small button, only the icon-only square — nothing to align to.\n        case 'xsmall':\n            return '[--btn-px:calc(var(--spacing)*2)] px-[var(--btn-px)] py-1 text-xs';\n        case 'small':\n            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';\n        case 'medium':\n            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';\n        case 'large':\n            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';\n        default:\n            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';\n    }\n};\n\n// The 1px is the transparent border, which `no-style` drops.\nconst FLUSH_MARGIN = '-mx-[calc(var(--btn-px)+1px)]';\nconst FLUSH_MARGIN_BORDERLESS = '-mx-[var(--btn-px)]';\n\n// `rounded-*` reads the malachite radius tokens via `@theme`, so these follow the theme.\n// An explicit `radius` prop still wins, via getRadiusClass.\nconst getDefaultRadiusClass = (size: ButtonSize, iconOnly: boolean): string => {\n    switch (size) {\n        // Only the square rounds at 8px — text buttons at this size keep their 6px corner.\n        case 'xsmall':\n            return iconOnly ? 'rounded-lg' : 'rounded-md';\n        case 'small':\n            return 'rounded-[var(--malachite-radius-10,10px)]';\n        case 'medium':\n            return 'rounded-xl';\n        case 'large':\n            return 'rounded-[var(--malachite-radius-xxl,14px)]';\n        default:\n            return 'rounded-[var(--malachite-radius-xxl,14px)]';\n    }\n};\n\n// Figma pairs a 6px icon gap with the 13px tiers and 8px with the 15px tier.\nconst getIconGapClass = (size: ButtonSize, position: 'start' | 'end'): string => {\n    const start = position === 'start';\n    switch (size) {\n        case 'small':\n        case 'medium':\n            return start ? 'mr-[6px]' : 'ml-[6px]';\n        default:\n            return start ? 'mr-2' : 'ml-2';\n    }\n};\n\nconst getRadiusClass = (radius: ButtonRadius): string => {\n    switch (radius) {\n        case 'md':\n            return 'rounded-md';\n        case 'lg':\n            return 'rounded-lg';\n        case 'xl':\n            return 'rounded-xl';\n        default:\n            return 'rounded-xl';\n    }\n};\n\n// Focus ring: a `focus-visible` outline (keyboard only), coloured to match the variant.\n// Uses `outline` rather than Tailwind's `ring-*` because ring composes `--tw-ring-*`\n// custom properties via box-shadow that rely on document-level @property registration\n// and silently don't paint inside a shadow root (same class of issue as transform\n// utilities). The classes are full literals so Tailwind's JIT can generate them.\nconst FOCUS_OUTLINE = {\n    neutral: 'focus-visible:[outline:2px_solid_var(--malachite-text-primary)]',\n    destructive: 'focus-visible:[outline:2px_solid_var(--malachite-text-destructive)]',\n    success: 'focus-visible:[outline:2px_solid_var(--malachite-text-success)]',\n    warning: 'focus-visible:[outline:2px_solid_var(--malachite-text-warning)]',\n    error: 'focus-visible:[outline:2px_solid_var(--malachite-text-error)]',\n    assistant: 'focus-visible:[outline:2px_solid_var(--malachite-assistant-foreground)]',\n    accent: 'focus-visible:[outline:2px_solid_var(--malachite-accent-foreground)]',\n};\n\nconst getVariantClasses = (variant: ButtonVariant, radiusClass: string): string => {\n    const baseClasses = `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 ${radiusClass} cursor-pointer`;\n\n    switch (variant) {\n        case 'filled':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-filled shadow-default`;\n\n        case 'outline':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-outline shadow-default`;\n\n        case 'surface':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-surface shadow-default`;\n\n        case 'assistant':\n            return `${baseClasses} ${FOCUS_OUTLINE.assistant} btn-assistant shadow-default`;\n\n        case 'destructive':\n            return `${baseClasses} ${FOCUS_OUTLINE.destructive} btn-destructive`;\n\n        case 'success':\n            return `${baseClasses} ${FOCUS_OUTLINE.success} btn-glass-success`;\n\n        case 'warning':\n            return `${baseClasses} ${FOCUS_OUTLINE.warning} btn-glass-warning`;\n\n        case 'error':\n            return `${baseClasses} ${FOCUS_OUTLINE.error} btn-glass-error`;\n\n        case 'ghost':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-ghost`;\n\n        case 'quiet':\n            return `${baseClasses} ${FOCUS_OUTLINE.accent} btn-quiet`;\n\n        case 'no-style':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-no-style border-none`;\n\n        default:\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-filled shadow-default`;\n    }\n};\n\nconst LoadingSpinner = () => (\n    <svg\n        className=\"animate-spin -ml-1 mr-2 h-4 w-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n    >\n        <circle\n            className=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n        />\n        <path\n            className=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n    </svg>\n);\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (\n        {\n            variant,\n            size = 'large',\n            radius,\n            loading = false,\n            disabled = false,\n            icon,\n            iconPosition = 'start',\n            leading,\n            contentAlign = 'center',\n            flexGrow = false,\n            width = 'auto',\n            fill = false,\n            tooltip,\n            tooltipPlacement = 'top',\n            iconOnly = false,\n            flush = false,\n            children,\n            className = '',\n            href,\n            target,\n            rel,\n            ...props\n        },\n        ref,\n    ) => {\n        const radiusClass = radius ? getRadiusClass(radius) : getDefaultRadiusClass(size, iconOnly);\n        const isInactive = disabled || loading;\n        const alignStart = contentAlign === 'start';\n        const baseClasses = [\n            alignStart\n                ? 'flex items-center justify-start text-left'\n                : 'flex items-center justify-center',\n            iconOnly ? `p-0 ${getIconOnlySizeClasses(size)}` : getSizeClasses(size),\n            getVariantClasses(variant, radiusClass),\n            flexGrow ? 'w-full' : '',\n            width === 'wide' ? 'min-w-[120px]' : '',\n            fill ? 'max-w-full' : '',\n            isInactive ? 'cursor-not-allowed' : '',\n            tooltip && isInactive ? 'pointer-events-none' : '',\n            flush && !iconOnly\n                ? variant === 'no-style'\n                    ? FLUSH_MARGIN_BORDERLESS\n                    : FLUSH_MARGIN\n                : '',\n            className,\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const label = alignStart ? (\n            <span className=\"flex min-w-0 flex-1 items-center\">{children}</span>\n        ) : (\n            children\n        );\n\n        const leadingSlot = leading ? (\n            <span\n                className={\n                    children\n                        ? 'btn-leading inline-flex shrink-0 items-center me-2'\n                        : 'btn-leading inline-flex shrink-0 items-center'\n                }\n            >\n                {leading}\n            </span>\n        ) : null;\n\n        const renderContent = () => {\n            if (loading) {\n                return (\n                    <>\n                        {leadingSlot}\n                        <LoadingSpinner />\n                        {label}\n                    </>\n                );\n            }\n\n            const iconWrapperClasses = `inline-flex items-center shrink-0 ${getIconSizeClass(size)}`;\n\n            if (icon && iconPosition === 'start') {\n                return (\n                    <>\n                        {leadingSlot}\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'start')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                        {label}\n                    </>\n                );\n            }\n\n            if (icon && iconPosition === 'end') {\n                return (\n                    <>\n                        {leadingSlot}\n                        {label}\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'end')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                    </>\n                );\n            }\n\n            return (\n                <>\n                    {leadingSlot}\n                    {label}\n                </>\n            );\n        };\n\n        // An anchor cannot be disabled, so an inactive link still renders as a <button>.\n        const button =\n            href && !isInactive ? (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    className={baseClasses}\n                    {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {renderContent()}\n                </a>\n            ) : (\n                <button\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    disabled={isInactive}\n                    className={baseClasses}\n                    {...props}\n                >\n                    {renderContent()}\n                </button>\n            );\n\n        if (tooltip) {\n            const trigger = isInactive ? (\n                <span className={`inline-flex cursor-not-allowed${flexGrow ? ' w-full' : ''}`}>\n                    {button}\n                </span>\n            ) : (\n                button\n            );\n            return (\n                <Tooltip text={tooltip} placement={tooltipPlacement} fill={flexGrow}>\n                    {trigger}\n                </Tooltip>\n            );\n        }\n\n        return button;\n    },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["getSizeClasses","size","FLUSH_MARGIN","FLUSH_MARGIN_BORDERLESS","getDefaultRadiusClass","iconOnly","getIconGapClass","position","start","getRadiusClass","radius","FOCUS_OUTLINE","getVariantClasses","variant","radiusClass","baseClasses","LoadingSpinner","jsxs","jsx","Button","forwardRef","loading","disabled","icon","iconPosition","leading","contentAlign","flexGrow","width","fill","tooltip","tooltipPlacement","flush","children","className","href","target","rel","props","ref","isInactive","alignStart","getIconOnlySizeClasses","label","leadingSlot","renderContent","Fragment","iconWrapperClasses","getIconSizeClass","button","resolveRel","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport ButtonSpinner from './ButtonSpinner';\nimport Tooltip from './Tooltip';\nimport { getIconOnlySizeClasses, getIconSizeClass } from './buttonSizing';\nimport {\n    getDefaultRadiusClass,\n    getIconGapClass,\n    getRadiusClass,\n    getSizeClasses,\n    getVariantClasses,\n} from './buttonStyles';\nimport { resolveRel } from './linkRel';\n\n// Button variant types matching the old component\nexport type ButtonVariant =\n    | 'filled'\n    | 'outline'\n    /**\n     * `outline`'s geometry on a ground of its own. For a button sitting on a tinted or\n     * patterned surface, where `outline`'s transparent background lets that surface through\n     * and the control stops reading as a button.\n     */\n    | 'surface'\n    /**\n     * The violet the assistant is named in elsewhere — for a control that hands work to it, or\n     * acts on what it produced. Provenance, not a severity: it says who is being asked, not\n     * that anything is wrong.\n     */\n    | 'assistant'\n    | 'destructive'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'ghost'\n    /** Text only, in the accent colour, for a secondary action beside a primary one. */\n    | 'quiet'\n    | 'no-style';\n\nexport type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';\n\nexport type ButtonRadius = 'md' | 'lg' | 'xl';\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    variant: ButtonVariant;\n    size?: ButtonSize;\n    radius?: ButtonRadius;\n    loading?: boolean;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n    iconPosition?: 'start' | 'end';\n    /** Before the label at its own size, never squeezed (an avatar); pairs with an end `icon`. */\n    leading?: React.ReactNode;\n    /** `start` aligns the label to the leading edge and pins an end `icon` to the far edge. */\n    contentAlign?: 'center' | 'start';\n    /** Fills the container's width. */\n    flexGrow?: boolean;\n    /** `wide` holds a 120px floor for a primary action. */\n    width?: 'auto' | 'wide';\n    fill?: boolean;\n    tooltip?: string;\n    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n    iconOnly?: boolean;\n    /** Pulls a borderless button out by its own padding, so its label lines up with the text around it. */\n    flush?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>;\n    /** Renders the button as a real anchor, so a link action is never an <a> nested in a <button>. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n}\n\n// The 1px is the transparent border, which `no-style` drops.\nconst FLUSH_MARGIN = '-mx-[calc(var(--btn-px)+1px)]';\nconst FLUSH_MARGIN_BORDERLESS = '-mx-[var(--btn-px)]';\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (\n        {\n            variant,\n            size = 'large',\n            radius,\n            loading = false,\n            disabled = false,\n            icon,\n            iconPosition = 'start',\n            leading,\n            contentAlign = 'center',\n            flexGrow = false,\n            width = 'auto',\n            fill = false,\n            tooltip,\n            tooltipPlacement = 'top',\n            iconOnly = false,\n            flush = false,\n            children,\n            className = '',\n            href,\n            target,\n            rel,\n            ...props\n        },\n        ref,\n    ) => {\n        const radiusClass = radius ? getRadiusClass(radius) : getDefaultRadiusClass(size, iconOnly);\n        const isInactive = disabled || loading;\n        const alignStart = contentAlign === 'start';\n        const baseClasses = [\n            alignStart\n                ? 'flex items-center justify-start text-left'\n                : 'flex items-center justify-center',\n            iconOnly ? `p-0 ${getIconOnlySizeClasses(size)}` : getSizeClasses(size),\n            getVariantClasses(variant, radiusClass),\n            flexGrow ? 'w-full' : '',\n            width === 'wide' ? 'min-w-[120px]' : '',\n            fill ? 'max-w-full' : '',\n            isInactive ? 'cursor-not-allowed' : '',\n            tooltip && isInactive ? 'pointer-events-none' : '',\n            flush && !iconOnly\n                ? variant === 'no-style'\n                    ? FLUSH_MARGIN_BORDERLESS\n                    : FLUSH_MARGIN\n                : '',\n            className,\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const label = alignStart ? (\n            <span className=\"flex min-w-0 flex-1 items-center\">{children}</span>\n        ) : (\n            children\n        );\n\n        const leadingSlot = leading ? (\n            <span\n                className={\n                    children\n                        ? 'btn-leading inline-flex shrink-0 items-center me-2'\n                        : 'btn-leading inline-flex shrink-0 items-center'\n                }\n            >\n                {leading}\n            </span>\n        ) : null;\n\n        const renderContent = () => {\n            if (loading) {\n                return (\n                    <>\n                        {leadingSlot}\n                        <ButtonSpinner />\n                        {label}\n                    </>\n                );\n            }\n\n            const iconWrapperClasses = `inline-flex items-center shrink-0 ${getIconSizeClass(size)}`;\n\n            if (icon && iconPosition === 'start') {\n                return (\n                    <>\n                        {leadingSlot}\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'start')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                        {label}\n                    </>\n                );\n            }\n\n            if (icon && iconPosition === 'end') {\n                return (\n                    <>\n                        {leadingSlot}\n                        {label}\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'end')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                    </>\n                );\n            }\n\n            return (\n                <>\n                    {leadingSlot}\n                    {label}\n                </>\n            );\n        };\n\n        // An anchor cannot be disabled, so an inactive link still renders as a <button>.\n        const button =\n            href && !isInactive ? (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    className={baseClasses}\n                    {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {renderContent()}\n                </a>\n            ) : (\n                <button\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    disabled={isInactive}\n                    className={baseClasses}\n                    {...props}\n                >\n                    {renderContent()}\n                </button>\n            );\n\n        if (tooltip) {\n            const trigger = isInactive ? (\n                <span className={`inline-flex cursor-not-allowed${flexGrow ? ' w-full' : ''}`}>\n                    {button}\n                </span>\n            ) : (\n                button\n            );\n            return (\n                <Tooltip text={tooltip} placement={tooltipPlacement} fill={flexGrow}>\n                    {trigger}\n                </Tooltip>\n            );\n        }\n\n        return button;\n    },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["FLUSH_MARGIN","FLUSH_MARGIN_BORDERLESS","Button","forwardRef","variant","size","radius","loading","disabled","icon","iconPosition","leading","contentAlign","flexGrow","width","fill","tooltip","tooltipPlacement","iconOnly","flush","children","className","href","target","rel","props","ref","radiusClass","getRadiusClass","getDefaultRadiusClass","isInactive","alignStart","baseClasses","getIconOnlySizeClasses","getSizeClasses","getVariantClasses","label","jsx","leadingSlot","renderContent","jsxs","Fragment","ButtonSpinner","iconWrapperClasses","getIconSizeClass","getIconGapClass","button","resolveRel","Tooltip"],"mappings":"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"}

package/dist/components/ButtonSpinner.js

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "animate-spin motion-reduce:animate-none -ml-1 mr-2 h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ o(
+        "circle",
+        {
+          className: "opacity-25 motion-reduce:opacity-100",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          className: "opacity-75 motion-reduce:opacity-0",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
+export {
+  r as ButtonSpinner,
+  r as default
+};
+//# sourceMappingURL=ButtonSpinner.js.map

package/dist/components/ButtonSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSpinner.js","sources":["../../src/components/ButtonSpinner.tsx"],"sourcesContent":["export const ButtonSpinner = () => (\n    <svg\n        className=\"animate-spin motion-reduce:animate-none -ml-1 mr-2 h-4 w-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n    >\n        <circle\n            className=\"opacity-25 motion-reduce:opacity-100\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n        />\n        <path\n            className=\"opacity-75 motion-reduce:opacity-0\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n    </svg>\n);\n\nexport default ButtonSpinner;\n"],"names":["ButtonSpinner","jsxs","jsx"],"mappings":";AAAO,MAAMA,IAAgB,MACzB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IAER,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AACJ;"}

package/dist/components/Flex.js

@@ -1,6 +1,6 @@
 import { jsx as v } from "react/jsx-runtime";
-import { FlexDirection as r, FlexAlign as g, FlexJustify as h, FlexGapSize as e } from "./flexTypes.js";
-const y = (t) => {
+import { FlexDirection as a, FlexAlign as h, FlexJustify as y, FlexGapSize as e } from "./flexTypes.js";
+const F = (t) => {
   switch (t) {
     case e.XSmall:
       return 8;
@@ -11,23 +11,24 @@ const y = (t) => {
     case e.Large:
       return 36;
   }
-}, z = ({
-  justify: t = h.Center,
-  align: o = g.Center,
+}, D = ({
+  justify: t = y.Center,
+  align: o = h.Center,
   gapSize: i,
-  direction: a = r.Horizontal,
+  direction: r = a.Horizontal,
   fullHeight: n = !1,
   grow: s = !1,
   shrink: c = !1,
   wrap: f = !1,
   width: d,
-  id: x,
-  children: u,
-  className: m = ""
+  as: x = "div",
+  id: u,
+  children: m,
+  className: p = ""
 }) => {
-  const l = i ? y(i) : void 0, p = {
+  const l = i ? F(i) : void 0, g = {
     display: "flex",
-    flexDirection: a === r.Vertical ? "column" : "row",
+    flexDirection: r === a.Vertical ? "column" : "row",
     flexWrap: f ? "wrap" : void 0,
     justifyContent: t,
     alignItems: o,
@@ -37,9 +38,9 @@ const y = (t) => {
     minWidth: c ? 0 : void 0,
     width: d || void 0
   };
-  return /* @__PURE__ */ v("div", { id: x, className: m, style: p, children: u });
+  return /* @__PURE__ */ v(x, { id: u, className: p, style: g, children: m });
 };
 export {
-  z as default
+  D as default
 };
 //# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexAlign, FlexDirection, FlexGapSize, FlexJustify } from './flexTypes';\n\n\n\n\n\ninterface FlexProps {\n    justify?: FlexJustify;\n    align?: FlexAlign;\n    gapSize?: FlexGapSize;\n    direction?: FlexDirection;\n    fullHeight?: boolean;\n    grow?: boolean;\n    shrink?: boolean;\n    wrap?: boolean;\n    width?: string;\n    id?: string;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst getGapSize = (size: FlexGapSize): number => {\n    switch (size) {\n        case FlexGapSize.XSmall:\n            return 8;\n        case FlexGapSize.Small:\n            return 12;\n        case FlexGapSize.Medium:\n            return 24;\n        case FlexGapSize.Large:\n            return 36;\n    }\n};\n\nconst Flex: React.FC<FlexProps> = ({\n    justify = FlexJustify.Center,\n    align = FlexAlign.Center,\n    gapSize,\n    direction = FlexDirection.Horizontal,\n    fullHeight = false,\n    grow = false,\n    shrink = false,\n    wrap = false,\n    width,\n    id,\n    children,\n    className = '',\n}) => {\n    const gapSizeValue = gapSize ? getGapSize(gapSize) : undefined;\n\n    // Convert direction to CSS flex-direction\n    const flexDirection = direction === FlexDirection.Vertical ? 'column' : 'row';\n\n    const baseStyle: React.CSSProperties = {\n        display: 'flex',\n        flexDirection,\n        flexWrap: wrap ? 'wrap' : undefined,\n        justifyContent: justify,\n        alignItems: align,\n        gap: gapSizeValue ? `${gapSizeValue}px` : undefined,\n        height: fullHeight ? '100%' : undefined,\n        flex: grow ? 1 : undefined,\n        minWidth: shrink ? 0 : undefined,\n        width: width || undefined,\n    };\n\n    return (\n        <div id={id} className={className} style={baseStyle}>\n            {children}\n        </div>\n    );\n};\n\nexport default Flex;\n"],"names":["getGapSize","size","FlexGapSize","Flex","justify","FlexJustify","align","FlexAlign","gapSize","direction","FlexDirection","fullHeight","grow","shrink","wrap","width","id","children","className","gapSizeValue","baseStyle"],"mappings":";;AAsBA,MAAMA,IAAa,CAACC,MAA8B;AAC9C,UAAQA,GAAA;AAAA,IACJ,KAAKC,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAA4B,CAAC;AAAA,EAC/B,SAAAC,IAAUC,EAAY;AAAA,EACtB,OAAAC,IAAQC,EAAU;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAYC,EAAc;AAAA,EAC1B,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeX,IAAUR,EAAWQ,CAAO,IAAI,QAK/CY,IAAiC;AAAA,IACnC,SAAS;AAAA,IACT,eAJkBX,MAAcC,EAAc,WAAW,WAAW;AAAA,IAKpE,UAAUI,IAAO,SAAS;AAAA,IAC1B,gBAAgBV;AAAA,IAChB,YAAYE;AAAA,IACZ,KAAKa,IAAe,GAAGA,CAAY,OAAO;AAAA,IAC1C,QAAQR,IAAa,SAAS;AAAA,IAC9B,MAAMC,IAAO,IAAI;AAAA,IACjB,UAAUC,IAAS,IAAI;AAAA,IACvB,OAAOE,KAAS;AAAA,EAAA;AAGpB,2BACK,OAAA,EAAI,IAAAC,GAAQ,WAAAE,GAAsB,OAAOE,GACrC,UAAAH,GACL;AAER;"}
+{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexAlign, FlexDirection, FlexGapSize, FlexJustify } from './flexTypes';\n\ninterface FlexProps {\n    justify?: FlexJustify;\n    align?: FlexAlign;\n    gapSize?: FlexGapSize;\n    direction?: FlexDirection;\n    fullHeight?: boolean;\n    grow?: boolean;\n    shrink?: boolean;\n    wrap?: boolean;\n    width?: string;\n    id?: string;\n    /** `span` for content inside a button, such as a clickable `Surface.Row`. */\n    as?: 'div' | 'span';\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst getGapSize = (size: FlexGapSize): number => {\n    switch (size) {\n        case FlexGapSize.XSmall:\n            return 8;\n        case FlexGapSize.Small:\n            return 12;\n        case FlexGapSize.Medium:\n            return 24;\n        case FlexGapSize.Large:\n            return 36;\n    }\n};\n\nconst Flex: React.FC<FlexProps> = ({\n    justify = FlexJustify.Center,\n    align = FlexAlign.Center,\n    gapSize,\n    direction = FlexDirection.Horizontal,\n    fullHeight = false,\n    grow = false,\n    shrink = false,\n    wrap = false,\n    width,\n    as = 'div',\n    id,\n    children,\n    className = '',\n}) => {\n    const gapSizeValue = gapSize ? getGapSize(gapSize) : undefined;\n\n    // Convert direction to CSS flex-direction\n    const flexDirection = direction === FlexDirection.Vertical ? 'column' : 'row';\n\n    const baseStyle: React.CSSProperties = {\n        display: 'flex',\n        flexDirection,\n        flexWrap: wrap ? 'wrap' : undefined,\n        justifyContent: justify,\n        alignItems: align,\n        gap: gapSizeValue ? `${gapSizeValue}px` : undefined,\n        height: fullHeight ? '100%' : undefined,\n        flex: grow ? 1 : undefined,\n        minWidth: shrink ? 0 : undefined,\n        width: width || undefined,\n    };\n\n    const Tag = as;\n    return (\n        <Tag id={id} className={className} style={baseStyle}>\n            {children}\n        </Tag>\n    );\n};\n\nexport default Flex;\n"],"names":["getGapSize","size","FlexGapSize","Flex","justify","FlexJustify","align","FlexAlign","gapSize","direction","FlexDirection","fullHeight","grow","shrink","wrap","width","as","id","children","className","gapSizeValue","baseStyle"],"mappings":";;AAoBA,MAAMA,IAAa,CAACC,MAA8B;AAC9C,UAAQA,GAAA;AAAA,IACJ,KAAKC,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAA4B,CAAC;AAAA,EAC/B,SAAAC,IAAUC,EAAY;AAAA,EACtB,OAAAC,IAAQC,EAAU;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAYC,EAAc;AAAA,EAC1B,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeZ,IAAUR,EAAWQ,CAAO,IAAI,QAK/Ca,IAAiC;AAAA,IACnC,SAAS;AAAA,IACT,eAJkBZ,MAAcC,EAAc,WAAW,WAAW;AAAA,IAKpE,UAAUI,IAAO,SAAS;AAAA,IAC1B,gBAAgBV;AAAA,IAChB,YAAYE;AAAA,IACZ,KAAKc,IAAe,GAAGA,CAAY,OAAO;AAAA,IAC1C,QAAQT,IAAa,SAAS;AAAA,IAC9B,MAAMC,IAAO,IAAI;AAAA,IACjB,UAAUC,IAAS,IAAI;AAAA,IACvB,OAAOE,KAAS;AAAA,EAAA;AAIpB,2BADYC,GAEP,EAAI,IAAAC,GAAQ,WAAAE,GAAsB,OAAOE,GACrC,UAAAH,GACL;AAER;"}

package/dist/components/Sidebar.js

@@ -192,14 +192,10 @@ I.displayName = "Sidebar.Account";
 const Z = (e) => {
   const { collapsed: t } = i();
   return t ? null : /* @__PURE__ */ r("div", { className: "shrink-0 px-3 pt-3 pb-4", children: /* @__PURE__ */ r(O, { ...e }) });
-}, q = ({ children: e }) => /* @__PURE__ */ r(
-  "div",
-  {
-    className: "flex flex-col",
-    style: { width: A - 2 * D },
-    children: e
-  }
-), ce = Object.assign(L, {
+}, q = ({
+  children: e,
+  width: t = A
+}) => /* @__PURE__ */ r("div", { className: "flex flex-col", style: { width: t - 2 * D }, children: e }), ce = Object.assign(L, {
   Header: B,
   Body: G,
   Section: U,

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_TOOLTIP_DELAY_S,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch always shows it.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100';\n\n// The rows' ground, which a `NavItem` puts under its tag. A context channel, not a theme token.\nconst NAVITEM_GROUND = {\n    '--malachite-ctx-navitem-ground': 'var(--malachite-card-sunken-background, rgb(250,250,250))',\n} as React.CSSProperties;\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX, ...NAVITEM_GROUND }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div\n                        className={TOGGLE_LAYER}\n                        style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}\n                    >\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n    /** Shown when `title` is cut off; a node so it can be wrapped. Defaults to `title`. */\n    titleTooltip?: React.ReactNode;\n    /** As `titleTooltip`, for `subtitle`. */\n    subtitleTooltip?: React.ReactNode;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, titleTooltip, subtitleTooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const open = isExpanded(rest['aria-expanded']);\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <TruncatedTooltip\n                                text={titleTooltip ?? title}\n                                placement=\"right\"\n                                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                triggerAs=\"span\"\n                                describesTrigger={false}\n                                suppressed={open}\n                                className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                            >\n                                {title}\n                            </TruncatedTooltip>\n                            {subtitle && (\n                                <TruncatedTooltip\n                                    text={subtitleTooltip ?? subtitle}\n                                    placement=\"right\"\n                                    delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                    triggerAs=\"span\"\n                                    describesTrigger={false}\n                                    suppressed={open}\n                                    className=\"text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\"\n                                >\n                                    {subtitle}\n                                </TruncatedTooltip>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, and expanded when `name` is cut off; a node so `name` can be wrapped.\n     *  Should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <TruncatedTooltip\n                            text={name ? (tooltip ?? name) : undefined}\n                            placement=\"right\"\n                            delay={SIDEBAR_TOOLTIP_DELAY_S}\n                            triggerAs=\"span\"\n                            describesTrigger={false}\n                            suppressed={isExpanded(rest['aria-expanded'])}\n                            className=\"min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                        >\n                            {name}\n                        </TruncatedTooltip>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","NAVITEM_GROUND","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","titleTooltip","subtitleTooltip","className","rest","ref","open","isExpanded","TruncatedTooltip","SIDEBAR_TOOLTIP_DELAY_S","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_TOOLTIP_DELAY_S,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch always shows it.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100';\n\n// The rows' ground, which a `NavItem` puts under its tag. A context channel, not a theme token.\nconst NAVITEM_GROUND = {\n    '--malachite-ctx-navitem-ground': 'var(--malachite-card-sunken-background, rgb(250,250,250))',\n} as React.CSSProperties;\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX, ...NAVITEM_GROUND }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div\n                        className={TOGGLE_LAYER}\n                        style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}\n                    >\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n    /** Shown when `title` is cut off; a node so it can be wrapped. Defaults to `title`. */\n    titleTooltip?: React.ReactNode;\n    /** As `titleTooltip`, for `subtitle`. */\n    subtitleTooltip?: React.ReactNode;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, titleTooltip, subtitleTooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const open = isExpanded(rest['aria-expanded']);\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <TruncatedTooltip\n                                text={titleTooltip ?? title}\n                                placement=\"right\"\n                                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                triggerAs=\"span\"\n                                describesTrigger={false}\n                                suppressed={open}\n                                className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                            >\n                                {title}\n                            </TruncatedTooltip>\n                            {subtitle && (\n                                <TruncatedTooltip\n                                    text={subtitleTooltip ?? subtitle}\n                                    placement=\"right\"\n                                    delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                    triggerAs=\"span\"\n                                    describesTrigger={false}\n                                    suppressed={open}\n                                    className=\"text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\"\n                                >\n                                    {subtitle}\n                                </TruncatedTooltip>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, and expanded when `name` is cut off; a node so `name` can be wrapped.\n     *  Should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <TruncatedTooltip\n                            text={name ? (tooltip ?? name) : undefined}\n                            placement=\"right\"\n                            delay={SIDEBAR_TOOLTIP_DELAY_S}\n                            triggerAs=\"span\"\n                            describesTrigger={false}\n                            suppressed={isExpanded(rest['aria-expanded'])}\n                            className=\"min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                        >\n                            {name}\n                        </TruncatedTooltip>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\n/** `width` widens a popover past the sidebar's, for a menu wider than the control it opens from. */\nconst Panel: React.FC<{ children: React.ReactNode; width?: number }> = ({\n    children,\n    width = SIDEBAR_POPOVER_WIDTH_PX,\n}) => (\n    <div className=\"flex flex-col\" style={{ width: width - 2 * POPOVER_BORDER_PX }}>\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","NAVITEM_GROUND","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","titleTooltip","subtitleTooltip","className","rest","ref","open","isExpanded","TruncatedTooltip","SIDEBAR_TOOLTIP_DELAY_S","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}