@payfit/unity-components 2.46.11 → 2.46.13

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

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

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

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

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

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

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

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

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

@@ -1,128 +0,0 @@
-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
-};