@payfit/unity-components 2.46.12 → 2.46.13

package/dist/esm/components/app-menu/parts/AppMenuFooter.js

@@ -1,247 +0,0 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useState as v, useRef as C, isValidElement as I, cloneElement as O } from "react";
-import { uyMerge as g } from "@payfit/unity-themes";
-import { FormattedMessage as h, useIntl as V } from "react-intl";
-import { Actionable as w } from "../../actionable/Actionable.js";
-import { Avatar as z } from "../../avatar/Avatar.js";
-import { AvatarFallback as F } from "../../avatar/parts/AvatarFallback.js";
-import { AvatarImage as H } from "../../avatar/parts/AvatarImage.js";
-import { Badge as j } from "../../badge/Badge.js";
-import { Icon as x } from "../../icon/Icon.js";
-import { Menu as k } from "../../menu/Menu.js";
-import { MenuContent as E } from "../../menu/parts/MenuContent.js";
-import { MenuHeader as S } from "../../menu/parts/MenuHeader.js";
-import { MenuTrigger as B } from "../../menu/parts/MenuTrigger.js";
-import { useAppMenuContext as R } from "./AppMenu.context.js";
-const M = (t) => /* @__PURE__ */ n(
-  z,
-  {
-    "aria-label": `${t.title} avatar`,
-    size: "md",
-    variant: "square",
-    "aria-labelledby": "profile-button-label",
-    children: [
-      /* @__PURE__ */ e(H, { src: t.avatar, alt: t.title ?? "" }),
-      /* @__PURE__ */ e(F, { variant: "initials", delayMs: 100, children: t.title }),
-      t.avatarPair && I(t.avatarPair) && O(t.avatarPair, {
-        isHidden: !t.isPairAvatarVisible
-      })
-    ]
-  }
-), q = ({
-  avatar: t,
-  avatarPair: r,
-  title: u,
-  uploadAvatarCallback: d,
-  uploadAvatarLabel: s,
-  uploadAvatarDescription: i
-}) => {
-  const [o, l] = v(!0), c = V(), a = () => {
-    r && l((m) => !m);
-  }, y = g(
-    "uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"
-  );
-  return /* @__PURE__ */ n(
-    w,
-    {
-      "aria-describedby": "profile-picture-change-desc",
-      "aria-label": s || c.formatMessage({
-        id: "unity:component:app-menu:footer:profile-button:avatar:change",
-        defaultMessage: "Change profile picture"
-      }),
-      className: y,
-      onHoverStart: a,
-      onHoverEnd: a,
-      onFocus: a,
-      onBlur: a,
-      onPress: () => {
-        d?.();
-      },
-      children: [
-        /* @__PURE__ */ e(
-          M,
-          {
-            avatar: t,
-            avatarPair: r,
-            title: u,
-            isPairAvatarVisible: o
-          }
-        ),
-        /* @__PURE__ */ n("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-90 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-75 uy:absolute uy:top-0 uy:left-0 uy:w-full uy:h-full uy:transition-all uy:duration-200 uy:items-center uy:justify-center", children: [
-          /* @__PURE__ */ e(
-            x,
-            {
-              alt: "Camera",
-              color: "content.inverted",
-              size: 24,
-              src: "CameraOutlined"
-            }
-          ),
-          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: i || /* @__PURE__ */ e(
-            h,
-            {
-              id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
-              defaultMessage: "Press enter to change profile picture"
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-}, b = ({
-  asMenuHeader: t = !1,
-  avatar: r,
-  avatarPair: u,
-  badgeLabel: d,
-  description: s,
-  menuTriggerDescription: i,
-  title: o,
-  uploadAvatarCallback: l,
-  uploadAvatarLabel: c,
-  uploadAvatarDescription: a
-}) => /* @__PURE__ */ n("div", { className: "uy:min-w-[240px] uy:w-full uy:flex uy:items-center", children: [
-  /* @__PURE__ */ e("div", { className: "uy:mr-150 uy:flex uy:items-center", children: l ? /* @__PURE__ */ e(
-    q,
-    {
-      avatar: r,
-      avatarPair: u,
-      title: o,
-      uploadAvatarLabel: c,
-      uploadAvatarDescription: a,
-      uploadAvatarCallback: l
-    }
-  ) : /* @__PURE__ */ e(
-    M,
-    {
-      avatar: r,
-      avatarPair: u,
-      title: o,
-      isPairAvatarVisible: !0
-    }
-  ) }),
-  /* @__PURE__ */ n("div", { className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow", children: [
-    /* @__PURE__ */ e(
-      "span",
-      {
-        id: "profile-button-label",
-        className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
-        "data-dd-privacy": "mask",
-        children: o
-      }
-    ),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: "uy:typography-body-small uy:text-content-neutral-low",
-        "data-dd-privacy": "allow",
-        children: s
-      }
-    ),
-    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: i || /* @__PURE__ */ e(
-      h,
-      {
-        id: "unity:component:app-menu:footer:profile-button:description",
-        defaultMessage: "Press this button to open the profile menu."
-      }
-    ) })
-  ] }),
-  /* @__PURE__ */ e("div", { className: "uy:p-100", children: t ? /* @__PURE__ */ e(j, { className: "uy:capitalize", variant: "neutral", children: d }) : /* @__PURE__ */ e(
-    x,
-    {
-      src: "CaretUpDownOutlined",
-      alt: "open",
-      size: 20,
-      color: "content.neutral.low"
-    }
-  ) })
-] }), te = ({
-  avatar: t,
-  avatarPair: r,
-  badgeLabel: u,
-  children: d,
-  computeSlot: s,
-  description: i,
-  title: o,
-  menuTriggerDescription: l,
-  uploadAvatarCallback: c,
-  uploadAvatarLabel: a,
-  uploadAvatarDescription: y,
-  updateNotificationSlot: m
-}) => {
-  const { isMobileMenuOpen: N } = R(), [P, f] = v(!1), p = C(null), A = g(
-    "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-10 uy:bg-canvas",
-    "uy:p-150",
-    "uy:md:static uy:md:mt-auto uy:md:p-0 uy:md:bg-[transparent]",
-    "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block"
-  );
-  return /* @__PURE__ */ n(
-    "aside",
-    {
-      className: A,
-      "data-mobile-open": N,
-      id: "app-menu-profile-button",
-      children: [
-        s,
-        m,
-        /* @__PURE__ */ n(
-          k,
-          {
-            isOpen: P,
-            onOpenChange: f,
-            placement: "top left",
-            triggerRef: p,
-            children: [
-              /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(
-                w,
-                {
-                  ref: p,
-                  className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:theme-legacy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:theme-rebrand:not-aria-disabled:hover:bg-surface-neutral-lowest-hover uy:theme-legacy:not-aria-disabled:active:bg-surface-neutral-low-active uy:theme-rebrand:not-aria-disabled:active:bg-surface-neutral-lowest-active uy:theme-legacy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-rebrand:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
-                  "aria-labelledby": "profile-button-label",
-                  "aria-describedby": "profile-button-description",
-                  onPress: () => {
-                    f(!0);
-                  },
-                  children: /* @__PURE__ */ e(
-                    b,
-                    {
-                      avatar: t,
-                      avatarPair: r,
-                      badgeLabel: u,
-                      description: i,
-                      menuTriggerDescription: l,
-                      title: o,
-                      uploadAvatarCallback: c,
-                      uploadAvatarLabel: a,
-                      uploadAvatarDescription: y
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ n(E, { width: 312, children: [
-                /* @__PURE__ */ e(S, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
-                  b,
-                  {
-                    asMenuHeader: !0,
-                    avatar: t,
-                    avatarPair: r,
-                    badgeLabel: u,
-                    description: i,
-                    menuTriggerDescription: l,
-                    title: o,
-                    uploadAvatarCallback: c,
-                    uploadAvatarLabel: a,
-                    uploadAvatarDescription: y
-                  }
-                ) }),
-                d
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  te as AppMenuFooter
-};

package/dist/esm/components/app-menu/parts/AppMenuHeader.d.ts

@@ -1,91 +0,0 @@
-import { ReactNode } from 'react';
-export interface AppMenuHeaderProps {
-    /**
-     * The application environment. Determines which brand logo variant to display.
-     */
-    environment: 'prod' | 'staging' | 'dev' | 'local';
-    /**
-     * Accessible label for the brand logo link.
-     */
-    brandLabel: string;
-    /**
-     * Optional notification component to display in the header.
-     */
-    notificationsComponent?: ReactNode;
-    /**
-     * Optional search component to display in the header.
-     */
-    searchComponent?: ReactNode;
-    /**
-     * Render function for the brand logo link. Enables integration with any routing library.
-     * Provides href and children (the logo component) for flexible link implementation.
-     * Defaults to React Aria's Link component, which works with Unity's RouterProvider for router-agnostic behavior.
-     * @example
-     * ```tsx
-     * // With Tanstack Router
-     * import { Link } from '@tanstack/react-router'
-     *
-     * <AppMenuHeader
-     *   renderLink={({ href, children }) => (
-     *     <Link to={href}>{children}</Link>
-     *   )}
-     * />
-     *
-     * // With React Router v5/v6
-     * import { Link } from 'react-router-dom'
-     *
-     * <AppMenuHeader
-     *   renderLink={({ href, children }) => (
-     *     <Link to={href}>{children}</Link>
-     *   )}
-     * />
-     *
-     * // With plain HTML link
-     * <AppMenuHeader
-     *   renderLink={({ href, children }) => (
-     *     <a href={href}>{children}</a>
-     *   )}
-     * />
-     * ```
-     */
-    renderLink?: (props: {
-        children: ReactNode;
-    }) => ReactNode;
-}
-/**
- * The header section of the AppMenu component, displaying the PayFit brand logo, search, and notifications.
- * Provides a router-agnostic approach through a render prop pattern for the brand logo link.
- * @param props - Component props
- * @param props.environment - The application environment (determines brand logo variant)
- * @param props.brandLabel - Accessible label for the brand logo link
- * @param props.notificationsComponent - Optional notification component to display
- * @param props.searchComponent - Optional search component to display
- * @param props.renderLink - Optional render function for custom link implementation
- * @example
- * ```tsx
- * import { AppMenuHeader } from '@payfit/unity-components'
- *
- * function AppShell() {
- *   return (
- *     <AppMenu>
- *       <AppMenuHeader
- *         environment="production"
- *         linkHref="/"
- *         linkLabel="PayFit Home"
- *       />
- *     </AppMenu>
- *   )
- * }
- * ```
- * @remarks
- * - The brand logo automatically adapts based on the environment prop (production displays standard logo, others display pre-production variants)
- * - By default, uses React Aria's Link component which integrates with Unity's RouterProvider
- * - For router-specific implementations, pass a custom `renderLink` function with your router's Link component
- * - On mobile viewports, displays a menu toggle button; on desktop, displays the brand logo with optional search and notifications
- * @see {@link AppMenuHeaderProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/app-menu GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
- * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
- */
-export declare const AppMenuHeader: ({ environment, brandLabel: linkLabel, notificationsComponent, searchComponent, renderLink, }: AppMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-menu/parts/AppMenuHeader.js

@@ -1,51 +0,0 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Link as m } from "react-aria-components/Link";
-import { useIntl as c } from "react-intl";
-import { useBreakpointListener as y, isMobileBreakpoint as f } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as h } from "../../button/Button.js";
-import { PayFitBrand as b } from "../../payfit-brand/PayFitBrand.js";
-import { PayFitBrandPreprod as g } from "../../payfit-brand/PayFitPreprod.js";
-import { useAppMenuContext as x } from "./AppMenu.context.js";
-const j = ({
-  environment: r,
-  brandLabel: i,
-  notificationsComponent: t,
-  searchComponent: l,
-  renderLink: s = ({ children: n }) => /* @__PURE__ */ e(m, { href: "/", children: n })
-}) => {
-  const { isMobileMenuOpen: n, toggleMobileMenu: p } = x(), d = c(), u = y(), a = f(u);
-  return /* @__PURE__ */ o("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
-    /* @__PURE__ */ o("div", { className: "uy:flex uy:items-center", children: [
-      /* @__PURE__ */ e("div", { className: "uy:flex-1", children: s({ children: r === "prod" ? /* @__PURE__ */ e(
-        b,
-        {
-          label: i,
-          width: a ? 36 : 104,
-          showOnlyMonogram: a
-        }
-      ) : /* @__PURE__ */ e(g, { label: i, env: r }) }) }),
-      /* @__PURE__ */ o("div", { className: "uy:flex uy:gap-150 uy:items-center", children: [
-        t,
-        /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ e(
-          h,
-          {
-            variant: "ghost",
-            color: "neutral",
-            prefixIcon: n ? "CloseOutlined" : "ListOutlined",
-            onPress: p,
-            "aria-expanded": n,
-            "aria-controls": "app-menu-nav-container app-menu-profile-button",
-            children: d.formatMessage({
-              id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
-              defaultMessage: n ? "Close navigation" : "Open navigation"
-            })
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "uy:hidden uy:md:flex", children: l })
-  ] });
-};
-export {
-  j as AppMenuHeader
-};

package/dist/esm/components/app-menu/parts/AppMenuNavContent.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export type AppMenuNavContentProps = {
-    children: ReactNode;
-};
-export declare const AppMenuNavContent: ({ children }: AppMenuNavContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-menu/parts/AppMenuNavContent.js

@@ -1,23 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { uyMerge as y } from "@payfit/unity-themes";
-import { useAppMenuContext as a } from "./AppMenu.context.js";
-const r = ({ children: e }) => {
-  const { isMobileMenuOpen: u } = a(), o = y(
-    "uy:flex-col uy:overflow-y-auto uy:overflow-x-hidden uy:gap-y-100 uy:pl-200 uy:pr-200 uy:pb-200 uy:scroll-py-100 uy:md:flex",
-    "uy:bg-canvas uy:md:bg-[transparent]",
-    "uy:absolute uy:top-800 uy:left-0 uy:right-0 uy:z-10 uy:h-svh uy:md:static uy:md:w-auto uy:md:pl-50 uy:md:pr-50 uy:md:pb-50",
-    "uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:flex uy:data-[mobile-open=true]:flex"
-  );
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: o,
-      "data-mobile-open": u,
-      id: "app-menu-nav-container",
-      children: e
-    }
-  );
-};
-export {
-  r as AppMenuNavContent
-};

package/dist/esm/components/autocomplete/Autocomplete.d.ts

@@ -1,87 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { LoadingState } from '@react-types/shared';
-import { ForwardedRef, ReactNode } from 'react';
-import { ComboBoxProps, ListBoxProps } from 'react-aria-components/ComboBox';
-declare const autocomplete: import('tailwind-variants').TVReturnType<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-}, undefined, {
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface AutocompleteProps<T extends object> extends Omit<ComboBoxProps<T>, 'className' | 'style' | 'children' | 'onSelectionChange'>, VariantProps<typeof autocomplete> {
-    /** Custom placeholder text for the search input */
-    placeholder?: string;
-    /** In dynamic mode, contains the items to display in the search results */
-    items?: ListBoxProps<T>['items'];
-    /** In static mode, contains <AutocompleteItem /> components, in dynamic mode, contains a function to render items passed to the component */
-    children: ListBoxProps<T>['children'];
-    /** Whether the search is currently loading results */
-    loadingState?: LoadingState;
-    /** The name of the search field, used for form submission */
-    name: string;
-    /** Feedback text to display below the autocomplete field. */
-    feedbackText?: ReactNode;
-}
-type AutocompleteComponent = (<TItems extends object>(props: AutocompleteProps<TItems> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `Autocomplete` component is used to create a searchable input field with a dropdown list of results.
- * It allows users to search through a collection of items and select one.
- */
-declare const Autocomplete: AutocompleteComponent;
-export { Autocomplete };

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

@@ -1,169 +0,0 @@
-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);
-});
-q.displayName = "Autocomplete";
-export {
-  q as Autocomplete
-};