@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

package/dist/esm/components/multi-select/Multiselect.types.d.mts

@@ -1,109 +0,0 @@
-import { ReactNode } from 'react';
-import { UseComboboxFilterProps } from './hooks/use-combobox-filter.mjs';
-type Key = string | number;
-export interface MultiSelectBaseProps {
-    /** Default content when no value is selected */
-    placeholder?: string;
-    /** Whether the select is searchable and shows a search input on top of the options */
-    isSearchable?: boolean;
-    /** Whether the select is disabled */
-    isDisabled?: boolean;
-    /** Whether the select is invalid */
-    isInvalid?: boolean;
-    /** Whether the select is read only */
-    isReadOnly?: boolean;
-    /** Whether the select is in a loading state */
-    isLoading?: boolean;
-    /** Callback when the clear button is pressed */
-    onClearButtonPress?: () => void;
-    /** Maximum number of items to show in the select button before showing a counter badge */
-    maxVisibleItems?: number;
-    /** Callback when the select is focused */
-    onFocus?: () => void;
-    /** Callback when the select is blurred */
-    onBlur?: () => void;
-    /** The ID of the element that labels this select when no visible label is provided */
-    'aria-labelledby'?: string;
-    /** The ID of the element that labels this select when no visible label is provided */
-    'aria-label'?: string;
-}
-export interface FlatSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
-    /** The items to display in the select */
-    items: Set<TItem>;
-    /** The currently selected values (controlled mode) */
-    value?: Set<TKeyType>;
-    /** The default selected values (uncontrolled mode) */
-    defaultValue?: Set<TKeyType>;
-    /** Callback when selection changes */
-    onChange?: (value: Set<TKeyType>) => void;
-    /** Function to get the value from an item, defaults to String(item) */
-    getItemValue?: (item: TItem) => TKeyType;
-    /** Function to render the selected value(s) in the button */
-    renderValue?: (value: Set<TItem>) => string;
-    /** Children must be a render function that returns Option components */
-    children: (item: TItem) => React.JSX.Element;
-}
-export interface GroupedSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
-    /** The items to display in the select, grouped by category */
-    items: Map<string, TItem[]>;
-    /** The currently selected values (controlled mode) */
-    value?: Set<TKeyType>;
-    /** The default selected values (uncontrolled mode) */
-    defaultValue?: Set<TKeyType>;
-    /** Callback when selection changes */
-    onChange?: (value: Set<TKeyType>) => void;
-    /** Function to get the value from an item, defaults to String(item) */
-    getItemValue?: (item: TItem) => TKeyType;
-    /** Function to render the selected value(s) in the button */
-    renderValue?: (value: Set<TItem>) => string;
-    /** Children must be a render function that returns OptGroup components */
-    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
-}
-export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
-    /** The items to display in the select (for dynamic API) */
-    items?: never;
-    /** The currently selected values (controlled mode) */
-    value?: Set<TItem>;
-    /** The default selected values (uncontrolled mode) */
-    defaultValue?: Set<TItem>;
-    /** Callback when selection changes */
-    onChange?: (value: Set<TItem>) => void;
-    /** Function to render the selected value(s) in the button */
-    renderValue?: (value: Set<TItem>) => string;
-    /** Children must be Option components */
-    children: ReactNode;
-    getItemValue?: never;
-}
-export type DynamicMultiSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? (Omit<FlatSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
-    items: Set<TItem>;
-    children: (item: TItem) => React.JSX.Element;
-    getItemValue?: (item: TItem) => TKeyType;
-    renderValue?: (value: Set<TItem>) => string;
-    isSearchable?: boolean;
-    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
-}) | (Omit<GroupedSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
-    items: Map<string, TItem[]>;
-    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
-    getItemValue?: (item: TItem) => TKeyType;
-    renderValue?: (value: Set<TItem>) => string;
-    isSearchable?: boolean;
-    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
-}) : never;
-export type MultiSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? DynamicMultiSelectProps<TItem, TItemKey, TKeyType> | StaticItemsProps : never;
-export type MultiSelectComponent = {
-    <TItem, // Item type
-    TItemKey extends keyof TItem, // key name of the item
-    TKeyType extends TItem[TItemKey] & Key>(props: MultiSelectProps<TItem, TItemKey, TKeyType> & {
-        ref?: React.ForwardedRef<HTMLButtonElement>;
-    }): React.JSX.Element;
-    displayName?: string;
-};
-export {};

package/dist/esm/components/multi-select/hooks/use-combobox-filter.d.mts

