@stackone/malachite 2.59.0 → 2.61.0

package/dist/components/Search.js

@@ -1,57 +1,87 @@
-import { jsxs as C, jsx as c } from "react/jsx-runtime";
-import { useState as $ } from "react";
-import y from "./CustomIcons/SearchIcon.js";
-import { CONTROL_TEXT_SIZE_CLASS as w } from "./controlTextSize.js";
-import { controlWidthStyle as E } from "./controlWidth.js";
-const I = {
+import { jsxs as M, jsx as a } from "react/jsx-runtime";
+import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
+import D from "./CustomIcons/DismissIcon.js";
+import P from "./CustomIcons/SearchIcon.js";
+import { composeRefs as z } from "./composeRefs.js";
+import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
+import { controlWidthStyle as L } from "./controlWidth.js";
+import { FOCUS_RING as U } from "./focusRing.js";
+const W = {
   small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
   large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
-}, N = 15, Z = ({
+}, X = 15, q = (c) => c.preventDefault(), te = T(function({
   value: s,
   onChange: n,
-  placeholder: r,
-  size: t = "large",
-  variant: d = "default",
-  disabled: a = !1,
-  autoFocus: i = !1,
-  className: h = "",
-  width: m,
-  style: p
-}) => {
-  const [o, l] = $(!1), e = d === "muted", x = e ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", u = e ? "border-transparent" : "border-[var(--malachite-card-border)]", v = a ? "" : "hover:border-[var(--malachite-text-placeholder)]", g = e ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", b = e ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", f = e ? "none" : o ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
-  return /* @__PURE__ */ C(
+  placeholder: i,
+  size: p = "large",
+  variant: g = "default",
+  disabled: t = !1,
+  autoFocus: S = !1,
+  className: C = "",
+  width: y,
+  style: $,
+  clearable: E = !1,
+  onClear: o,
+  onKeyDown: l,
+  "aria-label": m,
+  "aria-labelledby": d
+}, h) {
+  const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
+    var e;
+    n(""), o == null || o(), (e = f.current) == null || e.focus();
+  }, k = (e) => {
+    l == null || l(e);
+    const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+    e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
+  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", _ = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", F = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", O = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
+  return /* @__PURE__ */ M(
     "div",
     {
-      className: `w-full ${x} border border-solid ${u} ${v} transition-colors flex items-center ${I[t]} ${a ? "opacity-60 cursor-not-allowed" : ""} ${h}`,
+      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
       style: {
-        boxShadow: f,
-        borderColor: o ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
-        ...E(m),
-        ...p
+        boxShadow: O,
+        borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
+        ...L(y),
+        ...$
       },
       children: [
-        /* @__PURE__ */ c(y, { size: N, className: `${g} shrink-0` }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
+        /* @__PURE__ */ a(
           "input",
           {
+            ref: I,
             type: "text",
             value: s,
-            onChange: (S) => n(S.target.value),
-            onFocus: () => l(!0),
-            onBlur: () => l(!1),
-            placeholder: r,
-            "aria-label": r ?? "Search",
-            disabled: a,
-            autoFocus: i,
-            className: `flex-1 bg-transparent border-none outline-none ${w[t]} font-medium text-[var(--malachite-text-primary)] ${b} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+            onChange: (e) => n(e.target.value),
+            onKeyDown: k,
+            onFocus: () => u(!0),
+            onBlur: () => u(!1),
+            placeholder: i,
+            "aria-label": d ? m : m ?? i ?? "Search",
+            "aria-labelledby": d,
+            disabled: t,
+            autoFocus: S,
+            className: `flex-1 bg-transparent border-none outline-none ${G[p]} font-medium text-[var(--malachite-text-primary)] ${F} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+          }
+        ),
+        b && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear search",
+            onMouseDown: q,
+            onClick: v,
+            className: `shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${U}`,
+            children: /* @__PURE__ */ a(D, { size: 10 })
           }
         )
       ]
     }
   );
-};
+});
 export {
-  Z as default
+  te as Search,
+  te as default
 };
 //# sourceMappingURL=Search.js.map

