@undp/data-viz 1.5.6 → 1.5.8

package/dist/SlopeChart.js

@@ -4,7 +4,7 @@ import { i as xi } from "./index-Bwrro8-q.js";
 import { X as mi } from "./Modal-DVVwpKhP.js";
 import { T as hi } from "./Tooltip-CVCGWyzw.js";
 import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { Colors as n } from "./Colors.js";
+import { Colors as s } from "./Colors.js";
 import { s as fi } from "./string2HTML-oFCROsus.js";
 import { A as ri } from "./Axis-Ddg-seDi.js";
 import { A as ai } from "./AxisTitle-BmHLMRJZ.js";
@@ -24,8 +24,8 @@ function Oi(K) {
     height: k,
     showLabels: H,
     colors: e,
-    colorDomain: r,
-    radius: c,
+    colorDomain: a,
+    radius: r,
     leftMargin: m,
     rightMargin: X,
     topMargin: G,
@@ -40,20 +40,20 @@ function Oi(K) {
     onSeriesMouseClick: E,
     resetSelectionOnDoubleClick: Z,
     detailsOnClick: g,
-    styles: u,
+    styles: d,
     classNames: h,
-    animate: s,
-    dimmedOpacity: d,
+    animate: c,
+    dimmedOpacity: p,
     customLayers: B
-  } = K, _ = ii(null), p = ui(_, {
-    once: s.once,
-    amount: s.amount
-  }), [w, S] = I(void 0), [M, N] = I(void 0), [U, C] = I(void 0), [T, W] = I(void 0), A = {
+  } = K, _ = ii(null), w = ui(_, {
+    once: c.once,
+    amount: c.amount
+  }), [v, S] = I(void 0), [M, N] = I(void 0), [U, C] = I(void 0), [T, W] = I(void 0), A = {
     top: G,
     bottom: Q,
     left: m,
     right: X
-  }, v = $ - A.left - A.right, f = k - A.top - A.bottom, b = Math.min(Math.min(...l.map((i) => i.y1)), Math.min(...l.map((i) => i.y2))), P = Math.max(Math.max(...l.map((i) => i.y1)), Math.max(...l.map((i) => i.y2))), y = gi().domain([
+  }, u = $ - A.left - A.right, f = k - A.top - A.bottom, b = Math.min(Math.min(...l.map((i) => i.y1)), Math.min(...l.map((i) => i.y2))), P = Math.max(Math.max(...l.map((i) => i.y1)), Math.max(...l.map((i) => i.y2))), y = gi().domain([
     J(q) ? b > 0 ? 0 : b : q,
     J(z) ? P > 0 ? P : 0 : z
   ]).range([f, 0]).nice();
@@ -74,8 +74,8 @@ function Oi(K) {
               {
                 y1: 0,
                 y2: f,
-                x1: c,
-                x2: c,
+                x1: r,
+                x2: r,
                 classNames: {
                   axis: j(
                     "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
@@ -87,9 +87,9 @@ function Oi(K) {
             /* @__PURE__ */ o.jsx(
               ai,
               {
-                x: c,
+                x: r,
                 y: f + 15,
-                style: u?.yAxis?.title,
+                style: d?.yAxis?.title,
                 className: j(
                   "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
                   h?.yAxis?.title
@@ -104,8 +104,8 @@ function Oi(K) {
               {
                 y1: 0,
                 y2: f,
-                x1: v - c,
-                x2: v - c,
+                x1: u - r,
+                x2: u - r,
                 classNames: {
                   axis: j(
                     "stroke-1 stroke-primary-gray-500 dark:stroke-primary-gray-550",
@@ -117,9 +117,9 @@ function Oi(K) {
             /* @__PURE__ */ o.jsx(
               ai,
               {
-                x: v - c,
+                x: u - r,
                 y: f + 15,
-                style: u?.yAxis?.title,
+                style: d?.yAxis?.title,
                 className: j(
                   "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs",
                   h?.yAxis?.title
@@ -134,16 +134,16 @@ function Oi(K) {
             {
               variants: {
                 initial: {
-                  opacity: D ? i.color && e[r.indexOf(`${i.color}`)] === D ? 1 : d : w ? w.label === i.label ? 1 : d : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : d : 1
+                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : v ? v.label === i.label ? 1 : p : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : p : 1
                 },
                 whileInView: {
-                  opacity: D ? i.color && e[r.indexOf(`${i.color}`)] === D ? 1 : d : w ? w.label === i.label ? 1 : d : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : d : 1,
-                  transition: { duration: s.duration }
+                  opacity: D ? i.color && e[a.indexOf(`${i.color}`)] === D ? 1 : p : v ? v.label === i.label ? 1 : p : x.length !== 0 ? x.indexOf(i.label) !== -1 ? 1 : p : 1,
+                  transition: { duration: c.duration }
                 }
               },
               initial: "initial",
-              animate: p ? "whileInView" : "initial",
-              exit: { opacity: 0, transition: { duration: s.duration } },
+              animate: w ? "whileInView" : "initial",
+              exit: { opacity: 0, transition: { duration: c.duration } },
               onMouseEnter: (t) => {
                 S(i), W(t.clientY), C(t.clientX), F?.(i);
               },
@@ -160,26 +160,27 @@ function Oi(K) {
                 /* @__PURE__ */ o.jsx(
                   O.circle,
                   {
-                    cx: c,
                     variants: {
                       initial: {
+                        cx: r,
                         cy: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
+                        cx: r,
                         cy: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
-                    r: c,
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
+                    r,
                     style: {
                       fillOpacity: 0.6
                     }
@@ -191,28 +192,28 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
                     style: {
                       textAnchor: "end",
-                      ...u?.yAxis?.labels || {}
+                      ...d?.yAxis?.labels || {}
                     },
                     className: j("text-xs", h?.yAxis?.labels),
                     x: 5,
                     dy: "0.33em",
                     textAnchor: "end",
-                    dx: 0 - c - 3,
+                    dx: 0 - r - 3,
                     children: i.label
                   }
                 ) : x.length !== 0 && x.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
@@ -221,22 +222,22 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y1),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
                     style: {
                       textAnchor: "end",
-                      ...u?.yAxis?.labels || {}
+                      ...d?.yAxis?.labels || {}
                     },
                     className: j("text-xs", h?.yAxis?.labels),
                     x: 5,
@@ -248,26 +249,27 @@ function Oi(K) {
                 /* @__PURE__ */ o.jsx(
                   O.circle,
                   {
-                    cx: v - c,
                     variants: {
                       initial: {
+                        cx: u - r,
                         cy: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
+                        cx: u - r,
                         cy: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
-                    r: c,
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
+                    r,
                     style: {
                       fillOpacity: 0.6
                     }
@@ -279,27 +281,27 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
                     style: {
                       textAnchor: "start",
-                      ...u?.yAxis?.labels || {}
+                      ...d?.yAxis?.labels || {}
                     },
                     className: j("text-xs", h?.yAxis?.labels),
-                    x: v - 5,
+                    x: u - 5,
                     dy: "0.33em",
-                    dx: c + 3,
+                    dx: r + 3,
                     children: i.label
                   }
                 ) : x.length !== 0 && x.indexOf(i.label) !== -1 ? /* @__PURE__ */ o.jsx(
@@ -308,25 +310,25 @@ function Oi(K) {
                     variants: {
                       initial: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 0
                       },
                       whileInView: {
                         y: y(i.y2),
-                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
+                        fill: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
                         opacity: 1,
-                        transition: { duration: s.duration }
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
                     style: {
                       textAnchor: "start",
-                      ...u?.yAxis?.labels || {}
+                      ...d?.yAxis?.labels || {}
                     },
                     className: j("text-xs", h?.yAxis?.labels),
-                    x: v - 5,
+                    x: u - 5,
                     dy: "0.33em",
                     dx: 3,
                     children: i.label
@@ -335,29 +337,31 @@ function Oi(K) {
                 /* @__PURE__ */ o.jsx(
                   O.line,
                   {
-                    x1: c,
-                    x2: v - c,
                     variants: {
                       initial: {
+                        x1: r,
+                        x2: u - r,
                         y1: y(i.y1),
                         y2: y(i.y1),
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray
                       },
                       whileInView: {
+                        x1: r,
+                        x2: u - r,
                         y1: y(i.y1),
                         y2: y(i.y2),
-                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[r.indexOf(`${i.color}`)] : n.gray,
-                        transition: { duration: s.duration }
+                        stroke: l.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[a.indexOf(`${i.color}`)] : s.gray,
+                        transition: { duration: c.duration }
                       }
                     },
                     initial: "initial",
-                    animate: p ? "whileInView" : "initial",
-                    exit: { opacity: 0, transition: { duration: s.duration } },
+                    animate: w ? "whileInView" : "initial",
+                    exit: { opacity: 0, transition: { duration: c.duration } },
                     className: h?.dataConnectors,
                     style: {
                       fill: "none",
                       strokeWidth: 1,
-                      ...u?.dataConnectors
+                      ...d?.dataConnectors
                     }
                   }
                 )
@@ -369,14 +373,14 @@ function Oi(K) {
         ] })
       }
     ),
-    w && R && U && T ? /* @__PURE__ */ o.jsx(
+    v && R && U && T ? /* @__PURE__ */ o.jsx(
       hi,
       {
-        data: w,
+        data: v,
         body: R,
         xPos: U,
         yPos: T,
-        backgroundStyle: u?.tooltip,
+        backgroundStyle: d?.tooltip,
         className: h?.tooltip
       }
     ) : null,
@@ -406,8 +410,8 @@ function Gi(K) {
     colors: k,
     sources: H,
     graphDescription: e,
-    showLabels: r = !1,
-    height: c,
+    showLabels: a = !1,
+    height: r,
     width: m,
     footNote: X,
     colorDomain: G,
@@ -422,14 +426,14 @@ function Gi(K) {
     bottomMargin: E = 20,
     tooltip: Z,
     relativeHeight: g,
-    onSeriesMouseOver: u,
+    onSeriesMouseOver: d,
     showColorScale: h = !0,
-    highlightedDataPoints: s = [],
-    graphID: d,
+    highlightedDataPoints: c = [],
+    graphID: p,
     minValue: B,
     maxValue: _,
-    onSeriesMouseClick: p,
-    graphDownload: w = !1,
+    onSeriesMouseClick: w,
+    graphDownload: v = !1,
     dataDownload: S = !1,
     fillContainer: M = !0,
     language: N = "en",
@@ -438,7 +442,7 @@ function Gi(K) {
     theme: T = "light",
     ariaLabel: W,
     resetSelectionOnDoubleClick: A = !0,
-    detailsOnClick: v,
+    detailsOnClick: u,
     styles: f,
     classNames: b,
     animate: P = !1,
@@ -446,11 +450,11 @@ function Gi(K) {
     customLayers: i = []
   } = K, [V, t] = I(0), [ti, ei] = I(0), [si, ci] = I(void 0), Y = ii(null), oi = ii(null);
   return yi(() => {
-    const a = new ResizeObserver((li) => {
-      t(m || li[0].target.clientWidth || 620), ei(c || li[0].target.clientHeight || 480);
+    const n = new ResizeObserver((li) => {
+      t(m || li[0].target.clientWidth || 620), ei(r || li[0].target.clientHeight || 480);
     });
-    return Y.current && (ei(Y.current.clientHeight || 480), t(Y.current.clientWidth || 620), m || a.observe(Y.current)), () => a.disconnect();
-  }, [m, c]), /* @__PURE__ */ o.jsx(
+    return Y.current && (ei(Y.current.clientHeight || 480), t(Y.current.clientWidth || 620), m || n.observe(Y.current)), () => n.disconnect();
+  }, [m, r]), /* @__PURE__ */ o.jsx(
     "div",
     {
       className: `${T || "light"} flex ${m ? "grow-0" : "grow"} ${M ? "w-full" : "w-fit"} `,
@@ -467,7 +471,7 @@ function Gi(K) {
             ...f?.graphContainer || {},
             ...x && x !== !0 ? { backgroundColor: x } : {}
           },
-          id: d,
+          id: p,
           ref: oi,
           "aria-label": W || `${$ ? `The graph shows ${$}. ` : ""}This is a slope chart showing changes in data between two category or starting and ending time. Each line represents a different row in data, with lines sloping up or down to show increase or decrease over two categories or time.${e ? ` ${e}` : ""}`,
           children: /* @__PURE__ */ o.jsx(
@@ -476,7 +480,7 @@ function Gi(K) {
               className: "flex grow",
               style: { padding: x ? L || "1rem" : L || 0 },
               children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                $ || e || w || S ? /* @__PURE__ */ o.jsx(
+                $ || e || v || S ? /* @__PURE__ */ o.jsx(
                   wi,
                   {
                     styles: {
@@ -490,17 +494,17 @@ function Gi(K) {
                     graphTitle: $,
                     graphDescription: e,
                     width: m,
-                    graphDownload: w ? oi.current : void 0,
-                    dataDownload: S ? l.map((a) => a.data).filter((a) => a !== void 0).length > 0 ? l.map((a) => a.data).filter((a) => a !== void 0) : l.filter((a) => a !== void 0) : null
+                    graphDownload: v ? oi.current : void 0,
+                    dataDownload: S ? l.map((n) => n.data).filter((n) => n !== void 0).length > 0 ? l.map((n) => n.data).filter((n) => n !== void 0) : l.filter((n) => n !== void 0) : null
                   }
                 ) : null,
                 /* @__PURE__ */ o.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: l.length === 0 ? /* @__PURE__ */ o.jsx(bi, {}) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                  h && l.filter((a) => a.color).length !== 0 ? /* @__PURE__ */ o.jsx(
+                  h && l.filter((n) => n.color).length !== 0 ? /* @__PURE__ */ o.jsx(
                     vi,
                     {
                       width: m,
                       colorLegendTitle: Q,
-                      colors: k || n[T].categoricalColors.colors,
+                      colors: k || s[T].categoricalColors.colors,
                       colorDomain: G || ni(l, "color", !0),
                       setSelectedColor: ci,
                       showNAColor: U
@@ -512,35 +516,35 @@ function Gi(K) {
                       className: "flex flex-col grow justify-center w-full leading-0",
                       ref: Y,
                       "aria-label": "Graph area",
-                      children: (m || V) && (c || ti) ? /* @__PURE__ */ o.jsx(
+                      children: (m || V) && (r || ti) ? /* @__PURE__ */ o.jsx(
                         Oi,
                         {
                           data: l.filter(
-                            (a) => !J(a.y1) && !J(a.y2)
+                            (n) => !J(n.y1) && !J(n.y2)
                           ),
                           width: m || V,
                           height: Math.max(
                             C,
-                            c || (g ? C ? (m || V) * g > C ? (m || V) * g : C : (m || V) * g : ti)
+                            r || (g ? C ? (m || V) * g > C ? (m || V) * g : C : (m || V) * g : ti)
                           ),
-                          colorDomain: l.filter((a) => a.color).length === 0 ? [] : G || ni(l, "color", !0),
-                          colors: l.filter((a) => a.color).length === 0 ? k ? [k] : [n.primaryColors["blue-600"]] : k || n[T].categoricalColors.colors,
+                          colorDomain: l.filter((n) => n.color).length === 0 ? [] : G || ni(l, "color", !0),
+                          colors: l.filter((n) => n.color).length === 0 ? k ? [k] : [s.primaryColors["blue-600"]] : k || s[T].categoricalColors.colors,
                           selectedColor: si,
                           axisTitles: F,
-                          showLabels: r,
+                          showLabels: a,
                           radius: R,
                           leftMargin: D,
                           rightMargin: q,
                           topMargin: z,
                           bottomMargin: E,
                           tooltip: Z,
-                          onSeriesMouseOver: u,
-                          highlightedDataPoints: s,
+                          onSeriesMouseOver: d,
+                          highlightedDataPoints: c,
                           minValue: B,
                           maxValue: _,
-                          onSeriesMouseClick: p,
+                          onSeriesMouseClick: w,
                           resetSelectionOnDoubleClick: A,
-                          detailsOnClick: v,
+                          detailsOnClick: u,
                           styles: f,
                           classNames: b,
                           animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },