@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/esm/fields/SearchInput/index.mjs

@@ -1,18 +1,85 @@
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_VISIBLE_RING, ensureCompositeFocusRing, pressTargetHitSlop, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "tamagui";
+import { View, getVariable, isWeb, styled, useTheme } from "tamagui";
+import { FieldLayout } from "../../fieldLayout.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
+import { formControlColors } from "../../shared/colorRamps.mjs";
 import { bidiIsolate, t } from "../../shared/t.mjs";
-import { Input } from "../Input/index.mjs";
-import { jsx } from "react/jsx-runtime";
-const iconSizeForToken = {
-  $1: 12,
-  $2: 14,
-  $3: 16,
-  $4: 16,
-  $5: 18,
-  $6: 20
-};
+import { useFormField } from "../../shared/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const iconSizeForToken = token => sizeRecipeForToken(token).iconSize;
+const SEARCH_STYLE_ID = "mp-search-input-chrome";
+const searchInputCss = `input.mp-search-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input.mp-search-input::-webkit-search-cancel-button,
+input.mp-search-input::-webkit-search-decoration,
+input.mp-search-input::-webkit-search-results-button,
+input.mp-search-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+input.mp-search-input:focus,
+input.mp-search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.mp-search-clear:focus,
+.mp-search-clear:focus-visible {
+  outline: none !important;
+}
+.mp-search-clear:focus-visible .mp-search-clear-ring {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}`;
+function ensureSearchInputChrome() {
+  if (typeof document === "undefined") return;
+  ensureCompositeFocusRing();
+  if (document.getElementById(SEARCH_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = SEARCH_STYLE_ID;
+  tag.textContent = searchInputCss;
+  document.head.appendChild(tag);
+}
+const ClearButton = styled(View, {
+  name: "SearchClear",
+  cursor: "pointer",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.85,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    ...FOCUS_VISIBLE_RING
+  }
+});
+const ClearWell = styled(View, {
+  name: "SearchClearWell",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$color8",
+  hoverStyle: {
+    backgroundColor: "$color9"
+  },
+  pressStyle: {
+    backgroundColor: "$color10"
+  }
+});
+function focusArea(ref) {
+  ref.current?.focus?.();
+}
 function SearchInput({
   value,
   defaultValue,
@@ -36,17 +103,21 @@ function SearchInput({
   inputProps
 }) {
   const {
-    knobProps
-  } = useResolvedKnobs({
-    size,
+    knobProps,
+    id
+  } = useFormField({
     compact
   });
+  const theme = useTheme();
+  const clearInk = getVariable(theme.color1);
   const isControlled = value !== void 0;
   const [internalText, setInternalText] = useState(defaultValue ?? "");
   const text = isControlled ? value : internalText;
+  const inputRef = useRef(null);
   const timerRef = useRef(void 0);
   const onSearchRef = useRef(onSearch);
   onSearchRef.current = onSearch;
+  if (isWeb) ensureSearchInputChrome();
   useEffect(() => () => {
     if (timerRef.current !== void 0) clearTimeout(timerRef.current);
   }, []);
@@ -75,45 +146,69 @@ function SearchInput({
     onChange?.("");
     fireSearch("");
     onClearRef.current?.();
+    focusArea(inputRef);
   }, [isControlled, onChange, fireSearch]);
-  const resolvedIconSize = iconSize ?? iconSizeForToken[size ?? knobProps.sizeToken] ?? 16;
-  const clearButton = clearable && !disabled && text ? /* @__PURE__ */jsx(View, {
-    role: "button",
-    tabIndex: 0,
-    padding: "$1",
-    borderRadius: knobProps.borderRadius.borderRadius,
-    cursor: "pointer",
+  const resolvedIconSize = iconSize ?? iconSizeForToken(String(size ?? knobProps.sizeToken));
+  const clearWell = resolvedIconSize;
+  const clearGlyph = Math.max(8, resolvedIconSize - 6);
+  const wellRadius = knobProps.pointy ? 0 : 1e3;
+  const showClear = Boolean(clearable && !disabled && text);
+  const chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
     hoverStyle: {
-      backgroundColor: "$color4"
-    },
-    pressStyle: {
-      backgroundColor: "$color5"
-    },
-    focusVisibleStyle: {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: "$color8"
-    },
-    onPress: handleClear,
-    onKeyDown: e => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClear();
-      }
+      borderColor: "transparent"
     },
-    "aria-label": t("Clear search"),
-    children: /* @__PURE__ */jsx(XIcon, {
-      size: resolvedIconSize - 2
-    })
-  }) : void 0;
+    focusStyle: {
+      borderColor: "transparent"
+    }
+  } : void 0;
+  const leadingWebProps = isWeb ? {
+    tabIndex: -1,
+    "aria-hidden": true,
+    onMouseDown: e => {
+      e.preventDefault?.();
+      if (!disabled) focusArea(inputRef);
+    }
+  } : {
+    focusable: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onPress: () => {
+      if (!disabled) focusArea(inputRef);
+    }
+  };
   const areaProps = {
+    id,
     role: "searchbox",
-    "aria-label": ariaLabel ?? "Search",
+    "aria-label": label ? void 0 : ariaLabel ?? t("Search"),
+    type: "search",
+    autoComplete: "off",
+    spellCheck: false,
+    inputMode: "search",
     enterKeyHint: "search",
     value: text,
+    disabled,
+    placeholder,
+    paddingInlineStart: 0,
+    paddingInlineEnd: showClear ? 0 : void 0,
+    className: isWeb ? "mp-input-area mp-search-input" : void 0,
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent",
+    focusStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
     onKeyDown: e => {
       if (e.key === "Escape") {
+        if (!text) return;
         e.preventDefault();
         handleClear();
       } else if (e.key === "Enter") {
@@ -123,20 +218,63 @@ function SearchInput({
     onSubmitEditing: () => fireSearch(text),
     ...inputProps
   };
-  return /* @__PURE__ */jsx(Input, {
+  return /* @__PURE__ */jsx(FieldLayout, {
+    id,
     label,
-    size,
-    compact,
-    chromeless,
     disabled,
-    onChangeText: handleChangeText,
-    placeholder,
-    leftIcon: /* @__PURE__ */jsx(MagnifyingGlassIcon, {
-      size: resolvedIconSize
-    }),
-    rightIcon: clearButton,
-    rightIconInteractive: true,
-    inputProps: areaProps
+    size,
+    knobProps,
+    children: /* @__PURE__ */jsx(InputParts, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */jsxs(InputParts.Box, {
+        disabled,
+        ...chromelessProps,
+        children: [/* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "leading",
+          color: formControlColors.boundary,
+          className: isWeb ? "mp-search-leading" : void 0,
+          ...leadingWebProps,
+          children: /* @__PURE__ */jsx(MagnifyingGlassIcon, {
+            size: resolvedIconSize
+          })
+        }), /* @__PURE__ */jsx(InputParts.Area, {
+          ref: inputRef,
+          ...areaProps,
+          onChangeText: handleChangeText
+        }), showClear ? /* @__PURE__ */jsx(View, {
+          justifyContent: "center",
+          alignItems: "center",
+          paddingInlineEnd: "$2.5",
+          paddingInlineStart: 0,
+          flexShrink: 0,
+          children: /* @__PURE__ */jsx(ClearButton, {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": t("Clear search"),
+            className: isWeb ? "mp-search-clear" : void 0,
+            hitSlop: pressTargetHitSlop(clearWell),
+            onPress: handleClear,
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClear();
+              }
+            },
+            children: /* @__PURE__ */jsx(ClearWell, {
+              className: isWeb ? "mp-search-clear-ring" : void 0,
+              width: clearWell,
+              height: clearWell,
+              borderRadius: wellRadius,
+              children: /* @__PURE__ */jsx(XIcon, {
+                size: clearGlyph,
+                color: clearInk
+              })
+            })
+          })
+        }) : null]
+      })
+    })
   });
 }
 export { SearchInput };

package/dist/esm/fields/SearchInput/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["MagnifyingGlassIcon","XIcon","useResolvedKnobs","useCallback","useEffect","useRef","useState","View","bidiIsolate","t","Input","jsx","iconSizeForToken","$1","$2","$3","$4","$5","$6","SearchInput","value","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","clearable","disabled","size","compact","chromeless","label","ariaLabel","iconSize","inputProps","knobProps","isControlled","internalText","setInternalText","text","timerRef","onSearchRef","current","clearTimeout","fireSearch","next","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","resolvedIconSize","sizeToken","clearButton","role","tabIndex","padding","borderRadius","cursor","hoverStyle","backgroundColor","pressStyle","focusVisibleStyle","outlineWidth","outlineStyle","outlineColor","onPress","onKeyDown","e","key","preventDefault","stopPropagation","children","areaProps","enterKeyHint","onSubmitEditing","onChangeText","leftIcon","rightIcon","rightIconInteractive"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["MagnifyingGlassIcon","XIcon","FOCUS_VISIBLE_RING","ensureCompositeFocusRing","pressTargetHitSlop","sizeRecipeForToken","useCallback","useEffect","useRef","useState","View","getVariable","isWeb","styled","useTheme","FieldLayout","Input","InputParts","formControlColors","bidiIsolate","t","useFormField","jsx","jsxs","iconSizeForToken","token","iconSize","SEARCH_STYLE_ID","searchInputCss","ensureSearchInputChrome","document","getElementById","tag","createElement","id","textContent","head","appendChild","ClearButton","name","cursor","alignItems","justifyContent","opacity","outlineWidth","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","ClearWell","backgroundColor","focusArea","ref","current","focus","SearchInput","value","defaultValue","onChange","onSearch","onClear","debounceMs","placeholder","clearable","disabled","size","compact","chromeless","label","ariaLabel","inputProps","knobProps","theme","clearInk","color1","isControlled","internalText","setInternalText","text","inputRef","timerRef","onSearchRef","clearTimeout","fireSearch","next","scheduleSearch","setTimeout","handleChangeText","onClearRef","handleClear","resolvedIconSize","String","sizeToken","clearWell","clearGlyph","Math","max","wellRadius","pointy","showClear","Boolean","chromelessProps","borderWidth","borderColor","leadingWebProps","tabIndex","onMouseDown","e","preventDefault","focusable","accessibilityElementsHidden","importantForAccessibility","onPress","areaProps","role","type","autoComplete","spellCheck","inputMode","enterKeyHint","paddingInlineStart","paddingInlineEnd","className","outlineStyle","outlineColor","onKeyDown","key","onSubmitEditing","children","Box","Icon","adornment","color","boundary","Area","onChangeText","flexShrink","hitSlop","stopPropagation","width","height","borderRadius"],"sources":["../../../../src/fields/SearchInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/SearchInput/index.native.js

@@ -1,18 +1,88 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_VISIBLE_RING, ensureCompositeFocusRing, pressTargetHitSlop, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "tamagui";
+import { View, getVariable, isWeb, styled, useTheme } from "tamagui";
+import { FieldLayout } from "../../fieldLayout.native.js";
+import { Input as InputParts } from "../../InputParts/index.native.js";
+import { formControlColors } from "../../shared/colorRamps.native.js";
 import { bidiIsolate, t } from "../../shared/t.native.js";
-import { Input } from "../Input/index.native.js";
-var iconSizeForToken = {
-  $1: 12,
-  $2: 14,
-  $3: 16,
-  $4: 16,
-  $5: 18,
-  $6: 20
+import { useFormField } from "../../shared/utils.native.js";
+var iconSizeForToken = function iconSizeForToken2(token) {
+  return sizeRecipeForToken(token).iconSize;
 };
+var SEARCH_STYLE_ID = "mp-search-input-chrome";
+var searchInputCss = `input.mp-search-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input.mp-search-input::-webkit-search-cancel-button,
+input.mp-search-input::-webkit-search-decoration,
+input.mp-search-input::-webkit-search-results-button,
+input.mp-search-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+input.mp-search-input:focus,
+input.mp-search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.mp-search-clear:focus,
+.mp-search-clear:focus-visible {
+  outline: none !important;
+}
+.mp-search-clear:focus-visible .mp-search-clear-ring {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}`;
+function ensureSearchInputChrome() {
+  if (typeof document === "undefined") return;
+  ensureCompositeFocusRing();
+  if (document.getElementById(SEARCH_STYLE_ID)) return;
+  var tag = document.createElement("style");
+  tag.id = SEARCH_STYLE_ID;
+  tag.textContent = searchInputCss;
+  document.head.appendChild(tag);
+}
+var ClearButton = styled(View, {
+  name: "SearchClear",
+  cursor: "pointer",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.85,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    ...FOCUS_VISIBLE_RING
+  }
+});
+var ClearWell = styled(View, {
+  name: "SearchClearWell",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$color8",
+  hoverStyle: {
+    backgroundColor: "$color9"
+  },
+  pressStyle: {
+    backgroundColor: "$color10"
+  }
+});
+function focusArea(ref) {
+  var _ref_current_focus, _ref_current;
+  (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : (_ref_current_focus = _ref_current.focus) === null || _ref_current_focus === void 0 ? void 0 : _ref_current_focus.call(_ref_current);
+}
 function SearchInput(param) {
   var {
     value,
@@ -36,19 +106,22 @@ function SearchInput(param) {
     iconSize,
     inputProps
   } = param;
-  var _ref;
   var {
-    knobProps
-  } = useResolvedKnobs({
-    size,
+    knobProps,
+    id
+  } = useFormField({
     compact
   });
+  var theme = useTheme();
+  var clearInk = getVariable(theme.color1);
   var isControlled = value !== void 0;
   var [internalText, setInternalText] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
   var text = isControlled ? value : internalText;
+  var inputRef = useRef(null);
   var timerRef = useRef(void 0);
   var onSearchRef = useRef(onSearch);
   onSearchRef.current = onSearch;
+  if (isWeb) ensureSearchInputChrome();
   useEffect(function () {
     return function () {
       if (timerRef.current !== void 0) clearTimeout(timerRef.current);
@@ -83,45 +156,70 @@ function SearchInput(param) {
     onChange === null || onChange === void 0 ? void 0 : onChange("");
     fireSearch("");
     (_onClearRef_current = onClearRef.current) === null || _onClearRef_current === void 0 ? void 0 : _onClearRef_current.call(onClearRef);
+    focusArea(inputRef);
   }, [isControlled, onChange, fireSearch]);
-  var resolvedIconSize = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeForToken[size !== null && size !== void 0 ? size : knobProps.sizeToken]) !== null && _ref !== void 0 ? _ref : 16;
-  var clearButton = clearable && !disabled && text ? /* @__PURE__ */_jsx(View, {
-    role: "button",
-    tabIndex: 0,
-    padding: "$1",
-    borderRadius: knobProps.borderRadius.borderRadius,
-    cursor: "pointer",
+  var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeForToken(String(size !== null && size !== void 0 ? size : knobProps.sizeToken));
+  var clearWell = resolvedIconSize;
+  var clearGlyph = Math.max(8, resolvedIconSize - 6);
+  var wellRadius = knobProps.pointy ? 0 : 1e3;
+  var showClear = Boolean(clearable && !disabled && text);
+  var chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
     hoverStyle: {
-      backgroundColor: "$color4"
-    },
-    pressStyle: {
-      backgroundColor: "$color5"
+      borderColor: "transparent"
     },
-    focusVisibleStyle: {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: "$color8"
-    },
-    onPress: handleClear,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClear();
-      }
-    },
-    "aria-label": t("Clear search"),
-    children: /* @__PURE__ */_jsx(XIcon, {
-      size: resolvedIconSize - 2
-    })
-  }) : void 0;
+    focusStyle: {
+      borderColor: "transparent"
+    }
+  } : void 0;
+  var leadingWebProps = isWeb ? {
+    tabIndex: -1,
+    "aria-hidden": true,
+    onMouseDown: function onMouseDown(e) {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      if (!disabled) focusArea(inputRef);
+    }
+  } : {
+    focusable: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onPress: function onPress() {
+      if (!disabled) focusArea(inputRef);
+    }
+  };
   var areaProps = {
+    id,
     role: "searchbox",
-    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Search",
+    "aria-label": label ? void 0 : ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Search"),
+    type: "search",
+    autoComplete: "off",
+    spellCheck: false,
+    inputMode: "search",
     enterKeyHint: "search",
     value: text,
+    disabled,
+    placeholder,
+    paddingInlineStart: 0,
+    paddingInlineEnd: showClear ? 0 : void 0,
+    className: isWeb ? "mp-input-area mp-search-input" : void 0,
+    outlineWidth: 0,
+    outlineStyle: "none",
+    outlineColor: "transparent",
+    focusStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0,
+      outlineStyle: "none",
+      outlineColor: "transparent"
+    },
     onKeyDown: function onKeyDown(e) {
       if (e.key === "Escape") {
+        if (!text) return;
         e.preventDefault();
         handleClear();
       } else if (e.key === "Enter") {
@@ -133,20 +231,63 @@ function SearchInput(param) {
     },
     ...inputProps
   };
-  return /* @__PURE__ */_jsx(Input, {
+  return /* @__PURE__ */_jsx(FieldLayout, {
+    id,
     label,
-    size,
-    compact,
-    chromeless,
     disabled,
-    onChangeText: handleChangeText,
-    placeholder,
-    leftIcon: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {
-      size: resolvedIconSize
-    }),
-    rightIcon: clearButton,
-    rightIconInteractive: true,
-    inputProps: areaProps
+    size,
+    knobProps,
+    children: /* @__PURE__ */_jsx(InputParts, {
+      size: size || knobProps.sizeToken,
+      children: /* @__PURE__ */_jsxs(InputParts.Box, {
+        disabled,
+        ...chromelessProps,
+        children: [/* @__PURE__ */_jsx(InputParts.Icon, {
+          adornment: "leading",
+          color: formControlColors.boundary,
+          className: isWeb ? "mp-search-leading" : void 0,
+          ...leadingWebProps,
+          children: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {
+            size: resolvedIconSize
+          })
+        }), /* @__PURE__ */_jsx(InputParts.Area, {
+          ref: inputRef,
+          ...areaProps,
+          onChangeText: handleChangeText
+        }), showClear ? /* @__PURE__ */_jsx(View, {
+          justifyContent: "center",
+          alignItems: "center",
+          paddingInlineEnd: "$2.5",
+          paddingInlineStart: 0,
+          flexShrink: 0,
+          children: /* @__PURE__ */_jsx(ClearButton, {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": t("Clear search"),
+            className: isWeb ? "mp-search-clear" : void 0,
+            hitSlop: pressTargetHitSlop(clearWell),
+            onPress: handleClear,
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClear();
+              }
+            },
+            children: /* @__PURE__ */_jsx(ClearWell, {
+              className: isWeb ? "mp-search-clear-ring" : void 0,
+              width: clearWell,
+              height: clearWell,
+              borderRadius: wellRadius,
+              children: /* @__PURE__ */_jsx(XIcon, {
+                size: clearGlyph,
+                color: clearInk
+              })
+            })
+          })
+        }) : null]
+      })
+    })
   });
 }
 export { SearchInput };