@@ -1,12 +0,0 @@
-export interface UseComboboxFilterProps<T> {
-    items?: T[];
-    extractSearchableText?: (item: T) => string[];
-    enabled?: boolean;
-    searchOptions?: Intl.CollatorOptions;
-}
-export interface UseComboboxFilterReturn<T> {
-    searchQuery: string;
-    setSearchQuery: (value: string) => void;
-    matchingItems: T[];
-}
-export declare function useComboboxFilter<T>({ items, extractSearchableText, enabled, searchOptions, }: UseComboboxFilterProps<T>): UseComboboxFilterReturn<T>;

package/dist/esm/components/multi-select/hooks/use-multiselection-state.d.mts

@@ -1,14 +0,0 @@
-interface UseMultiSelectionStateProps<V extends string | number = string> {
-    selectedKeys?: Set<V>;
-    defaultSelectedKeys?: Set<V>;
-    onSelectionChange?: (keys: Set<V>) => void;
-}
-interface UseMultiSelectionStateReturn<V extends string | number = string> {
-    selectedKeys: Set<V>;
-    isSelected: (key: V) => boolean;
-    selectKey: (key: V) => void;
-    unselectKey: (key: V) => void;
-    toggleKey: (key: V) => void;
-}
-export declare function useMultiSelectionState<V extends string | number = string>({ selectedKeys: controlledKeys, defaultSelectedKeys, onSelectionChange, }: UseMultiSelectionStateProps<V>): UseMultiSelectionStateReturn<V>;
-export {};

package/dist/esm/components/multi-select/parts/MultiSelectButton.d.mts

@@ -1,16 +0,0 @@
-import { ForwardedRef, ReactElement } from 'react';
-export interface MultiSelectButtonProps<TItem> {
-    placeholder?: string;
-    isDisabled?: boolean;
-    isReadOnly?: boolean;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    /** The selected items to show in the button */
-    selectedItems: Set<TItem>;
-    /** Function to render the selected items */
-    renderValue: (values: Set<TItem>) => string;
-    onClearButtonPress?: () => void;
-}
-export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => ReactElement;

package/dist/esm/components/multi-select/parts/MultiSelectButton.mjs

