@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/SearchBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.cjs","names":["Button","slotRendersContent","materialiseSlotContent","hasTextLabel","BUTTON_OWN_PROP_KEYS","renderSlot","placeButtonIcon","isElementOfType","getElementType","resolveSlot","slotWrapsDefaultContent","DismissIcon","React","useControllable","useMergedRefs","useFieldControl","isInvalidLook","observeTextLabel","hasRenderedTextLabel","mergeProps","cn","focusRing","mergedAriaDisabledClasses","inputFocusWithin","composeEventHandlers","SearchIcon","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_useControllable","require_useMergedRefs","require_useFieldControl","require_styles","require_Button","require_icons","require_mergeProps","require_Button_slots","require_Input","require_useFormReset","require_labelInName","react","react_jsx_runtime","BUTTON_ONLY_KEYS","HANDLER_KEY","NAMING_KEYS","DEFAULT_CLEAR_LABEL","noop","INTERACTIVE_CONTENT","DEFAULT_DISMISS","isButtonType","type","splitButtonLike","hasChildren","children","content","literalTextLabel","buttonProps","key","value","props","iconNode","_children","resolveDismiss","node","dismiss","resolved","Component","contentProps","hasButtonProps","empty","contentChildren","SearchBox","controlledValue","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","onChange","setValue","defaultValue","onValueChange","next","inputRef","mergedInputRef","controlRef","form","fieldProps","invalidLook","dismissParts","dismissKind","handleClear","onClear","handleKeyDown","event","readOnly","disabled","handleRootMouseDown","input","root","target","control","slotOnClick","slotRef","slotButtonProps","hasOwnName","checksContent","labelTarget","setLabelTarget","subscribeToContent","contentHasTextLabel","namedByContent","clearRef","clearButtonProps","clearContent","hasBefore","contentBefore","hasAfter","contentAfter","className","onMouseDown","onKeyDown"],"sources":["../../../src/components/input/SearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getElementType, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { DismissIcon, SearchIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { mergeProps } from '../../lib/mergeProps';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing, inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport type { Slot, SlotObject } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport { isInvalidLook } from './Input';\n\n/**\n * Props that SearchBox routes to its `<input>` (C-ROUTING): the id, the ARIA naming/validation\n * attributes, native text-input attributes and the focus/keyboard handlers.\n */\nexport type SearchBoxInputProps = Pick<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-errormessage'\n  | 'aria-details'\n  | 'name'\n  | 'form'\n  | 'required'\n  | 'readOnly'\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'autoCapitalize'\n  | 'autoCorrect'\n  | 'inputMode'\n  | 'enterKeyHint'\n  | 'spellCheck'\n  | 'maxLength'\n  | 'minLength'\n  | 'pattern'\n  | 'tabIndex'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n>;\n\n/** Properties for the SearchBox component. */\nexport interface SearchBoxProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | keyof SearchBoxInputProps\n    >,\n    SearchBoxInputProps {\n  /** Controlled search text value. */\n  value?: string;\n  /** Initial search text for uncontrolled usage (also what a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new search text when it changes (typing or clearing). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the new search text when it changes.\n   * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called when the user clears the search: with the clear button, or with Escape while there is\n   * text (after `onValueChange('')`).\n   */\n  onClear?: () => void;\n  /** Placeholder text shown when the input is empty.\n   * @default 'Search'\n   */\n  placeholder?: string;\n  /** Whether the search box is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Slot rendered before the text (replaces the default search icon). It takes the room it needs;\n   * the text starts after it. A value that renders nothing (`null`, `false`, `''`, an empty array\n   * or Fragment) keeps the default icon.\n   */\n  contentBefore?: Slot<'span'>;\n  /**\n   * Slot rendered after the text, before the clear button. It takes the room it needs; the text\n   * ends before it. A value that renders nothing (`false`, `''`, an empty array or Fragment) is no\n   * slot: nothing takes room.\n   */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Content of the clear button (replaces the default dismiss icon). It always renders **inside**\n   * the built-in `<button type=\"button\" aria-label=\"Clear search\">`, which clears the value, calls\n   * `onClear` and moves focus back to the input. The slot cannot hide the clear button or leave\n   * it empty: content that renders nothing (`null`, `false`, `true`, `''`, or an array, `Set`,\n   * generator or Fragment of only those) keeps the default icon, and a slot object without\n   * children (`{ className: 'text-error' }`) wraps the default icon in its element (not when it\n   * brings markup of its own through `dangerouslySetInnerHTML`, or is a void or component element).\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested: its props are merged into\n   * the built-in button (its `onClick` runs first; `preventDefault()` cancels the clear) and its\n   * children become the content, with a development warning. A Wave `Button`'s own props are not\n   * attributes: its `icon` becomes decorative content before its children (after them with\n   * `iconPosition=\"after\"`), `disabledFocusable` makes the clear button unavailable but focusable\n   * as on the Button (nothing is cleared), and `appearance` and `size` are ignored. The 0.4\n   * button-object form (`{ as: 'button', onClick, … }` or an object with button props) is\n   * **deprecated**: its button props are merged the same way. Pass icon content instead.\n   *\n   * Name (WCAG 2.5.3 Label in Name): content is decorative (`aria-hidden`), so the button keeps\n   * the name \"Clear search\". An `aria-label`, `aria-labelledby` or `title` on the merged button or\n   * on a slot object names the button instead (`{ children: 'Reset', 'aria-label': 'Reset' }`).\n   * The children of a merged `<button>`/`Button` (or of `{ as: 'button' }`) are rendered as is:\n   * when they render a text label (at least two letters or digits outside `aria-hidden`/`hidden`\n   * content, text from components such as translations included), that text names the button;\n   * an icon or a lone character (`X`, `×`) keeps \"Clear search\". Text hidden only with CSS still\n   * counts as the label, so give a button with a responsive label an explicit `aria-label`.\n   */\n  dismiss?: Slot<'span'> | SlotObject<'button'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Ref to the `<input type=\"search\">` (the focusable control). */\n  controlRef?: React.Ref<HTMLInputElement>;\n}\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Attributes that only make sense on the clear `<button>` itself (merged onto it). */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n  'popoverTarget',\n  'popoverTargetAction',\n]);\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Attributes that name the clear button (C-SLOTS naming). On a merged button or a slot object they\n * go to the clear button (slot content is `aria-hidden`), and any of them replaces the default\n * `aria-label`.\n */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\n/** Default name of the clear button. */\nconst DEFAULT_CLEAR_LABEL = 'Clear search';\n\ninterface DismissParts {\n  /**\n   * `default`: no slot (default icon); `content`: icon content; `element`: a `<button>`/`Button`\n   * element; `button-object`: the deprecated button-object form.\n   */\n  kind: 'default' | 'content' | 'element' | 'button-object';\n  /** Props merged onto the built-in clear button. */\n  buttonProps: UnknownProps;\n  /** Content of the clear button (`null` = the default icon, except for `content`). */\n  content: React.ReactNode;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button` or `{ as: 'button' }`),\n   * so a text label in it names the button (C-SLOTS naming, WCAG 2.5.3); `false` when the content\n   * is decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal children contain a text label: the name for the server render and the\n   * first client render. After mount the rendered button's text decides.\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the clear button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * Elements inside the field that keep a press to themselves: a control in a slot, the clear\n * button.\n */\nconst INTERACTIVE_CONTENT =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\nconst DEFAULT_DISMISS: DismissParts = {\n  kind: 'default',\n  buttonProps: {},\n  content: null,\n  contentMayName: false,\n  literalTextLabel: false,\n  disabledFocusable: false,\n};\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * Splits the props of a button-like element or object into button props and content. The content\n * is rendered as is, so a text label in it names the button (C-SLOTS naming). Content that renders\n * nothing is `null` (the default icon); a generator is read once and rendered as its items.\n */\nfunction splitButtonLike(type: unknown, props: UnknownProps, children: React.ReactNode) {\n  const hasChildren = slotRendersContent(children);\n  const content = materialiseSlotContent(children);\n  const literalTextLabel = hasTextLabel(content);\n  if (type === Button) {\n    // Wave Button's own props do not belong on a native <button>: its icon becomes content (after\n    // the children with `iconPosition=\"after\"`) and `disabledFocusable` is applied by the caller.\n    const buttonProps: UnknownProps = {};\n    for (const [key, value] of Object.entries(props)) {\n      if (key !== 'children' && !BUTTON_OWN_PROP_KEYS.has(key)) buttonProps[key] = value;\n    }\n    const iconNode = renderSlot(props.icon as Slot<'span'>, 'span', 'inline-flex', {\n      'aria-hidden': true,\n    });\n    const buttonContent =\n      iconNode || hasChildren ? placeButtonIcon(iconNode, content, props.iconPosition) : null;\n    return {\n      buttonProps,\n      content: buttonContent,\n      contentMayName: true,\n      literalTextLabel,\n      disabledFocusable: Boolean(props.disabledFocusable),\n    };\n  }\n  const { as, children: _children, ...buttonProps } = props;\n  // `null` content falls back to the default icon.\n  return {\n    buttonProps,\n    content: hasChildren ? content : null,\n    contentMayName: true,\n    literalTextLabel,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * Splits `dismiss` into the props merged onto the built-in clear button and its content. Content\n * that renders nothing (`slotRendersContent`) never leaves the button empty: without other props\n * it is the default icon; a slot object with its own content props (`className`, `style`, …)\n * wraps the default icon in its element.\n */\nfunction resolveDismiss(dismiss: SearchBoxProps['dismiss']): DismissParts {\n  // The type is unwrapped (C-COMPOUND): a Button written in a Server Component arrives as a lazy\n  // client reference, and must be merged like a plain one rather than nested inside the clear\n  // button. A slot object is never an element, so the check can take any slot value as a node.\n  const node = dismiss as React.ReactNode;\n  if (isElementOfType<UnknownProps>(node, 'button', Button)) {\n    const children = node.props.children as React.ReactNode;\n    return {\n      kind: 'element',\n      ...splitButtonLike(getElementType(node), node.props, children),\n    };\n  }\n  // Resolved once: a generator is materialised (and cached) by resolveSlot, so it can be checked\n  // for emptiness and rendered without being consumed twice.\n  const resolved = resolveSlot(dismiss as Slot<'span'>, 'span');\n  if (!resolved) return DEFAULT_DISMISS;\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return { kind: 'button-object', ...splitButtonLike(Component, props, children) };\n  }\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  let hasButtonProps = false;\n  for (const [key, value] of Object.entries(props)) {\n    // resolveSlot sets `className: undefined` when there are no classes.\n    if (value === undefined) continue;\n    if (BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key)) {\n      buttonProps[key] = value;\n      hasButtonProps = true;\n    } else if (NAMING_KEYS.has(key)) {\n      // The content is aria-hidden, so a naming attribute names the clear button instead (not the\n      // deprecated button-object form).\n      buttonProps[key] = value;\n    } else {\n      contentProps[key] = value;\n    }\n  }\n  // A void (`img`), component (`{ as: MyIcon }`) or markup (`dangerouslySetInnerHTML`) slot\n  // renders content of its own.\n  const hasChildren = slotRendersContent(children);\n  const empty = slotWrapsDefaultContent(Component, { ...contentProps, children });\n  if (empty && Object.keys(buttonProps).length === 0 && Object.keys(contentProps).length === 0) {\n    return DEFAULT_DISMISS;\n  }\n  // A button object without content (`{ onClick }`, `{ type: 'button' }`) or a content object\n  // without children (`{ className }`) keeps the default icon inside the object's own element (its\n  // className/style/attributes still apply). Markup of its own takes no children at all.\n  const contentChildren = empty ? <DismissIcon /> : hasChildren ? children : undefined;\n  const content =\n    contentChildren === undefined\n      ? React.createElement(Component, { 'aria-hidden': true, ...contentProps })\n      : React.createElement(Component, { 'aria-hidden': true, ...contentProps }, contentChildren);\n  return {\n    kind: hasButtonProps ? 'button-object' : 'content',\n    buttonProps,\n    content,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * A search input with a leading search icon and a clear button that appears while there is text\n * (not while `readOnly`).\n *\n * - **Layout**: the root `<div>` draws the field (its outline, focus and invalid look). The icon\n *   (or `contentBefore`), the text, `contentAfter` and the clear button sit side by side in it, so\n *   no slot covers the text. Pressing the field outside a control of its own focuses the input.\n * - **Clearing**: the clear button clears the text and moves focus back to the input. Escape\n *   clears the text too while there is any, and is then consumed, so an enclosing Dialog, Drawer\n *   or Popover stays open; in an empty field Escape reaches them. Both call `onClear`.\n * - **Routing**: `id`, ARIA and native input attributes and the focus/keyboard handlers go to the\n *   `<input type=\"search\">` (role `searchbox`); `className`, `style`, `data-*`, other handlers and\n *   `ref` stay on the root `<div>` (`controlRef` reaches the input). Inside a `Field` it picks up\n *   the label, hint, error and required state automatically.\n * - **Forms**: with `name` the text is submitted with the form; a form reset restores\n *   `defaultValue`.\n *\n * @example\n * <SearchBox aria-label=\"Search files\" value={query} onValueChange={setQuery} />\n */\nexport const SearchBox = ({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  onChange,\n  onClear,\n  placeholder = 'Search',\n  disabled,\n  contentBefore,\n  contentAfter,\n  dismiss,\n  className,\n  ref,\n  controlRef,\n  // Routed to the input (C-ROUTING)\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  required,\n  name,\n  form,\n  readOnly,\n  autoComplete,\n  autoFocus,\n  autoCapitalize,\n  autoCorrect,\n  inputMode,\n  enterKeyHint,\n  spellCheck,\n  maxLength,\n  minLength,\n  pattern,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  hidden,\n  ...rest\n}: SearchBoxProps) => {\n  if (onChange !== undefined) warnDeprecated('SearchBox', 'onChange', 'onValueChange');\n\n  const [value, setValue] = useControllable(controlledValue, defaultValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef);\n  // The input is always React-controlled, so the browser's own reset would put the current text\n  // back: restore the default here instead (C-FORMS).\n  useFormReset(inputRef, () => setValue(defaultValue), form);\n\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const dismissParts = resolveDismiss(dismiss);\n  const dismissKind = dismissParts.kind;\n  React.useEffect(() => {\n    if (dismissKind === 'element') {\n      warnOnce(\n        'SearchBox:dismiss-button-element',\n        'SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    } else if (dismissKind === 'button-object') {\n      warnOnce(\n        'SearchBox:dismiss-button-object',\n        'SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    }\n  }, [dismissKind]);\n\n  const handleClear = () => {\n    setValue('');\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  // Escape clears the text first, as native search fields do, and is consumed so an enclosing\n  // Dialog, Drawer or Popover stays open; with an empty field it reaches them (C-POPUPS).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key !== 'Escape' || event.nativeEvent.isComposing) return;\n    if (!value || readOnly || disabled) return;\n    event.preventDefault();\n    setValue('');\n    onClear?.();\n  };\n\n  // The whole box is the field: pressing the icon, a slot or the padding around the text focuses\n  // the input, as it does in a native search field. A control inside a slot keeps its press.\n  const handleRootMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current;\n    const root = event.currentTarget;\n    const target = event.target;\n    if (!input || disabled || event.button !== 0 || target === input) return;\n    // Events that bubble through React portals from outside this box are not ours (C-COMPOSE).\n    if (!(target instanceof Element) || !root.contains(target)) return;\n    const control = target.closest(INTERACTIVE_CONTENT);\n    if (control && root.contains(control)) return;\n    event.preventDefault(); // keeps the press from moving focus to the page\n    input.focus();\n  };\n\n  // The slot's onClick is composed at click time (it runs first; preventDefault() cancels the\n  // clear), so handleClear, which reads the input ref, is never passed to a render-time helper.\n  // The slot's ref joins ours through a stable merged ref (never a new callback per render).\n  const {\n    onClick: slotOnClick,\n    ref: slotRef,\n    ...slotButtonProps\n  } = dismissParts.buttonProps as UnknownProps & {\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    ref?: React.Ref<HTMLButtonElement>;\n  };\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a consumer naming attribute names the clear button;\n  // otherwise content rendered as is names it when it has a text label, and the default\n  // `aria-label` would hide that label. The literal children decide on the server and on the first\n  // render; after mount, the rendered button's text does (text from components, later changes).\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n  const checksContent = dismissParts.contentMayName && !hasOwnName;\n  const literalTextLabel = dismissParts.literalTextLabel;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const clearRef = useMergedRefs<HTMLButtonElement>(\n    slotRef,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  const clearButtonProps = mergeProps(\n    {\n      type: 'button',\n      disabled,\n      'aria-label': hasOwnName || namedByContent ? undefined : DEFAULT_CLEAR_LABEL,\n      className: cn(\n        // Padding and background set here (C-NATIVE): an app-wide `button` rule cannot fill it.\n        'me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground',\n        'not-disabled:not-aria-disabled:hover:text-foreground',\n        focusRing,\n        'disabled:cursor-not-allowed',\n        mergedAriaDisabledClasses,\n      ),\n    },\n    slotButtonProps,\n  ) as React.ComponentPropsWithoutRef<'button'>;\n\n  // A merged button with markup of its own (`dangerouslySetInnerHTML`) takes no children.\n  const clearContent =\n    clearButtonProps.dangerouslySetInnerHTML != null\n      ? undefined\n      : dismissKind === 'content'\n        ? dismissParts.content\n        : (dismissParts.content ?? <DismissIcon />);\n  // A slot value that renders nothing is no slot (the default icon before the text, no box after).\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        // The root draws the field; the slots, the text and the clear button are laid out side by\n        // side inside it, so a slot never covers the text.\n        'relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground',\n        inputFocusWithin,\n        invalidLook && inputInvalidWithin,\n        // The dimmed look lifts while a focus ring shows inside the root (a clear button kept\n        // focusable by a merged `disabledFocusable` Button, focusable slot content; the disabled\n        // input never takes focus): opacity would dim the ring below 3:1.\n        disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n        className,\n      )}\n      hidden={hidden}\n      {...rest}\n      // Composed at press time, like the clear button's click: the handler reads the input ref.\n      onMouseDown={(event) => composeEventHandlers(onMouseDown, handleRootMouseDown)(event)}\n    >\n      <span className=\"flex shrink-0 items-center ps-2\">\n        {hasBefore ? (\n          renderSlot(contentBefore, 'span', 'shrink-0')\n        ) : (\n          <SearchIcon className=\"text-muted-foreground\" />\n        )}\n      </span>\n\n      <input\n        ref={mergedInputRef}\n        type=\"search\"\n        value={value}\n        onChange={(event) => setValue(event.target.value)}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={cn(\n          'h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground',\n          'placeholder:text-muted-foreground',\n          'focus:outline-hidden',\n          'disabled:cursor-not-allowed',\n          '[&::-webkit-search-cancel-button]:hidden',\n        )}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        name={name}\n        form={form}\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        spellCheck={spellCheck}\n        maxLength={maxLength}\n        minLength={minLength}\n        pattern={pattern}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onKeyUp={onKeyUp}\n        {...fieldProps}\n      />\n\n      {hasAfter && (\n        <span className=\"flex shrink-0 items-center pe-2\">\n          {renderSlot(contentAfter, 'span', 'shrink-0')}\n        </span>\n      )}\n\n      {/* No clear button while read-only: clearing would change a value the user cannot edit. */}\n      {value && !readOnly ? (\n        <button\n          {...clearButtonProps}\n          ref={clearRef}\n          // mergeProps keeps a slot's `type: null`, which would drop the attribute and make the\n          // button submit its form; only nullish falls back (an explicit type is kept).\n          type={clearButtonProps.type ?? 'button'}\n          disabled={disabled || clearButtonProps.disabled}\n          onClick={(event) => composeEventHandlers(slotOnClick, handleClear)(event)}\n          // A merged `disabledFocusable` Button makes the clear button unavailable but focusable\n          // (spread last: it wins over `disabled` and the clear handler).\n          {...(dismissParts.disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          {clearContent}\n        </button>\n      ) : null}\n    </div>\n  );\n};\n\nSearchBox.displayName = 'SearchBox';\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.cjs","names":["Button","slotRendersContent","materialiseSlotContent","hasTextLabel","BUTTON_OWN_PROP_KEYS","renderSlot","cn","searchBoxClassNames","placeButtonIcon","isElementOfType","getElementType","resolveSlot","slotWrapsDefaultContent","DismissIcon","React","useControllable","useMergedRefs","useFieldControl","isInvalidLook","useInputLook","observeTextLabel","hasRenderedTextLabel","mergeProps","focusRing","mergedAriaDisabledClasses","inputHeightClasses","inputTextClasses","inputAppearanceClasses","inputFocusWithin","composeEventHandlers","SearchIcon","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useMergedRefs","require_useFieldControl","require_styles","require_Button","require_Button_slots","require_icons","require_mergeProps","require_inputLook","require_Input","require_useFormReset","require_labelInName","react","react_jsx_runtime","SEARCH_SIZE","BUTTON_ONLY_KEYS","HANDLER_KEY","NAMING_KEYS","DEFAULT_CLEAR_LABEL","noop","INTERACTIVE_CONTENT","DEFAULT_DISMISS","isButtonType","type","splitButtonLike","hasChildren","children","content","literalTextLabel","buttonProps","key","value","props","iconNode","_children","resolveDismiss","node","dismiss","resolved","Component","contentProps","hasButtonProps","empty","contentChildren","size","iconProps","SearchBox","controlledValue","sizeProp","appearanceProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","onChange","setValue","defaultValue","onValueChange","next","inputRef","mergedInputRef","controlRef","form","fieldProps","invalidLook","dismissParts","dismissKind","handleClear","onClear","handleKeyDown","event","readOnly","disabled","handleRootMouseDown","input","root","target","control","slotOnClick","slotRef","slotButtonProps","hasOwnName","checksContent","labelTarget","setLabelTarget","subscribeToContent","contentHasTextLabel","namedByContent","clearRef","clearButtonProps","clearContent","hasBefore","contentBefore","hasAfter","contentAfter","appearance","className","onMouseDown","onKeyDown"],"sources":["../../../src/components/input/SearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getElementType, isElementOfType } from '../../lib/children';\nimport { searchBoxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { DismissIcon, SearchIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { mergeProps } from '../../lib/mergeProps';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport {\n  focusRing,\n  hitAreaLayer,\n  inputAppearanceClasses,\n  inputFocusWithin,\n  inputHeightClasses,\n  inputInvalidWithin,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance, Slot, SlotObject } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport { isInvalidLook } from './Input';\nimport { useInputLook } from './inputLook';\n\n/**\n * Props that SearchBox routes to its `<input>` (C-ROUTING): the id, the ARIA naming/validation\n * attributes, native text-input attributes and the focus/keyboard handlers.\n */\nexport type SearchBoxInputProps = Pick<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-errormessage'\n  | 'aria-details'\n  | 'name'\n  | 'form'\n  | 'required'\n  | 'readOnly'\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'autoCapitalize'\n  | 'autoCorrect'\n  | 'inputMode'\n  | 'enterKeyHint'\n  | 'spellCheck'\n  | 'maxLength'\n  | 'minLength'\n  | 'pattern'\n  | 'tabIndex'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n>;\n\n/** Properties for the SearchBox component. */\nexport interface SearchBoxProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | keyof SearchBoxInputProps\n    >,\n    SearchBoxInputProps {\n  /** Controlled search text value. */\n  value?: string;\n  /** Initial search text for uncontrolled usage (also what a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new search text when it changes (typing or clearing). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the new search text when it changes.\n   * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called when the user clears the search: with the clear button, or with Escape while there is\n   * text (after `onValueChange('')`).\n   */\n  onClear?: () => void;\n  /** Placeholder text shown when the input is empty.\n   * @default 'Search'\n   */\n  placeholder?: string;\n  /** Whether the search box is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.\n   */\n  size?: CoreSize;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\n  /**\n   * Slot rendered before the text (replaces the default search icon). It takes the room it needs;\n   * the text starts after it. A value that renders nothing (`null`, `false`, `''`, an empty array\n   * or Fragment) keeps the default icon.\n   */\n  contentBefore?: Slot<'span'>;\n  /**\n   * Slot rendered after the text, before the clear button. It takes the room it needs; the text\n   * ends before it. A value that renders nothing (`false`, `''`, an empty array or Fragment) is no\n   * slot: nothing takes room.\n   */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Content of the clear button (replaces the default dismiss icon). It always renders **inside**\n   * the built-in `<button type=\"button\" aria-label=\"Clear search\">`, which clears the value, calls\n   * `onClear` and moves focus back to the input. The slot cannot hide the clear button or leave\n   * it empty: content that renders nothing (`null`, `false`, `true`, `''`, or an array, `Set`,\n   * generator or Fragment of only those) keeps the default icon, and a slot object without\n   * children (`{ className: 'text-error' }`) wraps the default icon in its element (not when it\n   * brings markup of its own through `dangerouslySetInnerHTML`, or is a void or component element).\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested: its props are merged into\n   * the built-in button (its `onClick` runs first; `preventDefault()` cancels the clear) and its\n   * children become the content, with a development warning. A Wave `Button`'s own props are not\n   * attributes: its `icon` becomes decorative content before its children (after them with\n   * `iconPosition=\"after\"`), `disabledFocusable` makes the clear button unavailable but focusable\n   * as on the Button (nothing is cleared), and `appearance` and `size` are ignored. The 0.4\n   * button-object form (`{ as: 'button', onClick, … }` or an object with button props) is\n   * **deprecated**: its button props are merged the same way. Pass icon content instead.\n   *\n   * Name (WCAG 2.5.3 Label in Name): content is decorative (`aria-hidden`), so the button keeps\n   * the name \"Clear search\". An `aria-label`, `aria-labelledby` or `title` on the merged button or\n   * on a slot object names the button instead (`{ children: 'Reset', 'aria-label': 'Reset' }`).\n   * The children of a merged `<button>`/`Button` (or of `{ as: 'button' }`) are rendered as is:\n   * when they render a text label (at least two letters or digits outside `aria-hidden`/`hidden`\n   * content, text from components such as translations included), that text names the button;\n   * an icon or a lone character (`X`, `×`) keeps \"Clear search\". Text hidden only with CSS still\n   * counts as the label, so give a button with a responsive label an explicit `aria-label`.\n   */\n  dismiss?: Slot<'span'> | SlotObject<'button'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Ref to the `<input type=\"search\">` (the focusable control). */\n  controlRef?: React.Ref<HTMLInputElement>;\n}\n\n/** Per-size metrics of SearchBox (medium is the 0.7 look). */\nconst SEARCH_SIZE: Readonly<\n  Record<CoreSize, { before: string; after: string; input: string; clear: string; glyph: number }>\n> = {\n  small: { before: 'ps-1.5', after: 'pe-1.5', input: 'px-1.5', clear: 'size-5', glyph: 12 },\n  medium: { before: 'ps-2', after: 'pe-2', input: 'px-2', clear: 'h-6 w-6', glyph: 16 },\n  large: { before: 'ps-3', after: 'pe-3', input: 'px-3', clear: 'size-8', glyph: 20 },\n};\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Attributes that only make sense on the clear `<button>` itself (merged onto it). */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n  'popoverTarget',\n  'popoverTargetAction',\n]);\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Attributes that name the clear button (C-SLOTS naming). On a merged button or a slot object they\n * go to the clear button (slot content is `aria-hidden`), and any of them replaces the default\n * `aria-label`.\n */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\n/** Default name of the clear button. */\nconst DEFAULT_CLEAR_LABEL = 'Clear search';\n\ninterface DismissParts {\n  /**\n   * `default`: no slot (default icon); `content`: icon content; `element`: a `<button>`/`Button`\n   * element; `button-object`: the deprecated button-object form.\n   */\n  kind: 'default' | 'content' | 'element' | 'button-object';\n  /** Props merged onto the built-in clear button. */\n  buttonProps: UnknownProps;\n  /** Content of the clear button (`null` = the default icon, except for `content`). */\n  content: React.ReactNode;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button` or `{ as: 'button' }`),\n   * so a text label in it names the button (C-SLOTS naming, WCAG 2.5.3); `false` when the content\n   * is decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal children contain a text label: the name for the server render and the\n   * first client render. After mount the rendered button's text decides.\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the clear button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * Elements inside the field that keep a press to themselves: a control in a slot, the clear\n * button.\n */\nconst INTERACTIVE_CONTENT =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\nconst DEFAULT_DISMISS: DismissParts = {\n  kind: 'default',\n  buttonProps: {},\n  content: null,\n  contentMayName: false,\n  literalTextLabel: false,\n  disabledFocusable: false,\n};\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * Splits the props of a button-like element or object into button props and content. The content\n * is rendered as is, so a text label in it names the button (C-SLOTS naming). Content that renders\n * nothing is `null` (the default icon); a generator is read once and rendered as its items.\n */\nfunction splitButtonLike(type: unknown, props: UnknownProps, children: React.ReactNode) {\n  const hasChildren = slotRendersContent(children);\n  const content = materialiseSlotContent(children);\n  const literalTextLabel = hasTextLabel(content);\n  if (type === Button) {\n    // Wave Button's own props do not belong on a native <button>: its icon becomes content (after\n    // the children with `iconPosition=\"after\"`) and `disabledFocusable` is applied by the caller.\n    const buttonProps: UnknownProps = {};\n    for (const [key, value] of Object.entries(props)) {\n      if (key !== 'children' && !BUTTON_OWN_PROP_KEYS.has(key)) buttonProps[key] = value;\n    }\n    const iconNode = renderSlot(\n      props.icon as Slot<'span'>,\n      'span',\n      cn(searchBoxClassNames.dismissIcon, 'inline-flex'),\n      { 'aria-hidden': true },\n    );\n    const buttonContent =\n      iconNode || hasChildren ? placeButtonIcon(iconNode, content, props.iconPosition) : null;\n    return {\n      buttonProps,\n      content: buttonContent,\n      contentMayName: true,\n      literalTextLabel,\n      disabledFocusable: Boolean(props.disabledFocusable),\n    };\n  }\n  const { as, children: _children, ...buttonProps } = props;\n  // `null` content falls back to the default icon.\n  return {\n    buttonProps,\n    content: hasChildren ? content : null,\n    contentMayName: true,\n    literalTextLabel,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * Splits `dismiss` into the props merged onto the built-in clear button and its content. Content\n * that renders nothing (`slotRendersContent`) never leaves the button empty: without other props\n * it is the default icon; a slot object with its own content props (`className`, `style`, …)\n * wraps the default icon in its element.\n */\nfunction resolveDismiss(dismiss: SearchBoxProps['dismiss'], size: CoreSize): DismissParts {\n  // The type is unwrapped (C-COMPOUND): a Button written in a Server Component arrives as a lazy\n  // client reference, and must be merged like a plain one rather than nested inside the clear\n  // button. A slot object is never an element, so the check can take any slot value as a node.\n  const node = dismiss as React.ReactNode;\n  if (isElementOfType<UnknownProps>(node, 'button', Button)) {\n    const children = node.props.children as React.ReactNode;\n    return {\n      kind: 'element',\n      ...splitButtonLike(getElementType(node), node.props, children),\n    };\n  }\n  // Resolved once: a generator is materialised (and cached) by resolveSlot, so it can be checked\n  // for emptiness and rendered without being consumed twice.\n  const resolved = resolveSlot(dismiss as Slot<'span'>, 'span');\n  if (!resolved) return DEFAULT_DISMISS;\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return { kind: 'button-object', ...splitButtonLike(Component, props, children) };\n  }\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  let hasButtonProps = false;\n  for (const [key, value] of Object.entries(props)) {\n    // resolveSlot sets `className: undefined` when there are no classes.\n    if (value === undefined) continue;\n    if (BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key)) {\n      buttonProps[key] = value;\n      hasButtonProps = true;\n    } else if (NAMING_KEYS.has(key)) {\n      // The content is aria-hidden, so a naming attribute names the clear button instead (not the\n      // deprecated button-object form).\n      buttonProps[key] = value;\n    } else {\n      contentProps[key] = value;\n    }\n  }\n  // A void (`img`), component (`{ as: MyIcon }`) or markup (`dangerouslySetInnerHTML`) slot\n  // renders content of its own.\n  const hasChildren = slotRendersContent(children);\n  const empty = slotWrapsDefaultContent(Component, { ...contentProps, children });\n  if (empty && Object.keys(buttonProps).length === 0 && Object.keys(contentProps).length === 0) {\n    return DEFAULT_DISMISS;\n  }\n  // A button object without content (`{ onClick }`, `{ type: 'button' }`) or a content object\n  // without children (`{ className }`) keeps the default icon inside the object's own element (its\n  // className/style/attributes still apply). Markup of its own takes no children at all.\n  const contentChildren = empty ? (\n    <DismissIcon size={SEARCH_SIZE[size].glyph} />\n  ) : hasChildren ? (\n    children\n  ) : undefined;\n  // The element the slot renders carries the dismissIcon part class, before the slot's own.\n  const iconProps = {\n    'aria-hidden': true,\n    ...contentProps,\n    className: cn(searchBoxClassNames.dismissIcon, contentProps.className as string | undefined),\n  };\n  const content =\n    contentChildren === undefined\n      ? React.createElement(Component, iconProps)\n      : React.createElement(Component, iconProps, contentChildren);\n  return {\n    kind: hasButtonProps ? 'button-object' : 'content',\n    buttonProps,\n    content,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * A search input with a leading search icon and a clear button that appears while there is text\n * (not while `readOnly`).\n *\n * - **Layout**: the root `<div>` draws the field (its outline, focus and invalid look). The icon\n *   (or `contentBefore`), the text, `contentAfter` and the clear button sit side by side in it, so\n *   no slot covers the text. Pressing the field outside a control of its own focuses the input.\n * - **Clearing**: the clear button clears the text and moves focus back to the input. Escape\n *   clears the text too while there is any, and is then consumed, so an enclosing Dialog, Drawer\n *   or Popover stays open; in an empty field Escape reaches them. Both call `onClear`.\n * - **Routing**: `id`, ARIA and native input attributes and the focus/keyboard handlers go to the\n *   `<input type=\"search\">` (role `searchbox`); `className`, `style`, `data-*`, other handlers and\n *   `ref` stay on the root `<div>` (`controlRef` reaches the input). Inside a `Field` it picks up\n *   the label, hint, error and required state automatically.\n * - **Forms**: with `name` the text is submitted with the form; a form reset restores\n *   `defaultValue`.\n * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own\n *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as\n *   `data-size` and `data-appearance` on the root `<div>`.\n *\n * @example\n * <SearchBox aria-label=\"Search files\" value={query} onValueChange={setQuery} />\n */\nexport const SearchBox = ({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  onChange,\n  onClear,\n  placeholder = 'Search',\n  disabled,\n  size: sizeProp,\n  appearance: appearanceProp,\n  contentBefore,\n  contentAfter,\n  dismiss,\n  className,\n  ref,\n  controlRef,\n  // Routed to the input (C-ROUTING)\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  required,\n  name,\n  form,\n  readOnly,\n  autoComplete,\n  autoFocus,\n  autoCapitalize,\n  autoCorrect,\n  inputMode,\n  enterKeyHint,\n  spellCheck,\n  maxLength,\n  minLength,\n  pattern,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  hidden,\n  ...rest\n}: SearchBoxProps) => {\n  if (onChange !== undefined) warnDeprecated('SearchBox', 'onChange', 'onValueChange');\n\n  const [value, setValue] = useControllable(controlledValue, defaultValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef);\n  // The input is always React-controlled, so the browser's own reset would put the current text\n  // back: restore the default here instead (C-FORMS).\n  useFormReset(inputRef, () => setValue(defaultValue), form);\n\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n  const dismissParts = resolveDismiss(dismiss, size);\n  const dismissKind = dismissParts.kind;\n  React.useEffect(() => {\n    if (dismissKind === 'element') {\n      warnOnce(\n        'SearchBox:dismiss-button-element',\n        'SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    } else if (dismissKind === 'button-object') {\n      warnOnce(\n        'SearchBox:dismiss-button-object',\n        'SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    }\n  }, [dismissKind]);\n\n  const handleClear = () => {\n    setValue('');\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  // Escape clears the text first, as native search fields do, and is consumed so an enclosing\n  // Dialog, Drawer or Popover stays open; with an empty field it reaches them (C-POPUPS).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key !== 'Escape' || event.nativeEvent.isComposing) return;\n    if (!value || readOnly || disabled) return;\n    event.preventDefault();\n    setValue('');\n    onClear?.();\n  };\n\n  // The whole box is the field: pressing the icon, a slot or the padding around the text focuses\n  // the input, as it does in a native search field. A control inside a slot keeps its press.\n  const handleRootMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current;\n    const root = event.currentTarget;\n    const target = event.target;\n    if (!input || disabled || event.button !== 0 || target === input) return;\n    // Events that bubble through React portals from outside this box are not ours (C-COMPOSE).\n    if (!(target instanceof Element) || !root.contains(target)) return;\n    const control = target.closest(INTERACTIVE_CONTENT);\n    if (control && root.contains(control)) return;\n    event.preventDefault(); // keeps the press from moving focus to the page\n    input.focus();\n  };\n\n  // The slot's onClick is composed at click time (it runs first; preventDefault() cancels the\n  // clear), so handleClear, which reads the input ref, is never passed to a render-time helper.\n  // The slot's ref joins ours through a stable merged ref (never a new callback per render).\n  const {\n    onClick: slotOnClick,\n    ref: slotRef,\n    ...slotButtonProps\n  } = dismissParts.buttonProps as UnknownProps & {\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    ref?: React.Ref<HTMLButtonElement>;\n  };\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a consumer naming attribute names the clear button;\n  // otherwise content rendered as is names it when it has a text label, and the default\n  // `aria-label` would hide that label. The literal children decide on the server and on the first\n  // render; after mount, the rendered button's text does (text from components, later changes).\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n  const checksContent = dismissParts.contentMayName && !hasOwnName;\n  const literalTextLabel = dismissParts.literalTextLabel;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const clearRef = useMergedRefs<HTMLButtonElement>(\n    slotRef,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  const clearButtonProps = mergeProps(\n    {\n      type: 'button',\n      disabled,\n      'aria-label': hasOwnName || namedByContent ? undefined : DEFAULT_CLEAR_LABEL,\n      className: cn(\n        searchBoxClassNames.dismissButton,\n        // Padding and background set here (C-NATIVE): an app-wide `button` rule cannot fill it.\n        'me-1 flex shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground',\n        SEARCH_SIZE[size].clear,\n        // hitAreaLayer needs a positioned element: unlike the picker buttons, the small clear\n        // button sits in the row without its own position, so it sets one here.\n        size === 'small' && cn('relative', hitAreaLayer),\n        'not-disabled:not-aria-disabled:hover:text-foreground',\n        focusRing,\n        'disabled:cursor-not-allowed',\n        mergedAriaDisabledClasses,\n      ),\n    },\n    slotButtonProps,\n  ) as React.ComponentPropsWithoutRef<'button'>;\n\n  // A merged button with markup of its own (`dangerouslySetInnerHTML`) takes no children.\n  const clearContent =\n    clearButtonProps.dangerouslySetInnerHTML != null\n      ? undefined\n      : dismissKind === 'content'\n        ? dismissParts.content\n        : (dismissParts.content ?? (\n            <DismissIcon\n              size={SEARCH_SIZE[size].glyph}\n              className={searchBoxClassNames.dismissIcon}\n            />\n          ));\n  // A slot value that renders nothing is no slot (the default icon before the text, no box after).\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  return (\n    <div\n      ref={ref}\n      data-size={size}\n      data-appearance={appearance}\n      className={cn(\n        searchBoxClassNames.root,\n        // The root draws the field; the slots, the text and the clear button are laid out side by\n        // side inside it, so a slot never covers the text.\n        'relative inline-flex w-full items-center',\n        inputHeightClasses[size],\n        inputTextClasses[size],\n        inputAppearanceClasses[appearance],\n        'text-foreground',\n        inputFocusWithin,\n        invalidLook && inputInvalidWithin,\n        // The dimmed look lifts while a focus ring shows inside the root (a clear button kept\n        // focusable by a merged `disabledFocusable` Button, focusable slot content; the disabled\n        // input never takes focus): opacity would dim the ring below 3:1.\n        disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n        className,\n      )}\n      hidden={hidden}\n      {...rest}\n      // Composed at press time, like the clear button's click: the handler reads the input ref.\n      onMouseDown={(event) => composeEventHandlers(onMouseDown, handleRootMouseDown)(event)}\n    >\n      <span\n        className={cn(\n          searchBoxClassNames.contentBefore,\n          'flex shrink-0 items-center',\n          SEARCH_SIZE[size].before,\n        )}\n      >\n        {hasBefore ? (\n          renderSlot(contentBefore, 'span', 'shrink-0')\n        ) : (\n          <SearchIcon size={SEARCH_SIZE[size].glyph} className=\"text-muted-foreground\" />\n        )}\n      </span>\n\n      <input\n        ref={mergedInputRef}\n        type=\"search\"\n        value={value}\n        onChange={(event) => setValue(event.target.value)}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={cn(\n          searchBoxClassNames.input,\n          'h-full min-w-0 flex-1 appearance-none border-none bg-transparent text-foreground',\n          SEARCH_SIZE[size].input,\n          inputTextClasses[size],\n          'placeholder:text-muted-foreground',\n          'focus:outline-hidden',\n          'disabled:cursor-not-allowed',\n          '[&::-webkit-search-cancel-button]:hidden',\n        )}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        name={name}\n        form={form}\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        spellCheck={spellCheck}\n        maxLength={maxLength}\n        minLength={minLength}\n        pattern={pattern}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onKeyUp={onKeyUp}\n        {...fieldProps}\n      />\n\n      {hasAfter && (\n        <span\n          className={cn(\n            searchBoxClassNames.contentAfter,\n            'flex shrink-0 items-center',\n            SEARCH_SIZE[size].after,\n          )}\n        >\n          {renderSlot(contentAfter, 'span', 'shrink-0')}\n        </span>\n      )}\n\n      {/* No clear button while read-only: clearing would change a value the user cannot edit. */}\n      {value && !readOnly ? (\n        <button\n          {...clearButtonProps}\n          ref={clearRef}\n          // mergeProps keeps a slot's `type: null`, which would drop the attribute and make the\n          // button submit its form; only nullish falls back (an explicit type is kept).\n          type={clearButtonProps.type ?? 'button'}\n          disabled={disabled || clearButtonProps.disabled}\n          onClick={(event) => composeEventHandlers(slotOnClick, handleClear)(event)}\n          // A merged `disabledFocusable` Button makes the clear button unavailable but focusable\n          // (spread last: it wins over `disabled` and the clear handler).\n          {...(dismissParts.disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          {clearContent}\n        </button>\n      ) : null}\n    </div>\n  );\n};\n\nSearchBox.displayName = 'SearchBox';\n"],"mappings":"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"}

