@payfit/unity-components 0.0.0-alpha.7 → 0.0.0-alpha.9

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.d.mts

@@ -0,0 +1,54 @@
+export declare const bottomSheetDragIndicator: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+/**
+ * A drag indicator component that connects to the overlay state context and
+ * provides swipe-to-dismiss functionality for the SidePanel.
+ * @internal
+ */
+export declare function BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomSheetDragIndicator {
+    var displayName: string;
+}

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

@@ -0,0 +1,67 @@
+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 { useBreakpointListener as S } from "../../../hooks/use-breakpoint-listener.mjs";
+const I = v({
+  slots: {
+    base: [
+      "md:uy-hidden uy-mx-auto uy-py-100 uy-w-500",
+      "uy-cursor-grab uy-touch-action-none"
+    ],
+    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(
+    (c) => {
+      var s;
+      const {
+        movement: [B, e],
+        direction: [E, d],
+        intentional: f,
+        cancel: y,
+        last: p,
+        event: h
+      } = c;
+      if (!m) {
+        y();
+        return;
+      }
+      h.preventDefault();
+      const t = (s = r.current) == null ? void 0 : s.closest(
+        "[data-unity-bottom-sheet]"
+      );
+      if (t) {
+        if (e < 0) {
+          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(() => {
+          o.close();
+        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
+      }
+    },
+    {
+      axis: "y",
+      filterTaps: !0,
+      threshold: 5
+    }
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(),
+      "aria-hidden": "true",
+      ref: r,
+      ...u(),
+      children: /* @__PURE__ */ a("div", { className: l() })
+    }
+  );
+}
+T.displayName = "BottomSheetDragIndicator";
+export {
+  T as BottomSheetDragIndicator,
+  I as bottomSheetDragIndicator
+};

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

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetFooter` component renders the footer section of a bottom sheet.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {BottomSheetFooterProps} props - The props for the `BottomSheetFooter` component
+ * @example
+ * ```tsx
+ * import { BottomSheetFooter, Button } from '@payfit/unity-components'
+ *
+ * <BottomSheetFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </BottomSheetFooter>
+ * ```
+ * @see {@link BottomSheetFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/navigation-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetFooter };

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

@@ -0,0 +1,28 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { tv as a } from "tailwind-variants";
+const s = a({
+  base: [
+    "uy-py-150 uy-px-300 uy-w-full",
+    "uy-flex uy-items-center uy-justify-end uy-gap-100 uy-shrink-0",
+    "uy-bg-surface-neutral uy-border-t uy-border-solid uy-border-border-neutral",
+    "uy-sticky uy-bottom-0 uy-z-10",
+    "uy-mt-auto",
+    "uy-pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] md:uy-pb-200"
+  ]
+}), m = y(
+  ({ children: t, className: o, ...e }, r) => /* @__PURE__ */ u(
+    "footer",
+    {
+      ref: r,
+      className: s({ class: o }),
+      ...e,
+      children: t
+    }
+  )
+);
+m.displayName = "BottomSheetFooter";
+export {
+  m as BottomSheetFooter,
+  s as bottomSheetFooter
+};

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

@@ -0,0 +1,83 @@
+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 | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface BottomSheetHeaderProps extends PropsWithChildren<VariantProps<typeof bottomSheetHeader>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {BottomSheetHeaderProps} props - The props for the `BottomSheetHeader` component
+ * @example
+ * ```tsx
+ * import { BottomSheetHeader } from '@payfit/unity-components'
+ *
+ * <BottomSheetHeader>Title of the panel</BottomSheetHeader>
+ * ```
+ * @see {@link BottomSheetHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetHeader };

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

@@ -0,0 +1,45 @@
+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 { CircularIconButton as m } from "../../icon-button/CircularIconButton.mjs";
+const d = c({
+  slots: {
+    base: [
+      "uy-py-200 uy-px-300 uy-w-full",
+      "uy-flex uy-flex-col uy-shrink-0",
+      "uy-bg-surface-neutral uy-rounded-tl-200 uy-rounded-tr-200 uy-shadow-raising",
+      "uy-sticky uy-top-0 uy-z-10"
+    ],
+    content: ["uy-flex uy-items-center uy-w-full"],
+    heading: [
+      "uy-typography-h3 uy-text-center uy-text-content-neutral uy-truncate",
+      "uy-flex-1 uy-min-w-0"
+    ],
+    buttonContainer: ["uy-flex-shrink-0 uy-flex-grow-0 uy-w-[28px]"]
+  }
+}), f = i(
+  ({ 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("div", { className: t(), children: /* @__PURE__ */ e(
+        m,
+        {
+          asElement: "button",
+          slot: "close",
+          icon: "CloseOutlined",
+          title: "Close",
+          size: "large",
+          color: "content.neutral.low"
+        }
+      ) })
+    ] }) });
+  }
+);
+f.displayName = "BottomSheetHeader";
+export {
+  f as BottomSheetHeader,
+  d as bottomSheetHeader
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.mjs

@@ -1,21 +1,21 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as c, Fragment as m } from "react";
-import { Breadcrumbs as p } from "react-aria-components";
-import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.mjs";
-import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.mjs";
-import { breadcrumbsVariant as d } from "./Breadcrumbs.variant.mjs";
-const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((e) => /* @__PURE__ */ n(m, { children: t(e) }, `${e.label}${e.href}`)), v = c(({ items: o, children: r, wrap: t = "nowrap" }, e) => {
-  const { base: i } = d({ wrap: t }), a = u(), s = a === "xs" || a === "sm";
-  return /* @__PURE__ */ n(
-    f,
+import { Breadcrumbs as d } from "react-aria-components";
+import { useBreakpointListener as p } from "../../hooks/use-breakpoint-listener.mjs";
+import { BreadcrumbsProvider as u } from "./Breadcrumbs.context.mjs";
+import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.mjs";
+const l = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(m, { children: t(a) }, `${a.label}${a.href}`)), k = c(({ items: o, children: r, wrap: t = "nowrap" }, a) => {
+  const { base: i } = f({ wrap: t }), n = p(), s = n === "xs" || n === "sm";
+  return /* @__PURE__ */ e(
+    u,
     {
       wrap: t,
       isMobile: s,
       isStaticApi: o === void 0,
-      children: /* @__PURE__ */ n(p, { ref: e, className: i(), children: o ? b(s, o, r) : r })
+      children: /* @__PURE__ */ e(d, { "data-dd-privacy": "allow", ref: a, className: i(), children: o ? l(s, o, r) : r })
     }
   );
 });
 export {
-  v as Breadcrumbs
+  k as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.mjs

@@ -3,19 +3,19 @@ import { forwardRef as x } from "react";
 import { Breadcrumb as m } from "react-aria-components";
 import { Icon as s } from "../../icon/Icon.mjs";
 import { Link as u } from "../../link/Link.mjs";
-import B from "../../tooltip/Tooltip.mjs";
-import { useBreadcrumbsContext as C } from "../Breadcrumbs.context.mjs";
-import { breadcrumbsVariant as L } from "../Breadcrumbs.variant.mjs";
-const g = 25, d = ({ children: t, href: e }) => t.length > g ? /* @__PURE__ */ r(B, { title: t, children: /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), A = x((t, e, ...o) => {
-  const { wrap: l, isMobile: f, isStaticApi: p } = C(), { breadcrumb: n } = L({ wrap: l });
+import { Tooltip as g } from "../../tooltip/Tooltip.mjs";
+import { useBreadcrumbsContext as B } from "../Breadcrumbs.context.mjs";
+import { breadcrumbsVariant as C } from "../Breadcrumbs.variant.mjs";
+const L = 25, d = ({ children: t, href: e }) => t.length > L ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), A = x((t, e) => {
+  const { wrap: l, isMobile: f, isStaticApi: p } = B(), { breadcrumb: o } = C({ wrap: l });
   if (!t)
     return null;
-  const { href: i, label: a } = t;
-  return f && !p ? /* @__PURE__ */ c(m, { ref: e, ...o, className: n(), children: [
+  const { href: n, label: a, ...i } = t;
+  return f && !p ? /* @__PURE__ */ c(m, { ref: e, ...i, className: o(), children: [
     /* @__PURE__ */ r(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-    /* @__PURE__ */ r(d, { href: i, children: a })
-  ] }) : /* @__PURE__ */ r(m, { ref: e, ...o, className: n(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap", children: a }) : /* @__PURE__ */ c(h, { children: [
-    /* @__PURE__ */ r(d, { href: i, children: a }),
+    /* @__PURE__ */ r(d, { href: n, children: a })
+  ] }) : /* @__PURE__ */ r(m, { ref: e, ...i, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap", children: a }) : /* @__PURE__ */ c(h, { children: [
+    /* @__PURE__ */ r(d, { href: n, children: a }),
     /* @__PURE__ */ r(s, { src: "CaretRightOutlined", "aria-hidden": "true" })
   ] }) });
 });

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

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

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

@@ -43,8 +43,8 @@ const a = e({
   base: "uy-border",
   variants: {
     color: {
-      primary: "uy-bg-transparent uy-text-content-primary-enabled uy-border-border-primary-enabled",
-      inverted: "uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled focus-visible:uy-outline-utility-inverted-focus-ring"
+      primary: "uy-bg-transparent uy-text-content-primary-enabled uy-border-solid uy-border-border-primary-enabled",
+      inverted: "uy-bg-transparent uy-text-content-inverted uy-border-solid uy-border-border-inverted-enabled focus-visible:uy-outline-utility-inverted-focus-ring"
     },
     isDisabled: {
       true: "disabled:uy-text-content-neutral-disabled disabled:uy-border-border-neutral-disabled",

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

@@ -77,8 +77,8 @@ const B = j({
       base: g,
       wrapper: h,
       asterisk: v,
-      optionalTag: N,
-      descriptionsContainer: w,
+      optionalTag: w,
+      descriptionsContainer: N,
       helperText: k,
       feedbackText: R
     } = B({
@@ -101,16 +101,24 @@ const B = j({
           "aria-describedby": D,
           children: (C) => /* @__PURE__ */ t(I, { children: [
             /* @__PURE__ */ a(V, { ...C, className: "uy-mr-[6px]" }),
-            /* @__PURE__ */ a("span", { id: `${e}-label`, className: "uy-leading-100", children: b }),
+            /* @__PURE__ */ a(
+              "span",
+              {
+                id: `${e}-label`,
+                className: "uy-leading-100",
+                "data-dd-privacy": "allow",
+                children: b
+              }
+            ),
             n === "required" && r && /* @__PURE__ */ t("span", { className: v(), children: [
               "*",
               /* @__PURE__ */ a("span", { className: "uy-sr-only", children: "required" })
             ] }),
-            n === "optional" && !r && /* @__PURE__ */ a("span", { className: N(), children: "(optional)" })
+            n === "optional" && !r && /* @__PURE__ */ a("span", { className: w(), children: "(optional)" })
           ] })
         }
       ),
-      (i || l) && /* @__PURE__ */ t("div", { className: w(), children: [
+      (i || l) && /* @__PURE__ */ t("div", { className: N(), "data-dd-privacy": "allow", children: [
         typeof i == "string" ? /* @__PURE__ */ a(
           p,
           {

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

@@ -3,7 +3,7 @@ import { tv as u } from "tailwind-variants";
 const n = u({
   slots: {
     base: [
-      "uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-transition-all uy-duration-100"
+      "uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"
     ],
     checkmark: [
       "uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"
@@ -105,7 +105,7 @@ function c({
     isInvalid: t,
     isReadOnly: d
   });
-  return /* @__PURE__ */ e("div", { className: i({ className: o }), children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: i({ className: o }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
     "svg",
     {
       fill: "none",

package/dist/esm/components/checkbox-group/CheckboxGroup.mjs

@@ -1,58 +1,65 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { forwardRef as x, isValidElement as h, cloneElement as d } from "react";
+import { forwardRef as d, isValidElement as x, cloneElement as h } from "react";
 import { CheckboxGroup as g } from "react-aria-components";
 import { tv as b } from "tailwind-variants";
-import { Label as G } from "../label/Label.mjs";
-import { Text as n } from "../text/Text.mjs";
-const v = b({
+import { Label as v } from "../label/Label.mjs";
+import { Text as c } from "../text/Text.mjs";
+const G = b({
   base: "uy-flex uy-flex-col uy-gap-50"
-}), C = x(
+}), C = d(
   ({
-    label: l,
-    helperText: t,
+    label: t,
+    helperText: l,
     feedbackText: o,
-    isDisabled: s,
-    isReadOnly: c,
+    isDisabled: e,
+    isReadOnly: n,
     isInvalid: m,
-    isRequired: e,
-    isLoading: p,
-    children: a,
+    isRequired: s,
+    isLoading: a,
+    children: p,
     requiredVariant: i,
     ...u
   }, y) => /* @__PURE__ */ f(
     g,
     {
       ...{
-        isDisabled: s,
-        isReadOnly: c,
+        isDisabled: e,
+        isReadOnly: n,
         isInvalid: m,
-        isRequired: e,
-        isLoading: p
+        isRequired: s,
+        isLoading: a
       },
       ...u,
       ref: y,
-      className: v(),
+      className: G(),
       children: [
-        l && /* @__PURE__ */ r(G, { isRequired: e, requiredVariant: i, children: l }),
-        t && /* @__PURE__ */ r(
-          n,
+        t && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: t }),
+        l && /* @__PURE__ */ r(
+          c,
           {
             variant: "bodySmall",
             color: "content.neutral.low",
             slot: "description",
-            children: t
+            children: l
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25",
+            "data-dd-privacy": "mask",
+            children: p
           }
         ),
-        /* @__PURE__ */ r("div", { className: "uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25", children: a }),
         m && (typeof o == "string" ? /* @__PURE__ */ r(
-          n,
+          c,
           {
             variant: "bodySmallStrong",
             color: "content.form.invalid",
             slot: "errorMessage",
             children: o
           }
-        ) : h(o) && d(o, {
+        ) : x(o) && h(o, {
           slot: "errorMessage"
         }))
       ]
@@ -62,5 +69,5 @@ const v = b({
 C.displayName = "CheckboxGroup";
 export {
   C as CheckboxGroup,
-  v as checkboxGroup
+  G as checkboxGroup
 };