@@ -1,161 +0,0 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { memo as j, forwardRef as E, useContext as k, useMemo as A } from "react";
-import { useSelectContext as D, useStoreState as K, Select as $ } from "@ariakit/react";
-import { useId as L } from "react-aria";
-import { useIntl as R } from "react-intl";
-import { tv as U } from "tailwind-variants";
-import { Badge as W } from "../../badge/Badge.mjs";
-import { CircularIconButton as q } from "../../icon-button/CircularIconButton.mjs";
-import { Icon as p } from "../../icon/Icon.mjs";
-import { Spinner as F } from "../../spinner/Spinner.mjs";
-import { MultiSelectContext as G } from "../Multiselect.context.mjs";
-const H = U({
-  slots: {
-    base: "uy-h-500 uy-flex uy-items-center uy-justify-between uy-py-100 uy-px-150 uy-w-full uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:not([disabled]):uy-border-border-form-active !uy-pointer-events-auto",
-    inputValue: "uy-flex-1 uy-typography-body uy-text-content-form-enabled uy-text-left uy-line-clamp-1",
-    state: "uy-grow-0 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-inline-flex uy-gap-50 uy-items-center uy-px-100",
-    suffix: ""
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled uy-text-content-form-disabled",
-        inputValue: "!uy-text-content-form-disabled",
-        state: "uy-text-content-form-disabled",
-        suffix: "uy-text-content-form-disabled"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled",
-        inputValue: "uy-text-content-form-disabled",
-        state: "uy-text-content-form-disabled",
-        suffix: "uy-text-content-form-disabled"
-      }
-    },
-    isInvalid: {
-      true: {
-        base: "uy-bg-surface-form-error uy-border-border-form-error",
-        inputValue: "uy-text-content-form-error",
-        state: "uy-text-content-form-error",
-        suffix: "uy-text-content-form-error"
-      }
-    },
-    isEmpty: {
-      true: {
-        inputValue: "uy-text-content-neutral-lowest"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-        inputValue: "uy-text-content-form-enabled uy-bg-surface-form-enabled",
-        state: "uy-text-content-neutral-disabled",
-        suffix: "uy-border-border-form-enabled uy-text-content-form-enabled"
-      }
-    }
-  ]
-});
-function J({
-  isDisabled: r,
-  isReadOnly: t,
-  isLoading: d,
-  isInvalid: n,
-  placeholder: i,
-  selectedItems: g,
-  renderValue: m,
-  onClearButtonPress: u,
-  ...h
-}, w) {
-  const f = L(), s = R(), S = D(), M = K(S, "open"), y = k(G), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = H({
-    isDisabled: !!r,
-    isReadOnly: !!t,
-    isInvalid: !!n,
-    isEmpty: l.size === 0
-  }), b = Math.max(
-    o.length - a,
-    0
-  ), N = l.size > 0 && !r && !t && !d, B = A(() => {
-    if (o.length === 0) return i;
-    const O = o.slice(0, a), z = new Set(O);
-    return m(z);
-  }, [o, a, m, i]);
-  return /* @__PURE__ */ c(
-    $,
-    {
-      ...h,
-      ref: w,
-      className: v(),
-      disabled: r || t,
-      "aria-invalid": n,
-      "aria-readonly": t,
-      "aria-labelledby": `${f}-select-button-label`,
-      "data-dd-privacy": "mask",
-      children: [
-        /* @__PURE__ */ e("span", { id: `${f}-select-button-label`, className: I(), children: l.size > 0 ? B : i }),
-        /* @__PURE__ */ c("div", { className: C(), children: [
-          d && /* @__PURE__ */ e(
-            F,
-            {
-              color: "inherit",
-              size: "small",
-              label: s.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
-              })
-            }
-          ),
-          n && /* @__PURE__ */ e(
-            p,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: s.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          b > 0 && /* @__PURE__ */ c(W, { variant: "numeric", children: [
-            "+",
-            b
-          ] }),
-          N && /* @__PURE__ */ e(
-            q,
-            {
-              title: s.formatMessage({
-                id: "unity:component:form-field:form-input:clear:title",
-                defaultMessage: "Clear"
-              }),
-              className: "uy-text-content-neutral-enabled",
-              icon: "CloseOutlined",
-              onPress: () => {
-                u == null || u();
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          p,
-          {
-            color: "inherit",
-            className: V(),
-            src: M ? "CaretUpOutlined" : "CaretDownOutlined",
-            role: "presentation"
-          }
-        )
-      ]
-    }
-  );
-}
-const x = j(E(J));
-x.displayName = "MultiselectButton";
-const ne = x;
-export {
-  ne as MultiSelectButton
-};

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.mts

@@ -1,69 +0,0 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-/**
- * Base props for both static and dynamic MultiSelectOptGroup variants
- */
-type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    /** The label text displayed at the top of the group */
-    label: string;
-    /** Whether to show a separator line after the group */
-    withSeparator?: boolean;
-};
-/**
- * Props for the dynamic API of MultiSelectOptGroup
- * @template T - The type of items in the group
- */
-export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
-    /** Array of items to render as options within the group */
-    items: T[];
-    /** Render function that converts each item into a MultiSelectOption */
-    children: (item: T) => React.JSX.Element;
-}
-/**
- * Props for the static API of MultiSelectOptGroup
- */
-export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
-    /** Not used in static API */
-    items?: never;
-    /** Static MultiSelectOption components to render within the group */
-    children: ReactNode;
-}
-/**
- * Combined props type for MultiSelectOptGroup
- * @template T - The type of items when using dynamic API
- */
-export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
-/**
- * Groups related options within a `MultiSelect` component.
- *
- * This component provides two APIs for grouping options:
- * 1. Static API - Directly nest MultiSelectOption components
- * 2. Dynamic API - Provide an array of items and a render function for dynamic items
- * @example
- * ```tsx
- * // Static API
- * <MultiSelectOptGroup label="Fruits" withSeparator>
- *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
- * </MultiSelectOptGroup>
- *
- * // Dynamic API
- * <MultiSelectOptGroup
- *   label="Fruits"
- *   items={fruits}
- *   withSeparator
- * >
- *   {fruit => (
- *     <MultiSelectOption value={fruit.id}>
- *       {fruit.name}
- *     </MultiSelectOption>
- *   )}
- * </MultiSelectOptGroup>
- * ```
- * @template T - The type of items when using the dynamic API
- * @see {@link MultiSelectOption} for the child component API
- */
-declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace MultiSelectOptGroup {
-    var displayName: string;
-}
-export { MultiSelectOptGroup };

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.mjs

@@ -1,34 +0,0 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { useContext as h } from "react";
-import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
-import { tv as N } from "tailwind-variants";
-import { MultiSelectContext as g } from "../Multiselect.context.mjs";
-const M = N({
-  slots: {
-    base: "uy-flex uy-flex-col uy-bg-surface-neutral",
-    label: "uy-px-150 uy-py-100 uy-typography-body-strong uy-text-content-neutral",
-    separator: "uy-my-100 uy-border-t uy-border-border-neutral uy-border-solid"
-  }
-});
-function O(e) {
-  return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
-}
-function j(e) {
-  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, s = {
-    className: c({ className: m }),
-    ...y
-  };
-  return i.isSearchable ? /* @__PURE__ */ u(x, { ...s, children: [
-    /* @__PURE__ */ t(C, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] }) : /* @__PURE__ */ u(G, { ...s, children: [
-    /* @__PURE__ */ t(S, { className: r(), children: n }),
-    l,
-    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] });
-}
-j.displayName = "MultiSelectOptGroup";
-export {
-  j as MultiSelectOptGroup
-};

package/dist/esm/components/multi-select/parts/MultiSelectOption.d.mts

@@ -1,20 +0,0 @@
-import { default as React, ReactNode } from 'react';
-/**
- * Props for the MultiSelectOption component.
- * @template T - The type of the value this option represents (string or number)
- */
-export interface MultiSelectOptionProps<T> {
-    /** The value associated with this option. Must be unique within the MultiSelect */
-    value: T;
-    /** The content to display for this option */
-    children: ReactNode;
-    /** Whether the option is disabled. When true, the option cannot be selected */
-    isDisabled?: boolean;
-    /** Whether the option should receive focus when rendered. Use sparingly */
-    autoFocus?: boolean;
-    /** Additional text displayed below the option to provide more context */
-    helperText?: string;
-}
-export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => React.JSX.Element;

package/dist/esm/components/multi-select/parts/MultiSelectOption.mjs

@@ -1,87 +0,0 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as p, useContext as b, createElement as v } from "react";
-import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
-import { tv as g } from "tailwind-variants";
-import C from "../../../hooks/use-id.mjs";
-import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.mjs";
-import { MultiSelectContext as I } from "../Multiselect.context.mjs";
-const O = g({
-  slots: {
-    base: [
-      "uy-flex uy-flex-col uy-transition",
-      "uy-w-full uy-px-150 uy-py-100",
-      "uy-rounded-50 uy-cursor-pointer",
-      "hover:uy-bg-surface-neutral-hover",
-      "active:uy-bg-surface-neutral-pressed",
-      "focus-visible:uy-outline focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2",
-      "data-[active-item=true]:uy-outline data-[active-item=true]:uy-outline-2 data-[active-item=true]:uy-outline-utility-focus-ring data-[active-item=true]:uy-outline-offset-2"
-    ],
-    label: "uy-inline-flex uy-items-center uy-gap-100 uy-text-content-neutral uy-typography-body",
-    helperText: "uy-inline-block uy-typography-body uy-text-content-neutral-low uy-pl-300"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "!uy-cursor-not-allowed",
-        label: "uy-text-content-neutral-disabled"
-      },
-      false: {
-        base: ""
-      }
-    }
-  }
-});
-function w({
-  isDisabled: i
-}) {
-  return /* @__PURE__ */ e(
-    S,
-    {
-      render: (t) => /* @__PURE__ */ e(
-        k,
-        {
-          isSelected: "children" in t && !!t.children,
-          isDisabled: i,
-          "data-dd-privacy": "hidden"
-        }
-      )
-    }
-  );
-}
-function r({
-  value: i,
-  children: t,
-  isDisabled: u,
-  helperText: l,
-  autoFocus: n = !1,
-  ...a
-}, s) {
-  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
-  return /* @__PURE__ */ v(
-    x,
-    {
-      "data-dd-privacy": "mask",
-      ...a,
-      ref: s,
-      id: o,
-      key: o,
-      value: String(i),
-      disabled: u,
-      className: y(),
-      autoFocus: n,
-      focusOnHover: !1,
-      "aria-describedby": l ? `${o}-helper-text` : void 0,
-      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
-    },
-    /* @__PURE__ */ m("div", { className: d(), children: [
-      /* @__PURE__ */ e(w, { isDisabled: u }),
-      t
-    ] }),
-    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
-  );
-}
-r.displayName = "MultiSelectOption";
-const R = p(r);
-export {
-  R as MultiSelectOption
-};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.d.mts

