@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/alert/Alert.js

@@ -1,13 +1,13 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b } from "react";
 import { uyTv as g } from "@payfit/unity-themes";
-import { CircularIconButton as m } from "../icon-button/CircularIconButton.js";
-import { Icon as p } from "../icon/Icon.js";
-const w = g({
+import { CircularIconButton as a } from "../icon-button/CircularIconButton.js";
+import { Icon as w } from "../icon/Icon.js";
+const p = g({
   slots: {
-    base: "uy:p-200 uy:flex uy:gap-200 uy:border uy:border-solid uy:rounded-100",
-    content: "uy:flex uy:flex-col uy:flex-1 uy:gap-200 uy:pt-50 uy:pb-100",
-    icon: "uy:mt-50"
+    base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
+    content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200",
+    icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
   },
   variants: {
     variant: {
@@ -28,43 +28,55 @@ const w = g({
   defaultVariants: {
     variant: "info"
   }
-}), v = {
+}), x = {
   info: { src: "InfoFilled", color: "content.info" },
   warning: { src: "WarningFilled", color: "content.warning" },
   success: { src: "CheckCircleFilled", color: "content.success" },
   danger: { src: "WarningCircleFilled", color: "content.danger" }
-}, x = b(
+}, h = b(
   ({
-    children: o,
+    children: c,
     variant: e,
-    isDismissable: s,
-    onDismiss: n,
-    dismissButtonLabel: a,
-    ...t
-  }, c) => {
-    const { base: i, content: l, icon: u } = w({ variant: e }), d = v[e], y = {
+    isDismissable: o,
+    onDismiss: s,
+    dismissButtonLabel: n,
+    ...l
+  }, i) => {
+    const { base: u, content: d, icon: y } = p({ variant: e }), f = x[e], m = {
       role: e === "danger" ? "alert" : "status",
       "aria-live": e === "danger" ? "assertive" : "polite",
       "aria-atomic": !0,
       "aria-relevant": "additions removals"
     };
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ t(
       "div",
       {
         "data-dd-privacy": "mask",
-        ref: c,
-        className: i(),
-        ...y,
-        ...t,
+        ref: i,
+        className: u(),
+        ...m,
+        ...l,
         children: [
-          /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
-          /* @__PURE__ */ r("section", { className: l(), children: o }),
-          s && /* @__PURE__ */ r(
-            m,
+          /* @__PURE__ */ t("div", { className: y(), children: [
+            /* @__PURE__ */ r(w, { size: 24, ...f, alt: `${e} alert` }),
+            o && /* @__PURE__ */ r(
+              a,
+              {
+                title: n,
+                icon: "CloseOutlined",
+                onPress: s,
+                className: "uy:sm:hidden"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r("section", { className: d(), children: c }),
+          o && /* @__PURE__ */ r(
+            a,
             {
-              title: a,
+              title: n,
               icon: "CloseOutlined",
-              onPress: n
+              onPress: s,
+              className: "uy:hidden uy:sm:flex"
             }
           )
         ]
@@ -72,7 +84,7 @@ const w = g({
     );
   }
 );
-x.displayName = "Alert";
+h.displayName = "Alert";
 export {
-  x as Alert
+  h as Alert
 };

package/dist/esm/components/alert/parts/AlertTitle.js

@@ -1,15 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { Text as m } from "../../text/Text.js";
-const l = i(
-  ({ children: e, asElement: t = "h3", ...o }, a) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
-    m,
+import { forwardRef as a } from "react";
+import { Text as i } from "../../text/Text.js";
+const l = a(
+  ({ children: e, asElement: t = "h3", ...m }, o) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
+    i,
     {
       variant: "h4",
       asElement: t,
-      ref: a,
-      className: "uy:pt-50",
-      ...o,
+      ref: o,
+      className: "uy:sm:pt-50",
+      ...m,
       children: e
     }
   ) })

package/dist/esm/components/app-layout/AppLayout.d.ts

@@ -23,5 +23,7 @@ export type AppLayoutProps = PropsWithChildren<{
 /**
  * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
  * Use this when you need a complex layout with a persistent navigation menu.
+ *
+ *  On mobile devices, the menu appears above the content, and the content area becomes scrollable while the menu remains static.
  */
 export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,7 @@ import { Menu as j } from "../../menu/Menu.js";
 import { MenuContent as k } from "../../menu/parts/MenuContent.js";
 import { MenuHeader as E } from "../../menu/parts/MenuHeader.js";
 import { useAppMenuContext as S } from "./AppMenu.context.js";
-const N = (t) => /* @__PURE__ */ l(
+const w = (t) => /* @__PURE__ */ l(
   V,
   {
     "aria-label": `${t.title} avatar`,
@@ -30,12 +30,12 @@ const N = (t) => /* @__PURE__ */ l(
 ), B = ({
   avatar: t,
   avatarPair: a,
-  title: o,
+  title: n,
   uploadAvatarCallback: y,
   uploadAvatarLabel: s,
   uploadAvatarDescription: r
 }) => {
-  const [n, u] = v(!0), c = O(), i = () => {
+  const [o, u] = v(!0), c = O(), i = () => {
     a && u((f) => !f);
   }, d = 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"
@@ -58,12 +58,12 @@ const N = (t) => /* @__PURE__ */ l(
       },
       children: [
         /* @__PURE__ */ e(
-          N,
+          w,
           {
             avatar: t,
             avatarPair: a,
-            title: o,
-            isPairAvatarVisible: n
+            title: n,
+            isPairAvatarVisible: o
           }
         ),
         /* @__PURE__ */ l("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: [
@@ -90,11 +90,11 @@ const N = (t) => /* @__PURE__ */ l(
 }, b = ({
   asMenuHeader: t = !1,
   avatar: a,
-  avatarPair: o,
+  avatarPair: n,
   badgeLabel: y,
   description: s,
   menuTriggerDescription: r,
-  title: n,
+  title: o,
   uploadAvatarCallback: u,
   uploadAvatarLabel: c,
   uploadAvatarDescription: i
@@ -103,18 +103,18 @@ const N = (t) => /* @__PURE__ */ l(
     B,
     {
       avatar: a,
-      avatarPair: o,
-      title: n,
+      avatarPair: n,
+      title: o,
       uploadAvatarLabel: c,
       uploadAvatarDescription: i,
       uploadAvatarCallback: u
     }
   ) : /* @__PURE__ */ e(
-    N,
+    w,
     {
       avatar: a,
-      avatarPair: o,
-      title: n,
+      avatarPair: n,
+      title: o,
       isPairAvatarVisible: !0
     }
   ) }),
@@ -125,7 +125,7 @@ const N = (t) => /* @__PURE__ */ l(
         id: "profile-button-label",
         className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
         "data-dd-privacy": "mask",
-        children: n
+        children: o
       }
     ),
     /* @__PURE__ */ e(
@@ -156,17 +156,17 @@ const N = (t) => /* @__PURE__ */ l(
 ] }), D = ({
   avatar: t,
   avatarPair: a,
-  badgeLabel: o,
+  badgeLabel: n,
   children: y,
   computeSlot: s,
   description: r,
-  title: n,
+  title: o,
   menuTriggerDescription: u,
   uploadAvatarCallback: c,
   uploadAvatarLabel: i,
   uploadAvatarDescription: d
 }) => {
-  const { isMobileMenuOpen: f } = S(), [w, p] = v(!1), m = A(null), P = g(
+  const { isMobileMenuOpen: f } = S(), [N, p] = v(!1), m = A(null), P = 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]",
@@ -184,7 +184,7 @@ const N = (t) => /* @__PURE__ */ l(
           x,
           {
             ref: m,
-            className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:not-aria-disabled:hover:bg-surface-neutral-hover uy:not-aria-disabled:active:bg-surface-neutral-active uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-active 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",
+            className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:not-aria-disabled:active:bg-surface-neutral-low-active uy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-active 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: () => {
@@ -195,10 +195,10 @@ const N = (t) => /* @__PURE__ */ l(
               {
                 avatar: t,
                 avatarPair: a,
-                badgeLabel: o,
+                badgeLabel: n,
                 description: r,
                 menuTriggerDescription: u,
-                title: n,
+                title: o,
                 uploadAvatarCallback: c,
                 uploadAvatarLabel: i,
                 uploadAvatarDescription: d
@@ -206,17 +206,17 @@ const N = (t) => /* @__PURE__ */ l(
             )
           }
         ),
-        /* @__PURE__ */ e(j, { isOpen: w, onOpenChange: p, children: /* @__PURE__ */ l(k, { width: 312, placement: "top left", triggerRef: m, children: [
+        /* @__PURE__ */ e(j, { isOpen: N, onOpenChange: p, children: /* @__PURE__ */ l(k, { width: 312, placement: "top left", triggerRef: m, children: [
           /* @__PURE__ */ e(E, { className: "uy:rounded-75", children: /* @__PURE__ */ e(
             b,
             {
               asMenuHeader: !0,
               avatar: t,
               avatarPair: a,
-              badgeLabel: o,
+              badgeLabel: n,
               description: r,
               menuTriggerDescription: u,
-              title: n,
+              title: o,
               uploadAvatarCallback: c,
               uploadAvatarLabel: i,
               uploadAvatarDescription: d

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

@@ -3,7 +3,7 @@ export interface AppMenuHeaderProps {
     /**
      * The application environment. Determines which brand logo variant to display.
      */
-    environment: 'production' | 'working' | 'testing' | 'development' | 'local';
+    environment: 'prod' | 'staging' | 'dev' | 'local';
     /**
      * Accessible label for the brand logo link.
      */

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

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
 import { Link as m } from "react-aria-components";
 import { useIntl as s } from "react-intl";
 import { IconButton as c } from "../../icon-button/IconButton.js";
@@ -7,13 +7,13 @@ import { PayFitBrandPreprod as f } from "../../payfit-brand/PayFitPreprod.js";
 import { useAppMenuContext as h } from "./AppMenu.context.js";
 const O = ({
   environment: o,
-  brandLabel: t,
-  notificationsComponent: i,
-  searchComponent: r,
+  brandLabel: a,
+  notificationsComponent: t,
+  searchComponent: i,
   renderLink: l = ({ children: e }) => /* @__PURE__ */ n(m, { href: "/", children: e })
 }) => {
-  const { isMobileMenuOpen: e, toggleMobileMenu: u } = h(), d = s(), p = o === "production" ? /* @__PURE__ */ n(y, { label: t, width: 104 }) : /* @__PURE__ */ n(f, { label: t, env: o });
-  return /* @__PURE__ */ a("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
+  const { isMobileMenuOpen: e, toggleMobileMenu: u } = h(), d = s(), p = o === "prod" ? /* @__PURE__ */ n(y, { label: a, width: 104 }) : /* @__PURE__ */ n(f, { label: a, env: o });
+  return /* @__PURE__ */ r("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
     /* @__PURE__ */ n("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(
       c,
       {
@@ -29,11 +29,11 @@ const O = ({
         "aria-controls": "app-menu-nav-container app-menu-profile-button"
       }
     ) }),
-    /* @__PURE__ */ a("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
+    /* @__PURE__ */ r("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
       l({ children: p }),
-      i
+      t
     ] }),
-    /* @__PURE__ */ n("div", { className: "uy:hidden uy:md:flex", children: r })
+    /* @__PURE__ */ n("div", { className: "uy:hidden uy:md:flex", children: i })
   ] });
 };
 export {

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

@@ -7,8 +7,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -20,7 +18,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
@@ -29,8 +26,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -42,7 +37,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];
@@ -51,8 +45,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
         true: {
             base: string;
             icon: string;
-            button: string;
-            clearButton: string;
             input: string;
         };
         false: {
@@ -64,7 +56,6 @@ declare const autocomplete: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     input: string[];
-    clearButton: never[];
     icon: string[];
     invalidIcon: string[];
     wrapperState: string[];

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

@@ -1,34 +1,33 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { forwardRef as R, useRef as A, useState as B, useCallback as O } from "react";
-import { uyTv as W } from "@payfit/unity-themes";
-import { useId as k } from "react-aria";
-import { ComboBox as C, Input as z } from "react-aria-components";
-import { useIntl as T } from "react-intl";
-import { useResizeObserver as j } from "usehooks-ts";
-import { Icon as f } from "../icon/Icon.js";
+import { forwardRef as R, useRef as A, useState as O, useCallback as W } from "react";
+import { uyTv as k } from "@payfit/unity-themes";
+import { useId as C } from "react-aria";
+import { ComboBox as z, Input as T } from "react-aria-components";
+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 = W({
+const L = k({
   slots: {
     base: [
-      "uy:group uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled",
-      "uy:enabled:border-border-form-enabled uy:enabled:bg-surface-danger-enabled uy:enabled:border-border-form-enabled",
-      "uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:focus-visible:border-border-form-focus uy:focus-visible:bg-surface-form-focus",
-      "uy:active:border-border-form-active",
-      "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled",
-      "uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-error"
+      "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:hover:text-content-form-hover",
-      "uy:focus-visible:text-content-form-focus",
+      "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-error"
+      "uy:group-data-[invalid=true]:bg-surface-form-high-error"
     ],
-    clearButton: [],
     icon: [
       "uy:self-center",
       "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
@@ -42,16 +41,14 @@ const L = W({
   variants: {
     isReadOnly: {
       true: {
-        base: "uy:bg-surface-form-disabled",
+        base: "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-high-disabled",
         icon: "uy:text-content-neutral-lowest-disabled",
-        button: "uy:bg-surface-form-error uy:text-content-neutral-disabled",
-        clearButton: "uy:hidden",
-        input: "uy:bg-surface-form-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
+        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-enabled",
-          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover uy:data-[disabled=true]:cursor-not-allowed"
+          "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"
@@ -61,48 +58,48 @@ const L = W({
 }), U = ({
   intl: a,
   placeholder: r,
-  isDisabled: t
-}) => t ? "" : r || a.formatMessage({
+  isDisabled: o
+}) => o ? "" : r || a.formatMessage({
   id: "unity:component:autocomplete:placeholder",
   defaultMessage: "Search"
 }), $ = (a, r) => {
   const {
-    placeholder: t,
-    isDisabled: l,
-    isInvalid: d,
+    placeholder: o,
+    isDisabled: d,
+    isInvalid: l,
     isReadOnly: u,
-    items: m,
-    children: y,
-    loadingState: i,
+    items: f,
+    children: m,
+    loadingState: n,
     name: b,
     feedbackText: p,
-    ...g
-  } = a, n = T(), o = A(null), [h, v] = B(null), c = k(), x = O(() => {
-    o.current && v(`${o.current.offsetWidth}px`);
-  }, [o]);
-  j({ ref: o, onResize: x });
-  const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S, clearButton: F } = L({
+    ...h
+  } = a, i = j(), t = A(null), [g, v] = O(null), c = C(), 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,
+      z,
       {
         className: w(),
         name: b,
-        isInvalid: d,
-        isDisabled: l || u,
+        isInvalid: l,
+        isDisabled: d || u,
         isReadOnly: u,
-        ref: o,
-        "aria-label": n.formatMessage({
+        ref: t,
+        "aria-label": i.formatMessage({
           id: "unity:component:autocomplete:placeholder",
           defaultMessage: "Search"
         }),
-        items: m,
-        ...g,
+        items: f,
+        ...h,
         children: [
           /* @__PURE__ */ e(
-            f,
+            y,
             {
               src: "MagnifyingGlassOutlined",
               className: M(),
@@ -110,30 +107,30 @@ const L = W({
             }
           ),
           /* @__PURE__ */ e(
-            z,
+            T,
             {
               className: I(),
               "aria-describedby": c,
-              placeholder: U({ intl: n, placeholder: t, isDisabled: l })
+              placeholder: U({ intl: i, placeholder: o, isDisabled: d })
             }
           ),
           /* @__PURE__ */ s("div", { className: S(), children: [
             /* @__PURE__ */ e(
-              f,
+              y,
               {
                 className: N(),
                 src: "WarningCircleOutlined",
                 color: "content.form.invalid",
-                alt: n.formatMessage({
+                alt: i.formatMessage({
                   id: "unity:component:form-field:form-input:error:alt",
                   defaultMessage: "Error"
                 })
               }
             ),
-            i && i !== "error" && i !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
+            n && n !== "error" && n !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
               D,
               {
-                label: n.formatMessage({
+                label: i.formatMessage({
                   id: "unity:component:common:loading:label",
                   defaultMessage: "Loading..."
                 }),
@@ -146,15 +143,15 @@ const L = W({
               E,
               {
                 isReadOnly: u,
-                isDisabled: l
+                isDisabled: d
               }
             )
           ] }),
-          /* @__PURE__ */ e(G, { panelWidth: h, searchRef: o, children: y })
+          /* @__PURE__ */ e(G, { panelWidth: g, searchRef: t, children: m })
         ]
       }
     ),
-    d && /* @__PURE__ */ e(
+    l && /* @__PURE__ */ e(
       P,
       {
         id: c,
@@ -163,8 +160,8 @@ const L = W({
       }
     )
   ] });
-}, q = R(function(r, t) {
-  return $(r, t);
+}, q = R(function(r, o) {
+  return $(r, o);
 });
 q.displayName = "Autocomplete";
 export {

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

@@ -1,5 +1,5 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
+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";
 const i = n({
@@ -7,24 +7,24 @@ const i = n({
     "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]:outline-offset-2 uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:bg-surface-neutral-focus uy:data-[focus-visible]:text-content-neutral-focus",
+    '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:hover:bg-surface-neutral-hover",
+      false: 'uy:data-[hovered="true"]:bg-surface-neutral-hover',
       true: "uy:cursor-not-allowed"
     }
   }
-}), y = r(
-  ({ children: e, isDisabled: t, textValue: u, ...a }, o) => /* @__PURE__ */ l(
+}), y = l(
+  ({ children: e, isDisabled: t, textValue: u, ...a }, r) => /* @__PURE__ */ s(
     d,
     {
       ...a,
       isDisabled: t,
       textValue: u,
-      ref: o,
-      className: ({ isDisabled: s }) => i({ isDisabled: s }),
+      ref: r,
+      className: ({ isDisabled: o }) => i({ isDisabled: o }),
       children: e
     }
   )

package/dist/esm/components/avatar/Avatar.variants.js

@@ -10,7 +10,7 @@ const e = a({
     },
     variant: {
       circle: "uy:rounded-circle",
-      square: ""
+      square: "uy:aspect-square"
     }
   },
   compoundVariants: [