@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/app-layout/AppLayout.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { useRef as v } from "react";
-import { tv as x } from "tailwind-variants";
+import { uyTv as x } from "@payfit/unity-themes";
 import { useResizeObserver as g } from "usehooks-ts";
 const w = x({
   slots: {
@@ -40,11 +40,11 @@ function R({
   children: y,
   menu: l,
   header: a,
-  footer: r,
+  footer: u,
   withoutContentPadding: n = !1
 }) {
-  const u = v(null), { height: o = 0 } = g({
-    ref: u,
+  const r = v(null), { height: o = 0 } = g({
+    ref: r,
     box: "border-box"
   }), { body: p, header: s, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
     withoutContentPadding: n
@@ -56,7 +56,7 @@ function R({
     a && /* @__PURE__ */ e(
       "div",
       {
-        ref: u,
+        ref: r,
         className: s(),
         role: "alert",
         "aria-live": "assertive",
@@ -67,7 +67,7 @@ function R({
       /* @__PURE__ */ e("div", { className: d(), children: l }),
       /* @__PURE__ */ t("div", { className: c(), children: [
         /* @__PURE__ */ e("div", { className: f(), children: y }),
-        r && /* @__PURE__ */ e("footer", { className: h(), children: r })
+        u && /* @__PURE__ */ e("footer", { className: h(), children: u })
       ] })
     ] })
   ] });

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

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useState as g, useRef as I, isValidElement as O, cloneElement as V } from "react";
-import { uyMerge as v } from "@payfit/unity-themes";
+import { useState as v, useRef as I, isValidElement as O, cloneElement as V } from "react";
+import { uyMerge as g } from "@payfit/unity-themes";
 import { FormattedMessage as h, useIntl as z } from "react-intl";
 import { Actionable as x } from "../../actionable/Actionable.js";
 import { Avatar as F } from "../../avatar/Avatar.js";
@@ -30,15 +30,15 @@ const N = (t) => /* @__PURE__ */ l(
 ), R = ({
   avatar: t,
   avatarPair: r,
-  title: a,
+  title: o,
   uploadAvatarCallback: u,
   uploadAvatarLabel: c,
-  uploadAvatarDescription: n
+  uploadAvatarDescription: a
 }) => {
-  const [o, s] = g(!0), y = z(), i = () => {
+  const [n, s] = v(!0), y = z(), i = () => {
     r && s((f) => !f);
-  }, d = v(
-    "uy:group 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"
+  }, 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"
   );
   return /* @__PURE__ */ l(
     x,
@@ -62,11 +62,11 @@ const N = (t) => /* @__PURE__ */ l(
           {
             avatar: t,
             avatarPair: r,
-            title: a,
-            isPairAvatarVisible: o
+            title: o,
+            isPairAvatarVisible: n
           }
         ),
-        /* @__PURE__ */ l("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover:opacity-70 uy:group-hover:pointer-events-auto uy:group-focus-visible:opacity-70 uy:group-focus-visible:pointer-events-auto uy:bg-utility-backdrop uy:rounded-circle 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__ */ l("div", { className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-70 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-70 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-circle 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(
             M,
             {
@@ -76,7 +76,7 @@ const N = (t) => /* @__PURE__ */ l(
               src: "CameraOutlined"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: n || /* @__PURE__ */ e(
+          /* @__PURE__ */ e("span", { className: "uy:sr-only", id: "profile-picture-change-desc", children: a || /* @__PURE__ */ e(
             h,
             {
               id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
@@ -90,11 +90,11 @@ const N = (t) => /* @__PURE__ */ l(
 }, b = ({
   asMenuHeader: t = !1,
   avatar: r,
-  avatarPair: a,
+  avatarPair: o,
   badgeLabel: u,
   description: c,
-  menuTriggerDescription: n,
-  title: o,
+  menuTriggerDescription: a,
+  title: n,
   uploadAvatarCallback: s,
   uploadAvatarLabel: y,
   uploadAvatarDescription: i
@@ -103,8 +103,8 @@ const N = (t) => /* @__PURE__ */ l(
     R,
     {
       avatar: r,
-      avatarPair: a,
-      title: o,
+      avatarPair: o,
+      title: n,
       uploadAvatarLabel: y,
       uploadAvatarDescription: i,
       uploadAvatarCallback: s
@@ -113,8 +113,8 @@ const N = (t) => /* @__PURE__ */ l(
     N,
     {
       avatar: r,
-      avatarPair: a,
-      title: o,
+      avatarPair: o,
+      title: n,
       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: o
+        children: n
       }
     ),
     /* @__PURE__ */ e(
@@ -136,7 +136,7 @@ const N = (t) => /* @__PURE__ */ l(
         children: c
       }
     ),
-    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: n || /* @__PURE__ */ e(
+    !t && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy:sr-only", children: a || /* @__PURE__ */ e(
       h,
       {
         id: "unity:component:app-menu:footer:profile-button:description",
@@ -156,17 +156,17 @@ const N = (t) => /* @__PURE__ */ l(
 ] }), D = ({
   avatar: t,
   avatarPair: r,
-  badgeLabel: a,
+  badgeLabel: o,
   children: u,
   computeSlot: c,
-  description: n,
-  title: o,
+  description: a,
+  title: n,
   menuTriggerDescription: s,
   uploadAvatarCallback: y,
   uploadAvatarLabel: i,
   uploadAvatarDescription: d
 }) => {
-  const { isMobileMenuOpen: f } = C(), [w, m] = g(!1), p = I(null), P = v(
+  const { isMobileMenuOpen: f } = C(), [w, m] = v(!1), p = I(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]",
@@ -195,10 +195,10 @@ const N = (t) => /* @__PURE__ */ l(
               {
                 avatar: t,
                 avatarPair: r,
-                badgeLabel: a,
-                description: n,
+                badgeLabel: o,
+                description: a,
                 menuTriggerDescription: s,
-                title: o,
+                title: n,
                 uploadAvatarCallback: y,
                 uploadAvatarLabel: i,
                 uploadAvatarDescription: d
@@ -213,10 +213,10 @@ const N = (t) => /* @__PURE__ */ l(
               asMenuHeader: !0,
               avatar: t,
               avatarPair: r,
-              badgeLabel: a,
-              description: n,
+              badgeLabel: o,
+              description: a,
               menuTriggerDescription: s,
-              title: o,
+              title: n,
               uploadAvatarCallback: y,
               uploadAvatarLabel: i,
               uploadAvatarDescription: d

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

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { twMerge as y } from "tailwind-merge";
+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(

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

@@ -1,7 +1,7 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { LoadingState } from '@react-types/shared';
 import { ForwardedRef, ReactNode } from 'react';
 import { ComboBoxProps, ListBoxProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 declare const autocomplete: import('tailwind-variants').TVReturnType<{
     isReadOnly: {
         true: {

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

@@ -1,16 +1,16 @@
 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 { useId as W } from "react-aria";
-import { ComboBox as k, Input as C } from "react-aria-components";
-import { useIntl as z } from "react-intl";
-import { tv as j } from "tailwind-variants";
-import { useResizeObserver as D } from "usehooks-ts";
+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 { Spinner as P } from "../spinner/Spinner.js";
-import { Text as T } from "../text/Text.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 = j({
+const L = W({
   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",
@@ -77,16 +77,16 @@ const L = j({
     name: b,
     feedbackText: p,
     ...g
-  } = a, n = z(), o = A(null), [h, v] = B(null), c = W(), x = O(() => {
+  } = a, n = T(), o = A(null), [h, v] = B(null), c = k(), x = O(() => {
     o.current && v(`${o.current.offsetWidth}px`);
   }, [o]);
-  D({ ref: o, onResize: x });
+  j({ ref: o, onResize: x });
   const { base: w, input: I, icon: M, invalidIcon: N, wrapperState: S, clearButton: F } = L({
     isReadOnly: u
   });
   return /* @__PURE__ */ s("search", { ref: r, children: [
     /* @__PURE__ */ s(
-      k,
+      C,
       {
         className: w(),
         name: b,
@@ -110,7 +110,7 @@ const L = j({
             }
           ),
           /* @__PURE__ */ e(
-            C,
+            z,
             {
               className: I(),
               "aria-describedby": c,
@@ -131,7 +131,7 @@ const L = j({
               }
             ),
             i && i !== "error" && i !== "idle" && /* @__PURE__ */ e("span", { className: "uy:px-50", children: /* @__PURE__ */ e(
-              P,
+              D,
               {
                 label: n.formatMessage({
                   id: "unity:component:common:loading:label",
@@ -155,7 +155,7 @@ const L = j({
       }
     ),
     d && /* @__PURE__ */ e(
-      T,
+      P,
       {
         id: c,
         className: "uy:typography-body-small-strong uy:text-content-form-invalid",

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

@@ -1,15 +1,15 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useContext as u } from "react";
-import { ComboBoxStateContext as m } from "react-aria-components";
-import { useIntl as a } from "react-intl";
-import { twMerge as i } from "tailwind-merge";
+import { uyMerge as m } from "@payfit/unity-themes";
+import { ComboBoxStateContext as a } from "react-aria-components";
+import { useIntl as i } from "react-intl";
 import { CircularIconButton as s } from "../../icon-button/CircularIconButton.js";
 const c = ({
   className: e,
   isReadOnly: o,
   isDisabled: n
 }) => {
-  const t = u(m), r = a();
+  const t = u(a), r = i();
   return !(t != null && t.inputValue) || o || n ? null : /* @__PURE__ */ l(
     s,
     {
@@ -18,7 +18,7 @@ const c = ({
         id: "unity:component:common:clear:title",
         defaultMessage: "Clear"
       }),
-      className: i(
+      className: m(
         e,
         "uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"
       ),

package/dist/esm/components/autocomplete/parts/AutocompleteItem.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ListBoxItemProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const autocompleteItem: import('tailwind-variants').TVReturnType<{
     isDisabled: {
         false: string;

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

@@ -1,8 +1,8 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import { ListBoxItem as n } from "react-aria-components";
-import { tv as d } from "tailwind-variants";
-const i = d({
+import { uyTv as n } from "@payfit/unity-themes";
+import { ListBoxItem as d } from "react-aria-components";
+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",
@@ -18,7 +18,7 @@ const i = d({
   }
 }), y = r(
   ({ children: e, isDisabled: t, textValue: u, ...a }, o) => /* @__PURE__ */ l(
-    n,
+    d,
     {
       ...a,
       isDisabled: t,

package/dist/esm/components/autocomplete/parts/AutocompleteItemGroup.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ForwardedRef } from 'react';
 import { ListBoxSectionProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const autocompleteItemGroup: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

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

@@ -1,23 +1,23 @@
-import { jsxs as a, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { jsxs as a, jsx as e, Fragment as n } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { ListBoxSection as i, Header as y, Collection as d, Separator as p } from "react-aria-components";
-import { tv as h } from "tailwind-variants";
-const f = h({
+import { uyTv as i } from "@payfit/unity-themes";
+import { ListBoxSection as y, Header as d, Collection as h, Separator as p } from "react-aria-components";
+const f = i({
   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: o, items: t }, l) => {
-  const { base: s, header: m, separator: n } = f();
-  return /* @__PURE__ */ a(i, { ref: l, className: s(), id: r, items: t, children: [
-    /* @__PURE__ */ e(y, { className: m(), children: r }),
-    t ? /* @__PURE__ */ a(u, { children: [
-      /* @__PURE__ */ e(d, { items: t, children: o }),
-      /* @__PURE__ */ e(p, { orientation: "horizontal", className: n() })
-    ] }) : /* @__PURE__ */ a(u, { children: [
+  const { base: s, header: m, separator: u } = f();
+  return /* @__PURE__ */ a(y, { ref: l, className: s(), id: r, items: t, children: [
+    /* @__PURE__ */ e(d, { className: m(), children: r }),
+    t ? /* @__PURE__ */ a(n, { children: [
+      /* @__PURE__ */ e(h, { items: t, children: o }),
+      /* @__PURE__ */ e(p, { orientation: "horizontal", className: u() })
+    ] }) : /* @__PURE__ */ a(n, { children: [
       o,
-      /* @__PURE__ */ e(p, { orientation: "horizontal", className: n() })
+      /* @__PURE__ */ e(p, { orientation: "horizontal", className: u() })
     ] })
   ] });
 }, x = c(function(o, t) {

package/dist/esm/components/autocomplete/parts/AutocompletePanel.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
 import { PopoverProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { AutocompleteProps } from '../Autocomplete.js';
 export declare const autocompletePanel: import('tailwind-variants').TVReturnType<{
     [key: string]: {

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

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Popover as y, ListBox as m } from "react-aria-components";
-import { FormattedMessage as c } from "react-intl";
-import { tv as d } from "tailwind-variants";
+import { uyTv as y } from "@payfit/unity-themes";
+import { Popover as m, ListBox as c } from "react-aria-components";
+import { FormattedMessage as d } from "react-intl";
 import { Icon as p } from "../../icon/Icon.js";
 import { Text as t } from "../../text/Text.js";
-const f = d({
+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-floating",
     list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
@@ -19,7 +19,7 @@ const f = d({
     }
   ),
   /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
-    c,
+    d,
     {
       id: "unity:component:autocomplete:panel:empty:label",
       defaultMessage: "No results found"
@@ -28,7 +28,7 @@ const f = d({
 ] }), h = (r) => {
   const { children: o, panelWidth: s, searchRef: a, ...u } = r, { base: l, list: n } = f();
   return /* @__PURE__ */ e(
-    y,
+    m,
     {
       ...u,
       className: l(),
@@ -36,7 +36,7 @@ const f = d({
       triggerRef: a,
       isNonModal: !0,
       style: { "--trigger-width": s },
-      children: /* @__PURE__ */ e(m, { className: n(), renderEmptyState: g, children: o })
+      children: /* @__PURE__ */ e(c, { className: n(), renderEmptyState: g, children: o })
     }
   );
 };

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import * as React from 'react';
 declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
     size: {

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

@@ -1,33 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as c from "react";
-import * as o from "@radix-ui/react-avatar";
-import { twMerge as d } from "tailwind-merge";
-import { tv as f } from "tailwind-variants";
-import { AvatarProvider as n } from "./Avatar.context.js";
-import { avatarBase as p } from "./Avatar.variants.js";
-const v = f({
-  extend: p,
+import { jsx as o } from "react/jsx-runtime";
+import * as l from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import * as t from "@radix-ui/react-avatar";
+import { AvatarProvider as d } from "./Avatar.context.js";
+import { avatarBase as f } from "./Avatar.variants.js";
+const n = c({
+  extend: f,
   base: "uy:inline-block uy:relative uy:shrink-0",
   defaultVariants: {
     size: "md",
     variant: "circle"
   }
-}), y = c.forwardRef(
+}), p = l.forwardRef(
   ({ size: a = "md", variant: r = "circle", className: e, ...i }, m) => {
-    const s = v({ variant: r, size: a }), l = d(s, e);
-    return /* @__PURE__ */ t(n, { variant: r, size: a, hasPair: !1, children: /* @__PURE__ */ t(
-      o.Root,
+    const s = n({ variant: r, size: a, className: e });
+    return /* @__PURE__ */ o(d, { variant: r, size: a, hasPair: !1, children: /* @__PURE__ */ o(
+      t.Root,
       {
         ref: m,
         role: "img",
-        className: l,
+        className: s,
         "data-dd-privacy": "allow",
         ...i
       }
     ) });
   }
 );
-y.displayName = o.Root.displayName;
+p.displayName = t.Root.displayName;
 export {
-  y as Avatar
+  p as Avatar
 };

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

@@ -1,4 +1,4 @@
-import { tv as a } from "tailwind-variants";
+import { uyTv as a } from "@payfit/unity-themes";
 const e = a({
   variants: {
     size: {

package/dist/esm/components/avatar/parts/AvatarFallback.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -1,12 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as p from "react";
-import * as t from "@radix-ui/react-avatar";
-import { twMerge as f } from "tailwind-merge";
-import { tv as l } from "tailwind-variants";
+import { uyTv as t, uyMerge as f } from "@payfit/unity-themes";
+import * as l from "@radix-ui/react-avatar";
 import { useAvatarContext as b } from "../Avatar.context.js";
 import { avatarBase as n } from "../Avatar.variants.js";
 import { getInitials as v } from "../utils.js";
-const h = l({
+const h = t({
   extend: n,
   slots: {
     base: "uy:absolute uy:overflow-hidden",
@@ -29,7 +28,7 @@ const h = l({
       }
     }
   }
-}), w = l({
+}), w = t({
   extend: n,
   base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-low",
   variants: {
@@ -41,11 +40,11 @@ const h = l({
       xl: "uy:typography-h2"
     }
   }
-}), x = p.forwardRef(({ variant: s, color: u, children: i, ...r }, y) => {
+}), x = p.forwardRef(({ variant: u, color: s, children: i, ...r }, y) => {
   const c = b(), { size: e, variant: o } = c;
-  if (s === "placeholder") {
+  if (u === "placeholder") {
     const { base: d, background: g, foreground: m } = h({
-      color: u,
+      color: s,
       size: e,
       variant: o
     });
@@ -71,7 +70,7 @@ const h = l({
     );
   }
   return /* @__PURE__ */ a(
-    t.Fallback,
+    l.Fallback,
     {
       ref: y,
       role: "presentation",
@@ -81,7 +80,7 @@ const h = l({
     }
   );
 });
-x.displayName = t.Fallback.displayName;
+x.displayName = l.Fallback.displayName;
 export {
   x as AvatarFallback
 };

package/dist/esm/components/avatar/parts/AvatarImage.js

@@ -1,21 +1,21 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as n from "react";
+import { uyTv as u } from "@payfit/unity-themes";
 import * as a from "@radix-ui/react-avatar";
-import { twMerge as p } from "tailwind-merge";
-import { tv as f } from "tailwind-variants";
-import { useAvatarContext as u } from "../Avatar.context.js";
+import { useAvatarContext as p } from "../Avatar.context.js";
 import { avatarBase as c } from "../Avatar.variants.js";
-const l = f({
+const f = u({
   extend: c,
   base: "uy:aspect-square uy:w-full uy:h-full uy:object-cover uy:bg-surface-neutral-lowest"
-}), v = n.forwardRef(({ className: r, ...t }, e) => {
-  const { variant: o, size: s } = u(), m = p(
-    l({ variant: o, size: s }),
-    r
-  );
-  return /* @__PURE__ */ i(a.Image, { ref: e, className: m, ...t });
+}), l = n.forwardRef(({ className: r, ...e }, t) => {
+  const { variant: s, size: o } = p(), m = f({
+    variant: s,
+    size: o,
+    className: r
+  });
+  return /* @__PURE__ */ i(a.Image, { ref: t, className: m, ...e });
 });
-v.displayName = a.Image.displayName;
+l.displayName = a.Image.displayName;
 export {
-  v as AvatarImage
+  l as AvatarImage
 };

package/dist/esm/components/avatar/parts/AvatarPair.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { avatarBase } from '../Avatar.variants.js';
 import * as React from 'react';
 export type AvatarPairProps = PropsWithChildren<{

package/dist/esm/components/avatar/parts/AvatarPair.js

@@ -1,10 +1,10 @@
 import { jsx as s } from "react/jsx-runtime";
 import * as d from "react";
-import * as l from "@radix-ui/react-avatar";
-import { tv as c } from "tailwind-variants";
+import { uyTv as l } from "@payfit/unity-themes";
+import * as c from "@radix-ui/react-avatar";
 import { useAvatarContext as y, AvatarProvider as p } from "../Avatar.context.js";
 import { avatarBase as v } from "../Avatar.variants.js";
-const z = c({
+const z = l({
   extend: v,
   base: "uy:absolute uy:overflow-hidden uy:leading-[0] uy:border uy:border-solid uy:border-content-inverted uy:-bottom-[var(--pair-offset)] uy:-right-[var(--pair-offset)] uy:transition-transform uy:origin-center",
   variants: {
@@ -26,7 +26,7 @@ const z = c({
   ({ variant: r, isHidden: a, children: i, ...o }, n) => {
     const { size: f } = y(), e = f === "xl", t = e ? "sm" : "xs", m = e ? 0 : 4, u = z({ variant: r, size: t, isHidden: a });
     return /* @__PURE__ */ s(p, { variant: r, size: t, hasPair: !0, children: /* @__PURE__ */ s(
-      l.Root,
+      c.Root,
       {
         ref: n,
         role: "img",

package/dist/esm/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { AriaRole, PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 declare const badge: import('tailwind-variants').TVReturnType<{
     variant: {
         success: string;