@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/search/Search.js

@@ -1,20 +1,19 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { forwardRef as w } from "react";
 import { uyTv as M } from "@payfit/unity-themes";
 import { SearchField as N, Input as S, FieldError as I } from "react-aria-components";
 import { useIntl as k } from "react-intl";
 import { CircularIconButton as C } from "../icon-button/CircularIconButton.js";
-import { Icon as l } from "../icon/Icon.js";
+import { Icon as n } from "../icon/Icon.js";
 import { Spinner as T } from "../spinner/Spinner.js";
 const B = M({
   slots: {
     base: [
-      "uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled uy:items-center",
-      "uy:enabled:border-border-form-enabled uy:enabled:bg-surface-danger-enabled",
-      "uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:focus-visible:border-border-form-focus uy:focus-visible:bg-surface-form-focus",
-      "uy:active:border-border-form-active",
-      "uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:bg-surface-form-disabled",
-      "uy:group-data-[invalid=true]:border-border-form-error uy:group-data-[invalid=true]:bg-surface-form-error"
+      "uy:w-full uy:flex uy:h-5.5 uy:sm:h-500 uy:gap-100 uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:items-center",
+      "uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:focus-within:bg-surface-form-high-focus",
+      "uy:active:border uy:active:border-solid uy:active:border-border-form-active",
+      "uy:group-data-[disabled=true]:border uy:group-data-[disabled=true]:border-solid uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:bg-surface-form-high-disabled uy:hover:group-data-[disabled=true]:bg-surface-form-high-disabled uy:hover:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:cursor-not-allowed",
+      "uy:group-data-[invalid=true]:border uy:group-data-[invalid=true]:border-solid uy:group-data-[invalid=true]:border-border-form-error uy:group-data-[invalid=true]:bg-surface-form-high-error"
     ],
     input: [
       "uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
@@ -22,7 +21,8 @@ const B = M({
       "uy:hover:text-content-form-hover",
       "uy:focus-visible:text-content-form-focus",
       "uy:active:text-content-form-active",
-      "uy:group-data-[invalid=true]:bg-surface-form-error"
+      "uy:group-data-[invalid=true]:bg-surface-form-high-error",
+      "uy:group-data-[disabled=true]:cursor-not-allowed"
     ],
     icon: [
       "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
@@ -39,15 +39,15 @@ const B = M({
   variants: {
     isReadOnly: {
       true: {
-        base: "uy:bg-surface-form-disabled",
+        base: "uy:bg-surface-form-high-disabled",
         icon: "uy:text-content-neutral-lowest-disabled",
-        button: "uy:bg-surface-form-error uy:text-content-neutral-disabled",
-        input: "uy:bg-surface-form-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only"
+        button: "uy:bg-surface-form-high-error uy:text-content-neutral-disabled",
+        input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only"
       },
       false: {
         base: [
-          "uy:bg-surface-form-enabled",
-          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover"
+          "uy:bg-surface-form-high-enabled",
+          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-high-hover"
         ],
         icon: "uy:text-content-neutral-lowest",
         input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest"
@@ -57,69 +57,69 @@ const B = M({
 }), E = ({
   intl: a,
   placeholder: r,
-  isDisabled: o
-}) => o ? "" : r || a.formatMessage({
+  isDisabled: t
+}) => t ? "" : r || a.formatMessage({
   id: "unity:component:search:placeholder",
   defaultMessage: "Search"
 }), j = w(
   ({
     isLoading: a = !1,
     isInvalid: r,
-    isDisabled: o,
+    isDisabled: t,
     isReadOnly: u,
-    name: i,
-    placeholder: s,
-    feedbackText: d,
+    name: d,
+    placeholder: l,
+    feedbackText: s,
     label: c,
-    ...f
-  }, y) => {
+    ...y
+  }, f) => {
     const {
-      base: b,
-      icon: m,
-      input: p,
-      invalidIcon: g,
-      wrapperState: v,
-      feedbackText: h,
+      base: m,
+      icon: b,
+      input: g,
+      invalidIcon: h,
+      wrapperState: p,
+      feedbackText: v,
       closeButton: x
     } = B({
       isReadOnly: u
-    }), t = k();
-    return /* @__PURE__ */ n(
+    }), o = k();
+    return /* @__PURE__ */ i(
       N,
       {
         "aria-label": c,
         className: "uy:group",
-        name: i,
-        ref: y,
+        name: d,
+        ref: f,
         isInvalid: r,
-        isDisabled: o || u,
+        isDisabled: t || u,
         isReadOnly: u,
-        ...f,
+        ...y,
         children: [
-          /* @__PURE__ */ n("div", { className: b(), children: [
+          /* @__PURE__ */ i("div", { className: m(), children: [
             /* @__PURE__ */ e(
-              l,
+              n,
               {
                 src: "MagnifyingGlassOutlined",
-                className: m(),
+                className: b(),
                 "aria-hidden": "true"
               }
             ),
             /* @__PURE__ */ e(
               S,
               {
-                className: p(),
-                placeholder: E({ intl: t, placeholder: s, isDisabled: o })
+                className: g(),
+                placeholder: E({ intl: o, placeholder: l, isDisabled: t })
               }
             ),
-            /* @__PURE__ */ n("div", { className: v(), children: [
+            /* @__PURE__ */ i("div", { className: p(), children: [
               /* @__PURE__ */ e(
-                l,
+                n,
                 {
-                  className: g(),
+                  className: h(),
                   src: "WarningCircleOutlined",
                   color: "content.form.invalid",
-                  alt: t.formatMessage({
+                  alt: o.formatMessage({
                     id: "unity:component:form-field:form-input:error:alt",
                     defaultMessage: "Error"
                   })
@@ -128,7 +128,7 @@ const B = M({
               a && /* @__PURE__ */ e(
                 T,
                 {
-                  label: t.formatMessage({
+                  label: o.formatMessage({
                     id: "unity:component:common:loading:label",
                     defaultMessage: "Loading..."
                   }),
@@ -141,7 +141,7 @@ const B = M({
                 C,
                 {
                   asElement: "button",
-                  title: t.formatMessage({
+                  title: o.formatMessage({
                     id: "unity:component:common:clear:title",
                     defaultMessage: "Clear"
                   }),
@@ -151,7 +151,7 @@ const B = M({
               )
             ] })
           ] }),
-          /* @__PURE__ */ e(I, { className: h(), children: d })
+          /* @__PURE__ */ e(I, { className: v(), children: s })
         ]
       }
     );

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -9,7 +9,7 @@ import { SegmentedButtonGroupContext as S } from "../SegmentedButtonGroups.conte
 const B = w({
   slots: {
     base: [
-      "uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25",
+      "uy:group uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25",
       "uy:active:gb-surface-neutral-pressed"
     ],
     wrapper: [
@@ -40,7 +40,7 @@ const B = w({
       isSelected: !1,
       className: {
         base: "uy:hover:bg-surface-neutral-hover",
-        wrapper: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover"
+        wrapper: "uy:text-content-neutral-enabled uy:group-hover:text-content-neutral-hover"
       }
     },
     {
@@ -97,17 +97,17 @@ const B = w({
   n
 ] }), T = h(
   (r, n) => {
-    const { children: o, value: e, prefixIcon: s, isLoading: a } = r, { state: u } = x(S), i = v(null), { inputProps: d } = P(r, u, i), { focusProps: f, isFocusVisible: p } = L(), y = V(), l = u.selectedValue === e, { base: g, wrapper: m } = B({
+    const { children: o, value: e, prefixIcon: s, isLoading: a } = r, { state: u } = x(S), i = v(null), { inputProps: d } = P(r, u, i), { focusProps: p, isFocusVisible: f } = L(), y = V(), l = u.selectedValue === e, { base: g, wrapper: m } = B({
       isSelected: l,
       hasPrefixIcon: !!s,
       isLoading: a,
-      isFocusVisible: p
+      isFocusVisible: f
     });
     return /* @__PURE__ */ c("label", { ref: n, className: g(), "aria-disabled": a, children: [
       /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
         "input",
         {
-          ...N(d, f),
+          ...N(d, p),
           ref: i,
           disabled: a
         }

package/dist/esm/components/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
-export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'selectedKey' | 'onSelectionChange'> {
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> {
     /** In static mode, contains <SelectOption /> and <SelectOptionGroup /> components, in dynamic mode, contains a function to render items passed to the component*/
     children: ReactNode | ((item: T) => ReactNode);
     /** In dynamic mode, contains the items to display in the select */
@@ -8,15 +8,16 @@ export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>,
     /** Whether the field is read-only */
     isReadOnly?: boolean;
     /** The value of the selected item */
-    value?: AriaSelectProps<T>['selectedKey'];
+    value?: AriaSelectProps<T>['value'];
     /** The default value of the selected item in uncontrolled mode */
-    defaultValue?: AriaSelectProps<T>['defaultSelectedKey'];
+    defaultValue?: AriaSelectProps<T>['defaultValue'];
     /** Function trigger when a item is selected */
-    onChange?: AriaSelectProps<T>['onSelectionChange'];
+    onChange?: AriaSelectProps<T>['onChange'];
     /** Whether the search input should be displayed or not */
     isSearchable?: boolean;
     /** The placement of the popover */
     placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
+    searchInputAriaLabel?: string;
 }
 type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/dist/esm/components/select/Select.js

@@ -1,67 +1,75 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as j, useState as B } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
-import { useFilter as F, Select as z, Popover as A, Autocomplete as I, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
-import { SearchInput as T } from "./parts/SearchInput.js";
-import { SelectButton as U } from "./parts/SelectButton.js";
-const V = C({
+import { forwardRef as B, useState as C } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFilter as I, Select as M, Popover as z, Autocomplete as A, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
+import { useIntl as T } from "react-intl";
+import { SearchInput as U } from "./parts/SearchInput.js";
+import { SelectButton as V } from "./parts/SelectButton.js";
+const $ = F({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-    popover: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
+    popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral",
     listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
   }
-}), $ = ({
+}), k = ({
   children: t,
   items: o,
   placeholder: r,
-  name: f,
-  isDisabled: l,
-  isInvalid: s,
+  isDisabled: s,
+  isInvalid: l,
   isReadOnly: n,
-  value: i,
+  value: a,
   defaultValue: m,
-  onChange: a,
-  isSearchable: b = !1,
-  onBlur: x,
-  placement: S,
-  ...h
-}, v) => {
-  const [g, w] = B(!1), { contains: N } = F({ sensitivity: "base" }), { base: O, popover: L, listbox: u } = V(), P = i !== void 0 || a !== void 0 ? {
-    value: i,
-    onChange: a
+  onChange: i,
+  isSearchable: f = !1,
+  onBlur: b,
+  placement: h,
+  searchInputAriaLabel: x,
+  ...S
+}, g) => {
+  const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = a !== void 0 || i !== void 0 ? {
+    value: a,
+    onChange: i
   } : { defaultValue: m };
   return /* @__PURE__ */ c(
-    z,
+    M,
     {
-      onOpenChange: w,
-      ...h,
-      ref: v,
-      className: O(),
-      name: f,
-      placeholder: l ? void 0 : r,
-      isDisabled: l || n,
-      isInvalid: s,
-      onBlur: x,
-      ...P,
+      onOpenChange: N,
+      ...S,
+      ref: g,
+      className: L(),
+      placeholder: s ? void 0 : r,
+      isDisabled: s || n,
+      isInvalid: l,
+      onBlur: b,
+      ...j,
       children: [
         /* @__PURE__ */ e(
-          U,
+          V,
           {
-            isDisabled: l,
-            isInvalid: s,
+            isDisabled: s,
+            isInvalid: l,
             isReadOnly: n,
-            isOpen: g
+            isOpen: w
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          z,
           {
             offset: 1,
             containerPadding: 8,
-            className: L(),
-            placement: S,
-            children: b ? /* @__PURE__ */ c(I, { filter: N, children: [
-              /* @__PURE__ */ e(T, {}),
+            className: P(),
+            placement: h,
+            children: f ? /* @__PURE__ */ c(A, { filter: O, children: [
+              /* @__PURE__ */ e(
+                U,
+                {
+                  "aria-label": x ?? v.formatMessage({
+                    id: "unity:component:select:search:label",
+                    defaultMessage: "Search options"
+                  })
+                }
+              ),
               /* @__PURE__ */ e(
                 p,
                 {
@@ -87,10 +95,10 @@ const V = C({
       ]
     }
   );
-}, k = j(function(o, r) {
-  return $(o, r);
+}, q = B(function(o, r) {
+  return k(o, r);
 });
-k.displayName = "Select";
+q.displayName = "Select";
 export {
-  k as Select
+  q as Select
 };

package/dist/esm/components/select/TanstackSelect.d.ts

@@ -0,0 +1,80 @@
+import { ForwardedRef, JSX } from 'react';
+import { SelectProps } from './Select.js';
+export type TanstackSelectProps<T extends object> = Omit<SelectProps<T>, 'value' | 'defaultValue' | 'onChange' | 'isInvalid' | 'name'>;
+type TanstackSelectComponent = (<TItems extends object>(props: TanstackSelectProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * `TanstackSelect` is a controlled select component wired to the TanStack Form field context.
+ * It is based on the Unity `Select` component.
+ *
+ * The component supports both static and dynamic options, search functionality, and grouping.
+ * It manages field state via the TanStack Form context, including validation and accessibility.
+ *
+ * Example (static options):
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * function ExampleField() {
+ *   const schema = z.object({
+ *     fruit: z.string().min(1, 'Please select a fruit'),
+ *   })
+ *
+ *   const form = useTanstackUnityForm({
+ *     validators: { onBlur: schema },
+ *     defaultValues: { fruit: '' }
+ *   })
+ *
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruit">
+ *         {() => (
+ *           <TanstackSelect placeholder="Choose a fruit">
+ *             <SelectOption id="Apple">Apple</SelectOption>
+ *             <SelectOption id="Banana">Banana</SelectOption>
+ *             <SelectOption id="Orange">Orange</SelectOption>
+ *           </TanstackSelect>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ *
+ * Example (dynamic items):
+ * ```tsx
+ * function ExampleWithDynamicItems() {
+ *   const items = [
+ *     { id: 'Apple', name: 'Apple' },
+ *     { id: 'Banana', name: 'Banana' },
+ *     { id: 'Orange', name: 'Orange' },
+ *   ]
+ *
+ *   const form = useTanstackUnityForm({
+ *     validators: {},
+ *     defaultValues: { fruit: '' }
+ *   })
+ *
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruit">
+ *         {() => (
+ *           <form.Select items={items}>
+ *             {item => <SelectOption id={item.id}>{item.name}</SelectOption>}
+ *           </form.Select>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `Select` (non-TanStack):
+ * - Do not pass `value`, `defaultValue`, `onChange`, or `name` props: these are managed by the TanStack form context.
+ * - `isInvalid` is automatically derived from the field's validation state.
+ * - Use within `<form.AppField name="...">` to connect to the form state.
+ */
+declare const TanstackSelect: TanstackSelectComponent;
+export { TanstackSelect };

package/dist/esm/components/select/TanstackSelect.js

@@ -0,0 +1,34 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as u } from "../form-field/TanstackFormField.context.js";
+import { Select as p } from "./Select.js";
+const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
+  const e = f(), t = u(), c = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d(
+    p,
+    {
+      ...r,
+      ref: s,
+      value: e.state.value ?? "",
+      onChange: (n) => {
+        e.handleChange(n);
+      },
+      onBlur: (n) => {
+        e.handleBlur(), o?.(n);
+      },
+      isReadOnly: a,
+      isDisabled: l,
+      isInvalid: c,
+      "aria-labelledby": t.labelId,
+      "aria-describedby": i.length > 0 ? i : void 0,
+      "aria-details": t.contextualLinkId
+    }
+  );
+}, h = m(function(a, l) {
+  return b(a, l);
+});
+h.displayName = "TanstackSelect";
+export {
+  h as TanstackSelect
+};

package/dist/esm/components/select/parts/SearchInput.d.ts

@@ -1,2 +1,5 @@
-declare const SearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export interface SearchInputProps {
+    'aria-label': string;
+}
+declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SearchInput };

package/dist/esm/components/select/parts/SearchInput.js

@@ -1,40 +1,58 @@
-import { jsxs as e, Fragment as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
+import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import { uyTv as m } from "@payfit/unity-themes";
-import { SearchField as y, Input as c } from "react-aria-components";
-import { useIntl as d } from "react-intl";
-import { CircularIconButton as p } from "../../icon-button/CircularIconButton.js";
-import { Icon as f } from "../../icon/Icon.js";
-const b = m({
+import { SearchField as y, Input as d } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { CircularIconButton as f } from "../../icon-button/CircularIconButton.js";
+import { Icon as b } from "../../icon/Icon.js";
+const h = m({
   slots: {
-    base: "uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-active uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body",
-    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+    base: "uy:flex uy:gap-100 uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body uy:focus-within:border uy:focus-within:border-solid uy:focus-within:border-border-form-active",
+    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden uy:min-h-300",
     button: "uy:text-content-neutral-enabled",
     separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100"
   }
-}), h = l((g, r) => {
-  const o = d(), { base: u, input: a, button: n, separator: s } = b();
-  return /* @__PURE__ */ e(i, { children: [
-    /* @__PURE__ */ e(y, { className: u(), ref: r, "data-dd-privacy": "mask", children: [
-      /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ t(c, { className: a() }),
-      /* @__PURE__ */ t(
-        p,
+}), g = c(
+  ({ "aria-label": r }, o) => {
+    const a = p(), { base: u, input: n, button: i, separator: s } = h();
+    return /* @__PURE__ */ e(l, { children: [
+      /* @__PURE__ */ e(
+        y,
         {
-          title: o.formatMessage({
-            id: "unity:component:common:clear:title",
-            defaultMessage: "Clear"
-          }),
-          className: n(),
-          icon: "CloseOutlined",
-          asElement: "button"
+          className: u(),
+          ref: o,
+          "data-dd-privacy": "mask",
+          "aria-label": r,
+          children: [
+            /* @__PURE__ */ t(
+              b,
+              {
+                src: "MagnifyingGlassOutlined",
+                "aria-hidden": "true",
+                color: "content.neutral.lowest"
+              }
+            ),
+            /* @__PURE__ */ t(d, { className: n() }),
+            /* @__PURE__ */ t(
+              f,
+              {
+                title: a.formatMessage({
+                  id: "unity:component:common:clear:title",
+                  defaultMessage: "Clear"
+                }),
+                className: i(),
+                icon: "CloseOutlined",
+                asElement: "button"
+              }
+            )
+          ]
         }
-      )
-    ] }),
-    /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
-  ] });
-});
-h.displayName = "SearchInput";
+      ),
+      /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
+    ] });
+  }
+);
+g.displayName = "SearchInput";
 export {
-  h as SearchInput
+  g as SearchInput
 };