@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/autocomplete/Autocomplete.js

@@ -1,169 +1,137 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { forwardRef as R, useRef as A, useState as O, useCallback as W } from "react";
-import { uyTv as k } from "@payfit/unity-themes";
-import { ComboBox as C, Input as z } from "react-aria-components/ComboBox";
-import { useId as T } from "react-aria/useId";
-import { useIntl as j } from "react-intl";
-import { useResizeObserver as B } from "usehooks-ts";
-import { Icon as y } from "../icon/Icon.js";
-import { Spinner as D } from "../spinner/Spinner.js";
-import { Text as P } from "../text/Text.js";
-import { AutocompleteClearButton as E } from "./parts/AutocompleteClearButton.js";
-import { AutocompletePanel as G } from "./parts/AutocompletePanel.js";
-const L = k({
-  slots: {
-    base: [
-      "uy:group uy:transition-colors uy:w-full uy:flex uy:gap-100 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
-      "uy:enabled:bg-surface-form-high-enabled",
-      'uy:has-data-[focus-visible="true"]:outline-none uy:has-data-[focus-visible="true"]:ring-2 uy:has-data-[focus-visible="true"]:ring-utility-focus-ring uy:has-data-[focus-visible="true"]:ring-offset-2 uy:has-data-[focus-visible="true"]:bg-surface-form-high-focus',
-      "uy:active:border uy:active:border-solid uy:active:border-border-form-active",
-      "uy:data-[disabled=true]:border uy:data-[disabled=true]:border-solid uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-high-disabled",
-      "uy:data-[invalid=true]:border uy:data-[invalid=true]:border-solid uy:data-[invalid=true]:border-border-form-error uy: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:data-[hovered]:text-content-form-hover",
-      "uy:data-[focus-visible]:text-content-form-focus",
-      "uy:active:text-content-form-active",
-      "uy:group-data-[invalid=true]:bg-surface-form-high-error"
-    ],
-    icon: [
-      "uy:self-center",
-      "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
-    ],
-    invalidIcon: [
-      "uy:self-center uy:hidden",
-      "uy:group-data-[invalid=true]:block"
-    ],
-    wrapperState: ["uy:flex uy:items-center uy:gap-50"]
-  },
-  variants: {
-    isReadOnly: {
-      true: {
-        base: "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-high-disabled",
-        icon: "uy:text-content-neutral-lowest-disabled",
-        input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
-      },
-      false: {
-        base: [
-          "uy:bg-surface-form-high-enabled",
-          "uy:has-data-[hovered]:bg-surface-form-high-hover uy:data-[disabled=true]:cursor-not-allowed"
-        ],
-        icon: "uy:text-content-neutral-lowest",
-        input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest uy:group-data-[disabled=true]:cursor-not-allowed"
-      }
-    }
-  }
-}), U = ({
-  intl: a,
-  placeholder: r,
-  isDisabled: o
-}) => o ? "" : r || a.formatMessage({
-  id: "unity:component:autocomplete:placeholder",
-  defaultMessage: "Search"
-}), $ = (a, r) => {
-  const {
-    placeholder: o,
-    isDisabled: d,
-    isInvalid: l,
-    isReadOnly: u,
-    items: f,
-    children: m,
-    loadingState: n,
-    name: b,
-    feedbackText: p,
-    ...h
-  } = a, i = j(), t = A(null), [g, v] = O(null), c = T(), x = W(() => {
-    t.current && v(`${t.current.offsetWidth}px`);
-  }, [t]);
-  B({ ref: t, onResize: x });
-  const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S } = L({
-    isReadOnly: u
-  });
-  return /* @__PURE__ */ s("search", { ref: r, children: [
-    /* @__PURE__ */ s(
-      C,
-      {
-        className: w(),
-        name: b,
-        isInvalid: l,
-        isDisabled: d || u,
-        isReadOnly: u,
-        ref: t,
-        "aria-label": i.formatMessage({
-          id: "unity:component:autocomplete:placeholder",
-          defaultMessage: "Search"
-        }),
-        items: f,
-        ...h,
-        children: [
-          /* @__PURE__ */ e(
-            y,
-            {
-              src: "MagnifyingGlassOutlined",
-              className: M(),
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ e(
-            z,
-            {
-              className: I(),
-              "aria-describedby": c,
-              placeholder: U({ intl: i, placeholder: o, isDisabled: d })
-            }
-          ),
-          /* @__PURE__ */ s("div", { className: S(), children: [
-            /* @__PURE__ */ e(
-              y,
-              {
-                className: N(),
-                src: "WarningCircleOutlined",
-                color: "content.form.invalid",
-                alt: i.formatMessage({
-                  id: "unity:component:form-field:form-input:error:alt",
-                  defaultMessage: "Error"
-                })
-              }
-            ),
-            n && n !== "error" && n !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
-              D,
-              {
-                label: i.formatMessage({
-                  id: "unity:component:common:loading:label",
-                  defaultMessage: "Loading..."
-                }),
-                color: "primary",
-                size: "small",
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ e(
-              E,
-              {
-                isReadOnly: u,
-                isDisabled: d
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e(G, { panelWidth: g, searchRef: t, children: m })
-        ]
-      }
-    ),
-    l && /* @__PURE__ */ e(
-      P,
-      {
-        id: c,
-        className: "uy:typography-body-small-strong uy:text-content-form-invalid",
-        children: p
-      }
-    )
-  ] });
-}, q = R(function(r, o) {
-  return $(r, o);
+import { Icon as e } from "../icon/Icon.js";
+import { Spinner as t } from "../spinner/Spinner.js";
+import { Text as n } from "../text/Text.js";
+import { AutocompleteClearButton as r } from "./parts/AutocompleteClearButton.js";
+import { AutocompletePanel as i } from "./parts/AutocompletePanel.js";
+import { forwardRef as a, useCallback as o, useRef as s, useState as c } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useIntl as f } from "react-intl";
+import { useResizeObserver as p } from "usehooks-ts";
+import { ComboBox as m, Input as h } from "react-aria-components/ComboBox";
+import { useId as g } from "react-aria/useId";
+//#region src/components/autocomplete/Autocomplete.tsx
+var _ = l({
+	slots: {
+		base: [
+			"uy:group uy:transition-colors uy:w-full uy:flex uy:gap-100 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
+			"uy:enabled:bg-surface-form-high-enabled",
+			"uy:has-data-[focus-visible=\"true\"]:outline-none uy:has-data-[focus-visible=\"true\"]:ring-2 uy:has-data-[focus-visible=\"true\"]:ring-utility-focus-ring uy:has-data-[focus-visible=\"true\"]:ring-offset-2 uy:has-data-[focus-visible=\"true\"]:bg-surface-form-high-focus",
+			"uy:active:border uy:active:border-solid uy:active:border-border-form-active",
+			"uy:data-[disabled=true]:border uy:data-[disabled=true]:border-solid uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-high-disabled",
+			"uy:data-[invalid=true]:border uy:data-[invalid=true]:border-solid uy:data-[invalid=true]:border-border-form-error uy: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:data-[hovered]:text-content-form-hover",
+			"uy:data-[focus-visible]:text-content-form-focus",
+			"uy:active:text-content-form-active",
+			"uy:group-data-[invalid=true]:bg-surface-form-high-error"
+		],
+		icon: ["uy:self-center", "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"],
+		invalidIcon: ["uy:self-center uy:hidden", "uy:group-data-[invalid=true]:block"],
+		wrapperState: ["uy:flex uy:items-center uy:gap-50"]
+	},
+	variants: { isReadOnly: {
+		true: {
+			base: "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-high-disabled",
+			icon: "uy:text-content-neutral-lowest-disabled",
+			input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
+		},
+		false: {
+			base: ["uy:bg-surface-form-high-enabled", "uy:has-data-[hovered]:bg-surface-form-high-hover uy:data-[disabled=true]:cursor-not-allowed"],
+			icon: "uy:text-content-neutral-lowest",
+			input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest uy:group-data-[disabled=true]:cursor-not-allowed"
+		}
+	} }
+}), v = ({ intl: e, placeholder: t, isDisabled: n }) => n ? "" : t || e.formatMessage({
+	id: "unity:component:autocomplete:placeholder",
+	defaultMessage: "Search"
+}), y = (a, l) => {
+	let { placeholder: y, isDisabled: b, isInvalid: x, isReadOnly: S, items: C, children: w, loadingState: T, name: E, feedbackText: D, ...O } = a, k = f(), A = s(null), [j, M] = c(null), N = g();
+	p({
+		ref: A,
+		onResize: o(() => {
+			A.current && M(`${A.current.offsetWidth}px`);
+		}, [A])
+	});
+	let { base: P, input: F, icon: I, invalidIcon: L, wrapperState: R } = _({ isReadOnly: S });
+	return /* @__PURE__ */ d("search", {
+		ref: l,
+		children: [/* @__PURE__ */ d(m, {
+			className: P(),
+			name: E,
+			isInvalid: x,
+			isDisabled: b || S,
+			isReadOnly: S,
+			ref: A,
+			"aria-label": k.formatMessage({
+				id: "unity:component:autocomplete:placeholder",
+				defaultMessage: "Search"
+			}),
+			items: C,
+			...O,
+			children: [
+				/* @__PURE__ */ u(e, {
+					src: "MagnifyingGlassOutlined",
+					className: I(),
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ u(h, {
+					className: F(),
+					"aria-describedby": N,
+					placeholder: v({
+						intl: k,
+						placeholder: y,
+						isDisabled: b
+					})
+				}),
+				/* @__PURE__ */ d("div", {
+					className: R(),
+					children: [
+						/* @__PURE__ */ u(e, {
+							className: L(),
+							src: "WarningCircleOutlined",
+							color: "content.form.invalid",
+							alt: k.formatMessage({
+								id: "unity:component:form-field:form-input:error:alt",
+								defaultMessage: "Error"
+							})
+						}),
+						T && T !== "error" && T !== "idle" && /* @__PURE__ */ u("span", {
+							className: "uy:px-50",
+							children: /* @__PURE__ */ u(t, {
+								label: k.formatMessage({
+									id: "unity:component:common:loading:label",
+									defaultMessage: "Loading..."
+								}),
+								color: "primary",
+								size: "small",
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ u(r, {
+							isReadOnly: S,
+							isDisabled: b
+						})
+					]
+				}),
+				/* @__PURE__ */ u(i, {
+					panelWidth: j,
+					searchRef: A,
+					children: w
+				})
+			]
+		}), x && /* @__PURE__ */ u(n, {
+			id: N,
+			className: "uy:typography-body-small-strong uy:text-content-form-invalid",
+			children: D
+		})]
+	});
+}, b = a(function(e, t) {
+	return y(e, t);
 });
-q.displayName = "Autocomplete";
-export {
-  q as Autocomplete
-};
+b.displayName = "Autocomplete";
+//#endregion
+export { b as Autocomplete };

package/dist/esm/components/autocomplete/parts/AutocompleteClearButton.js

@@ -1,35 +1,25 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useContext as u } from "react";
-import { uyMerge as m } from "@payfit/unity-themes";
+import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
+import { useContext as t } from "react";
+import { uyMerge as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
 import { ComboBoxStateContext as a } from "react-aria-components/ComboBox";
-import { useIntl as s } from "react-intl";
-import { CircularIconButton as i } from "../../icon-button/CircularIconButton.js";
-const c = ({
-  className: e,
-  isReadOnly: o,
-  isDisabled: n
-}) => {
-  const t = u(a), r = s();
-  return !t?.inputValue || o || n ? null : /* @__PURE__ */ l(
-    i,
-    {
-      slot: null,
-      title: r.formatMessage({
-        id: "unity:component:common:clear:title",
-        defaultMessage: "Clear"
-      }),
-      className: m(
-        e,
-        "uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"
-      ),
-      icon: "CloseOutlined",
-      onPress: () => {
-        t.setSelectedKey(null);
-      }
-    }
-  );
-};
-c.displayName = "ClearButton";
-export {
-  c as AutocompleteClearButton
+//#region src/components/autocomplete/parts/AutocompleteClearButton.tsx
+var o = ({ className: o, isReadOnly: s, isDisabled: c }) => {
+	let l = t(a), u = i();
+	return !l?.inputValue || s || c ? null : /* @__PURE__ */ r(e, {
+		slot: null,
+		title: u.formatMessage({
+			id: "unity:component:common:clear:title",
+			defaultMessage: "Clear"
+		}),
+		className: n(o, "uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"),
+		icon: "CloseOutlined",
+		onPress: () => {
+			l.setSelectedKey(null);
+		}
+	});
 };
+o.displayName = "ClearButton";
+//#endregion
+export { o as AutocompleteClearButton };

package/dist/esm/components/autocomplete/parts/AutocompleteItem.js

@@ -1,36 +1,28 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { ListBoxItem as d } from "react-aria-components/ListBox";
-const i = n({
-  base: [
-    "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
-    "uy:enabled:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
-    "uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed",
-    'uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring uy:data-[focus-visible="true"]:bg-surface-neutral-focus uy:data-[focus-visible="true"]:text-content-neutral-focus',
-    "uy:data-[disabled]:text-content-neutral-disabled"
-  ],
-  variants: {
-    isDisabled: {
-      false: 'uy:data-[hovered="true"]:bg-surface-neutral-hover',
-      true: "uy:cursor-not-allowed"
-    }
-  }
-}), y = l(
-  ({ children: e, isDisabled: t, textValue: u, ...a }, r) => /* @__PURE__ */ s(
-    d,
-    {
-      ...a,
-      isDisabled: t,
-      textValue: u,
-      ref: r,
-      className: ({ isDisabled: o }) => i({ isDisabled: o }),
-      children: e
-    }
-  )
-);
-y.displayName = "AutocompleteItem";
-export {
-  y as AutocompleteItem,
-  i as autocompleteItem
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { ListBoxItem as r } from "react-aria-components/ListBox";
+//#region src/components/autocomplete/parts/AutocompleteItem.tsx
+var i = t({
+	base: [
+		"uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
+		"uy:enabled:bg-surface-neutral-enabled uy:enabled:text-content-neutral-enabled",
+		"uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed",
+		"uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring uy:data-[focus-visible=\"true\"]:bg-surface-neutral-focus uy:data-[focus-visible=\"true\"]:text-content-neutral-focus",
+		"uy:data-[disabled]:text-content-neutral-disabled"
+	],
+	variants: { isDisabled: {
+		false: "uy:data-[hovered=\"true\"]:bg-surface-neutral-hover",
+		true: "uy:cursor-not-allowed"
+	} }
+}), a = e(({ children: e, isDisabled: t, textValue: a, ...o }, s) => /* @__PURE__ */ n(r, {
+	...o,
+	isDisabled: t,
+	textValue: a,
+	ref: s,
+	className: ({ isDisabled: e }) => i({ isDisabled: e }),
+	children: e
+}));
+a.displayName = "AutocompleteItem";
+//#endregion
+export { a as AutocompleteItem, i as autocompleteItem };

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.js

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

package/dist/esm/components/autocomplete/parts/AutocompletePanel.js

@@ -1,48 +1,46 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { uyTv as y } from "@payfit/unity-themes";
-import { ListBox as m } from "react-aria-components/ListBox";
-import { Popover as c } from "react-aria-components/Popover";
-import { FormattedMessage as d } from "react-intl";
-import { Icon as p } from "../../icon/Icon.js";
+import { Icon as e } from "../../icon/Icon.js";
 import { Text as t } from "../../text/Text.js";
-const f = y({
-  slots: {
-    base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-300",
-    list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
-  }
-}), g = () => /* @__PURE__ */ i("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]", children: [
-  /* @__PURE__ */ e(
-    t,
-    {
-      variant: "body",
-      className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
-      children: /* @__PURE__ */ e(p, { size: 24, src: "MagnifyingGlassOutlined" })
-    }
-  ),
-  /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
-    d,
-    {
-      id: "unity:component:autocomplete:panel:empty:label",
-      defaultMessage: "No results found"
-    }
-  ) })
-] }), h = (r) => {
-  const { children: o, panelWidth: s, searchRef: u, ...a } = r, { base: l, list: n } = f();
-  return /* @__PURE__ */ e(
-    c,
-    {
-      ...a,
-      className: l(),
-      offset: 1,
-      triggerRef: u,
-      isNonModal: !0,
-      style: { "--trigger-width": s },
-      children: /* @__PURE__ */ e(m, { className: n(), renderEmptyState: g, children: o })
-    }
-  );
-};
-h.displayName = "AutocompletePanel";
-export {
-  h as AutocompletePanel,
-  f as autocompletePanel
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { FormattedMessage as a } from "react-intl";
+import { ListBox as o } from "react-aria-components/ListBox";
+import { Popover as s } from "react-aria-components/Popover";
+//#region src/components/autocomplete/parts/AutocompletePanel.tsx
+var c = n({ slots: {
+	base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-300",
+	list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
+} }), l = () => /* @__PURE__ */ i("div", {
+	className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]",
+	children: [/* @__PURE__ */ r(t, {
+		variant: "body",
+		className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+		children: /* @__PURE__ */ r(e, {
+			size: 24,
+			src: "MagnifyingGlassOutlined"
+		})
+	}), /* @__PURE__ */ r(t, {
+		variant: "bodyLarge",
+		children: /* @__PURE__ */ r(a, {
+			id: "unity:component:autocomplete:panel:empty:label",
+			defaultMessage: "No results found"
+		})
+	})]
+}), u = (e) => {
+	let { children: t, panelWidth: n, searchRef: i, ...a } = e, { base: u, list: d } = c();
+	return /* @__PURE__ */ r(s, {
+		...a,
+		className: u(),
+		offset: 1,
+		triggerRef: i,
+		isNonModal: !0,
+		style: { "--trigger-width": n },
+		children: /* @__PURE__ */ r(o, {
+			className: d(),
+			renderEmptyState: l,
+			children: t
+		})
+	});
 };
+u.displayName = "AutocompletePanel";
+//#endregion
+export { u as AutocompletePanel };