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

package/dist/esm/components/icon/Icon.mjs

@@ -100,6 +100,7 @@ function f({
   return /* @__PURE__ */ e(
     "span",
     {
+      "data-dd-privacy": "allow",
       ...t,
       role: a,
       "aria-label": t["aria-labelledby"] ? void 0 : n,

package/dist/esm/components/icon-button/CircularIconButton.d.mts

@@ -1,12 +1,77 @@
 import { UnityIcon } from '@payfit/unity-icons';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-export type CircularIconButtonProps = AriaButtonProps & {
+import { VariantProps } from 'tailwind-variants';
+export declare const circularIconButton: import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}>, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, undefined, "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface CircularIconButtonProps extends AriaButtonProps, VariantProps<typeof circularIconButton> {
     icon: UnityIcon;
     title: string;
+    asElement?: 'button' | 'default';
     isLoading?: boolean;
     isDisabled?: boolean;
-};
-export declare const circularIconButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+}
 export declare function CircularIconButton(props: CircularIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CircularIconButton {
     var displayName: string;

package/dist/esm/components/icon-button/CircularIconButton.mjs

@@ -1,32 +1,66 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Pressable as d } from "react-aria-components";
-import { tv as y } from "tailwind-variants";
-import b from "../../hooks/use-id.mjs";
-import { Icon as f } from "../icon/Icon.mjs";
-import { Spinner as m } from "../spinner/Spinner.mjs";
-import p from "../tooltip/Tooltip.mjs";
-const h = y({
-  base: "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled"
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { Button as m, Pressable as p } from "react-aria-components";
+import { tv as v } from "tailwind-variants";
+import h from "../../hooks/use-id.mjs";
+import { Icon as g } from "../icon/Icon.mjs";
+import { Spinner as x } from "../spinner/Spinner.mjs";
+import { Tooltip as w } from "../tooltip/Tooltip.mjs";
+const I = v({
+  base: "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled",
+  variants: {
+    size: {
+      default: "uy-w-300 uy-h-300",
+      large: "uy-w-400 uy-h-400"
+    },
+    color: {
+      "content.neutral": "uy-text-content-neutral",
+      "content.neutral.low": "uy-text-content-neutral-low"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    color: "content.neutral"
+  }
 });
-function v(i) {
-  const s = b(), { onPress: n, icon: l, isLoading: r, title: t, isDisabled: u, ...a } = i, o = `icon-button-label-${s}`;
-  return /* @__PURE__ */ e(p, { title: t, children: /* @__PURE__ */ e(
-    d,
+function z(l) {
+  const i = h(), {
+    onPress: a,
+    icon: s,
+    color: u,
+    size: o,
+    isLoading: t,
+    title: r,
+    isDisabled: c,
+    asElement: d = "default",
+    ...y
+  } = l, n = `icon-button-label-${i}`, b = I({ color: u, size: o });
+  return /* @__PURE__ */ e(w, { title: r, children: /* @__PURE__ */ e(
+    d === "button" ? m : p,
     {
-      ...a,
-      onPress: n,
-      isDisabled: u || r,
-      "aria-labelledby": o,
-      "aria-busy": r,
-      children: /* @__PURE__ */ c("div", { className: h(), role: "button", children: [
-        r ? /* @__PURE__ */ e(m, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(f, { src: l, color: "inherit", role: "presentation" }),
-        /* @__PURE__ */ e("span", { id: o, className: "uy-sr-only", children: t })
+      "data-dd-privacy": "allow",
+      ...y,
+      onPress: a,
+      isDisabled: c || t,
+      "aria-labelledby": n,
+      "aria-busy": t,
+      className: b,
+      children: /* @__PURE__ */ f("div", { role: "button", children: [
+        t ? /* @__PURE__ */ e(x, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          g,
+          {
+            src: s,
+            size: o === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: n, className: "uy-sr-only", children: r })
       ] })
     }
   ) });
 }
-v.displayName = "CircularIconButton";
+z.displayName = "CircularIconButton";
 export {
-  v as CircularIconButton,
-  h as circularIconButton
+  z as CircularIconButton,
+  I as circularIconButton
 };

package/dist/esm/components/icon-button/IconButton.mjs

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { Button as p } from "react-aria-components";
-import b from "../../hooks/use-id.mjs";
-import { Icon as y } from "../icon/Icon.mjs";
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { Button as f } from "react-aria-components";
+import y from "../../hooks/use-id.mjs";
+import { Icon as b } from "../icon/Icon.mjs";
 import { Spinner as B } from "../spinner/Spinner.mjs";
-import h from "../tooltip/Tooltip.mjs";
+import { Tooltip as h } from "../tooltip/Tooltip.mjs";
 import { iconButtonPrimary as I, iconButtonSecondary as N, iconButtonGhost as x } from "./IconButton.variants.mjs";
 const j = ({
   variant: o,
@@ -27,27 +27,28 @@ const j = ({
   isLoading: t
 });
 function C(o) {
-  const n = b(), { button: t, icon: r } = j(o), { onClick: s, icon: m, isLoading: l, label: i, isDisabled: a, iconRole: u, ...d } = o, c = `icon-button-label-${n}`;
-  return /* @__PURE__ */ e(h, { title: i, children: /* @__PURE__ */ f(
-    p,
+  const n = y(), { button: t, icon: r } = j(o), { onClick: s, icon: a, isLoading: l, label: e, isDisabled: m, iconRole: u, ...d } = o, c = `icon-button-label-${n}`;
+  return /* @__PURE__ */ i(h, { title: e, children: /* @__PURE__ */ p(
+    f,
     {
+      "data-dd-privacy": "allow",
+      ...d,
       className: t({ class: o.className }),
       onPress: s,
-      isDisabled: a || l,
-      "aria-label": i,
-      ...d,
+      isDisabled: m || l,
+      "aria-label": e,
       children: [
-        l ? /* @__PURE__ */ e(B, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-          y,
+        l ? /* @__PURE__ */ i(B, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ i(
+          b,
           {
             role: u,
-            src: m,
+            src: a,
             className: r(),
             "aria-labelledby": c,
             color: "inherit"
           }
         ),
-        /* @__PURE__ */ e("span", { id: c, className: "uy-sr-only", children: i })
+        /* @__PURE__ */ i("span", { id: c, className: "uy-sr-only", children: e })
       ]
     }
   ) });

package/dist/esm/components/input/Input.mjs

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
 import { Input as h } from "react-aria-components";
 import { useIntl as I } from "react-intl";
@@ -9,11 +9,11 @@ import { Spinner as O } from "../spinner/Spinner.mjs";
 const S = N({
   slots: {
     base: "uy-flex uy-h-500 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:uy-border-border-form-active",
-    prefix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-rounded-l-100 active:uy-border-border-form-active",
+    prefix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-border-solid uy-rounded-l-100 active:uy-border-border-form-active",
     inputWrapper: "uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 uy-max-w-full uy-justify-between",
-    input: "uy-w-full uy-max-w-full uy-flex-1 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-min-w-0 uy-max-w-full",
+    input: "uy-w-full uy-flex-1 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-min-w-0 uy-max-w-full",
     state: "uy-flex uy-gap-50 uy-items-center uy-shrink-0",
-    suffix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100 active:uy-border-border-form-active"
+    suffix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100 active:uy-border-border-form-active"
   },
   variants: {
     isInvalid: {
@@ -63,14 +63,14 @@ const S = N({
 }), j = v(
   ({
     type: s = "text",
-    prefix: d,
-    suffix: f,
-    isInvalid: l,
-    isLoading: r,
+    prefix: n,
+    suffix: i,
+    isInvalid: f,
+    isLoading: e,
     isDisabled: o,
     isReadOnly: u,
     onClearButtonPress: t,
-    ...i
+    ...l
   }, y) => {
     const a = I(), {
       base: b,
@@ -80,27 +80,28 @@ const S = N({
       state: x,
       suffix: g
     } = S({
-      isInvalid: !!l,
+      isInvalid: !!f,
       isReadOnly: !!u,
       isDisabled: !!o
-    }), w = i.value && !r && !u && !o;
-    return /* @__PURE__ */ n("div", { className: b(), children: [
-      d ? /* @__PURE__ */ e("span", { className: m(), children: d }) : null,
-      /* @__PURE__ */ n("div", { className: c(), children: [
-        /* @__PURE__ */ e(
+    }), w = l.value && !e && !u && !o;
+    return /* @__PURE__ */ d("div", { className: b(), children: [
+      n ? /* @__PURE__ */ r("span", { className: m(), children: n }) : null,
+      /* @__PURE__ */ d("div", { className: c(), children: [
+        /* @__PURE__ */ r(
           h,
           {
-            ...i,
+            "data-dd-privacy": "mask",
+            ...l,
             ref: y,
             type: s,
             className: p(),
-            "aria-busy": r,
+            "aria-busy": e,
             readOnly: u,
             disabled: o
           }
         ),
-        /* @__PURE__ */ n("div", { className: x(), children: [
-          r && /* @__PURE__ */ e(
+        /* @__PURE__ */ d("div", { className: x(), children: [
+          e && /* @__PURE__ */ r(
             O,
             {
               color: "inherit",
@@ -111,7 +112,7 @@ const S = N({
               })
             }
           ),
-          l && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ r(
             M,
             {
               src: "WarningCircleOutlined",
@@ -122,7 +123,7 @@ const S = N({
               })
             }
           ),
-          w && /* @__PURE__ */ e(
+          w && /* @__PURE__ */ r(
             W,
             {
               title: a.formatMessage({
@@ -138,7 +139,7 @@ const S = N({
           )
         ] })
       ] }),
-      f ? /* @__PURE__ */ e("span", { className: g(), children: f }) : null
+      i ? /* @__PURE__ */ r("span", { className: g(), children: i }) : null
     ] });
   }
 );

package/dist/esm/components/label/Label.mjs

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { forwardRef as m } from "react";
 import { mergeProps as u } from "react-aria";
 import { useSlottedContext as b, InputContext as g, Label as f } from "react-aria-components";
 import { tv as N } from "tailwind-variants";
@@ -22,7 +22,7 @@ const h = N({
   defaultVariants: {
     variant: "strong"
   }
-}), q = c(
+}), q = m(
   ({ children: n, ...a }, l) => {
     const e = b(g), i = u(
       { isRequired: e == null ? void 0 : e["aria-required"] },
@@ -30,21 +30,22 @@ const h = N({
     ), {
       isRequired: r = !1,
       requiredVariant: s = "required",
-      ...p
-    } = i, { base: y, asterisk: d, optionalTag: m } = h();
+      ...d
+    } = i, { base: p, asterisk: y, optionalTag: c } = h();
     return /* @__PURE__ */ o(
       f,
       {
-        ...p,
+        "data-dd-privacy": "allow",
+        ...d,
         ref: l,
-        className: y({ className: a.className }),
+        className: p({ className: a.className }),
         children: [
           n,
-          s === "required" && r && /* @__PURE__ */ o("span", { className: d(), children: [
+          s === "required" && r && /* @__PURE__ */ o("span", { className: y(), children: [
             "*",
             /* @__PURE__ */ t("span", { className: "uy-sr-only", children: "required" })
           ] }),
-          s === "optional" && !r && /* @__PURE__ */ t("span", { className: m({ className: a.className }), children: "(optional)" })
+          s === "optional" && !r && /* @__PURE__ */ t("span", { className: c({ className: a.className }), children: "(optional)" })
         ]
       }
     );

package/dist/esm/components/link/Link.d.mts

@@ -37,7 +37,7 @@ export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
 /**
  * Links allow users to navigate to different pages or sections.
  */
-declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
+declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
     /**
      * The URL the link navigates to.
      */

package/dist/esm/components/link/Link.mjs

@@ -1,38 +1,39 @@
 import { jsxs as f, jsx as k } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { IconSprite as g } from "@payfit/unity-icons";
-import { Link as v } from "react-aria-components";
-import { useRouter as x } from "../../providers/router/RouterProvider.mjs";
-import { link as w } from "./Link.variants.mjs";
+import { IconSprite as v } from "@payfit/unity-icons";
+import { Link as g } from "react-aria-components";
+import { useRouter as w } from "../../providers/router/RouterProvider.mjs";
+import { link as x } from "./Link.variants.mjs";
 import { isExternalUrl as L } from "./utils.mjs";
 const A = y(
   ({
     href: o,
-    children: s,
-    variant: m = "inline",
-    color: a = "primary",
+    children: a,
+    variant: s = "inline",
+    color: c = "primary",
     isDisabled: n = !1,
-    isCurrent: c = void 0,
+    isCurrent: m = void 0,
     isExternal: p,
     maxCharactersTruncation: t,
     ...r
-  }, u) => {
-    const l = x(), e = p ?? L(o), i = !e && l ? l.isActive(o.toString()) : c, d = w({
-      variant: m,
-      color: a,
+  }, d) => {
+    const l = w(), e = p ?? L(o), i = !e && l ? l.isActive(o.toString()) : m, u = x({
+      variant: s,
+      color: c,
       isDisabled: n,
       isTruncated: !!t
     });
     return /* @__PURE__ */ f(
-      v,
+      g,
       {
+        "data-dd-privacy": "allow",
         ...r,
         href: o,
-        ref: u,
+        ref: d,
         style: !!t ? {
           "--uy-link-max-w": `${t}ch`
         } : {},
-        className: d,
+        className: u,
         isDisabled: n,
         target: e ? "_blank" : r.target,
         rel: e && !r.rel ? "noopener noreferrer" : r.rel,
@@ -41,9 +42,9 @@ const A = y(
           "aria-current": i ? "page" : void 0
         },
         children: [
-          s,
+          a,
           e && /* @__PURE__ */ k(
-            g,
+            v,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",

package/dist/esm/components/menu/parts/MenuContent.mjs

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { Popover as n, Menu as s } from "react-aria-components";
+import { Popover as n, Menu as a } from "react-aria-components";
 function y({
   children: r,
   placement: o,
@@ -11,7 +11,8 @@ function y({
     {
       placement: o,
       className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
-      children: /* @__PURE__ */ u(s, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
+      "data-dd-privacy": "allow",
+      children: /* @__PURE__ */ u(a, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
     }
   );
 }

package/dist/esm/components/multi-select/MultiSelect.mjs

@@ -1,15 +1,15 @@
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as ye, useMemo as S, useCallback as d } from "react";
-import { ComboboxProvider as Se, SelectProvider as z } from "@ariakit/react";
-import { useComboboxFilter as pe } from "./hooks/use-combobox-filter.mjs";
-import { useMultiSelectionState as he } from "./hooks/use-multiselection-state.mjs";
+import { forwardRef as Se, useMemo as S, useCallback as d } from "react";
+import { ComboboxProvider as pe, SelectProvider as z } from "@ariakit/react";
+import { useComboboxFilter as he } from "./hooks/use-combobox-filter.mjs";
+import { useMultiSelectionState as ve } from "./hooks/use-multiselection-state.mjs";
 import { MultiSelectContext as J } from "./Multiselect.context.mjs";
 import { MultiSelectButton as U } from "./parts/MultiSelectButton.mjs";
 import { MultiSelectPopover as W } from "./parts/MultiSelectPopover.mjs";
 function X(t) {
   return t instanceof Map;
 }
-function ve(t) {
+function Ve(t) {
   return !Object.prototype.hasOwnProperty.call(t, "items");
 }
 function a(t) {
@@ -25,7 +25,7 @@ function Y(t) {
   return new Set(Z(t));
 }
 const $ = (t, w) => {
-  const o = ve(t), C = (e) => {
+  const o = Ve(t), C = (e) => {
     if (Object.hasOwnProperty.call(e, "value"))
       return e.value;
     if (Object.prototype.hasOwnProperty.call(e, "id"))
@@ -37,9 +37,9 @@ const $ = (t, w) => {
   }, ee = o ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((n) => C(n)).join(", "), m = t, O = t, c = S(
     () => o ? void 0 : m.items,
     [o, m.items]
-  ), r = o ? void 0 : m.getItemValue ?? C, te = t.renderValue ?? ee, { children: v } = o ? O : m, re = o ? void 0 : m.searchOptions, { children: g } = O, {
+  ), r = o ? void 0 : m.getItemValue ?? C, { children: v } = o ? O : m, te = o ? void 0 : m.searchOptions, { children: g } = O, {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: Ke,
+    children: Pe,
     value: V,
     defaultValue: f,
     onChange: b,
@@ -51,12 +51,13 @@ const $ = (t, w) => {
     isSearchable: h,
     placeholder: I,
     onClearButtonPress: F,
+    renderValue: re,
     maxVisibleItems: N = 7,
     ...B
-  } = t, y = d(() => o || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, o]), ne = d(() => {
+  } = t, ne = re ?? ee, y = d(() => o || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, o]), oe = d(() => {
     if ("value" in t)
       return V ? Y(V) : /* @__PURE__ */ new Set();
-  }, [t, V]), oe = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), se = d(
+  }, [t, V]), se = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), le = d(
     (e) => {
       if (!b) return;
       const n = new Set(
@@ -69,21 +70,21 @@ const $ = (t, w) => {
     selectedKeys: i,
     selectKey: L,
     unselectKey: T
-  } = he({
-    selectedKeys: ne(),
-    defaultSelectedKeys: oe(),
-    onSelectionChange: se
-  }), le = d(
+  } = ve({
+    selectedKeys: oe(),
+    defaultSelectedKeys: se(),
+    onSelectionChange: le
+  }), ae = d(
     (e) => {
       L(a(e));
     },
     [L]
-  ), ae = d(
+  ), ce = d(
     (e) => {
       T(a(e));
     },
     [T]
-  ), { setSearchQuery: ce, matchingItems: K } = pe({
+  ), { setSearchQuery: ie, matchingItems: K } = he({
     items: y(),
     extractSearchableText: (e) => o ? [""] : [
       a(
@@ -91,8 +92,8 @@ const $ = (t, w) => {
       )
     ],
     enabled: h,
-    searchOptions: re
-  }), ie = () => {
+    searchOptions: te
+  }), ue = () => {
     if (o) return Array.from(i);
     const e = y();
     return Array.from(i).map((n) => {
@@ -103,7 +104,7 @@ const $ = (t, w) => {
       );
       return l && r ? r(l) : p(n);
     });
-  }, ue = () => {
+  }, de = () => {
     if (o)
       return new Set(
         Array.from(i).map((l) => p(l))
@@ -117,32 +118,32 @@ const $ = (t, w) => {
       );
       s && n.add(s);
     }), n;
-  }, de = () => {
+  }, fe = () => {
     if (f)
       return Z(f);
-  }, P = S(ie, [
+  }, P = S(ue, [
     i,
     o,
     r,
     y
-  ]), G = S(ue, [
+  ]), G = S(de, [
     i,
     o,
     r,
     y
-  ]), k = S(de, [f]), E = (e) => {
+  ]), k = S(fe, [f]), E = (e) => {
     const n = new Set(e), l = new Set(
       P.map((s) => a(s))
     );
     for (const s of n)
-      l.has(s) || le(p(s));
+      l.has(s) || ae(p(s));
     for (const s of l)
-      n.has(s) || ae(p(s));
+      n.has(s) || ce(p(s));
   }, H = d(() => o ? g : c ? X(c) ? Array.from(c.entries()).map(([e, n]) => {
     const l = n.filter(
       (s) => K.some((A) => {
-        const fe = (r == null ? void 0 : r(s)) || "", me = (r == null ? void 0 : r(A)) || "";
-        return a(me) === a(fe);
+        const me = (r == null ? void 0 : r(s)) || "", ye = (r == null ? void 0 : r(A)) || "";
+        return a(ye) === a(me);
       })
     );
     return v(e, l);
@@ -150,8 +151,8 @@ const $ = (t, w) => {
     (e) => v(
       e
     )
-  ) : null, [v, c, K, g, r, o]), Q = S(() => H(), [H]), _ = te;
-  return h ? /* @__PURE__ */ u(Se, { resetValueOnHide: !0, setValue: ce, children: /* @__PURE__ */ u(
+  ) : null, [v, c, K, g, r, o]), Q = S(() => H(), [H]), _ = ne;
+  return h ? /* @__PURE__ */ u(pe, { resetValueOnHide: !0, setValue: ie, children: /* @__PURE__ */ u(
     z,
     {
       value: P.map(
@@ -222,9 +223,9 @@ const $ = (t, w) => {
   );
 };
 $.displayName = "MultiSelect";
-const je = ye(
+const De = Se(
   $
 );
 export {
-  je as MultiSelect
+  De as MultiSelect
 };