@mortenbrudvik/waveui 0.7.0 → 0.8.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","observeTextLabel","hasRenderedTextLabel","mergeProps","focusRing","mergedAriaDisabledClasses","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_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","iconProps","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 { 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 { 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(\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']): 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  // 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 *\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        searchBoxClassNames.dismissButton,\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 className={searchBoxClassNames.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        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 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={cn(searchBoxClassNames.contentBefore, '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          searchBoxClassNames.input,\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={cn(searchBoxClassNames.contentAfter, '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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"}

package/dist/components/input/SearchBox.mjs

@@ -4,21 +4,22 @@ 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 { 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, inputFocusWithin as g } from "../../lib/styles.mjs";
+import { Button as _ } from "../button/Button.mjs";
+import { BUTTON_OWN_PROP_KEYS as v, MERGED_DISABLED_FOCUSABLE_PROPS as y, mergedAriaDisabledClasses as b, placeButtonIcon as x } from "../button/Button.slots.mjs";
+import { DismissIcon as S, SearchIcon as ee } from "../../lib/icons.mjs";
+import { mergeProps as te } from "../../lib/mergeProps.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 { useFormReset as C } from "../../hooks/useFormReset.mjs";
+import { hasRenderedTextLabel as w, hasTextLabel as T, observeTextLabel as re } from "../../lib/labelInName.mjs";
+import * as E from "react";
+import { jsx as D, jsxs as ie } from "react/jsx-runtime";
 //#region src/components/input/SearchBox.tsx
-var T = /* @__PURE__ */ new Set([
+var O = /* @__PURE__ */ new Set([
 	"type",
 	"disabled",
 	"form",
@@ -31,11 +32,11 @@ var T = /* @__PURE__ */ new Set([
 	"value",
 	"popoverTarget",
 	"popoverTargetAction"
-]), E = /^on[A-Z]/, D = /* @__PURE__ */ new Set([
+]), k = /^on[A-Z]/, A = /* @__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 = {
+]), ae = "Clear search", oe = () => {}, se = "a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])", j = {
 	kind: "default",
 	buttonProps: {},
 	content: null,
@@ -43,163 +44,161 @@ var T = /* @__PURE__ */ new Set([
 	literalTextLabel: !1,
 	disabledFocusable: !1
 };
-function j(e) {
-	return e === "button" || e === g;
+function M(e) {
+	return e === "button" || e === _;
 }
-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 N(t, n, r) {
+	let i = c(r), s = a(r), l = T(s);
+	if (t === _) {
+		let t = {};
+		for (let [e, r] of Object.entries(n)) e !== "children" && !v.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 ? x(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 ce(r) {
+	let i = r;
+	if (n(i, "button", _)) {
+		let e = i.props.children;
 		return {
 			kind: "element",
-			...M(t(r), r.props, e)
+			...N(t(i), i.props, e)
 		};
 	}
-	let i = s(e, "span");
-	if (!i) return A;
-	let { Component: a, props: o, children: u } = i;
-	if (j(a)) return {
+	let a = s(r, "span");
+	if (!a) return j;
+	let { Component: o, props: u, children: f } = a;
+	if (M(o)) return {
 		kind: "button-object",
-		...M(a, o, u)
+		...N(o, u, f)
 	};
-	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 p = {}, m = {}, h = !1;
+	for (let [e, t] of Object.entries(u)) t !== void 0 && (O.has(e) || k.test(e) ? (p[e] = t, h = !0) : A.has(e) ? p[e] = t : m[e] = t);
+	let g = c(f), v = l(o, {
+		...m,
+		children: f
 	});
-	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, {
+	if (v && Object.keys(p).length === 0 && Object.keys(m).length === 0) return j;
+	let y = v ? /* @__PURE__ */ D(S, {}) : g ? f : void 0, b = {
 		"aria-hidden": !0,
-		...f
-	}) : C.createElement(a, {
-		"aria-hidden": !0,
-		...f
-	}, v);
+		...m,
+		className: e(d.dismissIcon, m.className)
+	}, x = y === void 0 ? E.createElement(o, b) : E.createElement(o, b, y);
 	return {
-		kind: p ? "button-object" : "content",
-		buttonProps: d,
-		content: y,
+		kind: h ? "button-object" : "content",
+		buttonProps: p,
+		content: x,
 		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 P = ({ value: t, defaultValue: n = "", onValueChange: a, onChange: s, onClear: l, placeholder: _ = "Search", disabled: v, contentBefore: x, contentAfter: T, dismiss: O, className: k, ref: j, controlRef: M, id: N, "aria-label": P, "aria-labelledby": le, "aria-describedby": ue, "aria-invalid": de, "aria-required": fe, "aria-errormessage": pe, "aria-details": F, required: I, name: L, form: R, readOnly: z, autoComplete: B, autoFocus: me, autoCapitalize: he, autoCorrect: ge, inputMode: _e, enterKeyHint: ve, spellCheck: ye, maxLength: be, minLength: xe, pattern: Se, tabIndex: Ce, onFocus: we, onBlur: Te, onKeyDown: Ee, onKeyUp: De, onMouseDown: Oe, hidden: ke, ...Ae }) => {
 	s !== void 0 && r("SearchBox", "onChange", "onValueChange");
-	let [V, H] = d(t, n, (e) => {
+	let [V, H] = 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,
+	}), U = E.useRef(null), je = p(U, M);
+	C(U, () => H(n), R);
+	let W = m({
+		id: N,
+		"aria-label": P,
 		"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(() => {
+		required: I
+	}, { nativeRequired: !0 }), Me = ne(!1, W["aria-invalid"]), G = ce(O), K = G.kind;
+	E.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 = () => {
+	let Ne = () => {
 		H(""), l?.(), U.current?.focus();
-	}, Ne = (e) => {
-		e.key !== "Escape" || e.nativeEvent.isComposing || !V || R || b || (e.preventDefault(), H(""), l?.());
 	}, Pe = (e) => {
+		e.key !== "Escape" || e.nativeEvent.isComposing || !V || z || v || (e.preventDefault(), H(""), l?.());
+	}, Fe = (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;
+		if (!t || v || e.button !== 0 || r === t || !(r instanceof Element) || !n.contains(r)) return;
 		let i = r.closest(se);
 		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: Ie, ref: Le, ...q } = G.buttonProps, J = Object.keys(q).some((e) => A.has(e) && q[e] != null), Y = G.contentMayName && !J, X = G.literalTextLabel, [Z, Re] = E.useState(null), Q = E.useCallback((e) => Z ? re(Z, e) : oe, [Z]), ze = E.useSyncExternalStore(Q, () => Z ? w(Z) : X, () => X), Be = Y && ze, Ve = p(Le, Y ? Re : void 0), $ = te({
 		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: v,
+		"aria-label": J || Be ? void 0 : ae,
+		className: e(d.dismissButton, "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", h, "disabled:cursor-not-allowed", b)
+	}, q), He = $.dangerouslySetInnerHTML == null ? K === "content" ? G.content : G.content ?? /* @__PURE__ */ D(S, { className: d.dismissIcon }) : void 0, Ue = c(x), We = c(T);
+	return /* @__PURE__ */ ie("div", {
+		ref: j,
+		className: e(d.root, "relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground", g, Me && "border-destructive focus-within:border-b-destructive", v && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", k),
+		hidden: ke,
+		...Ae,
+		onMouseDown: (e) => u(Oe, Fe)(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 ps-2"),
+				children: Ue ? o(x, "span", "shrink-0") : /* @__PURE__ */ D(ee, { className: "text-muted-foreground" })
 			}),
-			/* @__PURE__ */ w("input", {
-				ref: Ae,
+			/* @__PURE__ */ D("input", {
+				ref: je,
 				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"),
+				placeholder: _,
+				disabled: v,
+				className: e(d.input, "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,
-				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,
+				"aria-details": F,
+				name: L,
+				form: R,
+				readOnly: z,
+				autoComplete: B,
+				autoFocus: me,
+				autoCapitalize: he,
+				autoCorrect: ge,
+				inputMode: _e,
+				enterKeyHint: ve,
+				spellCheck: ye,
+				maxLength: be,
+				minLength: xe,
+				pattern: Se,
+				tabIndex: Ce,
+				onFocus: we,
+				onBlur: Te,
+				onKeyDown: u(Ee, Pe),
+				onKeyUp: De,
 				...W
 			}),
-			Ue && /* @__PURE__ */ w("span", {
-				className: "flex shrink-0 items-center pe-2",
-				children: o(S, "span", "shrink-0")
+			We && /* @__PURE__ */ D("span", {
+				className: e(d.contentAfter, "flex shrink-0 items-center pe-2"),
+				children: o(T, "span", "shrink-0")
 			}),
-			V && !R ? /* @__PURE__ */ w("button", {
+			V && !z ? /* @__PURE__ */ D("button", {
 				...$,
-				ref: Q,
+				ref: Ve,
 				type: $.type ?? "button",
-				disabled: b || $.disabled,
-				onClick: (e) => u(Fe, Me)(e),
-				...G.disabledFocusable ? ee : void 0,
-				children: Ve
+				disabled: v || $.disabled,
+				onClick: (e) => u(Ie, Ne)(e),
+				...G.disabledFocusable ? y : void 0,
+				children: He
 			}) : null
 		]
 	});
 };
-N.displayName = "SearchBox";
+P.displayName = "SearchBox";
 //#endregion
-export { N as SearchBox };
+export { P as SearchBox };
 
 //# sourceMappingURL=SearchBox.mjs.map