@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/table/parts/TableHeader.js

@@ -1,35 +1,37 @@
 import { jsx as t } from "react/jsx-runtime";
-import r, { forwardRef as u } from "react";
-import { tv as s } from "tailwind-variants";
-const y = s({
+import r, { memo as l, forwardRef as s, useMemo as y } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const b = m({
   base: [
     "uy:h-500 uy:bg-surface-neutral-lowest uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
     "uy:sticky uy:top-0 uy:z-[1]",
     "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
   ]
-}), b = u(
-  ({ children: o, ...d }, a) => {
-    const l = r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
-      e,
-      {
-        rowIndex: n,
-        ...e.props
-      }
-    ) : e);
-    return /* @__PURE__ */ t(
-      "thead",
-      {
-        ref: a,
-        className: y(),
-        "data-dd-privacy": "allow",
-        ...d,
-        children: /* @__PURE__ */ t("tr", { children: l })
-      }
-    );
-  }
+}), i = l(
+  s(
+    ({ children: o, ...a }, d) => {
+      const u = y(() => r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
+        e,
+        {
+          rowIndex: n,
+          ...e.props
+        }
+      ) : e), [o]);
+      return /* @__PURE__ */ t(
+        "thead",
+        {
+          ref: d,
+          className: b(),
+          "data-dd-privacy": "allow",
+          ...a,
+          children: /* @__PURE__ */ t("tr", { children: u })
+        }
+      );
+    }
+  )
 );
-b.displayName = "TableHeader";
+i.displayName = "TableHeader";
 export {
-  b as TableHeader,
-  y as tableHeader
+  i as TableHeader,
+  b as tableHeader
 };