package/dist/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n}\n\nconst Search: React.FC<SearchProps> = ({\n    value,\n    onChange,\n    placeholder,\n    size = 'large',\n    variant = 'default',\n    disabled = false,\n    autoFocus = false,\n    className = '',\n    width,\n    style,\n}) => {\n    const [focused, setFocused] = useState(false);\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={placeholder ?? 'Search'}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n        </div>\n    );\n};\n\nexport default Search;\n"],"names":["SIZE_CLASSES","ICON_SIZE","Search","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","focused","setFocused","useState","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","e","CONTROL_TEXT_SIZE_CLASS"],"mappings":";;;;;AAUA,MAAMA,IAA2C;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAY,IAgBZC,IAAgC,CAAC;AAAA,EACnC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,OAAAC;AACJ,MAAM;AACF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAUT,MAAY,SAKtBU,IAAUD,IACV,sCACA,yCACAE,IAAqBF,IACrB,uBACA,yCAEAG,IAAmBX,IAAW,KAAK,oDACnCY,IAAiBJ,IACjB,2CACA,4CACAK,IAAwBL,IACxB,uDACA,wDACAM,IAAYN,IACZ,SACAH,IACE,4EACA;AAER,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,UAAUN,CAAO,wBAAwBC,CAAkB,IAAIC,CAAgB,wCAAwCnB,EAAaM,CAAI,CAAC,IAAIE,IAAW,kCAAkC,EAAE,IAAIE,CAAS;AAAA,MACpN,OAAO;AAAA,QACH,WAAAY;AAAA,QACA,aAAaT,IACP,kEACA;AAAA,QACN,GAAGW,EAAkBb,CAAK;AAAA,QAC1B,GAAGC;AAAA,MAAA;AAAA,MAGP,UAAA;AAAA,QAAA,gBAAAa,EAACC,KAAW,MAAMzB,GAAW,WAAW,GAAGmB,CAAc,aAAa;AAAA,QACtE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,OAAAtB;AAAA,YACA,UAAU,CAACwB,MAAMvB,EAASuB,EAAE,OAAO,KAAK;AAAA,YACxC,SAAS,MAAMb,EAAW,EAAI;AAAA,YAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,YAC9B,aAAAT;AAAA,YACA,cAAYA,KAAe;AAAA,YAC3B,UAAAG;AAAA,YACA,WAAAC;AAAA,YACA,WAAW,kDAAkDmB,EAAwBtB,CAAI,CAAC,qDAAqDe,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACxK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}

package/dist/components/Surface.js

@@ -1,12 +1,12 @@
-import { jsx as o, jsxs as w } from "react/jsx-runtime";
-import G from "react";
-import { paintOnChild as P } from "./asChild.js";
-import { DisclosureArrow as U } from "./DisclosureArrow.js";
-import { FOCUS_RING_INSET as D } from "./focusRing.js";
+import { jsx as o, jsxs as k } from "react/jsx-runtime";
+import P from "react";
+import { paintOnChild as U } from "./asChild.js";
+import { DisclosureArrow as W } from "./DisclosureArrow.js";
+import { FOCUS_RING_INSET as A } from "./focusRing.js";
 import { resolveRel as $ } from "./linkRel.js";
