@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/promo-dialog/parts/PromoDialogTitle.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Heading as m } from "react-aria-components";
+const r = a({
+  base: ["uy:typography-h2 uy:md:typography-h1", "uy:mb-150 uy:md:mb-250"]
+}), i = ({ children: o }) => /* @__PURE__ */ t(
+  m,
+  {
+    slot: "title",
+    className: r(),
+    "data-dd-privacy": "allow",
+    children: o
+  }
+);
+i.displayName = "PromoDialogTitle";
+export {
+  i as PromoDialogTitle
+};

package/dist/esm/components/radio-button-group/TanstackRadioButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { RadioButtonGroupProps } from './RadioButtonGroup.js';
+/**
+ * Props for `TanstackRadioButtonGroup`.
+ *
+ * Inherits all visual/interaction props from the base `RadioButtonGroup`, but removes
+ * form‑control props that are provided by the TanStack Form field context instead.
+ *
+ * Omitted props:
+ * - `name`, `value`, `defaultValue`, `isInvalid` — these are driven by the form context.
+ */
+export type TanstackRadioButtonGroupProps = Omit<RadioButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid' | 'name'>;
+declare const TanstackRadioButtonGroup: import('react').ForwardRefExoticComponent<TanstackRadioButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackRadioButtonGroup };

package/dist/esm/components/radio-button-group/TanstackRadioButtonGroup.js

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

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -2,26 +2,44 @@ import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components';
 export declare const radioButton: import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];
 }, undefined, {
-    isFocusVisible: {
-        true: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            radio?: import('tailwind-merge').ClassNameValue;
+        };
     };
-}, {
+} | {}, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
     base: string[];
     radio: string[];
     label: string[];

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,79 +1,81 @@
-import { jsxs as a, jsx as r, Fragment as m } from "react/jsx-runtime";
-import { forwardRef as b, useContext as f, useMemo as p } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { RadioGroupStateContext as v, Radio as x } from "react-aria-components";
-import { Flex as R } from "../../flex/Flex.js";
-import { Text as S } from "../../text/Text.js";
+import { jsxs as u, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as g, useContext as v, useMemo as l } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { RadioGroupStateContext as S, Radio as h } from "react-aria-components";
+import { Flex as w } from "../../flex/Flex.js";
+import { Text as N } from "../../text/Text.js";
 import B from "./radio-input-selected.svg.js";