package/dist/components/input/SearchBox.mjs

@@ -4,21 +4,45 @@ import { getElementType as t, isElementOfType as n } from "../../lib/children.mj
 import { warnDeprecated as r, warnOnce as i } from "../../lib/dev.mjs";
 import { materialiseSlotContent as a, renderSlot as o, resolveSlot as s, slotRendersContent as c, slotWrapsDefaultContent as l } from "../../lib/slot.mjs";
 import { composeEventHandlers as u } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as d } from "../../hooks/useControllable.mjs";
-import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
-import { useFieldControl as p } from "../../hooks/useFieldControl.mjs";
-import { focusRing as m, inputFocusWithin as h } from "../../lib/styles.mjs";
-import { Button as g } from "../button/Button.mjs";
-import { DismissIcon as _, SearchIcon as v } from "../../lib/icons.mjs";
-import { mergeProps as y } from "../../lib/mergeProps.mjs";
-import { BUTTON_OWN_PROP_KEYS as b, MERGED_DISABLED_FOCUSABLE_PROPS as ee, mergedAriaDisabledClasses as te, placeButtonIcon as x } from "../button/Button.slots.mjs";
-import { isInvalidLook as ne } from "./Input.mjs";
-import { useFormReset as re } from "../../hooks/useFormReset.mjs";
-import { hasRenderedTextLabel as ie, hasTextLabel as S, observeTextLabel as ae } from "../../lib/labelInName.mjs";
-import * as C from "react";
-import { jsx as w, jsxs as oe } from "react/jsx-runtime";
+import { searchBoxClassNames as d } from "../../lib/classNames.mjs";
+import { useControllable as f } from "../../hooks/useControllable.mjs";
+import { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { useFieldControl as m } from "../../hooks/useFieldControl.mjs";
+import { focusRing as h, inputAppearanceClasses as g, inputFocusWithin as _, inputHeightClasses as v, inputTextClasses as y } from "../../lib/styles.mjs";
+import { Button as b } from "../button/Button.mjs";
+import { BUTTON_OWN_PROP_KEYS as x, MERGED_DISABLED_FOCUSABLE_PROPS as S, mergedAriaDisabledClasses as ee, placeButtonIcon as C } from "../button/Button.slots.mjs";
+import { DismissIcon as w, SearchIcon as te } from "../../lib/icons.mjs";
+import { mergeProps as ne } from "../../lib/mergeProps.mjs";
+import { useInputLook as re } from "./inputLook.mjs";
+import { isInvalidLook as ie } from "./Input.mjs";
+import { useFormReset as ae } from "../../hooks/useFormReset.mjs";
+import { hasRenderedTextLabel as oe, hasTextLabel as T, observeTextLabel as se } from "../../lib/labelInName.mjs";
+import * as E from "react";
+import { jsx as D, jsxs as ce } from "react/jsx-runtime";
 //#region src/components/input/SearchBox.tsx
-var T = /* @__PURE__ */ new Set([
+var O = {
+	small: {
+		before: "ps-1.5",
+		after: "pe-1.5",
+		input: "px-1.5",
+		clear: "size-5",
+		glyph: 12
+	},
+	medium: {
+		before: "ps-2",
+		after: "pe-2",
+		input: "px-2",
+		clear: "h-6 w-6",
+		glyph: 16
+	},
+	large: {
+		before: "ps-3",
+		after: "pe-3",
+		input: "px-3",
+		clear: "size-8",
+		glyph: 20
+	}
+}, k = /* @__PURE__ */ new Set([
 	"type",
 	"disabled",
 	"form",
@@ -31,11 +55,11 @@ var T = /* @__PURE__ */ new Set([
 	"value",
 	"popoverTarget",
 	"popoverTargetAction"
-]), E = /^on[A-Z]/, D = /* @__PURE__ */ new Set([
+]), A = /^on[A-Z]/, j = /* @__PURE__ */ new Set([
 	"aria-label",
 	"aria-labelledby",
 	"title"
-]), O = "Clear search", k = () => {}, se = "a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])", A = {
+]), le = "Clear search", ue = () => {}, de = "a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])", M = {
 	kind: "default",
 	buttonProps: {},
 	content: null,
@@ -43,163 +67,169 @@ var T = /* @__PURE__ */ new Set([
 	literalTextLabel: !1,
 	disabledFocusable: !1
 };
-function j(e) {
-	return e === "button" || e === g;
+function N(e) {
+	return e === "button" || e === b;
 }
-function M(e, t, n) {
-	let r = c(n), i = a(n), s = S(i);
-	if (e === g) {
-		let e = {};
-		for (let [n, r] of Object.entries(t)) n !== "children" && !b.has(n) && (e[n] = r);
-		let n = o(t.icon, "span", "inline-flex", { "aria-hidden": !0 });
+function P(t, n, r) {
+	let i = c(r), s = a(r), l = T(s);
+	if (t === b) {
+		let t = {};
+		for (let [e, r] of Object.entries(n)) e !== "children" && !x.has(e) && (t[e] = r);
+		let r = o(n.icon, "span", e(d.dismissIcon, "inline-flex"), { "aria-hidden": !0 });
 		return {
-			buttonProps: e,
-			content: n || r ? x(n, i, t.iconPosition) : null,
+			buttonProps: t,
+			content: r || i ? C(r, s, n.iconPosition) : null,
 			contentMayName: !0,
-			literalTextLabel: s,
-			disabledFocusable: !!t.disabledFocusable
+			literalTextLabel: l,
+			disabledFocusable: !!n.disabledFocusable
 		};
 	}
-	let { as: l, children: u, ...d } = t;
+	let { as: u, children: f, ...p } = n;
 	return {
-		buttonProps: d,
-		content: r ? i : null,
+		buttonProps: p,
+		content: i ? s : null,
 		contentMayName: !0,
-		literalTextLabel: s,
+		literalTextLabel: l,
 		disabledFocusable: !1
 	};
 }
-function ce(e) {
-	let r = e;
-	if (n(r, "button", g)) {
-		let e = r.props.children;
+function fe(r, i) {
+	let a = r;
+	if (n(a, "button", b)) {
+		let e = a.props.children;
 		return {
 			kind: "element",
-			...M(t(r), r.props, e)
+			...P(t(a), a.props, e)
 		};
 	}
-	let i = s(e, "span");
-	if (!i) return A;
-	let { Component: a, props: o, children: u } = i;
-	if (j(a)) return {
+	let o = s(r, "span");
+	if (!o) return M;
+	let { Component: u, props: f, children: p } = o;
+	if (N(u)) return {
 		kind: "button-object",
-		...M(a, o, u)
+		...P(u, f, p)
 	};
-	let d = {}, f = {}, p = !1;
-	for (let [e, t] of Object.entries(o)) t !== void 0 && (T.has(e) || E.test(e) ? (d[e] = t, p = !0) : D.has(e) ? d[e] = t : f[e] = t);
-	let m = c(u), h = l(a, {
-		...f,
-		children: u
+	let m = {}, h = {}, g = !1;
+	for (let [e, t] of Object.entries(f)) t !== void 0 && (k.has(e) || A.test(e) ? (m[e] = t, g = !0) : j.has(e) ? m[e] = t : h[e] = t);
+	let _ = c(p), v = l(u, {
+		...h,
+		children: p
 	});
-	if (h && Object.keys(d).length === 0 && Object.keys(f).length === 0) return A;
-	let v = h ? /* @__PURE__ */ w(_, {}) : m ? u : void 0, y = v === void 0 ? C.createElement(a, {
-		"aria-hidden": !0,
-		...f
-	}) : C.createElement(a, {
+	if (v && Object.keys(m).length === 0 && Object.keys(h).length === 0) return M;
+	let y = v ? /* @__PURE__ */ D(w, { size: O[i].glyph }) : _ ? p : void 0, x = {
 		"aria-hidden": !0,
-		...f
-	}, v);
+		...h,
+		className: e(d.dismissIcon, h.className)
+	}, S = y === void 0 ? E.createElement(u, x) : E.createElement(u, x, y);
 	return {
-		kind: p ? "button-object" : "content",
-		buttonProps: d,
-		content: y,
+		kind: g ? "button-object" : "content",
+		buttonProps: m,
+		content: S,
 		contentMayName: !1,
 		literalTextLabel: !1,
 		disabledFocusable: !1
 	};
 }
-var N = ({ value: t, defaultValue: n = "", onValueChange: a, onChange: s, onClear: l, placeholder: g = "Search", disabled: b, contentBefore: x, contentAfter: S, dismiss: T, className: E, ref: A, controlRef: j, id: M, "aria-label": N, "aria-labelledby": le, "aria-describedby": ue, "aria-invalid": de, "aria-required": fe, "aria-errormessage": pe, "aria-details": P, required: F, name: I, form: L, readOnly: R, autoComplete: z, autoFocus: B, autoCapitalize: me, autoCorrect: he, inputMode: ge, enterKeyHint: _e, spellCheck: ve, maxLength: ye, minLength: be, pattern: xe, tabIndex: Se, onFocus: Ce, onBlur: we, onKeyDown: Te, onKeyUp: Ee, onMouseDown: De, hidden: Oe, ...ke }) => {
+var F = ({ value: t, defaultValue: n = "", onValueChange: a, onChange: s, onClear: l, placeholder: b = "Search", disabled: x, size: C, appearance: T, contentBefore: k, contentAfter: A, dismiss: M, className: N, ref: P, controlRef: F, id: pe, "aria-label": me, "aria-labelledby": he, "aria-describedby": ge, "aria-invalid": _e, "aria-required": I, "aria-errormessage": ve, "aria-details": ye, required: be, name: xe, form: L, readOnly: R, autoComplete: Se, autoFocus: Ce, autoCapitalize: we, autoCorrect: Te, inputMode: Ee, enterKeyHint: De, spellCheck: Oe, maxLength: ke, minLength: Ae, pattern: je, tabIndex: Me, onFocus: Ne, onBlur: Pe, onKeyDown: Fe, onKeyUp: Ie, onMouseDown: z, hidden: Le, ...Re }) => {
 	s !== void 0 && r("SearchBox", "onChange", "onValueChange");
-	let [V, H] = d(t, n, (e) => {
+	let [B, V] = f(t, n, (e) => {
 		a?.(e), s?.(e);
-	}), U = C.useRef(null), Ae = f(U, j);
-	re(U, () => H(n), L);
-	let W = p({
-		id: M,
-		"aria-label": N,
-		"aria-labelledby": le,
-		"aria-describedby": ue,
-		"aria-invalid": de,
-		"aria-required": fe,
-		required: F
-	}, { nativeRequired: !0 }), je = ne(!1, W["aria-invalid"]), G = ce(T), K = G.kind;
-	C.useEffect(() => {
-		K === "element" ? i("SearchBox:dismiss-button-element", "SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.") : K === "button-object" && i("SearchBox:dismiss-button-object", "SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.");
-	}, [K]);
-	let Me = () => {
-		H(""), l?.(), U.current?.focus();
-	}, Ne = (e) => {
-		e.key !== "Escape" || e.nativeEvent.isComposing || !V || R || b || (e.preventDefault(), H(""), l?.());
-	}, Pe = (e) => {
-		let t = U.current, n = e.currentTarget, r = e.target;
-		if (!t || b || e.button !== 0 || r === t || !(r instanceof Element) || !n.contains(r)) return;
-		let i = r.closest(se);
+	}), H = E.useRef(null), ze = p(H, F);
+	ae(H, () => V(n), L);
+	let U = m({
+		id: pe,
+		"aria-label": me,
+		"aria-labelledby": he,
+		"aria-describedby": ge,
+		"aria-invalid": _e,
+		"aria-required": I,
+		required: be
+	}, { nativeRequired: !0 }), Be = ie(!1, U["aria-invalid"]), { size: W, appearance: G } = re(C, T), K = fe(M, W), q = K.kind;
+	E.useEffect(() => {
+		q === "element" ? i("SearchBox:dismiss-button-element", "SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.") : q === "button-object" && i("SearchBox:dismiss-button-object", "SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.");
+	}, [q]);
+	let Ve = () => {
+		V(""), l?.(), H.current?.focus();
+	}, He = (e) => {
+		e.key !== "Escape" || e.nativeEvent.isComposing || !B || R || x || (e.preventDefault(), V(""), l?.());
+	}, Ue = (e) => {
+		let t = H.current, n = e.currentTarget, r = e.target;
+		if (!t || x || e.button !== 0 || r === t || !(r instanceof Element) || !n.contains(r)) return;
+		let i = r.closest(de);
 		i && n.contains(i) || (e.preventDefault(), t.focus());
-	}, { onClick: Fe, ref: Ie, ...q } = G.buttonProps, J = Object.keys(q).some((e) => D.has(e) && q[e] != null), Y = G.contentMayName && !J, X = G.literalTextLabel, [Z, Le] = C.useState(null), Re = C.useCallback((e) => Z ? ae(Z, e) : k, [Z]), ze = C.useSyncExternalStore(Re, () => Z ? ie(Z) : X, () => X), Be = Y && ze, Q = f(Ie, Y ? Le : void 0), $ = y({
+	}, { onClick: We, ref: Ge, ...J } = K.buttonProps, Y = Object.keys(J).some((e) => j.has(e) && J[e] != null), X = K.contentMayName && !Y, Z = K.literalTextLabel, [Q, Ke] = E.useState(null), qe = E.useCallback((e) => Q ? se(Q, e) : ue, [Q]), Je = E.useSyncExternalStore(qe, () => Q ? oe(Q) : Z, () => Z), Ye = X && Je, Xe = p(Ge, X ? Ke : void 0), $ = ne({
 		type: "button",
-		disabled: b,
-		"aria-label": J || Be ? void 0 : O,
-		className: e("me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground", "not-disabled:not-aria-disabled:hover:text-foreground", m, "disabled:cursor-not-allowed", te)
-	}, q), Ve = $.dangerouslySetInnerHTML == null ? K === "content" ? G.content : G.content ?? /* @__PURE__ */ w(_, {}) : void 0, He = c(x), Ue = c(S);
-	return /* @__PURE__ */ oe("div", {
-		ref: A,
-		className: e("relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground", h, je && "border-destructive focus-within:border-b-destructive", b && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", E),
-		hidden: Oe,
-		...ke,
-		onMouseDown: (e) => u(De, Pe)(e),
+		disabled: x,
+		"aria-label": Y || Ye ? void 0 : le,
+		className: e(d.dismissButton, "me-1 flex shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground", O[W].clear, W === "small" && e("relative", "before:absolute before:-inset-0.5"), "not-disabled:not-aria-disabled:hover:text-foreground", h, "disabled:cursor-not-allowed", ee)
+	}, J), Ze = $.dangerouslySetInnerHTML == null ? q === "content" ? K.content : K.content ?? /* @__PURE__ */ D(w, {
+		size: O[W].glyph,
+		className: d.dismissIcon
+	}) : void 0, Qe = c(k), $e = c(A);
+	return /* @__PURE__ */ ce("div", {
+		ref: P,
+		"data-size": W,
+		"data-appearance": G,
+		className: e(d.root, "relative inline-flex w-full items-center", v[W], y[W], g[G], "text-foreground", _, Be && "border-destructive", x && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", N),
+		hidden: Le,
+		...Re,
+		onMouseDown: (e) => u(z, Ue)(e),
 		children: [
-			/* @__PURE__ */ w("span", {
-				className: "flex shrink-0 items-center ps-2",
-				children: He ? o(x, "span", "shrink-0") : /* @__PURE__ */ w(v, { className: "text-muted-foreground" })
+			/* @__PURE__ */ D("span", {
+				className: e(d.contentBefore, "flex shrink-0 items-center", O[W].before),
+				children: Qe ? o(k, "span", "shrink-0") : /* @__PURE__ */ D(te, {
+					size: O[W].glyph,
+					className: "text-muted-foreground"
+				})
 			}),
-			/* @__PURE__ */ w("input", {
-				ref: Ae,
+			/* @__PURE__ */ D("input", {
+				ref: ze,
 				type: "search",
-				value: V,
-				onChange: (e) => H(e.target.value),
-				placeholder: g,
-				disabled: b,
-				className: e("h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground", "placeholder:text-muted-foreground", "focus:outline-hidden", "disabled:cursor-not-allowed", "[&::-webkit-search-cancel-button]:hidden"),
-				"aria-errormessage": pe,
-				"aria-details": P,
-				name: I,
+				value: B,
+				onChange: (e) => V(e.target.value),
+				placeholder: b,
+				disabled: x,
+				className: e(d.input, "h-full min-w-0 flex-1 appearance-none border-none bg-transparent text-foreground", O[W].input, y[W], "placeholder:text-muted-foreground", "focus:outline-hidden", "disabled:cursor-not-allowed", "[&::-webkit-search-cancel-button]:hidden"),
+				"aria-errormessage": ve,
+				"aria-details": ye,
+				name: xe,
 				form: L,
 				readOnly: R,
-				autoComplete: z,
-				autoFocus: B,
-				autoCapitalize: me,
-				autoCorrect: he,
-				inputMode: ge,
-				enterKeyHint: _e,
-				spellCheck: ve,
-				maxLength: ye,
-				minLength: be,
-				pattern: xe,
-				tabIndex: Se,
-				onFocus: Ce,
-				onBlur: we,
-				onKeyDown: u(Te, Ne),
-				onKeyUp: Ee,
-				...W
+				autoComplete: Se,
+				autoFocus: Ce,
+				autoCapitalize: we,
+				autoCorrect: Te,
+				inputMode: Ee,
+				enterKeyHint: De,
+				spellCheck: Oe,
+				maxLength: ke,
+				minLength: Ae,
+				pattern: je,
+				tabIndex: Me,
+				onFocus: Ne,
+				onBlur: Pe,
+				onKeyDown: u(Fe, He),
+				onKeyUp: Ie,
+				...U
 			}),
-			Ue && /* @__PURE__ */ w("span", {
-				className: "flex shrink-0 items-center pe-2",
-				children: o(S, "span", "shrink-0")
+			$e && /* @__PURE__ */ D("span", {
+				className: e(d.contentAfter, "flex shrink-0 items-center", O[W].after),
+				children: o(A, "span", "shrink-0")
 			}),
-			V && !R ? /* @__PURE__ */ w("button", {
+			B && !R ? /* @__PURE__ */ D("button", {
 				...$,
-				ref: Q,
+				ref: Xe,
 				type: $.type ?? "button",
-				disabled: b || $.disabled,
-				onClick: (e) => u(Fe, Me)(e),
-				...G.disabledFocusable ? ee : void 0,
-				children: Ve
+				disabled: x || $.disabled,
+				onClick: (e) => u(We, Ve)(e),
+				...K.disabledFocusable ? S : void 0,
+				children: Ze
 			}) : null
 		]
 	});
 };
-N.displayName = "SearchBox";
+F.displayName = "SearchBox";
 //#endregion
-export { N as SearchBox };
+export { F as SearchBox };
 
 //# sourceMappingURL=SearchBox.mjs.map