@@ -1,7 +0,0 @@
-import { SelectPopoverProps } from '@ariakit/react';
-type MultiSelectPopoverProps = SelectPopoverProps & {
-    onBlur?: () => void;
-};
-declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
-export {};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.mjs

@@ -1,65 +0,0 @@
-import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
-import { memo as b, useContext as f } from "react";
-import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
-import { tv as i } from "tailwind-variants";
-import { Icon as g } from "../../icon/Icon.mjs";
-import { MultiSelectContext as w } from "../Multiselect.context.mjs";
-const S = i({
-  slots: {
-    base: "uy-shadow-floating uy-absolute uy-top-full uy-left-0 uy-w-full uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-overflow-auto uy-max-h-[min(var(--popover-available-height,300px),300px)] uy-outline-none",
-    list: "uy-p-100"
-  }
-}), N = i({
-  slots: {
-    wrapper: "uy-sticky uy-top-0 uy-bg-surface-neutral uy-pt-100 uy-px-100",
-    base: "uy-flex uy-w-full uy-gap-100 uy-h-500 uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-border-border-form-enabled uy-bg-surface-form-enabled uy-px-150 uy-typography-body focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
-    input: "focus-visible:uy-outline-none",
-    divider: "uy-my-100 uy-border-t uy-border-border-neutral"
-  }
-});
-function C({
-  children: t,
-  ...s
-}) {
-  const l = f(w), { base: n, list: u } = S(), { base: a, input: y, wrapper: c, divider: d } = N(), { onBlur: o, ...p } = s;
-  return /* @__PURE__ */ e(
-    h,
-    {
-      portal: !0,
-      sameWidth: !0,
-      unmountOnHide: !0,
-      className: n(),
-      onClose: () => o == null ? void 0 : o(),
-      ...p,
-      children: l.isSearchable ? /* @__PURE__ */ r(m, { children: [
-        /* @__PURE__ */ r("div", { className: c(), children: [
-          /* @__PURE__ */ r("div", { className: a(), children: [
-            /* @__PURE__ */ e(
-              g,
-              {
-                src: "MagnifyingGlassOutlined",
-                color: "content.neutral.lowest",
-                "aria-hidden": !0
-              }
-            ),
-            /* @__PURE__ */ e(
-              v,
-              {
-                autoSelect: !0,
-                placeholder: "Search...",
-                className: y()
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e("hr", { className: d() })
-        ] }),
-        /* @__PURE__ */ e(x, { className: u(), children: t })
-      ] }) : /* @__PURE__ */ e("div", { className: u(), children: t })
-    }
-  );
-}
-const M = b(C);
-M.displayName = "MultiSelectPopover";
-export {
-  M as MultiSelectPopover
-};

package/dist/esm/components/multi-select-field/MultiSelectField.d.mts

@@ -1,59 +0,0 @@
-import { ForwardedRef, ReactNode } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
-import { Schema } from '../../hooks/use-form.types.mjs';
-import { LabelProps } from '../label/Label.mjs';
-import { MultiSelectProps } from '../multi-select/Multiselect.types.mjs';
-type Key = string | number;
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
-    /** The name of the field, which should match the form schema. */
-    name: TName;
-    /** The label for the multi-select field. */
-    label: string;
-    /** Helper text to display below the multi-select field. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the multi-select field. */
-    feedbackText?: ReactNode;
-    /** A contextual link to display below the multi-select field. */
-    contextualLink?: ReactNode;
-}
-type BaseMultiSelectProps<TItem, // Item type
-TItemKey extends keyof TItem, // key name of the item
-TKeyType extends TItem[TItemKey] & Key> = Omit<MultiSelectProps<TItem, TItemKey, TKeyType>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
-export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItem = unknown, TItemKey extends keyof TItem = keyof TItem, TKeyType extends TItem[TItemKey] & Key = TItem[TItemKey] & Key> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItem, TItemKey, TKeyType>;
-/**
- * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
- * @example
- * ```tsx
- * const schema = z.object({
- *   fruits: z.set(z.string()),
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <MultiSelectField<typeof schema>
- *         name="fruits"
- *         label="Select fruits"
- *       >
- *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
- *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
- *       </MultiSelectField>
- *     </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.
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
- */
-export declare const MultiSelectField: {
-    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<ZodInfer<TSchema>, FieldPath<ZodInfer<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
-        ref?: ForwardedRef<HTMLButtonElement>;
-    }): React.JSX.Element;
-    displayName?: string;
-};
-export {};