-import { safeHref as W } from "./safeHref.js";
-import { isRenderableNode as X } from "./renderableNode.js";
-import { FOREGROUND_RESET as H, SELECTED_TEXT_CONTEXT as z, SELECTED_ROW_ACCENT as K, SELECTED_ROW_FOREGROUND as q, SELECTED_ROW_BACKGROUND as T } from "./selectedRow.js";
+import { safeHref as X } from "./safeHref.js";
+import { isRenderableNode as H } from "./renderableNode.js";
+import { FOREGROUND_RESET as z, SELECTED_TEXT_CONTEXT as K, SELECTED_ROW_ACCENT as V, SELECTED_ROW_FOREGROUND as q, SELECTED_ROW_BACKGROUND as D } from "./selectedRow.js";
 const J = {
   default: "",
   muted: "bg-[var(--malachite-card-dimmed-background)]",
@@ -15,157 +15,176 @@ const J = {
 }, M = {
   success: "var(--malachite-tag-success-foreground)",
   error: "var(--malachite-tag-error-foreground)"
-}, Q = "0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)", L = (t) => {
+}, Q = "opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100", Y = "0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)", L = (t) => {
   const {
     children: a,
     divider: r = !1,
     disabled: e = !1,
-    selected: s,
+    selected: i,
     selection: b,
-    tone: c = "default",
+    tone: s = "default",
     className: u = "",
     style: g
-  } = t, d = t.asChild === !0, { onClick: l, href: E, target: i, rel: C, trailing: S, role: n } = d ? {} : t, f = W(E), p = d ? void 0 : t["aria-label"], h = d ? void 0 : t["aria-labelledby"], N = !!(l || f), B = e && (N || d) ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", j = c !== "default", _ = [
+  } = t, d = t.asChild === !0, {
+    onClick: n,
+    href: E,
+    target: c,
+    rel: y,
+    trailing: S,
+    revealTrailing: _,
+    role: l
+  } = d ? {} : t, p = X(E), f = d ? void 0 : t["aria-label"], h = d ? void 0 : t["aria-labelledby"], N = !!(n || p), I = e && (N || d) ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", j = s !== "default", O = [
     "w-full text-left border-0",
-    J[c],
+    J[s],
     r ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
-    B
-  ].filter(Boolean).join(" "), k = [
-    N ? `appearance-none ${j ? "" : "bg-transparent"} p-0 ${D}` : "",
+    I
+  ].filter(Boolean).join(" "), w = [
+    N ? `appearance-none ${j ? "" : "bg-transparent"} p-0 ${A}` : "",
     N && !e ? "cursor-pointer" : ""
-  ].filter(Boolean).join(" "), y = [_, k, u].filter(Boolean).join(" "), F = s && (b ? b === "highlight" : n !== "checkbox") ? {
-    backgroundImage: `linear-gradient(${T}, ${T})`,
+  ].filter(Boolean).join(" "), C = [O, w, u].filter(Boolean).join(" "), F = i === !0 && (b ? b === "highlight" : l !== "checkbox") ? {
+    backgroundImage: `linear-gradient(${D}, ${D})`,
     color: q,
-    boxShadow: `inset 2px 0 0 ${K}`,
-    ...z
-  } : {}, R = M[c], x = { ...R ? {
+    boxShadow: `inset 2px 0 0 ${V}`,
+    ...K
+  } : {}, R = M[s], x = { ...R ? {
     color: R,
     "--malachite-ctx-text-primary": R
-  } : {}, ...F, ...g }, m = n === "radio" || n === "checkbox" ? !!s : void 0, v = m === void 0 && s ? !0 : void 0, O = {
-    role: n,
+  } : {}, ...F, ...g }, m = l === "checkbox" && i === "mixed" ? "mixed" : l === "radio" || l === "checkbox" ? i === !0 : void 0, v = m === void 0 && i === !0 ? !0 : void 0, T = {
+    role: l,
     "aria-checked": m,
     "aria-current": v,
-    "aria-label": p,
+    "aria-label": f,
     "aria-labelledby": h,
-    "aria-disabled": n && e ? !0 : void 0
+    "aria-disabled": l && e ? !0 : void 0
   };
   if (d)
-    return P(a, y, x);
-  if (X(S)) {
-    const I = f && !e ? /* @__PURE__ */ o(
+    return U(a, C, x);
+  if (H(S)) {
+    const G = p && !e ? /* @__PURE__ */ o(
       "a",
       {
-        href: f,
-        target: i,
-        rel: $(C, i),
-        onClick: l,
-        className: `${k} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
-        role: n,
+        href: p,
+        target: c,
+        rel: $(y, c),
+        onClick: n,
+        className: `${w} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
+        role: l,
         "aria-checked": m,
         "aria-current": v,
-        "aria-label": p,
+        "aria-label": f,
         "aria-labelledby": h,
         children: a
       }
-    ) : l ? /* @__PURE__ */ o(
+    ) : n ? /* @__PURE__ */ o(
       "button",
       {
         type: "button",
-        onClick: l,
+        onClick: n,
         disabled: e,
-        className: `${k} border-0 flex-1 min-w-0 text-left`,
-        role: n,
+        className: `${w} border-0 flex-1 min-w-0 text-left`,
+        role: l,
         "aria-checked": m,
         "aria-current": v,
-        "aria-label": p,
+        "aria-label": f,
         "aria-labelledby": h,
         children: a
       }
     ) : (
       // The set goes here, not on the wrapper: `radio` and `checkbox` make their
       // descendants presentational, which would bury a control in the trailing slot.
-      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...O, children: a })
+      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...T, children: a })
     );
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ k(
       "div",
       {
-        className: [_, "flex items-center", u].filter(Boolean).join(" "),
+        className: [
+          O,
+          "flex items-center",
+          _ ? "group/row" : "",
+          u
+        ].filter(Boolean).join(" "),
         style: x,
         children: [
-          I,
-          /* @__PURE__ */ o("div", { className: "shrink-0 flex items-center", children: S })
+          G,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `shrink-0 flex items-center ${_ ? Q : ""}`,
+              children: S
+            }
+          )
         ]
       }
     );
   }
