@payfit/unity-components 1.0.0 → 1.1.1-beta.1

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
       }
     ) })
   ] });

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

@@ -1,12 +1,12 @@
 import { jsxs as n, Fragment as N, jsx as o } from "react/jsx-runtime";
 import { useRef as l } from "react";
-import { useOverlayTrigger as O, useButton as P, useOverlay as D } from "react-aria";
-import { useIntl as B } from "react-intl";
-import { tv as I } from "tailwind-variants";
+import { uyTv as O } from "@payfit/unity-themes";
+import { useOverlayTrigger as P, useButton as D, useOverlay as B } from "react-aria";
+import { useIntl as I } from "react-intl";
 import { Button as c } from "../../button/Button.js";
 import { Icon as J } from "../../icon/Icon.js";
 import { Label as R } from "../../label/Label.js";
-const k = I({
+const k = O({
   slots: {
     jumpButton: "uy:sr-only uy:outline-none uy:focus:not-sr-only uy:focus:absolute uy:focus:bottom-full uy:focus:z-10 uy:focus:m-100 uy:focus:rounded-50 uy:focus:underline uy:focus:bg-transparent uy:focus:text-content-primary uy:focus:typography-action uy:focus:ring-2 uy:focus:ring-offset-2 uy:focus:ring-utility-focus-ring",
     jumpPopover: "uy:fixed uy:top-1/2 uy:left-1/2 uy:z-20 uy:transform uy:-translate-x-1/2 uy:-translate-y-1/2 uy:bg-surface-neutral uy:p-200 uy:rounded-200 uy:shadow-floating",
@@ -17,16 +17,16 @@ const k = I({
     jumpActions: "uy:flex uy:gap-150 uy:justify-end uy:mt-100"
   }
 });
-function G({
+function $({
   pageCount: t,
   onJumpToPage: f,
   state: e
 }) {
-  const u = B(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = O(
+  const u = I(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = P(
     { type: "dialog" },
     e,
     i
-  ), { buttonProps: g } = P(
+  ), { buttonProps: g } = D(
     {
       ...d,
       "aria-label": u.formatMessage({
@@ -35,7 +35,7 @@ function G({
       })
     },
     i
-  ), { overlayProps: a } = D(
+  ), { overlayProps: a } = B(
     {
       isOpen: e.isOpen,
       onClose: e.close.bind(e),
@@ -139,5 +139,5 @@ function G({
   ] });
 }
 export {
-  G as PaginationJumpDialog
+  $ as PaginationJumpDialog
 };

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

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

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

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import { Link as s } from "react-aria-components";
-import { useIntl as o } from "react-intl";
-import { tv as l } from "tailwind-variants";
-const d = l({
+import { uyTv as s } from "@payfit/unity-themes";
+import { Link as o } from "react-aria-components";
+import { useIntl as l } from "react-intl";
+const d = s({
   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:transition-colors",
     "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
@@ -20,9 +20,9 @@ const d = l({
   }
 }), y = i(
   ({ isActive: e, isDisabled: a, ...t }, n) => {
-    const u = o();
+    const u = l();
     return /* @__PURE__ */ r(
-      s,
+      o,
       {
         ref: n,
         className: d({ isActive: e }),

package/dist/esm/components/payfit-brand/PayFitBrand.js

@@ -1,8 +1,8 @@
 import { jsxs as y, jsx as c } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import { tv as f } from "tailwind-variants";
-import g from "../../hooks/use-id.js";
-const u = f({
+import { uyTv as f } from "@payfit/unity-themes";
+import u from "../../hooks/use-id.js";
+const g = f({
   slots: {
     base: "uy:min-w-[104px] uy:aspect-[13/4]",
     monogram: "",
@@ -29,7 +29,7 @@ const u = f({
   }
 }), Z = p(
   ({ color: l, label: n, description: a, ...r }, i) => {
-    const o = g(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = u({ color: l }), d = {
+    const o = u(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = g({ color: l }), d = {
       focusable: !1,
       role: "img",
       "aria-labelledby": t,

package/dist/esm/components/pill/Pill.d.ts

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

package/dist/esm/components/pill/Pill.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { tv as o } from "tailwind-variants";
+import { uyTv as o } from "@payfit/unity-themes";
 const y = o({
   base: "uy:min-w-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small",
   variants: {

package/dist/esm/components/popover/Popover.js

@@ -1,10 +1,10 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { Popover as p, Dialog as g, DialogTrigger as m } from "react-aria-components";
+import { uyTv as p } from "@payfit/unity-themes";
+import { Popover as g, Dialog as m, DialogTrigger as c } from "react-aria-components";
 import { DialogTrigger as j } from "react-aria-components";
-import { tv as c } from "tailwind-variants";
 import { PopoverHeader as f } from "./parts/PopoverHeader.js";
-const x = c({
+const x = p({
   slots: {
     base: [
       "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-floating uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
@@ -21,7 +21,7 @@ const x = c({
   }
 }), b = s((a, e) => {
   const { children: o, title: r, isTitleSrOnly: n, displayCloseButton: i, ...l } = a, { base: u, dialog: d } = x();
-  return /* @__PURE__ */ t(p, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ y(g, { className: d(), role: "dialog", children: [
+  return /* @__PURE__ */ t(g, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ y(m, { className: d(), role: "dialog", children: [
     /* @__PURE__ */ t(
       f,
       {
@@ -34,7 +34,7 @@ const x = c({
   ] }) });
 });
 b.displayName = "Popover";
-m.displayName = "PopoverTrigger";
+c.displayName = "PopoverTrigger";
 export {
   b as Popover,
   j as PopoverTrigger

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as u, useContext as d } from "react";
-import { OverlayTriggerStateContext as y, Heading as p } from "react-aria-components";
-import { useIntl as f } from "react-intl";
-import { tv as g } from "tailwind-variants";
+import { forwardRef as u, useContext as y } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { OverlayTriggerStateContext as p, Heading as f } from "react-aria-components";
+import { useIntl as g } from "react-intl";
 import { IconButton as h } from "../../icon-button/IconButton.js";
-const v = g({
+const v = d({
   slots: {
     base: "uy:flex uy:justify-between",
     heading: "uy:content-center",
@@ -23,10 +23,10 @@ const v = g({
   }
 }), b = u(
   ({ title: t, isTitleSrOnly: n, displayCloseButton: a }, r) => {
-    const e = d(y), s = f(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
+    const e = y(p), s = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
     return /* @__PURE__ */ m("div", { className: l(), children: [
       /* @__PURE__ */ o(
-        p,
+        f,
         {
           ref: r,
           slot: "title",