@factorialco/f0-react 1.202.0 → 1.203.1

package/dist/experimental.js

@@ -21508,9 +21508,16 @@ const kA = ({
         "group after:absolute after:inset-y-0 after:-right-px after:z-10 after:hidden after:h-full after:w-10 after:bg-gradient-to-r after:from-transparent after:via-f1-background after:via-75% after:to-f1-background after:transition-all after:content-[''] hover:after:via-[#F5F6F8] hover:after:to-[#F5F6F8] dark:hover:after:via-[#192231] dark:hover:after:to-[#192231] md:after:block hover:md:bg-f1-background-hover"
       ),
       children: [
-        /* @__PURE__ */ b("div", { className: "flex flex-1 flex-row items-center gap-2", children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            onClick: f,
+            className: "pointer-events-auto absolute inset-0"
+          }
+        ),
+        /* @__PURE__ */ b("div", { className: "pointer-events-none flex flex-1 flex-row items-center gap-2", children: [
           t.selectable && c !== void 0 && // z-10 is needed here to prevent the checkbox from not being selectable when itemHref is provided
-          /* @__PURE__ */ d("div", { className: "z-10 hidden items-center justify-end md:flex", children: /* @__PURE__ */ d(
+          /* @__PURE__ */ d("div", { className: "pointer-events-auto z-10 hidden items-center justify-end md:flex", children: /* @__PURE__ */ d(
             Yl,
             {
               checked: n.has(c),
@@ -21519,7 +21526,16 @@ const kA = ({
               hideLabel: !0
             }
           ) }),
-          l && /* @__PURE__ */ d(Li, { href: l, className: "absolute inset-0 block", tabIndex: 0, children: /* @__PURE__ */ d("span", { className: "sr-only", children: a.view }) }),
+          l && /* @__PURE__ */ d(
+            Li,
+            {
+              href: l,
+              className: "pointer-events-auto absolute inset-0 block",
+              tabIndex: 0,
+              onClick: f,
+              children: /* @__PURE__ */ d("span", { className: "sr-only", children: a.view })
+            }
+          ),
           /* @__PURE__ */ d(
             _A,
             {
@@ -21532,13 +21548,13 @@ const kA = ({
         /* @__PURE__ */ d("div", { className: "flex flex-col items-start md:flex-row md:items-center [&>div]:justify-end", children: (r || []).filter((v) => {
           var x;
           return !((x = v.hide) != null && x.call(v, e));
-        }).map((v) => /* @__PURE__ */ d("div", { onClick: f, children: /* @__PURE__ */ d("div", { className: "flex items-center justify-center px-0 py-1 md:p-3 [&>span]:whitespace-nowrap", children: o(e, v) }) }, String(v.label))) }),
+        }).map((v) => /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d("div", { className: "flex items-center justify-center px-0 py-1 md:p-3 [&>span]:whitespace-nowrap", children: o(e, v) }) }, String(v.label))) }),
         t.itemActions && /* @__PURE__ */ b(xe, { children: [
           /* @__PURE__ */ d(
             f9,
             {
               dropDownOpen: y,
-              className: "hidden md:flex",
+              className: "pointer-events-auto hidden md:flex",
               children: /* @__PURE__ */ d(
                 u9,
                 {
@@ -21562,7 +21578,7 @@ const kA = ({
           "div",
           {
             className: L(
-              "absolute right-3 top-3 flex h-8 w-8 items-center justify-center md:hidden",
+              "pointer-events-auto absolute right-3 top-3 flex h-8 w-8 items-center justify-center md:hidden",
               t.itemActions && "right-12"
             ),
             children: /* @__PURE__ */ d(

package/dist/f0.d.ts

@@ -839,6 +839,8 @@ declare type DataCollectionExtendFetchOptions<NavigationFilters extends Navigati
     navigationFilters: NavigationFiltersState<NavigationFilters>;
 };
 
+export declare const dataCollectionLocalStorageHandler: DataCollectionStorageHandler;
+
 /**
  * Extended base fetch options for data collection
  */
@@ -905,11 +907,11 @@ declare type DataCollectionStatus = {
     visualization?: number;
 };
 
-declare type DataCollectionStorage = {
+export declare type DataCollectionStorage = {
     settings?: DataCollectionSettings;
 } & DataCollectionStatus;
 
-declare type DataCollectionStorageHandler = {
+export declare type DataCollectionStorageHandler = {
     get: (key: string) => Promise<DataCollectionStorage>;
     set: (key: string, storage: DataCollectionStorage) => Promise<void>;
 };

package/dist/f0.js

@@ -1,9 +1,9 @@
-import { C as g, L as me, c as ge, P as H, a as b, f as ve, b as be, A as xe, B as Ce, d as ye, e as we, g as Ne, V as Le, h as U, i as G, j as Pe, k as W, S as Y, l as M, m as J, n as Se, O as Fe, o as X, p as ke, q as De, F as K, r as Me, s as Te, t as Be, D as Ie, u as Re, v as Oe, w as $e, x as Q, y as w, U as Z, z as Ee, E as _e, G as z, H as je, I as ee, J as ze, K as Ve, M as qe, N as Ae, Q as He, R as Ue, X as Ge, T as We, W as Ye, Y as Je, Z as Xe, _ as Ke } from "./hooks-CSPFCwyM.js";
-import { az as Ga, $ as Wa, aB as Ya, aK as Ja, a0 as Xa, a1 as Ka, a2 as Qa, a3 as Za, a4 as es, a5 as as, a6 as ss, a7 as rs, a9 as ts, aa as ls, ab as os, ac as ns, aG as is, ae as ds, af as cs, ag as us, ah as fs, ak as hs, al as ps, am as ms, an as gs, ap as vs, ad as bs, ao as xs, aj as Cs, aH as ys, aA as ws, au as Ns, ax as Ls, at as Ps, aL as Ss, as as Fs, ar as ks, a8 as Ds, ai as Ms, aq as Ts, av as Bs, aC as Is, aD as Rs, aE as Os, aM as $s, aw as Es, aF as _s, aJ as js, ay as zs, aI as Vs } from "./hooks-CSPFCwyM.js";
-import { jsx as e, jsxs as c, Fragment as $ } from "react/jsx-runtime";
+import { C as g, L as ge, c as ve, P as U, a as b, f as be, b as xe, A as Ce, B as ye, d as we, e as Ne, g as Le, V as Pe, h as G, i as W, j as Se, k as J, S as Y, l as M, m as X, n as Fe, O as ke, o as K, p as De, q as Me, F as Q, r as Te, s as Ie, t as Be, D as Re, u as Oe, v as $e, w as Ee, x as Z, y as w, U as ee, z as _e, E as je, G as z, H as ze, I as ae, J as Ve, K as qe, M as Ae, N as He, Q as Ue, R as Ge, X as We, T as Je, W as Ye, Y as Xe, Z as Ke, _ as Qe } from "./hooks-CSPFCwyM.js";
+import { az as Ja, $ as Ya, aB as Xa, aK as Ka, a0 as Qa, a1 as Za, a2 as es, a3 as as, a4 as ss, a5 as rs, a6 as ts, a7 as ls, a9 as os, aa as ns, ab as is, ac as cs, aG as ds, ae as us, af as fs, ag as hs, ah as ms, ak as ps, al as gs, am as vs, an as bs, ap as xs, ad as Cs, ao as ys, aj as ws, aH as Ns, aA as Ls, au as Ps, ax as Ss, at as Fs, aL as ks, as as Ds, ar as Ms, a8 as Ts, ai as Is, aq as Bs, av as Rs, aC as Os, aD as $s, aE as Es, aM as _s, aw as js, aF as zs, aJ as Vs, ay as qs, aI as As } from "./hooks-CSPFCwyM.js";
+import { jsx as e, jsxs as d, Fragment as $ } from "react/jsx-runtime";
 import * as E from "react";
-import Qe, { useState as v, forwardRef as B, useRef as ae, useImperativeHandle as Ze, Children as ea, useEffect as se, createContext as aa } from "react";
-const Sa = {
+import Ze, { useState as v, forwardRef as I, useRef as se, useImperativeHandle as ea, Children as aa, useEffect as re, createContext as sa } from "react";
+const Fa = {
   approvals: {
     history: "Approval history",
     statuses: {
@@ -193,35 +193,35 @@ const Sa = {
     noResults: "No results found",
     loadingMore: "Loading..."
   }
-}, Fa = g(
+}, ka = g(
   {
     name: "Link",
     type: "info"
   },
-  me
-), ka = ["person", "team", "company", "file"];
-var _ = "Progress", j = 100, [sa, Da] = ge(_), [ra, ta] = sa(_), re = E.forwardRef(
+  ge
+), Da = ["person", "team", "company", "file"];
+var _ = "Progress", j = 100, [ra, Ma] = ve(_), [ta, la] = ra(_), te = E.forwardRef(
   (a, s) => {
     const {
       __scopeProgress: r,
       value: t = null,
       max: l,
-      getValueLabel: d = la,
+      getValueLabel: c = oa,
       ...n
     } = a;
-    (l || l === 0) && !V(l) && console.error(oa(`${l}`, "Progress"));
+    (l || l === 0) && !V(l) && console.error(na(`${l}`, "Progress"));
     const i = V(l) ? l : j;
-    t !== null && !q(t, i) && console.error(na(`${t}`, "Progress"));
-    const o = q(t, i) ? t : null, f = T(o) ? d(o, i) : void 0;
-    return /* @__PURE__ */ e(ra, { scope: r, value: o, max: i, children: /* @__PURE__ */ e(
-      H.div,
+    t !== null && !q(t, i) && console.error(ia(`${t}`, "Progress"));
+    const o = q(t, i) ? t : null, f = T(o) ? c(o, i) : void 0;
+    return /* @__PURE__ */ e(ta, { scope: r, value: o, max: i, children: /* @__PURE__ */ e(
+      U.div,
       {
         "aria-valuemax": i,
         "aria-valuemin": 0,
         "aria-valuenow": T(o) ? o : void 0,
         "aria-valuetext": f,
         role: "progressbar",
-        "data-state": oe(o, i),
+        "data-state": ne(o, i),
         "data-value": o ?? void 0,
         "data-max": i,
         ...n,
@@ -230,14 +230,14 @@ var _ = "Progress", j = 100, [sa, Da] = ge(_), [ra, ta] = sa(_), re = E.forwardR
     ) });
   }
 );
-re.displayName = _;
-var te = "ProgressIndicator", le = E.forwardRef(
+te.displayName = _;
+var le = "ProgressIndicator", oe = E.forwardRef(
   (a, s) => {
-    const { __scopeProgress: r, ...t } = a, l = ta(te, r);
+    const { __scopeProgress: r, ...t } = a, l = la(le, r);
     return /* @__PURE__ */ e(
-      H.div,
+      U.div,
       {
-        "data-state": oe(l.value, l.max),
+        "data-state": ne(l.value, l.max),
         "data-value": l.value ?? void 0,
         "data-max": l.max,
         ...t,
@@ -246,11 +246,11 @@ var te = "ProgressIndicator", le = E.forwardRef(
     );
   }
 );
-le.displayName = te;
-function la(a, s) {
+oe.displayName = le;
+function oa(a, s) {
   return `${Math.round(a / s * 100)}%`;
 }
-function oe(a, s) {
+function ne(a, s) {
   return a == null ? "indeterminate" : a === s ? "complete" : "loading";
 }
 function T(a) {
@@ -262,10 +262,10 @@ function V(a) {
 function q(a, s) {
   return T(a) && !isNaN(a) && a <= s && a >= 0;
 }
-function oa(a, s) {
+function na(a, s) {
   return `Invalid prop \`max\` of value \`${a}\` supplied to \`${s}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${j}\`.`;
 }
-function na(a, s) {
+function ia(a, s) {
   return `Invalid prop \`value\` of value \`${a}\` supplied to \`${s}\`. The \`value\` prop must be:
   - a positive number
   - less than the value passed to \`max\` (or ${j} if no \`max\` prop is set)
@@ -273,9 +273,9 @@ function na(a, s) {
 
 Defaulting to \`null\`.`;
 }
-var ne = re, ia = le;
-const ie = E.forwardRef(({ className: a, value: s, ...r }, t) => /* @__PURE__ */ e(
-  ne,
+var ie = te, ca = oe;
+const ce = E.forwardRef(({ className: a, value: s, ...r }, t) => /* @__PURE__ */ e(
+  ie,
   {
     ref: t,
     className: b(
@@ -284,7 +284,7 @@ const ie = E.forwardRef(({ className: a, value: s, ...r }, t) => /* @__PURE__ */
     ),
     ...r,
     children: /* @__PURE__ */ e(
-      ia,
+      ca,
       {
         className: "h-full w-full flex-1 transition-all",
         style: {
@@ -295,14 +295,14 @@ const ie = E.forwardRef(({ className: a, value: s, ...r }, t) => /* @__PURE__ */
     )
   }
 ));
-ie.displayName = ne.displayName;
+ce.displayName = ie.displayName;
 const da = ({ value: a, max: s = 100, label: r, color: t }, l) => {
-  const d = t || be(0), n = a / s * 100;
-  return /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", "aria-live": "polite", children: [
+  const c = t || xe(0), n = a / s * 100;
+  return /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", "aria-live": "polite", children: [
     /* @__PURE__ */ e("div", { className: "flex-grow", children: /* @__PURE__ */ e(
-      ie,
+      ce,
       {
-        color: d,
+        color: c,
         value: n,
         className: "w-full",
         "aria-valuemin": 0,
@@ -313,68 +313,68 @@ const da = ({ value: a, max: s = 100, label: r, color: t }, l) => {
     ) }),
     r && /* @__PURE__ */ e("div", { className: "flex-shrink-0 text-sm font-medium", children: r })
   ] });
-}, ca = ve(da), Ma = g(
+}, ua = be(da), Ta = g(
   {
     name: "AreaChart",
     type: "info"
   },
-  xe
-), Ta = g(
+  Ce
+), Ia = g(
   {
     name: "BarChart",
     type: "info"
   },
-  Ce
+  ye
 ), Ba = g(
   {
     name: "CategoryBarChart",
     type: "info"
   },
-  ye
-), Ia = g(
-  {
-    name: "LineChart",
-    type: "info"
-  },
   we
 ), Ra = g(
   {
-    name: "PieChart",
+    name: "LineChart",
     type: "info"
   },
   Ne
 ), Oa = g(
   {
-    name: "VerticalBarChart",
+    name: "PieChart",
     type: "info"
   },
   Le
 ), $a = g(
+  {
+    name: "VerticalBarChart",
+    type: "info"
+  },
+  Pe
+), Ea = g(
   {
     name: "ProgressBarChart",
     type: "info"
   },
-  ca
+  ua
 ), O = ({ count: a, list: s }) => {
   const [r, t] = v(!1), l = /* @__PURE__ */ e(M, { label: `+${a}` });
-  return s != null && s.length ? /* @__PURE__ */ c(U, { open: r, onOpenChange: t, children: [
-    /* @__PURE__ */ e(G, { asChild: !0, children: /* @__PURE__ */ e("button", { className: Pe("inline-flex flex-shrink-0 items-center"), children: l }) }),
+  return s != null && s.length ? /* @__PURE__ */ d(G, { open: r, onOpenChange: t, children: [
+    /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e("button", { className: Se("inline-flex flex-shrink-0 items-center"), children: l }) }),
     /* @__PURE__ */ e(
-      W,
+      J,
       {
         className: "rounded-md border border-solid border-f1-border-secondary p-1 shadow-md",
         align: "end",
-        children: /* @__PURE__ */ c(Y, { className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[172px] flex-col", children: [
-          s.map((d, n) => /* @__PURE__ */ e(
+        children: /* @__PURE__ */ d(Y, { className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[172px] flex-col", children: [
+          s.map((c, n) => /* @__PURE__ */ e(
             "div",
             {
               className: "flex w-[220px] min-w-0 items-center gap-1.5 px-2 py-1 [&:first-child]:pt-2 [&:last-child]:pb-2",
-              children: /* @__PURE__ */ e(M, { ...d })
+              children: /* @__PURE__ */ e(M, { ...c })
             },
             n
           )),
           /* @__PURE__ */ e(
-            J,
+            X,
             {
               orientation: "vertical",
               className: "[&_div]:bg-f1-background"
@@ -394,7 +394,7 @@ const de = ({
 }) => {
   if (t === "fill")
     return /* @__PURE__ */ e(
-      Fe,
+      ke,
       {
         items: a,
         renderListItem: (o) => /* @__PURE__ */ e(M, { ...o }),
@@ -411,45 +411,45 @@ const de = ({
         className: "flex-1"
       }
     );
-  const l = a.slice(0, s), d = a.slice(s), n = r ?? a.length - s, i = n > 0;
-  return /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+  const l = a.slice(0, s), c = a.slice(s), n = r ?? a.length - s, i = n > 0;
+  return /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
     l.map((o, f) => /* @__PURE__ */ e(M, { ...o }, f)),
     i && /* @__PURE__ */ e(
       O,
       {
         count: n,
-        list: r ? void 0 : d
+        list: r ? void 0 : c
       }
     )
   ] });
 };
 de.displayName = "F0ChipList";
-const Ea = Se(
+const _a = Fe(
   "F0ChipList",
   de
-), ua = {
+), fa = {
   xs: 1,
   sm: 2,
   md: 2,
   lg: 2
-}, fa = B(function({ widgets: s, children: r }, t) {
-  const l = ae(null);
-  Ze(t, () => l.current);
-  const d = ea.toArray(s).filter((n) => !!n).map((n, i) => /* @__PURE__ */ e("div", { className: "h-full @5xl:h-auto [&>div]:h-full", children: n }, i));
-  return /* @__PURE__ */ e(X, { layout: "home", children: /* @__PURE__ */ c("div", { ref: l, className: "@container", children: [
-    /* @__PURE__ */ c("div", { className: "flex flex-col gap-6 px-5 pt-4 @md:pt-2 @5xl:hidden", children: [
-      /* @__PURE__ */ e(ke, { columns: ua, showArrows: !1, children: d }),
+}, ha = I(function({ widgets: s, children: r }, t) {
+  const l = se(null);
+  ea(t, () => l.current);
+  const c = aa.toArray(s).filter((n) => !!n).map((n, i) => /* @__PURE__ */ e("div", { className: "h-full @5xl:h-auto [&>div]:h-full", children: n }, i));
+  return /* @__PURE__ */ e(K, { layout: "home", children: /* @__PURE__ */ d("div", { ref: l, className: "@container", children: [
+    /* @__PURE__ */ d("div", { className: "flex flex-col gap-6 px-5 pt-4 @md:pt-2 @5xl:hidden", children: [
+      /* @__PURE__ */ e(De, { columns: fa, showArrows: !1, children: c }),
       /* @__PURE__ */ e("main", { children: r })
     ] }),
-    /* @__PURE__ */ c("div", { className: "hidden grid-cols-3 gap-5 px-6 pb-6 pt-2 @5xl:grid", children: [
-      /* @__PURE__ */ e("div", { className: "col-span-3 flex flex-row gap-5 *:flex-1", children: d.slice(0, 3) }),
+    /* @__PURE__ */ d("div", { className: "hidden grid-cols-3 gap-5 px-6 pb-6 pt-2 @5xl:grid", children: [
+      /* @__PURE__ */ e("div", { className: "col-span-3 flex flex-row gap-5 *:flex-1", children: c.slice(0, 3) }),
       /* @__PURE__ */ e("main", { className: "col-span-2", children: r }),
-      /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col gap-5", children: d.slice(3) })
+      /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col gap-5", children: c.slice(3) })
     ] })
   ] }) });
-}), ha = B(
+}), ma = I(
   function({ children: s, sideContent: r, mainColumnPosition: t = "left" }, l) {
-    return /* @__PURE__ */ e("div", { ref: l, className: "h-full overflow-auto", children: /* @__PURE__ */ c(
+    return /* @__PURE__ */ e("div", { ref: l, className: "h-full overflow-auto", children: /* @__PURE__ */ d(
       "div",
       {
         className: b(
@@ -473,14 +473,14 @@ const Ea = Se(
       }
     ) });
   }
-), A = ({ children: a }) => /* @__PURE__ */ e("aside", { className: "py-5 pl-2 pr-4 sm:basis-1/4 sm:pb-6", children: a }), pa = De({
+), A = ({ children: a }) => /* @__PURE__ */ e("aside", { className: "py-5 pl-2 pr-4 sm:basis-1/4 sm:pb-6", children: a }), pa = Me({
   base: "relative flex min-h-full w-full flex-col gap-4 place-self-center overflow-y-auto px-6 py-5",
   variants: {
     variant: {
       narrow: "max-w-screen-lg"
     }
   }
-}), ce = Qe.forwardRef(({ children: a, variant: s, className: r, ...t }, l) => /* @__PURE__ */ e(X, { layout: "standard", children: /* @__PURE__ */ e(
+}), ue = Ze.forwardRef(({ children: a, variant: s, className: r, ...t }, l) => /* @__PURE__ */ e(K, { layout: "standard", children: /* @__PURE__ */ e(
   "section",
   {
     ref: l,
@@ -489,39 +489,39 @@ const Ea = Se(
     children: /* @__PURE__ */ e("div", { className: b(pa({ variant: s })), children: a })
   }
 ) }));
-ce.displayName = "StandardLayout";
-const _a = g(
+ue.displayName = "StandardLayout";
+const ja = g(
   {
     name: "StandardLayout",
     type: "layout"
   },
-  ce
-), ja = g(
+  ue
+), za = g(
   {
     name: "TwoColumnLayout",
     type: "layout"
   },
-  ha
-), za = g(
+  ma
+), Va = g(
   {
     name: "HomeLayout",
     type: "layout"
   },
-  fa
-), ma = ({ benefits: a }) => /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: a.map((s, r) => /* @__PURE__ */ e(ga, { text: s }, r)) }), ga = ({ text: a }) => /* @__PURE__ */ c("div", { className: "flex flex-row items-start gap-2", children: [
-  /* @__PURE__ */ e(Te, { icon: Be, size: "md", className: "text-f1-icon-positive" }),
+  ha
+), ga = ({ benefits: a }) => /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: a.map((s, r) => /* @__PURE__ */ e(va, { text: s }, r)) }), va = ({ text: a }) => /* @__PURE__ */ d("div", { className: "flex flex-row items-start gap-2", children: [
+  /* @__PURE__ */ e(Ie, { icon: Be, size: "md", className: "text-f1-icon-positive" }),
   /* @__PURE__ */ e("span", { children: a })
-] }), ue = B(
+] }), fe = I(
   ({
     title: a,
     image: s,
     benefits: r,
     actions: t,
     withShadow: l = !0,
-    module: d,
+    module: c,
     moduleName: n,
     tag: i
-  }, o) => /* @__PURE__ */ c(
+  }, o) => /* @__PURE__ */ d(
     "div",
     {
       ref: o,
@@ -538,17 +538,17 @@ const _a = g(
             className: "h-full w-full rounded-lg object-cover"
           }
         ) }),
-        /* @__PURE__ */ c("div", { className: "flex flex-col justify-center gap-8 px-8 py-5", children: [
-          /* @__PURE__ */ c("div", { className: "flex flex-col gap-5", children: [
-            /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ c("div", { className: "flex flex-row items-center gap-2", children: [
-                d && /* @__PURE__ */ e(K, { module: d }),
+        /* @__PURE__ */ d("div", { className: "flex flex-col justify-center gap-8 px-8 py-5", children: [
+          /* @__PURE__ */ d("div", { className: "flex flex-col gap-5", children: [
+            /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ d("div", { className: "flex flex-row items-center gap-2", children: [
+                c && /* @__PURE__ */ e(Q, { module: c }),
                 n && /* @__PURE__ */ e("p", { className: "text-base font-medium text-f1-foreground", children: n })
               ] }),
-              i && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e(Me, { icon: i.icon, text: i.label }) }),
+              i && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e(Te, { icon: i.icon, text: i.label }) }),
               /* @__PURE__ */ e("h2", { className: "font-bold text-xl text-f1-foreground", children: a })
             ] }),
-            /* @__PURE__ */ e(ma, { benefits: r })
+            /* @__PURE__ */ e(ga, { benefits: r })
           ] }),
           t && /* @__PURE__ */ e("div", { className: "flex gap-3", children: t })
         ] })
@@ -556,46 +556,46 @@ const _a = g(
     }
   )
 );
-ue.displayName = "ProductBlankslate";
-function va({
+fe.displayName = "ProductBlankslate";
+function ba({
   isOpen: a,
   onClose: s,
   title: r,
   children: t,
   module: l,
-  portalContainer: d
+  portalContainer: c
 }) {
   const [n, i] = v(a);
-  return se(() => {
+  return re(() => {
     i(a);
-  }, [a]), /* @__PURE__ */ e(Ie, { open: n, onOpenChange: (f) => {
+  }, [a]), /* @__PURE__ */ e(Re, { open: n, onOpenChange: (f) => {
     i(f), f || s();
-  }, modal: !0, children: /* @__PURE__ */ c(
-    Re,
+  }, modal: !0, children: /* @__PURE__ */ d(
+    Oe,
     {
       className: "max-h-[620px] w-[760px] overflow-y-auto overflow-x-hidden bg-f1-background",
-      container: d,
+      container: c,
       children: [
-        /* @__PURE__ */ c("div", { className: "flex flex-row items-center justify-between px-4 py-4", children: [
-          /* @__PURE__ */ c(Oe, { className: "flex flex-row items-center gap-2 text-lg font-semibold text-f1-foreground", children: [
-            l && /* @__PURE__ */ e(K, { module: l, size: "lg" }),
+        /* @__PURE__ */ d("div", { className: "flex flex-row items-center justify-between px-4 py-4", children: [
+          /* @__PURE__ */ d($e, { className: "flex flex-row items-center gap-2 text-lg font-semibold text-f1-foreground", children: [
+            l && /* @__PURE__ */ e(Q, { module: l, size: "lg" }),
             r
           ] }),
           /* @__PURE__ */ e(
-            $e,
+            Ee,
             {
               variant: "outline",
-              icon: Q,
+              icon: Z,
               onClick: s,
               label: "Close modal",
               hideLabel: !0
             }
           )
         ] }),
-        /* @__PURE__ */ c(Y, { className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[512px] flex-col", children: [
+        /* @__PURE__ */ d(Y, { className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[512px] flex-col", children: [
           t,
           /* @__PURE__ */ e(
-            J,
+            X,
             {
               orientation: "vertical",
               className: "[&_div]:bg-f1-background"
@@ -606,13 +606,13 @@ function va({
     }
   ) });
 }
-function Va({
+function qa({
   isOpen: a,
   onClose: s,
   title: r,
   image: t,
   benefits: l,
-  errorMessage: d,
+  errorMessage: c,
   successMessage: n,
   loadingState: i,
   nextSteps: o,
@@ -624,38 +624,38 @@ function Va({
   portalContainer: x,
   tag: S
 }) {
-  const [I, F] = v(a), [C, y] = v(null), [P, p] = v(!1), k = async () => {
+  const [B, F] = v(a), [C, y] = v(null), [P, m] = v(!1), k = async () => {
     if (h != null && h.onClick) {
-      p(!0);
+      m(!0);
       try {
         await h.onClick(), F(!1), y("success");
       } catch {
         y("error");
       } finally {
-        p(!1);
+        m(!1);
       }
     }
   }, D = () => {
     F(!1), s == null || s();
   }, R = P;
-  return /* @__PURE__ */ c($, { children: [
+  return /* @__PURE__ */ d($, { children: [
     /* @__PURE__ */ e(
-      va,
+      ba,
       {
-        isOpen: I,
+        isOpen: B,
         onClose: D,
         title: N,
         module: L,
         portalContainer: x,
         children: /* @__PURE__ */ e("div", { className: "pb-4 pl-4", children: /* @__PURE__ */ e(
-          ue,
+          fe,
           {
             title: r,
             image: t,
             benefits: l,
             withShadow: !1,
             tag: S,
-            actions: /* @__PURE__ */ c("div", { className: "flex gap-3", children: [
+            actions: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
               h && /* @__PURE__ */ e(
                 w,
                 {
@@ -683,14 +683,14 @@ function Va({
       }
     ),
     C && /* @__PURE__ */ e(
-      Z,
+      ee,
       {
         open: !0,
         onClose: () => {
           D(), y(null);
         },
         success: C === "success",
-        errorMessage: d,
+        errorMessage: c,
         successMessage: n,
         nextSteps: o,
         closeLabel: f,
@@ -699,13 +699,13 @@ function Va({
     )
   ] });
 }
-function ba({
+function xa({
   mediaUrl: a,
   title: s,
   description: r,
   onClose: t,
   dismissible: l,
-  width: d,
+  width: c,
   trackVisibility: n,
   actions: i,
   showConfirmation: o = !0
@@ -713,24 +713,24 @@ function ba({
   const [f, h] = v(!1), N = () => {
     h(!0), t && t();
   };
-  se(() => {
+  re(() => {
     n && n(!f);
   }, [n, f]);
   const L = a == null ? void 0 : a.includes(".mp4");
-  return /* @__PURE__ */ e($, { children: f ? null : /* @__PURE__ */ c(Ee, { style: { width: d }, className: "relative bg-f1-background p-1", children: [
-    /* @__PURE__ */ c(_e, { children: [
+  return /* @__PURE__ */ e($, { children: f ? null : /* @__PURE__ */ d(_e, { style: { width: c }, className: "relative bg-f1-background p-1", children: [
+    /* @__PURE__ */ d(je, { children: [
       l && /* @__PURE__ */ e("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ e(
         w,
         {
           variant: "ghost",
-          icon: Q,
+          icon: Z,
           size: "sm",
           hideLabel: !0,
           onClick: N,
           label: "Close"
         }
       ) }),
-      /* @__PURE__ */ c("div", { children: [
+      /* @__PURE__ */ d("div", { children: [
         /* @__PURE__ */ e("div", { children: a && (L ? /* @__PURE__ */ e(
           "video",
           {
@@ -749,15 +749,15 @@ function ba({
             className: "h-full w-full rounded-md"
           }
         )) }),
-        /* @__PURE__ */ c("div", { className: "flex flex-col gap-[2px] p-3", children: [
+        /* @__PURE__ */ d("div", { className: "flex flex-col gap-[2px] p-3", children: [
           /* @__PURE__ */ e(z, { className: "text-lg font-medium", children: s }),
           /* @__PURE__ */ e(z, { className: "line-clamp-3 text-base font-normal text-f1-foreground-secondary", children: r })
         ] })
       ] })
     ] }),
-    i && /* @__PURE__ */ e(je, { className: "p-3", children: i.map(
+    i && /* @__PURE__ */ e(ze, { className: "p-3", children: i.map(
       (u) => u.type === "upsell" ? /* @__PURE__ */ e(
-        ee,
+        ae,
         {
           label: u.label,
           onRequest: u.onClick,
@@ -782,10 +782,10 @@ function ba({
     ) })
   ] }) });
 }
-const xa = B(
+const Ca = I(
   function({ primaryAction: s, secondaryAction: r, ...t }, l) {
-    const d = (o) => o.variant === "promote" ? /* @__PURE__ */ e(
-      ee,
+    const c = (o) => o.variant === "promote" ? /* @__PURE__ */ e(
+      ae,
       {
         label: o.label,
         onRequest: async () => {
@@ -810,32 +810,32 @@ const xa = B(
         icon: o.icon
       }
     ), n = (s == null ? void 0 : s.variant) !== "promote" ? s : void 0, i = (r == null ? void 0 : r.variant) !== "promote" ? r : void 0;
-    return /* @__PURE__ */ c(
-      ze,
+    return /* @__PURE__ */ d(
+      Ve,
       {
         ref: l,
         ...t,
         primaryAction: n,
         secondaryAction: i,
         children: [
-          (s == null ? void 0 : s.variant) === "promote" && d(s),
-          (r == null ? void 0 : r.variant) === "promote" && d(r)
+          (s == null ? void 0 : s.variant) === "promote" && c(s),
+          (r == null ? void 0 : r.variant) === "promote" && c(r)
         ]
       }
     );
   }
 );
-xa.displayName = "UpsellingBanner";
-function qa({
+Ca.displayName = "UpsellingBanner";
+function Aa({
   isOpen: a,
   setIsOpen: s,
   label: r,
   variant: t = "promote",
   size: l = "md",
-  showIcon: d = !0,
+  showIcon: c = !0,
   side: n = "right",
   align: i = "center",
-  icon: o = Ve,
+  icon: o = qe,
   mediaUrl: f,
   title: h,
   description: N,
@@ -843,46 +843,46 @@ function qa({
   trackVisibility: u,
   actions: x,
   onClick: S,
-  hideLabel: I = !1
+  hideLabel: B = !1
 }) {
-  const [F, C] = v(!1), [y, P] = v(null), [p, k] = v(null), D = (m) => {
-    s(m), S && S();
-  }, R = async (m) => {
-    if (m.type === "upsell") {
-      k(m);
+  const [F, C] = v(!1), [y, P] = v(null), [m, k] = v(null), D = (p) => {
+    s(p), S && S();
+  }, R = async (p) => {
+    if (p.type === "upsell") {
+      k(p);
       try {
-        await m.onClick(), m.showConfirmation && (C(!0), P("success"));
+        await p.onClick(), p.showConfirmation && (C(!0), P("success"));
       } catch {
         C(!0), P("error");
       }
     }
-  }, fe = () => {
+  }, he = () => {
     P(null), C(!1), k(null), s(!1);
-  }, he = a && !F, pe = x == null ? void 0 : x.map((m) => m.type === "upsell" ? {
-    ...m,
-    onClick: () => R(m)
-  } : m);
-  return /* @__PURE__ */ c($, { children: [
-    /* @__PURE__ */ c(U, { open: he, onOpenChange: D, children: [
-      /* @__PURE__ */ e(G, { asChild: !0, children: /* @__PURE__ */ e(
+  }, me = a && !F, pe = x == null ? void 0 : x.map((p) => p.type === "upsell" ? {
+    ...p,
+    onClick: () => R(p)
+  } : p);
+  return /* @__PURE__ */ d($, { children: [
+    /* @__PURE__ */ d(G, { open: me, onOpenChange: D, children: [
+      /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e(
         w,
         {
           variant: t,
           label: r,
           size: l,
-          icon: d ? o : void 0,
+          icon: c ? o : void 0,
           onClick: () => s(a),
-          hideLabel: I
+          hideLabel: B
         }
       ) }),
       /* @__PURE__ */ e(
-        W,
+        J,
         {
           side: n,
           align: i,
           className: "w-fit border-none bg-transparent p-2 shadow-none",
           children: /* @__PURE__ */ e(
-            ba,
+            xa,
             {
               mediaUrl: f,
               title: h,
@@ -898,28 +898,28 @@ function qa({
         }
       )
     ] }),
-    (p == null ? void 0 : p.type) === "upsell" && p.showConfirmation && y && /* @__PURE__ */ e(
-      Z,
+    (m == null ? void 0 : m.type) === "upsell" && m.showConfirmation && y && /* @__PURE__ */ e(
+      ee,
       {
         open: !0,
-        onClose: fe,
+        onClose: he,
         success: y === "success",
-        errorMessage: p.errorMessage,
-        successMessage: p.successMessage,
-        nextSteps: p.nextSteps,
-        closeLabel: p.closeLabel,
+        errorMessage: m.errorMessage,
+        successMessage: m.successMessage,
+        nextSteps: m.nextSteps,
+        closeLabel: m.closeLabel,
         portalContainer: null
       }
     )
   ] });
 }
-const Ca = aa(
+const ya = sa(
   null
-), ya = ({ children: a, fullScreen: s = !0 }) => {
-  const r = ae(null), [t, l] = v(r.current);
-  return Ke(() => {
+), wa = ({ children: a, fullScreen: s = !0 }) => {
+  const r = se(null), [t, l] = v(r.current);
+  return Qe(() => {
     l(r.current);
-  }, []), /* @__PURE__ */ e(Ca.Provider, { value: { element: t }, children: /* @__PURE__ */ e(
+  }, []), /* @__PURE__ */ e(ya.Provider, { value: { element: t }, children: /* @__PURE__ */ e(
     "div",
     {
       ref: r,
@@ -930,30 +930,30 @@ const Ca = aa(
       children: a
     }
   ) });
-}, wa = ({
+}, Na = ({
   children: a
-}) => /* @__PURE__ */ e(Xe, { reducedMotion: "user", children: a }), Aa = ({
+}) => /* @__PURE__ */ e(Ke, { reducedMotion: "user", children: a }), Ha = ({
   children: a,
   layout: s,
   link: r,
   privacyModeInitiallyEnabled: t,
   image: l,
-  i18n: d,
+  i18n: c,
   l10n: n,
   isDev: i = !1,
   dataCollectionStorageHandler: o,
   showExperimentalWarnings: f = !1
-}) => /* @__PURE__ */ e(wa, { children: /* @__PURE__ */ e(
-  qe,
+}) => /* @__PURE__ */ e(Na, { children: /* @__PURE__ */ e(
+  Ae,
   {
     isDev: i,
     showExperimentalWarnings: f,
-    children: /* @__PURE__ */ e(Ae, { ...n, children: /* @__PURE__ */ e(He, { ...d, children: /* @__PURE__ */ e(Ue, { ...r, children: /* @__PURE__ */ e(ya, { ...s, children: /* @__PURE__ */ e(Ge, { children: /* @__PURE__ */ e(
-      We,
+    children: /* @__PURE__ */ e(He, { ...n, children: /* @__PURE__ */ e(Ue, { ...c, children: /* @__PURE__ */ e(Ge, { ...r, children: /* @__PURE__ */ e(wa, { ...s, children: /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(
+      Je,
       {
         initiallyEnabled: t,
         children: /* @__PURE__ */ e(Ye, { ...l, children: /* @__PURE__ */ e(
-          Je,
+          Xe,
           {
             handler: o,
             children: a
@@ -962,84 +962,92 @@ const Ca = aa(
       }
     ) }) }) }) }) })
   }
-) });
+) }), H = (a) => `datacollection-${a}`, Ua = {
+  get: async (a) => JSON.parse(
+    localStorage.getItem(H(a)) ?? "{}"
+  ),
+  set: async (a, s) => {
+    localStorage.setItem(H(a), JSON.stringify(s));
+  }
+};
 export {
-  Ma as AreaChart,
-  Ga as Await,
-  Ta as BarChart,
+  Ta as AreaChart,
+  Ja as Await,
+  Ia as BarChart,
   w as Button,
   Ba as CategoryBarChart,
-  Wa as CopyButton,
-  Ya as DndProvider,
-  Ja as EmojiImage,
-  Xa as F0Avatar,
-  Ka as F0AvatarAlert,
-  Qa as F0AvatarCompany,
-  Za as F0AvatarDate,
-  es as F0AvatarEmoji,
-  as as F0AvatarFile,
-  ss as F0AvatarIcon,
-  rs as F0AvatarList,
-  K as F0AvatarModule,
-  ts as F0AvatarPerson,
-  ls as F0AvatarTeam,
-  os as F0Card,
-  ns as F0Checkbox,
-  Ea as F0ChipList,
-  is as F0EventCatcherProvider,
-  Te as F0Icon,
-  Aa as F0Provider,
-  ds as F0TagAlert,
-  cs as F0TagBalance,
-  us as F0TagCompany,
-  fs as F0TagDot,
-  hs as F0TagList,
-  ps as F0TagPerson,
-  Me as F0TagRaw,
-  ms as F0TagStatus,
-  gs as F0TagTeam,
-  vs as GROUP_ID_SYMBOL,
-  za as HomeLayout,
-  Ia as LineChart,
-  Fa as Link,
-  bs as OneFilterPicker,
-  Ra as PieChart,
-  We as PrivacyModeProvider,
-  ue as ProductBlankslate,
-  xs as ProductCard,
-  Va as ProductModal,
-  ba as ProductWidget,
-  $a as ProgressBarChart,
-  _a as StandardLayout,
-  Cs as TagCounter,
-  ja as TwoColumnLayout,
-  Z as UpsellRequestResponseDialog,
-  xa as UpsellingBanner,
-  ee as UpsellingButton,
-  qa as UpsellingPopover,
-  Oa as VerticalBarChart,
-  ka as avatarVariants,
-  ys as buildTranslations,
-  ws as createAtlaskitDriver,
-  Ns as createDataSourceDefinition,
-  Sa as defaultTranslations,
-  Se as experimental,
-  Ls as getAnimationVariants,
-  Ps as getDataSourcePaginationType,
-  Ss as getEmojiLabel,
-  Fs as isInfiniteScrollPagination,
-  ks as isPageBasedPagination,
-  Ds as modules,
-  Ms as tagDotColors,
-  Ts as useData,
-  Bs as useDataSource,
-  Is as useDndEvents,
-  Rs as useDraggable,
-  Os as useDroppableList,
-  $s as useEmojiConfetti,
-  Es as useGroups,
-  _s as usePrivacyMode,
-  js as useReducedMotion,
-  zs as useSelectable,
-  Vs as useXRay
+  Ya as CopyButton,
+  Xa as DndProvider,
+  Ka as EmojiImage,
+  Qa as F0Avatar,
+  Za as F0AvatarAlert,
+  es as F0AvatarCompany,
+  as as F0AvatarDate,
+  ss as F0AvatarEmoji,
+  rs as F0AvatarFile,
+  ts as F0AvatarIcon,
+  ls as F0AvatarList,
+  Q as F0AvatarModule,
+  os as F0AvatarPerson,
+  ns as F0AvatarTeam,
+  is as F0Card,
+  cs as F0Checkbox,
+  _a as F0ChipList,
+  ds as F0EventCatcherProvider,
+  Ie as F0Icon,
+  Ha as F0Provider,
+  us as F0TagAlert,
+  fs as F0TagBalance,
+  hs as F0TagCompany,
+  ms as F0TagDot,
+  ps as F0TagList,
+  gs as F0TagPerson,
+  Te as F0TagRaw,
+  vs as F0TagStatus,
+  bs as F0TagTeam,
+  xs as GROUP_ID_SYMBOL,
+  Va as HomeLayout,
+  Ra as LineChart,
+  ka as Link,
+  Cs as OneFilterPicker,
+  Oa as PieChart,
+  Je as PrivacyModeProvider,
+  fe as ProductBlankslate,
+  ys as ProductCard,
+  qa as ProductModal,
+  xa as ProductWidget,
+  Ea as ProgressBarChart,
+  ja as StandardLayout,
+  ws as TagCounter,
+  za as TwoColumnLayout,
+  ee as UpsellRequestResponseDialog,
+  Ca as UpsellingBanner,
+  ae as UpsellingButton,
+  Aa as UpsellingPopover,
+  $a as VerticalBarChart,
+  Da as avatarVariants,
+  Ns as buildTranslations,
+  Ls as createAtlaskitDriver,
+  Ps as createDataSourceDefinition,
+  Ua as dataCollectionLocalStorageHandler,
+  Fa as defaultTranslations,
+  Fe as experimental,
+  Ss as getAnimationVariants,
+  Fs as getDataSourcePaginationType,
+  ks as getEmojiLabel,
+  Ds as isInfiniteScrollPagination,
+  Ms as isPageBasedPagination,
+  Ts as modules,
+  Is as tagDotColors,
+  Bs as useData,
+  Rs as useDataSource,
+  Os as useDndEvents,
+  $s as useDraggable,
+  Es as useDroppableList,
+  _s as useEmojiConfetti,
+  js as useGroups,
+  zs as usePrivacyMode,
+  Vs as useReducedMotion,
+  qs as useSelectable,
+  As as useXRay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react",
-  "version": "1.202.0",
+  "version": "1.203.1",
   "main": "dist/f0.js",
   "typings": "dist/f0.d.ts",
   "private": false,