@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/funnel-layout/parts/FunnelPage.js

@@ -1,8 +1,8 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { tv as o } from "tailwind-variants";
-import { useFunnelLayoutContext as t } from "../FunnelLayout.context.js";
-const i = o({
+import { uyTv as o } from "@payfit/unity-themes";
+import { useFunnelLayoutContext as i } from "../FunnelLayout.context.js";
+const t = o({
   base: [
     "uy:group/funnelpage uy:bg-surface-neutral uy:p-100 uy:pb-500 uy:md:shadow-raising uy:md:border-border-neutral uy:md:border uy:md:border-solid uy:md:rounded-400",
     "uy:basis-full uy:shrink-0 uy:grow-1 uy:md:shrink",
@@ -10,19 +10,19 @@ const i = o({
     "uy:md:max-w-container-lg uy:lg:max-w-container-xl"
   ]
 }), l = d(
-  ({ children: n, ...r }, a) => {
-    const { ids: e } = t();
-    return /* @__PURE__ */ u(
+  ({ children: n, ...r }, u) => {
+    const { ids: e } = i();
+    return /* @__PURE__ */ a(
       "main",
       {
         "data-dd-privacy": "mask-user-input",
         ...r,
-        ref: a,
+        ref: u,
         id: e.mainContentId,
         "aria-labelledby": e.funnelTitleId,
         "aria-describedby": e.funnelDescriptionId,
         tabIndex: -1,
-        className: i(),
+        className: t(),
         "data-unity-component": "FunnelPage",
         children: n
       }
@@ -32,5 +32,5 @@ const i = o({
 l.displayName = "FunnelPage";
 export {
   l as FunnelPage,
-  i as funnelPage
+  t as funnelPage
 };

package/dist/esm/components/funnel-layout/parts/FunnelPageAction.d.ts

@@ -31,7 +31,7 @@ export interface FunnelPageActionProps extends PropsWithChildren<Omit<ButtonProp
  * - Optional actions use ghost variant for less prominent actions
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelPageActionProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageaction--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelPageActions.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 export declare const funnelPageActions: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between", unknown, unknown, undefined>>;
 export interface FunnelPageActionsProps extends VariantProps<typeof funnelPageActions> {
     /**
@@ -38,7 +38,7 @@ export interface FunnelPageActionsProps extends VariantProps<typeof funnelPageAc
  * - Uses render functions for maximum flexibility in action content
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelPageActionsProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageactions--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelPageActions.js

@@ -1,32 +1,32 @@
-import { jsxs as l, Fragment as g, jsx as s } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { tv as h } from "tailwind-variants";
-import { useBreakpointListener as p } from "../../../hooks/use-breakpoint-listener.js";
-const b = h({
+import { jsxs as l, Fragment as u, jsx as s } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
+const b = p({
   base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between"
-}), w = t(
-  ({ renderNext: f, renderPrevious: a, renderOptionalActions: m, ...u }, x) => {
-    const y = p(), c = y === "xs" || y === "sm";
+}), w = h(
+  ({ renderNext: y, renderPrevious: a, renderOptionalActions: m, ...g }, x) => {
+    const f = t(), c = f === "xs" || f === "sm";
     return /* @__PURE__ */ l(
       "div",
       {
         ref: x,
         "data-dd-privacy": "allow",
-        ...u,
+        ...g,
         className: b(),
         role: "group",
         "data-unity-component": "FunnelPageActions",
         children: [
-          c && /* @__PURE__ */ l(g, { children: [
-            f(),
+          c && /* @__PURE__ */ l(u, { children: [
+            y(),
             a == null ? void 0 : a(),
             m == null ? void 0 : m()
           ] }),
-          !c && /* @__PURE__ */ l(g, { children: [
+          !c && /* @__PURE__ */ l(u, { children: [
             /* @__PURE__ */ s("div", { className: "uy:flex uy:gap-100", children: m == null ? void 0 : m() }),
             /* @__PURE__ */ l("div", { className: "uy:flex uy:gap-100", children: [
               a == null ? void 0 : a(),
-              f()
+              y()
             ] })
           ] })
         ]

package/dist/esm/components/funnel-layout/parts/FunnelPageContent.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelPageContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-600 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex-1 uy:px-300 uy:my-400 uy:md:px-600 uy:group-has-[[data-unity-component=\"FunnelPageHeader\"]]/funnelpage:mt-0", unknown, unknown, undefined>>;
 export type FunnelPageContentProps = PropsWithChildren<VariantProps<typeof funnelPageContent>>;
 /**
@@ -24,7 +24,7 @@ export type FunnelPageContentProps = PropsWithChildren<VariantProps<typeof funne
  * - Uses semantic section element for proper document structure
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask"`
  * @see {@link FunnelPageContentProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpagecontent--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelPageContent.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
-import { tv as u } from "tailwind-variants";
+import { uyTv as u } from "@payfit/unity-themes";
 const m = u({
   base: 'uy:flex-1 uy:px-300 uy:my-400 uy:md:px-600 uy:group-has-[[data-unity-component="FunnelPageHeader"]]/funnelpage:mt-0'
 }), r = o(

package/dist/esm/components/funnel-layout/parts/FunnelPageFooter.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelPageFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:px-300 uy:md:px-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:px-300 uy:md:px-600", unknown, unknown, undefined>>;
 export type FunnelPageFooterProps = PropsWithChildren<VariantProps<typeof funnelPageFooter>>;
 /**
@@ -25,7 +25,7 @@ export type FunnelPageFooterProps = PropsWithChildren<VariantProps<typeof funnel
  * - Uses semantic footer element for proper document structure
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelPageFooterProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpagefooter--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelPageFooter.js

@@ -1,10 +1,10 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { tv as d } from "tailwind-variants";
+import { uyTv as d } from "@payfit/unity-themes";
 import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
-const s = d({
+const u = d({
   base: "uy:px-300 uy:md:px-600"
-}), u = n(
+}), s = n(
   ({ children: o, ...e }, t) => {
     const { ids: r } = m();
     return /* @__PURE__ */ a(
@@ -13,7 +13,7 @@ const s = d({
         ref: t,
         "data-dd-privacy": "allow",
         ...e,
-        className: s(),
+        className: u(),
         "data-unity-component": "FunnelPageFooter",
         id: r.footerId,
         tabIndex: -1,
@@ -22,8 +22,8 @@ const s = d({
     );
   }
 );
-u.displayName = "FunnelPageFooter";
+s.displayName = "FunnelPageFooter";
 export {
-  u as FunnelPageFooter,
-  s as funnelPageFooter
+  s as FunnelPageFooter,
+  u as funnelPageFooter
 };

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelPageHeader: import('tailwind-variants').TVReturnType<{
     gradient: {
         default: {
@@ -68,7 +68,7 @@ export interface FunnelPageHeaderProps extends PropsWithChildren<VariantProps<ty
  * - Responsive image display that adapts to screen size
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelPageHeaderProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageheader--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { tv as h } from "tailwind-variants";
+import { uyTv as h } from "@payfit/unity-themes";
 import { Text as n } from "../../text/Text.js";
 import { useFunnelLayoutContext as x } from "../FunnelLayout.context.js";
 const b = h({
@@ -22,19 +22,19 @@ const b = h({
   }
 }), v = p(
   ({ title: t, subtitle: u, imageSlot: r, imageSlotAltText: l, children: d, style: i, ...o }, s) => {
-    const { ids: m } = x(), { base: y, hgroup: c, figure: f, figcaption: g } = b({
+    const { ids: y } = x(), { base: m, hgroup: c, figure: f, figcaption: g } = b({
       gradient: i
     });
     return /* @__PURE__ */ e(
       "header",
       {
         ref: s,
-        className: y(),
+        className: m(),
         "data-unity-component": "FunnelPageHeader",
         "data-dd-privacy": "allow",
         ...o,
         children: [
-          /* @__PURE__ */ e("hgroup", { className: c(), id: m.funnelDescriptionId, children: [
+          /* @__PURE__ */ e("hgroup", { className: c(), id: y.funnelDescriptionId, children: [
             /* @__PURE__ */ a(n, { asElement: "h2", variant: "h1", children: t }),
             /* @__PURE__ */ a(n, { asElement: "h3", variant: "subtitle", color: "content.neutral.low", children: u }),
             d

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 declare const progressBar: import('tailwind-variants').TVReturnType<{
     isFull: {
         true: {

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { ProgressBar as n } from "react-aria-components";
-import { tv as d } from "tailwind-variants";
-const y = d({
+import { uyTv as n } from "@payfit/unity-themes";
+import { ProgressBar as d } from "react-aria-components";
+const y = n({
   slots: {
     base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
     meter: [
@@ -24,7 +24,7 @@ const y = d({
   ({ value: e, ...a }, s) => {
     const l = e >= 100, { base: u, meter: o } = y({ isFull: l });
     return /* @__PURE__ */ r(
-      n,
+      d,
       {
         ref: s,
         value: e,

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
     isSticky: {
         true: string;
@@ -46,7 +46,7 @@ export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeo
  * - Provides responsive sizing that adapts to content and screen size
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelSidebarProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelsidebar--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js

@@ -1,9 +1,9 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { useIntl as d } from "react-intl";
-import { tv as o } from "tailwind-variants";
+import { uyTv as d } from "@payfit/unity-themes";
+import { useIntl as o } from "react-intl";
 import { useFunnelLayoutContext as y } from "../FunnelLayout.context.js";
-const m = o({
+const m = d({
   base: "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0",
   variants: {
     isSticky: {
@@ -16,12 +16,12 @@ const m = o({
   }
 }), f = l(
   ({ children: e, isSticky: t, "aria-label": s, ...i }, r) => {
-    const { ids: a } = y(), n = d();
-    return /* @__PURE__ */ u(
+    const { ids: a } = y(), u = o();
+    return /* @__PURE__ */ n(
       "aside",
       {
         ref: r,
-        "aria-label": s ?? n.formatMessage({
+        "aria-label": s ?? u.formatMessage({
           id: "unity:layout:funnel:sidebar:aria-label",
           defaultMessage: "Process steps"
         }),

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
@@ -82,7 +82,7 @@ export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
  * - Supports optional global actions in the top bar
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelTopBarProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funneltopbar--docs unity-components.payfit.io}

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js

@@ -1,13 +1,13 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { forwardRef as x, useMemo as I } from "react";
-import { useIntl as N } from "react-intl";
-import { tv as w } from "tailwind-variants";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useIntl as w } from "react-intl";
 import { useBreakpointListener as M } from "../../../hooks/use-breakpoint-listener.js";
 import { Button as P } from "../../button/Button.js";
-import { IconButton as B } from "../../icon-button/IconButton.js";
-import { useFunnelLayoutContext as F } from "../FunnelLayout.context.js";
-import { FunnelProgressBar as T } from "./FunnelProgressBar.js";
-const A = w({
+import { IconButton as T } from "../../icon-button/IconButton.js";
+import { useFunnelLayoutContext as B } from "../FunnelLayout.context.js";
+import { FunnelProgressBar as F } from "./FunnelProgressBar.js";
+const A = N({
   slots: {
     base: ["uy:bg-surface-neutral uy:shadow-raising"],
     titleWrapper: [
@@ -30,7 +30,7 @@ const A = w({
     title: m,
     ...p
   }, y) => {
-    const a = N(), { ids: n } = F(), { base: f, titleWrapper: g, title: h } = A(), v = M(), b = !["xs", "sm"].includes(v), d = I(
+    const a = w(), { ids: n } = B(), { base: f, titleWrapper: g, title: h } = A(), v = M(), b = !["xs", "sm"].includes(v), d = I(
       () => ({
         navigationDescription: a.formatMessage({
           id: "unity:layout:funnel:top-bar:navigation-desc",
@@ -77,7 +77,7 @@ const A = w({
                     children: i
                   }
                 ) : /* @__PURE__ */ e(
-                  B,
+                  T,
                   {
                     variant: "ghost",
                     color: "neutral",
@@ -101,7 +101,7 @@ const A = w({
               ]
             }
           ),
-          c && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(T, { value: t ?? 0 }) }),
+          c && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(F, { value: t ?? 0 }) }),
           /* @__PURE__ */ e(
             "div",
             {

package/dist/esm/components/grid/Grid.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 import { grid } from './Grid.variants.js';
 export type GridContainerVariantProps = VariantProps<typeof grid>;
 type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';

package/dist/esm/components/grid/Grid.variants.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 export declare const grid: import('tailwind-variants').TVReturnType<{
     inline: {
         true: string;

package/dist/esm/components/grid/Grid.variants.js

@@ -1,5 +1,5 @@
-import { tv as t } from "tailwind-variants";
-const l = t(
+import { uyTv as u } from "@payfit/unity-themes";
+const l = u(
   {
     base: "uy:grid-layout",
     variants: {
@@ -48,7 +48,7 @@ const l = t(
   // {
   //   responsiveVariants: true,
   // },
-), y = t(
+), y = u(
   {
     variants: {
       colSpan: {

package/dist/esm/components/grid/GridItem.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 import { gridItem } from './Grid.variants.js';
 export type GridItemVariantProps = VariantProps<typeof gridItem>;
 type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';

package/dist/esm/components/icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { UnityIcon } from '@payfit/unity-icons';
+import { VariantProps } from '@payfit/unity-themes';
 import { HTMLAttributes } from 'react';
-import { VariantProps } from 'tailwind-variants';
 declare const icon: import('tailwind-variants').TVReturnType<{
     size: {
         20: string;

package/dist/esm/components/icon/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { IconSprite as i } from "@payfit/unity-icons";
-import { tv as d } from "tailwind-variants";
+import { uyTv as d } from "@payfit/unity-themes";
 const l = d({
   variants: {
     size: {

package/dist/esm/components/icon-button/CircularIconButton.d.ts

@@ -1,6 +1,6 @@
 import { UnityIcon } from '@payfit/unity-icons';
+import { VariantProps } from '@payfit/unity-themes';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const circularIconButton: import('tailwind-variants').TVReturnType<{
     size: {
         default: string;

package/dist/esm/components/icon-button/CircularIconButton.js

@@ -1,13 +1,13 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Button as v, Pressable as w } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
-import z from "../../hooks/use-id.js";
+import { uyTv as w } from "@payfit/unity-themes";
+import { Button as x, Pressable as z } from "react-aria-components";
+import I from "../../hooks/use-id.js";
 import { Icon as d } from "../icon/Icon.js";
 import { Spinner as y } from "../spinner/Spinner.js";
 import { Tooltip as b } from "../tooltip/Tooltip.js";
-const I = x({
+const N = w({
   base: [
-    "uy:rounded-circle uy:flex uy:items-center uy:justify-center uy:transition-colors",
+    "uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
     "uy:active:bg-surface-neutral-active",
     "uy:data-[pressed]:bg-surface-neutral-pressed",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
@@ -30,27 +30,28 @@ const I = x({
     color: "content.neutral.low"
   }
 });
-function N(m) {
-  const f = z(), {
+function B(m) {
+  const f = I(), {
     onPress: i,
     icon: n,
     color: p,
     size: r,
     isLoading: t,
-    title: l,
+    title: a,
     isDisabled: o,
     asElement: h = "default",
     className: g,
+    "aria-labelledby": v,
     ...s
-  } = m, a = `icon-button-label-${f}`, u = I({ class: g, color: p, size: r });
-  return h === "button" ? /* @__PURE__ */ e(b, { title: l, children: /* @__PURE__ */ c(
-    v,
+  } = m, l = `icon-button-label-${f}`, u = N({ class: g, color: p, size: r });
+  return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
+    x,
     {
       "data-dd-privacy": "allow",
       ...s,
       onPress: i,
       isDisabled: o || t,
-      "aria-labelledby": a,
+      "aria-labelledby": v ?? l,
       "aria-busy": t,
       className: u,
       children: [
@@ -63,17 +64,17 @@ function N(m) {
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: a, className: "uy:sr-only", children: l })
+        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
       ]
     }
-  ) }) : /* @__PURE__ */ e(b, { title: l, children: /* @__PURE__ */ e(
-    w,
+  ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
+    z,
     {
       "data-dd-privacy": "allow",
       ...s,
       onPress: i,
       isDisabled: o || t,
-      "aria-labelledby": a,
+      "aria-labelledby": l,
       "aria-busy": t,
       children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": o, className: u, children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
@@ -85,13 +86,13 @@ function N(m) {
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: a, className: "uy:sr-only", children: l })
+        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
       ] })
     }
   ) });
 }
-N.displayName = "CircularIconButton";
+B.displayName = "CircularIconButton";
 export {
-  N as CircularIconButton,
-  I as circularIconButton
+  B as CircularIconButton,
+  N as circularIconButton
 };

package/dist/esm/components/icon-button/IconButton.variants.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 export declare const iconButtonPrimary: import('tailwind-variants').TVReturnType<{
     variant: {
         primary: string;

package/dist/esm/components/icon-button/IconButton.variants.js

@@ -1,9 +1,9 @@
-import { tv as e } from "tailwind-variants";
+import { uyTv as e } from "@payfit/unity-themes";
 const t = e({
   slots: {
     button: [
       "uy:group",
-      "uy:w-500 uy:min-w-500 uy:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-75",
+      "uy:w-500 uy:min-w-500 uy:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-75 uy:cursor-pointer",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
     ],
     icon: "uy:w-250 uy:h-250"

package/dist/esm/components/input/Input.js

@@ -1,12 +1,12 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
-import { Input as h } from "react-aria-components";
-import { useIntl as I } from "react-intl";
-import { tv as N } from "tailwind-variants";
+import { uyTv as h } from "@payfit/unity-themes";
+import { Input as I } from "react-aria-components";
+import { useIntl as N } from "react-intl";
 import { CircularIconButton as W } from "../icon-button/CircularIconButton.js";
 import { Icon as M } from "../icon/Icon.js";
 import { Spinner as O } from "../spinner/Spinner.js";
-const S = N({
+const S = h({
   slots: {
     base: "uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
     prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:active:border-border-form-active",
@@ -72,7 +72,7 @@ const S = N({
     onClearButtonPress: t,
     ...a
   }, y) => {
-    const d = I(), {
+    const d = N(), {
       base: b,
       prefix: m,
       inputWrapper: c,
@@ -88,7 +88,7 @@ const S = N({
       l ? /* @__PURE__ */ e("span", { className: m(), children: l }) : null,
       /* @__PURE__ */ n("div", { className: c(), children: [
         /* @__PURE__ */ e(
-          h,
+          I,
           {
             "data-dd-privacy": "mask",
             ...a,