@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,166 @@
+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 { FieldError as N } from "react-aria-components/FieldError";
+import { Input as S } from "react-aria-components/Input";
+import { SearchField as I } from "react-aria-components/SearchField";
+import { useIntl as k } from "react-intl";
+import { CircularIconButton as C } from "../icon-button/CircularIconButton.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: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",
+      "uy:enabled:text-content-form-enabled",
+      "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-high-error",
+      "uy:group-data-[disabled=true]:cursor-not-allowed"
+    ],
+    icon: [
+      "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
+    ],
+    invalidIcon: ["uy:hidden", "uy:group-data-[invalid=true]:block"],
+    wrapperState: ["uy:flex uy:items-center"],
+    feedbackText: [
+      "uy:typography-body-small-strong uy:text-content-form-invalid"
+    ],
+    closeButton: [
+      "uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"
+    ]
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: "uy:bg-surface-form-high-disabled",
+        icon: "uy:text-content-neutral-lowest-disabled",
+        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-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"
+      }
+    }
+  }
+}), E = ({
+  intl: a,
+  placeholder: r,
+  isDisabled: t
+}) => t ? "" : r || a.formatMessage({
+  id: "unity:component:search:placeholder",
+  defaultMessage: "Search"
+}), j = w(
+  ({
+    isLoading: a = !1,
+    isInvalid: r,
+    isDisabled: t,
+    isReadOnly: u,
+    name: d,
+    placeholder: l,
+    feedbackText: s,
+    label: c,
+    ...y
+  }, f) => {
+    const {
+      base: m,
+      icon: b,
+      input: g,
+      invalidIcon: h,
+      wrapperState: p,
+      feedbackText: v,
+      closeButton: x
+    } = B({
+      isReadOnly: u
+    }), o = k();
+    return /* @__PURE__ */ i(
+      I,
+      {
+        "aria-label": c,
+        className: "uy:group",
+        name: d,
+        ref: f,
+        isInvalid: r,
+        isDisabled: t || u,
+        isReadOnly: u,
+        ...y,
+        children: [
+          /* @__PURE__ */ i("div", { className: m(), children: [
+            /* @__PURE__ */ e(
+              n,
+              {
+                src: "MagnifyingGlassOutlined",
+                className: b(),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ e(
+              S,
+              {
+                className: g(),
+                placeholder: E({ intl: o, placeholder: l, isDisabled: t })
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: p(), children: [
+              /* @__PURE__ */ e(
+                n,
+                {
+                  className: h(),
+                  src: "WarningCircleOutlined",
+                  color: "content.form.invalid",
+                  alt: o.formatMessage({
+                    id: "unity:component:form-field:form-input:error:alt",
+                    defaultMessage: "Error"
+                  })
+                }
+              ),
+              a && /* @__PURE__ */ e(
+                T,
+                {
+                  label: o.formatMessage({
+                    id: "unity:component:common:loading:label",
+                    defaultMessage: "Loading..."
+                  }),
+                  color: "primary",
+                  size: "small",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ e(
+                C,
+                {
+                  asElement: "button",
+                  title: o.formatMessage({
+                    id: "unity:component:common:clear:title",
+                    defaultMessage: "Clear"
+                  }),
+                  className: x(),
+                  icon: "CloseOutlined"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e(N, { className: v(), children: s })
+        ]
+      }
+    );
+  }
+);
+j.displayName = "Search";
+export {
+  j as Search,
+  B as search
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from 'react-aria-components/RadioGroup';
+export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
+    /**
+     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
+     */
+    children: ReactNode;
+}
+export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
+}
+/**
+ * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
+ * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
+ * Use this component when you need to:
+ * - Present a small set of related but mutually exclusive options
+ * - Create a toggle between different views or modes
+ * - Provide a compact alternative to radio buttons or tabs
+ * - Allow users to switch between different states of the same content*
+ * The component supports both controlled and uncontrolled usage patterns.
+ * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
+ * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup>
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const SegmentedButtonGroup: {
+    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SegmentedButtonGroup };

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRadioGroup as n } from "react-aria/useRadioGroup";
+import { useRadioGroupState as i } from "react-stately/useRadioGroupState";
+import { SegmentedButtonGroupProvider as a } from "./SegmentedButtonGroups.context.js";
+const d = (o) => {
+  const { children: e } = o, t = i(o), { radioGroupProps: u } = n(
+    { ...o, orientation: "horizontal" },
+    t
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...u,
+      className: "uy:bg-surface-neutral-low uy:py-50 uy:px-50 uy:flex uy:gap-50 uy:rounded-75 uy:w-fit",
+      children: /* @__PURE__ */ r(a, { state: t, children: e })
+    }
+  );
+};
+d.displayName = "SegmentedButtonGroup";
+export {
+  d as SegmentedButtonGroup
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { RadioGroupState } from 'react-stately/useRadioGroupState';
+interface SegmentedButtonGroupContextValue {
+    state: RadioGroupState;
+}
+export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
+export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as r } from "react";
+const n = r({
+  state: {}
+});
+function i({
+  children: t,
+  state: e
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: { state: e }, children: t });
+}
+export {
+  n as SegmentedButtonGroupContext,
+  i as SegmentedButtonGroupProvider
+};

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

@@ -0,0 +1,47 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRadioProps } from 'react-aria/useRadioGroup';
+import { IconName } from '../../../types/utils.js';
+export interface ToggleButtonProps extends AriaRadioProps {
+    /**
+     * The icon to display before the button text.
+     * The icon will automatically switch between outlined and filled variants based on the selection state:
+     * - When selected: Uses the filled variant (`${prefixIcon}Filled`)
+     * - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Whether the button is in a loading state.
+     * When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
+     * Use this prop to indicate that an action is being processed after the button is clicked.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
+ * It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
+ *
+ * `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
+ * They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
+ * @remarks
+ * This component must be used inside a SegmentedButtonGroup component
+ * @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
+ * @example
+ * Basic usage within a SegmentedButtonGroup:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup defaultValue="option1">
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { ToggleButton };

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

@@ -0,0 +1,125 @@
+import { jsxs as c, jsx as s, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as h, useContext as x, useRef as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { mergeProps as P } from "react-aria/mergeProps";
+import { useFocusRing as L } from "react-aria/useFocusRing";
+import { useRadio as I } from "react-aria/useRadioGroup";
+import { VisuallyHidden as N } from "react-aria/VisuallyHidden";
+import { useIntl as V } from "react-intl";
+import { Icon as F } from "../../icon/Icon.js";
+import { Spinner as R } from "../../spinner/Spinner.js";
+import { SegmentedButtonGroupContext as S } from "../SegmentedButtonGroups.context.js";
+const B = w({
+  slots: {
+    base: [
+      "uy:group uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25 uy:h-400",
+      "uy:active:gb-surface-neutral-pressed"
+    ],
+    wrapper: [
+      "uy:flex uy:gap-50 uy:items-center uy:typography-action",
+      "uy:active:text-content-neutral-pressed"
+    ]
+  },
+  variants: {
+    isSelected: {
+      true: { base: "uy:bg-surface-neutral-enabled uy:shadow-raising" }
+    },
+    isLoading: {
+      true: {
+        base: "uy:bg-surface-neutral-disabled uy:cursor-not-allowed",
+        wrapper: "uy:text-content-inverted-disabled"
+      }
+    },
+    isFocusVisible: {
+      true: {
+        base: "uy:outline-none uy:ring-2 uy:ring-ring uy:ring-offset-2 uy:ring-utility-focus-ring"
+      }
+    },
+    hasPrefixIcon: { true: "", false: "" }
+  },
+  compoundVariants: [
+    {
+      isLoading: !1,
+      isSelected: !1,
+      className: {
+        base: "uy:hover:bg-surface-neutral-hover",
+        wrapper: "uy:text-content-neutral-enabled uy:group-hover:text-content-neutral-hover"
+      }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !1,
+      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !0,
+      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !1,
+      className: { base: "uy:pl-150 uy:cursor-pointer" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !0,
+      className: { base: "uy:pl-50 uy:cursor-pointer" }
+    }
+  ],
+  defaultVariants: {
+    isSelected: !1,
+    isLoading: !1,
+    hasPrefixIcon: !1
+  }
+}), C = ({
+  intl: t,
+  children: a,
+  isLoading: n,
+  prefixIcon: e,
+  isSelected: r
+}) => n ? /* @__PURE__ */ s(
+  R,
+  {
+    label: t.formatMessage({
+      id: "unity:component:common:loading:label",
+      defaultMessage: "Loading..."
+    }),
+    color: "inherit",
+    size: "small"
+  }
+) : /* @__PURE__ */ c(b, { children: [
+  e ? /* @__PURE__ */ s(
+    F,
+    {
+      src: r ? `${e}Filled` : `${e}Outlined`,
+      color: r ? "content.neutral" : "content.neutral.low",
+      role: "presentation"
+    }
+  ) : null,
+  a
+] }), T = h(
+  (t, a) => {
+    const { children: n, value: e, prefixIcon: r, isLoading: o } = t, { state: u } = x(S), i = v(null), { inputProps: d } = I(t, u, i), { focusProps: p, isFocusVisible: f } = L(), y = V(), l = u.selectedValue === e, { base: m, wrapper: g } = B({
+      isSelected: l,
+      hasPrefixIcon: !!r,
+      isLoading: o,
+      isFocusVisible: f
+    });
+    return /* @__PURE__ */ c("label", { ref: a, className: m(), "aria-disabled": o, children: [
+      /* @__PURE__ */ s(N, { children: /* @__PURE__ */ s(
+        "input",
+        {
+          ...P(d, p),
+          ref: i,
+          disabled: o
+        }
+      ) }),
+      /* @__PURE__ */ s("span", { className: g(), children: C({ intl: y, children: n, isLoading: o, isSelected: l, prefixIcon: r }) })
+    ] });
+  }
+);
+T.displayName = "ToggleButton";
+export {
+  T as ToggleButton
+};

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

@@ -0,0 +1,78 @@
+import { Node } from '@react-types/shared';
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components/Select';
+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 */
+    items?: Iterable<T>;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** The value of the selected item */
+    value?: AriaSelectProps<T>['value'];
+    /** The default value of the selected item in uncontrolled mode */
+    defaultValue?: AriaSelectProps<T>['defaultValue'];
+    /** Function trigger when a item is selected */
+    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'>;
+    /** The aria-label for the search input when isSearchable is true */
+    searchInputAriaLabel?: string;
+    /**
+     * Custom content to render when the listbox has no options to display.
+     * This can occur when `items` is empty or when search filtering returns no results.
+     * If not provided, the listbox will appear empty.
+     * @example
+     * ```tsx
+     * <Select
+     *   items={[]}
+     *   renderEmptyState={
+     *     <EmptyStateNoSearchResults description="No options available" />
+     *   }
+     * >
+     *   {item => <SelectOption>{item.name}</SelectOption>}
+     * </Select>
+     * ```
+     */
+    renderEmptyState?: ReactNode | (() => ReactNode);
+    /** Custom render function to format the selected value display */
+    renderValue?: (value: Node<T>) => ReactNode;
+}
+type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `Select` component is used to render a list of options
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <FormField name="vegetable">
+ *        <FormLabel>Vegetables</FormLabel>
+ *        <FormHelperText>Select your favorite vegetable</FormHelperText>
+ *        <FormControl>
+ *          <Select>
+ *            <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *            <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *           <SelectOption id="Carrots">Carrots</SelectOption>
+ *          </Select>
+ *        </FormControl>
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ */
+declare const Select: SelectComponent;
+export { Select };

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

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