package/dist/esm/components/table/parts/TablePagination.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { PaginationProps } from '../../pagination/Pagination.js';
 export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 type PageSizeOption = {

package/dist/esm/components/table/parts/TablePagination.js

@@ -1,12 +1,12 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
 import { forwardRef as x, useState as I } from "react";
-import { useId as j } from "react-aria";
-import { useIntl as L } from "react-intl";
-import { tv as O } from "tailwind-variants";
-import { Pagination as R } from "../../pagination/Pagination.js";
-import { SelectOption as T } from "../../select/parts/SelectOption.js";
+import { uyTv as j } from "@payfit/unity-themes";
+import { useId as L } from "react-aria";
+import { useIntl as T } from "react-intl";
+import { Pagination as O } from "../../pagination/Pagination.js";
+import { SelectOption as R } from "../../select/parts/SelectOption.js";
 import { Select as C } from "../../select/Select.js";
-const E = O({
+const E = j({
   base: [
     "uy:bg-surface-neutral-lowest",
     "uy:sticky uy:bottom-0",
@@ -34,7 +34,7 @@ const E = O({
       onPageSizeChange: o,
       itemLabel: c = "unity:component:table:pagination:item",
       ...M
-    } = y, a = j(), l = L(), [$, z] = I(P), S = {
+    } = y, a = L(), l = T(), [$, z] = I(P), S = {
       pageCount: t,
       defaultPage: p,
       currentPage: u,
@@ -87,7 +87,7 @@ const E = O({
             }
           ) }),
           /* @__PURE__ */ e("div", { className: "uy:justify-self-center", children: t > 1 && /* @__PURE__ */ e(
-            R,
+            O,
             {
               ...S,
               "aria-labelledby": `table-pagination-${a}-label`
@@ -123,7 +123,7 @@ const E = O({
                   o == null || o(d), z(d);
                 },
                 "aria-labelledby": `table-pagination-${a}-pagesize-label`,
-                children: (i) => /* @__PURE__ */ e(T, { id: i.value, children: i.label })
+                children: (i) => /* @__PURE__ */ e(R, { id: i.value, children: i.label })
               }
             ) })
           ] }) })

package/dist/esm/components/table/parts/TableRow.d.ts

@@ -36,5 +36,5 @@ export declare const tableRow: import('tailwind-variants').TVReturnType<{} | {}
  * {@link https://unity-components.payfit.io/?path=/story/data-table-tablerow--docs|API and Demos} •
  * {@link https://payfit.design|Design docs}
  */
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>>;
 export { TableRow };

package/dist/esm/components/table/parts/TableRow.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
-import b, { forwardRef as n, Children as c, cloneElement as f } from "react";
-import { tv as y } from "tailwind-variants";
-const m = y({
+import n, { memo as c, forwardRef as y, useMemo as f, Children as m, cloneElement as p } from "react";
+import { uyTv as v } from "@payfit/unity-themes";
+const g = v({
   base: [
     "uy:group uy:h-500",
     "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
@@ -10,37 +10,39 @@ const m = y({
     "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
   ]
-}), p = n(
-  ({ children: t, rowIndex: o = 0, onKeyDown: r, isSelected: u, ...a }, l) => {
-    const s = c.map(t, (e, i) => b.isValidElement(e) ? f(
-      e,
-      {
-        rowIndex: o,
-        colIndex: i,
-        ...e.props
-      }
-    ) : e);
-    return /* @__PURE__ */ d(
-      "tr",
-      {
-        ref: l,
-        role: "row",
-        className: m(),
-        "aria-rowindex": o + 1,
-        "aria-selected": u,
-        onKeyDown: (e) => {
-          r == null || r(e);
-        },
-        "data-dd-privacy": "mask",
-        "data-selectable": u !== void 0,
-        ...a,
-        children: s
-      }
-    );
-  }
+}), R = c(
+  y(
+    ({ children: o, className: a, rowIndex: r = 0, onKeyDown: u, isSelected: t, ...s }, l) => {
+      const i = f(() => m.map(o, (e, b) => n.isValidElement(e) ? p(
+        e,
+        {
+          rowIndex: r,
+          colIndex: b,
+          ...e.props
+        }
+      ) : e), [o, r]);
+      return /* @__PURE__ */ d(
+        "tr",
+        {
+          ref: l,
+          role: "row",
+          className: g({ className: a }),
+          "aria-rowindex": r + 1,
+          "aria-selected": t,
+          onKeyDown: (e) => {
+            u == null || u(e);
+          },
+          "data-dd-privacy": "mask",
+          "data-selectable": t !== void 0,
+          ...s,
+          children: i
+        }
+      );
+    }
+  )
 );
-p.displayName = "TableRow";
+R.displayName = "TableRow";
 export {
-  p as TableRow,
-  m as tableRow
+  R as TableRow,
+  g as tableRow
 };

package/dist/esm/components/tabs/Tabs.context.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { tabsVariant } from './Tabs.variant.js';
 interface TabsContextValue {
     variant: VariantProps<typeof tabsVariant>['variant'];

package/dist/esm/components/tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { TabsProps as AriaTabsProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { tabsVariant } from './Tabs.variant.js';
 export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
     /** set to true to make the tabs scrollable */

package/dist/esm/components/tabs/Tabs.variant.js

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

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as a } from "react-aria-components";
-import { tv as s } from "tailwind-variants";
-import { Icon as i } from "../../icon/Icon.js";
-const n = s({
+import { jsx as u } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Button as s } from "react-aria-components";
+import { Icon as y } from "../../icon/Icon.js";
+const i = a({
   slots: {
     base: "uy:absolute uy:pt-150 uy:pb-150",
     button: "uy:rounded-circle uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
@@ -18,17 +18,17 @@ const n = s({
       }
     }
   }
-}), g = ({ direction: t, onPress: o }) => {
-  const { base: u, button: l, icon: r } = n({ direction: t });
-  return /* @__PURE__ */ e("div", { className: u(), children: /* @__PURE__ */ e(
-    a,
+}), g = ({ direction: t, onPress: e }) => {
+  const { base: o, button: l, icon: r } = i({ direction: t });
+  return /* @__PURE__ */ u("div", { className: o(), children: /* @__PURE__ */ u(
+    s,
     {
       id: `scroll-${t}`,
       className: l(),
       "aria-label": `Scroll ${t}`,
-      onPress: o,
-      children: /* @__PURE__ */ e(
-        i,
+      onPress: e,
+      children: /* @__PURE__ */ u(
+        y,
         {
           className: r(),
           "aria-labelledby": `scroll-${t}`,

package/dist/esm/components/tabs/parts/Tab.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
-import { TabProps as AriaTabProps } from 'react-aria-components';
-export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
+import { TabProps as AriaTabProps, Key } from 'react-aria-components';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions' | 'id'> {
+    id: Key | undefined;
     suffix?: ReactNode;
 }
 declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {

package/dist/esm/components/tabs/parts/Tab.js

@@ -1,18 +1,18 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Tab as b } from "react-aria-components";
-import { useTabsContext as p } from "../Tabs.context.js";
-import { tabsVariant as c } from "../Tabs.variant.js";
-const f = l(
-  ({ children: a, suffix: r, ...o }, t) => {
-    const { variant: s, scrollable: m } = p(), { tab: n } = c({ variant: s, scrollable: m });
-    return /* @__PURE__ */ e(b, { ref: t, ...o, className: n(), children: [
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Tab as p } from "react-aria-components";
+import { useTabsContext as c } from "../Tabs.context.js";
+import { tabsVariant as f } from "../Tabs.variant.js";
+const T = b(
+  ({ children: a, suffix: r, id: o, ...t }, s) => {
+    const { variant: m, scrollable: n } = c(), { tab: e } = f({ variant: m, scrollable: n });
+    return /* @__PURE__ */ i(p, { ref: s, id: o, ...t, className: e(), children: [
       a,
-      r ? /* @__PURE__ */ i("span", { children: r }) : null
+      r ? /* @__PURE__ */ l("span", { children: r }) : null
     ] });
   }
 );
-f.displayName = "Tab";
+T.displayName = "Tab";
 export {
-  f as Tab
+  T as Tab
 };

package/dist/esm/components/tabs/parts/TabPanel.d.ts

@@ -1,4 +1,6 @@
-import { TabPanelProps as AriaTabPanelProps } from 'react-aria-components';
-export type TabPanelProps = Omit<AriaTabPanelProps, 'classname' | 'style'>;
+import { TabPanelProps as AriaTabPanelProps, Key } from 'react-aria-components';
+export interface TabPanelProps extends Omit<AriaTabPanelProps, 'classname' | 'style' | 'id'> {
+    id: Key | undefined;
+}
 declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
 export { TabPanel };

package/dist/esm/components/tabs/parts/TabPanel.js

@@ -1,10 +1,10 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { TabPanel as t } from "react-aria-components";
-const n = m(
-  ({ children: a, ...r }, o) => /* @__PURE__ */ e(t, { "data-dd-privacy": "mask", ref: o, ...r, children: a })
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { TabPanel as n } from "react-aria-components";
+const p = t(
+  ({ children: a, id: r, ...o }, e) => /* @__PURE__ */ m(n, { "data-dd-privacy": "mask", id: r, ref: e, ...o, children: a })
 );
-n.displayName = "TabPanel";
+p.displayName = "TabPanel";
 export {
-  n as TabPanel
+  p as TabPanel
 };

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const taskMenu: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/task-menu/TaskMenu.js

@@ -1,10 +1,10 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
-import { tv as d } from "tailwind-variants";
+import { uyTv as d } from "@payfit/unity-themes";
 import { useBreakpointListener as l } from "../../hooks/use-breakpoint-listener.js";
-import { Content as f } from "./parts/Content.js";
-import { Header as p } from "./parts/Header.js";
-import { TaskMenuProvider as y } from "./TaskMenu.context.js";
+import { Content as y } from "./parts/Content.js";
+import { Header as f } from "./parts/Header.js";
+import { TaskMenuProvider as p } from "./TaskMenu.context.js";
 const c = d({
   slots: {
     base: [
@@ -15,9 +15,9 @@ const c = d({
 }), b = u(
   ({ children: o, label: s, ...t }, a) => {
     const { base: n } = c(), e = l(), i = e === "xs" || e === "sm";
-    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(y, { children: [
-      i && /* @__PURE__ */ r(p, {}),
-      /* @__PURE__ */ r(f, { children: o })
+    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(p, { children: [
+      i && /* @__PURE__ */ r(f, {}),
+      /* @__PURE__ */ r(y, { children: o })
     ] }) });
   }
 );

package/dist/esm/components/task-menu/parts/Content.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
-import { FocusScope as a, useOverlay as p, mergeProps as f } from "react-aria";
-import { tv as b } from "tailwind-variants";
+import { uyTv as a } from "@payfit/unity-themes";
+import { FocusScope as p, useOverlay as f, mergeProps as b } from "react-aria";
 import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
 import { useTaskMenuContext as r } from "../TaskMenu.context.js";
-const v = b({
+const v = a({
   base: [
     "uy:flex uy:flex-col uy:mt-100",
     "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
@@ -15,7 +15,7 @@ const v = b({
     state: o,
     overlayProps: c,
     overlayRef: t
-  } = r(), u = i(), y = u === "xs" || u === "sm", { overlayProps: m } = p(
+  } = r(), u = i(), y = u === "xs" || u === "sm", { overlayProps: m } = f(
     {
       onClose: () => o == null ? void 0 : o.close(),
       isOpen: o == null ? void 0 : o.isOpen,
@@ -26,7 +26,7 @@ const v = b({
   return /* @__PURE__ */ n(
     "ol",
     {
-      ...f(m, c),
+      ...b(m, c),
       ref: t,
       className: v(),
       id: e,
@@ -36,7 +36,7 @@ const v = b({
   );
 }, d = ({ children: s }) => {
   const { state: e } = r();
-  return !!(e != null && e.isOpen) && /* @__PURE__ */ n("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ n(a, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ n(l, { children: s }) }) });
+  return !!(e != null && e.isOpen) && /* @__PURE__ */ n("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ n(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ n(l, { children: s }) }) });
 }, x = ({ children: s }) => {
   const e = i();
   return e === "xs" || e === "sm" ? /* @__PURE__ */ n(d, { children: s }) : /* @__PURE__ */ n(l, { children: s });

package/dist/esm/components/task-menu/parts/Header.js

@@ -1,10 +1,10 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useIntl as m } from "react-intl";
-import { tv as p } from "tailwind-variants";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useIntl as p } from "react-intl";
 import { IconButton as c } from "../../icon-button/IconButton.js";
 import { Text as f } from "../../text/Text.js";
 import { useTaskMenuContext as y } from "../TaskMenu.context.js";
-const h = p({
+const h = m({
   slots: {
     header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
     headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
@@ -17,13 +17,13 @@ const h = p({
     state: e,
     triggerProps: a,
     triggerRef: i
-  } = y(), l = m(), { header: t, headerSelectedTask: d } = h();
-  return /* @__PURE__ */ u("div", { className: t(), children: [
+  } = y(), l = p(), { header: t, headerSelectedTask: u } = h();
+  return /* @__PURE__ */ d("div", { className: t(), children: [
     /* @__PURE__ */ o(
       f,
       {
         asElement: "span",
-        className: d(),
+        className: u(),
         "aria-describedby": r,
         children: n == null ? void 0 : n.label
       }

package/dist/esm/components/task-menu/parts/SubTask.js

@@ -1,15 +1,15 @@
 import { jsxs as s, jsx as t, Fragment as f } from "react/jsx-runtime";
 import { forwardRef as O, useEffect as z } from "react";
-import { Link as E, Button as F } from "react-aria-components";
-import { useIntl as R, FormattedMessage as g } from "react-intl";
-import { tv as A } from "tailwind-variants";
+import { uyTv as E } from "@payfit/unity-themes";
+import { Link as F, Button as R } from "react-aria-components";
+import { useIntl as A, FormattedMessage as g } from "react-intl";
 import { useRouter as D } from "../../../providers/router/RouterProvider.js";
 import { Icon as y } from "../../icon/Icon.js";
 import { Text as I } from "../../text/Text.js";
 import { useTaskMenuContext as V } from "../TaskMenu.context.js";
 import G from "./dot.svg.js";
 import { commonTask as H } from "./task.variants.js";
-const J = A({
+const J = E({
   extend: H,
   slots: {
     base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
@@ -134,7 +134,7 @@ const J = A({
     uniqueId: r,
     ...p
   }, h) => {
-    const k = R(), u = D(), { currentTask: a, setCurrentTask: l, state: m } = V();
+    const k = A(), u = D(), { currentTask: a, setCurrentTask: l, state: m } = V();
     z(() => {
       o && (u != null && u.isActive(o.toString(), i)) && (l == null || l({ uniqueId: r, label: n }));
     }, [o, i, u, r, n]);
@@ -147,7 +147,7 @@ const J = A({
         "data-current": c,
         "aria-current": c ? "page" : void 0
       }
-    ), x = o ? E : F;
+    ), x = o ? F : R;
     return /* @__PURE__ */ s(
       "li",
       {

package/dist/esm/components/task-menu/parts/Task.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
 import { AriaButtonProps } from 'react-aria';
-import { VariantProps } from 'tailwind-variants';
 export declare const task: import('tailwind-variants').TVReturnType<{
     isSelected: {
         false: string;

package/dist/esm/components/task-menu/parts/Task.js

@@ -1,14 +1,14 @@
 import { jsxs as l, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { forwardRef as z, useEffect as A } from "react";
+import { forwardRef as w, useEffect as z } from "react";
+import { uyTv as A } from "@payfit/unity-themes";
 import { Link as B, Button as C } from "react-aria-components";
-import { useIntl as T, FormattedMessage as b } from "react-intl";
-import { tv as V } from "tailwind-variants";
+import { useIntl as V, FormattedMessage as b } from "react-intl";
 import { useRouter as D } from "../../../providers/router/RouterProvider.js";
 import { Icon as h } from "../../icon/Icon.js";
 import { Text as v } from "../../text/Text.js";
 import { useTaskMenuContext as G } from "../TaskMenu.context.js";
 import { commonTask as H } from "./task.variants.js";
-const I = V({
+const I = A({
   extend: H,
   slots: {
     base: [],
@@ -55,7 +55,7 @@ const I = V({
       }
     }
   ]
-}), J = z(
+}), J = w(
   ({
     href: n,
     isExact: p = !1,
@@ -67,17 +67,17 @@ const I = V({
     uniqueId: o,
     ...y
   }, S) => {
-    const r = D(), g = T(), {
-      currentTask: d,
+    const r = D(), g = V(), {
+      currentTask: u,
       setCurrentTask: t,
-      state: u,
+      state: d,
       expandedTaskGroup: f,
       toggleTaskGroup: i
     } = G(), M = n ? B : C;
-    A(() => {
+    z(() => {
       n && (r != null && r.isActive(n.toString(), p)) && (t == null || t({ uniqueId: o, label: s }));
     }, [n, p, r, s, o]);
-    const a = (d == null ? void 0 : d.uniqueId) === o, L = Object.assign(
+    const a = (u == null ? void 0 : u.uniqueId) === o, L = Object.assign(
       {},
       a !== void 0 && {
         "data-current": a,
@@ -93,8 +93,8 @@ const I = V({
         {
           className: O(),
           href: n,
-          onPress: (w) => {
-            t == null || t({ uniqueId: o, label: s }), u == null || u.toggle(), f && (i == null || i(f)), m == null || m(w);
+          onPress: (T) => {
+            t == null || t({ uniqueId: o, label: s }), d == null || d.toggle(), f && (i == null || i(f)), m == null || m(T);
           },
           ...L,
           ...y,

package/dist/esm/components/task-menu/parts/TaskGroup.js

@@ -1,14 +1,14 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
 import { forwardRef as j, Children as d, isValidElement as u, cloneElement as A } from "react";
-import { useId as V } from "react-aria";
-import { Button as $ } from "react-aria-components";
-import { useIntl as B } from "react-intl";
-import { tv as D } from "tailwind-variants";
+import { uyTv as V } from "@payfit/unity-themes";
+import { useId as $ } from "react-aria";
+import { Button as B } from "react-aria-components";
+import { useIntl as D } from "react-intl";
 import { Icon as F } from "../../icon/Icon.js";
 import { Text as g } from "../../text/Text.js";
 import { useTaskMenuContext as H } from "../TaskMenu.context.js";
 import { commonTask as O } from "./task.variants.js";
-const P = D({
+const P = V({
   extend: O,
   slots: {
     base: ["uy:relative uy:flex-col uy:px-200", "uy:md:px-0"],
@@ -84,7 +84,7 @@ const P = D({
     uniqueId: y,
     ...S
   }, h) => {
-    const { currentTask: l, setCurrentTask: i, toggleTaskGroup: m, expandedTaskGroup: k } = H(), b = V(), T = B(), a = k === y, N = (o) => {
+    const { currentTask: l, setCurrentTask: i, toggleTaskGroup: m, expandedTaskGroup: k } = H(), b = $(), T = D(), a = k === y, N = (o) => {
       if (m == null || m(y), !o) {
         const x = U(e);
         if (u(x)) {
@@ -109,7 +109,7 @@ const P = D({
         className: w(),
         children: [
           /* @__PURE__ */ c(
-            $,
+            B,
             {
               id: f,
               className: C(),

package/dist/esm/components/task-menu/parts/task.variants.js

@@ -1,4 +1,4 @@
-import { tv as e } from "tailwind-variants";
+import { uyTv as e } from "@payfit/unity-themes";
 const u = e({
   slots: {
     base: ["uy:group/base", "uy:list-none uy:width-full uy:flex"],

package/dist/esm/components/text/Text.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { HTMLAttributes, PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { text } from './Text.variants.js';
 export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
 export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {

package/dist/esm/components/text/Text.variants.js

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