@stackone/malachite 2.59.0 → 2.60.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/index.d.ts

@@ -1256,6 +1256,7 @@ export declare const CustomIcons: {
     LayoutIcon: FC<IconProps>;
     LibraryIcon: FC<IconProps>;
     LinkIcon: FC<IconProps>;
+    ListChecksIcon: FC<IconProps>;
     LogsIcon: FC<IconProps>;
     MagicWandIcon: FC<IconProps>;
     ManageTeamIcon: FC<IconProps>;
@@ -1963,6 +1964,13 @@ declare interface IconProps_115 {
     onClick?: () => void;
 }
 
+declare interface IconProps_116 {
+    size?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+}
+
 declare interface IconProps_12 {
     size?: number | string;
     className?: string;
@@ -2800,6 +2808,8 @@ declare interface LinkProps_2 {
     fontSize?: 'sm' | 'base';
 }
 
+export declare const ListChecksIcon: React.FC<IconProps_66>;
+
 export declare const LoadingBar: default_2.FC<LoadingBarProps>;
 
 export declare interface LoadingBarProps {
@@ -2826,9 +2836,9 @@ export declare type LoadingBarSize = 'small' | 'medium' | 'large';
 
 export declare type LoadingBarVariant = 'default' | 'warning' | 'error';
 
-export declare const LogsIcon: React.FC<IconProps_66>;
+export declare const LogsIcon: React.FC<IconProps_67>;
 
-export declare const MagicWandIcon: React.FC<IconProps_67>;
+export declare const MagicWandIcon: React.FC<IconProps_68>;
 
 /**
  * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.
@@ -3307,9 +3317,9 @@ export declare interface MalachiteTheme {
     };
 }
 
-export declare const ManageTeamIcon: React.FC<IconProps_68>;
+export declare const ManageTeamIcon: React.FC<IconProps_69>;
 
-export declare const ManualWebhookIcon: React.FC<IconProps_69>;
+export declare const ManualWebhookIcon: React.FC<IconProps_70>;
 
 /** `inert` draws links without an anchor, for markdown inside a <button>. */
 export declare type MarkdownLinks = 'interactive' | 'inert';
@@ -3330,15 +3340,15 @@ export declare interface MarkdownProps {
 /** `inline`: one line of inline syntax, with no autolinked emails or URLs. */
 export declare type MarkdownVariant = 'block' | 'flow' | 'inline';
 
-export declare const MarkReadIcon: React.FC<IconProps_70>;
+export declare const MarkReadIcon: React.FC<IconProps_71>;
 
-export declare const MarkUnreadIcon: React.FC<IconProps_71>;
+export declare const MarkUnreadIcon: React.FC<IconProps_72>;
 
-export declare const MembersIcon: React.FC<IconProps_72>;
+export declare const MembersIcon: React.FC<IconProps_73>;
 
 export declare const Modal: default_2.FC<ModalProps>;
 
-export declare const ModalIcon: React.FC<IconProps_73>;
+export declare const ModalIcon: React.FC<IconProps_74>;
 
 export declare interface ModalProps {
     open: boolean;
@@ -3394,9 +3404,9 @@ export declare type ModalSize = 'small' | 'medium' | 'large';
 
 export declare type ModalTrayTone = 'neutral' | 'warning' | 'error' | 'success';
 
-export declare const MoreHorizontalIcon: React.FC<IconProps_74>;
+export declare const MoreHorizontalIcon: React.FC<IconProps_75>;
 
-export declare const MoreVerticalIcon: React.FC<IconProps_75>;
+export declare const MoreVerticalIcon: React.FC<IconProps_76>;
 
 export declare const MultiSelect: default_2.FC<MultiSelectProps>;
 
@@ -3488,9 +3498,9 @@ export declare type MultiSelectSize = 'small' | 'medium' | 'large';
 
 declare type NativeProps = Omit<default_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'color' | 'title'>;
 
-export declare const NavbarCollapseIcon: React.FC<IconProps_76>;
+export declare const NavbarCollapseIcon: React.FC<IconProps_77>;
 
-export declare const NavbarExpandIcon: React.FC<IconProps_77>;
+export declare const NavbarExpandIcon: React.FC<IconProps_78>;
 
 export declare const NavItem: default_2.ForwardRefExoticComponent<NavItemProps & default_2.RefAttributes<HTMLElement>>;
 
@@ -3532,7 +3542,7 @@ export declare interface NavItemLinkProps extends NavItemBaseProps {
 
 export declare type NavItemProps = NavItemLinkProps | NavItemAsChildProps;
 
-export declare const NotFoundIcon: React.FC<IconProps_78>;
+export declare const NotFoundIcon: React.FC<IconProps_79>;
 
 export declare const NumberTag: default_2.FC<NumberTagProps>;
 
@@ -3547,7 +3557,7 @@ export declare interface NumberTagProps {
     className?: string;
 }
 
-export declare const OrganizationIcon: React.FC<IconProps_79>;
+export declare const OrganizationIcon: React.FC<IconProps_80>;
 
 export declare const OverflowRow: default_2.FC<OverflowRowProps>;
 
@@ -3721,11 +3731,11 @@ declare type PillButtonTone = 'default' | 'assistant';
 
 declare type PillButtonVariant = 'default' | 'inverted';
 
-export declare const PinIcon: React.FC<IconProps_80>;
+export declare const PinIcon: React.FC<IconProps_81>;
 
-export declare const PlaygroundIcon: React.FC<IconProps_81>;
+export declare const PlaygroundIcon: React.FC<IconProps_82>;
 
-export declare const PlusIcon: React.FC<IconProps_82>;
+export declare const PlusIcon: React.FC<IconProps_83>;
 
 export declare const Popover: default_2.FC<PopoverProps> & {
     Header: default_2.FC< PopoverHeaderProps>;
@@ -3786,7 +3796,7 @@ export declare type PopoverPlacement = FloatingPlacement;
 
 export declare type PopoverProps = PopoverBaseProps & PopoverName;
 
-export declare const PreviewIcon: React.FC<IconProps_83>;
+export declare const PreviewIcon: React.FC<IconProps_84>;
 
 /** A translucent rounded card that groups {@link PreviewTreeRow}s into a tree preview. */
 export declare const PreviewTree: default_2.FC<PreviewTreeProps>;
@@ -3807,7 +3817,7 @@ declare interface PreviewTreeRowProps {
     expanded?: boolean;
 }
 
-export declare const ProgrammaticWebhookIcon: React.FC<IconProps_84>;
+export declare const ProgrammaticWebhookIcon: React.FC<IconProps_85>;
 
 export declare const Progress: default_2.FC<ProgressProps>;
 
@@ -3858,7 +3868,7 @@ declare interface ProgressValueProps extends ProgressCommonProps {
     max?: never;
 }
 
-export declare const PulseIcon: React.FC<IconProps_85>;
+export declare const PulseIcon: React.FC<IconProps_86>;
 
 export declare const QueryInput: default_2.FC<QueryInputProps>;
 
@@ -3935,7 +3945,7 @@ export declare interface RadioProps {
     id?: string;
 }
 
-export declare const RefreshIcon: React.FC<IconProps_86>;
+export declare const RefreshIcon: React.FC<IconProps_87>;
 
 export declare interface RegularLayoutProps {
     breadcrumbLinks?: BreadcrumbLink[];
@@ -3967,9 +3977,9 @@ export declare interface RegularLayoutProps {
     style?: default_2.CSSProperties;
 }
 
-export declare const RejectIcon: React.FC<IconProps_87>;
+export declare const RejectIcon: React.FC<IconProps_88>;
 
-export declare const ReloadIcon: React.FC<IconProps_88>;
+export declare const ReloadIcon: React.FC<IconProps_89>;
 
 /**
  * Renders an in-app link through the app's own link component, spreading every field onto it:
@@ -3984,9 +3994,9 @@ export declare type RenderLink = (props: {
     'aria-label'?: string;
 }) => default_2.ReactNode;
 
-export declare const ReplyIcon: React.FC<IconProps_89>;
+export declare const ReplyIcon: React.FC<IconProps_90>;
 
-export declare const RequiredFieldIndicatorIcon: React.FC<IconProps_90>;
+export declare const RequiredFieldIndicatorIcon: React.FC<IconProps_91>;
 
 export declare type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';
 
@@ -4010,9 +4020,10 @@ declare const Row: default_2.FC<KeyValueListRowProps>;
 
 export declare type RowVariant = 'success' | 'warning' | 'error' | 'info';
 
-export declare const Search: default_2.FC<SearchProps>;
+/** Forwards a ref to the input, so a consumer can focus the field. */
+export declare const Search: default_2.ForwardRefExoticComponent<SearchProps & default_2.RefAttributes<HTMLInputElement>>;
 
-export declare const SearchIcon: React.FC<IconProps_91>;
+export declare const SearchIcon: React.FC<IconProps_92>;
 
 export declare interface SearchProps {
     value: string;
@@ -4026,6 +4037,18 @@ export declare interface SearchProps {
     className?: string;
     width?: string | number;
     style?: default_2.CSSProperties;
+    /**
+     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus
+     * stays in the field, and Escape that clears is not also passed to a surrounding panel.
+     */
+    clearable?: boolean;
+    /** Called after `onChange('')` when the clear button or Escape empties the field. */
+    onClear?: () => void;
+    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */
+    onKeyDown?: default_2.KeyboardEventHandler<HTMLInputElement>;
+    /** The field's accessible name. Falls back to the placeholder, then "Search". */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 export declare type SearchSize = 'small' | 'medium' | 'large';
@@ -4056,7 +4079,7 @@ declare interface SectionTitleProps {
     style?: default_2.CSSProperties;
 }
 
-export declare const SecurityIcon: React.FC<IconProps_92>;
+export declare const SecurityIcon: React.FC<IconProps_93>;
 
 /**
  * A rounded track of mutually-exclusive options — the segmented "one of these" control.
@@ -4226,7 +4249,7 @@ export declare interface SelectionBarProps {
     className?: string;
 }
 
-export declare const SendIcon: React.FC<IconProps_93>;
+export declare const SendIcon: React.FC<IconProps_94>;
 
 export declare const SettingRow: default_2.FC<SettingRowProps>;
 
@@ -4248,7 +4271,7 @@ export declare interface SettingRowProps {
     className?: string;
 }
 
-export declare const SettingsIcon: React.FC<IconProps_94>;
+export declare const SettingsIcon: React.FC<IconProps_95>;
 
 /**
  * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
@@ -4398,7 +4421,7 @@ export declare interface SidePanelProps {
     children: default_2.ReactNode;
 }
 
-export declare const SignOutIcon: React.FC<IconProps_95>;
+export declare const SignOutIcon: React.FC<IconProps_96>;
 
 export declare const Skeleton: {
     Button: default_2.FC<SkeletonButtonProps>;
@@ -4432,11 +4455,11 @@ declare type SkeletonShape = 'default' | 'round' | 'circle' | 'square';
 
 declare type SkeletonSize = 'small' | 'default' | 'large';
 
-export declare const SliderIcon: React.FC<IconProps_96>;
+export declare const SliderIcon: React.FC<IconProps_97>;
 
-export declare const SortIcon: React.FC<IconProps_97>;
+export declare const SortIcon: React.FC<IconProps_98>;
 
-export declare const SourceIcon: React.FC<IconProps_98>;
+export declare const SourceIcon: React.FC<IconProps_99>;
 
 export declare const Spacer: default_2.FC<SpacerProps>;
 
@@ -4460,7 +4483,7 @@ export declare enum SpacingSize {
     Large = "large"
 }
 
-export declare const SparkleIcon: React.FC<IconProps_99>;
+export declare const SparkleIcon: React.FC<IconProps_100>;
 
 export declare const Spinner: default_2.FC<SpinnerProps>;
 
@@ -4480,7 +4503,7 @@ declare interface SplitScreenLayoutProps {
     footer?: default_2.ReactNode;
 }
 
-export declare const StarIcon: React.FC<IconProps_100>;
+export declare const StarIcon: React.FC<IconProps_101>;
 
 export declare const StatBadge: default_2.FC<StatBadgeProps>;
 
@@ -4552,7 +4575,7 @@ export declare interface StatusBadgeProps {
 
 export declare type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';
 
-export declare const StepCurrentIcon: React.FC<IconProps_101>;
+export declare const StepCurrentIcon: React.FC<IconProps_102>;
 
 export declare const Stepper: default_2.FC<StepperProps>;
 
@@ -4593,7 +4616,7 @@ export declare interface StepTabsProps {
     className?: string;
 }
 
-export declare const StepUpcomingIcon: React.FC<IconProps_102>;
+export declare const StepUpcomingIcon: React.FC<IconProps_103>;
 
 export declare type SubtitleLayout = 'inline' | 'stacked';
 
@@ -4724,7 +4747,7 @@ export declare interface SwatchProps {
     style?: default_2.CSSProperties;
 }
 
-export declare const SyntheticWebhookIcon: React.FC<IconProps_103>;
+export declare const SyntheticWebhookIcon: React.FC<IconProps_104>;
 
 export declare interface TabItem {
     key: string;
@@ -5036,9 +5059,9 @@ export declare interface ThemeScopeProps {
     children?: default_2.ReactNode;
 }
 
-export declare const ThumbsDownIcon: React.FC<IconProps_104>;
+export declare const ThumbsDownIcon: React.FC<IconProps_105>;
 
-export declare const ThumbsUpIcon: React.FC<IconProps_105>;
+export declare const ThumbsUpIcon: React.FC<IconProps_106>;
 
 export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLElement>>;
 
@@ -5157,11 +5180,11 @@ declare interface TooltipProps {
     focusableTrigger?: boolean;
 }
 
-export declare const TrashIcon: React.FC<IconProps_106>;
+export declare const TrashIcon: React.FC<IconProps_107>;
 
-export declare const TriangleDownIcon: React.FC<IconProps_107>;
+export declare const TriangleDownIcon: React.FC<IconProps_108>;
 
-export declare const TriangleRightIcon: React.FC<IconProps_108>;
+export declare const TriangleRightIcon: React.FC<IconProps_109>;
 
 /**
  * TruncatedTooltip renders its children in a single-line truncating container
@@ -5205,9 +5228,9 @@ export declare const Typography: {
     Text: FC<TextProps>;
 };
 
-export declare const UnarchiveIcon: React.FC<IconProps_109>;
+export declare const UnarchiveIcon: React.FC<IconProps_110>;
 
-export declare const UploadIcon: React.FC<IconProps_110>;
+export declare const UploadIcon: React.FC<IconProps_111>;
 
 export declare const UsageCard: default_2.FC<UsageCardProps>;
 
@@ -5229,15 +5252,15 @@ export declare const useHasOpenOverlay: () => boolean;
 
 export declare const useSidebarCollapsed: () => boolean;
 
-export declare const WarningCircleFilled: React.FC<IconProps_111>;
+export declare const WarningCircleFilled: React.FC<IconProps_112>;
 
-export declare const WarningTriangleIcon: React.FC<IconProps_112>;
+export declare const WarningTriangleIcon: React.FC<IconProps_113>;
 
-export declare const WebhookEventsIcon: React.FC<IconProps_113>;
+export declare const WebhookEventsIcon: React.FC<IconProps_114>;
 
-export declare const WebhookIcon: React.FC<IconProps_114>;
+export declare const WebhookIcon: React.FC<IconProps_115>;
 
-export declare const WebhookSigningSecretIcon: React.FC<IconProps_115>;
+export declare const WebhookSigningSecretIcon: React.FC<IconProps_116>;
 
 export declare type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';