@magemetrics/ai 0.0.29 → 0.0.30

package/dist/react/ai.js

@@ -9,20 +9,20 @@ import { atomWithLocation as an } from "jotai-location";
 import { atomWithImmer as rn } from "jotai-immer";
 import { desc as tn, from as nn } from "arquero";
 import ye from "dayjs";
-import { Paper as Q, Textarea as Dr, ActionIcon as ce, Text as _, Tooltip as de, Stack as C, Title as J, Group as S, RingProgress as Sr, Center as ca, Loader as U, Box as _e, Modal as se, TypographyStylesProvider as Mr, ScrollArea as $e, Image as Ee, Skeleton as we, Select as on, Accordion as G, Tabs as Le, Button as De, Table as I, Popover as pe, Card as ln, Progress as Qa, Divider as cn, Anchor as sn, Badge as Fr, Flex as Pa, Alert as dn, em as Ia, colorsTuple as mn, createTheme as hn, alpha as bn, MantineProvider as pn, MantineThemeProvider as un } from "@mantine/core";
+import { Paper as Q, Textarea as Dr, ActionIcon as ce, Text as _, Tooltip as de, Stack as C, Title as J, Group as S, RingProgress as Sr, Center as ca, Loader as U, Box as _e, Modal as se, TypographyStylesProvider as Mr, ScrollArea as $e, Image as Ee, Skeleton as we, Select as on, Accordion as G, Tabs as Le, Button as De, Table as I, Popover as pe, Card as ln, Progress as Qa, Divider as cn, Anchor as sn, Badge as Fr, Flex as sa, Alert as dn, em as da, colorsTuple as mn, createTheme as hn, alpha as bn, MantineProvider as pn, MantineThemeProvider as un } from "@mantine/core";
 import { colorsTuple as vd } from "@mantine/core";
 import { useChat as vn } from "@ai-sdk/react";
 import { keyframes as gn, createStyles as Ze, emotionTransform as fn, MantineEmotionProvider as wn } from "@mantine/emotion";
 import Lr from "react-markdown";
-import { useMergedRef as yn, useDisclosure as Er, useHover as _n, useElementSize as Ra, useMediaQuery as Ha } from "@mantine/hooks";
+import { useMergedRef as yn, useDisclosure as Er, useHover as _n, useElementSize as Ha, useMediaQuery as ma } from "@mantine/hooks";
 import { Bar as xn, Doughnut as kn, Line as zn } from "react-chartjs-2";
 import Cn from "@kurkle/color";
 import { notifications as Ja, Notifications as Dn } from "@mantine/notifications";
 import { Chart as Sn, ArcElement as Xa, CategoryScale as Mn, LinearScale as Fn, BarElement as Ln, Title as En, Tooltip as jn, Legend as An, LogarithmicScale as Tn, LineElement as Pn, PointElement as In } from "chart.js";
-import { motion as Se, AnimatePresence as sa } from "framer-motion";
+import { motion as Se, AnimatePresence as ha } from "framer-motion";
 import Va from "lottie-react";
 import { WidthProvider as Rn, Responsive as Hn } from "react-grid-layout";
-import { flexRender as da, createColumnHelper as jr, useReactTable as Ar, getCoreRowModel as Tr } from "@tanstack/react-table";
+import { flexRender as ba, createColumnHelper as jr, useReactTable as Ar, getCoreRowModel as Tr } from "@tanstack/react-table";
 import { notUndefined as er, useVirtualizer as Vn } from "@tanstack/react-virtual";
 import { Handle as ea, Position as aa, useNodesState as Pr, useEdgesState as Ir, useReactFlow as Rr, ReactFlow as Hr, MarkerType as Vr, ReactFlowProvider as Yr } from "@xyflow/react";
 import ra from "@dagrejs/dagre";
@@ -336,7 +336,7 @@ function so(e, a, r) {
     typeof r == "function" ? r(e(this)) : r
   );
 }