-import h from "./radio-input-unselected.svg.js";
-import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
-const F = g({
+import O from "./radio-input-unselected.svg.js";
+import { RadioButtonHelper as F } from "./RadioButtonHelper.js";
+const j = R({
   slots: {
-    base: [
-      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-center uy:cursor-pointer",
-      "uy:data-[disabled]:cursor-not-allowed",
-      "uy:data-[readonly]:cursor-not-allowed"
+    container: [
+      "uy:group uy:inline-flex uy:flex-col uy:gap-50",
+      "uy:rounded-md uy:sm:rounded-25",
+      "uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
+      "uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
+      "uy:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
+      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
     ],
-    radio: [
-      "uy:border-border-form-enabled uy:border-solid uy:bg-surface-form-enabled",
-      "uy:group-data-[disabled]:border-border-form-disabled"
+    base: [
+      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
+      "uy:data-[disabled=true]:cursor-not-allowed",
+      "uy:data-[readonly=true]:cursor-not-allowed"
     ],
+    radio: ["uy:mt-25 uy:sm:mt-px"],
     label: [
       "uy:text-content-neutral",
-      "uy:group-data-[disabled]:text-content-neutral-disabled",
-      "uy:group-data-[readonly]:text-content-neutral uy:group-data-[readonly]:cursor-text"
+      "uy:group-data-[disabled=true]:text-content-neutral-disabled",
+      "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
     ]
-  },
-  variants: {
-    isFocusVisible: {
-      true: "uy:outline-none uy:ring-2 uy:ring-offset-2 uy:ring-utility-focus-ring"
-    }
   }
-}), N = b(
-  ({ children: d, value: l, isDisabled: i, helperText: t, ...u }, n) => {
-    const { base: s, label: c } = F(), o = f(v), y = p(() => o?.isReadOnly ? {
+}), C = g(
+  ({ children: i, value: n, isDisabled: e, helperText: t, ...s }, y) => {
+    const { base: c, label: m, container: b, radio: a } = j(), r = v(S), p = l(() => r?.isReadOnly ? {
       "--radio-fill-color": "var(--uy-color-border-form-read-only)",
       "--radio-border-color": "var(--uy-color-border-form-disabled)"
     } : {
       "--radio-fill-color": "var(--uy-color-surface-primary-active)",
       "--radio-border-color": "var(--uy-color-border-form-active)"
-    }, [o?.isReadOnly]);
-    return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
-      /* @__PURE__ */ r(
-        x,
+    }, [r?.isReadOnly]), f = l(() => r?.isReadOnly || r?.isDisabled || e ? {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    } : {
+      "--radio-border-color": "var(--uy-color-border-form-enabled)"
+    }, [e, r?.isDisabled, r?.isReadOnly]);
+    return /* @__PURE__ */ u(w, { direction: "col", gap: "50", className: b(), children: [
+      /* @__PURE__ */ o(
+        h,
         {
-          ...u,
-          value: l,
-          isDisabled: i,
-          className: ({ isFocusVisible: e }) => s({ isFocusVisible: e }),
-          ref: n,
-          children: ({ isSelected: e }) => /* @__PURE__ */ a(m, { children: [
-            e ? /* @__PURE__ */ r(
+          ...s,
+          value: n,
+          isDisabled: e,
+          className: ({ isFocusVisible: d }) => c(),
+          ref: y,
+          children: ({ isSelected: d }) => /* @__PURE__ */ u(x, { children: [
+            d ? /* @__PURE__ */ o(
               B,
               {
-                style: y
+                style: p,
+                className: a()
               }
-            ) : /* @__PURE__ */ r(
-              h,
+            ) : /* @__PURE__ */ o(
+              O,
               {
-                style: o?.isReadOnly ? {
-                  // @ts-expect-error – annoying TS
-                  "--radio-border-color": "var(--uy-color-border-form-disabled)"
-                } : {
-                  "--radio-border-color": "var(--uy-color-border-form-enabled)"
-                }
+                style: f,
+                className: a()
               }
             ),
-            /* @__PURE__ */ r(S, { variant: "body", className: c(), children: d })
+            /* @__PURE__ */ o(N, { variant: "body", className: m(), children: i })
           ] })
         }
       ),
-      t ? /* @__PURE__ */ r(w, { children: t }) : null
+      t ? /* @__PURE__ */ o(F, { children: t }) : null
     ] });
   }
 );
-N.displayName = "RadioButton";
+C.displayName = "RadioButton";
 export {
-  N as RadioButton,
-  F as radioButton
+  C as RadioButton,
+  j as radioButton
 };

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts

@@ -42,6 +42,8 @@ interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldVal
  * @remarks
  * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
  * ```
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
 export { RadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/TanstackRadioButtonGroupField.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackRadioButtonGroupProps } from '../radio-button-group/TanstackRadioButtonGroup.js';
+export interface TanstackRadioButtonGroupFieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, TanstackRadioButtonGroupProps {
+    /** The label for the radio group. Required for accessibility. */
+    label: string;
+    /** Helper text to display above the radio group. Can be any React node. */
+    helperText?: ReactNode;
+    /** A contextual link to display under the field. Rendered after feedback. */
+    contextualLink?: ReactNode;
+}
+declare const TanstackRadioButtonGroupField: import('react').ForwardRefExoticComponent<TanstackRadioButtonGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackRadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/TanstackRadioButtonGroupField.js

@@ -0,0 +1,38 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { TanstackFormFeedbackText as p } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as l } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as u } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as f } from "../form-field/TanstackFormField.js";
+import { TanstackRadioButtonGroup as k } from "../radio-button-group/TanstackRadioButtonGroup.js";
+function F({
+  label: t,
+  helperText: r,
+  contextualLink: a,
+  isRequired: i,
+  requiredVariant: m,
+  children: n,
+  ...e
+}, c) {
+  return /* @__PURE__ */ d(f, { children: [
+    /* @__PURE__ */ o(
+      u,
+      {
+        isRequired: i,
+        requiredVariant: m,
+        children: t
+      }
+    ),
+    r && /* @__PURE__ */ o(l, { children: r }),
+    /* @__PURE__ */ o("div", { className: "uy:mt-25", children: /* @__PURE__ */ o(k, { ref: c, ...e, children: n }) }),
+    /* @__PURE__ */ o(p, {}),
+    a
+  ] });
+}
+const T = s(
+  F
+);
+T.displayName = "TanstackRadioButtonGroupField";
+export {
+  T as TanstackRadioButtonGroupField
+};

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>;