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

package/dist/esm/components/spinner/Spinner.mjs

@@ -1,8 +1,8 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { tv as p } from "tailwind-variants";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as m } from "tailwind-variants";
 import f from "../../hooks/use-id.mjs";
-const h = p({
+const h = m({
   slots: {
     base: "uy-flex uy-flex-col uy-items-center uy-gap-200",
     indicator: "",
@@ -36,34 +36,35 @@ const h = p({
     color: "primary"
   }
 });
-function n({ label: l, color: o, size: i, role: r = "status", ...s }, c) {
-  const t = `uy-spinner-label-${f()}`, {
+function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
+  const a = `uy-spinner-label-${f()}`, {
     base: d,
     indicator: y,
     label: u
   } = h({
-    size: i,
+    size: e,
     color: o
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ t(
     "div",
     {
       ...s,
       ref: c,
       role: r,
       className: d(),
-      "aria-labelledby": r === "status" ? t : void 0,
+      "aria-labelledby": r === "status" ? a : void 0,
       "aria-live": "polite",
+      "data-dd-privacy": "allow",
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ t(
           "svg",
           {
             viewBox: "0 0 100 100",
             "aria-hidden": "true",
             className: y(),
             children: [
-              /* @__PURE__ */ e("title", { children: "Loading" }),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ i("title", { children: "Loading" }),
+              /* @__PURE__ */ i(
                 "circle",
                 {
                   cx: "50",
@@ -85,12 +86,12 @@ function n({ label: l, color: o, size: i, role: r = "status", ...s }, c) {
             ]
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           "span",
           {
-            id: t,
+            id: a,
             className: u(),
-            "aria-hidden": i !== "small",
+            "aria-hidden": e !== "small",
             children: l
           }
         )
@@ -99,9 +100,9 @@ function n({ label: l, color: o, size: i, role: r = "status", ...s }, c) {
   );
 }
 n.displayName = "Spinner";
-const k = m(
+const S = p(
   n
 );
 export {
-  k as Spinner
+  S as Spinner
 };

package/dist/esm/components/tabs/Tabs.mjs

@@ -1,15 +1,24 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Tabs as i } from "react-aria-components";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Tabs as f } from "react-aria-components";
 import { TabsProvider as p } from "./Tabs.context.mjs";
-import { tabsVariant as b } from "./Tabs.variant.mjs";
-const T = f(
-  ({ children: a, variant: r, scrollable: o = !1, ...m }, t) => {
-    const { base: e } = b({ variant: r, scrollable: o });
-    return /* @__PURE__ */ s(p, { variant: r, scrollable: o, children: /* @__PURE__ */ s(i, { ref: t, className: e(), ...m, children: a }) });
+import { tabsVariant as d } from "./Tabs.variant.mjs";
+const b = e(
+  ({ children: s, variant: r, scrollable: a = !1, ...m }, t) => {
+    const { base: i } = d({ variant: r, scrollable: a });
+    return /* @__PURE__ */ o(p, { variant: r, scrollable: a, children: /* @__PURE__ */ o(
+      f,
+      {
+        "data-dd-privacy": "allow",
+        ref: t,
+        className: i(),
+        ...m,
+        children: s
+      }
+    ) });
   }
 );
-T.displayName = "Tabs";
+b.displayName = "Tabs";
 export {
-  T as Tabs
+  b as Tabs
 };

package/dist/esm/components/tabs/Tabs.variant.mjs

@@ -24,7 +24,7 @@ const a = e({
       },
       false: {
         base: "",
-        tabList: "uy-border-b-[1.25px] uy-border-b-border-form-enabled"
+        tabList: "uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled"
       }
     }
   },

package/dist/esm/components/tabs/parts/TabList.mjs

@@ -51,7 +51,7 @@ const C = T(
         {
           ref: r,
           "data-testid": "scrollable-tab-list",
-          className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-b-border-form-enabled",
+          className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",
           onScroll: R,
           children: /* @__PURE__ */ c(m, { ref: b, className: d(), children: f })
         }

package/dist/esm/components/text/Text.mjs

@@ -24,24 +24,25 @@ const y = {
   ({
     children: e,
     variant: o,
-    color: n,
-    isTruncated: s,
+    color: s,
+    isTruncated: a,
     lineClamp: t,
-    asElement: a,
-    className: l,
-    ...r
+    asElement: n,
+    className: r,
+    ...l
   }, i) => {
     const m = h({
       variant: o,
-      color: n,
-      isTruncated: s,
+      color: s,
+      isTruncated: a,
       isLineClamped: t !== void 0,
-      className: l
+      className: r
     }), p = y[o ?? "inherit"];
     return /* @__PURE__ */ d(
-      a ?? p,
+      n ?? p,
       {
-        ...r,
+        "data-dd-privacy": "mask",
+        ...l,
         ref: i,
         className: m,
         style: { "--uy-text-line-clamp": t },

package/dist/esm/components/text-area/TextArea.mjs

@@ -56,51 +56,52 @@ const W = z({
     isDisabled: !1,
     isReadOnly: !1
   }
-}), A = v(
+}), k = v(
   ({
-    isInvalid: n,
-    isLoading: s,
+    isInvalid: s,
+    isLoading: i,
     isDisabled: t,
-    isReadOnly: o,
-    isResizable: i = !1,
+    isReadOnly: a,
+    isResizable: n = !1,
     ...y
   }, b) => {
-    const a = M(), { containerRef: l, handleResizeStart: m } = L({
-      isDisabled: !i || t || o
+    const o = M(), { containerRef: l, handleResizeStart: m } = L({
+      isDisabled: !n || t || a
     }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
-      isInvalid: n,
+      isInvalid: s,
       isDisabled: t,
-      isReadOnly: o
+      isReadOnly: a
     });
     return /* @__PURE__ */ r("div", { ref: l, className: c(), children: [
       /* @__PURE__ */ r("div", { className: p(), children: [
         /* @__PURE__ */ e(
           w,
           {
+            "data-dd-privacy": "mask",
             ...y,
             ref: b,
             className: g(),
-            "aria-busy": s
+            "aria-busy": i
           }
         ),
         /* @__PURE__ */ r("div", { className: x(), children: [
-          s && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             N,
             {
               color: "inherit",
               size: "small",
-              label: a.formatMessage({
+              label: o.formatMessage({
                 id: "unity:component:form-field:form-input:spinner:label",
                 defaultMessage: "Loading"
               })
             }
           ),
-          n && /* @__PURE__ */ e(
+          s && /* @__PURE__ */ e(
             D,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: a.formatMessage({
+              alt: o.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
@@ -108,20 +109,20 @@ const W = z({
           )
         ] })
       ] }),
-      i && !t && !o && /* @__PURE__ */ e(
+      n && !t && !a && /* @__PURE__ */ e(
         "div",
         {
           className: h(),
           onMouseDown: m,
           role: "button",
           tabIndex: 0,
-          "aria-label": a.formatMessage({
+          "aria-label": o.formatMessage({
             id: "unity:component:form-field:textarea:resize-handle:label",
             defaultMessage: "Resize textarea"
           }),
           onKeyDown: (u) => {
-            var f, d;
-            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (d = (f = l.current) == null ? void 0 : f.querySelector("textarea")) == null || d.focus());
+            var d, f;
+            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (f = (d = l.current) == null ? void 0 : d.querySelector("textarea")) == null || f.focus());
           },
           children: /* @__PURE__ */ r(
             "svg",
@@ -154,8 +155,8 @@ const W = z({
     ] });
   }
 );
-A.displayName = "TextArea";
+k.displayName = "TextArea";
 export {
-  A as TextArea,
+  k as TextArea,
   W as textArea
 };

package/dist/esm/components/toast/UnityToast.d.mts

@@ -49,7 +49,7 @@ export interface UnityToastProps extends Required<Pick<VariantProps<typeof unity
  * - `ToastAction`(optional): The action on the toast
  */
 declare const UnityToast: {
-    ({ children, onClose, variant, inline, }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
+    ({ children, onClose, variant, inline, ...rest }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { UnityToast };

package/dist/esm/components/toast/UnityToast.mjs

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { isValidElement as n, Fragment as i, Children as c } from "react";
-import { useIntl as y } from "react-intl";
+import { isValidElement as n, Fragment as c, Children as y } from "react";
+import { useIntl as d } from "react-intl";
 import { tv as m } from "tailwind-variants";
-import { IconButton as d } from "../icon-button/IconButton.mjs";
+import { IconButton as p } from "../icon-button/IconButton.mjs";
 import { Icon as f } from "../icon/Icon.mjs";
-import { ToastTitle as p } from "./parts/ToastTitle.mjs";
-import { ToastProvider as b } from "./Toast.context.mjs";
-const g = m({
+import { ToastTitle as b } from "./parts/ToastTitle.mjs";
+import { ToastProvider as g } from "./Toast.context.mjs";
+const x = m({
   base: "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",
   variants: {
     variant: {
@@ -14,24 +14,27 @@ const g = m({
       error: "uy-border-border-danger"
     }
   }
-}), x = (e) => {
-  const s = n(e) && e.type === i ? e.props.children : e;
-  if (c.toArray(s).filter(
-    (o) => n(o) && o.type === p
+}), T = (e) => {
+  const s = n(e) && e.type === c ? e.props.children : e;
+  if (y.toArray(s).filter(
+    (o) => n(o) && o.type === b
   ).length !== 1)
     throw new Error("UnityToast must have one ToastTitle component");
-}, T = ({
+}, h = ({
   children: e,
   onClose: s,
   variant: t,
-  inline: o = !0
+  inline: o = !0,
+  ...i
 }) => {
-  const a = y();
-  x(e);
-  const u = g({ variant: t });
-  return /* @__PURE__ */ r(b, { inline: o, children: /* @__PURE__ */ l(
+  const a = d();
+  T(e);
+  const u = x({ variant: t });
+  return /* @__PURE__ */ r(g, { inline: o, children: /* @__PURE__ */ l(
     "div",
     {
+      "data-dd-privacy": "mask",
+      ...i,
       tabIndex: -1,
       role: t === "error" ? "alert" : "status",
       "aria-atomic": "true",
@@ -63,11 +66,11 @@ const g = m({
           "div",
           {
             role: "presentation",
-            className: "uy-border-l-[1px] uy-border-border-neutral uy-self-stretch"
+            className: "uy-border-l-[1px] uy-border-solid uy-border-border-neutral uy-self-stretch"
           }
         ),
         /* @__PURE__ */ r(
-          d,
+          p,
           {
             icon: "CloseOutlined",
             iconRole: "presentation",
@@ -84,7 +87,7 @@ const g = m({
     }
   ) });
 };
-T.displayName = "UnityToast";
+h.displayName = "UnityToast";
 export {
-  T as UnityToast
+  h as UnityToast
 };

package/dist/esm/components/toast/toast.d.mts

@@ -4,6 +4,7 @@ import { UnityToastProps } from './UnityToast.mjs';
 interface Base {
     title: ReactNode;
     content?: ReactNode;
+    datadogPrivacy?: 'allow' | 'mask' | 'hidden';
 }
 interface WithAction {
     action: ReactNode;
@@ -39,5 +40,5 @@ interface ErrorParamsWithAction extends Base, WithAction {
  * @param prop.actionOnPress (optional) the function to trigger when click on the action
  * @param prop.duration (optional) to override the toast duration
  */
-declare function toast({ title, content, variant, action, actionOnPress, duration, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
+declare function toast({ title, content, variant, action, actionOnPress, duration, datadogPrivacy, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
 export { toast };

package/dist/esm/components/toast/toast.mjs

@@ -1,37 +1,39 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import m from "react-hot-toast";
-import { ToastAction as f } from "./parts/ToastAction.mjs";
-import { ToastContent as p } from "./parts/ToastContent.mjs";
+import { ToastAction as p } from "./parts/ToastAction.mjs";
+import { ToastContent as f } from "./parts/ToastContent.mjs";
 import { ToastTitle as T } from "./parts/ToastTitle.mjs";
 import { TOAST_CONFIG as u } from "./ToastManager.mjs";
-import { UnityToast as a } from "./UnityToast.mjs";
-function y({
+import { UnityToast as c } from "./UnityToast.mjs";
+function k({
   title: s,
   content: o,
   variant: i,
   action: t,
   actionOnPress: n,
-  duration: l
+  duration: d,
+  datadogPrivacy: l = "mask"
 }) {
   return m.custom(
-    (e) => /* @__PURE__ */ d(
-      a,
+    (a) => /* @__PURE__ */ e(
+      c,
       {
         onClose: () => {
-          m.dismiss(e.id);
+          m.dismiss(a.id);
         },
         variant: i,
         inline: !!o,
+        "data-dd-privacy": l,
         children: [
           /* @__PURE__ */ r(T, { children: s }),
-          o ? /* @__PURE__ */ r(p, { children: o }) : null,
-          t ? /* @__PURE__ */ r(f, { onPress: n, children: t }) : null
+          o ? /* @__PURE__ */ r(f, { children: o }) : null,
+          t ? /* @__PURE__ */ r(p, { onPress: n, children: t }) : null
         ]
       }
     ),
-    { duration: l ?? u[i].duration }
+    { duration: d ?? u[i].duration }
   );
 }
 export {
-  y as toast
+  k as toast
 };

package/dist/esm/components/tooltip/Tooltip.d.mts

@@ -4,4 +4,4 @@ interface TooltipProps {
     children: ReactElement;
 }
 declare function Tooltip({ title, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export default Tooltip;
+export { Tooltip };

package/dist/esm/components/tooltip/Tooltip.mjs

@@ -1,20 +1,21 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { TooltipTrigger as u, Tooltip as r, Button as y } from "react-aria-components";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { TooltipTrigger as r, Tooltip as y, Button as u } from "react-aria-components";
 import { Button as a } from "../button/Button.mjs";
-const i = (t) => t.type === a || t.type === y;
-function d({ title: t, children: e }) {
-  return /* @__PURE__ */ l(u, { delay: 500, closeDelay: 1500, children: [
-    e,
-    /* @__PURE__ */ o(
-      r,
+const i = (t) => t.type === a || t.type === u;
+function d({ title: t, children: o }) {
+  return /* @__PURE__ */ l(r, { delay: 500, closeDelay: 1500, children: [
+    o,
+    /* @__PURE__ */ e(
+      y,
       {
-        offset: i(e) ? 4 : 8,
+        "data-dd-privacy": "allow",
+        offset: i(o) ? 4 : 8,
         className: "uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",
-        children: /* @__PURE__ */ o("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: t })
+        children: /* @__PURE__ */ e("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: t })
       }
     )
   ] });
 }
 export {
-  d as default
+  d as Tooltip
 };

package/dist/esm/index.d.mts

@@ -16,6 +16,10 @@ export * from './components/avatar/parts/AvatarFallback.mjs';
 export * from './components/avatar/parts/AvatarImage.mjs';
 export * from './components/avatar/parts/AvatarPair.mjs';
 export * from './components/badge/Badge.mjs';
+export * from './components/bottom-sheet/BottomSheet.mjs';
+export * from './components/bottom-sheet/parts/BottomSheetHeader.mjs';
+export * from './components/bottom-sheet/parts/BottomSheetContent.mjs';
+export * from './components/bottom-sheet/parts/BottomSheetFooter.mjs';
 export * from './components/breadcrumbs/Breadcrumbs.mjs';
 export * from './components/breadcrumbs/parts/Breadcrumb.mjs';
 export * from './components/button/Button.mjs';
@@ -76,6 +80,10 @@ export * from './components/select/Select.mjs';
 export * from './components/select-field/SelectField.mjs';
 export * from './components/selectable-button-group/SelectableButtonGroup.mjs';
 export * from './components/selectable-button-group/parts/SelectableButton.mjs';
+export * from './components/side-panel/SidePanel.mjs';
+export * from './components/side-panel/parts/SidePanelHeader.mjs';
+export * from './components/side-panel/parts/SidePanelContent.mjs';
+export * from './components/side-panel/parts/SidePanelFooter.mjs';
 export * from './components/spinner/Spinner.mjs';
 export * from './components/tabs/Tabs.mjs';
 export * from './components/tabs/parts/Tab.mjs';