-const Ya = {}, Fa = Symbol(
+const Ya = {}, ja = Symbol(
   (Ya ? "production" : void 0) !== "production" ? "RESET" : ""
 ), mo = (e) => typeof (e == null ? void 0 : e.then) == "function";
 function ho(e = () => {
@@ -415,7 +415,7 @@ function po(e, a, r = bo, n) {
     (l) => l(i),
     (l, d, s) => {
       const h = typeof s == "function" ? s(l(i)) : s;
-      return h === Fa ? (d(i, a), r.removeItem(e)) : h instanceof Promise ? h.then((m) => (d(i, m), r.setItem(e, m))) : (d(i, h), r.setItem(e, h));
+      return h === ja ? (d(i, a), r.removeItem(e)) : h instanceof Promise ? h.then((m) => (d(i, m), r.setItem(e, m))) : (d(i, h), r.setItem(e, h));
     }
   );
 }
@@ -456,12 +456,12 @@ const je = {
   "mm-accordion": void 0,
   "mm-report-mode": void 0,
   "mm-chat": void 0
-}, tr = Object.keys(ie), La = te("none"), _o = (e) => (window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e)), za = an({
+}, tr = Object.keys(ie), Aa = te("none"), _o = (e) => (window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e)), Sa = an({
   subscribe: _o,
   replace: !1
-}), Ca = te(
+}), Ma = te(
   (e) => {
-    const a = e(za).searchParams, r = {};
+    const a = e(Sa).searchParams, r = {};
     if (a)
       for (const i of tr)
         r[i] = a.get(i);
@@ -469,7 +469,7 @@ const je = {
     return n.success ? { ...ie, ...n.data } : (console.error("Failed to parse URL state:", n.error.flatten()), ie);
   },
   (e, a, r) => {
-    const n = e(za).searchParams ?? new URLSearchParams(), i = new URLSearchParams();
+    const n = e(Sa).searchParams ?? new URLSearchParams(), i = new URLSearchParams();
     let c = !1;
     for (const l of tr) {
       const d = r[l], s = ie[l];
@@ -478,7 +478,7 @@ const je = {
         m !== void 0 && i.set(l, m);
       }
     }
-    n.toString() !== i.toString() && (c = !0), c && a(za, (l) => ({
+    n.toString() !== i.toString() && (c = !0), c && a(Sa, (l) => ({
       ...l,
       searchParams: i
       // Update with the clean, new params
@@ -488,24 +488,24 @@ const je = {
   const r = po(e, a), n = te(a), i = te(
     // Read the specific property from the central URL state object
     (l) => {
-      const s = l(Ca)[e];
+      const s = l(Ma)[e];
       return s !== void 0 ? s : a;
     },
     // Write the update to the central URL state object
     (l, d, s) => {
-      const h = s === Fa ? a : s, m = l(Ca);
+      const h = s === ja ? a : s, m = l(Ma);
       if (m[e] !== h) {
         const b = {
           ...m,
           [e]: h
         };
-        d(Ca, b);
+        d(Ma, b);
       }
     }
   );
   return te(
     (l) => {
-      switch (l(La)) {
+      switch (l(Aa)) {
         case "localStorage":
           return l(r);
         case "queryParam":
@@ -516,7 +516,7 @@ const je = {
       }
     },
     (l, d, s) => {
-      switch (l(La)) {
+      switch (l(Aa)) {
         case "localStorage":
           d(r, s);
           break;
@@ -525,18 +525,18 @@ const je = {
           break;
         case "none":
         default:
-          s != Fa && d(n, s);
+          s != ja && d(n, s);
           break;
       }
     }
   );
-}, Ea = Re(
+}, Ta = Re(
   "mm-flow-id",
   ie["mm-flow-id"]
 ), ta = Re(
   "mm-modal",
   ie["mm-modal"]
-), ja = Re(
+), Pa = Re(
   "mm-chat",
   ie["mm-chat"]
 ), Pe = Re(
@@ -551,21 +551,21 @@ const je = {
 ), xo = (e) => {
   e(Ne, { ...Zr });
 }, ae = te(
-  (e) => e(Ea),
+  (e) => e(Ta),
   // Setter - with side effects
   (e, a, r) => {
-    xo(a), a(Ea, r), r ? a(ta, "flow") : (a(ta, void 0), a(Pe, void 0));
+    xo(a), a(Ta, r), r ? a(ta, "flow") : (a(ta, void 0), a(Pe, void 0));
   }
 ), ze = te(
   (e) => e(ta),
   // Setter - with side effects
   (e, a, r) => {
-    a(ta, r), r ? r !== "exploreData" ? a(Pe, void 0) : (a(ja, "chat"), a(qe, void 0)) : (a(Ea, void 0), a(Pe, void 0));
+    a(ta, r), r ? r !== "exploreData" ? a(Pe, void 0) : (a(Pa, "chat"), a(qe, void 0)) : (a(Ta, void 0), a(Pe, void 0));
   }
 ), Ge = te(
-  (e) => e(ja),
+  (e) => e(Pa),
   (e, a, r) => {
-    a(ja, r), r === "chat" && a(qe, void 0);
+    a(Pa, r), r === "chat" && a(qe, void 0);
   }
 ), me = () => {
   const e = K(), a = ue(ae), r = ue(Pe), { data: n } = Y({
@@ -1309,7 +1309,7 @@ const $o = (e, a) => {
       }
     }
   })
-), ma = Ze(() => ({
+), pa = Ze(() => ({
   centered: {
     position: "absolute",
     width: "100vw",
@@ -1429,7 +1429,7 @@ function pi(e) {
 function ht(e) {
   return Z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M2 12h2a7.986 7.986 0 0 1 2.337-5.663 7.91 7.91 0 0 1 2.542-1.71 8.12 8.12 0 0 1 6.13-.041A2.488 2.488 0 0 0 17.5 7C18.886 7 20 5.886 20 4.5S18.886 2 17.5 2c-.689 0-1.312.276-1.763.725-2.431-.973-5.223-.958-7.635.059a9.928 9.928 0 0 0-3.18 2.139 9.92 9.92 0 0 0-2.14 3.179A10.005 10.005 0 0 0 2 12zm17.373 3.122c-.401.952-.977 1.808-1.71 2.541s-1.589 1.309-2.542 1.71a8.12 8.12 0 0 1-6.13.041A2.488 2.488 0 0 0 6.5 17C5.114 17 4 18.114 4 19.5S5.114 22 6.5 22c.689 0 1.312-.276 1.763-.725A9.965 9.965 0 0 0 12 22a9.983 9.983 0 0 0 9.217-6.102A9.992 9.992 0 0 0 22 12h-2a7.993 7.993 0 0 1-.627 3.122z" }, child: [] }, { tag: "path", attr: { d: "M12 7.462c-2.502 0-4.538 2.036-4.538 4.538S9.498 16.538 12 16.538s4.538-2.036 4.538-4.538S14.502 7.462 12 7.462zm0 7.076c-1.399 0-2.538-1.139-2.538-2.538S10.601 9.462 12 9.462s2.538 1.139 2.538 2.538-1.139 2.538-2.538 2.538z" }, child: [] }] })(e);
 }
-function ha(e) {
+function ua(e) {
   return Z({ attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M20 7h-4V4c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H4c-1.103 0-2 .897-2 2v9a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V9c0-1.103-.897-2-2-2zM4 11h4v8H4v-8zm6-1V4h4v15h-4v-9zm10 9h-4V9h4v10z" }, child: [] }] })(e);
 }
 function bt(e) {
@@ -1745,13 +1745,13 @@ const Ae = ({ children: e, tagText: a, isActive: r, ...n }) => {
     example: "status:active,name:John%20Doe"
   },
   type: "string"
-}), ba = o.object({ flowId: o.string().uuid() }).openapi("FlowId", { type: "string" }), Li = xe({
+}), va = o.object({ flowId: o.string().uuid() }).openapi("FlowId", { type: "string" }), Li = xe({
   method: "get",
   path: "/api/v1/flows/{flowId}/columns",
   operationId: "retrieveFlowColumns",
   request: {
     headers: Ve,
-    params: ba,
+    params: va,
     query: o.object({
       flow_data_id: o.string().pipe(o.coerce.number()).optional().openapi({
         param: {
@@ -1795,7 +1795,7 @@ const Ae = ({ children: e, tagText: a, isActive: r, ...n }) => {
   operationId: "retrieveFlowData",
   request: {
     headers: Ve,
-    params: ba,
+    params: va,
     query: o.object({
       limit: Di,
       order: Si,
@@ -1843,7 +1843,7 @@ const Ae = ({ children: e, tagText: a, isActive: r, ...n }) => {
   operationId: "retrieveFlowDataCount",
   request: {
     headers: Ve,
-    params: ba,
+    params: va,
     query: o.object({
       flow_data_id: o.string().pipe(o.coerce.number()).optional().openapi({
         param: {
@@ -1889,7 +1889,7 @@ const Ae = ({ children: e, tagText: a, isActive: r, ...n }) => {
   operationId: "retrieveFlow",
   request: {
     headers: Ve,
-    params: ba
+    params: va
   },
   responses: {
     200: {
@@ -2290,10 +2290,10 @@ function Ni() {
             D && (N = F[2]), s = this.$locale(), !V && N && (s = x.Ls[N]), this.$d = function(ge, ke, be, We) {
               try {
                 if (["x", "X"].indexOf(ke) > -1) return new Date((ke === "X" ? 1e3 : 1) * ge);
-                var X = u(ke)(ge), va = X.year, Ue = X.month, Vt = X.day, Yt = X.hours, Ot = X.minutes, Bt = X.seconds, $t = X.milliseconds, Ua = X.zone, Ka = X.week, ga = /* @__PURE__ */ new Date(), fa = Vt || (va || Ue ? 1 : ga.getDate()), wa = va || ga.getFullYear(), Ke = 0;
-                va && !Ue || (Ke = Ue > 0 ? Ue - 1 : ga.getMonth());
-                var Qe, ya = Yt || 0, _a = Ot || 0, xa = Bt || 0, ka = $t || 0;
-                return Ua ? new Date(Date.UTC(wa, Ke, fa, ya, _a, xa, ka + 60 * Ua.offset * 1e3)) : be ? new Date(Date.UTC(wa, Ke, fa, ya, _a, xa, ka)) : (Qe = new Date(wa, Ke, fa, ya, _a, xa, ka), Ka && (Qe = We(Qe).week(Ka).toDate()), Qe);
+                var X = u(ke)(ge), wa = X.year, Ue = X.month, Vt = X.day, Yt = X.hours, Ot = X.minutes, Bt = X.seconds, $t = X.milliseconds, Ua = X.zone, Ka = X.week, ya = /* @__PURE__ */ new Date(), _a = Vt || (wa || Ue ? 1 : ya.getDate()), xa = wa || ya.getFullYear(), Ke = 0;
+                wa && !Ue || (Ke = Ue > 0 ? Ue - 1 : ya.getMonth());
+                var Qe, ka = Yt || 0, za = Ot || 0, Ca = Bt || 0, Da = $t || 0;
+                return Ua ? new Date(Date.UTC(xa, Ke, _a, ka, za, Ca, Da + 60 * Ua.offset * 1e3)) : be ? new Date(Date.UTC(xa, Ke, _a, ka, za, Ca, Da)) : (Qe = new Date(xa, Ke, _a, ka, za, Ca, Da), Ka && (Qe = We(Qe).week(Ka).toDate()), Qe);
               } catch {
                 return /* @__PURE__ */ new Date("");
               }
@@ -2351,7 +2351,7 @@ const Ce = (e, a = {}) => {
     maximumFractionDigits: d,
     useGrouping: c
   }).format(e);
-}, pr = (e) => typeof e == "object" && !!e && "display" in e && "sortValue" in e, Aa = 1900, Ta = 2200, Wi = [
+}, pr = (e) => typeof e == "object" && !!e && "display" in e && "sortValue" in e, Ia = 1900, Ra = 2200, Wi = [
   // ISO 8601 formats
   "YYYY-MM-DDTHH:mm:ss.SSSZ",
   "YYYY-MM-DDTHH:mm:ssZ",
@@ -2388,14 +2388,14 @@ const Ce = (e, a = {}) => {
     const r = ye(e);
     if (r.isValid()) {
       const n = r.year();
-      return n >= Aa && n <= Ta;
+      return n >= Ia && n <= Ra;
     }
   }
   return Wi.some((r) => {
     const n = ye(e, r, !0);
     if (n.isValid()) {
       const i = n.year();
-      return !(i < Aa || i > Ta);
+      return !(i < Ia || i > Ra);
     }
     return !1;
   });
@@ -2440,7 +2440,7 @@ const Ce = (e, a = {}) => {
     display: String(r),
     sortValue: r ? 1 : 0
   } : typeof r == "number" ? {
-    display: r >= Aa && r <= Ta && Number.isInteger(r) ? String(r) : Ce(r),
+    display: r >= Ia && r <= Ra && Number.isInteger(r) ? String(r) : Ce(r),
     sortValue: r
   } : {
     // eslint-disable-next-line @typescript-eslint/no-base-to-string
@@ -2738,7 +2738,7 @@ Sn.register(
   In,
   Xa
 );
-const Da = ({ children: e }) => {
+const Fa = ({ children: e }) => {
   const a = O(null), r = fe(async () => {
     if (a.current)
       try {
@@ -2805,7 +2805,7 @@ const Da = ({ children: e }) => {
   switch (e.configuration.type) {
     case "doughnut": {
       const i = el.array().safeParse(n);
-      return i.data ? /* @__PURE__ */ t(Da, { children: /* @__PURE__ */ t(
+      return i.data ? /* @__PURE__ */ t(Fa, { children: /* @__PURE__ */ t(
         rl,
         {
           title: e.configuration.title,
@@ -2816,7 +2816,7 @@ const Da = ({ children: e }) => {
     }
     case "bar": {
       const i = Qi.array().safeParse(n);
-      return i.data ? /* @__PURE__ */ t(Da, { children: /* @__PURE__ */ t(
+      return i.data ? /* @__PURE__ */ t(Fa, { children: /* @__PURE__ */ t(
         Xi,
         {
           title: e.configuration.title,
@@ -2828,7 +2828,7 @@ const Da = ({ children: e }) => {
     }
     case "line": {
       const i = tl.array().safeParse(n);
-      return i.data ? /* @__PURE__ */ t(Da, { children: /* @__PURE__ */ t(
+      return i.data ? /* @__PURE__ */ t(Fa, { children: /* @__PURE__ */ t(
         ol,
         {
           title: e.configuration.title,
@@ -2867,7 +2867,7 @@ const Da = ({ children: e }) => {
   const { data: a } = await y.from("flow_data_visualizations").select("*, flow_data!inner(id, flow_id)").eq("id", e).single().throwOnError();
   return a;
 }, cl = ({ visualizationId: e }) => {
-  const a = K(), [r, { open: n, close: i }] = Er(!1), { classes: c } = ma(), { data: l, isLoading: d } = Y({
+  const a = K(), [r, { open: n, close: i }] = Er(!1), { classes: c } = pa(), { data: l, isLoading: d } = Y({
     queryKey: ["visualization", e],
     queryFn: () => ll(e),
     enabled: a
@@ -2880,7 +2880,7 @@ const Da = ({ children: e }) => {
         onClick: n,
         isActive: r,
         children: /* @__PURE__ */ v(S, { gap: "xs", wrap: "nowrap", style: { overflow: "hidden" }, children: [
-          /* @__PURE__ */ t(C, { children: (l == null ? void 0 : l.configuration.type) === "doughnut" ? /* @__PURE__ */ t(fi, {}) : (l == null ? void 0 : l.configuration.type) === "bar" ? /* @__PURE__ */ t(ha, {}) : /* @__PURE__ */ t(gi, {}) }),
+          /* @__PURE__ */ t(C, { children: (l == null ? void 0 : l.configuration.type) === "doughnut" ? /* @__PURE__ */ t(fi, {}) : (l == null ? void 0 : l.configuration.type) === "bar" ? /* @__PURE__ */ t(ua, {}) : /* @__PURE__ */ t(gi, {}) }),
           /* @__PURE__ */ t(
             le,
             {
@@ -2930,7 +2930,7 @@ const Da = ({ children: e }) => {
     ) }),
     /* @__PURE__ */ t(le, { fw: 500, ff: "heading", truncate: "end", children: "Visualizations in creation" })
   ] }) }) : a.status === "error" ? /* @__PURE__ */ t(Ae, { tagText: "Your visualizations", children: /* @__PURE__ */ v(S, { gap: "xs", wrap: "nowrap", style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(ha, { color: "var(--mantine-color-red-8)" }) }),
+    /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(ua, { color: "var(--mantine-color-red-8)" }) }),
     /* @__PURE__ */ t(
       le,
       {
@@ -2989,7 +2989,7 @@ const Da = ({ children: e }) => {
       userSelect: "none"
     }),
     children: /* @__PURE__ */ v(S, { flex: 1, gap: "xs", wrap: "nowrap", style: { overflow: "hidden" }, children: [
-      /* @__PURE__ */ t(sa, { mode: "wait", children: e || !a ? /* @__PURE__ */ t(wr, { children: /* @__PURE__ */ t(U, { size: "xs" }) }, "loading") : /* @__PURE__ */ t(wr, { children: /* @__PURE__ */ t(
+      /* @__PURE__ */ t(ha, { mode: "wait", children: e || !a ? /* @__PURE__ */ t(wr, { children: /* @__PURE__ */ t(U, { size: "xs" }) }, "loading") : /* @__PURE__ */ t(wr, { children: /* @__PURE__ */ t(
         Va,
         {
           animationData: a.status === "success" ? Na : jl,
@@ -3263,7 +3263,7 @@ const Da = ({ children: e }) => {
   (e, a, r) => {
     r ? a(ze, "flow") : a(ae, void 0);
   }
-), pa = te(
+), ga = te(
   (e) => {
     const a = e(ae), r = e(ze);
     return !!a && r === "exploreData";
@@ -3272,7 +3272,7 @@ const Da = ({ children: e }) => {
     const n = e(ae);
     r && !n || (r ? a(ze, "exploreData") : e(ze) === "exploreData" && a(ze, "flow"));
   }
-), Ct = te(null), Sa = ({ item: e, itemType: a, disabled: r, children: n, ...i }) => {
+), Ct = te(null), La = ({ item: e, itemType: a, disabled: r, children: n, ...i }) => {
   const c = O(null), [l, d] = ve(Ct), s = () => {
     const m = {
       insightId: e.id,
@@ -3423,7 +3423,7 @@ const Da = ({ children: e }) => {
                 /* @__PURE__ */ t(G.Control, { icon: /* @__PURE__ */ t(vi, {}), children: "Data Reports" }),
                 /* @__PURE__ */ t(G.Panel, { children: /* @__PURE__ */ v(C, { gap: "xs", children: [
                   d.map((b) => /* @__PURE__ */ t(
-                    Sa,
+                    La,
                     {
                       item: b,
                       itemType: je.dataReport,
@@ -3450,7 +3450,7 @@ const Da = ({ children: e }) => {
                 /* @__PURE__ */ t(G.Control, { icon: /* @__PURE__ */ t(ht, {}), children: "Key Findings" }),
                 /* @__PURE__ */ t(G.Panel, { children: /* @__PURE__ */ v(C, { gap: "xs", children: [
                   s.map((b) => /* @__PURE__ */ t(
-                    Sa,
+                    La,
                     {
                       item: b,
                       itemType: je.keyFinding,
@@ -3474,10 +3474,10 @@ const Da = ({ children: e }) => {
                 ] }) })
               ] }),
               /* @__PURE__ */ v(G.Item, { value: "visualizations", children: [
-                /* @__PURE__ */ t(G.Control, { icon: /* @__PURE__ */ t(ha, {}), children: "Visualizations" }),
+                /* @__PURE__ */ t(G.Control, { icon: /* @__PURE__ */ t(ua, {}), children: "Visualizations" }),
                 /* @__PURE__ */ t(G.Panel, { children: /* @__PURE__ */ v(C, { gap: "xs", children: [
                   h.map((b) => /* @__PURE__ */ t(
-                    Sa,
+                    La,
                     {
                       item: b,
                       itemType: je.visualization,
@@ -3634,7 +3634,7 @@ const Da = ({ children: e }) => {
     }
   ) });
 }, St = () => {
-  const e = B(Ge), a = B(pa);
+  const e = B(Ge), a = B(ga);
   return /* @__PURE__ */ t(
     De,
     {
@@ -3685,7 +3685,7 @@ const Da = ({ children: e }) => {
                 maxWidth: m.column.columnDef.maxSize,
                 minWidth: m.column.columnDef.minSize
               },
-              children: /* @__PURE__ */ t(le, { ff: "monospace", size: "sm", truncate: "end", children: da(m.column.columnDef.cell, m.getContext()) })
+              children: /* @__PURE__ */ t(le, { ff: "monospace", size: "sm", truncate: "end", children: ba(m.column.columnDef.cell, m.getContext()) })
             },
             m.id
           ))
@@ -3933,7 +3933,7 @@ const Da = ({ children: e }) => {
   ...r
 }) => /* @__PURE__ */ t(I.Thead, { ...r, children: e.getHeaderGroups().map((n) => /* @__PURE__ */ t(I.Tr, { children: n.headers.map((i) => {
   var l;
-  const c = i.isPlaceholder ? null : da(i.column.columnDef.header, i.getContext());
+  const c = i.isPlaceholder ? null : ba(i.column.columnDef.header, i.getContext());
   return /* @__PURE__ */ t(
     ac,
     {
@@ -3946,7 +3946,10 @@ const Da = ({ children: e }) => {
     },
     i.id
   );
-}) }, n.id)) }), tc = ({ formattedValue: { display: e } }) => e === "empty" ? /* @__PURE__ */ t(_, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : e, nc = (e, a, r) => {
+}) }, n.id)) }), tc = ({ formattedValue: e }) => {
+  const a = e == null ? void 0 : e.display;
+  return !a || a === "empty" ? /* @__PURE__ */ t(_, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : a;
+}, nc = (e, a, r) => {
   const n = e.getValue(r), i = a.getValue(r), c = pr(n) ? n.sortValue : null, l = pr(i) ? i.sortValue : null;
   return c === null && l === null ? 0 : c === null ? -1 : l === null ? 1 : c instanceof Date && l instanceof Date ? c.getTime() - l.getTime() : typeof c == "number" && typeof l == "number" ? c - l : String(c).localeCompare(String(l));
 }, oc = jr(), ic = (e) => e.split("_").map((n) => n.length === 0 ? "" : n.charAt(0).toUpperCase() + n.slice(1)).join(" "), lc = ({ dataColumns: e, virtualizer: a, data: r, tableRef: n, explainability: i }) => {
@@ -4024,7 +4027,7 @@ const Da = ({ children: e }) => {
   } = Hi(e, { pageSize: 100 }, a), p = q(
     () => (m == null ? void 0 : m.pages.flatMap((H) => H)) || [],
     [m]
-  ), { data: w } = gt(e, a), x = (w == null ? void 0 : w.count) || 0, { data: z } = Gr(a), { ref: E, width: A } = Ra(), { classes: T, cx: P } = $a(), { scrollContainerRef: F, leftFade: j, rightFade: V, handleScroll: D } = cc(A), M = Vn({
+  ), { data: w } = gt(e, a), x = (w == null ? void 0 : w.count) || 0, { data: z } = Gr(a), { ref: E, width: A } = Ha(), { classes: T, cx: P } = $a(), { scrollContainerRef: F, leftFade: j, rightFade: V, handleScroll: D } = cc(A), M = Vn({
     count: u ? p.length + 1 : p.length,
     getScrollElement: () => F.current,
     estimateSize: () => 50,
@@ -4688,7 +4691,7 @@ const mc = ({
           style: { borderColor: "var(--mantine-color-mageGunmetal-0)" },
           size: "compact-sm",
           variant: "outline",
-          leftSection: e ? /* @__PURE__ */ t(U, { size: 12, color: "var(--mantine-color-dimmed)" }) : /* @__PURE__ */ t(ha, { size: 14 }),
+          leftSection: e ? /* @__PURE__ */ t(U, { size: 12, color: "var(--mantine-color-dimmed)" }) : /* @__PURE__ */ t(ua, { size: 14 }),
           onClick: i,
           disabled: e || !c,
           color: a ? "red" : void 0,
@@ -4777,7 +4780,7 @@ const mc = ({
     e && a && /* @__PURE__ */ t(Ft, { flowId: e, flowDataId: a })
   ] });
 }, Lc = Se.create(se.Root), Ec = () => {
-  const e = B(pa), [a, r] = ve(Ge), { classes: n } = ma();
+  const e = B(ga), [a, r] = ve(Ge), { classes: n } = pa();
   return /* @__PURE__ */ v(
     Lc,
     {
@@ -4873,7 +4876,7 @@ const mc = ({
       throw new Error(n.error);
     return r;
   }
-}), Ac = Object.values(Ie), ua = (e) => Y({
+}), Ac = Object.values(Ie), fa = (e) => Y({
   ...jc(e),
   enabled: !!e,
   refetchIntervalInBackground: !1,
@@ -4955,7 +4958,7 @@ const mc = ({
     ...a,
     children: e
   }
-), Pc = ({ table: e, ...a }) => /* @__PURE__ */ t(I.Tbody, { ...a, children: e.getRowModel().rows.map((r) => /* @__PURE__ */ t(I.Tr, { children: r.getVisibleCells().map((n) => /* @__PURE__ */ t(I.Td, { maw: 0, children: /* @__PURE__ */ t(_, { span: !0, ff: "monospace", size: "sm", truncate: "end", children: da(n.column.columnDef.cell, n.getContext()) }) }, n.id)) }, r.id)) }), Fe = ({
+), Pc = ({ table: e, ...a }) => /* @__PURE__ */ t(I.Tbody, { ...a, children: e.getRowModel().rows.map((r) => /* @__PURE__ */ t(I.Tr, { children: r.getVisibleCells().map((n) => /* @__PURE__ */ t(I.Td, { maw: 0, children: /* @__PURE__ */ t(_, { span: !0, ff: "monospace", size: "sm", truncate: "end", children: ba(n.column.columnDef.cell, n.getContext()) }) }, n.id)) }, r.id)) }), Fe = ({
   title: e,
   data: { explanation: a }
 }) => /* @__PURE__ */ v(
@@ -5181,7 +5184,7 @@ const mc = ({
     }
   )
 ] }) }), Yc = (e) => {
-  const { data: a } = ua(e);
+  const { data: a } = fa(e);
   if (!a) return;
   const r = a.flow_steps.find(
     ({ name: n }) => n == Ie.columnsLineage
@@ -5191,7 +5194,7 @@ const mc = ({
 }, Oc = ({ flowId: e, table: a, ...r }) => {
   const n = Yc(e);
   return /* @__PURE__ */ t(I.Thead, { ...r, children: a.getHeaderGroups().map((i) => /* @__PURE__ */ t(I.Tr, { children: i.headers.map((c) => {
-    const l = c.isPlaceholder ? null : da(c.column.columnDef.header, c.getContext());
+    const l = c.isPlaceholder ? null : ba(c.column.columnDef.header, c.getContext());
     return /* @__PURE__ */ t(
       Vc,
       {
@@ -5201,13 +5204,16 @@ const mc = ({
       c.id
     );
   }) }, i.id)) });
-}, Bc = 35, $c = ({ formattedValue: { display: e } }) => e === "empty" ? /* @__PURE__ */ t(_, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : e && e.length > Bc ? /* @__PURE__ */ t(de, { multiline: !0, maw: "25rem", label: e, children: /* @__PURE__ */ t(_, { truncate: "end", children: e }) }) : /* @__PURE__ */ t(_, { truncate: "end", children: e }), Zc = jr(), Nc = (e) => e.split("_").map((n) => n.length === 0 ? "" : n.charAt(0).toUpperCase() + n.slice(1)).join(" "), qc = ({
+}, Bc = 35, $c = ({ formattedValue: e }) => {
+  const a = e == null ? void 0 : e.display;
+  return !a || a === "empty" ? /* @__PURE__ */ t(_, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : a && a.length > Bc ? /* @__PURE__ */ t(de, { multiline: !0, maw: "25rem", label: a, children: /* @__PURE__ */ t(_, { truncate: "end", children: a }) }) : /* @__PURE__ */ t(_, { truncate: "end", children: a });
+}, Zc = jr(), Nc = (e) => e.split("_").map((n) => n.length === 0 ? "" : n.charAt(0).toUpperCase() + n.slice(1)).join(" "), qc = ({
   flowId: e,
   dataColumns: a,
   data: r,
   emptyTable: n
 }) => {
-  const i = O(null), { ref: c, width: l } = Ra(), [d, s] = R(!1), [h, m] = R(!1), { classes: b, cx: g } = $a(), f = (w) => {
+  const i = O(null), { ref: c, width: l } = Ha(), [d, s] = R(!1), [h, m] = R(!1), { classes: b, cx: g } = $a(), f = (w) => {
     if (i.current) {
       const x = i.current, z = x.scrollWidth - x.clientWidth;
       z !== 0 ? (s(w > 0), m(Math.ceil(w) < Math.floor(z))) : (s(!1), m(!1));
@@ -5260,7 +5266,7 @@ const mc = ({
     r && !r.length && n
   ] });
 }, Gc = (e) => {
-  const { data: a } = ua(e);
+  const { data: a } = fa(e);
   if (!a) return;
   const r = a.flow_steps.find(
     ({ name: n }) => n == Ie.confidenceScore
@@ -5322,7 +5328,7 @@ const mc = ({
   /* @__PURE__ */ t(Ee, { m: "auto", w: 100, alt: "Empty messages", src: Mt }),
   /* @__PURE__ */ t(_, { size: "sm", c: "dimmed", children: "This resulting data is empty" })
 ] }), Qc = ({ step: e }) => {
-  const { classes: a, cx: r } = Uc(), n = B(pa), { data: i, isPending: c } = Tc(e.flow_id), { data: l } = ct(), { data: d, isPending: s } = vt(
+  const { classes: a, cx: r } = Uc(), n = B(ga), { data: i, isPending: c } = Tc(e.flow_id), { data: l } = ct(), { data: d, isPending: s } = vt(
     e.flow_id,
     i
   ), { data: h, isPending: m } = wt(
@@ -5388,7 +5394,7 @@ const mc = ({
   ] });
 }, Wa = (e) => {
   var h, m;
-  const a = ua(e), r = (h = a.data) == null ? void 0 : h.flow_steps.find(
+  const a = fa(e), r = (h = a.data) == null ? void 0 : h.flow_steps.find(
     (b) => b.name === Ie.shortlistColumns
   ), n = (m = a.data) == null ? void 0 : m.flow_steps.find(
     (b) => b.name === Ie.executeProcedure
@@ -5432,7 +5438,7 @@ const mc = ({
       highlight: n,
       disabled: !c,
       rightSection: /* @__PURE__ */ v(S, { children: [
-        /* @__PURE__ */ t(sa, { mode: "popLayout", children: r == null ? void 0 : r.rightSection }),
+        /* @__PURE__ */ t(ha, { mode: "popLayout", children: r == null ? void 0 : r.rightSection }),
         i && /* @__PURE__ */ t(U, { type: "dots" })
       ] }),
       isOpened: e,
@@ -5440,9 +5446,9 @@ const mc = ({
     }
   );
 }, Xc = ({ flowId: e }) => {
-  const { allCompleted: a } = Wa(e), r = B(pa);
+  const { allCompleted: a } = Wa(e), r = B(ga);
   return a ? /* @__PURE__ */ t(
-    Pa,
+    sa,
     {
       mx: "xs",
       px: "md",
@@ -5507,7 +5513,7 @@ const mc = ({
   );
 }, zr = () => /* @__PURE__ */ t(_, { children: "We're getting clear on your needs..." }), as = (e) => {
   var h, m;
-  const a = ua(e), r = Ha(`(max-width: ${Ia(750)})`), n = (h = a.data) == null ? void 0 : h.flow_steps.find(
+  const a = fa(e), r = ma(`(max-width: ${da(750)})`), n = (h = a.data) == null ? void 0 : h.flow_steps.find(
     (b) => b.name === Ie.analyzeRequest
   ), i = (n == null ? void 0 : n.status) === "completed", c = Tt(i), l = q(() => Or(n).with(void 0, () => ({
     rightSection: /* @__PURE__ */ t(ne, { children: /* @__PURE__ */ t(_, { children: "Your request" }) }, "tasks-0"),
@@ -5558,7 +5564,7 @@ const mc = ({
       highlight: n,
       disabled: !c,
       rightSection: /* @__PURE__ */ v(S, { children: [
-        /* @__PURE__ */ t(sa, { mode: "popLayout", children: r == null ? void 0 : r.rightSection }),
+        /* @__PURE__ */ t(ha, { mode: "popLayout", children: r == null ? void 0 : r.rightSection }),
         i && /* @__PURE__ */ t(U, { type: "dots" })
       ] }),
       isOpened: e,
@@ -5566,7 +5572,7 @@ const mc = ({
     }
   );
 }, ts = ({ flowId: e }) => {
-  const a = O(null), { ref: r, height: n } = Ra(), [i, c] = R(!1), [l, d] = R(void 0), { classes: s, cx: h } = $a(), { allCompleted: m } = Wa(e);
+  const a = O(null), { ref: r, height: n } = Ha(), [i, c] = R(!1), [l, d] = R(void 0), { classes: s, cx: h } = $a(), { allCompleted: m } = Wa(e);
   L(() => {
     m && d((f) => [...f || [], "data"]);
   }, [m]), L(() => {
@@ -5655,7 +5661,7 @@ const mc = ({
     }
   }
 }, ns = Se.create(se.Root), os = () => {
-  const e = ue(ae), a = B(Nl), { classes: r } = ma();
+  const e = ue(ae), a = B(Nl), { classes: r } = pa();
   return e ? /* @__PURE__ */ v(
     ns,
     {
@@ -5958,13 +5964,13 @@ ${r}`);
       /* @__PURE__ */ t(_, { size: "sm", c: "dimmed", children: r })
     ] })
   }
-), Ma = () => /* @__PURE__ */ t(Ht, { children: /* @__PURE__ */ v(Pa, { direction: "column", gap: "sm", children: [
+), Ea = () => /* @__PURE__ */ t(Ht, { children: /* @__PURE__ */ v(sa, { direction: "column", gap: "sm", children: [
   /* @__PURE__ */ t(we, { width: "10%", height: 10 }),
   /* @__PURE__ */ t(we, { width: "75%", height: 14 })
 ] }) }), us = ({
   startFlow: e
 }) => {
-  const { data: a, status: r } = cs(), n = Ha(`(max-width: ${Ia(750)})`), i = q(() => a == null ? void 0 : a.slice(0, 3), [a]);
+  const { data: a, status: r } = cs(), n = ma(`(max-width: ${da(750)})`), i = q(() => a == null ? void 0 : a.slice(0, 3), [a]);
   return /* @__PURE__ */ v(C, { flex: 1, children: [
     /* @__PURE__ */ t(J, { size: "md", fw: 600, tt: "uppercase", children: "Recommendations based on your data" }),
     /* @__PURE__ */ t(S, { wrap: "nowrap", align: "stretch", gap: n ? "xs" : "md", children: r === "success" ? i == null ? void 0 : i.map((c) => /* @__PURE__ */ t(
@@ -5977,16 +5983,16 @@ ${r}`);
       },
       c.starter
     )) : /* @__PURE__ */ v(ia, { children: [
-      /* @__PURE__ */ t(Ma, {}),
-      /* @__PURE__ */ t(Ma, {}),
-      /* @__PURE__ */ t(Ma, {})
+      /* @__PURE__ */ t(Ea, {}),
+      /* @__PURE__ */ t(Ea, {}),
+      /* @__PURE__ */ t(Ea, {})
     ] }) })
   ] });
 }, vs = Se.create(C), gs = Se.create(se.Root), fs = ({
   children: e,
   onClose: a
 }) => {
-  const { classes: r } = ma();
+  const { classes: r } = pa();
   return /* @__PURE__ */ v(
     gs,
     {
@@ -6041,7 +6047,7 @@ ${r}`);
   showRecommendations: a,
   onClose: r
 }) => {
-  const [n, i] = R(!1), c = K(), { classes: l } = st({}), d = Ha(`(max-width: ${Ia(750)})`), s = B(ae), { mutate: h } = Ri({
+  const [n, i] = R(!1), c = K(), { classes: l } = st({}), d = ma(`(max-width: ${da(750)})`), s = B(ae), { mutate: h } = Ri({
     onSuccess: (w) => {
       s(w.flowId);
     }
@@ -6070,9 +6076,6 @@ ${r}`);
     vs,
     {
       flex: 1,
-      w: d ? "95%" : 600,
-      justify: "flex-end",
-      style: { alignSelf: "center" },
       initial: "hidden",
       animate: "visible",
       exit: "hidden",
@@ -6117,7 +6120,7 @@ ${r}`);
                 px: "sm",
                 bg: "var(--mantine-color-whiteGradient)",
                 children: /* @__PURE__ */ v(
-                  Pa,
+                  sa,
                   {
                     gap: n ? "xs" : "lg",
                     direction: n ? "column" : "row",
@@ -6192,21 +6195,24 @@ ${r}`);
   showRecentDashboards: e,
   showRecommendations: a,
   onClose: r
-}) => r != null ? /* @__PURE__ */ t(fs, { onClose: r, children: /* @__PURE__ */ t(
-  Cr,
-  {
-    showRecentDashboards: e,
-    showRecommendations: a,
-    onClose: r
-  }
-) }) : /* @__PURE__ */ t(
-  Cr,
-  {
-    showRecentDashboards: e,
-    showRecommendations: a,
-    onClose: r
-  }
-), ys = {
+}) => {
+  const n = ma(`(max-width: ${da(750)})`);
+  return r != null ? /* @__PURE__ */ t(fs, { onClose: r, children: /* @__PURE__ */ t(sa, { h: "100%", align: "end", w: n ? "95%" : 600, mx: "auto", children: /* @__PURE__ */ t(
+    Cr,
+    {
+      showRecentDashboards: e,
+      showRecommendations: a,
+      onClose: r
+    }
+  ) }) }) : /* @__PURE__ */ t(
+    Cr,
+    {
+      showRecentDashboards: e,
+      showRecommendations: a,
+      onClose: r
+    }
+  );
+}, ys = {
   mageMagenta: [
     "#EED4EB",
     // 0
@@ -6474,7 +6480,7 @@ ${r}`);
   showRecommendations: r
 }) => {
   const n = ue(ae), i = ue(ze), c = !!n, l = c && i === "flow", d = c && i === "exploreData";
-  return /* @__PURE__ */ v(sa, { mode: "wait", children: [
+  return /* @__PURE__ */ v(ha, { mode: "wait", children: [
     d && /* @__PURE__ */ t(Ec, {}),
     l && /* @__PURE__ */ t(os, {}),
     !(l || d) && /* @__PURE__ */ t(
@@ -6496,7 +6502,7 @@ ${r}`);
   startOptions: l = void 0,
   theme: d = void 0
 }) => {
-  const s = B(La);
+  const s = B(Aa);
   L(() => {
     s(i);
   }, [i, s]);
@@ -6537,7 +6543,7 @@ ${r}`);
       "#shadow-content-root"
     ), f || (console.warn(
       "Shadow root existed but container was missing. Recreating."
-    ), f = document.createElement("div"), f.id = "shadow-content-root", g.appendChild(f)), f.style.display = c.display || "contents") : (g = b.attachShadow({ mode: a, delegatesFocus: r }), f = document.createElement("div"), f.id = "shadow-content-root", g.appendChild(f)), s.current = g, !f) {
+    ), f = document.createElement("div"), f.id = "shadow-content-root", g.appendChild(f))) : (g = b.attachShadow({ mode: a, delegatesFocus: r }), f = document.createElement("div"), f.id = "shadow-content-root", g.appendChild(f)), f.style.display = c.display || "contents", s.current = g, !f) {
       console.error(
         "Failed to find or create the React root container inside the shadow DOM."
       ), m(!1);

package/dist/web-component/{browser-P0ubu0oY.js → browser-sDEj-xS6.js}

@@ -1,4 +1,4 @@
-import { g as o } from "./web-component-BC-1HsSF.js";
+import { g as o } from "./web-component-CSFSUg2K.js";
 var r, e;
 function t() {
   return e || (e = 1, r = function() {

package/dist/web-component/{web-component-BC-1HsSF.js → web-component-CSFSUg2K.js}

@@ -12259,7 +12259,7 @@ class RealtimeClient {
         close: () => {
           this.conn = null;
         }
-      }), import("./browser-P0ubu0oY.js").then((R) => R.b).then(({ default: R }) => {
+      }), import("./browser-sDEj-xS6.js").then((R) => R.b).then(({ default: R }) => {
         this.conn = new R(this.endpointURL(), void 0, {
           headers: this.headers
         }), this.setupConnection();
@@ -94115,7 +94115,10 @@ const Dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), getLayouted
     },
     F.id
   );
-}) }, D.id)) }), CellContent$1 = ({ formattedValue: { display: C } }) => C === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : C, sortingFn = (C, R, M) => {
+}) }, D.id)) }), CellContent$1 = ({ formattedValue: C }) => {
+  const R = C == null ? void 0 : C.display;
+  return !R || R === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : R;
+}, sortingFn = (C, R, M) => {
   const D = C.getValue(M), F = R.getValue(M), H = isFormattedData(D) ? D.sortValue : null, U = isFormattedData(F) ? F.sortValue : null;
   return H === null && U === null ? 0 : H === null ? -1 : U === null ? 1 : H instanceof Date && U instanceof Date ? H.getTime() - U.getTime() : typeof H == "number" && typeof U == "number" ? H - U : String(H).localeCompare(String(U));
 }, columnHelper$1 = createColumnHelper(), formatColumnName$1 = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), InfiniteTable = ({ dataColumns: C, virtualizer: R, data: M, tableRef: D, explainability: F }) => {
@@ -95610,7 +95613,10 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
       H.id
     );
   }) }, F.id)) });
-}, MAX_CELL_CHAR_LENGTH = 35, CellContent = ({ formattedValue: { display: C } }) => C === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : C && C.length > MAX_CELL_CHAR_LENGTH ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, maw: "25rem", label: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }), columnHelper = createColumnHelper(), formatColumnName = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), Table = ({
+}, MAX_CELL_CHAR_LENGTH = 35, CellContent = ({ formattedValue: C }) => {
+  const R = C == null ? void 0 : C.display;
+  return !R || R === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : R && R.length > MAX_CELL_CHAR_LENGTH ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, maw: "25rem", label: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: R }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: R });
+}, columnHelper = createColumnHelper(), formatColumnName = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), Table = ({
   flowId: C,
   dataColumns: R,
   data: M,
@@ -97107,9 +97113,6 @@ ${M}`);
     MotionStack,
     {
       flex: 1,
-      w: q ? "95%" : 600,
-      justify: "flex-end",
-      style: { alignSelf: "center" },
       initial: "hidden",
       animate: "visible",
       exit: "hidden",
@@ -97229,21 +97232,24 @@ ${M}`);
   showRecentDashboards: C,
   showRecommendations: R,
   onClose: M
-}) => M != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { onClose: M, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-  ModalContent,
-  {
-    showRecentDashboards: C,
-    showRecommendations: R,
-    onClose: M
-  }
-) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-  ModalContent,
-  {
-    showRecentDashboards: C,
-    showRecommendations: R,
-    onClose: M
-  }
-), defaultColors = {
+}) => {
+  const D = useMediaQuery(`(max-width: ${em(750)})`);
+  return M != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { onClose: M, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { h: "100%", align: "end", w: D ? "95%" : 600, mx: "auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ModalContent,
+    {
+      showRecentDashboards: C,
+      showRecommendations: R,
+      onClose: M
+    }
+  ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ModalContent,
+    {
+      showRecentDashboards: C,
+      showRecommendations: R,
+      onClose: M
+    }
+  );
+}, defaultColors = {
   mageMagenta: [
     "#EED4EB",
     // 0

package/dist/web-component/web-component.es.js

@@ -1,4 +1,4 @@
-import { a as o, c as r, l as s } from "./web-component-BC-1HsSF.js";
+import { a as o, c as r, l as s } from "./web-component-CSFSUg2K.js";
 export {
   o as colorsTuple,
   r as createMagemetrics,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magemetrics/ai",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "type": "module",
   "dependencies": {
     "@ai-sdk/react": "^1.2.5",