@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/multi-select-field/MultiSelectField.js

@@ -1,18 +1,18 @@
 import { jsxs as M, jsx as t } from "react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { useFormContext as T } from "react-hook-form";
-import { tv as g } from "tailwind-variants";
+import { forwardRef as T } from "react";
+import { uyTv as P } from "@payfit/unity-themes";
+import { useFormContext as g } from "react-hook-form";
 import { FormField as L } from "../form-field/FormField.js";
 import { FormControl as R } from "../form-field/parts/FormControl.js";
 import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
 import { FormHelperText as k } from "../form-field/parts/FormHelperText.js";
 import { FormLabel as q } from "../form-field/parts/FormLabel.js";
 import { MultiSelect as u } from "../multi-select/MultiSelect.js";
-const v = g({
+const v = P({
   base: "uy:flex uy:flex-col uy:gap-100"
 });
 function w(e, i) {
-  const { control: l, setValue: f } = T(), {
+  const { control: l, setValue: f } = g(), {
     name: o,
     label: x,
     helperText: n,
@@ -73,7 +73,7 @@ function w(e, i) {
     }
   );
 }
-const C = P(function(i, l) {
+const C = T(function(i, l) {
   return w(i, l);
 });
 C.displayName = "MultiSelectField";

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,13 +1,12 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import s, { useState as G, useCallback as j } from "react";
-import { Button as B } from "react-aria-components";
-import { twMerge as D } from "tailwind-merge";
-import { tv as _ } from "tailwind-variants";
-import $ from "../../../hooks/use-id.js";
-import { Icon as k } from "../../icon/Icon.js";
-import { navItemBase as z } from "./NavItem.js";
-const H = _({
-  extend: z,
+import { uyTv as B } from "@payfit/unity-themes";
+import { Button as D } from "react-aria-components";
+import _ from "../../../hooks/use-id.js";
+import { Icon as $ } from "../../icon/Icon.js";
+import { navItemBase as k } from "./NavItem.js";
+const z = B({
+  extend: k,
   slots: {
     caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
     contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
@@ -30,7 +29,7 @@ const H = _({
     }
   }
 });
-function M({
+function H({
   children: y,
   label: p,
   prefix: i,
@@ -40,34 +39,34 @@ function M({
   onToggle: n,
   ...x
 }) {
-  const u = $(), [h, b] = G(f), r = l !== void 0, e = r ? l : h, v = j(() => {
-    r || b((t) => !t), n == null || n(!e);
-  }, [r, e, n]), N = s.Children.map(y, (t) => s.isValidElement(t) ? s.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
+  const u = _(), [h, b] = G(f), o = l !== void 0, e = o ? l : h, v = j(() => {
+    o || b((t) => !t), n == null || n(!e);
+  }, [o, e, n]), N = s.Children.map(y, (t) => s.isValidElement(t) ? s.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
     base: I,
-    prefix: g,
-    label: w,
-    suffix: E,
-    content: S,
+    prefix: E,
+    label: S,
+    suffix: g,
+    content: w,
     contentWrapper: C,
     caret: W
-  } = H({ level: 0, expanded: e });
-  return /* @__PURE__ */ o("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-    /* @__PURE__ */ o(
-      B,
+  } = z({ level: 0, expanded: e });
+  return /* @__PURE__ */ r("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ r(
+      D,
       {
         id: c,
-        className: D(I(), "uy:w-full"),
+        className: I({ className: "uy:w-full" }),
         onPress: v,
         "aria-expanded": e,
         "aria-controls": d,
         ...x,
         children: [
-          i && /* @__PURE__ */ a("span", { className: g(), children: i({ isExpanded: e }) }),
-          /* @__PURE__ */ a("span", { className: w(), children: p }),
-          /* @__PURE__ */ o("span", { className: E(), role: "presentation", children: [
+          i && /* @__PURE__ */ a("span", { className: E(), children: i({ isExpanded: e }) }),
+          /* @__PURE__ */ a("span", { className: S(), children: p }),
+          /* @__PURE__ */ r("span", { className: g(), role: "presentation", children: [
             m,
             /* @__PURE__ */ a(
-              k,
+              $,
               {
                 src: "CaretDownOutlined",
                 alt: "expand group",
@@ -89,7 +88,7 @@ function M({
           "ul",
           {
             id: d,
-            className: S(),
+            className: w(),
             "aria-labelledby": c,
             "aria-hidden": !e,
             children: N
@@ -99,7 +98,7 @@ function M({
     )
   ] });
 }
-M.displayName = "NavGroup";
+H.displayName = "NavGroup";
 export {
-  M as NavGroup
+  H as NavGroup
 };

package/dist/esm/components/nav/parts/NavItem.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { DataAttributes } from '../../../types/DataAttributes.js';
 export declare const navItemBase: import('tailwind-variants').TVReturnType<{
     level: {

package/dist/esm/components/nav/parts/NavItem.js

@@ -1,9 +1,8 @@
 import { jsx as u, jsxs as h } from "react/jsx-runtime";
-import { Link as w, Button as N } from "react-aria-components";
-import { twMerge as I } from "tailwind-merge";
-import { tv as l } from "tailwind-variants";
+import { uyTv as y, uyMerge as N } from "@payfit/unity-themes";
+import { Link as w, Button as I } from "react-aria-components";
 import { useRouter as j } from "../../../providers/router/RouterProvider.js";
-const A = l({
+const A = y({
   slots: {
     base: [
       "uy:group uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
@@ -29,7 +28,7 @@ const A = l({
       false: ""
     }
   }
-}), S = l({
+}), S = y({
   extend: A,
   variants: {
     isActive: {
@@ -47,7 +46,7 @@ const A = l({
   }
 });
 function k({
-  children: y,
+  children: o,
   level: s = 0,
   prefix: n,
   suffix: r,
@@ -58,11 +57,11 @@ function k({
   isExact: f = !1,
   ...d
 }) {
-  const i = j(), b = e ? w : N, t = i && e ? i.isActive(e.toString(), f) : p, {
+  const i = j(), b = e ? w : I, t = i && e ? i.isActive(e.toString(), f) : p, {
     base: v,
-    label: o,
-    prefix: m,
-    suffix: g
+    label: l,
+    prefix: g,
+    suffix: m
   } = S({ level: s, isActive: t, isDisabled: a }), x = Object.assign(
     {},
     t !== void 0 && {
@@ -74,7 +73,7 @@ function k({
   return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
     b,
     {
-      className: I(v(), o()),
+      className: N(v(), l()),
       href: e,
       onPress: c,
       isDisabled: a,
@@ -82,9 +81,9 @@ function k({
       ...x,
       ...d,
       children: [
-        n && /* @__PURE__ */ u("span", { className: m(), children: n({ isCurrent: t ?? !1 }) }),
-        /* @__PURE__ */ u("span", { className: o(), children: y }),
-        r && /* @__PURE__ */ u("span", { className: g(), children: r })
+        n && /* @__PURE__ */ u("span", { className: g(), children: n({ isCurrent: t ?? !1 }) }),
+        /* @__PURE__ */ u("span", { className: l(), children: o }),
+        r && /* @__PURE__ */ u("span", { className: m(), children: r })
       ]
     }
   ) });

package/dist/esm/components/number-field/NumberField.js

@@ -1,14 +1,14 @@
-import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import { forwardRef as C } from "react";
-import { useFormContext as I } from "react-hook-form";
-import { tv as j } from "tailwind-variants";
-import { FormField as B } from "../form-field/FormField.js";
-import { FormControl as P } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFormContext as T } from "react-hook-form";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as B } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as P } from "../form-field/parts/FormFeedbackText.js";
 import { FormHelperText as g } from "../form-field/parts/FormHelperText.js";
 import { FormLabel as k } from "../form-field/parts/FormLabel.js";
 import { NumberInput as v } from "../number-input/NumberInput.js";
-const w = j({
+const w = I({
   base: "uy:flex uy:flex-col uy:gap-100"
 });
 function H({
@@ -27,17 +27,17 @@ function H({
   onClearButtonPress: d,
   ...a
 }, F) {
-  const { control: b, setValue: x } = I(), N = {
+  const { control: b, setValue: x } = T(), N = {
     isRequired: l,
     isInvalid: s,
     isLoading: u,
     isDisabled: c,
     isReadOnly: p
-  }, h = d ?? (() => {
+  }, y = d ?? (() => {
     x(o, NaN);
   });
-  return /* @__PURE__ */ y(
-    B,
+  return /* @__PURE__ */ h(
+    j,
     {
       control: b,
       name: o,
@@ -46,16 +46,16 @@ function H({
       children: [
         /* @__PURE__ */ r(k, { requiredVariant: f, children: e }),
         m && /* @__PURE__ */ r(g, { children: m }),
-        /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(
+        /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(
           v,
           {
             ref: F,
-            onClearButtonPress: h,
+            onClearButtonPress: y,
             defaultValue: t,
             ...a
           }
         ) }),
-        /* @__PURE__ */ r(T, { children: n }),
+        /* @__PURE__ */ r(P, { children: n }),
         i
       ]
     }

package/dist/esm/components/number-input/NumberInput.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactElement } from 'react';
 import { NumberFieldProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const numberInput: import('tailwind-variants').TVReturnType<{
     isReadOnly: {
         true: {
@@ -136,5 +136,5 @@ export interface NumberProps extends VariantProps<typeof numberInput>, Omit<Numb
  * @see {@link NumberProps} for all available props
  * @remarks {@link https://www.payfit.design/24f360409/p/545bd2-number-field|Design docs}
  */
-declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLInputElement>>;
 export { NumberInput };

package/dist/esm/components/number-input/NumberInput.js

@@ -1,13 +1,13 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { forwardRef as G } from "react";
+import { uyTv as T } from "@payfit/unity-themes";
 import { NumberField as W, Group as q, Input as A } from "react-aria-components";
-import { tv as C } from "tailwind-variants";
-import { Icon as H } from "../icon/Icon.js";
+import { Icon as C } from "../icon/Icon.js";
 import "@payfit/unity-icons";
-import { useIntl as J } from "react-intl";
+import { useIntl as H } from "react-intl";
 import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
-import { Spinner as K } from "../spinner/Spinner.js";
-const Q = C({
+import { Spinner as J } from "../spinner/Spinner.js";
+const K = T({
   slots: {
     base: [
       "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
@@ -81,27 +81,27 @@ const Q = C({
       }
     }
   }
-}), R = G(
+}), Q = G(
   ({
     withControls: b = !1,
     defaultValue: u,
-    formatOptions: p,
+    formatOptions: g,
     isDisabled: f,
     isInvalid: y,
     isLoading: a,
     isReadOnly: d,
-    isRequired: g,
+    isRequired: x,
     maxValue: n,
     minValue: i,
     prefix: m,
-    onBlur: x,
-    onChange: w,
+    onBlur: w,
+    onChange: v,
     onClearButtonPress: l,
-    step: v,
+    step: h,
     suffix: c,
     value: r,
-    ...h
-  }, N) => {
+    ...N
+  }, p) => {
     const {
       base: M,
       wrapper: I,
@@ -110,48 +110,48 @@ const Q = C({
       suffix: O,
       state: S,
       controls: D
-    } = Q({ isReadOnly: d }), t = J(), k = r !== void 0 && !isNaN(r), z = u !== void 0 && !isNaN(u), F = (k || z) && !b && !a && !d && !f;
-    return /* @__PURE__ */ o(
+    } = K({ isReadOnly: d }), o = H(), k = r !== void 0 && !isNaN(r), z = u !== void 0 && !isNaN(u), F = (k || z) && !b && !a && !d && !f;
+    return /* @__PURE__ */ t(
       W,
       {
-        ref: N,
+        ref: p,
         className: M(),
         value: r,
         defaultValue: u,
         minValue: i,
         maxValue: n,
-        step: v,
+        step: h,
         isDisabled: f,
         isReadOnly: d,
         isInvalid: y,
-        isRequired: g,
+        isRequired: x,
         "aria-busy": a,
-        onChange: w,
-        formatOptions: p,
-        onBlur: x,
-        ...h,
+        onChange: v,
+        formatOptions: g,
+        onBlur: w,
+        ...N,
         children: [
           m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null,
-          /* @__PURE__ */ o(q, { className: I(), children: [
-            /* @__PURE__ */ e(A, { className: j() }),
-            /* @__PURE__ */ o("div", { className: S(), children: [
+          /* @__PURE__ */ t(q, { className: I(), children: [
+            /* @__PURE__ */ e(A, { ref: p, className: j() }),
+            /* @__PURE__ */ t("div", { className: S(), children: [
               a && /* @__PURE__ */ e(
-                K,
+                J,
                 {
                   color: "inherit",
                   size: "small",
-                  label: t.formatMessage({
+                  label: o.formatMessage({
                     id: "unity:component:common:loading:label",
                     defaultMessage: "Loading..."
                   })
                 }
               ),
               y && /* @__PURE__ */ e(
-                H,
+                C,
                 {
                   src: "WarningCircleOutlined",
                   color: "content.form.invalid",
-                  alt: t.formatMessage({
+                  alt: o.formatMessage({
                     id: "unity:component:form-field:form-input:error:alt",
                     defaultMessage: "Error"
                   })
@@ -160,7 +160,7 @@ const Q = C({
               F && /* @__PURE__ */ e(
                 s,
                 {
-                  title: t.formatMessage({
+                  title: o.formatMessage({
                     id: "unity:component:common:clear:title",
                     defaultMessage: "Clear"
                   }),
@@ -172,7 +172,7 @@ const Q = C({
                 }
               )
             ] }),
-            b && /* @__PURE__ */ o("div", { className: D(), children: [
+            b && /* @__PURE__ */ t("div", { className: D(), children: [
               /* @__PURE__ */ e(
                 s,
                 {
@@ -180,7 +180,7 @@ const Q = C({
                   icon: "MinusOutlined",
                   slot: "decrement",
                   isDisabled: i !== void 0 && r === i,
-                  title: t.formatMessage({
+                  title: o.formatMessage({
                     id: "unity:component:form-field:number-input:decrement:title",
                     defaultMessage: "decrement"
                   })
@@ -193,7 +193,7 @@ const Q = C({
                   icon: "PlusOutlined",
                   slot: "increment",
                   isDisabled: n !== void 0 && r === n,
-                  title: t.formatMessage({
+                  title: o.formatMessage({
                     id: "unity:component:form-field:number-input:increment:title",
                     defaultMessage: "increment"
                   })
@@ -207,8 +207,8 @@ const Q = C({
     );
   }
 );
-R.displayName = "NumberInput";
+Q.displayName = "NumberInput";
 export {
-  R as NumberInput,
-  Q as numberInput
+  Q as NumberInput,
+  K as numberInput
 };

package/dist/esm/components/page/Page.d.ts

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

package/dist/esm/components/page/Page.js

@@ -1,6 +1,6 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { tv as t } from "tailwind-variants";
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
 const o = t({
   base: "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
   variants: {
@@ -21,10 +21,10 @@ const o = t({
   defaultVariants: {
     variant: "default"
   }
-}), l = y(
+}), l = m(
   ({ children: r, variant: a, ...d }, u) => {
     const e = o({ variant: a });
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ y(
       "main",
       {
         ...d,

package/dist/esm/components/page/parts/PageHeader.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { BreadcrumbProps } from '../../breadcrumbs/parts/Breadcrumb.js';
 export declare const pageHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {

package/dist/esm/components/page/parts/PageHeader.js

@@ -1,9 +1,9 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { tv as n } from "tailwind-variants";
-import { Breadcrumbs as u } from "../../breadcrumbs/Breadcrumbs.js";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Breadcrumbs as n } from "../../breadcrumbs/Breadcrumbs.js";
 import { Breadcrumb as y } from "../../breadcrumbs/parts/Breadcrumb.js";
-const x = n({
+const x = u({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-400",
     headingActionsWrapper: "uy:flex uy:flex-col uy:gap-400 uy:md:flex-row",
@@ -19,7 +19,7 @@ const x = n({
       actions: m
     } = x();
     return /* @__PURE__ */ o("header", { "data-dd-privacy": "allow", ...i, ref: c, className: d(), children: [
-      r && /* @__PURE__ */ e(u, { items: r, wrap: "nowrap", children: (l) => /* @__PURE__ */ e(y, { href: l.href, label: l.label }) }),
+      r && /* @__PURE__ */ e(n, { items: r, wrap: "nowrap", children: (l) => /* @__PURE__ */ e(y, { href: l.href, label: l.label }) }),
       /* @__PURE__ */ o("div", { className: f(), children: [
         /* @__PURE__ */ e("div", { className: t(), children: s }),
         a && /* @__PURE__ */ e("div", { className: m(), children: a })

package/dist/esm/components/pagination/Pagination.d.ts

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

package/dist/esm/components/pagination/Pagination.js

@@ -1,21 +1,21 @@
-import { jsxs as q, jsx as o } from "react/jsx-runtime";
-import { forwardRef as T, useRef as E, useMemo as N } from "react";
-import { useId as R } from "react-aria";
-import { useIntl as W } from "react-intl";
-import { useOverlayTriggerState as $ } from "react-stately";
-import { tv as j } from "tailwind-variants";
+import { jsxs as T, jsx as o } from "react/jsx-runtime";
+import { forwardRef as q, useRef as E, useMemo as N } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { useId as W } from "react-aria";
+import { useIntl as $ } from "react-intl";
+import { useOverlayTriggerState as j } from "react-stately";
 import { usePagination as J } from "./hooks/use-pagination.js";
 import { PaginationEllipsis as K } from "./parts/PaginationEllipsis.js";
 import { PaginationJumpDialog as O } from "./parts/PaginationJumpDialog.js";
 import { PaginationLink as S } from "./parts/PaginationLink.js";
 import { PaginationNavButton as D } from "./parts/PaginationNavButton.js";
 import { generatePaginationWithWindow as x } from "./utils/pagination-window.js";
-const _ = j({
+const _ = R({
   slots: {
     base: "uy:flex uy:gap-100 uy:relative",
     pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
   }
-}), z = 7, B = T(
+}), z = 7, B = q(
   ({
     pageCount: i,
     defaultPage: p,
@@ -26,12 +26,12 @@ const _ = j({
     onPreviousPress: c,
     ...A
   }, L) => {
-    const v = R(), u = W(), b = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
+    const v = W(), u = $(), y = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
       pageCount: i,
-      initialPage: b ? d : p,
+      initialPage: y ? d : p,
       onPageChange: g,
-      isControlled: b
-    }), f = $({}), r = E(/* @__PURE__ */ new Map()), h = N(
+      isControlled: y
+    }), f = j({}), r = E(/* @__PURE__ */ new Map()), h = N(
       () => x(
         i,
         s,
@@ -45,7 +45,7 @@ const _ = j({
         const e = r.current.get(a);
         e && e.focus();
       });
-    }, y = (a, e) => {
+    }, b = (a, e) => {
       switch (a.key) {
         case "ArrowLeft":
         case "ArrowUp":
@@ -90,7 +90,7 @@ const _ = j({
         }
       )
     }, { base: I, pagesList: M } = _();
-    return /* @__PURE__ */ q(
+    return /* @__PURE__ */ T(
       "nav",
       {
         "data-dd-privacy": "allow",
@@ -136,7 +136,7 @@ const _ = j({
                       t && (l == null || l(a.value));
                     },
                     onKeyDown: (t) => {
-                      y(t, a.value);
+                      b(t, a.value);
                     },
                     isActive: a.value === s,
                     value: a.value,
@@ -150,7 +150,7 @@ const _ = j({
               {
                 value: a.value,
                 onKeyDown: (t) => {
-                  y(t, -1);
+                  b(t, -1);
                 },
                 onPress: () => {
                   f.open();

package/dist/esm/components/pagination/parts/PaginationEllipsis.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ButtonProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { paginationLink } from './PaginationLink.js';
 export interface PaginationEllipsisProps extends Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'>, VariantProps<typeof paginationLink> {
     value: [number, number];

package/dist/esm/components/pagination/parts/PaginationEllipsis.js

@@ -1,16 +1,16 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import { Button as a } from "react-aria-components";
-import { useIntl as y } from "react-intl";
-import { tv as p } from "tailwind-variants";
-const c = p({
+import { uyTv as a } from "@payfit/unity-themes";
+import { Button as y } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+const c = a({
   base: [
     "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:cursor-default",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
   ]
 }), f = r(({ value: s, ...e }, o) => {
-  const t = y(), [n, l] = s;
-  return /* @__PURE__ */ u(a, { ref: o, className: c(), ...e, children: [
+  const t = p(), [n, u] = s;
+  return /* @__PURE__ */ l(y, { ref: o, className: c(), ...e, children: [
     /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
     /* @__PURE__ */ i("span", { className: "uy:sr-only", children: t.formatMessage(
       {
@@ -19,7 +19,7 @@ const c = p({
       },
       {
         start: n,
-        end: l
+        end: u
       }
     ) })
   ] });