@payfit/unity-components 2.46.13 → 2.46.14

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,59 @@
+import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { Input as y } from "react-aria-components/Input";
+import { SearchField as d } from "react-aria-components/SearchField";
+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 = c({
+  slots: {
+    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"
+  }
+}), g = m(
+  ({ "aria-label": r }, o) => {
+    const a = p(), { base: u, input: n, button: i, separator: s } = h();
+    return /* @__PURE__ */ e(l, { children: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          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(y, { 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() })
+    ] });
+  }
+);
+g.displayName = "SearchInput";
+export {
+  g as SearchInput
+};

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

@@ -0,0 +1,19 @@
+import { Node } from '@react-types/shared';
+import { ReactNode } from 'react';
+export interface SelectButtonProps<T extends object> {
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** Whether the button is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the button is read-only */
+    isReadOnly?: boolean;
+    /** Whether the select popover is currently open */
+    isOpen: boolean;
+    /** Custom render function to format the selected value display */
+    renderValue?: (selectedItem: Node<T>) => ReactNode;
+}
+declare const SelectButton: {
+    <T extends object>({ isDisabled, isInvalid, isReadOnly, isOpen, renderValue, }: SelectButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectButton };

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

@@ -0,0 +1,104 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Button as p } from "react-aria-components/Button";
+import { SelectValue as n } from "react-aria-components/Select";
+import { useIntl as v } from "react-intl";
+import { Icon as u } from "../../icon/Icon.js";
+const h = b({
+  slots: {
+    base: "uy:flex uy:flex-row uy:items-center uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
+    selectValue: [
+      "uy:min-w-0 uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden",
+      "uy:data-[placeholder]:text-content-neutral-lowest"
+    ],
+    iconWrapper: "uy:flex uy:shrink-0 uy:gap-50",
+    icon: ""
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        selectValue: "uy:text-content-form-disabled",
+        icon: "uy:text-content-neutral-lowest-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        selectValue: "uy:text-content-form-readonly",
+        icon: "uy:text-content-neutral-lowest-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
+        selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover",
+        icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover"
+      }
+    }
+  ],
+  defaultVariants: {
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  }
+}), x = ({
+  isDisabled: r,
+  isInvalid: t,
+  isReadOnly: i,
+  isOpen: d,
+  renderValue: o
+}) => {
+  const c = v(), { base: y, selectValue: s, iconWrapper: f, icon: m } = h({
+    isDisabled: r,
+    isInvalid: t,
+    isReadOnly: i
+  });
+  return /* @__PURE__ */ l(
+    p,
+    {
+      "data-dd-privacy": "mask",
+      className: y(),
+      isDisabled: r,
+      "data-unity-slot": "select-button",
+      children: [
+        o ? /* @__PURE__ */ e(n, { className: s(), translate: "no", children: ({ state: a }) => a.selectedItems[0] ? o(a.selectedItems[0]) : null }) : /* @__PURE__ */ e(n, { className: s(), translate: "no" }),
+        /* @__PURE__ */ l("div", { className: f(), children: [
+          t && /* @__PURE__ */ e(
+            u,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: c.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          /* @__PURE__ */ e(
+            u,
+            {
+              className: m(),
+              "aria-hidden": "true",
+              src: d ? "CaretUpOutlined" : "CaretDownOutlined"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+x.displayName = "SelectButton";
+export {
+  x as SelectButton
+};

package/dist/esm/components/select/parts/SelectOption.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface SelectOptionContextValue {
+    isDisabled: boolean | undefined;
+}
+export declare const SelectOptionContext: import('react').Context<SelectOptionContextValue>;
+export declare function SelectOptionProvider({ children, isDisabled, }: PropsWithChildren<SelectOptionContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectOptionContext(): SelectOptionContextValue;
+export {};

package/dist/esm/components/select/parts/SelectOption.context.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i } from "react";
+const e = r({
+  isDisabled: void 0
+});
+function u({
+  children: t,
+  isDisabled: o
+}) {
+  return /* @__PURE__ */ n(e.Provider, { value: { isDisabled: o }, children: t });
+}
+function p() {
+  const t = i(e);
+  if (!t)
+    throw new Error(
+      "useSelectOptionContext must be used within an SelectOptionProvider"
+    );
+  return t;
+}
+export {
+  e as SelectOptionContext,
+  u as SelectOptionProvider,
+  p as useSelectOptionContext
+};

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

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components/ListBox';
+/**
+ * SelectOption component for displaying options in a Select dropdown.
+ * @note The `textValue` prop (inherited from ListBoxItemProps) is used for searching when the content
+ * of the option is more complex than a simple string (e.g., contains components
+ * like Avatar, Flex, etc.). Providing this prop enables search functionality
+ * for complex content options.
+ */
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };

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

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as y, Fragment as i } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { ListBoxItem as p } from "react-aria-components/ListBox";
+import { Icon as m } from "../../icon/Icon.js";
+import { SelectOptionProvider as b } from "./SelectOption.context.js";
+const x = f({
+  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
+  variants: {
+    isFocusVisible: {
+      true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring"
+    },
+    isHovered: {
+      true: "uy:bg-surface-neutral-hover uy:text-content-neutral"
+    },
+    isPressed: {
+      true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed"
+    },
+    isSelected: {
+      true: "uy:bg-surface-neutral-active uy:text-content-neutral-active"
+    },
+    isDisabled: {
+      true: "uy:text-content-neutral-disabled"
+    }
+  },
+  compoundVariants: [
+    {
+      isFocusVisible: !1,
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isDisabled: !1,
+      class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
+    }
+  ]
+}), v = d(
+  (s, l) => {
+    const { children: u, isDisabled: r, textValue: n } = s;
+    return /* @__PURE__ */ e(
+      p,
+      {
+        ...s,
+        ref: l,
+        "data-dd-privacy": "mask",
+        textValue: n,
+        className: ({ isHovered: t, isPressed: o, isFocusVisible: a, isSelected: c }) => x({
+          isHovered: t,
+          isPressed: o,
+          isFocusVisible: a,
+          isSelected: c,
+          isDisabled: r
+        }),
+        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ y("div", { className: "uy:flex uy:justify-between", children: [
+          /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col", children: /* @__PURE__ */ e(i, { children: u }) }),
+          /* @__PURE__ */ e(m, { src: "CheckOutlined" })
+        ] }) : /* @__PURE__ */ e(i, { children: u }) })
+      }
+    );
+  }
+);
+v.displayName = "SelectOption";
+export {
+  v as SelectOption
+};

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

@@ -0,0 +1,12 @@
+import { ForwardedRef, JSX } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components/ListBox';
+export interface SelectOptionGroupProps<T extends object> extends ListBoxSectionProps<T> {
+    label: string;
+}
+type SelectOptionGroupComponent = (<TItems extends object>(props: SelectOptionGroupProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+declare const SelectOptionGroup: SelectOptionGroupComponent;
+export { SelectOptionGroup };

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

@@ -0,0 +1,29 @@
+import { jsxs as p, Fragment as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Collection as c } from "react-aria-components/Collection";
+import { Header as y } from "react-aria-components/Header";
+import { ListBoxSection as d } from "react-aria-components/ListBox";
+import { Separator as f } from "react-aria-components/Separator";
+const h = m({
+  slots: {
+    base: "",
+    header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
+    separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:last:hidden"
+  }
+}), b = ({ label: e, children: t, items: o }, a) => {
+  const { base: u, header: s, separator: i } = h();
+  return /* @__PURE__ */ p(n, { children: [
+    /* @__PURE__ */ p(d, { ref: a, className: u(), id: e, items: o, children: [
+      /* @__PURE__ */ r(y, { className: s(), children: e }),
+      o ? /* @__PURE__ */ r(c, { items: o, children: t }) : /* @__PURE__ */ r(n, { children: t })
+    ] }),
+    /* @__PURE__ */ r(f, { orientation: "horizontal", className: i() })
+  ] });
+}, x = l(function(t, o) {
+  return b(t, o);
+});
+x.displayName = "SelectOptionGroup";
+export {
+  x as SelectOptionGroup
+};

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

@@ -0,0 +1,4 @@
+declare const SelectOptionHelper: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { SelectOptionHelper };

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

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { useSelectOptionContext as l } from "./SelectOption.context.js";
+const p = n({
+  base: "uy:typography-body",
+  variants: {
+    isDisabled: {
+      true: "uy:text-content-neutral-disabled",
+      false: "uy:text-content-neutral-low"
+    }
+  }
+}), i = s(
+  ({ children: t }, e) => {
+    const { isDisabled: o } = l(), r = p({ isDisabled: o });
+    return /* @__PURE__ */ a("span", { className: r, ref: e, "data-dd-privacy": "mask", children: t });
+  }
+);
+i.displayName = "SelectOptionHelper";
+export {
+  i as SelectOptionHelper
+};

package/dist/esm/components/select-field/SelectField.d.ts

@@ -0,0 +1,52 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { SelectProps } from '../select/Select.js';
+interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<SelectProps<TItems>, 'name' | 'value'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the select field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+}
+type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, StandardSchemaV1.InferOutput<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectField` component renders a list of options to select one, it is fully integrated with the `Form` component.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <SelectField<{id?: string, name:string}, typeof schema>
+ *        name="vegetable"
+ *        label="Vegetables"
+ *        >
+ *        <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *        <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *        <SelectOption id="Carrots">Carrots</SelectOption>
+ *        </SelectField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @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 SelectField: SelectFieldComponent;
+export { SelectField };

package/dist/esm/components/select-field/SelectField.js

@@ -0,0 +1,67 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { useFormContext as b } from "react-hook-form";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as C } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as T } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as g } from "../form-field/parts/FormLabel.js";
+import { Select as k } from "../select/Select.js";
+const v = h({
+  base: "uy:flex uy:flex-col uy:gap-100"
+}), w = ({
+  children: m,
+  feedbackText: e,
+  helperText: r,
+  isRequired: t,
+  label: l,
+  name: i,
+  requiredVariant: c,
+  isDisabled: n,
+  isInvalid: f,
+  isReadOnly: p,
+  placeholder: s,
+  items: d,
+  ...F
+}, a) => {
+  const { control: u } = b(), x = {
+    isRequired: t,
+    isInvalid: f,
+    isDisabled: n,
+    isReadOnly: p
+  };
+  return /* @__PURE__ */ y(
+    j,
+    {
+      control: u,
+      name: i,
+      className: v(),
+      ...x,
+      children: [
+        /* @__PURE__ */ o(g, { requiredVariant: c, children: l }),
+        r && /* @__PURE__ */ o(T, { children: r }),
+        /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
+          k,
+          {
+            ref: a,
+            placeholder: s,
+            items: d,
+            ...F,
+            children: m
+          }
+        ) }),
+        /* @__PURE__ */ o(N, { children: e })
+      ]
+    }
+  );
+}, H = S(function(e, r) {
+  return w(
+    e,
+    r
+  );
+});
+H.displayName = "SelectField";
+export {
+  H as SelectField
+};