@factorialco/f0-react 1.240.0 → 1.240.1

package/dist/experimental.d.ts

@@ -5385,8 +5385,8 @@ declare global {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        liveCompanion: {
-            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
+        aiBlock: {
+            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
         };
     }
 }
@@ -5394,8 +5394,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        aiBlock: {
-            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
+        liveCompanion: {
+            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
         };
     }
 }

package/dist/f0.d.ts

@@ -2438,7 +2438,7 @@ export declare type ProductCardProps = {
     type?: never;
 });
 
-export declare function ProductModal({ isOpen, onClose, title, image, benefits, errorMessage, successMessage, loadingState, nextSteps, closeLabel, primaryAction, modalTitle, modalModule, secondaryAction, portalContainer, tag, }: ProductModalProps): JSX_2.Element;
+export declare function ProductModal({ isOpen, onClose, title, image, benefits, errorMessage, successMessage, loadingState, nextSteps, closeLabel, primaryAction, modalTitle, modalModule, secondaryAction, portalContainer, tag, showResponseDialog, }: ProductModalProps): JSX_2.Element;
 
 declare type ProductModalProps = {
     isOpen: boolean;
@@ -2476,6 +2476,7 @@ declare type ProductModalProps = {
     primaryAction?: Action_2;
     secondaryAction?: Action_2;
     portalContainer?: HTMLElement | null;
+    showResponseDialog?: boolean;
 };
 
 export declare function ProductWidget({ mediaUrl, title, description, onClose, dismissible, width, trackVisibility, actions, showConfirmation, }: ProductWidgetProps): JSX_2.Element;
@@ -3401,8 +3402,8 @@ declare global {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        liveCompanion: {
-            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
+        aiBlock: {
+            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
         };
     }
 }
@@ -3410,8 +3411,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        aiBlock: {
-            insertAIBlock: (data: AIBlockData, config: AIBlockConfigWithLabels) => ReturnType;
+        liveCompanion: {
+            insertLiveCompanion: (data: LiveCompanionData, config?: LiveCompanionConfig) => ReturnType;
         };
     }
 }

package/dist/f0.js