-  return f && !e ? /* @__PURE__ */ o(
+  return p && !e ? /* @__PURE__ */ o(
     "a",
     {
-      href: f,
-      target: i,
-      rel: $(C, i),
-      onClick: l,
-      className: `${y} no-underline text-inherit`,
+      href: p,
+      target: c,
+      rel: $(y, c),
+      onClick: n,
+      className: `${C} no-underline text-inherit`,
       style: x,
-      role: n,
+      role: l,
       "aria-checked": m,
       "aria-current": v,
-      "aria-label": p,
+      "aria-label": f,
       "aria-labelledby": h,
       children: a
     }
-  ) : l ? /* @__PURE__ */ o(
+  ) : n ? /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      onClick: l,
+      onClick: n,
       disabled: e,
-      className: y,
+      className: C,
       style: x,
-      role: n,
+      role: l,
       "aria-checked": m,
       "aria-current": v,
-      "aria-label": p,
+      "aria-label": f,
       "aria-labelledby": h,
       children: a
     }
-  ) : /* @__PURE__ */ o("div", { className: y, style: x, ...O, children: a });
-}, V = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), be = 39, Y = Object.assign(
+  ) : /* @__PURE__ */ o("div", { className: C, style: x, ...T, children: a });
+}, Z = ({ children: t, className: a = "", style: r }) => /* @__PURE__ */ o("div", { className: a, style: r, onClick: (e) => e.stopPropagation(), children: t }), me = 39, ee = Object.assign(
   ({
     header: t,
     children: a,
     expanded: r,
     onToggle: e,
-    sticky: s = !1,
+    sticky: i = !1,
     stickyTopOffset: b = 0,
-    divider: c = !1,
+    divider: s = !1,
     tone: u = "default",
     "aria-label": g,
     className: d = "",
-    style: l
+    style: n
   }) => {
-    const E = G.useId(), i = e ? () => e(!r) : void 0;
-    return /* @__PURE__ */ w(L, { divider: c, tone: u, className: d, style: l, children: [
-      /* @__PURE__ */ w(
+    const E = P.useId(), c = e ? () => e(!r) : void 0;
+    return /* @__PURE__ */ k(L, { divider: s, tone: u, className: d, style: n, children: [
+      /* @__PURE__ */ k(
         "div",
         {
-          className: `group flex items-center w-full ${i ? "cursor-pointer" : ""} ${s && r ? "sticky z-[1] bg-[var(--malachite-card-background)]" : ""}`,
-          style: s && r ? { top: b } : void 0,
-          onClick: i,
+          className: `group flex items-center w-full ${c ? "cursor-pointer" : ""} ${i && r ? "sticky z-[1] bg-[var(--malachite-card-background)]" : ""}`,
+          style: i && r ? { top: b } : void 0,
+          onClick: c,
           role: "presentation",
           children: [
-            /* @__PURE__ */ o("span", { className: "shrink-0 flex items-center pl-[16px] pr-[12px]", children: i && /* @__PURE__ */ o(
+            /* @__PURE__ */ o("span", { className: "shrink-0 flex items-center pl-[16px] pr-[12px]", children: c && /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
-                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${D}`,
+                className: `appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${A}`,
                 "aria-expanded": r,
                 "aria-controls": E,
                 "aria-label": g,
-                onClick: (C) => {
-                  C.stopPropagation(), i();
+                onClick: (y) => {
+                  y.stopPropagation(), c();
                 },
-                children: /* @__PURE__ */ o(U, { expanded: r })
+                children: /* @__PURE__ */ o(W, { expanded: r })
               }
             ) }),
             t
@@ -175,34 +194,34 @@ const J = {
       r && /* @__PURE__ */ o("div", { id: E, children: a })
     ] });
   },
-  { Controls: V }
-), A = ({
+  { Controls: Z }
+), B = ({
   children: t,
   padding: a = !1,
   overflow: r = "hidden",
   role: e,
-  "aria-label": s,
+  "aria-label": i,
   "aria-labelledby": b,
-  className: c = "",
+  className: s = "",
   style: u
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${r === "clip" ? "overflow-clip" : r === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${a ? "py-3 px-4" : ""} ${c}`,
-    style: { boxShadow: Q, ...H, ...u },
+    className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${r === "clip" ? "overflow-clip" : r === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${a ? "py-3 px-4" : ""} ${s}`,
+    style: { boxShadow: Y, ...z, ...u },
     role: e,
-    "aria-label": s,
+    "aria-label": i,
     "aria-labelledby": b,
     children: t
   }
 );
-A.Row = L;
-A.ExpandableRow = Y;
+B.Row = L;
+B.ExpandableRow = ee;
 export {
-  be as EXPANDABLE_ROW_LEAD_PX,
-  A as Surface,
-  Y as SurfaceExpandableRow,
+  me as EXPANDABLE_ROW_LEAD_PX,
+  B as Surface,
+  ee as SurfaceExpandableRow,
   L as SurfaceRow,
-  A as default
+  B as default
 };
 //# sourceMappingURL=Surface.js.map

package/dist/components/Surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { paintOnChild } from './asChild';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\ninterface SurfaceRowChromeProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const { onClick, href: rawHref, target, rel, trailing, role } = asChild\n        ? ({} as SurfaceRowProps)\n        : (props as SurfaceRowProps);\n    // A rejected href (e.g. `javascript:`) leaves the row a button or a plain row, never an anchor.\n    const href = safeHref(rawHref);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                target={target}\n                rel={resolveRel(rel, target)}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\nexport interface SurfaceExpandableRowProps {\n    /** The row itself, laid out across the line. May hold its own controls. */\n    header: React.ReactNode;\n    /** The body, rendered beneath the row while it is open. */\n    children?: React.ReactNode;\n    expanded: boolean;\n    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of\n     *  rows stays in one column whether or not each one has a body. */\n    onToggle?: (expanded: boolean) => void;\n    /**\n     * Pins the row while its body scrolls, so a long body never leaves the reader without\n     * the line it belongs to. Offset by whatever is already pinned above it.\n     */\n    sticky?: boolean;\n    stickyTopOffset?: number;\n    divider?: boolean;\n    tone?: SurfaceRowProps['tone'];\n    /** Names the disclosure control, which is otherwise only an arrow. */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Stops a click inside it from toggling the row, for the cells that hold controls.\n *\n * Explicit rather than sniffing the event's target for an interactive ancestor: a control\n * rendering into a shadow root retargets the event to its host, so the sniff would miss\n * exactly the components most likely to sit in a row.\n */\nconst ExpandableRowControls: React.FC<{\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}> = ({ children, className = '', style }) => (\n    <div className={className} style={style} onClick={(event) => event.stopPropagation()}>\n        {children}\n    </div>\n);\n\n/**\n * A row that opens to reveal a body, for a line that carries its own controls.\n *\n * Not `Accordion`: that puts its header inside the toggle button, so a header holding a\n * dropdown or a second button is invalid. Here the row surface takes the click and a cell\n * opts out with `ExpandableRow.Controls`, while the arrow stays a real button so the\n * keyboard reaches it.\n */\n/**\n * The space before the header: the arrow's own inset, its glyph and the gap after it.\n * Exported so a consumer aligning a column header above these rows offsets by the same\n * amount instead of guessing at it.\n */\nexport const EXPANDABLE_ROW_LEAD_PX = 39;\n\nconst SurfaceExpandableRow: React.FC<SurfaceExpandableRowProps> & {\n    Controls: typeof ExpandableRowControls;\n} = Object.assign(\n    ({\n        header,\n        children,\n        expanded,\n        onToggle,\n        sticky = false,\n        stickyTopOffset = 0,\n        divider = false,\n        tone = 'default',\n        'aria-label': ariaLabel,\n        className = '',\n        style,\n    }: SurfaceExpandableRowProps) => {\n        const bodyId = React.useId();\n        const toggle = onToggle ? () => onToggle(!expanded) : undefined;\n\n        return (\n            <SurfaceRow divider={divider} tone={tone} className={className} style={style}>\n                {/* `group` so the arrow takes its hover state from the whole row. */}\n                <div\n                    className={`group flex items-center w-full ${toggle ? 'cursor-pointer' : ''} ${\n                        sticky && expanded\n                            ? 'sticky z-[1] bg-[var(--malachite-card-background)]'\n                            : ''\n                    }`}\n                    style={sticky && expanded ? { top: stickyTopOffset } : undefined}\n                    // Presentational: the arrow below is the keyboard control, and this only\n                    // widens the pointer target.\n                    onClick={toggle}\n                    role=\"presentation\"\n                >\n                    {/* Reserved whether or not this row opens, so a list stays in one column.\n                        The inset and gap match Accordion's header. */}\n                    <span className=\"shrink-0 flex items-center pl-[16px] pr-[12px]\">\n                        {toggle && (\n                            <button\n                                type=\"button\"\n                                className={`appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${FOCUS_RING_INSET}`}\n                                aria-expanded={expanded}\n                                aria-controls={bodyId}\n                                aria-label={ariaLabel}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    toggle();\n                                }}\n                            >\n                                <DisclosureArrow expanded={expanded} />\n                            </button>\n                        )}\n                    </span>\n                    {header}\n                </div>\n                {expanded && <div id={bodyId}>{children}</div>}\n            </SurfaceRow>\n        );\n    },\n    { Controls: ExpandableRowControls },\n);\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<AnySurfaceRowProps>;\n    ExpandableRow: typeof SurfaceExpandableRow;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\nSurface.ExpandableRow = SurfaceExpandableRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow, SurfaceExpandableRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","className","style","asChild","onClick","rawHref","target","rel","trailing","role","href","safeHref","ariaLabel","ariaLabelledBy","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","isRenderableNode","control","jsx","resolveRel","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { paintOnChild } from './asChild';\nimport DisclosureArrow from './DisclosureArrow';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\ninterface SurfaceRowChromeProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. `'mixed'` is for a `checkbox` row that is partly selected: it announces\n     *  `aria-checked=\"mixed\"` there, never paints and never marks the row current, and counts\n     *  as not selected under any other role. */\n    selected?: boolean | 'mixed';\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /**\n     * Tints the whole row by what it reports. `muted` is a row whose subject is inactive —\n     * not disabled: it stays interactive. `success` and `error` are for a row that carries\n     * an outcome, where the result belongs to the whole line rather than to one cell in it.\n     */\n    tone?: 'default' | 'muted' | 'success' | 'error';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/** Stays an interface under its original name: a consumer may `extends` it. */\nexport interface SurfaceRowProps extends SurfaceRowChromeProps {\n    asChild?: false;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /**\n     * Shows `trailing` only while the row is hovered or holds focus, and while a menu\n     * it opened is still open. Hidden by opacity, so it stays in the tab order; a touch screen,\n     * which has no hover, always shows it.\n     */\n    revealTrailing?: boolean;\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n/**\n * The outcome tones reuse the tag tokens rather than minting row ones, so a row saying \"this\n * passed\" and a tag saying it are the same green wherever the two sit together.\n */\nconst TONE_CLASSES: Record<NonNullable<SurfaceRowProps['tone']>, string> = {\n    default: '',\n    muted: 'bg-[var(--malachite-card-dimmed-background)]',\n    success: 'bg-[var(--malachite-tag-success-background)]',\n    error: 'bg-[var(--malachite-tag-error-background)]',\n};\n\n/**\n * The text an outcome tone carries with it, through the same context channel a selected row\n * uses, so `Typography` inside the row follows the tint instead of staying near-black on it.\n * `color` as well, for row content that is not Typography.\n *\n * Only the outcome tones. `muted` dims its subject rather than recolouring it, and its\n * foreground is the ordinary one.\n */\nconst TONE_FOREGROUNDS: Partial<Record<NonNullable<SurfaceRowProps['tone']>, string>> = {\n    success: 'var(--malachite-tag-success-foreground)',\n    error: 'var(--malachite-tag-error-foreground)',\n};\n\nexport interface SurfaceRowAsChildProps extends SurfaceRowChromeProps {\n    asChild: true;\n    children: React.ReactElement;\n}\n\nexport type AnySurfaceRowProps = SurfaceRowProps | SurfaceRowAsChildProps;\n\n// Not `group-hover` or `group-has-[:focus-visible]`: WebKit never applies the first (its\n// `@media (hover: hover)` nested in the group selector) nor the second inside a shadow root,\n// so the control stayed hidden in Safari. An open menu takes focus out of the row into a\n// portal, and would otherwise lose its trigger.\nconst REVEALED_ON_INTERACTION =\n    'opacity-0 transition-opacity group-[:hover]/row:opacity-100 group-focus-within/row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100';\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<AnySurfaceRowProps> = (props) => {\n    const {\n        children,\n        divider = false,\n        disabled = false,\n        selected,\n        selection,\n        tone = 'default',\n        className = '',\n        style,\n    } = props;\n    const asChild = props.asChild === true;\n    const {\n        onClick,\n        href: rawHref,\n        target,\n        rel,\n        trailing,\n        revealTrailing,\n        role,\n    } = asChild ? ({} as SurfaceRowProps) : (props as SurfaceRowProps);\n    // A rejected href (e.g. `javascript:`) leaves the row a button or a plain row, never an anchor.\n    const href = safeHref(rawHref);\n    const ariaLabel = asChild ? undefined : (props as SurfaceRowProps)['aria-label'];\n    const ariaLabelledBy = asChild ? undefined : (props as SurfaceRowProps)['aria-labelledby'];\n    const interactive = Boolean(onClick || href);\n    // `asChild` is interactive for the hover affordance only, not the focus/reset classes.\n    const hover =\n        disabled && (interactive || asChild)\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const tinted = tone !== 'default';\n    const toneClass = TONE_CLASSES[tone];\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${tinted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected === true && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const toneForeground = TONE_FOREGROUNDS[tone];\n    const toneStyle: React.CSSProperties = toneForeground\n        ? ({\n              color: toneForeground,\n              '--malachite-ctx-text-primary': toneForeground,\n          } as React.CSSProperties)\n        : {};\n\n    // `selected` last of the two: a row can be both, and selection is the state the reader is\n    // acting on, so it wins the colour.\n    const rowStyle = { ...toneStyle, ...selectedStyle, ...style };\n\n    // Only a checkbox has a partly-checked state; a radio is chosen or not.\n    const ariaChecked =\n        role === 'checkbox' && selected === 'mixed'\n            ? ('mixed' as const)\n            : role === 'radio' || role === 'checkbox'\n              ? selected === true\n              : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected === true ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (asChild) {\n        return paintOnChild(children, classes, rowStyle);\n    }\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[\n                    chromeClasses,\n                    'flex items-center',\n                    revealTrailing ? 'group/row' : '',\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div\n                    className={`shrink-0 flex items-center ${revealTrailing ? REVEALED_ON_INTERACTION : ''}`}\n                >\n                    {trailing}\n                </div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                target={target}\n                rel={resolveRel(rel, target)}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\nexport interface SurfaceExpandableRowProps {\n    /** The row itself, laid out across the line. May hold its own controls. */\n    header: React.ReactNode;\n    /** The body, rendered beneath the row while it is open. */\n    children?: React.ReactNode;\n    expanded: boolean;\n    /** Omit for a row that cannot open. The arrow's space is still reserved, so a list of\n     *  rows stays in one column whether or not each one has a body. */\n    onToggle?: (expanded: boolean) => void;\n    /**\n     * Pins the row while its body scrolls, so a long body never leaves the reader without\n     * the line it belongs to. Offset by whatever is already pinned above it.\n     */\n    sticky?: boolean;\n    stickyTopOffset?: number;\n    divider?: boolean;\n    tone?: SurfaceRowProps['tone'];\n    /** Names the disclosure control, which is otherwise only an arrow. */\n    'aria-label'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Stops a click inside it from toggling the row, for the cells that hold controls.\n *\n * Explicit rather than sniffing the event's target for an interactive ancestor: a control\n * rendering into a shadow root retargets the event to its host, so the sniff would miss\n * exactly the components most likely to sit in a row.\n */\nconst ExpandableRowControls: React.FC<{\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}> = ({ children, className = '', style }) => (\n    <div className={className} style={style} onClick={(event) => event.stopPropagation()}>\n        {children}\n    </div>\n);\n\n/**\n * A row that opens to reveal a body, for a line that carries its own controls.\n *\n * Not `Accordion`: that puts its header inside the toggle button, so a header holding a\n * dropdown or a second button is invalid. Here the row surface takes the click and a cell\n * opts out with `ExpandableRow.Controls`, while the arrow stays a real button so the\n * keyboard reaches it.\n */\n/**\n * The space before the header: the arrow's own inset, its glyph and the gap after it.\n * Exported so a consumer aligning a column header above these rows offsets by the same\n * amount instead of guessing at it.\n */\nexport const EXPANDABLE_ROW_LEAD_PX = 39;\n\nconst SurfaceExpandableRow: React.FC<SurfaceExpandableRowProps> & {\n    Controls: typeof ExpandableRowControls;\n} = Object.assign(\n    ({\n        header,\n        children,\n        expanded,\n        onToggle,\n        sticky = false,\n        stickyTopOffset = 0,\n        divider = false,\n        tone = 'default',\n        'aria-label': ariaLabel,\n        className = '',\n        style,\n    }: SurfaceExpandableRowProps) => {\n        const bodyId = React.useId();\n        const toggle = onToggle ? () => onToggle(!expanded) : undefined;\n\n        return (\n            <SurfaceRow divider={divider} tone={tone} className={className} style={style}>\n                {/* `group` so the arrow takes its hover state from the whole row. */}\n                <div\n                    className={`group flex items-center w-full ${toggle ? 'cursor-pointer' : ''} ${\n                        sticky && expanded\n                            ? 'sticky z-[1] bg-[var(--malachite-card-background)]'\n                            : ''\n                    }`}\n                    style={sticky && expanded ? { top: stickyTopOffset } : undefined}\n                    // Presentational: the arrow below is the keyboard control, and this only\n                    // widens the pointer target.\n                    onClick={toggle}\n                    role=\"presentation\"\n                >\n                    {/* Reserved whether or not this row opens, so a list stays in one column.\n                        The inset and gap match Accordion's header. */}\n                    <span className=\"shrink-0 flex items-center pl-[16px] pr-[12px]\">\n                        {toggle && (\n                            <button\n                                type=\"button\"\n                                className={`appearance-none bg-transparent border-0 p-0 flex items-center cursor-pointer ${FOCUS_RING_INSET}`}\n                                aria-expanded={expanded}\n                                aria-controls={bodyId}\n                                aria-label={ariaLabel}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    toggle();\n                                }}\n                            >\n                                <DisclosureArrow expanded={expanded} />\n                            </button>\n                        )}\n                    </span>\n                    {header}\n                </div>\n                {expanded && <div id={bodyId}>{children}</div>}\n            </SurfaceRow>\n        );\n    },\n    { Controls: ExpandableRowControls },\n);\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<AnySurfaceRowProps>;\n    ExpandableRow: typeof SurfaceExpandableRow;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\nSurface.ExpandableRow = SurfaceExpandableRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow, SurfaceExpandableRow };\n"],"names":["TONE_CLASSES","TONE_FOREGROUNDS","REVEALED_ON_INTERACTION","TRIPLE_SHADOW","SurfaceRow","props","children","divider","disabled","selected","selection","tone","className","style","asChild","onClick","rawHref","target","rel","trailing","revealTrailing","role","href","safeHref","ariaLabel","ariaLabelledBy","interactive","hover","tinted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","selectedStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","toneForeground","rowStyle","ariaChecked","ariaCurrent","rowFallbackAria","paintOnChild","isRenderableNode","control","jsx","resolveRel","jsxs","ExpandableRowControls","event","EXPANDABLE_ROW_LEAD_PX","SurfaceExpandableRow","header","expanded","onToggle","sticky","stickyTopOffset","bodyId","React","toggle","DisclosureArrow","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}