@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/badge/Badge.js

@@ -1,29 +1,25 @@
 import { jsx as c } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { Slot as y } from "@radix-ui/react-slot";
-import { twMerge as i } from "tailwind-merge";
-import { tv as g } from "tailwind-variants";
-const d = g(
-  {
-    base: "uy:inline-block uy:rounded-75 uy:px-75 uy:py-25 uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center",
-    variants: {
-      variant: {
-        success: "uy:bg-surface-success-low uy:text-content-success-high",
-        warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
-        danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
-        neutral: "uy:bg-surface-neutral-low uy:text-content-neutral",
-        promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
-        attention: "uy:bg-surface-danger uy:text-content-inverted",
-        numeric: "uy:bg-surface-info-low uy:text-content-info-high",
-        contextual: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:text-content-neutral"
-      }
-    },
-    defaultVariants: {
-      variant: "neutral"
+import { uyTv as y } from "@payfit/unity-themes";
+import { Slot as i } from "@radix-ui/react-slot";
+const g = y({
+  base: "uy:inline-block uy:rounded-75 uy:px-75 uy:py-25 uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center",
+  variants: {
+    variant: {
+      success: "uy:bg-surface-success-low uy:text-content-success-high",
+      warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
+      danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
+      neutral: "uy:bg-surface-neutral-low uy:text-content-neutral",
+      promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
+      attention: "uy:bg-surface-danger uy:text-content-inverted",
+      numeric: "uy:bg-surface-info-low uy:text-content-info-high",
+      contextual: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:text-content-neutral"
     }
   },
-  { twMerge: !1 }
-), f = {
+  defaultVariants: {
+    variant: "neutral"
+  }
+}), d = {
   success: "status",
   warning: "alert",
   danger: "alert",
@@ -32,30 +28,30 @@ const d = g(
   attention: "alert",
   contextual: "status",
   numeric: "status"
-}, m = l(
+}, f = l(
   ({
     className: e,
     variant: t = "neutral",
-    role: r,
+    role: n,
     asChild: a = !1,
-    children: n,
-    ...o
-  }, u) => {
-    const s = r ?? f[t] ?? "status";
+    children: r,
+    ...u
+  }, o) => {
+    const s = n ?? d[t] ?? "status";
     return /* @__PURE__ */ c(
-      a ? y : "span",
+      a ? i : "span",
       {
         "data-dd-privacy": "allow",
-        ref: u,
-        className: i(d({ variant: t }), e),
+        ref: o,
+        className: g({ variant: t, className: e }),
         role: s,
-        ...o,
-        children: n
+        ...u,
+        children: r
       }
     );
   }
 );
-m.displayName = "Badge";
+f.displayName = "Badge";
 export {
-  m as Badge
+  f as Badge
 };

package/dist/esm/components/bottom-sheet/BottomSheet.d.ts

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

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { ModalOverlay as c, Modal as h, Dialog as p } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
+import { uyTv as c } from "@payfit/unity-themes";
+import { ModalOverlay as h, Modal as p, Dialog as x } from "react-aria-components";
 import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.js";
-const g = x({
+const g = c({
   slots: {
     overlay: [
       "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
@@ -25,26 +25,26 @@ const g = x({
   }
 }), v = s(
   ({
-    children: e,
+    children: t,
     isOpen: o,
     onOpenChange: a,
     defaultOpen: u,
-    isDismissable: r = !0,
-    isKeyboardDismissDisabled: y = !1,
+    isDismissable: y = !0,
+    isKeyboardDismissDisabled: r = !1,
     ...i
   }, l) => {
     const { overlay: d, wrapper: n, content: m } = g();
-    return /* @__PURE__ */ t(
-      c,
+    return /* @__PURE__ */ e(
+      h,
       {
         className: d(),
         isOpen: o,
         onOpenChange: a,
         defaultOpen: u,
-        isDismissable: r,
-        isKeyboardDismissDisabled: y,
+        isDismissable: y,
+        isKeyboardDismissDisabled: r,
         children: /* @__PURE__ */ f(
-          h,
+          p,
           {
             "data-dd-privacy": "allow",
             ...i,
@@ -52,8 +52,8 @@ const g = x({
             className: n(),
             "data-unity-bottom-sheet": !0,
             children: [
-              /* @__PURE__ */ t(w, {}),
-              /* @__PURE__ */ t(p, { className: m(), children: e })
+              /* @__PURE__ */ e(w, {}),
+              /* @__PURE__ */ e(x, { className: m(), children: t })
             ]
           }
         )

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.d.ts

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

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { tv as y } from "tailwind-variants";
-const s = y({
+import { forwardRef as y } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+const s = n({
   slots: {
     base: [
       "uy:bg-surface-neutral uy:typography-body uy:text-content-neutral",
@@ -13,7 +13,7 @@ const s = y({
       "uy:h-full uy:min-h-0"
     ]
   }
-}), f = n(
+}), f = y(
   ({ children: o, ...t }, l) => {
     const { base: r, scroller: u } = s();
     return /* @__PURE__ */ e("section", { ref: l, className: r(), ...t, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.js

@@ -1,10 +1,10 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as b, useContext as g } from "react";
-import { useDrag as x } from "@use-gesture/react";
-import { OverlayTriggerStateContext as D } from "react-aria-components";
-import { tv as v } from "tailwind-variants";
+import { uyTv as x } from "@payfit/unity-themes";
+import { useDrag as D } from "@use-gesture/react";
+import { OverlayTriggerStateContext as v } from "react-aria-components";
 import { useBreakpointListener as S } from "../../../hooks/use-breakpoint-listener.js";
-const I = v({
+const T = x({
   slots: {
     base: [
       "uy:md:hidden uy:mx-auto uy:py-100 uy:w-500",
@@ -12,9 +12,9 @@ const I = v({
     ],
     indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
   }
-}), N = 100;
-function T() {
-  const r = b(null), o = g(D), n = S(), { base: i, indicator: l } = I(), m = n === "xs" || n === "sm", u = x(
+}), I = 100;
+function N() {
+  const r = b(null), o = g(v), n = S(), { base: i, indicator: l } = T(), m = n === "xs" || n === "sm", u = D(
     (c) => {
       var s;
       const {
@@ -38,7 +38,7 @@ function T() {
           t.style.transform = "translate3d(0, 0, 0)";
           return;
         }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > N || d > 0 ? o && setTimeout(() => {
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > I || d > 0 ? o && setTimeout(() => {
           o.close();
         }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
       }
@@ -60,8 +60,8 @@ function T() {
     }
   );
 }
-T.displayName = "BottomSheetDragIndicator";
+N.displayName = "BottomSheetDragIndicator";
 export {
-  T as BottomSheetDragIndicator,
-  I as bottomSheetDragIndicator
+  N as BottomSheetDragIndicator,
+  T as bottomSheetDragIndicator
 };

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export interface BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
     className?: string;

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { tv as a } from "tailwind-variants";
+import { uyTv as a } from "@payfit/unity-themes";
 const s = a({
   base: [
     "uy:py-150 uy:px-300 uy:w-full",
@@ -11,13 +11,13 @@ const s = a({
     "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
   ]
 }), m = y(
-  ({ children: t, className: o, ...e }, r) => /* @__PURE__ */ u(
+  ({ children: o, className: t, ...e }, r) => /* @__PURE__ */ u(
     "footer",
     {
       ref: r,
-      className: s({ class: o }),
+      className: s({ class: t }),
       ...e,
-      children: t
+      children: o
     }
   )
 );

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.d.ts

@@ -1,10 +1,10 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
@@ -12,8 +12,8 @@ export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };
@@ -26,8 +26,8 @@ export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
             buttonContainer?: import('tailwind-merge').ClassNameValue;
         };

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { Heading as y } from "react-aria-components";
-import { tv as c } from "tailwind-variants";
+import { forwardRef as y } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { Heading as c } from "react-aria-components";
 import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
-const d = c({
+const d = i({
   slots: {
     base: [
       "uy:py-200 uy:px-300 uy:w-full",
@@ -18,12 +18,12 @@ const d = c({
     ],
     buttonContainer: ["uy:flex-shrink-0 uy:flex-grow-0 uy:w-[28px]"]
   }
-}), f = i(
+}), f = y(
   ({ children: o, ...r }, n) => {
     const { base: u, content: l, heading: a, buttonContainer: t } = d();
     return /* @__PURE__ */ e("header", { ref: n, className: u(), ...r, children: /* @__PURE__ */ s("div", { className: l(), children: [
       /* @__PURE__ */ e("div", { className: t() }),
-      /* @__PURE__ */ e(y, { slot: "title", className: a(), children: o }),
+      /* @__PURE__ */ e(c, { slot: "title", className: a(), children: o }),
       /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
         m,
         {

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.d.ts

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

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,7 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
 import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { BreadcrumbProps } from './parts/Breadcrumb.js';
 import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
 export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -1,5 +1,5 @@
-import { tv as a } from "tailwind-variants";
-const t = a({
+import { uyTv as a } from "@payfit/unity-themes";
+const r = a({
   slots: {
     base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
     breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:sm:items-center"
@@ -16,5 +16,5 @@ const t = a({
   }
 });
 export {
-  t as breadcrumbsVariant
+  r as breadcrumbsVariant
 };

package/dist/esm/components/button/Button.js

@@ -1,69 +1,61 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as b } from "react";
-import { Button as v } from "react-aria-components";
-import { twMerge as s } from "tailwind-merge";
-import { Icon as w } from "../icon/Icon.js";
-import { Spinner as x } from "../spinner/Spinner.js";
-import { buttonGhost as B, buttonOutlined as N, buttonFilled as j } from "./Button.variants.js";
-const M = h(
+import { jsx as m, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as x } from "react";
+import { uyMerge as l } from "@payfit/unity-themes";
+import { Button as b } from "react-aria-components";
+import { Icon as v } from "../icon/Icon.js";
+import { Spinner as B } from "../spinner/Spinner.js";
+import { buttonGhost as w, buttonOutlined as N, buttonFilled as j } from "./Button.variants.js";
+const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit", label: "Loading..." }) : n ? /* @__PURE__ */ m(v, { src: n, size: 20, color: "inherit", role: "presentation" }) : null, M = h(
   ({
-    variant: m,
-    children: c,
-    color: e = "primary",
-    size: l = "default",
+    variant: e,
+    children: n,
+    color: o = "primary",
+    size: u = "default",
     isDisabled: a = !1,
     isLoading: t = !1,
-    prefixIcon: i = void 0,
-    ...u
+    prefixIcon: c = void 0,
+    ...i
   }, p) => {
-    const f = b(() => {
-      const n = { size: l, isDisabled: a, isLoading: t };
-      switch (m) {
+    const f = x(() => {
+      const s = { size: u, isDisabled: a, isLoading: t };
+      switch (e) {
         case "primary": {
           const r = {
-            ...n,
-            color: e
+            ...s,
+            color: o
           };
-          return s(j(r));
+          return l(j(r));
         }
         case "secondary": {
           const r = {
-            ...n,
-            color: e
+            ...s,
+            color: o
           };
-          return s(N(r));
+          return l(N(r));
         }
         case "ghost": {
           const r = {
-            ...n,
-            color: e
+            ...s,
+            color: o
           };
-          return s(B(r));
+          return l(w(r));
         }
       }
-    }, [m, e, l, a, t]), d = {
+    }, [e, o, u, a, t]), d = {
       ...t && { "data-loading": t }
     };
-    return /* @__PURE__ */ o(
-      v,
+    return /* @__PURE__ */ m(
+      b,
       {
         "data-dd-privacy": "allow",
-        ...u,
+        ...i,
         ref: p,
         isDisabled: a || t,
         className: f,
         ...d,
-        children: t ? /* @__PURE__ */ o(x, { size: "small", color: "inherit", label: "Loading..." }) : /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:leading-[1.75] uy:items-center", children: [
-          i && /* @__PURE__ */ o(
-            w,
-            {
-              src: i,
-              size: 20,
-              color: "inherit",
-              role: "presentation"
-            }
-          ),
-          c
+        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:leading-[1.75] uy:items-center", children: [
+          I(t, c),
+          n
         ] })
       }
     );

package/dist/esm/components/button/Button.variants.d.ts

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

package/dist/esm/components/button/Button.variants.js

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

package/dist/esm/components/checkbox/Checkbox.js

@@ -1,85 +1,89 @@
-import { jsxs as l, jsx as a, Fragment as S } from "react/jsx-runtime";
-import { forwardRef as j, isValidElement as m, cloneElement as b } from "react";
-import { useId as B } from "react-aria";
-import { Checkbox as R } from "react-aria-components";
-import { Text as p } from "../text/Text.js";
-import { checkbox as D } from "./Checkbox.variants.js";
-import { CheckboxIndicator as E } from "./parts/CheckboxIndicator.js";
-const V = j(
-  ({ children: y, helperText: i, feedbackText: r, ...o }, h) => {
-    const e = B(), {
-      isDisabled: f,
-      isReadOnly: v,
+import { jsxs as o, jsx as a, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as B, isValidElement as p, cloneElement as y } from "react";
+import { useId as R } from "react-aria";
+import { Checkbox as D } from "react-aria-components";
+import { Text as h } from "../text/Text.js";
+import { checkbox as E } from "./Checkbox.variants.js";
+import { CheckboxIndicator as V } from "./parts/CheckboxIndicator.js";
+const F = B(
+  ({ children: f, helperText: i, feedbackText: r, ...l }, v) => {
+    const e = R(), {
+      isDisabled: s,
+      isReadOnly: d,
       isInvalid: t,
-      isRequired: d,
-      requiredVariant: n = "required"
-    } = o, {
-      base: x,
-      wrapper: u,
-      asterisk: N,
-      optionalTag: g,
-      descriptionsContainer: $,
-      helperText: k,
-      feedbackText: C
-    } = D({
-      isDisabled: f,
-      isReadOnly: v,
+      isRequired: n,
+      requiredVariant: c = "required",
+      ...x
+    } = l, {
+      base: u,
+      wrapper: N,
+      asterisk: g,
+      optionalTag: $,
+      descriptionsContainer: k,
+      helperText: C,
+      feedbackText: q
+    } = E({
+      isDisabled: s,
+      isReadOnly: d,
       isInvalid: t
-    }), s = [o["aria-labelledby"], `${e}-label`].filter(Boolean), c = [
-      o["aria-describedby"],
+    }), m = [l["aria-labelledby"], `${e}-label`].filter(Boolean), b = [
+      l["aria-describedby"],
       typeof i == "string" ? `${e}-helper-text` : void 0,
       typeof r == "string" ? `${e}-feedback-text` : void 0
-    ].filter(Boolean), q = s.length > 0 ? s.join(" ") : void 0, w = c.length > 0 ? c.join(" ") : void 0;
-    return /* @__PURE__ */ l("div", { className: x(), children: [
+    ].filter(Boolean), w = m.length > 0 ? m.join(" ") : void 0, I = b.length > 0 ? b.join(" ") : void 0;
+    return /* @__PURE__ */ o("div", { className: u(), children: [
       /* @__PURE__ */ a(
-        R,
+        D,
         {
-          ...o,
-          ref: h,
-          className: u(),
-          "aria-labelledby": q,
-          "aria-describedby": w,
-          children: (I) => /* @__PURE__ */ l(S, { children: [
-            /* @__PURE__ */ a(E, { ...I, className: "uy:mr-[6px]" }),
-            /* @__PURE__ */ a("span", { id: `${e}-label`, "data-dd-privacy": "allow", children: y }),
-            n === "required" && d && /* @__PURE__ */ l("span", { className: N(), children: [
+          ...x,
+          isInvalid: t,
+          ref: v,
+          className: N(),
+          "aria-labelledby": w,
+          "aria-describedby": I,
+          isDisabled: s,
+          isReadOnly: d,
+          children: (S) => /* @__PURE__ */ o(j, { children: [
+            /* @__PURE__ */ a(V, { ...S, className: "uy:mr-[6px]" }),
+            /* @__PURE__ */ a("span", { id: `${e}-label`, "data-dd-privacy": "allow", children: f }),
+            c === "required" && n && /* @__PURE__ */ o("span", { className: g(), children: [
               "*",
               /* @__PURE__ */ a("span", { className: "uy:sr-only", children: "required" })
             ] }),
-            n === "optional" && !d && /* @__PURE__ */ a("span", { className: g(), children: "(optional)" })
+            c === "optional" && !n && /* @__PURE__ */ a("span", { className: $(), children: "(optional)" })
           ] })
         }
       ),
-      (i || r) && /* @__PURE__ */ l("div", { className: $(), "data-dd-privacy": "allow", children: [
+      (i || r) && /* @__PURE__ */ o("div", { className: k(), "data-dd-privacy": "allow", children: [
         typeof i == "string" ? /* @__PURE__ */ a(
-          p,
+          h,
           {
             variant: "bodySmall",
             color: "content.neutral.low",
             id: `${e}-helper-text`,
             children: i
           }
-        ) : m(i) && b(i, {
+        ) : p(i) && y(i, {
           "data-id": `${e}-helper-text`,
-          className: k()
+          className: C()
         }),
         t && (typeof r == "string" ? /* @__PURE__ */ a(
-          p,
+          h,
           {
             variant: "bodySmallStrong",
             color: "content.form.invalid",
             id: `${e}-feedback-text`,
             children: r
           }
-        ) : m(r) && b(r, {
+        ) : p(r) && y(r, {
           "data-id": `${e}-feedback-text`,
-          className: C()
+          className: q()
         }))
       ] })
     ] });
   }
 );
-V.displayName = "Checkbox";
+F.displayName = "Checkbox";
 export {
-  V as Checkbox
+  F as Checkbox
 };

package/dist/esm/components/checkbox/Checkbox.variants.js

@@ -1,4 +1,4 @@
-import { tv as e } from "tailwind-variants";
+import { uyTv as e } from "@payfit/unity-themes";
 const l = e({
   slots: {
     base: "uy:group uy:inline-flex uy:flex-col uy:gap-50 uy:py-[1px]",

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { tv as u } from "tailwind-variants";
+import { uyTv as u } from "@payfit/unity-themes";
 const c = u({
   slots: {
     base: [