@undp/data-viz 1.5.7 → 1.5.8

package/dist/BarGraph.js

@@ -25,12 +25,12 @@ import { GraphHeader as Ue } from "./GraphHeader.js";
 import { ColorLegendWithMouseOver as Je } from "./ColorLegendWithMouseOver.js";
 import { E as Ke } from "./EmptyState-DdTp-Mdn.js";
 import { P as Qe, f as Ze } from "./index-BmCqpO1B.js";
-import { c as lt, d as Te } from "./ensureCompleteData-DlmibgaI.js";
+import { c as at, d as Te } from "./ensureCompleteData-DlmibgaI.js";
 import { u as Ae } from "./uniqBy-BHy4I8PK.js";
 import { s as et } from "./sort-DfK1b0F5.js";
 import { c as tt } from "./init-BhZylTFx.js";
 import { s as ke } from "./index-CeVNqhMO.js";
-import { g as at } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
+import { g as lt } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
 import { X as ct } from "./XAxesLabels-loO78vUO.js";
 import { Y as dt } from "./YTicksAndGridLines-B6ah7CRf.js";
 function ht(ye) {
@@ -40,30 +40,30 @@ function ht(ye) {
     suffix: Y,
     prefix: V,
     barPadding: _,
-    showValues: me,
-    showTicks: ue,
-    leftMargin: ge,
-    truncateBy: Z,
+    showValues: ge,
+    showTicks: me,
+    leftMargin: xe,
+    truncateBy: ee,
     width: G,
-    height: ie,
+    height: ae,
     colorDomain: N,
-    rightMargin: re,
-    topMargin: de,
+    rightMargin: oe,
+    topMargin: he,
     bottomMargin: j,
     showLabels: E,
     tooltip: J,
-    onSeriesMouseOver: ee,
+    onSeriesMouseOver: te,
     refValues: v,
     selectedColor: p,
     highlightedDataPoints: B,
-    maxValue: ae,
-    minValue: le,
+    maxValue: le,
+    minValue: se,
     onSeriesMouseClick: K,
-    labelOrder: te,
-    rtl: se,
+    labelOrder: ie,
+    rtl: re,
     maxBarThickness: R,
-    minBarThickness: xe,
-    resetSelectionOnDoubleClick: ne,
+    minBarThickness: de,
+    resetSelectionOnDoubleClick: Q,
     detailsOnClick: $,
     barAxisTitle: y,
     valueColor: x,
@@ -78,17 +78,17 @@ function ht(ye) {
   } = ye, q = Me(null), T = _e(q, {
     once: O.once,
     amount: O.amount
-  }), [F, oe] = L(void 0), [W, P] = L(void 0), [Q, M] = L(void 0), [H, u] = L(void 0), k = {
-    top: y ? de + 25 : de,
+  }), [F, ne] = L(void 0), [W, P] = L(void 0), [Z, M] = L(void 0), [H, u] = L(void 0), k = {
+    top: y ? he + 25 : he,
     bottom: j,
-    left: ge,
-    right: re
-  }, m = G - k.left - k.right, d = ie - k.top - k.bottom, h = n.map((l, f) => ({
+    left: xe,
+    right: oe
+  }, m = G - k.left - k.right, d = ae - k.top - k.bottom, h = n.map((l, f) => ({
     ...l,
-    id: te ? `${l.label}` : `${f}`
-  })), c = Ee().domain([le, ae]).range([0, m]).nice(), a = te || h.map((l) => `${l.id}`), s = Le().domain(a).range([
+    id: ie ? `${l.label}` : `${f}`
+  })), c = Ee().domain([se, le]).range([0, m]).nice(), a = ie || h.map((l) => `${l.id}`), s = Le().domain(a).range([
     0,
-    xe ? Math.max(d, xe * a.length) : R ? Math.min(d, R * a.length) : d
+    de ? Math.max(d, de * a.length) : R ? Math.min(d, R * a.length) : d
   ]).paddingInner(_), t = c.ticks(C);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
@@ -96,16 +96,16 @@ function ht(ye) {
       {
         ref: q,
         width: `${G}px`,
-        height: `${ie}px`,
-        viewBox: `0 0 ${G} ${ie}`,
+        height: `${ae}px`,
+        viewBox: `0 0 ${G} ${ae}`,
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${k.left},${k.top})`, children: [
-          ue ? /* @__PURE__ */ e.jsx(
+          me ? /* @__PURE__ */ e.jsx(
             st,
             {
               values: t.filter((l) => l !== 0),
               x: t.filter((l) => l !== 0).map((l) => c(l)),
-              y1: 0 - de,
+              y1: 0 - he,
               y2: d + k.bottom,
               styles: {
                 gridLines: z?.xAxis?.gridLines,
@@ -152,16 +152,16 @@ function ht(ye) {
                   animate: T ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: O.duration } },
                   onMouseEnter: (f) => {
-                    oe(l), u(f.clientY), M(f.clientX), ee?.(l);
+                    ne(l), u(f.clientY), M(f.clientX), te?.(l);
                   },
                   onClick: () => {
-                    (K || $) && (Pe(W, l) && ne ? (P(void 0), K?.(void 0)) : (P(l), K?.(l)));
+                    (K || $) && (Pe(W, l) && Q ? (P(void 0), K?.(void 0)) : (P(l), K?.(l)));
                   },
                   onMouseMove: (f) => {
-                    oe(l), u(f.clientY), M(f.clientX);
+                    ne(l), u(f.clientY), M(f.clientX);
                   },
                   onMouseLeave: () => {
-                    oe(void 0), M(void 0), u(void 0), ee?.(void 0);
+                    ne(void 0), M(void 0), u(void 0), te?.(void 0);
                   },
                   children: [
                     l.size ? /* @__PURE__ */ e.jsx(
@@ -195,7 +195,7 @@ function ht(ye) {
                     E ? /* @__PURE__ */ e.jsx(
                       rt,
                       {
-                        value: `${l.label}`.length < Z ? `${l.label}` : `${`${l.label}`.substring(0, Z)}...`,
+                        value: `${l.label}`.length < ee ? `${l.label}` : `${`${l.label}`.substring(0, ee)}...`,
                         y: s(l.id) || 0,
                         x: (l.size || 0) < 0 ? c(0) : 0 - k.left,
                         width: (l.size || 0) < 0 ? G - c(0) : c(0) + k.left,
@@ -207,7 +207,7 @@ function ht(ye) {
                         isInView: T
                       }
                     ) : null,
-                    me ? /* @__PURE__ */ e.jsx(
+                    ge ? /* @__PURE__ */ e.jsx(
                       pe.text,
                       {
                         style: {
@@ -253,8 +253,8 @@ function ht(ye) {
             /* @__PURE__ */ e.jsx(
               Ye,
               {
-                x1: c(le < 0 ? 0 : le),
-                x2: c(le < 0 ? 0 : le),
+                x1: c(se < 0 ? 0 : se),
+                x2: c(se < 0 ? 0 : se),
                 y1: -2.5,
                 y2: d + k.bottom,
                 classNames: { axis: D?.yAxis?.axis },
@@ -269,7 +269,7 @@ function ht(ye) {
                 x: c(l.value),
                 y1: 0 - k.top,
                 y2: d + k.bottom,
-                textSide: c(l.value) > m * 0.75 || se ? "left" : "right",
+                textSide: c(l.value) > m * 0.75 || re ? "left" : "right",
                 classNames: l.classNames,
                 styles: l.styles,
                 animate: O,
@@ -282,12 +282,12 @@ function ht(ye) {
         ] })
       }
     ),
-    F && J && Q && H ? /* @__PURE__ */ e.jsx(
+    F && J && Z && H ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: F,
         body: J,
-        xPos: Q,
+        xPos: Z,
         yPos: H,
         backgroundStyle: z?.tooltip,
         className: D?.tooltip
@@ -319,30 +319,30 @@ function ut(ye) {
     colors: Y,
     suffix: V = "",
     sources: _,
-    prefix: me = "",
-    graphDescription: ue,
-    barPadding: ge = 0.25,
-    showValues: Z = !0,
+    prefix: ge = "",
+    graphDescription: me,
+    barPadding: xe = 0.25,
+    showValues: ee = !0,
     showTicks: G = !0,
-    leftMargin: ie = 100,
+    leftMargin: ae = 100,
     rightMargin: N = 40,
-    truncateBy: re = 999,
-    height: de,
+    truncateBy: oe = 999,
+    height: he,
     width: j,
     footNote: E,
     colorDomain: J,
-    colorLegendTitle: ee,
+    colorLegendTitle: te,
     highlightedDataPoints: v = [],
     padding: p,
     backgroundColor: B = !1,
-    topMargin: ae = 25,
-    bottomMargin: le = 10,
+    topMargin: le = 25,
+    bottomMargin: se = 10,
     showLabels: K = !0,
-    relativeHeight: te,
-    tooltip: se,
+    relativeHeight: ie,
+    tooltip: re,
     onSeriesMouseOver: R,
-    refValues: xe,
-    showColorScale: ne = !0,
+    refValues: de,
+    showColorScale: Q = !0,
     graphID: $,
     maxValue: y,
     minValue: x,
@@ -357,10 +357,10 @@ function ut(ye) {
     theme: q = "light",
     maxBarThickness: T,
     maxNumberOfBars: F,
-    minBarThickness: oe,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: P = !0,
-    detailsOnClick: Q,
+    detailsOnClick: Z,
     barAxisTitle: M,
     noOfTicks: H = 5,
     valueColor: u,
@@ -373,28 +373,28 @@ function ut(ye) {
     customLayers: s = [],
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     naLabel: l = "NA"
-  } = ye, [f, Ce] = L(0), [ce, U] = L(0), [fe, Oe] = L(t.autoplay), he = et(
+  } = ye, [f, Ce] = L(0), [ce, U] = L(0), [fe, Oe] = L(t.autoplay), ue = et(
     Ae(n, "date", !0).map(
       (r) => Se(`${r}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (r, we) => tt(r, we)
-  ), [be, ve] = L(t.autoplay ? 0 : he.length - 1), [Ne, o] = L(void 0), i = Me(null), S = Me(null);
+  ), [be, ve] = L(t.autoplay ? 0 : ue.length - 1), [Ne, o] = L(void 0), i = Me(null), S = Me(null);
   Ve(() => {
     const r = new ResizeObserver((we) => {
-      Ce(j || we[0].target.clientWidth || 620), U(de || we[0].target.clientHeight || 480);
+      Ce(j || we[0].target.clientWidth || 620), U(he || we[0].target.clientHeight || 480);
     });
     return i.current && (U(i.current.clientHeight || 480), Ce(i.current.clientWidth || 620), j || r.observe(i.current)), () => r.disconnect();
-  }, [j, de]), Ve(() => {
+  }, [j, he]), Ve(() => {
     const r = setInterval(
       () => {
-        ve((we) => we < he.length - 1 ? we + 1 : 0);
+        ve((we) => we < ue.length - 1 ? we + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
     return fe || clearInterval(r), () => clearInterval(r);
-  }, [he, fe, t.speed]);
+  }, [ue, fe, t.speed]);
   const it = Be(
-    he,
+    ue,
     be,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
@@ -418,14 +418,14 @@ function ut(ye) {
           },
           id: $,
           ref: S,
-          "aria-label": W || `${g ? `The graph shows ${g}. ` : ""}This is a bar chart. ${ue ? ` ${ue}` : ""}`,
+          "aria-label": W || `${g ? `The graph shows ${g}. ` : ""}This is a bar chart. ${me ? ` ${me}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
               style: { padding: B ? p || "1rem" : p || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                g || ue || z || D ? /* @__PURE__ */ e.jsx(
+                g || me || z || D ? /* @__PURE__ */ e.jsx(
                   Ue,
                   {
                     styles: {
@@ -437,13 +437,13 @@ function ut(ye) {
                       description: m?.description
                     },
                     graphTitle: g,
-                    graphDescription: ue,
+                    graphDescription: me,
                     width: j,
                     graphDownload: z ? S.current : void 0,
                     dataDownload: D ? n.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? n.map((r) => r.data).filter((r) => r !== void 0) : n.filter((r) => r !== void 0) : null
                   }
                 ) : null,
-                t.enabled && he.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && ue.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
@@ -459,28 +459,28 @@ function ut(ye) {
                   /* @__PURE__ */ e.jsx(
                     Fe,
                     {
-                      min: he[0],
-                      max: he[he.length - 1],
+                      min: ue[0],
+                      max: ue[ue.length - 1],
                       marks: it,
                       step: null,
-                      defaultValue: he[he.length - 1],
-                      value: he[be],
+                      defaultValue: ue[ue.length - 1],
+                      value: ue[be],
                       onChangeComplete: (r) => {
-                        ve(he.indexOf(r));
+                        ve(ue.indexOf(r));
                       },
                       onChange: (r) => {
-                        ve(he.indexOf(r));
+                        ve(ue.indexOf(r));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
                   )
                 ] }) : null,
                 /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: n.length === 0 ? /* @__PURE__ */ e.jsx(Ke, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                  ne && n.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ e.jsx(
+                  Q && n.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ e.jsx(
                     Je,
                     {
                       width: j,
-                      colorLegendTitle: ee,
+                      colorLegendTitle: te,
                       colors: Y || je[q].categoricalColors.colors,
                       colorDomain: J || Ae(n, "color", !0),
                       setSelectedColor: o,
@@ -493,13 +493,13 @@ function ut(ye) {
                       className: "flex grow flex-col justify-center w-full leading-0",
                       ref: i,
                       "aria-label": "Graph area",
-                      children: (j || f) && (de || ce) ? /* @__PURE__ */ e.jsx(
+                      children: (j || f) && (he || ce) ? /* @__PURE__ */ e.jsx(
                         ht,
                         {
                           data: O ? Ie(
-                            lt(n, t.dateFormat || "yyyy").filter(
+                            at(n, t.dateFormat || "yyyy").filter(
                               (r) => t.enabled ? r.date === $e(
-                                new Date(he[be]),
+                                new Date(ue[be]),
                                 t.dateFormat || "yyyy"
                               ) : r
                             ).filter((r) => d ? !X(r.size) : r),
@@ -507,9 +507,9 @@ function ut(ye) {
                               (r) => r.size === void 0 ? O === "asc" ? 1 / 0 : -1 / 0 : r.size
                             ],
                             [O]
-                          ).filter((r, we) => F ? we < F : !0) : lt(n, t.dateFormat || "yyyy").filter(
+                          ).filter((r, we) => F ? we < F : !0) : at(n, t.dateFormat || "yyyy").filter(
                             (r) => t.enabled ? r.date === $e(
-                              new Date(he[be]),
+                              new Date(ue[be]),
                               t.dateFormat || "yyyy"
                             ) : r
                           ).filter((r) => d ? !X(r.size) : r).filter((r, we) => F ? we < F : !0),
@@ -519,22 +519,22 @@ function ut(ye) {
                           selectedColor: Ne,
                           height: Math.max(
                             w,
-                            de || (te ? w ? (j || f) * te > w ? (j || f) * te : w : (j || f) * te : ce)
+                            he || (ie ? w ? (j || f) * ie > w ? (j || f) * ie : w : (j || f) * ie : ce)
                           ),
                           suffix: V,
-                          prefix: me,
-                          barPadding: ge,
-                          showValues: Z,
+                          prefix: ge,
+                          barPadding: xe,
+                          showValues: ee,
                           showTicks: G,
-                          leftMargin: ie,
+                          leftMargin: ae,
                           rightMargin: N,
-                          topMargin: ae,
-                          bottomMargin: le,
-                          truncateBy: re,
+                          topMargin: le,
+                          bottomMargin: se,
+                          truncateBy: oe,
                           showLabels: K,
-                          tooltip: se,
+                          tooltip: re,
                           onSeriesMouseOver: R,
-                          refValues: xe,
+                          refValues: de,
                           maxValue: X(y) ? Math.max(
                             ...n.filter((r) => !X(r.size)).map((r) => r.size)
                           ) < 0 ? 0 : Math.max(
@@ -550,9 +550,9 @@ function ut(ye) {
                           labelOrder: A,
                           rtl: I === "he" || I === "ar",
                           maxBarThickness: T,
-                          minBarThickness: oe,
+                          minBarThickness: ne,
                           resetSelectionOnDoubleClick: P,
-                          detailsOnClick: Q,
+                          detailsOnClick: Z,
                           barAxisTitle: M,
                           noOfTicks: H,
                           valueColor: u,
@@ -596,30 +596,30 @@ function mt(ye) {
     barPadding: Y,
     showTicks: V,
     leftMargin: _,
-    truncateBy: me,
-    width: ue,
-    height: ge,
-    suffix: Z,
+    truncateBy: ge,
+    width: me,
+    height: xe,
+    suffix: ee,
     prefix: G,
-    showValues: ie,
+    showValues: ae,
     rightMargin: N,
-    topMargin: re,
-    bottomMargin: de,
+    topMargin: oe,
+    bottomMargin: he,
     showLabels: j,
     tooltip: E,
     onSeriesMouseOver: J,
-    refValues: ee,
+    refValues: te,
     maxValue: v,
     minValue: p,
     onSeriesMouseClick: B,
-    selectedColor: ae,
-    rtl: le,
+    selectedColor: le,
+    rtl: se,
     labelOrder: K,
-    maxBarThickness: te,
-    resetSelectionOnDoubleClick: se,
+    maxBarThickness: ie,
+    resetSelectionOnDoubleClick: re,
     detailsOnClick: R,
-    barAxisTitle: xe,
-    valueColor: ne,
+    barAxisTitle: de,
+    valueColor: Q,
     noOfTicks: $,
     styles: y,
     classNames: x,
@@ -632,25 +632,25 @@ function mt(ye) {
     once: C.once,
     amount: C.amount
   }), w = {
-    top: xe ? re + 25 : re,
-    bottom: de,
+    top: de ? oe + 25 : oe,
+    bottom: he,
     left: _,
     right: N
-  }, [q, T] = L(void 0), [F, oe] = L(void 0), [W, P] = L(void 0), [Q, M] = L(void 0), H = ue - w.left - w.right, u = ge - w.top - w.bottom, k = n.map((s, t) => ({
+  }, [q, T] = L(void 0), [F, ne] = L(void 0), [W, P] = L(void 0), [Z, M] = L(void 0), H = me - w.left - w.right, u = xe - w.top - w.bottom, k = n.map((s, t) => ({
     ...s,
     id: K ? `${s.label}` : `${t}`
   })), m = K || k.map((s) => `${s.id}`), d = Ee().domain([p, v]).range([0, H]).nice(), h = Le().domain(m).range([
     0,
-    te ? Math.min(u, te * m.length) : u
+    ie ? Math.min(u, ie * m.length) : u
   ]).paddingInner(Y), c = Le().domain(n[0].size.map((s, t) => `${t}`)).range([0, h.bandwidth()]).paddingInner(0.1), a = d.ticks($);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
       {
         ref: I,
-        width: `${ue}px`,
-        height: `${ge}px`,
-        viewBox: `0 0 ${ue} ${ge}`,
+        width: `${me}px`,
+        height: `${xe}px`,
+        viewBox: `0 0 ${me} ${xe}`,
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${w.left},${w.top})`, children: [
           V ? /* @__PURE__ */ e.jsx(
@@ -658,7 +658,7 @@ function mt(ye) {
             {
               values: a.filter((s) => s !== 0),
               x: a.filter((s) => s !== 0).map((s) => d(s)),
-              y1: 0 - re,
+              y1: 0 - oe,
               y2: u + w.bottom,
               styles: {
                 gridLines: y?.xAxis?.gridLines,
@@ -668,7 +668,7 @@ function mt(ye) {
                 gridLines: x?.xAxis?.gridLines,
                 labels: x?.xAxis?.labels
               },
-              suffix: Z,
+              suffix: ee,
               prefix: G,
               labelType: "secondary",
               showGridLines: !0,
@@ -682,7 +682,7 @@ function mt(ye) {
               y: 0 - w.top + 15,
               style: y?.xAxis?.title,
               className: x?.xAxis?.title,
-              text: xe
+              text: de
             }
           ),
           O.filter((s) => s.position === "before").map((s) => s.layer),
@@ -710,7 +710,7 @@ function mt(ye) {
                       pe.g,
                       {
                         className: "undp-viz-g-with-hover",
-                        opacity: ae ? g[l] === ae ? 1 : 0.3 : 0.85,
+                        opacity: le ? g[l] === le ? 1 : 0.3 : 0.85,
                         onMouseEnter: (f) => {
                           T({ ...s, sizeIndex: l }), M(f.clientY), P(f.clientX), J?.({ ...s, sizeIndex: l });
                         },
@@ -721,7 +721,7 @@ function mt(ye) {
                           T(void 0), P(void 0), M(void 0), J?.(void 0);
                         },
                         onClick: () => {
-                          (B || R) && (Pe(F, { ...s, sizeIndex: l }) && se ? (oe(void 0), B?.(void 0)) : (oe({ ...s, sizeIndex: l }), B && B({ ...s, sizeIndex: l })));
+                          (B || R) && (Pe(F, { ...s, sizeIndex: l }) && re ? (ne(void 0), B?.(void 0)) : (ne({ ...s, sizeIndex: l }), B && B({ ...s, sizeIndex: l })));
                         },
                         children: [
                           X(t) ? null : /* @__PURE__ */ e.jsx(
@@ -751,12 +751,11 @@ function mt(ye) {
                               animate: b ? "whileInView" : "initial"
                             }
                           ),
-                          ie ? /* @__PURE__ */ e.jsx(
+                          ae ? /* @__PURE__ */ e.jsx(
                             pe.text,
                             {
                               y: c(`${l}`) + c.bandwidth() / 2,
                               style: {
-                                fill: ne || g[l],
                                 textAnchor: t && t < 0 ? "end" : "start",
                                 ...y?.graphObjectValues || {}
                               },
@@ -764,10 +763,11 @@ function mt(ye) {
                               dx: t && t < 0 ? -5 : 5,
                               dy: "0.33em",
                               variants: {
-                                initial: { x: d(0), opacity: 0 },
+                                initial: { x: d(0), opacity: 0, fill: Q || g[l] },
                                 whileInView: {
                                   x: d(t || 0),
                                   opacity: 1,
+                                  fill: Q || g[l],
                                   transition: { duration: C.duration }
                                 }
                               },
@@ -777,7 +777,7 @@ function mt(ye) {
                                 opacity: 0,
                                 transition: { duration: C.duration }
                               },
-                              children: ze(t, A, D, G, Z)
+                              children: ze(t, A, D, G, ee)
                             }
                           ) : null
                         ]
@@ -787,7 +787,7 @@ function mt(ye) {
                     j ? /* @__PURE__ */ e.jsx(
                       rt,
                       {
-                        value: `${s.label}`.length < me ? `${s.label}` : `${`${s.label}`.substring(0, me)}...`,
+                        value: `${s.label}`.length < ge ? `${s.label}` : `${`${s.label}`.substring(0, ge)}...`,
                         y: 0,
                         x: 0 - w.left,
                         width: d(p < 0 ? 0 : p) + w.left,
@@ -814,7 +814,7 @@ function mt(ye) {
                 styles: { axis: y?.yAxis?.axis }
               }
             ),
-            ee ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ee.map((s, t) => /* @__PURE__ */ e.jsx(
+            te ? /* @__PURE__ */ e.jsx(e.Fragment, { children: te.map((s, t) => /* @__PURE__ */ e.jsx(
               ot,
               {
                 text: s.text,
@@ -822,7 +822,7 @@ function mt(ye) {
                 x: d(s.value),
                 y1: 0 - w.top,
                 y2: u + w.bottom,
-                textSide: d(s.value) > H * 0.75 || le ? "left" : "right",
+                textSide: d(s.value) > H * 0.75 || se ? "left" : "right",
                 classNames: s.classNames,
                 styles: s.styles,
                 animate: C,
@@ -835,13 +835,13 @@ function mt(ye) {
         ] })
       }
     ),
-    q && E && W && Q ? /* @__PURE__ */ e.jsx(
+    q && E && W && Z ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: q,
         body: E,
         xPos: W,
-        yPos: Q,
+        yPos: Z,
         backgroundStyle: y?.tooltip,
         className: x?.tooltip
       }
@@ -851,7 +851,7 @@ function mt(ye) {
       {
         open: F !== void 0,
         onClose: () => {
-          oe(void 0);
+          ne(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
@@ -872,30 +872,30 @@ function gt(ye) {
     colors: Y = je.light.categoricalColors.colors,
     sources: V,
     graphDescription: _,
-    barPadding: me = 0.25,
-    showTicks: ue = !0,
-    truncateBy: ge = 999,
-    height: Z,
+    barPadding: ge = 0.25,
+    showTicks: me = !0,
+    truncateBy: xe = 999,
+    height: ee,
     width: G,
-    footNote: ie,
+    footNote: ae,
     colorDomain: N,
-    colorLegendTitle: re,
-    suffix: de = "",
+    colorLegendTitle: oe,
+    suffix: he = "",
     prefix: j = "",
     showValues: E = !0,
     showColorScale: J = !0,
-    padding: ee,
+    padding: te,
     backgroundColor: v = !1,
     leftMargin: p = 100,
     rightMargin: B = 40,
-    topMargin: ae = 25,
-    bottomMargin: le = 10,
+    topMargin: le = 25,
+    bottomMargin: se = 10,
     showLabels: K = !0,
-    relativeHeight: te,
-    tooltip: se,
+    relativeHeight: ie,
+    tooltip: re,
     onSeriesMouseOver: R,
-    refValues: xe,
-    graphID: ne,
+    refValues: de,
+    graphID: Q,
     maxValue: $,
     minValue: y,
     onSeriesMouseClick: x,
@@ -910,10 +910,10 @@ function gt(ye) {
     resetSelectionOnDoubleClick: q = !0,
     detailsOnClick: T,
     barAxisTitle: F,
-    noOfTicks: oe = 5,
+    noOfTicks: ne = 5,
     valueColor: W,
     styles: P,
-    classNames: Q,
+    classNames: Z,
     filterNA: M = !0,
     animate: H = !1,
     precision: u = 2,
@@ -927,13 +927,13 @@ function gt(ye) {
       (o) => Se(`${o}`, m.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (o, i) => tt(o, i)
-  ), [U, fe] = L(m.autoplay ? 0 : ce.length - 1), [Oe, he] = L(void 0), be = Me(null), ve = Me(null);
+  ), [U, fe] = L(m.autoplay ? 0 : ce.length - 1), [Oe, ue] = L(void 0), be = Me(null), ve = Me(null);
   Ve(() => {
     const o = new ResizeObserver((i) => {
-      s(G || i[0].target.clientWidth || 620), l(Z || i[0].target.clientHeight || 480);
+      s(G || i[0].target.clientWidth || 620), l(ee || i[0].target.clientHeight || 480);
     });
     return be.current && (l(be.current.clientHeight || 480), s(be.current.clientWidth || 620), G || o.observe(be.current)), () => o.disconnect();
-  }, [G, Z]), Ve(() => {
+  }, [G, ee]), Ve(() => {
     const o = setInterval(
       () => {
         fe((i) => i < ce.length - 1 ? i + 1 : 0);
@@ -959,20 +959,20 @@ function gt(ye) {
           className: De(
             `${v ? v === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${D || "en"}`,
             G ? "w-fit" : "w-full",
-            Q?.graphContainer
+            Z?.graphContainer
           ),
           style: {
             ...P?.graphContainer || {},
             ...v && v !== !0 ? { backgroundColor: v } : {}
           },
-          id: ne,
+          id: Q,
           ref: ve,
           "aria-label": w || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${_ ? ` ${_}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: v ? ee || "1rem" : ee || 0 },
+              style: { padding: v ? te || "1rem" : te || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 w-full grow justify-between", children: [
                 g || _ || C || z ? /* @__PURE__ */ e.jsx(
                   Ue,
@@ -982,8 +982,8 @@ function gt(ye) {
                       description: P?.description
                     },
                     classNames: {
-                      title: Q?.title,
-                      description: Q?.description
+                      title: Z?.title,
+                      description: Z?.description
                     },
                     graphTitle: g,
                     graphDescription: _,
@@ -1031,12 +1031,12 @@ function gt(ye) {
                       width: G,
                       colorDomain: N,
                       colors: Y,
-                      colorLegendTitle: re,
-                      setSelectedColor: he,
+                      colorLegendTitle: oe,
+                      setSelectedColor: ue,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: be, "aria-label": "Graph area", children: (G || a) && (Z || t) ? /* @__PURE__ */ e.jsx(
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: be, "aria-label": "Graph area", children: (G || a) && (ee || t) ? /* @__PURE__ */ e.jsx(
                     mt,
                     {
                       data: h !== void 0 ? h === "total" ? Ie(
@@ -1075,22 +1075,22 @@ function gt(ye) {
                       width: G || a,
                       height: Math.max(
                         A,
-                        Z || (te ? A ? (G || a) * te > A ? (G || a) * te : A : (G || a) * te : t)
+                        ee || (ie ? A ? (G || a) * ie > A ? (G || a) * ie : A : (G || a) * ie : t)
                       ),
-                      suffix: de,
+                      suffix: he,
                       prefix: j,
                       showValues: E,
-                      barPadding: me,
-                      showTicks: ue,
+                      barPadding: ge,
+                      showTicks: me,
                       leftMargin: p,
                       rightMargin: B,
-                      topMargin: ae,
-                      bottomMargin: le,
-                      truncateBy: ge,
+                      topMargin: le,
+                      bottomMargin: se,
+                      truncateBy: xe,
                       showLabels: K,
-                      tooltip: se,
+                      tooltip: re,
                       onSeriesMouseOver: R,
-                      refValues: xe,
+                      refValues: de,
                       maxValue: X($) ? Math.max(
                         ...n.map(
                           (o) => Math.max(
@@ -1133,10 +1133,10 @@ function gt(ye) {
                       resetSelectionOnDoubleClick: q,
                       detailsOnClick: T,
                       barAxisTitle: F,
-                      noOfTicks: oe,
+                      noOfTicks: ne,
                       valueColor: W,
                       styles: P,
-                      classNames: Q,
+                      classNames: Z,
                       colorDomain: N,
                       animate: H === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : H || { duration: 0, once: !0, amount: 0 },
                       precision: u,
@@ -1145,16 +1145,16 @@ function gt(ye) {
                     }
                   ) : null })
                 ] }) }),
-                V || ie ? /* @__PURE__ */ e.jsx(
+                V || ae ? /* @__PURE__ */ e.jsx(
                   qe,
                   {
                     styles: { footnote: P?.footnote, source: P?.source },
                     classNames: {
-                      footnote: Q?.footnote,
-                      source: Q?.source
+                      footnote: Z?.footnote,
+                      source: Z?.source
                     },
                     sources: V,
-                    footNote: ie,
+                    footNote: ae,
                     width: G
                   }
                 ) : null
@@ -1173,30 +1173,30 @@ function xt(ye) {
     barPadding: Y,
     showTicks: V,
     leftMargin: _,
-    rightMargin: me,
-    truncateBy: ue,
-    width: ge,
-    height: Z,
+    rightMargin: ge,
+    truncateBy: me,
+    width: xe,
+    height: ee,
     topMargin: G,
-    bottomMargin: ie,
+    bottomMargin: ae,
     tooltip: N,
-    onSeriesMouseOver: re,
-    showLabels: de,
+    onSeriesMouseOver: oe,
+    showLabels: he,
     suffix: j,
     prefix: E,
     showValues: J,
-    refValues: ee,
+    refValues: te,
     maxValue: v,
     onSeriesMouseClick: p,
     selectedColor: B,
-    rtl: ae,
-    labelOrder: le,
+    rtl: le,
+    labelOrder: se,
     maxBarThickness: K,
-    minBarThickness: te,
-    resetSelectionOnDoubleClick: se,
+    minBarThickness: ie,
+    resetSelectionOnDoubleClick: re,
     detailsOnClick: R,
-    barAxisTitle: xe,
-    valueColor: ne,
+    barAxisTitle: de,
+    valueColor: Q,
     noOfTicks: $,
     styles: y,
     classNames: x,
@@ -1209,25 +1209,25 @@ function xt(ye) {
     once: C.once,
     amount: C.amount
   }), w = {
-    top: xe ? G + 25 : G,
-    bottom: ie,
+    top: de ? G + 25 : G,
+    bottom: ae,
     left: _,
-    right: me
-  }, [q, T] = L(void 0), [F, oe] = L(void 0), [W, P] = L(void 0), [Q, M] = L(void 0), H = ge - w.left - w.right, u = Z - w.top - w.bottom, k = n.map((a, s) => ({
+    right: ge
+  }, [q, T] = L(void 0), [F, ne] = L(void 0), [W, P] = L(void 0), [Z, M] = L(void 0), H = xe - w.left - w.right, u = ee - w.top - w.bottom, k = n.map((a, s) => ({
     ...a,
-    id: le ? `${a.label}` : `${s}`
-  })), m = le || k.map((a) => `${a.id}`), d = Ee().domain([0, v]).range([0, H]).nice(), h = Le().domain(m).range([
+    id: se ? `${a.label}` : `${s}`
+  })), m = se || k.map((a) => `${a.id}`), d = Ee().domain([0, v]).range([0, H]).nice(), h = Le().domain(m).range([
     0,
-    te ? Math.max(u, te * m.length) : K ? Math.min(u, K * m.length) : u
+    ie ? Math.max(u, ie * m.length) : K ? Math.min(u, K * m.length) : u
   ]).paddingInner(Y), c = d.ticks($);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
       {
         ref: I,
-        width: `${ge}px`,
-        height: `${Z}px`,
-        viewBox: `0 0 ${ge} ${Z}`,
+        width: `${xe}px`,
+        height: `${ee}px`,
+        viewBox: `0 0 ${xe} ${ee}`,
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${w.left},${w.top})`, children: [
           V ? /* @__PURE__ */ e.jsx(
@@ -1259,7 +1259,7 @@ function xt(ye) {
               y: 0 - w.top + 15,
               style: y?.xAxis?.title,
               className: x?.xAxis?.title,
-              text: xe
+              text: de
             }
           ),
           O.filter((a) => a.position === "before").map((a) => a.layer),
@@ -1286,16 +1286,16 @@ function xt(ye) {
                       {
                         opacity: B ? g[t] === B ? 1 : 0.3 : 1,
                         onMouseEnter: (l) => {
-                          T({ ...a, sizeIndex: t }), M(l.clientY), P(l.clientX), re?.({ ...a, sizeIndex: t });
+                          T({ ...a, sizeIndex: t }), M(l.clientY), P(l.clientX), oe?.({ ...a, sizeIndex: t });
                         },
                         onMouseMove: (l) => {
                           T({ ...a, sizeIndex: t }), M(l.clientY), P(l.clientX);
                         },
                         onMouseLeave: () => {
-                          T(void 0), P(void 0), M(void 0), re?.(void 0);
+                          T(void 0), P(void 0), M(void 0), oe?.(void 0);
                         },
                         onClick: () => {
-                          (p || R) && (Pe(F, { ...a, sizeIndex: t }) && se ? (oe(void 0), p?.(void 0)) : (oe({ ...a, sizeIndex: t }), p && p({ ...a, sizeIndex: t })));
+                          (p || R) && (Pe(F, { ...a, sizeIndex: t }) && re ? (ne(void 0), p?.(void 0)) : (ne({ ...a, sizeIndex: t }), p && p({ ...a, sizeIndex: t })));
                         },
                         children: [
                           s ? /* @__PURE__ */ e.jsx(
@@ -1347,14 +1347,14 @@ function xt(ye) {
                                 initial: {
                                   x: d(0),
                                   opacity: 0,
-                                  fill: at(g[t])
+                                  fill: lt(g[t])
                                 },
                                 whileInView: {
                                   x: d(
                                     t === 0 ? 0 : ke(a.size.filter((l, f) => f < t && l))
                                   ) + d(s || 0) / 2,
                                   opacity: s && d(s) / ze(s, A, D, E, j).length > 12 ? 1 : 0,
-                                  fill: at(g[t]),
+                                  fill: lt(g[t]),
                                   transition: { duration: C.duration }
                                 }
                               },
@@ -1367,10 +1367,10 @@ function xt(ye) {
                       },
                       `${a.label}-${z[t] || t}`
                     )),
-                    de ? /* @__PURE__ */ e.jsx(
+                    he ? /* @__PURE__ */ e.jsx(
                       rt,
                       {
-                        value: `${a.label}`.length < ue ? `${a.label}` : `${`${a.label}`.substring(0, ue)}...`,
+                        value: `${a.label}`.length < me ? `${a.label}` : `${`${a.label}`.substring(0, me)}...`,
                         y: 0,
                         x: 0 - w.left,
                         width: 0 + w.left,
@@ -1386,11 +1386,11 @@ function xt(ye) {
                       {
                         className: De(
                           "graph-value graph-value-total text-sm",
-                          ne ? "" : " fill-primary-gray-700 dark:fill-primary-gray-300",
+                          Q ? "" : " fill-primary-gray-700 dark:fill-primary-gray-300",
                           x?.graphObjectValues
                         ),
                         style: {
-                          ...ne ? { fill: ne } : {},
+                          ...Q ? { fill: Q } : {},
                           textAnchor: "start",
                           ...y?.graphObjectValues || {}
                         },
@@ -1400,11 +1400,13 @@ function xt(ye) {
                         variants: {
                           initial: {
                             x: d(0),
-                            opacity: 0
+                            opacity: 0,
+                            ...Q ? { fill: Q } : {}
                           },
                           whileInView: {
                             x: d(ke(a.size.map((s) => s || 0))),
                             opacity: 1,
+                            ...Q ? { fill: Q } : {},
                             transition: { duration: C.duration }
                           }
                         },
@@ -1439,7 +1441,7 @@ function xt(ye) {
                 styles: { axis: y?.yAxis?.axis }
               }
             ),
-            ee ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ee.map((a, s) => /* @__PURE__ */ e.jsx(
+            te ? /* @__PURE__ */ e.jsx(e.Fragment, { children: te.map((a, s) => /* @__PURE__ */ e.jsx(
               ot,
               {
                 text: a.text,
@@ -1447,7 +1449,7 @@ function xt(ye) {
                 x: d(a.value),
                 y1: 0 - w.top,
                 y2: u + w.bottom,
-                textSide: d(a.value) > H * 0.75 || ae ? "left" : "right",
+                textSide: d(a.value) > H * 0.75 || le ? "left" : "right",
                 classNames: a.classNames,
                 styles: a.styles,
                 animate: C,
@@ -1460,13 +1462,13 @@ function xt(ye) {
         ] })
       }
     ),
-    q && N && W && Q ? /* @__PURE__ */ e.jsx(
+    q && N && W && Z ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: q,
         body: N,
         xPos: W,
-        yPos: Q,
+        yPos: Z,
         backgroundStyle: y?.tooltip,
         className: x?.tooltip
       }
@@ -1476,7 +1478,7 @@ function xt(ye) {
       {
         open: F !== void 0,
         onClose: () => {
-          oe(void 0);
+          ne(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
@@ -1497,30 +1499,30 @@ function ft(ye) {
     colors: Y = je.light.categoricalColors.colors,
     sources: V,
     graphDescription: _,
-    barPadding: me = 0.25,
-    showTicks: ue = !0,
-    leftMargin: ge = 100,
-    rightMargin: Z = 40,
+    barPadding: ge = 0.25,
+    showTicks: me = !0,
+    leftMargin: xe = 100,
+    rightMargin: ee = 40,
     truncateBy: G = 999,
-    height: ie,
+    height: ae,
     width: N,
-    footNote: re,
-    colorDomain: de,
+    footNote: oe,
+    colorDomain: he,
     colorLegendTitle: j,
     padding: E,
     backgroundColor: J = !1,
-    topMargin: ee = 25,
+    topMargin: te = 25,
     bottomMargin: v = 10,
     tooltip: p,
     onSeriesMouseOver: B,
-    suffix: ae = "",
-    prefix: le = "",
+    suffix: le = "",
+    prefix: se = "",
     showLabels: K = !0,
-    relativeHeight: te,
-    showValues: se = !0,
+    relativeHeight: ie,
+    showValues: re = !0,
     refValues: R,
-    graphID: xe,
-    maxValue: ne,
+    graphID: de,
+    maxValue: Q,
     onSeriesMouseClick: $,
     graphDownload: y = !1,
     dataDownload: x = !1,
@@ -1535,10 +1537,10 @@ function ft(ye) {
     showColorScale: q = !0,
     ariaLabel: T,
     resetSelectionOnDoubleClick: F = !0,
-    detailsOnClick: oe,
+    detailsOnClick: ne,
     barAxisTitle: W,
     noOfTicks: P = 5,
-    valueColor: Q,
+    valueColor: Z,
     styles: M,
     classNames: H,
     filterNA: u = !0,
@@ -1553,13 +1555,13 @@ function ft(ye) {
       (i) => Se(`${i}`, h.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (i, S) => tt(i, S)
-  ), [fe, Oe] = L(h.autoplay ? 0 : U.length - 1), [he, be] = L(void 0), ve = Me(null), Ne = Me(null);
+  ), [fe, Oe] = L(h.autoplay ? 0 : U.length - 1), [ue, be] = L(void 0), ve = Me(null), Ne = Me(null);
   Ve(() => {
     const i = new ResizeObserver((S) => {
-      t(N || S[0].target.clientWidth || 620), f(ie || S[0].target.clientHeight || 480);
+      t(N || S[0].target.clientWidth || 620), f(ae || S[0].target.clientHeight || 480);
     });
     return ve.current && (f(ve.current.clientHeight || 480), t(ve.current.clientWidth || 620), N || i.observe(ve.current)), () => i.disconnect();
-  }, [N, ie]), Ve(() => {
+  }, [N, ae]), Ve(() => {
     const i = setInterval(
       () => {
         Oe((S) => S < U.length - 1 ? S + 1 : 0);
@@ -1591,7 +1593,7 @@ function ft(ye) {
             ...M?.graphContainer || {},
             ...J && J !== !0 ? { backgroundColor: J } : {}
           },
-          id: xe,
+          id: de,
           ref: Ne,
           "aria-label": T || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${_ ? ` ${_}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
@@ -1655,14 +1657,14 @@ function ft(ye) {
                     Je,
                     {
                       width: N,
-                      colorDomain: de,
+                      colorDomain: he,
                       colors: Y,
                       colorLegendTitle: j,
                       setSelectedColor: be,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: ve, "aria-label": "Graph area", children: (N || s) && (ie || l) ? /* @__PURE__ */ e.jsx(
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: ve, "aria-label": "Graph area", children: (N || s) && (ae || l) ? /* @__PURE__ */ e.jsx(
                     xt,
                     {
                       data: I !== void 0 ? I === "total" ? Ie(
@@ -1706,49 +1708,49 @@ function ft(ye) {
                       width: N || s,
                       height: Math.max(
                         D,
-                        ie || (te ? D ? (N || s) * te > D ? (N || s) * te : D : (N || s) * te : l)
+                        ae || (ie ? D ? (N || s) * ie > D ? (N || s) * ie : D : (N || s) * ie : l)
                       ),
-                      barPadding: me,
-                      showTicks: ue,
-                      leftMargin: ge,
-                      rightMargin: Z,
-                      topMargin: ee,
+                      barPadding: ge,
+                      showTicks: me,
+                      leftMargin: xe,
+                      rightMargin: ee,
+                      topMargin: te,
                       bottomMargin: v,
                       truncateBy: G,
                       showLabels: K,
                       tooltip: p,
                       onSeriesMouseOver: B,
-                      showValues: se,
-                      suffix: ae,
-                      prefix: le,
+                      showValues: re,
+                      suffix: le,
+                      prefix: se,
                       refValues: R,
-                      maxValue: X(ne) ? Math.max(
+                      maxValue: X(Q) ? Math.max(
                         ...n.map(
                           (i) => ke(i.size.filter((S) => !X(S))) || 0
                         )
-                      ) : ne,
+                      ) : Q,
                       onSeriesMouseClick: $,
-                      selectedColor: he,
+                      selectedColor: ue,
                       rtl: C === "he" || C === "ar",
                       labelOrder: z,
                       maxBarThickness: A,
                       minBarThickness: w,
                       resetSelectionOnDoubleClick: F,
-                      detailsOnClick: oe,
+                      detailsOnClick: ne,
                       barAxisTitle: W,
                       noOfTicks: P,
-                      valueColor: Q,
+                      valueColor: Z,
                       classNames: H,
                       styles: M,
                       animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
-                      colorDomain: de,
+                      colorDomain: he,
                       precision: m,
                       customLayers: d,
                       naLabel: c
                     }
                   ) : null })
                 ] }) }),
-                V || re ? /* @__PURE__ */ e.jsx(
+                V || oe ? /* @__PURE__ */ e.jsx(
                   qe,
                   {
                     styles: { footnote: M?.footnote, source: M?.source },
@@ -1757,7 +1759,7 @@ function ft(ye) {
                       source: H?.source
                     },
                     sources: V,
-                    footNote: re,
+                    footNote: oe,
                     width: N
                   }
                 ) : null
@@ -1776,30 +1778,30 @@ function pt(ye) {
     height: Y,
     barColor: V,
     suffix: _,
-    prefix: me,
-    barPadding: ue,
-    showLabels: ge,
-    showValues: Z,
+    prefix: ge,
+    barPadding: me,
+    showLabels: xe,
+    showValues: ee,
     showTicks: G,
-    colorDomain: ie,
+    colorDomain: ae,
     truncateBy: N,
-    rightMargin: re,
-    topMargin: de,
+    rightMargin: oe,
+    topMargin: he,
     bottomMargin: j,
     leftMargin: E,
     tooltip: J,
-    onSeriesMouseOver: ee,
+    onSeriesMouseOver: te,
     refValues: v,
     selectedColor: p,
     maxValue: B,
-    minValue: ae,
-    highlightedDataPoints: le,
+    minValue: le,
+    highlightedDataPoints: se,
     onSeriesMouseClick: K,
-    labelOrder: te,
-    maxBarThickness: se,
+    labelOrder: ie,
+    maxBarThickness: re,
     minBarThickness: R,
-    resetSelectionOnDoubleClick: xe,
-    detailsOnClick: ne,
+    resetSelectionOnDoubleClick: de,
+    detailsOnClick: Q,
     barAxisTitle: $,
     valueColor: y,
     noOfTicks: x,
@@ -1814,17 +1816,17 @@ function pt(ye) {
     once: O.once,
     amount: O.amount
   }), T = {
-    top: de,
+    top: he,
     bottom: j,
     left: $ ? E + 30 : E,
-    right: re
-  }, [F, oe] = L(void 0), [W, P] = L(void 0), [Q, M] = L(void 0), [H, u] = L(void 0), k = g - T.left - T.right, m = Y - T.top - T.bottom, d = Ee().domain([ae, B]).range([m, 0]).nice(), h = n.map((t, l) => ({
+    right: oe
+  }, [F, ne] = L(void 0), [W, P] = L(void 0), [Z, M] = L(void 0), [H, u] = L(void 0), k = g - T.left - T.right, m = Y - T.top - T.bottom, d = Ee().domain([le, B]).range([m, 0]).nice(), h = n.map((t, l) => ({
     ...t,
-    id: te ? `${t.label}` : `${l}`
-  })), c = te || h.map((t) => `${t.id}`), a = Le().domain(c).range([
+    id: ie ? `${t.label}` : `${l}`
+  })), c = ie || h.map((t) => `${t.id}`), a = Le().domain(c).range([
     0,
-    R ? Math.max(k, R * c.length) : se ? Math.min(k, se * c.length) : k
-  ]).paddingInner(ue), s = d.ticks(x);
+    R ? Math.max(k, R * c.length) : re ? Math.min(k, re * c.length) : k
+  ]).paddingInner(me), s = d.ticks(x);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
@@ -1838,22 +1840,22 @@ function pt(ye) {
           /* @__PURE__ */ e.jsx(
             Ye,
             {
-              y1: d(ae < 0 ? 0 : ae),
-              y2: d(ae < 0 ? 0 : ae),
+              y1: d(le < 0 ? 0 : le),
+              y2: d(le < 0 ? 0 : le),
               x1: 0 - E,
               x2: k + T.right,
               label: ze(
-                ae < 0 ? 0 : ae,
+                le < 0 ? 0 : le,
                 b,
                 A,
-                me,
+                ge,
                 _
               ),
               labelPos: {
                 x: 0 - E,
                 dx: 0,
                 dy: B < 0 ? "1em" : -5,
-                y: d(ae < 0 ? 0 : ae)
+                y: d(le < 0 ? 0 : le)
               },
               classNames: {
                 axis: z?.xAxis?.axis,
@@ -1878,7 +1880,7 @@ function pt(ye) {
                 labels: z?.yAxis?.labels
               },
               suffix: _,
-              prefix: me,
+              prefix: ge,
               labelType: "secondary",
               showGridLines: !0,
               labelPos: "vertical",
@@ -1907,25 +1909,25 @@ function pt(ye) {
                   animate: q ? "whileInView" : "initial",
                   variants: {
                     initial: {
-                      opacity: p ? t.color && V[ie.indexOf(t.color)] === p ? 1 : D : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : D : 0.85
+                      opacity: p ? t.color && V[ae.indexOf(t.color)] === p ? 1 : D : se.length !== 0 ? se.indexOf(t.label) !== -1 ? 0.85 : D : 0.85
                     },
                     whileInView: {
-                      opacity: p ? t.color && V[ie.indexOf(t.color)] === p ? 1 : D : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : D : 0.85,
+                      opacity: p ? t.color && V[ae.indexOf(t.color)] === p ? 1 : D : se.length !== 0 ? se.indexOf(t.label) !== -1 ? 0.85 : D : 0.85,
                       transition: { duration: O.duration }
                     }
                   },
                   exit: { opacity: 0, transition: { duration: O.duration } },
                   onMouseEnter: (f) => {
-                    oe(t), u(f.clientY), M(f.clientX), ee?.(t);
+                    ne(t), u(f.clientY), M(f.clientX), te?.(t);
                   },
                   onClick: () => {
-                    (K || ne) && (Pe(W, t) && xe ? (P(void 0), K?.(void 0)) : (P(t), K?.(t)));
+                    (K || Q) && (Pe(W, t) && de ? (P(void 0), K?.(void 0)) : (P(t), K?.(t)));
                   },
                   onMouseMove: (f) => {
-                    oe(t), u(f.clientY), M(f.clientX);
+                    ne(t), u(f.clientY), M(f.clientX);
                   },
                   onMouseLeave: () => {
-                    oe(void 0), M(void 0), u(void 0), ee?.(void 0);
+                    ne(void 0), M(void 0), u(void 0), te?.(void 0);
                   },
                   children: [
                     t.size ? /* @__PURE__ */ e.jsx(
@@ -1939,13 +1941,13 @@ function pt(ye) {
                             height: 0,
                             x: a(`${t.id}`),
                             y: d(0),
-                            fill: n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ie.indexOf(t.color)] : je.gray
+                            fill: n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ae.indexOf(t.color)] : je.gray
                           },
                           whileInView: {
                             height: t.size ? Math.abs(d(t.size) - d(0)) : 0,
                             y: t.size && t.size > 0 ? d(t.size) : d(0),
                             x: a(`${t.id}`),
-                            fill: n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ie.indexOf(t.color)] : je.gray,
+                            fill: n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ae.indexOf(t.color)] : je.gray,
                             transition: { duration: O.duration }
                           }
                         },
@@ -1956,7 +1958,7 @@ function pt(ye) {
                         }
                       }
                     ) : null,
-                    ge ? /* @__PURE__ */ e.jsx(
+                    xe ? /* @__PURE__ */ e.jsx(
                       ct,
                       {
                         value: `${t.label}`.length < N ? `${t.label}` : `${`${t.label}`.substring(0, N)}...`,
@@ -1971,7 +1973,7 @@ function pt(ye) {
                         isInView: q
                       }
                     ) : null,
-                    Z ? /* @__PURE__ */ e.jsx(
+                    ee ? /* @__PURE__ */ e.jsx(
                       pe.text,
                       {
                         style: {
@@ -1989,12 +1991,12 @@ function pt(ye) {
                             x: a(`${t.id}`) + a.bandwidth() / 2,
                             y: d(0),
                             opacity: 0,
-                            fill: y || (n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ie.indexOf(t.color)] : je.gray)
+                            fill: y || (n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ae.indexOf(t.color)] : je.gray)
                           },
                           whileInView: {
                             x: a(`${t.id}`) + a.bandwidth() / 2,
                             y: d(t.size || 0),
-                            fill: y || (n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ie.indexOf(t.color)] : je.gray),
+                            fill: y || (n.filter((f) => f.color).length === 0 ? V[0] : t.color ? V[ae.indexOf(t.color)] : je.gray),
                             opacity: 1,
                             transition: { duration: O.duration }
                           }
@@ -2005,7 +2007,7 @@ function pt(ye) {
                           opacity: 0,
                           transition: { duration: O.duration }
                         },
-                        children: ze(t.size, b, A, me, _)
+                        children: ze(t.size, b, A, ge, _)
                       }
                     ) : null
                   ]
@@ -2033,18 +2035,18 @@ function pt(ye) {
         ] })
       }
     ),
-    F && J && Q && H ? /* @__PURE__ */ e.jsx(
+    F && J && Z && H ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: F,
         body: J,
-        xPos: Q,
+        xPos: Z,
         yPos: H,
         backgroundStyle: C?.tooltip,
         className: z?.tooltip
       }
     ) : null,
-    ne && W !== void 0 ? /* @__PURE__ */ e.jsx(
+    Q && W !== void 0 ? /* @__PURE__ */ e.jsx(
       He,
       {
         open: W !== void 0,
@@ -2055,8 +2057,8 @@ function pt(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof ne == "string" ? { __html: Ge(ne, W) } : void 0,
-            children: typeof ne == "function" ? ne(W) : null
+            dangerouslySetInnerHTML: typeof Q == "string" ? { __html: Ge(Q, W) } : void 0,
+            children: typeof Q == "function" ? Q(W) : null
           }
         )
       }
@@ -2070,30 +2072,30 @@ function yt(ye) {
     colors: Y,
     barPadding: V = 0.25,
     showTicks: _ = !0,
-    leftMargin: me = 20,
-    rightMargin: ue = 20,
-    topMargin: ge = 20,
-    bottomMargin: Z = 25,
+    leftMargin: ge = 20,
+    rightMargin: me = 20,
+    topMargin: xe = 20,
+    bottomMargin: ee = 25,
     truncateBy: G = 999,
-    showLabels: ie = !0,
+    showLabels: ae = !0,
     showValues: N = !0,
-    backgroundColor: re = !1,
-    suffix: de = "",
+    backgroundColor: oe = !1,
+    suffix: he = "",
     prefix: j = "",
     sources: E,
     graphDescription: J,
-    height: ee,
+    height: te,
     width: v,
     footNote: p,
     colorDomain: B,
-    colorLegendTitle: ae,
-    padding: le,
+    colorLegendTitle: le,
+    padding: se,
     relativeHeight: K,
-    tooltip: te,
-    onSeriesMouseOver: se,
+    tooltip: ie,
+    onSeriesMouseOver: re,
     refValues: R,
-    showColorScale: xe = !0,
-    graphID: ne,
+    showColorScale: de = !0,
+    graphID: Q,
     maxValue: $,
     minValue: y,
     highlightedDataPoints: x = [],
@@ -2108,10 +2110,10 @@ function yt(ye) {
     minHeight: q = 0,
     maxBarThickness: T,
     maxNumberOfBars: F,
-    minBarThickness: oe,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: P = !0,
-    detailsOnClick: Q,
+    detailsOnClick: Z,
     barAxisTitle: M,
     noOfTicks: H = 5,
     valueColor: u,
@@ -2124,28 +2126,28 @@ function yt(ye) {
     customLayers: s = [],
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     naLabel: l = "NA"
-  } = ye, [f, Ce] = L(0), [ce, U] = L(0), [fe, Oe] = L(t.autoplay), he = et(
+  } = ye, [f, Ce] = L(0), [ce, U] = L(0), [fe, Oe] = L(t.autoplay), ue = et(
     Ae(n, "date", !0).map(
       (r) => Se(`${r}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (r, we) => tt(r, we)
-  ), [be, ve] = L(t.autoplay ? 0 : he.length - 1), [Ne, o] = L(void 0), i = Me(null), S = Me(null);
+  ), [be, ve] = L(t.autoplay ? 0 : ue.length - 1), [Ne, o] = L(void 0), i = Me(null), S = Me(null);
   Ve(() => {
     const r = new ResizeObserver((we) => {
-      Ce(v || we[0].target.clientWidth || 620), U(ee || we[0].target.clientHeight || 480);
+      Ce(v || we[0].target.clientWidth || 620), U(te || we[0].target.clientHeight || 480);
     });
     return i.current && (U(i.current.clientHeight || 480), Ce(i.current.clientWidth || 620), v || r.observe(i.current)), () => r.disconnect();
-  }, [v, ee]), Ve(() => {
+  }, [v, te]), Ve(() => {
     const r = setInterval(
       () => {
-        ve((we) => we < he.length - 1 ? we + 1 : 0);
+        ve((we) => we < ue.length - 1 ? we + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
     return fe || clearInterval(r), () => clearInterval(r);
-  }, [he, fe, t.speed]);
+  }, [ue, fe, t.speed]);
   const it = Be(
-    he,
+    ue,
     be,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
@@ -2159,22 +2161,22 @@ function yt(ye) {
         "div",
         {
           className: De(
-            `${re ? re === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${O || "en"}`,
+            `${oe ? oe === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${O || "en"}`,
             v ? "w-fit" : "w-full",
             m?.graphContainer
           ),
           style: {
             ...k?.graphContainer || {},
-            ...re && re !== !0 ? { backgroundColor: re } : {}
+            ...oe && oe !== !0 ? { backgroundColor: oe } : {}
           },
-          id: ne,
+          id: Q,
           ref: S,
           "aria-label": W || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${J ? ` ${J}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: re ? le || "1rem" : le || 0 },
+              style: { padding: oe ? se || "1rem" : se || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
                 g || J || z || D ? /* @__PURE__ */ e.jsx(
                   Ue,
@@ -2194,7 +2196,7 @@ function yt(ye) {
                     dataDownload: D ? n.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? n.map((r) => r.data).filter((r) => r !== void 0) : n.filter((r) => r !== void 0) : null
                   }
                 ) : null,
-                t.enabled && he.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && ue.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
@@ -2210,28 +2212,28 @@ function yt(ye) {
                   /* @__PURE__ */ e.jsx(
                     Fe,
                     {
-                      min: he[0],
-                      max: he[he.length - 1],
+                      min: ue[0],
+                      max: ue[ue.length - 1],
                       marks: it,
                       step: null,
-                      defaultValue: he[he.length - 1],
-                      value: he[be],
+                      defaultValue: ue[ue.length - 1],
+                      value: ue[be],
                       onChangeComplete: (r) => {
-                        ve(he.indexOf(r));
+                        ve(ue.indexOf(r));
                       },
                       onChange: (r) => {
-                        ve(he.indexOf(r));
+                        ve(ue.indexOf(r));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
                   )
                 ] }) : null,
                 /* @__PURE__ */ e.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: n.length === 0 ? /* @__PURE__ */ e.jsx(Ke, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                  xe && n.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ e.jsx(
+                  de && n.filter((r) => r.color).length !== 0 ? /* @__PURE__ */ e.jsx(
                     Je,
                     {
                       width: v,
-                      colorLegendTitle: ae,
+                      colorLegendTitle: le,
                       colors: Y || je[A].categoricalColors.colors,
                       colorDomain: B || Ae(n, "color", !0),
                       setSelectedColor: o,
@@ -2244,13 +2246,13 @@ function yt(ye) {
                       className: "flex grow flex-col justify-center w-full leading-0",
                       ref: i,
                       "aria-label": "Graph area",
-                      children: (v || f) && (ee || ce) ? /* @__PURE__ */ e.jsx(
+                      children: (v || f) && (te || ce) ? /* @__PURE__ */ e.jsx(
                         pt,
                         {
                           data: I ? Ie(
-                            lt(n, t.dateFormat || "yyyy").filter(
+                            at(n, t.dateFormat || "yyyy").filter(
                               (r) => t.enabled ? r.date === $e(
-                                new Date(he[be]),
+                                new Date(ue[be]),
                                 t.dateFormat || "yyyy"
                               ) : r
                             ).filter((r) => d ? !X(r.size) : r),
@@ -2258,9 +2260,9 @@ function yt(ye) {
                               (r) => r.size === void 0 ? I === "asc" ? -1 / 0 : 1 / 0 : r.size
                             ],
                             [I]
-                          ).filter((r, we) => F ? we < F : !0) : lt(n, t.dateFormat || "yyyy").filter(
+                          ).filter((r, we) => F ? we < F : !0) : at(n, t.dateFormat || "yyyy").filter(
                             (r) => t.enabled ? r.date === $e(
-                              new Date(he[be]),
+                              new Date(ue[be]),
                               t.dateFormat || "yyyy"
                             ) : r
                           ).filter((r) => d ? !X(r.size) : r).filter((r, we) => F ? we < F : !0),
@@ -2270,22 +2272,22 @@ function yt(ye) {
                           refValues: R,
                           height: Math.max(
                             q,
-                            ee || (K ? q ? (v || f) * K > q ? (v || f) * K : q : (v || f) * K : ce)
+                            te || (K ? q ? (v || f) * K > q ? (v || f) * K : q : (v || f) * K : ce)
                           ),
-                          suffix: de,
+                          suffix: he,
                           prefix: j,
                           barPadding: V,
-                          showLabels: ie,
+                          showLabels: ae,
                           showValues: N,
                           showTicks: _,
                           truncateBy: G,
-                          leftMargin: me,
-                          rightMargin: ue,
+                          leftMargin: ge,
+                          rightMargin: me,
                           selectedColor: Ne,
-                          topMargin: ge,
-                          bottomMargin: Z,
-                          tooltip: te,
-                          onSeriesMouseOver: se,
+                          topMargin: xe,
+                          bottomMargin: ee,
+                          tooltip: ie,
+                          onSeriesMouseOver: re,
                           maxValue: X($) ? Math.max(
                             ...n.filter((r) => !X(r.size)).map((r) => r.size)
                           ) < 0 ? 0 : Math.max(
@@ -2300,9 +2302,9 @@ function yt(ye) {
                           onSeriesMouseClick: C,
                           labelOrder: b,
                           maxBarThickness: T,
-                          minBarThickness: oe,
+                          minBarThickness: ne,
                           resetSelectionOnDoubleClick: P,
-                          detailsOnClick: Q,
+                          detailsOnClick: Z,
                           barAxisTitle: M,
                           noOfTicks: H,
                           valueColor: u,
@@ -2346,30 +2348,30 @@ function bt(ye) {
     height: Y,
     barColors: V,
     suffix: _,
-    prefix: me,
-    barPadding: ue,
-    showLabels: ge,
-    showValues: Z,
+    prefix: ge,
+    barPadding: me,
+    showLabels: xe,
+    showValues: ee,
     showTicks: G,
-    truncateBy: ie,
+    truncateBy: ae,
     leftMargin: N,
-    rightMargin: re,
-    topMargin: de,
+    rightMargin: oe,
+    topMargin: he,
     bottomMargin: j,
     tooltip: E,
     onSeriesMouseOver: J,
-    refValues: ee,
+    refValues: te,
     maxValue: v,
     minValue: p,
     onSeriesMouseClick: B,
-    selectedColor: ae,
-    labelOrder: le,
+    selectedColor: le,
+    labelOrder: se,
     maxBarThickness: K,
-    resetSelectionOnDoubleClick: te,
-    detailsOnClick: se,
+    resetSelectionOnDoubleClick: ie,
+    detailsOnClick: re,
     barAxisTitle: R,
-    valueColor: xe,
-    noOfTicks: ne,
+    valueColor: de,
+    noOfTicks: Q,
     styles: $,
     classNames: y,
     animate: x,
@@ -2381,17 +2383,17 @@ function bt(ye) {
     once: x.once,
     amount: x.amount
   }), b = {
-    top: de,
+    top: he,
     bottom: j,
     left: R ? N + 30 : N,
-    right: re
-  }, [w, q] = L(void 0), [T, F] = L(void 0), [oe, W] = L(void 0), [P, Q] = L(void 0), M = g - b.left - b.right, H = Y - b.top - b.bottom, u = Ee().domain([p, v]).range([H, 0]).nice(), k = n.map((a, s) => ({
+    right: oe
+  }, [w, q] = L(void 0), [T, F] = L(void 0), [ne, W] = L(void 0), [P, Z] = L(void 0), M = g - b.left - b.right, H = Y - b.top - b.bottom, u = Ee().domain([p, v]).range([H, 0]).nice(), k = n.map((a, s) => ({
     ...a,
-    id: le ? `${a.label}` : `${s}`
-  })), m = le || k.map((a) => `${a.id}`), d = Le().domain(m).range([
+    id: se ? `${a.label}` : `${s}`
+  })), m = se || k.map((a) => `${a.id}`), d = Le().domain(m).range([
     0,
     K ? Math.min(M, K * m.length) : M
-  ]).paddingInner(ue), h = Le().domain(n[0].size.map((a, s) => `${s}`)).range([0, d.bandwidth()]).paddingInner(0.1), c = u.ticks(ne);
+  ]).paddingInner(me), h = Le().domain(n[0].size.map((a, s) => `${s}`)).range([0, d.bandwidth()]).paddingInner(0.1), c = u.ticks(Q);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
@@ -2413,7 +2415,7 @@ function bt(ye) {
                 p < 0 ? 0 : p,
                 O,
                 z,
-                me,
+                ge,
                 _
               ),
               labelPos: {
@@ -2445,7 +2447,7 @@ function bt(ye) {
                 labels: y?.yAxis?.labels
               },
               suffix: _,
-              prefix: me,
+              prefix: ge,
               labelType: "secondary",
               showGridLines: !0,
               labelPos: "vertical",
@@ -2488,18 +2490,18 @@ function bt(ye) {
                       pe.g,
                       {
                         className: "undp-viz-g-with-hover",
-                        opacity: ae ? V[t] === ae ? 1 : 0.3 : 0.85,
+                        opacity: le ? V[t] === le ? 1 : 0.3 : 0.85,
                         onMouseEnter: (l) => {
-                          q({ ...a, sizeIndex: t }), Q(l.clientY), W(l.clientX), J?.({ ...a, sizeIndex: t });
+                          q({ ...a, sizeIndex: t }), Z(l.clientY), W(l.clientX), J?.({ ...a, sizeIndex: t });
                         },
                         onMouseMove: (l) => {
-                          q({ ...a, sizeIndex: t }), Q(l.clientY), W(l.clientX);
+                          q({ ...a, sizeIndex: t }), Z(l.clientY), W(l.clientX);
                         },
                         onMouseLeave: () => {
-                          q(void 0), W(void 0), Q(void 0), J?.(void 0);
+                          q(void 0), W(void 0), Z(void 0), J?.(void 0);
                         },
                         onClick: () => {
-                          (B || se) && (Pe(T, { ...a, sizeIndex: t }) && te ? (F(void 0), B?.(void 0)) : (F({ ...a, sizeIndex: t }), B && B({ ...a, sizeIndex: t })));
+                          (B || re) && (Pe(T, { ...a, sizeIndex: t }) && ie ? (F(void 0), B?.(void 0)) : (F({ ...a, sizeIndex: t }), B && B({ ...a, sizeIndex: t })));
                         },
                         children: [
                           /* @__PURE__ */ e.jsx(
@@ -2529,22 +2531,22 @@ function bt(ye) {
                               animate: I ? "whileInView" : "initial"
                             }
                           ),
-                          Z ? /* @__PURE__ */ e.jsx(
+                          ee ? /* @__PURE__ */ e.jsx(
                             pe.text,
                             {
                               x: h(`${t}`) + h.bandwidth() / 2,
                               style: {
-                                fill: xe || V[t],
                                 textAnchor: "middle",
                                 ...$?.graphObjectValues || {}
                               },
                               className: De("graph-value text-sm", y?.graphObjectValues),
                               dy: s ? s >= 0 ? "-5px" : "1em" : "-5px",
                               variants: {
-                                initial: { y: u(0), opacity: 0 },
+                                initial: { y: u(0), opacity: 0, fill: de || V[t] },
                                 whileInView: {
                                   y: u(s || 0),
                                   opacity: 1,
+                                  fill: de || V[t],
                                   transition: { duration: x.duration }
                                 }
                               },
@@ -2554,17 +2556,17 @@ function bt(ye) {
                                 opacity: 0,
                                 transition: { duration: x.duration }
                               },
-                              children: ze(s, O, z, me, _)
+                              children: ze(s, O, z, ge, _)
                             }
                           ) : null
                         ]
                       },
                       `${a.label}-${C[t] || t}`
                     )),
-                    ge ? /* @__PURE__ */ e.jsx(
+                    xe ? /* @__PURE__ */ e.jsx(
                       ct,
                       {
-                        value: `${a.label}`.length < ie ? `${a.label}` : `${`${a.label}`.substring(0, ie)}...`,
+                        value: `${a.label}`.length < ae ? `${a.label}` : `${`${a.label}`.substring(0, ae)}...`,
                         y: u(0) + 5,
                         x: 0,
                         width: d.bandwidth(),
@@ -2581,7 +2583,7 @@ function bt(ye) {
                 a.label
               )
             ),
-            ee ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ee.map((a, s) => /* @__PURE__ */ e.jsx(
+            te ? /* @__PURE__ */ e.jsx(e.Fragment, { children: te.map((a, s) => /* @__PURE__ */ e.jsx(
               nt,
               {
                 text: a.text,
@@ -2601,18 +2603,18 @@ function bt(ye) {
         ] })
       }
     ),
-    w && E && oe && P ? /* @__PURE__ */ e.jsx(
+    w && E && ne && P ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: w,
         body: E,
-        xPos: oe,
+        xPos: ne,
         yPos: P,
         backgroundStyle: $?.tooltip,
         className: y?.tooltip
       }
     ) : null,
-    se && T !== void 0 ? /* @__PURE__ */ e.jsx(
+    re && T !== void 0 ? /* @__PURE__ */ e.jsx(
       He,
       {
         open: T !== void 0,
@@ -2623,8 +2625,8 @@ function bt(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof se == "string" ? { __html: Ge(se, T) } : void 0,
-            children: typeof se == "function" ? se(T) : null
+            dangerouslySetInnerHTML: typeof re == "string" ? { __html: Ge(re, T) } : void 0,
+            children: typeof re == "function" ? re(T) : null
           }
         )
       }
@@ -2638,30 +2640,30 @@ function vt(ye) {
     colors: Y = je.light.categoricalColors.colors,
     sources: V,
     graphDescription: _,
-    barPadding: me = 0.25,
-    showTicks: ue = !0,
-    leftMargin: ge = 20,
-    rightMargin: Z = 20,
+    barPadding: ge = 0.25,
+    showTicks: me = !0,
+    leftMargin: xe = 20,
+    rightMargin: ee = 20,
     topMargin: G = 20,
-    bottomMargin: ie = 25,
+    bottomMargin: ae = 25,
     truncateBy: N = 999,
-    showLabels: re = !0,
-    showValues: de = !0,
+    showLabels: oe = !0,
+    showValues: he = !0,
     backgroundColor: j = !1,
     suffix: E = "",
     prefix: J = "",
-    height: ee,
+    height: te,
     width: v,
     footNote: p,
     colorDomain: B,
-    colorLegendTitle: ae,
-    padding: le,
+    colorLegendTitle: le,
+    padding: se,
     relativeHeight: K,
-    tooltip: te,
-    onSeriesMouseOver: se,
+    tooltip: ie,
+    onSeriesMouseOver: re,
     refValues: R,
-    graphID: xe,
-    maxValue: ne,
+    graphID: de,
+    maxValue: Q,
     minValue: $,
     onSeriesMouseClick: y,
     graphDownload: x = !1,
@@ -2676,10 +2678,10 @@ function vt(ye) {
     detailsOnClick: q,
     barAxisTitle: T,
     noOfTicks: F = 5,
-    valueColor: oe,
+    valueColor: ne,
     styles: W,
     classNames: P,
-    filterNA: Q = !0,
+    filterNA: Z = !0,
     showColorScale: M = !0,
     animate: H = !1,
     precision: u = 2,
@@ -2693,13 +2695,13 @@ function vt(ye) {
       (o) => Se(`${o}`, m.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (o, i) => tt(o, i)
-  ), [U, fe] = L(m.autoplay ? 0 : ce.length - 1), [Oe, he] = L(void 0), be = Me(null), ve = Me(null);
+  ), [U, fe] = L(m.autoplay ? 0 : ce.length - 1), [Oe, ue] = L(void 0), be = Me(null), ve = Me(null);
   Ve(() => {
     const o = new ResizeObserver((i) => {
-      s(v || i[0].target.clientWidth || 620), l(ee || i[0].target.clientHeight || 480);
+      s(v || i[0].target.clientWidth || 620), l(te || i[0].target.clientHeight || 480);
     });
     return be.current && (l(be.current.clientHeight || 480), s(be.current.clientWidth || 620), v || o.observe(be.current)), () => o.disconnect();
-  }, [v, ee]), Ve(() => {
+  }, [v, te]), Ve(() => {
     const o = setInterval(
       () => {
         fe((i) => i < ce.length - 1 ? i + 1 : 0);
@@ -2731,14 +2733,14 @@ function vt(ye) {
             ...W?.graphContainer || {},
             ...j && j !== !0 ? { backgroundColor: j } : {}
           },
-          id: xe,
+          id: de,
           ref: ve,
           "aria-label": b || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${_ ? ` ${_}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: j ? le || "1rem" : le || 0 },
+              style: { padding: j ? se || "1rem" : se || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
                 g || _ || x || C ? /* @__PURE__ */ e.jsx(
                   Ue,
@@ -2797,12 +2799,12 @@ function vt(ye) {
                       width: v,
                       colorDomain: B,
                       colors: Y,
-                      colorLegendTitle: ae,
-                      setSelectedColor: he,
+                      colorLegendTitle: le,
+                      setSelectedColor: ue,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: be, "aria-label": "Graph area", children: (v || a) && (ee || t) ? /* @__PURE__ */ e.jsx(
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: be, "aria-label": "Graph area", children: (v || a) && (te || t) ? /* @__PURE__ */ e.jsx(
                     bt,
                     {
                       data: h !== void 0 ? h === "total" ? Ie(
@@ -2815,7 +2817,7 @@ function vt(ye) {
                             m.dateFormat || "yyyy"
                           ) : o
                         ).filter(
-                          (o) => Q ? !o.size.every((i) => i == null) : o
+                          (o) => Z ? !o.size.every((i) => i == null) : o
                         ),
                         (o) => ke(o.size.filter((i) => !X(i))),
                         [c || "asc"]
@@ -2829,35 +2831,35 @@ function vt(ye) {
                             m.dateFormat || "yyyy"
                           ) : o
                         ).filter(
-                          (o) => Q ? !o.size.every((i) => i == null) : o
+                          (o) => Z ? !o.size.every((i) => i == null) : o
                         ),
                         (o) => X(o.size[h]) ? -1 / 0 : o.size[h],
                         [c || "asc"]
                       ) : Te(
                         n,
                         m.dateFormat || "yyyy"
-                      ).filter((o) => Q ? !o.size.every((i) => i == null) : o),
+                      ).filter((o) => Z ? !o.size.every((i) => i == null) : o),
                       barColors: Y,
                       width: v || a,
                       height: Math.max(
                         A,
-                        ee || (K ? A ? (v || a) * K > A ? (v || a) * K : A : (v || a) * K : t)
+                        te || (K ? A ? (v || a) * K > A ? (v || a) * K : A : (v || a) * K : t)
                       ),
                       suffix: E,
                       prefix: J,
-                      barPadding: me,
-                      showLabels: re,
-                      showValues: de,
-                      showTicks: ue,
+                      barPadding: ge,
+                      showLabels: oe,
+                      showValues: he,
+                      showTicks: me,
                       truncateBy: N,
-                      leftMargin: ge,
-                      rightMargin: Z,
+                      leftMargin: xe,
+                      rightMargin: ee,
                       topMargin: G,
-                      bottomMargin: ie,
-                      tooltip: te,
-                      onSeriesMouseOver: se,
+                      bottomMargin: ae,
+                      tooltip: ie,
+                      onSeriesMouseOver: re,
                       refValues: R,
-                      maxValue: X(ne) ? Math.max(
+                      maxValue: X(Q) ? Math.max(
                         ...n.map(
                           (o) => Math.max(
                             ...o.size.filter(
@@ -2873,7 +2875,7 @@ function vt(ye) {
                             )
                           )
                         )
-                      ) : ne,
+                      ) : Q,
                       minValue: X($) ? Math.min(
                         ...n.map(
                           (o) => Math.min(
@@ -2899,7 +2901,7 @@ function vt(ye) {
                       detailsOnClick: q,
                       barAxisTitle: T,
                       noOfTicks: F,
-                      valueColor: oe,
+                      valueColor: ne,
                       styles: W,
                       classNames: P,
                       animate: H === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : H || { duration: 0, once: !0, amount: 0 },
@@ -2938,30 +2940,30 @@ function wt(ye) {
     height: Y,
     barColors: V,
     barPadding: _,
-    showLabels: me,
-    showTicks: ue,
-    truncateBy: ge,
-    leftMargin: Z,
+    showLabels: ge,
+    showTicks: me,
+    truncateBy: xe,
+    leftMargin: ee,
     topMargin: G,
-    bottomMargin: ie,
+    bottomMargin: ae,
     rightMargin: N,
-    tooltip: re,
-    onSeriesMouseOver: de,
+    tooltip: oe,
+    onSeriesMouseOver: he,
     suffix: j,
     prefix: E,
     showValues: J,
-    refValues: ee,
+    refValues: te,
     maxValue: v,
     onSeriesMouseClick: p,
     selectedColor: B,
-    labelOrder: ae,
-    maxBarThickness: le,
+    labelOrder: le,
+    maxBarThickness: se,
     minBarThickness: K,
-    resetSelectionOnDoubleClick: te,
-    detailsOnClick: se,
+    resetSelectionOnDoubleClick: ie,
+    detailsOnClick: re,
     barAxisTitle: R,
-    valueColor: xe,
-    noOfTicks: ne,
+    valueColor: de,
+    noOfTicks: Q,
     styles: $,
     classNames: y,
     animate: x,
@@ -2974,16 +2976,16 @@ function wt(ye) {
     amount: x.amount
   }), b = {
     top: G,
-    bottom: ie,
-    left: R ? Z + 30 : Z,
+    bottom: ae,
+    left: R ? ee + 30 : ee,
     right: N
-  }, [w, q] = L(void 0), [T, F] = L(void 0), [oe, W] = L(void 0), [P, Q] = L(void 0), M = g - b.left - b.right, H = Y - b.top - b.bottom, u = Ee().domain([0, v]).range([H, 0]).nice(), k = n.map((c, a) => ({
+  }, [w, q] = L(void 0), [T, F] = L(void 0), [ne, W] = L(void 0), [P, Z] = L(void 0), M = g - b.left - b.right, H = Y - b.top - b.bottom, u = Ee().domain([0, v]).range([H, 0]).nice(), k = n.map((c, a) => ({
     ...c,
-    id: ae ? `${c.label}` : `${a}`
-  })), m = ae || k.map((c) => `${c.id}`), d = Le().domain(m).range([
+    id: le ? `${c.label}` : `${a}`
+  })), m = le || k.map((c) => `${c.id}`), d = Le().domain(m).range([
     0,
-    K ? Math.max(M, K * m.length) : le ? Math.min(M, le * m.length) : M
-  ]).paddingInner(_), h = u.ticks(ne);
+    K ? Math.max(M, K * m.length) : se ? Math.min(M, se * m.length) : M
+  ]).paddingInner(_), h = u.ticks(Q);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
@@ -2999,11 +3001,11 @@ function wt(ye) {
             {
               y1: u(0),
               y2: u(0),
-              x1: 0 - Z,
+              x1: 0 - ee,
               x2: M + b.right,
               label: ze(0, O, z, E, j),
               labelPos: {
-                x: 0 - Z,
+                x: 0 - ee,
                 y: u(0),
                 dx: 0,
                 dy: -5
@@ -3015,12 +3017,12 @@ function wt(ye) {
               styles: { axis: $?.xAxis?.axis, label: $?.yAxis?.labels }
             }
           ),
-          ue ? /* @__PURE__ */ e.jsx(
+          me ? /* @__PURE__ */ e.jsx(
             dt,
             {
               values: h.filter((c) => c !== 0),
               y: h.filter((c) => c !== 0).map((c) => u(c)),
-              x1: 0 - Z,
+              x1: 0 - ee,
               x2: M + b.right,
               styles: {
                 gridLines: $?.yAxis?.gridLines,
@@ -3041,7 +3043,7 @@ function wt(ye) {
           /* @__PURE__ */ e.jsx(
             Xe,
             {
-              x: 0 - Z - 15,
+              x: 0 - ee - 15,
               y: H / 2,
               style: $?.yAxis?.title,
               className: y?.yAxis?.title,
@@ -3074,16 +3076,16 @@ function wt(ye) {
                       {
                         opacity: B ? V[s] === B ? 1 : 0.3 : 1,
                         onMouseEnter: (t) => {
-                          q({ ...c, sizeIndex: s }), Q(t.clientY), W(t.clientX), de?.({ ...c, sizeIndex: s });
+                          q({ ...c, sizeIndex: s }), Z(t.clientY), W(t.clientX), he?.({ ...c, sizeIndex: s });
                         },
                         onMouseMove: (t) => {
-                          q({ ...c, sizeIndex: s }), Q(t.clientY), W(t.clientX);
+                          q({ ...c, sizeIndex: s }), Z(t.clientY), W(t.clientX);
                         },
                         onMouseLeave: () => {
-                          q(void 0), W(void 0), Q(void 0), de?.(void 0);
+                          q(void 0), W(void 0), Z(void 0), he?.(void 0);
                         },
                         onClick: () => {
-                          (p || se) && (Pe(T, { ...c, sizeIndex: s }) && te ? (F(void 0), p?.(void 0)) : (F({ ...c, sizeIndex: s }), p && p({ ...c, sizeIndex: s })));
+                          (p || re) && (Pe(T, { ...c, sizeIndex: s }) && ie ? (F(void 0), p?.(void 0)) : (F({ ...c, sizeIndex: s }), p && p({ ...c, sizeIndex: s })));
                         },
                         children: [
                           /* @__PURE__ */ e.jsx(
@@ -3120,7 +3122,6 @@ function wt(ye) {
                             {
                               x: d.bandwidth() / 2,
                               style: {
-                                fill: at(V[s]),
                                 textAnchor: "middle",
                                 ...$?.graphObjectValues || {}
                               },
@@ -3130,7 +3131,7 @@ function wt(ye) {
                                 initial: {
                                   y: u(0),
                                   opacity: 0,
-                                  fill: at(V[s])
+                                  fill: lt(V[s])
                                 },
                                 whileInView: {
                                   y: u(ke(c.size.filter((t, l) => l <= s && t))) + Math.abs(
@@ -3139,7 +3140,7 @@ function wt(ye) {
                                   opacity: a && Math.abs(
                                     u(ke(c.size.filter((t, l) => l <= s && t))) - u(ke(c.size.filter((t, l) => l < s && t)))
                                   ) > 20 ? 1 : 0,
-                                  fill: at(V[s]),
+                                  fill: lt(V[s]),
                                   transition: { duration: x.duration }
                                 }
                               },
@@ -3153,10 +3154,10 @@ function wt(ye) {
                       },
                       `${c.label}-${C[s] || s}`
                     )),
-                    me ? /* @__PURE__ */ e.jsx(
+                    ge ? /* @__PURE__ */ e.jsx(
                       ct,
                       {
-                        value: `${c.label}`.length < ge ? `${c.label}` : `${`${c.label}`.substring(0, ge)}...`,
+                        value: `${c.label}`.length < xe ? `${c.label}` : `${`${c.label}`.substring(0, xe)}...`,
                         y: u(0) + 5,
                         x: 0,
                         width: d.bandwidth(),
@@ -3172,7 +3173,6 @@ function wt(ye) {
                       pe.text,
                       {
                         style: {
-                          ...xe && { fill: xe },
                           textAnchor: "middle",
                           ...$?.graphObjectValues || {}
                         },
@@ -3180,17 +3180,19 @@ function wt(ye) {
                         dy: -10,
                         className: De(
                           "graph-value graph-value-total",
-                          xe ? "text-sm" : "fill-primary-gray-700 dark:fill-primary-gray-300 text-sm",
+                          de ? "text-sm" : "fill-primary-gray-700 dark:fill-primary-gray-300 text-sm",
                           y?.graphObjectValues
                         ),
                         variants: {
                           initial: {
                             y: u(0),
-                            opacity: 0
+                            opacity: 0,
+                            ...de && { fill: de }
                           },
                           whileInView: {
                             y: u(ke(c.size.map((a) => a || 0))),
                             opacity: 1,
+                            ...de && { fill: de },
                             transition: { duration: x.duration }
                           }
                         },
@@ -3214,13 +3216,13 @@ function wt(ye) {
                 c.label
               )
             ),
-            ee ? /* @__PURE__ */ e.jsx(e.Fragment, { children: ee.map((c, a) => /* @__PURE__ */ e.jsx(
+            te ? /* @__PURE__ */ e.jsx(e.Fragment, { children: te.map((c, a) => /* @__PURE__ */ e.jsx(
               nt,
               {
                 text: c.text,
                 color: c.color,
                 y: u(c.value),
-                x1: 0 - Z,
+                x1: 0 - ee,
                 x2: M + b.right,
                 classNames: c.classNames,
                 styles: c.styles,
@@ -3234,18 +3236,18 @@ function wt(ye) {
         ] })
       }
     ),
-    w && re && oe && P ? /* @__PURE__ */ e.jsx(
+    w && oe && ne && P ? /* @__PURE__ */ e.jsx(
       We,
       {
         data: w,
-        body: re,
-        xPos: oe,
+        body: oe,
+        xPos: ne,
         yPos: P,
         backgroundStyle: $?.tooltip,
         className: y?.tooltip
       }
     ) : null,
-    se && T !== void 0 ? /* @__PURE__ */ e.jsx(
+    re && T !== void 0 ? /* @__PURE__ */ e.jsx(
       He,
       {
         open: T !== void 0,
@@ -3256,8 +3258,8 @@ function wt(ye) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof se == "string" ? { __html: Ge(se, T) } : void 0,
-            children: typeof se == "function" ? se(T) : null
+            dangerouslySetInnerHTML: typeof re == "string" ? { __html: Ge(re, T) } : void 0,
+            children: typeof re == "function" ? re(T) : null
           }
         )
       }
@@ -3271,30 +3273,30 @@ function Ct(ye) {
     colors: Y = je.light.categoricalColors.colors,
     sources: V,
     graphDescription: _,
-    barPadding: me = 0.25,
-    showTicks: ue = !0,
-    leftMargin: ge = 20,
-    rightMargin: Z = 20,
+    barPadding: ge = 0.25,
+    showTicks: me = !0,
+    leftMargin: xe = 20,
+    rightMargin: ee = 20,
     topMargin: G = 20,
-    bottomMargin: ie = 25,
+    bottomMargin: ae = 25,
     truncateBy: N = 999,
-    showLabels: re = !0,
-    showValues: de = !0,
+    showLabels: oe = !0,
+    showValues: he = !0,
     backgroundColor: j = !1,
     showColorScale: E = !0,
     suffix: J = "",
-    prefix: ee = "",
+    prefix: te = "",
     height: v,
     width: p,
     footNote: B,
-    colorDomain: ae,
-    colorLegendTitle: le,
+    colorDomain: le,
+    colorLegendTitle: se,
     padding: K,
-    tooltip: te,
-    onSeriesMouseOver: se,
+    tooltip: ie,
+    onSeriesMouseOver: re,
     relativeHeight: R,
-    refValues: xe,
-    graphID: ne,
+    refValues: de,
+    graphID: Q,
     maxValue: $,
     onSeriesMouseClick: y,
     graphDownload: x = !1,
@@ -3309,10 +3311,10 @@ function Ct(ye) {
     minBarThickness: q,
     ariaLabel: T,
     resetSelectionOnDoubleClick: F = !0,
-    detailsOnClick: oe,
+    detailsOnClick: ne,
     barAxisTitle: W,
     noOfTicks: P = 5,
-    valueColor: Q,
+    valueColor: Z,
     styles: M,
     classNames: H,
     filterNA: u = !0,
@@ -3327,7 +3329,7 @@ function Ct(ye) {
       (i) => Se(`${i}`, h.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()
     ),
     (i, S) => tt(i, S)
-  ), [fe, Oe] = L(h.autoplay ? 0 : U.length - 1), [he, be] = L(void 0), ve = Me(null), Ne = Me(null);
+  ), [fe, Oe] = L(h.autoplay ? 0 : U.length - 1), [ue, be] = L(void 0), ve = Me(null), Ne = Me(null);
   Ve(() => {
     const i = new ResizeObserver((S) => {
       t(p || S[0].target.clientWidth || 620), f(v || S[0].target.clientHeight || 480);
@@ -3365,7 +3367,7 @@ function Ct(ye) {
             ...M?.graphContainer || {},
             ...j && j !== !0 ? { backgroundColor: j } : {}
           },
-          id: ne,
+          id: Q,
           ref: Ne,
           "aria-label": T || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${_ ? ` ${_}` : ""}`,
           children: /* @__PURE__ */ e.jsx("div", { style: { padding: j ? K || "1rem" : K || 0 }, children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
@@ -3424,9 +3426,9 @@ function Ct(ye) {
                 Je,
                 {
                   width: p,
-                  colorDomain: ae,
+                  colorDomain: le,
                   colors: Y,
-                  colorLegendTitle: le,
+                  colorLegendTitle: se,
                   setSelectedColor: be,
                   showNAColor: !1
                 }
@@ -3472,39 +3474,39 @@ function Ct(ye) {
                     A,
                     v || (R ? A ? (p || s) * R > A ? (p || s) * R : A : (p || s) * R : l)
                   ),
-                  barPadding: me,
-                  showLabels: re,
-                  showTicks: ue,
+                  barPadding: ge,
+                  showLabels: oe,
+                  showTicks: me,
                   truncateBy: N,
-                  leftMargin: ge,
-                  rightMargin: Z,
+                  leftMargin: xe,
+                  rightMargin: ee,
                   topMargin: G,
-                  bottomMargin: ie,
-                  tooltip: te,
-                  onSeriesMouseOver: se,
-                  showValues: de,
+                  bottomMargin: ae,
+                  tooltip: ie,
+                  onSeriesMouseOver: re,
+                  showValues: he,
                   suffix: J,
-                  prefix: ee,
-                  refValues: xe,
+                  prefix: te,
+                  refValues: de,
                   maxValue: X($) ? Math.max(
                     ...n.map(
                       (i) => ke(i.size.filter((S) => !X(S))) || 0
                     )
                   ) : $,
                   onSeriesMouseClick: y,
-                  selectedColor: he,
+                  selectedColor: ue,
                   labelOrder: O,
                   maxBarThickness: I,
                   minBarThickness: q,
                   resetSelectionOnDoubleClick: F,
-                  detailsOnClick: oe,
+                  detailsOnClick: ne,
                   barAxisTitle: W,
                   noOfTicks: P,
-                  valueColor: Q,
+                  valueColor: Z,
                   styles: M,
                   classNames: H,
                   animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
-                  colorDomain: ae,
+                  colorDomain: le,
                   precision: m,
                   customLayers: d,
                   naLabel: c
@@ -3537,30 +3539,30 @@ function li(ye) {
     colors: Y,
     barPadding: V,
     showTicks: _,
-    leftMargin: me,
-    rightMargin: ue,
-    topMargin: ge,
-    bottomMargin: Z,
+    leftMargin: ge,
+    rightMargin: me,
+    topMargin: xe,
+    bottomMargin: ee,
     truncateBy: G,
-    showLabels: ie,
+    showLabels: ae,
     showValues: N,
-    backgroundColor: re,
-    suffix: de,
+    backgroundColor: oe,
+    suffix: he,
     prefix: j,
     sources: E,
     graphDescription: J,
-    height: ee,
+    height: te,
     width: v,
     footNote: p,
     colorDomain: B,
-    colorLegendTitle: ae,
-    padding: le,
+    colorLegendTitle: le,
+    padding: se,
     relativeHeight: K,
-    tooltip: te,
-    onSeriesMouseOver: se,
+    tooltip: ie,
+    onSeriesMouseOver: re,
     refValues: R,
-    showColorScale: xe,
-    graphID: ne,
+    showColorScale: de,
+    graphID: Q,
     maxValue: $,
     minValue: y,
     highlightedDataPoints: x,
@@ -3575,10 +3577,10 @@ function li(ye) {
     minHeight: q,
     maxBarThickness: T,
     maxNumberOfBars: F,
-    minBarThickness: oe,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: P,
-    detailsOnClick: Q,
+    detailsOnClick: Z,
     barAxisTitle: M,
     noOfTicks: H,
     valueColor: u,
@@ -3601,30 +3603,30 @@ function li(ye) {
       colors: Y,
       barPadding: V,
       showTicks: _,
-      leftMargin: me,
-      rightMargin: ue,
-      topMargin: ge,
-      bottomMargin: Z,
+      leftMargin: ge,
+      rightMargin: me,
+      topMargin: xe,
+      bottomMargin: ee,
       truncateBy: G,
-      showLabels: ie,
+      showLabels: ae,
       showValues: N,
-      backgroundColor: re,
-      suffix: de,
+      backgroundColor: oe,
+      suffix: he,
       prefix: j,
       sources: E,
       graphDescription: J,
-      height: ee,
+      height: te,
       width: v,
       footNote: p,
       colorDomain: B,
-      colorLegendTitle: ae,
-      padding: le,
+      colorLegendTitle: le,
+      padding: se,
       relativeHeight: K,
-      tooltip: te,
-      onSeriesMouseOver: se,
+      tooltip: ie,
+      onSeriesMouseOver: re,
       refValues: R,
-      showColorScale: xe,
-      graphID: ne,
+      showColorScale: de,
+      graphID: Q,
       maxValue: $,
       minValue: y,
       highlightedDataPoints: x,
@@ -3639,11 +3641,11 @@ function li(ye) {
       minHeight: q,
       maxBarThickness: T,
       maxNumberOfBars: F,
-      minBarThickness: oe,
+      minBarThickness: ne,
       ariaLabel: W,
       resetSelectionOnDoubleClick: P,
       styles: m,
-      detailsOnClick: Q,
+      detailsOnClick: Z,
       barAxisTitle: M,
       noOfTicks: H,
       valueColor: u,
@@ -3664,30 +3666,30 @@ function li(ye) {
       colors: Y,
       barPadding: V,
       showTicks: _,
-      leftMargin: me,
-      rightMargin: ue,
-      topMargin: ge,
-      bottomMargin: Z,
+      leftMargin: ge,
+      rightMargin: me,
+      topMargin: xe,
+      bottomMargin: ee,
       truncateBy: G,
-      showLabels: ie,
+      showLabels: ae,
       showValues: N,
-      backgroundColor: re,
-      suffix: de,
+      backgroundColor: oe,
+      suffix: he,
       prefix: j,
       sources: E,
       graphDescription: J,
-      height: ee,
+      height: te,
       width: v,
       footNote: p,
       colorDomain: B,
-      colorLegendTitle: ae,
-      padding: le,
+      colorLegendTitle: le,
+      padding: se,
       relativeHeight: K,
-      tooltip: te,
-      onSeriesMouseOver: se,
+      tooltip: ie,
+      onSeriesMouseOver: re,
       refValues: R,
-      showColorScale: xe,
-      graphID: ne,
+      showColorScale: de,
+      graphID: Q,
       maxValue: $,
       minValue: y,
       highlightedDataPoints: x,
@@ -3702,11 +3704,11 @@ function li(ye) {
       minHeight: q,
       maxBarThickness: T,
       maxNumberOfBars: F,
-      minBarThickness: oe,
+      minBarThickness: ne,
       ariaLabel: W,
       resetSelectionOnDoubleClick: P,
       styles: m,
-      detailsOnClick: Q,
+      detailsOnClick: Z,
       barAxisTitle: M,
       noOfTicks: H,
       valueColor: u,
@@ -3728,30 +3730,30 @@ function si(ye) {
     colors: Y,
     sources: V,
     graphDescription: _,
-    barPadding: me,
-    showTicks: ue,
-    truncateBy: ge,
-    height: Z,
+    barPadding: ge,
+    showTicks: me,
+    truncateBy: xe,
+    height: ee,
     width: G,
-    footNote: ie,
+    footNote: ae,
     colorDomain: N,
-    colorLegendTitle: re,
-    suffix: de,
+    colorLegendTitle: oe,
+    suffix: he,
     prefix: j,
     showValues: E,
     padding: J,
-    backgroundColor: ee,
+    backgroundColor: te,
     leftMargin: v,
     rightMargin: p,
     topMargin: B,
-    bottomMargin: ae,
-    showLabels: le,
+    bottomMargin: le,
+    showLabels: se,
     relativeHeight: K,
-    tooltip: te,
-    onSeriesMouseOver: se,
+    tooltip: ie,
+    onSeriesMouseOver: re,
     refValues: R,
-    graphID: xe,
-    maxValue: ne,
+    graphID: de,
+    maxValue: Q,
     minValue: $,
     onSeriesMouseClick: y,
     graphDownload: x,
@@ -3766,10 +3768,10 @@ function si(ye) {
     ariaLabel: q,
     resetSelectionOnDoubleClick: T,
     detailsOnClick: F,
-    barAxisTitle: oe,
+    barAxisTitle: ne,
     noOfTicks: W,
     valueColor: P,
-    orientation: Q = "vertical",
+    orientation: Z = "vertical",
     styles: M,
     classNames: H,
     filterNA: u,
@@ -3780,7 +3782,7 @@ function si(ye) {
     timeline: c,
     naLabel: a
   } = ye;
-  return Q === "vertical" ? /* @__PURE__ */ e.jsx(
+  return Z === "vertical" ? /* @__PURE__ */ e.jsx(
     vt,
     {
       data: n,
@@ -3788,32 +3790,32 @@ function si(ye) {
       colors: Y,
       sources: V,
       graphDescription: _,
-      barPadding: me,
-      showTicks: ue,
-      truncateBy: ge,
-      height: Z,
+      barPadding: ge,
+      showTicks: me,
+      truncateBy: xe,
+      height: ee,
       width: G,
-      footNote: ie,
+      footNote: ae,
       colorDomain: N,
-      colorLegendTitle: re,
-      suffix: de,
+      colorLegendTitle: oe,
+      suffix: he,
       prefix: j,
       showValues: E,
       padding: J,
-      backgroundColor: ee,
+      backgroundColor: te,
       leftMargin: v,
       rightMargin: p,
       sortParameter: I,
       sortData: b,
       topMargin: B,
-      bottomMargin: ae,
-      showLabels: le,
+      bottomMargin: le,
+      showLabels: se,
       relativeHeight: K,
-      tooltip: te,
-      onSeriesMouseOver: se,
+      tooltip: ie,
+      onSeriesMouseOver: re,
       refValues: R,
-      graphID: xe,
-      maxValue: ne,
+      graphID: de,
+      maxValue: Q,
       minValue: $,
       onSeriesMouseClick: y,
       graphDownload: x,
@@ -3827,7 +3829,7 @@ function si(ye) {
       resetSelectionOnDoubleClick: T,
       styles: M,
       detailsOnClick: F,
-      barAxisTitle: oe,
+      barAxisTitle: ne,
       noOfTicks: W,
       valueColor: P,
       classNames: H,
@@ -3849,30 +3851,30 @@ function si(ye) {
       sortData: b,
       sources: V,
       graphDescription: _,
-      barPadding: me,
-      showTicks: ue,
-      truncateBy: ge,
-      height: Z,
+      barPadding: ge,
+      showTicks: me,
+      truncateBy: xe,
+      height: ee,
       width: G,
-      footNote: ie,
+      footNote: ae,
       colorDomain: N,
-      colorLegendTitle: re,
-      suffix: de,
+      colorLegendTitle: oe,
+      suffix: he,
       prefix: j,
       showValues: E,
       padding: J,
-      backgroundColor: ee,
+      backgroundColor: te,
       leftMargin: v,
       rightMargin: p,
       topMargin: B,
-      bottomMargin: ae,
-      showLabels: le,
+      bottomMargin: le,
+      showLabels: se,
       relativeHeight: K,
-      tooltip: te,
-      onSeriesMouseOver: se,
+      tooltip: ie,
+      onSeriesMouseOver: re,
       refValues: R,
-      graphID: xe,
-      maxValue: ne,
+      graphID: de,
+      maxValue: Q,
       minValue: $,
       onSeriesMouseClick: y,
       graphDownload: x,
@@ -3886,7 +3888,7 @@ function si(ye) {
       resetSelectionOnDoubleClick: T,
       styles: M,
       detailsOnClick: F,
-      barAxisTitle: oe,
+      barAxisTitle: ne,
       noOfTicks: W,
       valueColor: P,
       classNames: H,
@@ -3907,30 +3909,30 @@ function ri(ye) {
     colors: Y,
     sources: V,
     graphDescription: _,
-    barPadding: me,
-    showTicks: ue,
-    leftMargin: ge,
-    rightMargin: Z,
+    barPadding: ge,
+    showTicks: me,
+    leftMargin: xe,
+    rightMargin: ee,
     topMargin: G,
-    bottomMargin: ie,
+    bottomMargin: ae,
     truncateBy: N,
-    showLabels: re,
-    showValues: de,
+    showLabels: oe,
+    showValues: he,
     backgroundColor: j,
     suffix: E,
     prefix: J,
-    height: ee,
+    height: te,
     width: v,
     footNote: p,
     colorDomain: B,
-    colorLegendTitle: ae,
-    padding: le,
+    colorLegendTitle: le,
+    padding: se,
     tooltip: K,
-    onSeriesMouseOver: te,
-    relativeHeight: se,
+    onSeriesMouseOver: ie,
+    relativeHeight: re,
     refValues: R,
-    graphID: xe,
-    maxValue: ne,
+    graphID: de,
+    maxValue: Q,
     onSeriesMouseClick: $,
     graphDownload: y,
     dataDownload: x,
@@ -3945,10 +3947,10 @@ function ri(ye) {
     minBarThickness: q,
     ariaLabel: T,
     resetSelectionOnDoubleClick: F,
-    detailsOnClick: oe,
+    detailsOnClick: ne,
     barAxisTitle: W,
     noOfTicks: P,
-    valueColor: Q,
+    valueColor: Z,
     orientation: M = "vertical",
     styles: H,
     classNames: u,
@@ -3968,30 +3970,30 @@ function ri(ye) {
       colors: Y,
       sources: V,
       graphDescription: _,
-      barPadding: me,
-      showTicks: ue,
-      leftMargin: ge,
-      rightMargin: Z,
+      barPadding: ge,
+      showTicks: me,
+      leftMargin: xe,
+      rightMargin: ee,
       topMargin: G,
-      bottomMargin: ie,
+      bottomMargin: ae,
       truncateBy: N,
-      showLabels: re,
-      showValues: de,
+      showLabels: oe,
+      showValues: he,
       backgroundColor: j,
       suffix: E,
       prefix: J,
-      height: ee,
+      height: te,
       width: v,
       footNote: p,
       colorDomain: B,
-      colorLegendTitle: ae,
-      padding: le,
+      colorLegendTitle: le,
+      padding: se,
       tooltip: K,
-      onSeriesMouseOver: te,
-      relativeHeight: se,
+      onSeriesMouseOver: ie,
+      relativeHeight: re,
       refValues: R,
-      graphID: xe,
-      maxValue: ne,
+      graphID: de,
+      maxValue: Q,
       onSeriesMouseClick: $,
       graphDownload: y,
       dataDownload: x,
@@ -4007,10 +4009,10 @@ function ri(ye) {
       ariaLabel: T,
       resetSelectionOnDoubleClick: F,
       styles: H,
-      detailsOnClick: oe,
+      detailsOnClick: ne,
       barAxisTitle: W,
       noOfTicks: P,
-      valueColor: Q,
+      valueColor: Z,
       classNames: u,
       filterNA: k,
       animate: m,
@@ -4028,30 +4030,30 @@ function ri(ye) {
       colors: Y,
       sources: V,
       graphDescription: _,
-      barPadding: me,
-      showTicks: ue,
-      leftMargin: ge,
-      rightMargin: Z,
+      barPadding: ge,
+      showTicks: me,
+      leftMargin: xe,
+      rightMargin: ee,
       topMargin: G,
-      bottomMargin: ie,
+      bottomMargin: ae,
       truncateBy: N,
-      showLabels: re,
-      showValues: de,
+      showLabels: oe,
+      showValues: he,
       backgroundColor: j,
       suffix: E,
       prefix: J,
-      height: ee,
+      height: te,
       width: v,
       footNote: p,
       colorDomain: B,
-      colorLegendTitle: ae,
-      padding: le,
+      colorLegendTitle: le,
+      padding: se,
       tooltip: K,
-      onSeriesMouseOver: te,
-      relativeHeight: se,
+      onSeriesMouseOver: ie,
+      relativeHeight: re,
       refValues: R,
-      graphID: xe,
-      maxValue: ne,
+      graphID: de,
+      maxValue: Q,
       onSeriesMouseClick: $,
       graphDownload: y,
       dataDownload: x,
@@ -4067,10 +4069,10 @@ function ri(ye) {
       ariaLabel: T,
       resetSelectionOnDoubleClick: F,
       styles: H,
-      detailsOnClick: oe,
+      detailsOnClick: ne,
       barAxisTitle: W,
       noOfTicks: P,
-      valueColor: Q,
+      valueColor: Z,
       classNames: u,
       filterNA: k,
       animate: m,