@mx-cartographer/insights-ui 1.8.1-alpha.mega2 → 1.8.1

package/dist/index.es.js

@@ -258,7 +258,7 @@ const Be = ({
   height: d
 }) => {
   const [s, c] = v.useState(null), m = () => {
-    const u = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, p = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, f = u - p - 24;
+    const p = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, u = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, f = p - u - 24;
     c(Math.floor(f / 20));
   };
   return v.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ t(
@@ -328,7 +328,7 @@ const Be = ({
   tabIndex: o = 0,
   ...d
 }) => {
-  const [s, c] = B(null), m = () => c(null), u = (f, g) => {
+  const [s, c] = B(null), m = () => c(null), p = (f, g) => {
     m(), n(f, g);
   };
   return /* @__PURE__ */ h(k, { children: [
@@ -366,7 +366,7 @@ const Be = ({
         onClose: m,
         open: !!s,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: l.map(({ icon: f, key: g, text: S }, M) => /* @__PURE__ */ h(Ae, { onClick: () => u(M, g), sx: { padding: 12 }, children: [
+        children: l.map(({ icon: f, key: g, text: S }, M) => /* @__PURE__ */ h(Ae, { onClick: () => p(M, g), sx: { padding: 12 }, children: [
           /* @__PURE__ */ t(J, { sx: { minWidth: "32px !important" }, children: f }),
           /* @__PURE__ */ t(
             T,
@@ -458,7 +458,7 @@ const Be = ({
     width: a.width
   });
   ie(() => {
-    const p = new ResizeObserver(() => {
+    const u = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
         if (s.current) {
           const { width: f } = s.current.getBoundingClientRect(), g = f / 2;
@@ -466,11 +466,11 @@ const Be = ({
         }
       });
     });
-    return s.current && p.observe(s.current), () => {
-      s.current && p.unobserve(s.current);
+    return s.current && u.observe(s.current), () => {
+      s.current && u.unobserve(s.current);
     };
   }, []);
-  const { ariaLabel: m, formattedAmount: u } = r[l];
+  const { ariaLabel: m, formattedAmount: p } = r[l];
   return /* @__PURE__ */ h("g", { "aria-label": m, ref: s, children: [
     /* @__PURE__ */ t(O.rect, { ...o, fill: i[l], rx: 2, style: a }),
     /* @__PURE__ */ t(
@@ -483,7 +483,7 @@ const Be = ({
         transform: `translate(${c.get() / 2}, -8)`,
         x: a.x,
         y: a.y,
-        children: u
+        children: p
       }
     )
   ] });
@@ -503,7 +503,7 @@ const Be = ({
   selectedTabIndex: s,
   onBarClick: c
 }) => {
-  const m = w(), { containerRef: u, height: p, width: f } = Se(), g = N(() => {
+  const m = w(), { containerRef: p, height: u, width: f } = Se(), g = N(() => {
     const H = `${r}80`;
     return s === void 0 ? [...new Array(l.length - 1).fill(H), r] : l.map((L, Z) => Z === s ? r : H);
   }, [r, l, s]), S = he(
@@ -528,10 +528,10 @@ const Be = ({
     [l]
   );
   return /* @__PURE__ */ h(C, { alignItems: "center", sx: { mb: n ? 16 : 24, width: "100%" }, children: [
-    /* @__PURE__ */ t(E, { ref: u, sx: { height: 130, width: "100%", mb: 8 }, children: /* @__PURE__ */ h(
+    /* @__PURE__ */ t(E, { ref: p, sx: { height: 130, width: "100%", mb: 8 }, children: /* @__PURE__ */ h(
       be,
       {
-        height: p,
+        height: u,
         margin: a,
         series: M.series,
         width: f,
@@ -656,21 +656,21 @@ const Be = ({
   rightLowerText: s,
   rightUpperText: c
 }) => {
-  const m = o ? _ : $, u = G(null), { height: p, width: f } = oe(u);
+  const m = o ? _ : $, p = G(null), { height: u, width: f } = oe(p);
   return /* @__PURE__ */ h(
     E,
     {
       alignItems: "center",
       display: "flex",
       justifyContent: "center",
-      ref: u,
+      ref: p,
       sx: (g) => ({
         backgroundColor: g.palette.grey[200],
         padding: 16
       }),
       width: "100%",
       children: [
-        /* @__PURE__ */ t(ae, { height: p, shouldRun: r.shouldRun, width: f }),
+        /* @__PURE__ */ t(ae, { height: u, shouldRun: r.shouldRun, width: f }),
         /* @__PURE__ */ h(
           A,
           {
@@ -862,8 +862,8 @@ const Be = ({
     if (!a.current) return;
     const d = a.current, s = d.querySelectorAll(".Overlay");
     ["brand100", "brand200", "brand300", "brand400", "brand500"].forEach((m) => {
-      const u = d.querySelectorAll(`.${m}`), p = m.replace("brand", "");
-      ee(u, o[p]);
+      const p = d.querySelectorAll(`.${m}`), u = m.replace("brand", "");
+      ee(p, o[u]);
     }), ee(s, o[300]);
   }, [o]), /* @__PURE__ */ t(
     "div",
@@ -934,10 +934,10 @@ const Be = ({
     if (a.current) {
       const d = a.current, s = d.parentElement;
       if (s) {
-        const m = Array.from(s.children).reduce((S, M) => M !== d ? S + M.clientHeight : S, 0), p = s.clientHeight - m, f = parseInt(
+        const m = Array.from(s.children).reduce((S, M) => M !== d ? S + M.clientHeight : S, 0), u = s.clientHeight - m, f = parseInt(
           window.getComputedStyle(d).lineHeight,
           10
-        ), g = Math.floor(p / f);
+        ), g = Math.floor(u / f);
         g !== l && n(g);
       }
     }
@@ -978,7 +978,7 @@ const Be = ({
   hasFullWidthImage: c,
   hasFooterButton: m = !1
 }) => {
-  const u = () => a || !r.html_description ? null : s ? /* @__PURE__ */ t(p1, { content: r.html_description, isLoading: d }) : /* @__PURE__ */ t(
+  const p = () => a || !r.html_description ? null : s ? /* @__PURE__ */ t(p1, { content: r.html_description, isLoading: d }) : /* @__PURE__ */ t(
     E1,
     {
       beat: r,
@@ -988,9 +988,9 @@ const Be = ({
     }
   );
   return /* @__PURE__ */ h(k, { children: [
-    n === "top" && u(),
+    n === "top" && p(),
     /* @__PURE__ */ t(C, { sx: { alignItems: "center", ...c && s && { mx: -16 } }, children: l }),
-    n === "bottom" && u(),
+    n === "bottom" && p(),
     i && /* @__PURE__ */ t(
       b,
       {
@@ -1016,10 +1016,10 @@ const Be = ({
   feedback: s,
   header: c,
   isError: m = !1,
-  isLoading: u = !1,
-  isMini: p = !1
+  isLoading: p = !1,
+  isMini: u = !1
 }) => /* @__PURE__ */ h(k, { children: [
-  /* @__PURE__ */ t(c1, { ...c, isMini: p, title: l.html_title }),
+  /* @__PURE__ */ t(c1, { ...c, isMini: u, title: l.html_title }),
   m ? /* @__PURE__ */ t(s1, { erroredText: d }) : /* @__PURE__ */ h(k, { children: [
     /* @__PURE__ */ t(
       u1,
@@ -1028,12 +1028,12 @@ const Be = ({
         asteriskText: r,
         beat: l,
         hasFooterButton: !!n,
-        isLoading: u,
-        isMini: p,
-        children: u ? /* @__PURE__ */ t(m1, { altLoadingText: i }) : a
+        isLoading: p,
+        isMini: u,
+        children: p ? /* @__PURE__ */ t(m1, { altLoadingText: i }) : a
       }
     ),
-    !p && n,
+    !u && n,
     s
   ] })
 ] }), ft = ({
@@ -1130,8 +1130,8 @@ const Be = ({
   setRefs: o
 }) => /* @__PURE__ */ t(
   ({ elementTag: s, children: c, ...m }) => {
-    const u = s;
-    return v.createElement(u, m, c);
+    const p = s;
+    return v.createElement(p, m, c);
   },
   {
     "aria-hidden": i,
@@ -1213,7 +1213,7 @@ const Be = ({
     },
     marginTop: 12,
     width: "100%"
-  }), u = X(K)({
+  }), p = X(K)({
     backgroundColor: d.palette.action.active,
     borderRadius: 4,
     fontSize: 16,
@@ -1234,7 +1234,7 @@ const Be = ({
       },
       children: [
         /* @__PURE__ */ t(
-          u,
+          p,
           {
             className: "mx-insights-beat-feedback-submit-button",
             "data-ui-test": "submit-button",
@@ -1321,7 +1321,7 @@ const Be = ({
   const m = ze(Te)({
     height: 93,
     resize: "none"
-  }), u = De();
+  }), p = De();
   return /* @__PURE__ */ h(
     E,
     {
@@ -1339,8 +1339,8 @@ const Be = ({
             maxRows: 4,
             minRows: 4,
             name: "Feedback",
-            onChange: (p) => {
-              s(p.target.value), c(p.target.value);
+            onChange: (u) => {
+              s(u.target.value), c(u.target.value);
             },
             onClick: () => d(),
             placeholder: n,
@@ -1355,7 +1355,7 @@ const Be = ({
           x,
           {
             sx: {
-              color: i && u.palette.error.darker,
+              color: i && p.palette.error.darker,
               fontSize: 12,
               p: "0px !important"
             },
@@ -1378,14 +1378,13 @@ const bt = ({
   data: a,
   legendLabelAvg: o,
   legendLabelMain: d,
-  margin: s,
-  onBarClick: c,
-  selectedTabIndex: m,
-  ...u
+  onBarClick: s,
+  selectedTabIndex: c,
+  ...m
 }) => /* @__PURE__ */ t(
   D,
   {
-    ...u,
+    ...m,
     beat: r,
     button: a.length ? /* @__PURE__ */ h(P, { spacing: 10, sx: { pt: 8 }, children: [
       /* @__PURE__ */ t(
@@ -1412,12 +1411,17 @@ const bt = ({
         amounts: i,
         color: n,
         data: a,
-        isMini: u.isMini,
+        isMini: m.isMini,
         legendLabelAvg: o,
         legendLabelMain: d,
-        margin: s,
-        onBarClick: c,
-        selectedTabIndex: m
+        margin: {
+          bottom: 32,
+          left: 2,
+          right: 2,
+          top: 24
+        },
+        onBarClick: s,
+        selectedTabIndex: c
       }
     ) : /* @__PURE__ */ t(H1, {})
   }
@@ -1579,7 +1583,7 @@ const bt = ({
   onClose: s,
   sendResponseAnalytics: c,
   upperDescription: m,
-  upperList: u
+  upperList: p
 }) => /* @__PURE__ */ t(
   ue,
   {
@@ -1612,7 +1616,7 @@ const bt = ({
         /* @__PURE__ */ t(le, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: l }),
         /* @__PURE__ */ h(C, { sx: { gap: 12, px: 24 }, children: [
           /* @__PURE__ */ t(x, { color: "secondary", fontSize: 13, children: m }),
-          /* @__PURE__ */ t(U, { children: u.map((p, f) => /* @__PURE__ */ h(
+          /* @__PURE__ */ t(U, { children: p.map((u, f) => /* @__PURE__ */ h(
             Q,
             {
               sx: {
@@ -1636,7 +1640,7 @@ const bt = ({
                   T,
                   {
                     disableTypography: !0,
-                    secondary: p,
+                    secondary: u,
                     sx: (g) => ({ color: g.palette.text.secondary, fontSize: 13 })
                   }
                 )
@@ -1649,7 +1653,7 @@ const bt = ({
       /* @__PURE__ */ h(E, { children: [
         /* @__PURE__ */ t(b, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: o }),
         /* @__PURE__ */ t(x, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: a }),
-        /* @__PURE__ */ t(U, { sx: { p: "16px 24px" }, children: d.map((p, f) => /* @__PURE__ */ h(
+        /* @__PURE__ */ t(U, { sx: { p: "16px 24px" }, children: d.map((u, f) => /* @__PURE__ */ h(
           Q,
           {
             sx: (g) => ({
@@ -1663,12 +1667,12 @@ const bt = ({
               p: 16
             }),
             children: [
-              /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(y, { name: p.icon_name, size: 24 }) }),
+              /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(y, { name: u.icon_name, size: 24 }) }),
               /* @__PURE__ */ t(
                 T,
                 {
-                  primary: p.title,
-                  secondary: p.content,
+                  primary: u.title,
+                  secondary: u.content,
                   sx: (g) => ({
                     "& > p": {
                       color: g.palette.text.secondary,
@@ -1931,8 +1935,8 @@ const bt = ({
   isMini: s,
   leftLowerText: c,
   leftUpperText: m,
-  rightLowerText: u,
-  rightUpperText: p,
+  rightLowerText: p,
+  rightUpperText: u,
   sourceAccountGuid: f
 }) => /* @__PURE__ */ t(v.Fragment, { children: d ? /* @__PURE__ */ t(
   de,
@@ -1944,8 +1948,8 @@ const bt = ({
     isMini: s,
     leftLowerText: c,
     leftUpperText: m,
-    rightLowerText: u,
-    rightUpperText: p
+    rightLowerText: p,
+    rightUpperText: u
   }
 ) : /* @__PURE__ */ t(
   V1,