@@ -1,8 +1,8 @@
-import { C as g, L as ge, c as ve, P as G, a as b, f as be, g as z, A as xe, B as Ce, b as ye, d as we, e as Ne, V as Pe, h as M, i as H, j as U, k as Le, l as J, S as Y, m as X, n as Se, O as Fe, o as K, p as ke, q as De, F as Q, r as Me, s as Te, t as Ie, D as Re, u as Be, v as Oe, w as $e, x as Z, y as w, U as ee, z as Ee, E as _e, G as A, H as je, I as ae, J as ze, K as Ae, M as Ve, N as qe, Q as We, R as Ge, X as He, T as Ue, W as Je, Y as Ye, Z as Xe, _ as Ke } from "./hooks-FlkC6pns.js";
-import { az as Ja, $ as Ya, aB as Xa, aK as Ka, a0 as Qa, a1 as Za, a2 as er, a3 as ar, a4 as rr, a5 as sr, a6 as tr, a7 as lr, a9 as or, aa as nr, ab as ir, ac as dr, aG as cr, ae as ur, af as fr, ag as mr, ah as hr, ak as pr, al as gr, am as vr, an as br, ap as xr, ad as Cr, ao as yr, aj as wr, aH as Nr, aA as Pr, au as Lr, ax as Sr, at as Fr, aL as kr, as as Dr, ar as Mr, a8 as Tr, ai as Ir, aq as Rr, av as Br, aC as Or, aD as $r, aE as Er, aM as _r, aw as jr, aF as zr, aJ as Ar, ay as Vr, aI as qr } from "./hooks-FlkC6pns.js";
-import { jsx as e, jsxs as c, Fragment as $ } from "react/jsx-runtime";
-import * as E from "react";
-import Qe, { useState as v, forwardRef as I, useRef as re, useImperativeHandle as Ze, Children as ea, useEffect as se, createContext as aa } from "react";
+import { C as p, L as ge, c as ve, P as H, a as b, f as be, g as A, A as xe, B as Ce, b as ye, d as we, e as Ne, V as Pe, h as D, i as U, j as J, k as Le, l as Y, S as X, m as K, n as Se, O as Fe, o as Q, p as ke, q as Me, F as Z, r as De, s as Te, t as Ie, D as Be, u as Re, v as Oe, w as $e, x as ee, y as w, U as ae, z as Ee, E as _e, G as V, H as je, I as re, J as ze, K as Ae, M as Ve, N as qe, Q as We, R as Ge, X as He, T as Ue, W as Je, Y as Ye, Z as Xe, _ as Ke } from "./hooks-FlkC6pns.js";
+import { az as Ja, $ as Ya, aB as Xa, aK as Ka, a0 as Qa, a1 as Za, a2 as er, a3 as ar, a4 as rr, a5 as sr, a6 as tr, a7 as lr, a9 as or, aa as nr, ab as ir, ac as dr, aG as cr, ae as ur, af as fr, ag as mr, ah as hr, ak as pr, al as gr, am as vr, an as br, ap as xr, ad as Cr, ao as yr, aj as wr, aH as Nr, aA as Pr, au as Lr, ax as Sr, at as Fr, aL as kr, as as Mr, ar as Dr, a8 as Tr, ai as Ir, aq as Br, av as Rr, aC as Or, aD as $r, aE as Er, aM as _r, aw as jr, aF as zr, aJ as Ar, ay as Vr, aI as qr } from "./hooks-FlkC6pns.js";
+import { jsx as e, jsxs as c, Fragment as E } from "react/jsx-runtime";
+import * as _ from "react";
+import Qe, { useState as v, forwardRef as I, useRef as se, useImperativeHandle as Ze, Children as ea, useEffect as te, createContext as aa } from "react";
 const Fa = {
   approvals: {
     history: "Approval history",
@@ -204,17 +204,17 @@ const Fa = {
     noResults: "No results found",
     loadingMore: "Loading..."
   }
-}, ka = g({
+}, ka = p({
   name: "Link",
   type: "info"
-}, ge), Da = [
+}, ge), Ma = [
   "person",
   "team",
   "company",
   "file",
   "flag"
 ];
-var _ = "Progress", j = 100, [ra, Ma] = ve(_), [sa, ta] = ra(_), te = E.forwardRef(
+var j = "Progress", z = 100, [ra, Da] = ve(j), [sa, ta] = ra(j), le = _.forwardRef(
   (a, r) => {
     const {
       __scopeProgress: s,
@@ -223,19 +223,19 @@ var _ = "Progress", j = 100, [ra, Ma] = ve(_), [sa, ta] = ra(_), te = E.forwardR
       getValueLabel: i = la,
       ...n
     } = a;
-    (t || t === 0) && !V(t) && console.error(oa(`${t}`, "Progress"));
-    const d = V(t) ? t : j;
-    l !== null && !q(l, d) && console.error(na(`${l}`, "Progress"));
-    const o = q(l, d) ? l : null, f = T(o) ? i(o, d) : void 0;
+    (t || t === 0) && !q(t) && console.error(oa(`${t}`, "Progress"));
+    const d = q(t) ? t : z;
+    l !== null && !W(l, d) && console.error(na(`${l}`, "Progress"));
+    const o = W(l, d) ? l : null, f = T(o) ? i(o, d) : void 0;
     return /* @__PURE__ */ e(sa, { scope: s, value: o, max: d, children: /* @__PURE__ */ e(
-      G.div,
+      H.div,
       {
         "aria-valuemax": d,
         "aria-valuemin": 0,
         "aria-valuenow": T(o) ? o : void 0,
         "aria-valuetext": f,
         role: "progressbar",
-        "data-state": ne(o, d),
+        "data-state": ie(o, d),
         "data-value": o ?? void 0,
         "data-max": d,
         ...n,
@@ -244,14 +244,14 @@ var _ = "Progress", j = 100, [ra, Ma] = ve(_), [sa, ta] = ra(_), te = E.forwardR
     ) });
   }
 );
-te.displayName = _;
-var le = "ProgressIndicator", oe = E.forwardRef(
+le.displayName = j;
+var oe = "ProgressIndicator", ne = _.forwardRef(
   (a, r) => {
-    const { __scopeProgress: s, ...l } = a, t = ta(le, s);
+    const { __scopeProgress: s, ...l } = a, t = ta(oe, s);
     return /* @__PURE__ */ e(
-      G.div,
+      H.div,
       {
-        "data-state": ne(t.value, t.max),
+        "data-state": ie(t.value, t.max),
         "data-value": t.value ?? void 0,
         "data-max": t.max,
         ...l,
@@ -260,35 +260,35 @@ var le = "ProgressIndicator", oe = E.forwardRef(
     );
   }
 );
-oe.displayName = le;
+ne.displayName = oe;
 function la(a, r) {
   return `${Math.round(a / r * 100)}%`;
 }
-function ne(a, r) {
+function ie(a, r) {
   return a == null ? "indeterminate" : a === r ? "complete" : "loading";
 }
 function T(a) {
   return typeof a == "number";
 }
-function V(a) {
+function q(a) {
   return T(a) && !isNaN(a) && a > 0;
 }
-function q(a, r) {
+function W(a, r) {
   return T(a) && !isNaN(a) && a <= r && a >= 0;
 }
 function oa(a, r) {
-  return `Invalid prop \`max\` of value \`${a}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${j}\`.`;
+  return `Invalid prop \`max\` of value \`${a}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${z}\`.`;
 }
 function na(a, r) {
   return `Invalid prop \`value\` of value \`${a}\` supplied to \`${r}\`. The \`value\` prop must be:
   - a positive number
-  - less than the value passed to \`max\` (or ${j} if no \`max\` prop is set)
+  - less than the value passed to \`max\` (or ${z} if no \`max\` prop is set)
   - \`null\` or \`undefined\` if the progress is indeterminate.
 
 Defaulting to \`null\`.`;
 }
-var ie = te, ia = oe;
-const de = E.forwardRef(({ className: a, value: r, ...s }, l) => e(ie, {
+var de = le, ia = ne;
+const ce = _.forwardRef(({ className: a, value: r, ...s }, l) => e(de, {
   ref: l,
   className: b("relative h-2 w-full overflow-hidden rounded-full bg-f1-background-secondary", a),
   ...s,
@@ -300,15 +300,15 @@ const de = E.forwardRef(({ className: a, value: r, ...s }, l) => e(ie, {
     }
   })
 }));
-de.displayName = ie.displayName;
+ce.displayName = de.displayName;
 const da = ({ value: a, max: r = 100, label: s, color: l }, t) => {
-  const i = l ? z(l) : z("categorical-1"), n = a / r * 100;
+  const i = l ? A(l) : A("categorical-1"), n = a / r * 100;
   return c("div", {
     className: "flex items-center space-x-2",
     "aria-live": "polite",
     children: [e("div", {
       className: "flex-grow",
-      children: e(de, {
+      children: e(ce, {
         color: i,
         value: n,
         className: "w-full",
@@ -322,72 +322,72 @@ const da = ({ value: a, max: r = 100, label: s, color: l }, t) => {
       children: s
     })]
   });
-}, ca = be(da), Ta = g(
+}, ca = be(da), Ta = p(
   {
     name: "AreaChart",
     type: "info"
   },
   xe
-), Ia = g(
+), Ia = p(
   {
     name: "BarChart",
     type: "info"
   },
   Ce
-), Ra = g(
+), Ba = p(
   {
     name: "CategoryBarChart",
     type: "info"
   },
   ye
-), Ba = g(
+), Ra = p(
   {
     name: "LineChart",
     type: "info"
   },
   we
-), Oa = g(
+), Oa = p(
   {
     name: "PieChart",
     type: "info"
   },
   Ne
-), $a = g(
+), $a = p(
   {
     name: "VerticalBarChart",
     type: "info"
   },
   Pe
-), Ea = g(
+), Ea = p(
   {
     name: "ProgressBarChart",
     type: "info"
   },
   ca
-), O = ({ count: a, list: r }) => {
-  const [s, l] = v(!1), t = e(M, {
+), $ = ({ count: a, list: r }) => {
+  const [s, l] = v(!1), t = e(D, {
     label: `+${a}`
   });
-  return r != null && r.length ? c(H, {
+  return r != null && r.length ? c(U, {
     open: s,
     onOpenChange: l,
-    children: [e(U, {
+    children: [e(J, {
       asChild: !0,
       children: e("button", {
         className: Le("inline-flex flex-shrink-0 items-center"),
         children: t
       })
-    }), e(J, {
+    }), e(Y, {
       className: "rounded-md border border-solid border-f1-border-secondary p-1 shadow-md",
       align: "end",
-      children: c(Y, {
+      children: c(X, {
         className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[172px] flex-col",
         children: [r.map((i, n) => 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: e(M, {
+          children: e(D, {
             ...i
           })
-        }, n)), e(X, {
+        }, n)), e(K, {
           orientation: "vertical",
           className: "[&_div]:bg-f1-background"
         })]
@@ -395,17 +395,17 @@ const da = ({ value: a, max: r = 100, label: s, color: l }, t) => {
     })]
   }) : t;
 };
-O.displayName = "ChipCounter";
-const ce = ({ chips: a, max: r = 4, remainingCount: s, layout: l = "compact" }) => {
+$.displayName = "ChipCounter";
+const ue = ({ chips: a, max: r = 4, remainingCount: s, layout: l = "compact" }) => {
   if (l === "fill")
     return e(Fe, {
       items: a,
-      renderListItem: (o) => e(M, {
+      renderListItem: (o) => e(D, {
         ...o
       }),
       renderDropdownItem: () => null,
       forceShowingOverflowIndicator: s !== void 0,
-      renderOverflowIndicator: (o) => e(O, {
+      renderOverflowIndicator: (o) => e($, {
         count: (s ?? 0) + o,
         list: s ? void 0 : a.slice(a.length - o)
       }),
@@ -415,28 +415,28 @@ const ce = ({ chips: a, max: r = 4, remainingCount: s, layout: l = "compact" })
   const t = a.slice(0, r), i = a.slice(r), n = s ?? a.length - r, d = n > 0;
   return c("div", {
     className: "flex items-center gap-2",
-    children: [t.map((o, f) => e(M, {
+    children: [t.map((o, f) => e(D, {
       ...o
-    }, f)), d && e(O, {
+    }, f)), d && e($, {
       count: n,
       list: s ? void 0 : i
     })]
   });
 };
-ce.displayName = "F0ChipList";
-const _a = Se("F0ChipList", ce), ua = {
+ue.displayName = "F0ChipList";
+const _a = Se("F0ChipList", ue), ua = {
   xs: 1,
   sm: 2,
   md: 2,
   lg: 2
 }, fa = I(function({ widgets: r, children: s }, l) {
-  const t = re(null);
+  const t = se(null);
   Ze(l, () => t.current);
   const i = ea.toArray(r).filter((n) => !!n).map((n, d) => e("div", {
     className: "h-full @5xl:h-auto [&>div]:h-full",
     children: n
   }, d));
-  return e(K, {
+  return e(Q, {
     layout: "home",
     children: c("div", {
       ref: t,
@@ -484,14 +484,14 @@ const _a = Se("F0ChipList", ce), ua = {
 }), ha = ({ children: a, className: r }) => e("aside", {
   className: b("min-w-30 py-5 pl-4 pr-4 sm:basis-1/4 sm:pb-6 md:max-w-80 md:pl-2", r),
   children: a
-}), pa = De({
+}), pa = Me({
   base: "relative flex min-h-full w-full flex-1 flex-col gap-4 place-self-center overflow-y-auto px-6 py-5",
   variants: {
     variant: {
       narrow: "max-w-screen-lg"
     }
   }
-}), ue = Qe.forwardRef(({ children: a, variant: r, className: s, ...l }, t) => e(K, {
+}), fe = Qe.forwardRef(({ children: a, variant: r, className: s, ...l }, t) => e(Q, {
   layout: "standard",
   children: e("section", {
     ref: t,
@@ -505,14 +505,14 @@ const _a = Se("F0ChipList", ce), ua = {
     })
   })
 }));
-ue.displayName = "StandardLayout";
-const ja = g({
+fe.displayName = "StandardLayout";
+const ja = p({
   name: "StandardLayout",
   type: "layout"
-}, ue), za = g({
+}, fe), za = p({
   name: "TwoColumnLayout",
   type: "layout"
-}, ma), Aa = g({
+}, ma), Aa = p({
   name: "HomeLayout",
   type: "layout"
 }, fa), ga = ({ benefits: a }) => e("div", {
@@ -529,7 +529,7 @@ const ja = g({
   }), e("span", {
     children: a
   })]
-}), fe = I(({ title: a, image: r, benefits: s, actions: l, withShadow: t = !0, module: i, moduleName: n, tag: d }, o) => c("div", {
+}), me = I(({ title: a, image: r, benefits: s, actions: l, withShadow: t = !0, module: i, moduleName: n, tag: d }, o) => c("div", {
   ref: o,
   className: b("bg-white flex flex-row rounded-xl border border-f1-border-secondary", t && "shadow-md"),
   children: [e("div", {
@@ -547,7 +547,7 @@ const ja = g({
         className: "flex flex-col gap-2",
         children: [c("div", {
           className: "flex flex-row items-center gap-2",
-          children: [i && e(Q, {
+          children: [i && e(Z, {
             module: i
           }), n && e("p", {
             className: "text-base font-medium text-f1-foreground",
@@ -555,7 +555,7 @@ const ja = g({
           })]
         }), d && e("div", {
           className: "flex justify-start",
-          children: e(Me, {
+          children: e(De, {
             icon: d.icon,
             text: d.label
           })
@@ -572,38 +572,38 @@ const ja = g({
     })]
   })]
 }));
-fe.displayName = "ProductBlankslate";
+me.displayName = "ProductBlankslate";
 function ba({ isOpen: a, onClose: r, title: s, children: l, module: t, portalContainer: i }) {
   const [n, d] = v(a);
-  return se(() => {
+  return te(() => {
     d(a);
-  }, [a]), e(Re, {
+  }, [a]), e(Be, {
     open: n,
     onOpenChange: (f) => {
       d(f), f || r();
     },
     modal: !0,
-    children: c(Be, {
+    children: c(Re, {
       className: "max-h-[620px] w-[760px] overflow-y-auto overflow-x-hidden bg-f1-background",
       container: i,
       children: [c("div", {
         className: "flex flex-row items-center justify-between px-4 py-4",
         children: [c(Oe, {
           className: "flex flex-row items-center gap-2 text-lg font-semibold text-f1-foreground",
-          children: [t && e(Q, {
+          children: [t && e(Z, {
             module: t,
             size: "lg"
           }), s]
         }), e($e, {
           variant: "outline",
-          icon: Z,
+          icon: ee,
           onClick: r,
           label: "Close modal",
           hideLabel: !0
         })]
-      }), c(Y, {
+      }), c(X, {
         className: "[*[data-state=visible]_div]:bg-f1-background flex max-h-[512px] flex-col",
-        children: [l, e(X, {
+        children: [l, e(K, {
           orientation: "vertical",
           className: "[&_div]:bg-f1-background"
         })]
@@ -611,43 +611,43 @@ function ba({ isOpen: a, onClose: r, title: s, children: l, module: t, portalCon
     })
   });
 }
-function Va({ isOpen: a, onClose: r, title: s, image: l, benefits: t, errorMessage: i, successMessage: n, loadingState: d, nextSteps: o, closeLabel: f, primaryAction: m, modalTitle: N, modalModule: P, secondaryAction: u, portalContainer: x, tag: S }) {
-  const [R, F] = v(a), [C, y] = v(null), [L, h] = v(!1), k = async () => {
+function Va({ isOpen: a, onClose: r, title: s, image: l, benefits: t, errorMessage: i, successMessage: n, loadingState: d, nextSteps: o, closeLabel: f, primaryAction: m, modalTitle: N, modalModule: P, secondaryAction: u, portalContainer: C, tag: k, showResponseDialog: L = !0 }) {
+  const [B, y] = v(a), [S, x] = v(null), [g, F] = v(!1), R = async () => {
     if (m != null && m.onClick) {
-      h(!0);
+      F(!0);
       try {
-        await m.onClick(), F(!1), y("success");
+        await m.onClick(), y(!1), L && x("success");
       } catch {
-        y("error");
+        L && x("error");
       } finally {
-        h(!1);
+        F(!1);
       }
     }
-  }, D = () => {
-    F(!1), r == null || r();
-  }, B = L;
-  return c($, {
+  }, M = () => {
+    y(!1), r == null || r();
+  }, O = g;
+  return c(E, {
     children: [e(ba, {
-      isOpen: R,
-      onClose: D,
+      isOpen: B,
+      onClose: M,
       title: N,
       module: P,
-      portalContainer: x,
+      portalContainer: C,
       children: e("div", {
         className: "pb-4 pl-4",
-        children: e(fe, {
+        children: e(me, {
           title: s,
           image: l,
           benefits: t,
           withShadow: !1,
-          tag: S,
+          tag: k,
           actions: c("div", {
             className: "flex gap-3",
             children: [m && e(w, {
               variant: m.variant,
-              label: B ? d.label : m.label,
+              label: O ? d.label : m.label,
               icon: m.icon || void 0,
-              onClick: k,
+              onClick: R,
               loading: m.loading,
               size: m.size
             }), u && e(w, {
@@ -660,17 +660,17 @@ function Va({ isOpen: a, onClose: r, title: s, image: l, benefits: t, errorMessa
           })
         })
       })
-    }), C && e(ee, {
+    }), S && L && e(ae, {
       open: !0,
       onClose: () => {
-        D(), y(null);
+        M(), x(null);
       },
-      success: C === "success",
+      success: S === "success",
       errorMessage: i,
       successMessage: n,
       nextSteps: o,
       closeLabel: f,
-      portalContainer: x
+      portalContainer: C
     })]
   });
 }
@@ -678,11 +678,11 @@ function xa({ mediaUrl: a, title: r, description: s, onClose: l, dismissible: t,
   const [f, m] = v(!1), N = () => {
     m(!0), l && l();
   };
-  se(() => {
+  te(() => {
     n && n(!f);
   }, [n, f]);
   const P = a == null ? void 0 : a.includes(".mp4");
-  return e($, {
+  return e(E, {
     children: f ? null : c(Ee, {
       style: {
         width: i
@@ -693,7 +693,7 @@ function xa({ mediaUrl: a, title: r, description: s, onClose: l, dismissible: t,
           className: "absolute right-2 top-2 z-10",
           children: e(w, {
             variant: "ghost",
-            icon: Z,
+            icon: ee,
             size: "sm",
             hideLabel: !0,
             onClick: N,
@@ -715,10 +715,10 @@ function xa({ mediaUrl: a, title: r, description: s, onClose: l, dismissible: t,
             }))
           }), c("div", {
             className: "flex flex-col gap-[2px] p-3",
-            children: [e(A, {
+            children: [e(V, {
               className: "text-lg font-medium",
               children: r
-            }), e(A, {
+            }), e(V, {
               className: "line-clamp-3 text-base font-normal text-f1-foreground-secondary",
               children: s
             })]
@@ -726,7 +726,7 @@ function xa({ mediaUrl: a, title: r, description: s, onClose: l, dismissible: t,
         })]
       }), d && e(je, {
         className: "p-3",
-        children: d.map((u) => u.type === "upsell" ? e(ae, {
+        children: d.map((u) => u.type === "upsell" ? e(re, {
           label: u.label,
           onRequest: u.onClick,
           errorMessage: u.errorMessage,
@@ -746,7 +746,7 @@ function xa({ mediaUrl: a, title: r, description: s, onClose: l, dismissible: t,
   });
 }
 const Ca = I(function({ primaryAction: r, secondaryAction: s, ...l }, t) {
-  const i = (o) => o.variant === "promote" ? e(ae, {
+  const i = (o) => o.variant === "promote" ? e(re, {
     label: o.label,
     onRequest: async () => {
       await o.onClick();
@@ -775,29 +775,29 @@ const Ca = I(function({ primaryAction: r, secondaryAction: s, ...l }, t) {
   });
 });
 Ca.displayName = "UpsellingBanner";
-function qa({ isOpen: a, setIsOpen: r, label: s, variant: l = "promote", size: t = "md", showIcon: i = !0, side: n = "right", align: d = "center", icon: o = Ae, mediaUrl: f, title: m, description: N, width: P = "300px", trackVisibility: u, actions: x, onClick: S, hideLabel: R = !1 }) {
-  const [F, C] = v(!1), [y, L] = v(null), [h, k] = v(null), D = (p) => {
-    r(p), S && S();
-  }, B = async (p) => {
-    if (p.type === "upsell") {
-      k(p);
+function qa({ isOpen: a, setIsOpen: r, label: s, variant: l = "promote", size: t = "md", showIcon: i = !0, side: n = "right", align: d = "center", icon: o = Ae, mediaUrl: f, title: m, description: N, width: P = "300px", trackVisibility: u, actions: C, onClick: k, hideLabel: L = !1 }) {
+  const [B, y] = v(!1), [S, x] = v(null), [g, F] = v(null), R = (h) => {
+    r(h), k && k();
+  }, M = async (h) => {
+    if (h.type === "upsell") {
+      F(h);
       try {
-        await p.onClick(), p.showConfirmation && (C(!0), L("success"));
+        await h.onClick(), h.showConfirmation && (y(!0), x("success"));
       } catch {
-        C(!0), L("error");
+        y(!0), x("error");
       }
     }
-  }, me = () => {
-    L(null), C(!1), k(null), r(!1);
-  }, he = a && !F, pe = x == null ? void 0 : x.map((p) => p.type === "upsell" ? {
-    ...p,
-    onClick: () => B(p)
-  } : p);
-  return c($, {
-    children: [c(H, {
+  }, O = () => {
+    x(null), y(!1), F(null), r(!1);
+  }, he = a && !B, pe = C == null ? void 0 : C.map((h) => h.type === "upsell" ? {
+    ...h,
+    onClick: () => M(h)
+  } : h);
+  return c(E, {
+    children: [c(U, {
       open: he,
-      onOpenChange: D,
-      children: [e(U, {
+      onOpenChange: R,
+      children: [e(J, {
         asChild: !0,
         children: e(w, {
           variant: l,
@@ -805,9 +805,9 @@ function qa({ isOpen: a, setIsOpen: r, label: s, variant: l = "promote", size: t
           size: t,
           icon: i ? o : void 0,
           onClick: () => r(a),
-          hideLabel: R
+          hideLabel: L
         })
-      }), e(J, {
+      }), e(Y, {
         side: n,
         align: d,
         className: "w-fit border-none bg-transparent p-2 shadow-none",
@@ -823,20 +823,20 @@ function qa({ isOpen: a, setIsOpen: r, label: s, variant: l = "promote", size: t
           showConfirmation: !1
         })
       })]
-    }), (h == null ? void 0 : h.type) === "upsell" && h.showConfirmation && y && e(ee, {
+    }), (g == null ? void 0 : g.type) === "upsell" && g.showConfirmation && S && e(ae, {
       open: !0,
-      onClose: me,
-      success: y === "success",
-      errorMessage: h.errorMessage,
-      successMessage: h.successMessage,
-      nextSteps: h.nextSteps,
-      closeLabel: h.closeLabel,
+      onClose: O,
+      success: S === "success",
+      errorMessage: g.errorMessage,
+      successMessage: g.successMessage,
+      nextSteps: g.nextSteps,
+      closeLabel: g.closeLabel,
       portalContainer: null
     })]
   });
 }
 const ya = aa(null), wa = ({ children: a, fullScreen: r = !0 }) => {
-  const s = re(null), [l, t] = v(s.current);
+  const s = se(null), [l, t] = v(s.current);
   return Ke(() => {
     t(s.current);
   }, []), e(ya.Provider, {
@@ -884,12 +884,12 @@ const ya = aa(null), wa = ({ children: a, fullScreen: r = !0 }) => {
       })
     })
   })
-}), W = (a) => `datacollection-${a}`, Ga = {
+}), G = (a) => `datacollection-${a}`, Ga = {
   get: async (a) => JSON.parse(
-    localStorage.getItem(W(a)) ?? "{}"
+    localStorage.getItem(G(a)) ?? "{}"
   ),
   set: async (a, r) => {
-    localStorage.setItem(W(a), JSON.stringify(r));
+    localStorage.setItem(G(a), JSON.stringify(r));
   }
 };
 export {
@@ -897,7 +897,7 @@ export {
   Ja as Await,
   Ia as BarChart,
   w as Button,
-  Ra as CategoryBarChart,
+  Ba as CategoryBarChart,
   Ya as CopyButton,
   Xa as DndProvider,
   Ka as EmojiImage,
@@ -909,7 +909,7 @@ export {
   sr as F0AvatarFile,
   tr as F0AvatarIcon,
   lr as F0AvatarList,
-  Q as F0AvatarModule,
+  Z as F0AvatarModule,
   or as F0AvatarPerson,
   nr as F0AvatarTeam,
   ir as F0Card,
@@ -924,17 +924,17 @@ export {
   hr as F0TagDot,
   pr as F0TagList,
   gr as F0TagPerson,
-  Me as F0TagRaw,
+  De as F0TagRaw,
   vr as F0TagStatus,
   br as F0TagTeam,
   xr as GROUP_ID_SYMBOL,
   Aa as HomeLayout,
-  Ba as LineChart,
+  Ra as LineChart,
   ka as Link,
   Cr as OneFilterPicker,
   Oa as PieChart,
   Ue as PrivacyModeProvider,
-  fe as ProductBlankslate,
+  me as ProductBlankslate,
   yr as ProductCard,
   Va as ProductModal,
   xa as ProductWidget,
@@ -942,12 +942,12 @@ export {
   ja as StandardLayout,
   wr as TagCounter,
   za as TwoColumnLayout,
-  ee as UpsellRequestResponseDialog,
+  ae as UpsellRequestResponseDialog,
   Ca as UpsellingBanner,
-  ae as UpsellingButton,
+  re as UpsellingButton,
   qa as UpsellingPopover,
   $a as VerticalBarChart,
-  Da as avatarVariants,
+  Ma as avatarVariants,
   Nr as buildTranslations,
   Pr as createAtlaskitDriver,
   Lr as createDataSourceDefinition,
@@ -957,12 +957,12 @@ export {
   Sr as getAnimationVariants,
   Fr as getDataSourcePaginationType,
   kr as getEmojiLabel,
-  Dr as isInfiniteScrollPagination,
-  Mr as isPageBasedPagination,
+  Mr as isInfiniteScrollPagination,
+  Dr as isPageBasedPagination,
   Tr as modules,
   Ir as tagDotColors,
-  Rr as useData,
-  Br as useDataSource,
+  Br as useData,
+  Rr as useDataSource,
   Or as useDndEvents,
   $r as useDraggable,
   Er as useDroppableList,

package/package.json

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