@undp/data-viz 1.4.2 → 1.4.4

package/dist/BarGraph.js

@@ -1,21 +1,21 @@
 import { j as e, m as Ne } from "./index-CHPV5EwG-BPSP-7Jg.js";
 import { u as Te } from "./index-CaAIPGZo.js";
-import { useRef as Me, useState as S, useEffect as ze } from "react";
-import { s as Ae } from "./index-DxagiOHo.js";
-import { p as Se, f as $e } from "./parse-DlCRUFh_.js";
+import { useRef as Me, useState as L, useEffect as ze } from "react";
+import { s as lt } from "./index-DxagiOHo.js";
+import { p as Se, f as De } from "./parse-DlCRUFh_.js";
 import { s as Be, g as Fe, x as He } from "./getSliderMarks-C0jptXeP.js";
 import { i as Pe } from "./index-27yTRcko.js";
 import { X as We } from "./Modal-DVVwpKhP.js";
-import { n as De } from "./numberFormattingFunction-14YCbkN2.js";
+import { n as $e } from "./numberFormattingFunction-14YCbkN2.js";
 import { T as Ge } from "./Tooltip-DyM5snqx.js";
 import { c as q } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { Colors as je } from "./Colors.js";
 import { s as Xe } from "./string2HTML-CWHGfz_d.js";
-import { X as st } from "./XTicksAndGridLines-Bn9u5gOM.js";
-import { Y as rt } from "./YAxesLabels-CPGZjmZJ.js";
+import { X as rt } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { Y as ot } from "./YAxesLabels-CPGZjmZJ.js";
 import { A as Ye } from "./AxisTitle-BmHLMRJZ.js";
 import { A as _e } from "./Axis-Ddg-seDi.js";
-import { a as ot, R as nt } from "./ReferenceLine-CfAW3vKJ.js";
+import { a as nt, R as ct } from "./ReferenceLine-CfAW3vKJ.js";
 import { u as Ee } from "./use-in-view-yS6jzJAp.js";
 import { a as Re } from "./linear-DUdu7l2G.js";
 import { b as Ie } from "./band-BEjh2CHI.js";
@@ -26,68 +26,69 @@ import { GraphHeader as Je } from "./GraphHeader.js";
 import { ColorLegendWithMouseOver as Ke } from "./ColorLegendWithMouseOver.js";
 import { E as Qe } from "./EmptyState-DdTp-Mdn.js";
 import { P as Ze, f as et } from "./index-BmCqpO1B.js";
-import { c as Le, d as Ve } from "./ensureCompleteData-BBDZbDCE.js";
+import { c as Le, d as Ae } from "./ensureCompleteData-BBDZbDCE.js";
 import { c as tt } from "./init-BhZylTFx.js";
 import { s as ke } from "./index-D7ltPi18.js";
-import { g as lt } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
-import { X as ct } from "./XAxesLabels-CaV2q-6H.js";
-import { Y as dt } from "./YTicksAndGridLines-B6ah7CRf.js";
-function ht(fe) {
+import { o as st } from "./index-BLizQDlg.js";
+import { g as at } from "./getTextColorBasedOnBgColor-B6Nk2WBf.js";
+import { X as dt } from "./XAxesLabels-CaV2q-6H.js";
+import { Y as ht } from "./YTicksAndGridLines-B6ah7CRf.js";
+function ut(fe) {
   const {
     data: o,
     barColor: g,
     suffix: G,
-    prefix: I,
+    prefix: A,
     barPadding: X,
     showValues: me,
     showTicks: ue,
     leftMargin: ge,
-    truncateBy: Q,
+    truncateBy: K,
     width: Y,
     height: ie,
     colorDomain: D,
-    rightMargin: ne,
+    rightMargin: oe,
     topMargin: he,
     bottomMargin: j,
     showLabels: _,
     tooltip: U,
-    onSeriesMouseOver: Z,
+    onSeriesMouseOver: Q,
     refValues: C,
     selectedColor: p,
     highlightedDataPoints: F,
     maxValue: ae,
     minValue: le,
     onSeriesMouseClick: J,
-    labelOrder: ee,
-    rtl: re,
+    labelOrder: Z,
+    rtl: se,
     maxBarThickness: E,
     minBarThickness: xe,
     resetSelectionOnDoubleClick: de,
-    detailsOnClick: z,
+    detailsOnClick: $,
     barAxisTitle: y,
     valueColor: x,
     noOfTicks: w,
-    styles: T,
-    classNames: N,
-    animate: $,
-    dimmedOpacity: L,
-    precision: B,
+    styles: z,
+    classNames: M,
+    animate: O,
+    dimmedOpacity: I,
+    precision: S,
     customLayers: b,
     naLabel: v
-  } = fe, R = Me(null), V = Ee(R, {
-    once: $.once,
-    amount: $.amount
-  }), [A, ce] = S(void 0), [W, H] = S(void 0), [se, M] = S(void 0), [P, m] = S(void 0), k = {
+  } = fe, R = Me(null), T = Ee(R, {
+    once: O.once,
+    amount: O.amount
+  }), [V, ne] = L(void 0), [W, H] = L(void 0), [ee, N] = L(void 0), [P, m] = L(void 0), k = {
     top: y ? he + 25 : he,
     bottom: j,
     left: ge,
-    right: ne
-  }, f = Y - k.left - k.right, d = ie - k.top - k.bottom, u = o.map((l, h) => ({
-    ...l,
-    id: ee ? `${l.label}` : `${h}`
-  })), n = Re().domain([le, ae]).range([0, f]).nice(), a = ee || u.map((l) => `${l.id}`), s = Ie().domain(a).range([
+    right: oe
+  }, f = Y - k.left - k.right, d = ie - k.top - k.bottom, u = o.map((a, h) => ({
+    ...a,
+    id: Z ? `${a.label}` : `${h}`
+  })), n = Re().domain([le, ae]).range([0, f]).nice(), s = Z || u.map((a) => `${a.id}`), l = Ie().domain(s).range([
     0,
-    xe ? Math.max(d, xe * a.length) : E ? Math.min(d, E * a.length) : d
+    xe ? Math.max(d, xe * s.length) : E ? Math.min(d, E * s.length) : d
   ]).paddingInner(X), t = n.ticks(w);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
@@ -100,25 +101,25 @@ function ht(fe) {
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${k.left},${k.top})`, children: [
           ue ? /* @__PURE__ */ e.jsx(
-            st,
+            rt,
             {
-              values: t.filter((l) => l !== 0),
-              x: t.filter((l) => l !== 0).map((l) => n(l)),
+              values: t.filter((a) => a !== 0),
+              x: t.filter((a) => a !== 0).map((a) => n(a)),
               y1: 0 - he,
               y2: d + k.bottom,
               styles: {
-                gridLines: T?.xAxis?.gridLines,
-                labels: T?.xAxis?.labels
+                gridLines: z?.xAxis?.gridLines,
+                labels: z?.xAxis?.labels
               },
               classNames: {
-                gridLines: N?.xAxis?.gridLines,
-                labels: N?.xAxis?.labels
+                gridLines: M?.xAxis?.gridLines,
+                labels: M?.xAxis?.labels
               },
               suffix: G,
-              prefix: I,
+              prefix: A,
               labelType: "secondary",
               showGridLines: !0,
-              precision: B
+              precision: S
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
@@ -126,127 +127,127 @@ function ht(fe) {
             {
               x: f / 2,
               y: 0 - k.top + 15,
-              style: T?.xAxis?.title,
-              className: N?.xAxis?.title,
+              style: z?.xAxis?.title,
+              className: M?.xAxis?.title,
               text: y
             }
           ),
-          b.filter((l) => l.position === "before").map((l) => l.layer),
+          b.filter((a) => a.position === "before").map((a) => a.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             u.map(
-              (l) => q(s(l.id)) ? null : /* @__PURE__ */ e.jsxs(
+              (a) => q(l(a.id)) ? null : /* @__PURE__ */ e.jsxs(
                 pe.g,
                 {
                   className: "undp-viz-g-with-hover",
                   variants: {
                     initial: {
-                      opacity: p ? l.color && g[D.indexOf(l.color)] === p ? 1 : L : F.length !== 0 ? F.indexOf(l.label) !== -1 ? 0.85 : L : 0.85
+                      opacity: p ? a.color && g[D.indexOf(a.color)] === p ? 1 : I : F.length !== 0 ? F.indexOf(a.label) !== -1 ? 0.85 : I : 0.85
                     },
                     whileInView: {
-                      opacity: p ? l.color && g[D.indexOf(l.color)] === p ? 1 : L : F.length !== 0 ? F.indexOf(l.label) !== -1 ? 0.85 : L : 0.85,
-                      transition: { duration: $.duration }
+                      opacity: p ? a.color && g[D.indexOf(a.color)] === p ? 1 : I : F.length !== 0 ? F.indexOf(a.label) !== -1 ? 0.85 : I : 0.85,
+                      transition: { duration: O.duration }
                     }
                   },
                   initial: "initial",
-                  animate: V ? "whileInView" : "initial",
-                  exit: { opacity: 0, transition: { duration: $.duration } },
+                  animate: T ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: O.duration } },
                   onMouseEnter: (h) => {
-                    ce(l), m(h.clientY), M(h.clientX), Z?.(l);
+                    ne(a), m(h.clientY), N(h.clientX), Q?.(a);
                   },
                   onClick: () => {
-                    (J || z) && (Pe(W, l) && de ? (H(void 0), J?.(void 0)) : (H(l), J?.(l)));
+                    (J || $) && (Pe(W, a) && de ? (H(void 0), J?.(void 0)) : (H(a), J?.(a)));
                   },
                   onMouseMove: (h) => {
-                    ce(l), m(h.clientY), M(h.clientX);
+                    ne(a), m(h.clientY), N(h.clientX);
                   },
                   onMouseLeave: () => {
-                    ce(void 0), M(void 0), m(void 0), Z?.(void 0);
+                    ne(void 0), N(void 0), m(void 0), Q?.(void 0);
                   },
                   children: [
-                    l.size ? /* @__PURE__ */ e.jsx(
+                    a.size ? /* @__PURE__ */ e.jsx(
                       pe.rect,
                       {
                         variants: {
                           initial: {
                             width: 0,
                             x: n(0),
-                            y: s(`${l.id}`),
-                            fill: o.filter((h) => h.color).length === 0 ? g[0] : l.color ? g[D.indexOf(l.color)] : je.gray
+                            y: l(`${a.id}`),
+                            fill: o.filter((h) => h.color).length === 0 ? g[0] : a.color ? g[D.indexOf(a.color)] : je.gray
                           },
                           whileInView: {
-                            width: l.size >= 0 ? n(l.size) - n(0) : n(0) - n(l.size),
-                            x: l.size >= 0 ? n(0) : n(l.size),
-                            y: s(`${l.id}`),
-                            fill: o.filter((h) => h.color).length === 0 ? g[0] : l.color ? g[D.indexOf(l.color)] : je.gray,
-                            transition: { duration: $.duration }
+                            width: a.size >= 0 ? n(a.size) - n(0) : n(0) - n(a.size),
+                            x: a.size >= 0 ? n(0) : n(a.size),
+                            y: l(`${a.id}`),
+                            fill: o.filter((h) => h.color).length === 0 ? g[0] : a.color ? g[D.indexOf(a.color)] : je.gray,
+                            transition: { duration: O.duration }
                           }
                         },
                         initial: "initial",
-                        animate: V ? "whileInView" : "initial",
+                        animate: T ? "whileInView" : "initial",
                         exit: {
                           width: 0,
                           x: n(0),
-                          transition: { duration: $.duration }
+                          transition: { duration: O.duration }
                         },
-                        height: s.bandwidth()
+                        height: l.bandwidth()
                       }
                     ) : null,
                     _ ? /* @__PURE__ */ e.jsx(
-                      rt,
+                      ot,
                       {
-                        value: `${l.label}`.length < Q ? `${l.label}` : `${`${l.label}`.substring(0, Q)}...`,
-                        y: s(l.id) || 0,
-                        x: (l.size || 0) < 0 ? n(0) : 0 - k.left,
-                        width: (l.size || 0) < 0 ? Y - n(0) : n(0) + k.left,
-                        height: s.bandwidth(),
-                        alignment: l.size && l.size < 0 ? "left" : "right",
-                        style: T?.yAxis?.labels,
-                        className: N?.yAxis?.labels,
-                        animate: $,
-                        isInView: V
+                        value: `${a.label}`.length < K ? `${a.label}` : `${`${a.label}`.substring(0, K)}...`,
+                        y: l(a.id) || 0,
+                        x: (a.size || 0) < 0 ? n(0) : 0 - k.left,
+                        width: (a.size || 0) < 0 ? Y - n(0) : n(0) + k.left,
+                        height: l.bandwidth(),
+                        alignment: a.size && a.size < 0 ? "left" : "right",
+                        style: z?.yAxis?.labels,
+                        className: M?.yAxis?.labels,
+                        animate: O,
+                        isInView: T
                       }
                     ) : null,
                     me ? /* @__PURE__ */ e.jsx(
                       pe.text,
                       {
                         style: {
-                          textAnchor: l.size && l.size < 0 ? "end" : "start",
-                          ...T?.graphObjectValues || {}
+                          textAnchor: a.size && a.size < 0 ? "end" : "start",
+                          ...z?.graphObjectValues || {}
                         },
                         className: Ne(
                           "graph-value text-sm",
                           !x && g.length > 1 ? " fill-primary-gray-600 dark:fill-primary-gray-300" : "",
-                          N?.graphObjectValues
+                          M?.graphObjectValues
                         ),
-                        dx: l.size && l.size < 0 ? -5 : 5,
+                        dx: a.size && a.size < 0 ? -5 : 5,
                         dy: "0.33em",
                         variants: {
                           initial: {
                             x: n(0),
-                            y: s(`${l.id}`) + s.bandwidth() / 2,
+                            y: l(`${a.id}`) + l.bandwidth() / 2,
                             opacity: 0,
-                            fill: x || (o.filter((h) => h.color).length === 0 ? g[0] : l.color ? g[D.indexOf(l.color)] : je.gray)
+                            fill: x || (o.filter((h) => h.color).length === 0 ? g[0] : a.color ? g[D.indexOf(a.color)] : je.gray)
                           },
                           whileInView: {
-                            x: l.size ? n(l.size) : n(0),
+                            x: a.size ? n(a.size) : n(0),
                             opacity: 1,
-                            y: s(`${l.id}`) + s.bandwidth() / 2,
-                            fill: x || (o.filter((h) => h.color).length === 0 ? g[0] : l.color ? g[D.indexOf(l.color)] : je.gray),
-                            transition: { duration: $.duration }
+                            y: l(`${a.id}`) + l.bandwidth() / 2,
+                            fill: x || (o.filter((h) => h.color).length === 0 ? g[0] : a.color ? g[D.indexOf(a.color)] : je.gray),
+                            transition: { duration: O.duration }
                           }
                         },
                         initial: "initial",
-                        animate: V ? "whileInView" : "initial",
+                        animate: T ? "whileInView" : "initial",
                         exit: {
                           opacity: 0,
-                          transition: { duration: $.duration }
+                          transition: { duration: O.duration }
                         },
-                        children: De(l.size, v, B, I, G)
+                        children: $e(a.size, v, S, A, G)
                       }
                     ) : null
                   ]
                 },
-                l.label
+                a.label
               )
             ),
             /* @__PURE__ */ e.jsx(
@@ -256,43 +257,43 @@ function ht(fe) {
                 x2: n(le < 0 ? 0 : le),
                 y1: -2.5,
                 y2: d + k.bottom,
-                classNames: { axis: N?.yAxis?.axis },
-                styles: { axis: T?.yAxis?.axis }
+                classNames: { axis: M?.yAxis?.axis },
+                styles: { axis: z?.yAxis?.axis }
               }
             ),
-            C ? /* @__PURE__ */ e.jsx(e.Fragment, { children: C.map((l, h) => /* @__PURE__ */ e.jsx(
-              ot,
+            C ? /* @__PURE__ */ e.jsx(e.Fragment, { children: C.map((a, h) => /* @__PURE__ */ e.jsx(
+              nt,
               {
-                text: l.text,
-                color: l.color,
-                x: n(l.value),
+                text: a.text,
+                color: a.color,
+                x: n(a.value),
                 y1: 0 - k.top,
                 y2: d + k.bottom,
-                textSide: n(l.value) > f * 0.75 || re ? "left" : "right",
-                classNames: l.classNames,
-                styles: l.styles,
-                animate: $,
-                isInView: V
+                textSide: n(a.value) > f * 0.75 || se ? "left" : "right",
+                classNames: a.classNames,
+                styles: a.styles,
+                animate: O,
+                isInView: T
               },
               h
             )) }) : null
           ] }),
-          b.filter((l) => l.position === "after").map((l) => l.layer)
+          b.filter((a) => a.position === "after").map((a) => a.layer)
         ] })
       }
     ),
-    A && U && se && P ? /* @__PURE__ */ e.jsx(
+    V && U && ee && P ? /* @__PURE__ */ e.jsx(
       Ge,
       {
-        data: A,
+        data: V,
         body: U,
-        xPos: se,
+        xPos: ee,
         yPos: P,
-        backgroundStyle: T?.tooltip,
-        className: N?.tooltip
+        backgroundStyle: z?.tooltip,
+        className: M?.tooltip
       }
     ) : null,
-    z && W !== void 0 ? /* @__PURE__ */ e.jsx(
+    $ && W !== void 0 ? /* @__PURE__ */ e.jsx(
       We,
       {
         open: W !== void 0,
@@ -303,64 +304,64 @@ function ht(fe) {
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof z == "string" ? { __html: Xe(z, W) } : void 0,
-            children: typeof z == "function" ? z(W) : null
+            dangerouslySetInnerHTML: typeof $ == "string" ? { __html: Xe($, W) } : void 0,
+            children: typeof $ == "function" ? $(W) : null
           }
         )
       }
     ) : null
   ] });
 }
-function ut(fe) {
+function mt(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G,
-    suffix: I = "",
+    suffix: A = "",
     sources: X,
     prefix: me = "",
     graphDescription: ue,
     barPadding: ge = 0.25,
-    showValues: Q = !0,
+    showValues: K = !0,
     showTicks: Y = !0,
     leftMargin: ie = 100,
     rightMargin: D = 40,
-    truncateBy: ne = 999,
+    truncateBy: oe = 999,
     height: he,
     width: j,
     footNote: _,
     colorDomain: U,
-    colorLegendTitle: Z,
+    colorLegendTitle: Q,
     highlightedDataPoints: C = [],
     padding: p,
     backgroundColor: F = !1,
     topMargin: ae = 25,
     bottomMargin: le = 10,
     showLabels: J = !0,
-    relativeHeight: ee,
-    tooltip: re,
+    relativeHeight: Z,
+    tooltip: se,
     onSeriesMouseOver: E,
     refValues: xe,
     showColorScale: de = !0,
-    graphID: z,
+    graphID: $,
     maxValue: y,
     minValue: x,
     onSeriesMouseClick: w,
-    graphDownload: T = !1,
-    dataDownload: N = !1,
-    sortData: $,
-    labelOrder: L,
-    language: B = "en",
+    graphDownload: z = !1,
+    dataDownload: M = !1,
+    sortData: O,
+    labelOrder: I,
+    language: S = "en",
     showNAColor: b = !0,
     minHeight: v = 0,
     theme: R = "light",
-    maxBarThickness: V,
-    maxNumberOfBars: A,
-    minBarThickness: ce,
+    maxBarThickness: T,
+    maxNumberOfBars: V,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: H = !0,
-    detailsOnClick: se,
-    barAxisTitle: M,
+    detailsOnClick: ee,
+    barAxisTitle: N,
     noOfTicks: P = 5,
     valueColor: m,
     styles: k,
@@ -368,34 +369,34 @@ function ut(fe) {
     filterNA: d = !0,
     animate: u = !1,
     dimmedOpacity: n = 0.3,
-    precision: a = 2,
-    customLayers: s = [],
+    precision: s = 2,
+    customLayers: l = [],
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: l = "NA"
-  } = fe, [h, Oe] = S(0), [K, we] = S(0), [ve, Ce] = S(t.autoplay), oe = Be(
+    naLabel: a = "NA"
+  } = fe, [h, ve] = L(0), [Oe, ce] = L(0), [be, we] = L(t.autoplay), re = Be(
     Te(
       o.filter((i) => i.date !== void 0 && i.date !== null),
       (i) => i.date
     ).map((i) => Se(`${i.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (i, be) => tt(i, be)
-  ), [ye, c] = S(t.autoplay ? 0 : oe.length - 1), [te, r] = S(void 0), O = Me(null), it = Me(null);
+    (i, ye) => tt(i, ye)
+  ), [Ce, c] = L(t.autoplay ? 0 : re.length - 1), [te, Ve] = L(void 0), r = Me(null), B = Me(null);
   ze(() => {
-    const i = new ResizeObserver((be) => {
-      Oe(j || be[0].target.clientWidth || 620), we(he || be[0].target.clientHeight || 480);
+    const i = new ResizeObserver((ye) => {
+      ve(j || ye[0].target.clientWidth || 620), ce(he || ye[0].target.clientHeight || 480);
     });
-    return O.current && (we(O.current.clientHeight || 480), Oe(O.current.clientWidth || 620), j || i.observe(O.current)), () => i.disconnect();
+    return r.current && (ce(r.current.clientHeight || 480), ve(r.current.clientWidth || 620), j || i.observe(r.current)), () => i.disconnect();
   }, [j, he]), ze(() => {
     const i = setInterval(
       () => {
-        c((be) => be < oe.length - 1 ? be + 1 : 0);
+        c((ye) => ye < re.length - 1 ? ye + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
-    return ve || clearInterval(i), () => clearInterval(i);
-  }, [oe, ve, t.speed]);
-  const at = Fe(
-    oe,
-    ye,
+    return be || clearInterval(i), () => clearInterval(i);
+  }, [re, be, t.speed]);
+  const it = Fe(
+    re,
+    Ce,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
   );
@@ -403,20 +404,20 @@ function ut(fe) {
     "div",
     {
       className: `${R || "light"} flex ${j ? "w-fit grow-0" : "w-full grow"}`,
-      dir: B === "he" || B === "ar" ? "rtl" : void 0,
+      dir: S === "he" || S === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: Ne(
-            `${F ? F === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${B || "en"}`,
+            `${F ? F === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${S || "en"}`,
             f?.graphContainer
           ),
           style: {
             ...k?.graphContainer || {},
             ...F && F !== !0 ? { backgroundColor: F } : {}
           },
-          id: z,
-          ref: it,
+          id: $,
+          ref: B,
           "aria-label": W || `${g ? `The graph shows ${g}. ` : ""}This is a bar chart. ${ue ? ` ${ue}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
@@ -424,7 +425,7 @@ function ut(fe) {
               className: "flex grow",
               style: { padding: F ? p || "1rem" : p || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                g || ue || T || N ? /* @__PURE__ */ e.jsx(
+                g || ue || z || M ? /* @__PURE__ */ e.jsx(
                   Je,
                   {
                     styles: {
@@ -438,37 +439,37 @@ function ut(fe) {
                     graphTitle: g,
                     graphDescription: ue,
                     width: j,
-                    graphDownload: T ? it.current : void 0,
-                    dataDownload: N ? o.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? o.map((i) => i.data).filter((i) => i !== void 0) : o.filter((i) => i !== void 0) : null
+                    graphDownload: z ? B.current : void 0,
+                    dataDownload: M ? o.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? o.map((i) => i.data).filter((i) => i !== void 0) : o.filter((i) => i !== void 0) : null
                   }
                 ) : null,
-                t.enabled && oe.length > 0 && at ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && re.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        Ce(!ve);
+                        we(!be);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": ve ? "Click to pause animation" : "Click to play animation",
-                      children: ve ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
+                      "aria-label": be ? "Click to pause animation" : "Click to play animation",
+                      children: be ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     He,
                     {
-                      min: oe[0],
-                      max: oe[oe.length - 1],
-                      marks: at,
+                      min: re[0],
+                      max: re[re.length - 1],
+                      marks: it,
                       step: null,
-                      defaultValue: oe[oe.length - 1],
-                      value: oe[ye],
+                      defaultValue: re[re.length - 1],
+                      value: re[Ce],
                       onChangeComplete: (i) => {
-                        c(oe.indexOf(i));
+                        c(re.indexOf(i));
                       },
                       onChange: (i) => {
-                        c(oe.indexOf(i));
+                        c(re.indexOf(i));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
@@ -479,13 +480,13 @@ function ut(fe) {
                     Ke,
                     {
                       width: j,
-                      colorLegendTitle: Z,
+                      colorLegendTitle: Q,
                       colors: G || je[R].categoricalColors.colors,
                       colorDomain: U || Te(
                         o.filter((i) => i.color),
                         "color"
                       ).map((i) => i.color),
-                      setSelectedColor: r,
+                      setSelectedColor: Ve,
                       showNAColor: b
                     }
                   ) : null,
@@ -493,33 +494,33 @@ function ut(fe) {
                     "div",
                     {
                       className: "flex grow flex-col justify-center w-full leading-0",
-                      ref: O,
+                      ref: r,
                       "aria-label": "Graph area",
-                      children: (j || h) && (he || K) ? /* @__PURE__ */ e.jsx(
-                        ht,
+                      children: (j || h) && (he || Oe) ? /* @__PURE__ */ e.jsx(
+                        ut,
                         {
-                          data: $ === "asc" ? Ae(
+                          data: O === "asc" ? lt(
                             Le(o, t.dateFormat || "yyyy").filter(
-                              (i) => t.enabled ? i.date === $e(
-                                new Date(oe[ye]),
+                              (i) => t.enabled ? i.date === De(
+                                new Date(re[Ce]),
                                 t.dateFormat || "yyyy"
                               ) : i
                             ).filter((i) => d ? !q(i.size) : i),
                             (i) => i.size
-                          ).filter((i, be) => A ? be < A : !0) : $ === "desc" ? Ae(
+                          ).filter((i, ye) => V ? ye < V : !0) : O === "desc" ? lt(
                             Le(o, t.dateFormat || "yyyy").filter(
-                              (i) => t.enabled ? i.date === $e(
-                                new Date(oe[ye]),
+                              (i) => t.enabled ? i.date === De(
+                                new Date(re[Ce]),
                                 t.dateFormat || "yyyy"
                               ) : i
                             ).filter((i) => d ? !q(i.size) : i),
                             (i) => i.size
-                          ).reverse().filter((i, be) => A ? be < A : !0) : Le(o, t.dateFormat || "yyyy").filter(
-                            (i) => t.enabled ? i.date === $e(
-                              new Date(oe[ye]),
+                          ).reverse().filter((i, ye) => V ? ye < V : !0) : Le(o, t.dateFormat || "yyyy").filter(
+                            (i) => t.enabled ? i.date === De(
+                              new Date(re[Ce]),
                               t.dateFormat || "yyyy"
                             ) : i
-                          ).filter((i) => d ? !q(i.size) : i).filter((i, be) => A ? be < A : !0),
+                          ).filter((i) => d ? !q(i.size) : i).filter((i, ye) => V ? ye < V : !0),
                           barColor: o.filter((i) => i.color).length === 0 ? G ? [G] : [je.primaryColors["blue-600"]] : G || je[R].categoricalColors.colors,
                           colorDomain: o.filter((i) => i.color).length === 0 ? [] : U || Te(
                             o.filter((i) => i.color),
@@ -529,20 +530,20 @@ function ut(fe) {
                           selectedColor: te,
                           height: Math.max(
                             v,
-                            he || (ee ? v ? (j || h) * ee > v ? (j || h) * ee : v : (j || h) * ee : K)
+                            he || (Z ? v ? (j || h) * Z > v ? (j || h) * Z : v : (j || h) * Z : Oe)
                           ),
-                          suffix: I,
+                          suffix: A,
                           prefix: me,
                           barPadding: ge,
-                          showValues: Q,
+                          showValues: K,
                           showTicks: Y,
                           leftMargin: ie,
                           rightMargin: D,
                           topMargin: ae,
                           bottomMargin: le,
-                          truncateBy: ne,
+                          truncateBy: oe,
                           showLabels: J,
-                          tooltip: re,
+                          tooltip: se,
                           onSeriesMouseOver: E,
                           refValues: xe,
                           maxValue: q(y) ? Math.max(
@@ -557,22 +558,22 @@ function ut(fe) {
                           ) : x,
                           highlightedDataPoints: C,
                           onSeriesMouseClick: w,
-                          labelOrder: L,
-                          rtl: B === "he" || B === "ar",
-                          maxBarThickness: V,
-                          minBarThickness: ce,
+                          labelOrder: I,
+                          rtl: S === "he" || S === "ar",
+                          maxBarThickness: T,
+                          minBarThickness: ne,
                           resetSelectionOnDoubleClick: H,
-                          detailsOnClick: se,
-                          barAxisTitle: M,
+                          detailsOnClick: ee,
+                          barAxisTitle: N,
                           noOfTicks: P,
                           valueColor: m,
                           classNames: f,
                           styles: k,
                           animate: u === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : u || { duration: 0, once: !0, amount: 0 },
                           dimmedOpacity: n,
-                          precision: a,
-                          customLayers: s,
-                          naLabel: l
+                          precision: s,
+                          customLayers: l,
+                          naLabel: a
                         }
                       ) : null
                     }
@@ -599,76 +600,76 @@ function ut(fe) {
     }
   );
 }
-function mt(fe) {
+function gt(fe) {
   const {
     data: o,
     barColors: g,
     barPadding: G,
-    showTicks: I,
+    showTicks: A,
     leftMargin: X,
     truncateBy: me,
     width: ue,
     height: ge,
-    suffix: Q,
+    suffix: K,
     prefix: Y,
     showValues: ie,
     rightMargin: D,
-    topMargin: ne,
+    topMargin: oe,
     bottomMargin: he,
     showLabels: j,
     tooltip: _,
     onSeriesMouseOver: U,
-    refValues: Z,
+    refValues: Q,
     maxValue: C,
     minValue: p,
     onSeriesMouseClick: F,
     selectedColor: ae,
     rtl: le,
     labelOrder: J,
-    maxBarThickness: ee,
-    resetSelectionOnDoubleClick: re,
+    maxBarThickness: Z,
+    resetSelectionOnDoubleClick: se,
     detailsOnClick: E,
     barAxisTitle: xe,
     valueColor: de,
-    noOfTicks: z,
+    noOfTicks: $,
     styles: y,
     classNames: x,
     animate: w,
-    colorDomain: T,
-    precision: N,
-    customLayers: $,
-    naLabel: L
-  } = fe, B = Me(null), b = Ee(B, {
+    colorDomain: z,
+    precision: M,
+    customLayers: O,
+    naLabel: I
+  } = fe, S = Me(null), b = Ee(S, {
     once: w.once,
     amount: w.amount
   }), v = {
-    top: xe ? ne + 25 : ne,
+    top: xe ? oe + 25 : oe,
     bottom: he,
     left: X,
     right: D
-  }, [R, V] = S(void 0), [A, ce] = S(void 0), [W, H] = S(void 0), [se, M] = S(void 0), P = ue - v.left - v.right, m = ge - v.top - v.bottom, k = o.map((s, t) => ({
-    ...s,
-    id: J ? `${s.label}` : `${t}`
-  })), f = J || k.map((s) => `${s.id}`), d = Re().domain([p, C]).range([0, P]).nice(), u = Ie().domain(f).range([
+  }, [R, T] = L(void 0), [V, ne] = L(void 0), [W, H] = L(void 0), [ee, N] = L(void 0), P = ue - v.left - v.right, m = ge - v.top - v.bottom, k = o.map((l, t) => ({
+    ...l,
+    id: J ? `${l.label}` : `${t}`
+  })), f = J || k.map((l) => `${l.id}`), d = Re().domain([p, C]).range([0, P]).nice(), u = Ie().domain(f).range([
     0,
-    ee ? Math.min(m, ee * f.length) : m
-  ]).paddingInner(G), n = Ie().domain(o[0].size.map((s, t) => `${t}`)).range([0, u.bandwidth()]).paddingInner(0.1), a = d.ticks(z);
+    Z ? Math.min(m, Z * f.length) : m
+  ]).paddingInner(G), n = Ie().domain(o[0].size.map((l, t) => `${t}`)).range([0, u.bandwidth()]).paddingInner(0.1), s = d.ticks($);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
       {
-        ref: B,
+        ref: S,
         width: `${ue}px`,
         height: `${ge}px`,
         viewBox: `0 0 ${ue} ${ge}`,
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${v.left},${v.top})`, children: [
-          I ? /* @__PURE__ */ e.jsx(
-            st,
+          A ? /* @__PURE__ */ e.jsx(
+            rt,
             {
-              values: a.filter((s) => s !== 0),
-              x: a.filter((s) => s !== 0).map((s) => d(s)),
-              y1: 0 - ne,
+              values: s.filter((l) => l !== 0),
+              x: s.filter((l) => l !== 0).map((l) => d(l)),
+              y1: 0 - oe,
               y2: m + v.bottom,
               styles: {
                 gridLines: y?.xAxis?.gridLines,
@@ -678,11 +679,11 @@ function mt(fe) {
                 gridLines: x?.xAxis?.gridLines,
                 labels: x?.xAxis?.labels
               },
-              suffix: Q,
+              suffix: K,
               prefix: Y,
               labelType: "secondary",
               showGridLines: !0,
-              precision: N
+              precision: M
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
@@ -695,20 +696,20 @@ function mt(fe) {
               text: xe
             }
           ),
-          $.filter((s) => s.position === "before").map((s) => s.layer),
+          O.filter((l) => l.position === "before").map((l) => l.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             k.map(
-              (s) => q(u(s.id)) ? null : /* @__PURE__ */ e.jsxs(
+              (l) => q(u(l.id)) ? null : /* @__PURE__ */ e.jsxs(
                 pe.g,
                 {
                   variants: {
                     initial: {
                       x: 0,
-                      y: u(`${s.id}`)
+                      y: u(`${l.id}`)
                     },
                     whileInView: {
                       x: 0,
-                      y: u(`${s.id}`),
+                      y: u(`${l.id}`),
                       transition: { duration: w.duration }
                     }
                   },
@@ -716,38 +717,38 @@ function mt(fe) {
                   animate: b ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: w.duration } },
                   children: [
-                    s.size.map((t, l) => /* @__PURE__ */ e.jsxs(
+                    l.size.map((t, a) => /* @__PURE__ */ e.jsxs(
                       pe.g,
                       {
                         className: "undp-viz-g-with-hover",
-                        opacity: ae ? g[l] === ae ? 1 : 0.3 : 0.85,
+                        opacity: ae ? g[a] === ae ? 1 : 0.3 : 0.85,
                         onMouseEnter: (h) => {
-                          V({ ...s, sizeIndex: l }), M(h.clientY), H(h.clientX), U?.({ ...s, sizeIndex: l });
+                          T({ ...l, sizeIndex: a }), N(h.clientY), H(h.clientX), U?.({ ...l, sizeIndex: a });
                         },
                         onMouseMove: (h) => {
-                          V({ ...s, sizeIndex: l }), M(h.clientY), H(h.clientX);
+                          T({ ...l, sizeIndex: a }), N(h.clientY), H(h.clientX);
                         },
                         onMouseLeave: () => {
-                          V(void 0), H(void 0), M(void 0), U?.(void 0);
+                          T(void 0), H(void 0), N(void 0), U?.(void 0);
                         },
                         onClick: () => {
-                          (F || E) && (Pe(A, { ...s, sizeIndex: l }) && re ? (ce(void 0), F?.(void 0)) : (ce({ ...s, sizeIndex: l }), F && F({ ...s, sizeIndex: l })));
+                          (F || E) && (Pe(V, { ...l, sizeIndex: a }) && se ? (ne(void 0), F?.(void 0)) : (ne({ ...l, sizeIndex: a }), F && F({ ...l, sizeIndex: a })));
                         },
                         children: [
                           q(t) ? null : /* @__PURE__ */ e.jsx(
                             pe.rect,
                             {
-                              y: n(`${l}`),
+                              y: n(`${a}`),
                               variants: {
                                 initial: {
                                   width: 0,
                                   x: d(0),
-                                  fill: g[l]
+                                  fill: g[a]
                                 },
                                 whileInView: {
                                   width: q(t) ? 0 : t >= 0 ? d(t) - d(0) : d(0) - d(t),
                                   x: t >= 0 ? d(0) : d(t),
-                                  fill: g[l],
+                                  fill: g[a],
                                   transition: { duration: w.duration }
                                 }
                               },
@@ -764,9 +765,9 @@ function mt(fe) {
                           ie ? /* @__PURE__ */ e.jsx(
                             pe.text,
                             {
-                              y: n(`${l}`) + n.bandwidth() / 2,
+                              y: n(`${a}`) + n.bandwidth() / 2,
                               style: {
-                                fill: de || g[l],
+                                fill: de || g[a],
                                 textAnchor: t && t < 0 ? "end" : "start",
                                 ...y?.graphObjectValues || {}
                               },
@@ -787,17 +788,17 @@ function mt(fe) {
                                 opacity: 0,
                                 transition: { duration: w.duration }
                               },
-                              children: De(t, L, N, Y, Q)
+                              children: $e(t, I, M, Y, K)
                             }
                           ) : null
                         ]
                       },
-                      `${s.label}-${T[l] || l}`
+                      `${l.label}-${z[a] || a}`
                     )),
                     j ? /* @__PURE__ */ e.jsx(
-                      rt,
+                      ot,
                       {
-                        value: `${s.label}`.length < me ? `${s.label}` : `${`${s.label}`.substring(0, me)}...`,
+                        value: `${l.label}`.length < me ? `${l.label}` : `${`${l.label}`.substring(0, me)}...`,
                         y: 0,
                         x: 0 - v.left,
                         width: d(p < 0 ? 0 : p) + v.left,
@@ -810,7 +811,7 @@ function mt(fe) {
                     ) : null
                   ]
                 },
-                s.label
+                l.label
               )
             ),
             /* @__PURE__ */ e.jsx(
@@ -824,165 +825,165 @@ function mt(fe) {
                 styles: { axis: y?.yAxis?.axis }
               }
             ),
-            Z ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Z.map((s, t) => /* @__PURE__ */ e.jsx(
-              ot,
+            Q ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Q.map((l, t) => /* @__PURE__ */ e.jsx(
+              nt,
               {
-                text: s.text,
-                color: s.color,
-                x: d(s.value),
+                text: l.text,
+                color: l.color,
+                x: d(l.value),
                 y1: 0 - v.top,
                 y2: m + v.bottom,
-                textSide: d(s.value) > P * 0.75 || le ? "left" : "right",
-                classNames: s.classNames,
-                styles: s.styles,
+                textSide: d(l.value) > P * 0.75 || le ? "left" : "right",
+                classNames: l.classNames,
+                styles: l.styles,
                 animate: w,
                 isInView: b
               },
               t
             )) }) : null
           ] }),
-          $.filter((s) => s.position === "after").map((s) => s.layer)
+          O.filter((l) => l.position === "after").map((l) => l.layer)
         ] })
       }
     ),
-    R && _ && W && se ? /* @__PURE__ */ e.jsx(
+    R && _ && W && ee ? /* @__PURE__ */ e.jsx(
       Ge,
       {
         data: R,
         body: _,
         xPos: W,
-        yPos: se,
+        yPos: ee,
         backgroundStyle: y?.tooltip,
         className: x?.tooltip
       }
     ) : null,
-    E && A !== void 0 ? /* @__PURE__ */ e.jsx(
+    E && V !== void 0 ? /* @__PURE__ */ e.jsx(
       We,
       {
-        open: A !== void 0,
+        open: V !== void 0,
         onClose: () => {
-          ce(void 0);
+          ne(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof E == "string" ? { __html: Xe(E, A) } : void 0,
-            children: typeof E == "function" ? E(A) : null
+            dangerouslySetInnerHTML: typeof E == "string" ? { __html: Xe(E, V) } : void 0,
+            children: typeof E == "function" ? E(V) : null
           }
         )
       }
     ) : null
   ] });
 }
-function gt(fe) {
+function xt(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G = je.light.categoricalColors.colors,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me = 0.25,
     showTicks: ue = !0,
     truncateBy: ge = 999,
-    height: Q,
+    height: K,
     width: Y,
     footNote: ie,
     colorDomain: D,
-    colorLegendTitle: ne,
+    colorLegendTitle: oe,
     suffix: he = "",
     prefix: j = "",
     showValues: _ = !0,
     showColorScale: U = !0,
-    padding: Z,
+    padding: Q,
     backgroundColor: C = !1,
     leftMargin: p = 100,
     rightMargin: F = 40,
     topMargin: ae = 25,
     bottomMargin: le = 10,
     showLabels: J = !0,
-    relativeHeight: ee,
-    tooltip: re,
+    relativeHeight: Z,
+    tooltip: se,
     onSeriesMouseOver: E,
     refValues: xe,
     graphID: de,
-    maxValue: z,
+    maxValue: $,
     minValue: y,
     onSeriesMouseClick: x,
     graphDownload: w = !1,
-    dataDownload: T = !1,
-    language: N = "en",
-    labelOrder: $,
-    minHeight: L = 0,
-    theme: B = "light",
+    dataDownload: z = !1,
+    language: M = "en",
+    labelOrder: O,
+    minHeight: I = 0,
+    theme: S = "light",
     maxBarThickness: b,
     ariaLabel: v,
     resetSelectionOnDoubleClick: R = !0,
-    detailsOnClick: V,
-    barAxisTitle: A,
-    noOfTicks: ce = 5,
+    detailsOnClick: T,
+    barAxisTitle: V,
+    noOfTicks: ne = 5,
     valueColor: W,
     styles: H,
-    classNames: se,
-    filterNA: M = !0,
+    classNames: ee,
+    filterNA: N = !0,
     animate: P = !1,
     precision: m = 2,
     customLayers: k = [],
     timeline: f = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     naLabel: d = "NA"
-  } = fe, [u, n] = S(0), [a, s] = S(0), [t, l] = S(f.autoplay), h = Be(
+  } = fe, [u, n] = L(0), [s, l] = L(0), [t, a] = L(f.autoplay), h = Be(
     Te(
       o.filter((c) => c.date !== void 0 && c.date !== null),
       (c) => c.date
     ).map((c) => Se(`${c.date}`, f.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
     (c, te) => tt(c, te)
-  ), [Oe, K] = S(f.autoplay ? 0 : h.length - 1), [we, ve] = S(void 0), Ce = Me(null), oe = Me(null);
+  ), [ve, Oe] = L(f.autoplay ? 0 : h.length - 1), [ce, be] = L(void 0), we = Me(null), re = Me(null);
   ze(() => {
     const c = new ResizeObserver((te) => {
-      n(Y || te[0].target.clientWidth || 620), s(Q || te[0].target.clientHeight || 480);
+      n(Y || te[0].target.clientWidth || 620), l(K || te[0].target.clientHeight || 480);
     });
-    return Ce.current && (s(Ce.current.clientHeight || 480), n(Ce.current.clientWidth || 620), Y || c.observe(Ce.current)), () => c.disconnect();
-  }, [Y, Q]), ze(() => {
+    return we.current && (l(we.current.clientHeight || 480), n(we.current.clientWidth || 620), Y || c.observe(we.current)), () => c.disconnect();
+  }, [Y, K]), ze(() => {
     const c = setInterval(
       () => {
-        K((te) => te < h.length - 1 ? te + 1 : 0);
+        Oe((te) => te < h.length - 1 ? te + 1 : 0);
       },
       (f.speed || 2) * 1e3
     );
     return t || clearInterval(c), () => clearInterval(c);
   }, [h, t, f.speed]);
-  const ye = Fe(
+  const Ce = Fe(
     h,
-    Oe,
+    ve,
     f.showOnlyActiveDate,
     f.dateFormat || "yyyy"
   );
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${B || "light"} flex  ${Y ? "w-fit grow-0" : "w-full grow"}`,
-      dir: N === "he" || N === "ar" ? "rtl" : void 0,
+      className: `${S || "light"} flex  ${Y ? "w-fit grow-0" : "w-full grow"}`,
+      dir: M === "he" || M === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: Ne(
-            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${N || "en"}`,
-            se?.graphContainer
+            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            ee?.graphContainer
           ),
           style: {
             ...H?.graphContainer || {},
             ...C && C !== !0 ? { backgroundColor: C } : {}
           },
           id: de,
-          ref: oe,
+          ref: re,
           "aria-label": v || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${X ? ` ${X}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: C ? Z || "1rem" : Z || 0 },
+              style: { padding: C ? Q || "1rem" : Q || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 w-full grow justify-between", children: [
-                g || X || w || T ? /* @__PURE__ */ e.jsx(
+                g || X || w || z ? /* @__PURE__ */ e.jsx(
                   Je,
                   {
                     styles: {
@@ -990,23 +991,23 @@ function gt(fe) {
                       description: H?.description
                     },
                     classNames: {
-                      title: se?.title,
-                      description: se?.description
+                      title: ee?.title,
+                      description: ee?.description
                     },
                     graphTitle: g,
                     graphDescription: X,
                     width: Y,
-                    graphDownload: w ? oe.current : void 0,
-                    dataDownload: T ? o.map((c) => c.data).filter((c) => c !== void 0).length > 0 ? o.map((c) => c.data).filter((c) => c !== void 0) : o.filter((c) => c !== void 0) : null
+                    graphDownload: w ? re.current : void 0,
+                    dataDownload: z ? o.map((c) => c.data).filter((c) => c !== void 0).length > 0 ? o.map((c) => c.data).filter((c) => c !== void 0) : o.filter((c) => c !== void 0) : null
                   }
                 ) : null,
-                f.enabled && h.length > 0 && ye ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                f.enabled && h.length > 0 && Ce ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        l(!t);
+                        a(!t);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
                       "aria-label": t ? "Click to pause animation" : "Click to play animation",
@@ -1018,15 +1019,15 @@ function gt(fe) {
                     {
                       min: h[0],
                       max: h[h.length - 1],
-                      marks: ye,
+                      marks: Ce,
                       step: null,
                       defaultValue: h[h.length - 1],
-                      value: h[Oe],
+                      value: h[ve],
                       onChangeComplete: (c) => {
-                        K(h.indexOf(c));
+                        Oe(h.indexOf(c));
                       },
                       onChange: (c) => {
-                        K(h.indexOf(c));
+                        Oe(h.indexOf(c));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
@@ -1039,28 +1040,28 @@ function gt(fe) {
                       width: Y,
                       colorDomain: D,
                       colors: G,
-                      colorLegendTitle: ne,
-                      setSelectedColor: ve,
+                      colorLegendTitle: oe,
+                      setSelectedColor: be,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: Ce, "aria-label": "Graph area", children: (Y || u) && (Q || a) ? /* @__PURE__ */ e.jsx(
-                    mt,
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: we, "aria-label": "Graph area", children: (Y || u) && (K || s) ? /* @__PURE__ */ e.jsx(
+                    gt,
                     {
-                      data: Ve(
+                      data: Ae(
                         o,
                         f.dateFormat || "yyyy"
                       ).filter(
-                        (c) => f.enabled ? c.date === $e(
-                          new Date(h[Oe]),
+                        (c) => f.enabled ? c.date === De(
+                          new Date(h[ve]),
                           f.dateFormat || "yyyy"
                         ) : c
-                      ).filter((c) => M ? !c.size.every((te) => te == null) : c),
+                      ).filter((c) => N ? !c.size.every((te) => te == null) : c),
                       barColors: G,
                       width: Y || u,
                       height: Math.max(
-                        L,
-                        Q || (ee ? L ? (Y || u) * ee > L ? (Y || u) * ee : L : (Y || u) * ee : a)
+                        I,
+                        K || (Z ? I ? (Y || u) * Z > I ? (Y || u) * Z : I : (Y || u) * Z : s)
                       ),
                       suffix: he,
                       prefix: j,
@@ -1073,10 +1074,10 @@ function gt(fe) {
                       bottomMargin: le,
                       truncateBy: ge,
                       showLabels: J,
-                      tooltip: re,
+                      tooltip: se,
                       onSeriesMouseOver: E,
                       refValues: xe,
-                      maxValue: q(z) ? Math.max(
+                      maxValue: q($) ? Math.max(
                         ...o.map(
                           (c) => Math.max(
                             ...c.size.filter(
@@ -1092,7 +1093,7 @@ function gt(fe) {
                             )
                           )
                         )
-                      ) : z,
+                      ) : $,
                       minValue: q(y) ? Math.min(
                         ...o.map(
                           (c) => Math.min(
@@ -1111,17 +1112,17 @@ function gt(fe) {
                         )
                       ) : y,
                       onSeriesMouseClick: x,
-                      selectedColor: we,
-                      labelOrder: $,
-                      rtl: N === "he" || N === "ar",
+                      selectedColor: ce,
+                      labelOrder: O,
+                      rtl: M === "he" || M === "ar",
                       maxBarThickness: b,
                       resetSelectionOnDoubleClick: R,
-                      detailsOnClick: V,
-                      barAxisTitle: A,
-                      noOfTicks: ce,
+                      detailsOnClick: T,
+                      barAxisTitle: V,
+                      noOfTicks: ne,
                       valueColor: W,
                       styles: H,
-                      classNames: se,
+                      classNames: ee,
                       colorDomain: D,
                       animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
                       precision: m,
@@ -1130,15 +1131,15 @@ function gt(fe) {
                     }
                   ) : null })
                 ] }) }),
-                I || ie ? /* @__PURE__ */ e.jsx(
+                A || ie ? /* @__PURE__ */ e.jsx(
                   Ue,
                   {
                     styles: { footnote: H?.footnote, source: H?.source },
                     classNames: {
-                      footnote: se?.footnote,
-                      source: se?.source
+                      footnote: ee?.footnote,
+                      source: ee?.source
                     },
-                    sources: I,
+                    sources: A,
                     footNote: ie,
                     width: Y
                   }
@@ -1151,46 +1152,46 @@ function gt(fe) {
     }
   );
 }
-function xt(fe) {
+function pt(fe) {
   const {
     data: o,
     barColors: g,
     barPadding: G,
-    showTicks: I,
+    showTicks: A,
     leftMargin: X,
     rightMargin: me,
     truncateBy: ue,
     width: ge,
-    height: Q,
+    height: K,
     topMargin: Y,
     bottomMargin: ie,
     tooltip: D,
-    onSeriesMouseOver: ne,
+    onSeriesMouseOver: oe,
     showLabels: he,
     suffix: j,
     prefix: _,
     showValues: U,
-    refValues: Z,
+    refValues: Q,
     maxValue: C,
     onSeriesMouseClick: p,
     selectedColor: F,
     rtl: ae,
     labelOrder: le,
     maxBarThickness: J,
-    minBarThickness: ee,
-    resetSelectionOnDoubleClick: re,
+    minBarThickness: Z,
+    resetSelectionOnDoubleClick: se,
     detailsOnClick: E,
     barAxisTitle: xe,
     valueColor: de,
-    noOfTicks: z,
+    noOfTicks: $,
     styles: y,
     classNames: x,
     animate: w,
-    colorDomain: T,
-    precision: N,
-    customLayers: $,
-    naLabel: L
-  } = fe, B = Me(null), b = Ee(B, {
+    colorDomain: z,
+    precision: M,
+    customLayers: O,
+    naLabel: I
+  } = fe, S = Me(null), b = Ee(S, {
     once: w.once,
     amount: w.amount
   }), v = {
@@ -1198,28 +1199,28 @@ function xt(fe) {
     bottom: ie,
     left: X,
     right: me
-  }, [R, V] = S(void 0), [A, ce] = S(void 0), [W, H] = S(void 0), [se, M] = S(void 0), P = ge - v.left - v.right, m = Q - v.top - v.bottom, k = o.map((a, s) => ({
-    ...a,
-    id: le ? `${a.label}` : `${s}`
-  })), f = le || k.map((a) => `${a.id}`), d = Re().domain([0, C]).range([0, P]).nice(), u = Ie().domain(f).range([
+  }, [R, T] = L(void 0), [V, ne] = L(void 0), [W, H] = L(void 0), [ee, N] = L(void 0), P = ge - v.left - v.right, m = K - v.top - v.bottom, k = o.map((s, l) => ({
+    ...s,
+    id: le ? `${s.label}` : `${l}`
+  })), f = le || k.map((s) => `${s.id}`), d = Re().domain([0, C]).range([0, P]).nice(), u = Ie().domain(f).range([
     0,
-    ee ? Math.max(m, ee * f.length) : J ? Math.min(m, J * f.length) : m
-  ]).paddingInner(G), n = d.ticks(z);
+    Z ? Math.max(m, Z * f.length) : J ? Math.min(m, J * f.length) : m
+  ]).paddingInner(G), n = d.ticks($);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
       {
-        ref: B,
+        ref: S,
         width: `${ge}px`,
-        height: `${Q}px`,
-        viewBox: `0 0 ${ge} ${Q}`,
+        height: `${K}px`,
+        viewBox: `0 0 ${ge} ${K}`,
         direction: "ltr",
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${v.left},${v.top})`, children: [
-          I ? /* @__PURE__ */ e.jsx(
-            st,
+          A ? /* @__PURE__ */ e.jsx(
+            rt,
             {
-              values: n.filter((a) => a !== 0),
-              x: n.filter((a) => a !== 0).map((a) => d(a)),
+              values: n.filter((s) => s !== 0),
+              x: n.filter((s) => s !== 0).map((s) => d(s)),
               y1: 0 - Y,
               y2: m + v.bottom,
               styles: {
@@ -1234,7 +1235,7 @@ function xt(fe) {
               prefix: _,
               labelType: "secondary",
               showGridLines: !0,
-              precision: N
+              precision: M
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
@@ -1247,18 +1248,18 @@ function xt(fe) {
               text: xe
             }
           ),
-          $.filter((a) => a.position === "before").map((a) => a.layer),
+          O.filter((s) => s.position === "before").map((s) => s.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             k.map(
-              (a) => q(u(a.id)) ? null : /* @__PURE__ */ e.jsxs(
+              (s) => q(u(s.id)) ? null : /* @__PURE__ */ e.jsxs(
                 pe.g,
                 {
                   className: "undp-viz-low-opacity undp-viz-g-with-hover",
                   variants: {
-                    initial: { x: 0, y: u(`${a.id}`) },
+                    initial: { x: 0, y: u(`${s.id}`) },
                     whileInView: {
                       x: 0,
-                      y: u(`${a.id}`),
+                      y: u(`${s.id}`),
                       transition: { duration: w.duration }
                     }
                   },
@@ -1266,24 +1267,24 @@ function xt(fe) {
                   animate: b ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: w.duration } },
                   children: [
-                    a.size.map((s, t) => /* @__PURE__ */ e.jsxs(
+                    s.size.map((l, t) => /* @__PURE__ */ e.jsxs(
                       pe.g,
                       {
                         opacity: F ? g[t] === F ? 1 : 0.3 : 1,
-                        onMouseEnter: (l) => {
-                          V({ ...a, sizeIndex: t }), M(l.clientY), H(l.clientX), ne?.({ ...a, sizeIndex: t });
+                        onMouseEnter: (a) => {
+                          T({ ...s, sizeIndex: t }), N(a.clientY), H(a.clientX), oe?.({ ...s, sizeIndex: t });
                         },
-                        onMouseMove: (l) => {
-                          V({ ...a, sizeIndex: t }), M(l.clientY), H(l.clientX);
+                        onMouseMove: (a) => {
+                          T({ ...s, sizeIndex: t }), N(a.clientY), H(a.clientX);
                         },
                         onMouseLeave: () => {
-                          V(void 0), H(void 0), M(void 0), ne?.(void 0);
+                          T(void 0), H(void 0), N(void 0), oe?.(void 0);
                         },
                         onClick: () => {
-                          (p || E) && (Pe(A, { ...a, sizeIndex: t }) && re ? (ce(void 0), p?.(void 0)) : (ce({ ...a, sizeIndex: t }), p && p({ ...a, sizeIndex: t })));
+                          (p || E) && (Pe(V, { ...s, sizeIndex: t }) && se ? (ne(void 0), p?.(void 0)) : (ne({ ...s, sizeIndex: t }), p && p({ ...s, sizeIndex: t })));
                         },
                         children: [
-                          s ? /* @__PURE__ */ e.jsx(
+                          l ? /* @__PURE__ */ e.jsx(
                             pe.rect,
                             {
                               y: 0,
@@ -1301,9 +1302,9 @@ function xt(fe) {
                                   fill: g[t]
                                 },
                                 whileInView: {
-                                  width: d(s || 0),
+                                  width: d(l || 0),
                                   x: d(
-                                    t === 0 ? 0 : ke(a.size.filter((l, h) => h < t && l))
+                                    t === 0 ? 0 : ke(s.size.filter((a, h) => h < t && a))
                                   ),
                                   fill: g[t],
                                   transition: { duration: w.duration }
@@ -1332,30 +1333,30 @@ function xt(fe) {
                                 initial: {
                                   x: d(0),
                                   opacity: 0,
-                                  fill: lt(g[t])
+                                  fill: at(g[t])
                                 },
                                 whileInView: {
                                   x: d(
-                                    t === 0 ? 0 : ke(a.size.filter((l, h) => h < t && l))
-                                  ) + d(s || 0) / 2,
-                                  opacity: s && d(s) / De(s, L, N, _, j).length > 12 ? 1 : 0,
-                                  fill: lt(g[t]),
+                                    t === 0 ? 0 : ke(s.size.filter((a, h) => h < t && a))
+                                  ) + d(l || 0) / 2,
+                                  opacity: l && d(l) / $e(l, I, M, _, j).length > 12 ? 1 : 0,
+                                  fill: at(g[t]),
                                   transition: { duration: w.duration }
                                 }
                               },
                               initial: "initial",
                               animate: b ? "whileInView" : "initial",
-                              children: De(s, L, N, _, j)
+                              children: $e(l, I, M, _, j)
                             }
                           ) : null
                         ]
                       },
-                      `${a.label}-${T[t] || t}`
+                      `${s.label}-${z[t] || t}`
                     )),
                     he ? /* @__PURE__ */ e.jsx(
-                      rt,
+                      ot,
                       {
-                        value: `${a.label}`.length < ue ? `${a.label}` : `${`${a.label}`.substring(0, ue)}...`,
+                        value: `${s.label}`.length < ue ? `${s.label}` : `${`${s.label}`.substring(0, ue)}...`,
                         y: 0,
                         x: 0 - v.left,
                         width: 0 + v.left,
@@ -1388,7 +1389,7 @@ function xt(fe) {
                             opacity: 0
                           },
                           whileInView: {
-                            x: d(ke(a.size.map((s) => s || 0))),
+                            x: d(ke(s.size.map((l) => l || 0))),
                             opacity: 1,
                             transition: { duration: w.duration }
                           }
@@ -1399,10 +1400,10 @@ function xt(fe) {
                         },
                         initial: "initial",
                         animate: b ? "whileInView" : "initial",
-                        children: De(
-                          ke(a.size.filter((s) => s)),
-                          L,
-                          N,
+                        children: $e(
+                          ke(s.size.filter((l) => l)),
+                          I,
+                          M,
                           _,
                           j
                         )
@@ -1410,7 +1411,7 @@ function xt(fe) {
                     ) : null
                   ]
                 },
-                a.label
+                s.label
               )
             ),
             /* @__PURE__ */ e.jsx(
@@ -1424,145 +1425,146 @@ function xt(fe) {
                 styles: { axis: y?.yAxis?.axis }
               }
             ),
-            Z ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Z.map((a, s) => /* @__PURE__ */ e.jsx(
-              ot,
+            Q ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Q.map((s, l) => /* @__PURE__ */ e.jsx(
+              nt,
               {
-                text: a.text,
-                color: a.color,
-                x: d(a.value),
+                text: s.text,
+                color: s.color,
+                x: d(s.value),
                 y1: 0 - v.top,
                 y2: m + v.bottom,
-                textSide: d(a.value) > P * 0.75 || ae ? "left" : "right",
-                classNames: a.classNames,
-                styles: a.styles,
+                textSide: d(s.value) > P * 0.75 || ae ? "left" : "right",
+                classNames: s.classNames,
+                styles: s.styles,
                 animate: w,
                 isInView: b
               },
-              s
+              l
             )) }) : null
           ] }),
-          $.filter((a) => a.position === "after").map((a) => a.layer)
+          O.filter((s) => s.position === "after").map((s) => s.layer)
         ] })
       }
     ),
-    R && D && W && se ? /* @__PURE__ */ e.jsx(
+    R && D && W && ee ? /* @__PURE__ */ e.jsx(
       Ge,
       {
         data: R,
         body: D,
         xPos: W,
-        yPos: se,
+        yPos: ee,
         backgroundStyle: y?.tooltip,
         className: x?.tooltip
       }
     ) : null,
-    E && A !== void 0 ? /* @__PURE__ */ e.jsx(
+    E && V !== void 0 ? /* @__PURE__ */ e.jsx(
       We,
       {
-        open: A !== void 0,
+        open: V !== void 0,
         onClose: () => {
-          ce(void 0);
+          ne(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof E == "string" ? { __html: Xe(E, A) } : void 0,
-            children: typeof E == "function" ? E(A) : null
+            dangerouslySetInnerHTML: typeof E == "string" ? { __html: Xe(E, V) } : void 0,
+            children: typeof E == "function" ? E(V) : null
           }
         )
       }
     ) : null
   ] });
 }
-function pt(fe) {
+function ft(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G = je.light.categoricalColors.colors,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me = 0.25,
     showTicks: ue = !0,
     leftMargin: ge = 100,
-    rightMargin: Q = 40,
+    rightMargin: K = 40,
     truncateBy: Y = 999,
     height: ie,
     width: D,
-    footNote: ne,
+    footNote: oe,
     colorDomain: he,
     colorLegendTitle: j,
     padding: _,
     backgroundColor: U = !1,
-    topMargin: Z = 25,
+    topMargin: Q = 25,
     bottomMargin: C = 10,
     tooltip: p,
     onSeriesMouseOver: F,
     suffix: ae = "",
     prefix: le = "",
     showLabels: J = !0,
-    relativeHeight: ee,
-    showValues: re = !0,
+    relativeHeight: Z,
+    showValues: se = !0,
     refValues: E,
     graphID: xe,
     maxValue: de,
-    onSeriesMouseClick: z,
+    onSeriesMouseClick: $,
     graphDownload: y = !1,
     dataDownload: x = !1,
     language: w = "en",
-    labelOrder: T,
-    minHeight: N = 0,
-    theme: $ = "light",
-    maxBarThickness: L,
-    sortParameter: B,
+    labelOrder: z,
+    minHeight: M = 0,
+    theme: O = "light",
+    maxBarThickness: I,
+    sortParameter: S,
     maxNumberOfBars: b,
     minBarThickness: v,
     showColorScale: R = !0,
-    ariaLabel: V,
-    resetSelectionOnDoubleClick: A = !0,
-    detailsOnClick: ce,
+    ariaLabel: T,
+    resetSelectionOnDoubleClick: V = !0,
+    detailsOnClick: ne,
     barAxisTitle: W,
     noOfTicks: H = 5,
-    valueColor: se,
-    styles: M,
+    valueColor: ee,
+    styles: N,
     classNames: P,
     filterNA: m = !0,
     animate: k = !1,
     precision: f = 2,
     customLayers: d = [],
     timeline: u = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: n = "NA"
-  } = fe, [a, s] = S(0), [t, l] = S(0), [h, Oe] = S(u.autoplay), K = Be(
+    naLabel: n = "NA",
+    sortData: s
+  } = fe, [l, t] = L(0), [a, h] = L(0), [ve, Oe] = L(u.autoplay), ce = Be(
     Te(
       o.filter((r) => r.date !== void 0 && r.date !== null),
       (r) => r.date
     ).map((r) => Se(`${r.date}`, u.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (r, O) => tt(r, O)
-  ), [we, ve] = S(u.autoplay ? 0 : K.length - 1), [Ce, oe] = S(void 0), ye = Me(null), c = Me(null);
+    (r, B) => tt(r, B)
+  ), [be, we] = L(u.autoplay ? 0 : ce.length - 1), [re, Ce] = L(void 0), c = Me(null), te = Me(null);
   ze(() => {
-    const r = new ResizeObserver((O) => {
-      s(D || O[0].target.clientWidth || 620), l(ie || O[0].target.clientHeight || 480);
+    const r = new ResizeObserver((B) => {
+      t(D || B[0].target.clientWidth || 620), h(ie || B[0].target.clientHeight || 480);
     });
-    return ye.current && (l(ye.current.clientHeight || 480), s(ye.current.clientWidth || 620), D || r.observe(ye.current)), () => r.disconnect();
+    return c.current && (h(c.current.clientHeight || 480), t(c.current.clientWidth || 620), D || r.observe(c.current)), () => r.disconnect();
   }, [D, ie]), ze(() => {
     const r = setInterval(
       () => {
-        ve((O) => O < K.length - 1 ? O + 1 : 0);
+        we((B) => B < ce.length - 1 ? B + 1 : 0);
       },
       (u.speed || 2) * 1e3
     );
-    return h || clearInterval(r), () => clearInterval(r);
-  }, [K, h, u.speed]);
-  const te = Fe(
-    K,
-    we,
+    return ve || clearInterval(r), () => clearInterval(r);
+  }, [ce, ve, u.speed]);
+  const Ve = Fe(
+    ce,
+    be,
     u.showOnlyActiveDate,
     u.dateFormat || "yyyy"
   );
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${$ || "light"} flex  ${D ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${O || "light"} flex  ${D ? "w-fit grow-0" : "w-full grow"}`,
       dir: w === "he" || w === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
@@ -1572,12 +1574,12 @@ function pt(fe) {
             P?.graphContainer
           ),
           style: {
-            ...M?.graphContainer || {},
+            ...N?.graphContainer || {},
             ...U && U !== !0 ? { backgroundColor: U } : {}
           },
           id: xe,
-          ref: c,
-          "aria-label": V || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${X ? ` ${X}` : ""}`,
+          ref: te,
+          "aria-label": T || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${X ? ` ${X}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
@@ -1588,8 +1590,8 @@ function pt(fe) {
                   Je,
                   {
                     styles: {
-                      title: M?.title,
-                      description: M?.description
+                      title: N?.title,
+                      description: N?.description
                     },
                     classNames: {
                       title: P?.title,
@@ -1598,37 +1600,37 @@ function pt(fe) {
                     graphTitle: g,
                     graphDescription: X,
                     width: D,
-                    graphDownload: y ? c.current : void 0,
+                    graphDownload: y ? te.current : void 0,
                     dataDownload: x ? o.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? o.map((r) => r.data).filter((r) => r !== void 0) : o.filter((r) => r !== void 0) : null
                   }
                 ) : null,
-                u.enabled && K.length > 0 && te ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                u.enabled && ce.length > 0 && Ve ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        Oe(!h);
+                        Oe(!ve);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": h ? "Click to pause animation" : "Click to play animation",
-                      children: h ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
+                      "aria-label": ve ? "Click to pause animation" : "Click to play animation",
+                      children: ve ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     He,
                     {
-                      min: K[0],
-                      max: K[K.length - 1],
-                      marks: te,
+                      min: ce[0],
+                      max: ce[ce.length - 1],
+                      marks: Ve,
                       step: null,
-                      defaultValue: K[K.length - 1],
-                      value: K[we],
+                      defaultValue: ce[ce.length - 1],
+                      value: ce[be],
                       onChangeComplete: (r) => {
-                        ve(K.indexOf(r));
+                        we(ce.indexOf(r));
                       },
                       onChange: (r) => {
-                        ve(K.indexOf(r));
+                        we(ce.indexOf(r));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
@@ -1642,86 +1644,88 @@ function pt(fe) {
                       colorDomain: he,
                       colors: G,
                       colorLegendTitle: j,
-                      setSelectedColor: oe,
+                      setSelectedColor: Ce,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: ye, "aria-label": "Graph area", children: (D || a) && (ie || t) ? /* @__PURE__ */ e.jsx(
-                    xt,
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: c, "aria-label": "Graph area", children: (D || l) && (ie || a) ? /* @__PURE__ */ e.jsx(
+                    pt,
                     {
-                      data: B !== void 0 ? B === "total" ? Ae(
-                        Ve(
+                      data: S !== void 0 ? S === "total" ? st(
+                        Ae(
                           o,
                           u.dateFormat || "yyyy"
                         ).filter(
-                          (r) => u.enabled ? r.date === $e(
-                            new Date(K[we]),
+                          (r) => u.enabled ? r.date === De(
+                            new Date(ce[be]),
                             u.dateFormat || "yyyy"
                           ) : r
                         ).filter(
-                          (r) => m ? !r.size.every((O) => O == null) : r
+                          (r) => m ? !r.size.every((B) => B == null) : r
                         ),
-                        (r) => ke(r.size.filter((O) => !q(O)))
-                      ).reverse().filter((r, O) => b ? O < b : !0) : Ae(
-                        Ve(
+                        (r) => ke(r.size.filter((B) => !q(B))),
+                        [s || "asc"]
+                      ).filter((r, B) => b ? B < b : !0) : st(
+                        Ae(
                           o,
                           u.dateFormat || "yyyy"
                         ).filter(
-                          (r) => u.enabled ? r.date === $e(
-                            new Date(K[we]),
+                          (r) => u.enabled ? r.date === De(
+                            new Date(ce[be]),
                             u.dateFormat || "yyyy"
                           ) : r
                         ).filter(
-                          (r) => m ? !r.size.every((O) => O == null) : r
+                          (r) => m ? !r.size.every((B) => B == null) : r
                         ),
-                        (r) => q(r.size[B]) ? -1 / 0 : r.size[B]
-                      ).reverse().filter((r, O) => b ? O < b : !0) : Ve(
+                        (r) => q(r.size[S]) ? -1 / 0 : r.size[S],
+                        [s || "asc"]
+                      ).filter((r, B) => b ? B < b : !0) : Ae(
                         o,
                         u.dateFormat || "yyyy"
                       ).filter(
-                        (r) => u.enabled ? r.date === $e(
-                          new Date(K[we]),
+                        (r) => u.enabled ? r.date === De(
+                          new Date(ce[be]),
                           u.dateFormat || "yyyy"
                         ) : r
-                      ).filter((r) => m ? !r.size.every((O) => O == null) : r).filter((r, O) => b ? O < b : !0),
+                      ).filter((r) => m ? !r.size.every((B) => B == null) : r).filter((r, B) => b ? B < b : !0),
                       barColors: G,
-                      width: D || a,
+                      width: D || l,
                       height: Math.max(
-                        N,
-                        ie || (ee ? N ? (D || a) * ee > N ? (D || a) * ee : N : (D || a) * ee : t)
+                        M,
+                        ie || (Z ? M ? (D || l) * Z > M ? (D || l) * Z : M : (D || l) * Z : a)
                       ),
                       barPadding: me,
                       showTicks: ue,
                       leftMargin: ge,
-                      rightMargin: Q,
-                      topMargin: Z,
+                      rightMargin: K,
+                      topMargin: Q,
                       bottomMargin: C,
                       truncateBy: Y,
                       showLabels: J,
                       tooltip: p,
                       onSeriesMouseOver: F,
-                      showValues: re,
+                      showValues: se,
                       suffix: ae,
                       prefix: le,
                       refValues: E,
                       maxValue: q(de) ? Math.max(
                         ...o.map(
-                          (r) => ke(r.size.filter((O) => !q(O))) || 0
+                          (r) => ke(r.size.filter((B) => !q(B))) || 0
                         )
                       ) : de,
-                      onSeriesMouseClick: z,
-                      selectedColor: Ce,
+                      onSeriesMouseClick: $,
+                      selectedColor: re,
                       rtl: w === "he" || w === "ar",
-                      labelOrder: T,
-                      maxBarThickness: L,
+                      labelOrder: z,
+                      maxBarThickness: I,
                       minBarThickness: v,
-                      resetSelectionOnDoubleClick: A,
-                      detailsOnClick: ce,
+                      resetSelectionOnDoubleClick: V,
+                      detailsOnClick: ne,
                       barAxisTitle: W,
                       noOfTicks: H,
-                      valueColor: se,
+                      valueColor: ee,
                       classNames: P,
-                      styles: M,
+                      styles: N,
                       animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
                       colorDomain: he,
                       precision: f,
@@ -1730,16 +1734,16 @@ function pt(fe) {
                     }
                   ) : null })
                 ] }) }),
-                I || ne ? /* @__PURE__ */ e.jsx(
+                A || oe ? /* @__PURE__ */ e.jsx(
                   Ue,
                   {
-                    styles: { footnote: M?.footnote, source: M?.source },
+                    styles: { footnote: N?.footnote, source: N?.source },
                     classNames: {
                       footnote: P?.footnote,
                       source: P?.source
                     },
-                    sources: I,
-                    footNote: ne,
+                    sources: A,
+                    footNote: oe,
                     width: D
                   }
                 ) : null
@@ -1751,62 +1755,62 @@ function pt(fe) {
     }
   );
 }
-function ft(fe) {
+function yt(fe) {
   const {
     data: o,
     width: g,
     height: G,
-    barColor: I,
+    barColor: A,
     suffix: X,
     prefix: me,
     barPadding: ue,
     showLabels: ge,
-    showValues: Q,
+    showValues: K,
     showTicks: Y,
     colorDomain: ie,
     truncateBy: D,
-    rightMargin: ne,
+    rightMargin: oe,
     topMargin: he,
     bottomMargin: j,
     leftMargin: _,
     tooltip: U,
-    onSeriesMouseOver: Z,
+    onSeriesMouseOver: Q,
     refValues: C,
     selectedColor: p,
     maxValue: F,
     minValue: ae,
     highlightedDataPoints: le,
     onSeriesMouseClick: J,
-    labelOrder: ee,
-    maxBarThickness: re,
+    labelOrder: Z,
+    maxBarThickness: se,
     minBarThickness: E,
     resetSelectionOnDoubleClick: xe,
     detailsOnClick: de,
-    barAxisTitle: z,
+    barAxisTitle: $,
     valueColor: y,
     noOfTicks: x,
     styles: w,
-    classNames: T,
-    dimmedOpacity: N,
-    animate: $,
-    precision: L,
-    customLayers: B,
+    classNames: z,
+    dimmedOpacity: M,
+    animate: O,
+    precision: I,
+    customLayers: S,
     naLabel: b
   } = fe, v = Me(null), R = Ee(v, {
-    once: $.once,
-    amount: $.amount
-  }), V = {
+    once: O.once,
+    amount: O.amount
+  }), T = {
     top: he,
     bottom: j,
-    left: z ? _ + 30 : _,
-    right: ne
-  }, [A, ce] = S(void 0), [W, H] = S(void 0), [se, M] = S(void 0), [P, m] = S(void 0), k = g - V.left - V.right, f = G - V.top - V.bottom, d = Re().domain([ae, F]).range([f, 0]).nice(), u = o.map((t, l) => ({
+    left: $ ? _ + 30 : _,
+    right: oe
+  }, [V, ne] = L(void 0), [W, H] = L(void 0), [ee, N] = L(void 0), [P, m] = L(void 0), k = g - T.left - T.right, f = G - T.top - T.bottom, d = Re().domain([ae, F]).range([f, 0]).nice(), u = o.map((t, a) => ({
     ...t,
-    id: ee ? `${t.label}` : `${l}`
-  })), n = ee || u.map((t) => `${t.id}`), a = Ie().domain(n).range([
+    id: Z ? `${t.label}` : `${a}`
+  })), n = Z || u.map((t) => `${t.id}`), s = Ie().domain(n).range([
     0,
-    E ? Math.max(k, E * n.length) : re ? Math.min(k, re * n.length) : k
-  ]).paddingInner(ue), s = d.ticks(x);
+    E ? Math.max(k, E * n.length) : se ? Math.min(k, se * n.length) : k
+  ]).paddingInner(ue), l = d.ticks(x);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
@@ -1816,18 +1820,18 @@ function ft(fe) {
         height: `${G}px`,
         viewBox: `0 0 ${g} ${G}`,
         direction: "ltr",
-        children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${V.left},${V.top})`, children: [
+        children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${T.left},${T.top})`, children: [
           /* @__PURE__ */ e.jsx(
             _e,
             {
               y1: d(ae < 0 ? 0 : ae),
               y2: d(ae < 0 ? 0 : ae),
               x1: 0 - _,
-              x2: k + V.right,
-              label: De(
+              x2: k + T.right,
+              label: $e(
                 ae < 0 ? 0 : ae,
                 b,
-                L,
+                I,
                 me,
                 X
               ),
@@ -1838,33 +1842,33 @@ function ft(fe) {
                 y: d(ae < 0 ? 0 : ae)
               },
               classNames: {
-                axis: T?.xAxis?.axis,
-                label: T?.yAxis?.labels
+                axis: z?.xAxis?.axis,
+                label: z?.yAxis?.labels
               },
               styles: { axis: w?.xAxis?.axis, label: w?.yAxis?.labels }
             }
           ),
           Y ? /* @__PURE__ */ e.jsx(
-            dt,
+            ht,
             {
-              values: s.filter((t) => t !== 0),
-              y: s.filter((t) => t !== 0).map((t) => d(t)),
+              values: l.filter((t) => t !== 0),
+              y: l.filter((t) => t !== 0).map((t) => d(t)),
               x1: 0 - _,
-              x2: k + V.right,
+              x2: k + T.right,
               styles: {
                 gridLines: w?.yAxis?.gridLines,
                 labels: w?.yAxis?.labels
               },
               classNames: {
-                gridLines: T?.yAxis?.gridLines,
-                labels: T?.yAxis?.labels
+                gridLines: z?.yAxis?.gridLines,
+                labels: z?.yAxis?.labels
               },
               suffix: X,
               prefix: me,
               labelType: "secondary",
               showGridLines: !0,
               labelPos: "vertical",
-              precision: L
+              precision: I
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
@@ -1873,15 +1877,15 @@ function ft(fe) {
               x: 0 - _ - 15,
               y: f / 2,
               style: w?.yAxis?.title,
-              className: T?.yAxis?.title,
-              text: z,
+              className: z?.yAxis?.title,
+              text: $,
               rotate90: !0
             }
           ),
-          B.filter((t) => t.position === "before").map((t) => t.layer),
+          S.filter((t) => t.position === "before").map((t) => t.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             u.map(
-              (t, l) => q(a(t.id)) ? null : /* @__PURE__ */ e.jsxs(
+              (t, a) => q(s(t.id)) ? null : /* @__PURE__ */ e.jsxs(
                 pe.g,
                 {
                   className: "undp-viz-g-with-hover",
@@ -1889,71 +1893,71 @@ function ft(fe) {
                   animate: R ? "whileInView" : "initial",
                   variants: {
                     initial: {
-                      opacity: p ? t.color && I[ie.indexOf(t.color)] === p ? 1 : N : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : N : 0.85
+                      opacity: p ? t.color && A[ie.indexOf(t.color)] === p ? 1 : M : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : M : 0.85
                     },
                     whileInView: {
-                      opacity: p ? t.color && I[ie.indexOf(t.color)] === p ? 1 : N : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : N : 0.85,
-                      transition: { duration: $.duration }
+                      opacity: p ? t.color && A[ie.indexOf(t.color)] === p ? 1 : M : le.length !== 0 ? le.indexOf(t.label) !== -1 ? 0.85 : M : 0.85,
+                      transition: { duration: O.duration }
                     }
                   },
-                  exit: { opacity: 0, transition: { duration: $.duration } },
+                  exit: { opacity: 0, transition: { duration: O.duration } },
                   onMouseEnter: (h) => {
-                    ce(t), m(h.clientY), M(h.clientX), Z?.(t);
+                    ne(t), m(h.clientY), N(h.clientX), Q?.(t);
                   },
                   onClick: () => {
                     (J || de) && (Pe(W, t) && xe ? (H(void 0), J?.(void 0)) : (H(t), J?.(t)));
                   },
                   onMouseMove: (h) => {
-                    ce(t), m(h.clientY), M(h.clientX);
+                    ne(t), m(h.clientY), N(h.clientX);
                   },
                   onMouseLeave: () => {
-                    ce(void 0), M(void 0), m(void 0), Z?.(void 0);
+                    ne(void 0), N(void 0), m(void 0), Q?.(void 0);
                   },
                   children: [
                     t.size ? /* @__PURE__ */ e.jsx(
                       pe.rect,
                       {
-                        width: a.bandwidth(),
+                        width: s.bandwidth(),
                         initial: "initial",
                         animate: R ? "whileInView" : "initial",
                         variants: {
                           initial: {
                             height: 0,
-                            x: a(`${t.id}`),
+                            x: s(`${t.id}`),
                             y: d(0),
-                            fill: o.filter((h) => h.color).length === 0 ? I[0] : t.color ? I[ie.indexOf(t.color)] : je.gray
+                            fill: o.filter((h) => h.color).length === 0 ? A[0] : t.color ? A[ie.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: o.filter((h) => h.color).length === 0 ? I[0] : t.color ? I[ie.indexOf(t.color)] : je.gray,
-                            transition: { duration: $.duration }
+                            x: s(`${t.id}`),
+                            fill: o.filter((h) => h.color).length === 0 ? A[0] : t.color ? A[ie.indexOf(t.color)] : je.gray,
+                            transition: { duration: O.duration }
                           }
                         },
                         exit: {
                           height: 0,
                           y: d(0),
-                          transition: { duration: $.duration }
+                          transition: { duration: O.duration }
                         }
                       }
                     ) : null,
                     ge ? /* @__PURE__ */ e.jsx(
-                      ct,
+                      dt,
                       {
                         value: `${t.label}`.length < D ? `${t.label}` : `${`${t.label}`.substring(0, D)}...`,
                         y: (t.size || 0) < 0 ? 0 : d(0) + 5,
-                        x: a(`${t.id}`),
-                        width: a.bandwidth(),
-                        height: (t.size || 0) < 0 ? d(0) - 5 : V.bottom,
+                        x: s(`${t.id}`),
+                        width: s.bandwidth(),
+                        height: (t.size || 0) < 0 ? d(0) - 5 : T.bottom,
                         style: w?.xAxis?.labels,
-                        className: T?.xAxis?.labels,
+                        className: z?.xAxis?.labels,
                         alignment: (t.size || 0) < 0 ? "bottom" : "top",
-                        animate: $,
+                        animate: O,
                         isInView: R
                       }
                     ) : null,
-                    Q ? /* @__PURE__ */ e.jsx(
+                    K ? /* @__PURE__ */ e.jsx(
                       pe.text,
                       {
                         style: {
@@ -1962,32 +1966,32 @@ function ft(fe) {
                         },
                         className: Ne(
                           "graph-value text-sm",
-                          !y && I.length > 1 ? " fill-primary-gray-600 dark:fill-primary-gray-300" : "",
-                          T?.graphObjectValues
+                          !y && A.length > 1 ? " fill-primary-gray-600 dark:fill-primary-gray-300" : "",
+                          z?.graphObjectValues
                         ),
                         dy: t.size ? t.size >= 0 ? "-5px" : "1em" : "-5px",
                         variants: {
                           initial: {
-                            x: a(`${t.id}`) + a.bandwidth() / 2,
+                            x: s(`${t.id}`) + s.bandwidth() / 2,
                             y: d(0),
                             opacity: 0,
-                            fill: y || (o.filter((h) => h.color).length === 0 ? I[0] : t.color ? I[ie.indexOf(t.color)] : je.gray)
+                            fill: y || (o.filter((h) => h.color).length === 0 ? A[0] : t.color ? A[ie.indexOf(t.color)] : je.gray)
                           },
                           whileInView: {
-                            x: a(`${t.id}`) + a.bandwidth() / 2,
+                            x: s(`${t.id}`) + s.bandwidth() / 2,
                             y: d(t.size || 0),
-                            fill: y || (o.filter((h) => h.color).length === 0 ? I[0] : t.color ? I[ie.indexOf(t.color)] : je.gray),
+                            fill: y || (o.filter((h) => h.color).length === 0 ? A[0] : t.color ? A[ie.indexOf(t.color)] : je.gray),
                             opacity: 1,
-                            transition: { duration: $.duration }
+                            transition: { duration: O.duration }
                           }
                         },
                         initial: "initial",
                         animate: R ? "whileInView" : "initial",
                         exit: {
                           opacity: 0,
-                          transition: { duration: $.duration }
+                          transition: { duration: O.duration }
                         },
-                        children: De(t.size, b, L, me, X)
+                        children: $e(t.size, b, I, me, X)
                       }
                     ) : null
                   ]
@@ -1995,35 +1999,35 @@ function ft(fe) {
                 t.label
               )
             ),
-            C ? /* @__PURE__ */ e.jsx(e.Fragment, { children: C.map((t, l) => /* @__PURE__ */ e.jsx(
-              nt,
+            C ? /* @__PURE__ */ e.jsx(e.Fragment, { children: C.map((t, a) => /* @__PURE__ */ e.jsx(
+              ct,
               {
                 text: t.text,
                 color: t.color,
                 y: d(t.value),
                 x1: 0 - _,
-                x2: k + V.right,
+                x2: k + T.right,
                 classNames: t.classNames,
                 styles: t.styles,
-                animate: $,
+                animate: O,
                 isInView: R
               },
-              l
+              a
             )) }) : null
           ] }),
-          B.filter((t) => t.position === "after").map((t) => t.layer)
+          S.filter((t) => t.position === "after").map((t) => t.layer)
         ] })
       }
     ),
-    A && U && se && P ? /* @__PURE__ */ e.jsx(
+    V && U && ee && P ? /* @__PURE__ */ e.jsx(
       Ge,
       {
-        data: A,
+        data: V,
         body: U,
-        xPos: se,
+        xPos: ee,
         yPos: P,
         backgroundStyle: w?.tooltip,
-        className: T?.tooltip
+        className: z?.tooltip
       }
     ) : null,
     de && W !== void 0 ? /* @__PURE__ */ e.jsx(
@@ -2045,56 +2049,56 @@ function ft(fe) {
     ) : null
   ] });
 }
-function yt(fe) {
+function bt(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G,
-    barPadding: I = 0.25,
+    barPadding: A = 0.25,
     showTicks: X = !0,
     leftMargin: me = 20,
     rightMargin: ue = 20,
     topMargin: ge = 20,
-    bottomMargin: Q = 25,
+    bottomMargin: K = 25,
     truncateBy: Y = 999,
     showLabels: ie = !0,
     showValues: D = !0,
-    backgroundColor: ne = !1,
+    backgroundColor: oe = !1,
     suffix: he = "",
     prefix: j = "",
     sources: _,
     graphDescription: U,
-    height: Z,
+    height: Q,
     width: C,
     footNote: p,
     colorDomain: F,
     colorLegendTitle: ae,
     padding: le,
     relativeHeight: J,
-    tooltip: ee,
-    onSeriesMouseOver: re,
+    tooltip: Z,
+    onSeriesMouseOver: se,
     refValues: E,
     showColorScale: xe = !0,
     graphID: de,
-    maxValue: z,
+    maxValue: $,
     minValue: y,
     highlightedDataPoints: x = [],
     onSeriesMouseClick: w,
-    graphDownload: T = !1,
-    dataDownload: N = !1,
-    language: $ = "en",
-    theme: L = "light",
-    sortData: B,
+    graphDownload: z = !1,
+    dataDownload: M = !1,
+    language: O = "en",
+    theme: I = "light",
+    sortData: S,
     labelOrder: b,
     showNAColor: v = !0,
     minHeight: R = 0,
-    maxBarThickness: V,
-    maxNumberOfBars: A,
-    minBarThickness: ce,
+    maxBarThickness: T,
+    maxNumberOfBars: V,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: H = !0,
-    detailsOnClick: se,
-    barAxisTitle: M,
+    detailsOnClick: ee,
+    barAxisTitle: N,
     noOfTicks: P = 5,
     valueColor: m,
     styles: k,
@@ -2102,63 +2106,63 @@ function yt(fe) {
     filterNA: d = !0,
     animate: u = !1,
     dimmedOpacity: n = 0.3,
-    precision: a = 2,
-    customLayers: s = [],
+    precision: s = 2,
+    customLayers: l = [],
     timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: l = "NA"
-  } = fe, [h, Oe] = S(0), [K, we] = S(0), [ve, Ce] = S(t.autoplay), oe = Be(
+    naLabel: a = "NA"
+  } = fe, [h, ve] = L(0), [Oe, ce] = L(0), [be, we] = L(t.autoplay), re = Be(
     Te(
       o.filter((i) => i.date !== void 0 && i.date !== null),
       (i) => i.date
     ).map((i) => Se(`${i.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (i, be) => tt(i, be)
-  ), [ye, c] = S(t.autoplay ? 0 : oe.length - 1), [te, r] = S(void 0), O = Me(null), it = Me(null);
+    (i, ye) => tt(i, ye)
+  ), [Ce, c] = L(t.autoplay ? 0 : re.length - 1), [te, Ve] = L(void 0), r = Me(null), B = Me(null);
   ze(() => {
-    const i = new ResizeObserver((be) => {
-      Oe(C || be[0].target.clientWidth || 620), we(Z || be[0].target.clientHeight || 480);
+    const i = new ResizeObserver((ye) => {
+      ve(C || ye[0].target.clientWidth || 620), ce(Q || ye[0].target.clientHeight || 480);
     });
-    return O.current && (we(O.current.clientHeight || 480), Oe(O.current.clientWidth || 620), C || i.observe(O.current)), () => i.disconnect();
-  }, [C, Z]), ze(() => {
+    return r.current && (ce(r.current.clientHeight || 480), ve(r.current.clientWidth || 620), C || i.observe(r.current)), () => i.disconnect();
+  }, [C, Q]), ze(() => {
     const i = setInterval(
       () => {
-        c((be) => be < oe.length - 1 ? be + 1 : 0);
+        c((ye) => ye < re.length - 1 ? ye + 1 : 0);
       },
       (t.speed || 2) * 1e3
     );
-    return ve || clearInterval(i), () => clearInterval(i);
-  }, [oe, ve, t.speed]);
-  const at = Fe(
-    oe,
-    ye,
+    return be || clearInterval(i), () => clearInterval(i);
+  }, [re, be, t.speed]);
+  const it = Fe(
+    re,
+    Ce,
     t.showOnlyActiveDate,
     t.dateFormat || "yyyy"
   );
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${L || "light"} flex  ${C ? "w-fit grow-0" : "w-full grow"}`,
-      dir: $ === "he" || $ === "ar" ? "rtl" : void 0,
+      className: `${I || "light"} flex  ${C ? "w-fit grow-0" : "w-full grow"}`,
+      dir: O === "he" || O === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: Ne(
-            `${ne ? ne === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${$ || "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"}`,
             f?.graphContainer
           ),
           style: {
             ...k?.graphContainer || {},
-            ...ne && ne !== !0 ? { backgroundColor: ne } : {}
+            ...oe && oe !== !0 ? { backgroundColor: oe } : {}
           },
           id: de,
-          ref: it,
+          ref: B,
           "aria-label": W || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${U ? ` ${U}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: ne ? le || "1rem" : le || 0 },
+              style: { padding: oe ? le || "1rem" : le || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                g || U || T || N ? /* @__PURE__ */ e.jsx(
+                g || U || z || M ? /* @__PURE__ */ e.jsx(
                   Je,
                   {
                     styles: {
@@ -2172,37 +2176,37 @@ function yt(fe) {
                     graphTitle: g,
                     graphDescription: U,
                     width: C,
-                    graphDownload: T ? it.current : void 0,
-                    dataDownload: N ? o.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? o.map((i) => i.data).filter((i) => i !== void 0) : o.filter((i) => i !== void 0) : null
+                    graphDownload: z ? B.current : void 0,
+                    dataDownload: M ? o.map((i) => i.data).filter((i) => i !== void 0).length > 0 ? o.map((i) => i.data).filter((i) => i !== void 0) : o.filter((i) => i !== void 0) : null
                   }
                 ) : null,
-                t.enabled && oe.length > 0 && at ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                t.enabled && re.length > 0 && it ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        Ce(!ve);
+                        we(!be);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
-                      "aria-label": ve ? "Click to pause animation" : "Click to play animation",
-                      children: ve ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
+                      "aria-label": be ? "Click to pause animation" : "Click to play animation",
+                      children: be ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     He,
                     {
-                      min: oe[0],
-                      max: oe[oe.length - 1],
-                      marks: at,
+                      min: re[0],
+                      max: re[re.length - 1],
+                      marks: it,
                       step: null,
-                      defaultValue: oe[oe.length - 1],
-                      value: oe[ye],
+                      defaultValue: re[re.length - 1],
+                      value: re[Ce],
                       onChangeComplete: (i) => {
-                        c(oe.indexOf(i));
+                        c(re.indexOf(i));
                       },
                       onChange: (i) => {
-                        c(oe.indexOf(i));
+                        c(re.indexOf(i));
                       },
                       "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                     }
@@ -2214,12 +2218,12 @@ function yt(fe) {
                     {
                       width: C,
                       colorLegendTitle: ae,
-                      colors: G || je[L].categoricalColors.colors,
+                      colors: G || je[I].categoricalColors.colors,
                       colorDomain: F || Te(
                         o.filter((i) => i.color),
                         "color"
                       ).map((i) => i.color),
-                      setSelectedColor: r,
+                      setSelectedColor: Ve,
                       showNAColor: v
                     }
                   ) : null,
@@ -2227,34 +2231,34 @@ function yt(fe) {
                     "div",
                     {
                       className: "flex grow flex-col justify-center w-full leading-0",
-                      ref: O,
+                      ref: r,
                       "aria-label": "Graph area",
-                      children: (C || h) && (Z || K) ? /* @__PURE__ */ e.jsx(
-                        ft,
+                      children: (C || h) && (Q || Oe) ? /* @__PURE__ */ e.jsx(
+                        yt,
                         {
-                          data: B === "asc" ? Ae(
+                          data: S === "asc" ? lt(
                             Le(o, t.dateFormat || "yyyy").filter(
-                              (i) => t.enabled ? i.date === $e(
-                                new Date(oe[ye]),
+                              (i) => t.enabled ? i.date === De(
+                                new Date(re[Ce]),
                                 t.dateFormat || "yyyy"
                               ) : i
                             ).filter((i) => d ? !q(i.size) : i),
                             (i) => i.size
-                          ).filter((i, be) => A ? be < A : !0) : B === "desc" ? Ae(
+                          ).filter((i, ye) => V ? ye < V : !0) : S === "desc" ? lt(
                             Le(o, t.dateFormat || "yyyy").filter(
-                              (i) => t.enabled ? i.date === $e(
-                                new Date(oe[ye]),
+                              (i) => t.enabled ? i.date === De(
+                                new Date(re[Ce]),
                                 t.dateFormat || "yyyy"
                               ) : i
                             ).filter((i) => d ? !q(i.size) : i),
                             (i) => i.size
-                          ).reverse().filter((i, be) => A ? be < A : !0) : Le(o, t.dateFormat || "yyyy").filter(
-                            (i) => t.enabled ? i.date === $e(
-                              new Date(oe[ye]),
+                          ).reverse().filter((i, ye) => V ? ye < V : !0) : Le(o, t.dateFormat || "yyyy").filter(
+                            (i) => t.enabled ? i.date === De(
+                              new Date(re[Ce]),
                               t.dateFormat || "yyyy"
                             ) : i
-                          ).filter((i) => d ? !q(i.size) : i).filter((i, be) => A ? be < A : !0),
-                          barColor: o.filter((i) => i.color).length === 0 ? G ? [G] : [je.primaryColors["blue-600"]] : G || je[L].categoricalColors.colors,
+                          ).filter((i) => d ? !q(i.size) : i).filter((i, ye) => V ? ye < V : !0),
+                          barColor: o.filter((i) => i.color).length === 0 ? G ? [G] : [je.primaryColors["blue-600"]] : G || je[I].categoricalColors.colors,
                           colorDomain: o.filter((i) => i.color).length === 0 ? [] : F || Te(
                             o.filter((i) => i.color),
                             "color"
@@ -2263,11 +2267,11 @@ function yt(fe) {
                           refValues: E,
                           height: Math.max(
                             R,
-                            Z || (J ? R ? (C || h) * J > R ? (C || h) * J : R : (C || h) * J : K)
+                            Q || (J ? R ? (C || h) * J > R ? (C || h) * J : R : (C || h) * J : Oe)
                           ),
                           suffix: he,
                           prefix: j,
-                          barPadding: I,
+                          barPadding: A,
                           showLabels: ie,
                           showValues: D,
                           showTicks: X,
@@ -2276,14 +2280,14 @@ function yt(fe) {
                           rightMargin: ue,
                           selectedColor: te,
                           topMargin: ge,
-                          bottomMargin: Q,
-                          tooltip: ee,
-                          onSeriesMouseOver: re,
-                          maxValue: q(z) ? Math.max(
+                          bottomMargin: K,
+                          tooltip: Z,
+                          onSeriesMouseOver: se,
+                          maxValue: q($) ? Math.max(
                             ...o.filter((i) => !q(i.size)).map((i) => i.size)
                           ) < 0 ? 0 : Math.max(
                             ...o.filter((i) => !q(i.size)).map((i) => i.size)
-                          ) : z,
+                          ) : $,
                           minValue: q(y) ? Math.min(
                             ...o.filter((i) => !q(i.size)).map((i) => i.size)
                           ) >= 0 ? 0 : Math.min(
@@ -2292,20 +2296,20 @@ function yt(fe) {
                           highlightedDataPoints: x,
                           onSeriesMouseClick: w,
                           labelOrder: b,
-                          maxBarThickness: V,
-                          minBarThickness: ce,
+                          maxBarThickness: T,
+                          minBarThickness: ne,
                           resetSelectionOnDoubleClick: H,
-                          detailsOnClick: se,
-                          barAxisTitle: M,
+                          detailsOnClick: ee,
+                          barAxisTitle: N,
                           noOfTicks: P,
                           valueColor: m,
                           styles: k,
                           classNames: f,
                           animate: u === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : u || { duration: 0, once: !0, amount: 0 },
                           dimmedOpacity: n,
-                          precision: a,
-                          customLayers: s,
-                          naLabel: l
+                          precision: s,
+                          customLayers: l,
+                          naLabel: a
                         }
                       ) : null
                     }
@@ -2332,59 +2336,59 @@ function yt(fe) {
     }
   );
 }
-function bt(fe) {
+function vt(fe) {
   const {
     data: o,
     width: g,
     height: G,
-    barColors: I,
+    barColors: A,
     suffix: X,
     prefix: me,
     barPadding: ue,
     showLabels: ge,
-    showValues: Q,
+    showValues: K,
     showTicks: Y,
     truncateBy: ie,
     leftMargin: D,
-    rightMargin: ne,
+    rightMargin: oe,
     topMargin: he,
     bottomMargin: j,
     tooltip: _,
     onSeriesMouseOver: U,
-    refValues: Z,
+    refValues: Q,
     maxValue: C,
     minValue: p,
     onSeriesMouseClick: F,
     selectedColor: ae,
     labelOrder: le,
     maxBarThickness: J,
-    resetSelectionOnDoubleClick: ee,
-    detailsOnClick: re,
+    resetSelectionOnDoubleClick: Z,
+    detailsOnClick: se,
     barAxisTitle: E,
     valueColor: xe,
     noOfTicks: de,
-    styles: z,
+    styles: $,
     classNames: y,
     animate: x,
     colorDomain: w,
-    precision: T,
-    customLayers: N,
-    naLabel: $
-  } = fe, L = Me(null), B = Ee(L, {
+    precision: z,
+    customLayers: M,
+    naLabel: O
+  } = fe, I = Me(null), S = Ee(I, {
     once: x.once,
     amount: x.amount
   }), b = {
     top: he,
     bottom: j,
     left: E ? D + 30 : D,
-    right: ne
-  }, [v, R] = S(void 0), [V, A] = S(void 0), [ce, W] = S(void 0), [H, se] = S(void 0), M = g - b.left - b.right, P = G - b.top - b.bottom, m = Re().domain([p, C]).range([P, 0]).nice(), k = o.map((a, s) => ({
-    ...a,
-    id: le ? `${a.label}` : `${s}`
-  })), f = le || k.map((a) => `${a.id}`), d = Ie().domain(f).range([
+    right: oe
+  }, [v, R] = L(void 0), [T, V] = L(void 0), [ne, W] = L(void 0), [H, ee] = L(void 0), N = g - b.left - b.right, P = G - b.top - b.bottom, m = Re().domain([p, C]).range([P, 0]).nice(), k = o.map((s, l) => ({
+    ...s,
+    id: le ? `${s.label}` : `${l}`
+  })), f = le || k.map((s) => `${s.id}`), d = Ie().domain(f).range([
     0,
-    J ? Math.min(M, J * f.length) : M
-  ]).paddingInner(ue), u = Ie().domain(o[0].size.map((a, s) => `${s}`)).range([0, d.bandwidth()]).paddingInner(0.1), n = m.ticks(de);
+    J ? Math.min(N, J * f.length) : N
+  ]).paddingInner(ue), u = Ie().domain(o[0].size.map((s, l) => `${l}`)).range([0, d.bandwidth()]).paddingInner(0.1), n = m.ticks(de);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       pe.svg,
@@ -2393,7 +2397,7 @@ function bt(fe) {
         height: `${G}px`,
         viewBox: `0 0 ${g} ${G}`,
         direction: "ltr",
-        ref: L,
+        ref: I,
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${b.left},${b.top})`, children: [
           /* @__PURE__ */ e.jsx(
             _e,
@@ -2401,11 +2405,11 @@ function bt(fe) {
               y1: m(p < 0 ? 0 : p),
               y2: m(p < 0 ? 0 : p),
               x1: 0 - D,
-              x2: M + b.right,
-              label: De(
+              x2: N + b.right,
+              label: $e(
                 p < 0 ? 0 : p,
-                $,
-                T,
+                O,
+                z,
                 me,
                 X
               ),
@@ -2419,19 +2423,19 @@ function bt(fe) {
                 axis: y?.xAxis?.axis,
                 label: y?.yAxis?.labels
               },
-              styles: { axis: z?.xAxis?.axis, label: z?.yAxis?.labels }
+              styles: { axis: $?.xAxis?.axis, label: $?.yAxis?.labels }
             }
           ),
           Y ? /* @__PURE__ */ e.jsx(
-            dt,
+            ht,
             {
-              values: n.filter((a) => a !== 0),
-              y: n.filter((a) => a !== 0).map((a) => m(a)),
+              values: n.filter((s) => s !== 0),
+              y: n.filter((s) => s !== 0).map((s) => m(s)),
               x1: 0 - D,
-              x2: M + b.right,
+              x2: N + b.right,
               styles: {
-                gridLines: z?.yAxis?.gridLines,
-                labels: z?.yAxis?.labels
+                gridLines: $?.yAxis?.gridLines,
+                labels: $?.yAxis?.labels
               },
               classNames: {
                 gridLines: y?.yAxis?.gridLines,
@@ -2442,7 +2446,7 @@ function bt(fe) {
               labelType: "secondary",
               showGridLines: !0,
               labelPos: "vertical",
-              precision: T
+              precision: z
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
@@ -2450,49 +2454,49 @@ function bt(fe) {
             {
               x: 0 - D - 15,
               y: P / 2,
-              style: z?.yAxis?.title,
+              style: $?.yAxis?.title,
               className: y?.yAxis?.title,
               text: E,
               rotate90: !0
             }
           ),
-          N.filter((a) => a.position === "before").map((a) => a.layer),
+          M.filter((s) => s.position === "before").map((s) => s.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             k.map(
-              (a) => q(d(a.id)) ? null : /* @__PURE__ */ e.jsxs(
+              (s) => q(d(s.id)) ? null : /* @__PURE__ */ e.jsxs(
                 pe.g,
                 {
                   variants: {
                     initial: {
-                      x: d(`${a.id}`),
+                      x: d(`${s.id}`),
                       y: 0
                     },
                     whileInView: {
-                      x: d(`${a.id}`),
+                      x: d(`${s.id}`),
                       y: 0,
                       transition: { duration: x.duration }
                     }
                   },
                   initial: "initial",
-                  animate: B ? "whileInView" : "initial",
+                  animate: S ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: x.duration } },
                   children: [
-                    a.size.map((s, t) => /* @__PURE__ */ e.jsxs(
+                    s.size.map((l, t) => /* @__PURE__ */ e.jsxs(
                       pe.g,
                       {
                         className: "undp-viz-g-with-hover",
-                        opacity: ae ? I[t] === ae ? 1 : 0.3 : 0.85,
-                        onMouseEnter: (l) => {
-                          R({ ...a, sizeIndex: t }), se(l.clientY), W(l.clientX), U?.({ ...a, sizeIndex: t });
+                        opacity: ae ? A[t] === ae ? 1 : 0.3 : 0.85,
+                        onMouseEnter: (a) => {
+                          R({ ...s, sizeIndex: t }), ee(a.clientY), W(a.clientX), U?.({ ...s, sizeIndex: t });
                         },
-                        onMouseMove: (l) => {
-                          R({ ...a, sizeIndex: t }), se(l.clientY), W(l.clientX);
+                        onMouseMove: (a) => {
+                          R({ ...s, sizeIndex: t }), ee(a.clientY), W(a.clientX);
                         },
                         onMouseLeave: () => {
-                          R(void 0), W(void 0), se(void 0), U?.(void 0);
+                          R(void 0), W(void 0), ee(void 0), U?.(void 0);
                         },
                         onClick: () => {
-                          (F || re) && (Pe(V, { ...a, sizeIndex: t }) && ee ? (A(void 0), F?.(void 0)) : (A({ ...a, sizeIndex: t }), F && F({ ...a, sizeIndex: t })));
+                          (F || se) && (Pe(T, { ...s, sizeIndex: t }) && Z ? (V(void 0), F?.(void 0)) : (V({ ...s, sizeIndex: t }), F && F({ ...s, sizeIndex: t })));
                         },
                         children: [
                           /* @__PURE__ */ e.jsx(
@@ -2504,12 +2508,12 @@ function bt(fe) {
                                 initial: {
                                   height: 0,
                                   y: m(0),
-                                  fill: I[t]
+                                  fill: A[t]
                                 },
                                 whileInView: {
-                                  height: q(s) ? 0 : Math.abs(m(s) - m(0)),
-                                  y: q(s) ? m(0) : s > 0 ? m(s) : m(0),
-                                  fill: I[t],
+                                  height: q(l) ? 0 : Math.abs(m(l) - m(0)),
+                                  y: q(l) ? m(0) : l > 0 ? m(l) : m(0),
+                                  fill: A[t],
                                   transition: { duration: x.duration }
                                 }
                               },
@@ -2519,203 +2523,203 @@ function bt(fe) {
                                 transition: { duration: x.duration }
                               },
                               initial: "initial",
-                              animate: B ? "whileInView" : "initial"
+                              animate: S ? "whileInView" : "initial"
                             }
                           ),
-                          Q ? /* @__PURE__ */ e.jsx(
+                          K ? /* @__PURE__ */ e.jsx(
                             pe.text,
                             {
                               x: u(`${t}`) + u.bandwidth() / 2,
                               style: {
-                                fill: xe || I[t],
+                                fill: xe || A[t],
                                 textAnchor: "middle",
-                                ...z?.graphObjectValues || {}
+                                ...$?.graphObjectValues || {}
                               },
                               className: Ne("graph-value text-sm", y?.graphObjectValues),
-                              dy: s ? s >= 0 ? "-5px" : "1em" : "-5px",
+                              dy: l ? l >= 0 ? "-5px" : "1em" : "-5px",
                               variants: {
                                 initial: { y: m(0), opacity: 0 },
                                 whileInView: {
-                                  y: m(s || 0),
+                                  y: m(l || 0),
                                   opacity: 1,
                                   transition: { duration: x.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: B ? "whileInView" : "initial",
+                              animate: S ? "whileInView" : "initial",
                               exit: {
                                 opacity: 0,
                                 transition: { duration: x.duration }
                               },
-                              children: De(s, $, T, me, X)
+                              children: $e(l, O, z, me, X)
                             }
                           ) : null
                         ]
                       },
-                      `${a.label}-${w[t] || t}`
+                      `${s.label}-${w[t] || t}`
                     )),
                     ge ? /* @__PURE__ */ e.jsx(
-                      ct,
+                      dt,
                       {
-                        value: `${a.label}`.length < ie ? `${a.label}` : `${`${a.label}`.substring(0, ie)}...`,
+                        value: `${s.label}`.length < ie ? `${s.label}` : `${`${s.label}`.substring(0, ie)}...`,
                         y: m(0) + 5,
                         x: 0,
                         width: d.bandwidth(),
                         height: b.bottom,
-                        style: z?.xAxis?.labels,
+                        style: $?.xAxis?.labels,
                         className: y?.xAxis?.labels,
                         alignment: "top",
                         animate: x,
-                        isInView: B
+                        isInView: S
                       }
                     ) : null
                   ]
                 },
-                a.label
+                s.label
               )
             ),
-            Z ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Z.map((a, s) => /* @__PURE__ */ e.jsx(
-              nt,
+            Q ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Q.map((s, l) => /* @__PURE__ */ e.jsx(
+              ct,
               {
-                text: a.text,
-                color: a.color,
-                y: m(a.value),
+                text: s.text,
+                color: s.color,
+                y: m(s.value),
                 x1: 0 - D,
-                x2: M + b.right,
-                classNames: a.classNames,
-                styles: a.styles,
+                x2: N + b.right,
+                classNames: s.classNames,
+                styles: s.styles,
                 animate: x,
-                isInView: B
+                isInView: S
               },
-              s
+              l
             )) }) : null
           ] }),
-          N.filter((a) => a.position === "after").map((a) => a.layer)
+          M.filter((s) => s.position === "after").map((s) => s.layer)
         ] })
       }
     ),
-    v && _ && ce && H ? /* @__PURE__ */ e.jsx(
+    v && _ && ne && H ? /* @__PURE__ */ e.jsx(
       Ge,
       {
         data: v,
         body: _,
-        xPos: ce,
+        xPos: ne,
         yPos: H,
-        backgroundStyle: z?.tooltip,
+        backgroundStyle: $?.tooltip,
         className: y?.tooltip
       }
     ) : null,
-    re && V !== void 0 ? /* @__PURE__ */ e.jsx(
+    se && T !== void 0 ? /* @__PURE__ */ e.jsx(
       We,
       {
-        open: V !== void 0,
+        open: T !== void 0,
         onClose: () => {
-          A(void 0);
+          V(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof re == "string" ? { __html: Xe(re, V) } : void 0,
-            children: typeof re == "function" ? re(V) : null
+            dangerouslySetInnerHTML: typeof se == "string" ? { __html: Xe(se, T) } : void 0,
+            children: typeof se == "function" ? se(T) : null
           }
         )
       }
     ) : null
   ] });
 }
-function vt(fe) {
+function wt(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G = je.light.categoricalColors.colors,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me = 0.25,
     showTicks: ue = !0,
     leftMargin: ge = 20,
-    rightMargin: Q = 20,
+    rightMargin: K = 20,
     topMargin: Y = 20,
     bottomMargin: ie = 25,
     truncateBy: D = 999,
-    showLabels: ne = !0,
+    showLabels: oe = !0,
     showValues: he = !0,
     backgroundColor: j = !1,
     suffix: _ = "",
     prefix: U = "",
-    height: Z,
+    height: Q,
     width: C,
     footNote: p,
     colorDomain: F,
     colorLegendTitle: ae,
     padding: le,
     relativeHeight: J,
-    tooltip: ee,
-    onSeriesMouseOver: re,
+    tooltip: Z,
+    onSeriesMouseOver: se,
     refValues: E,
     graphID: xe,
     maxValue: de,
-    minValue: z,
+    minValue: $,
     onSeriesMouseClick: y,
     graphDownload: x = !1,
     dataDownload: w = !1,
-    language: T = "en",
-    theme: N = "light",
-    labelOrder: $,
-    minHeight: L = 0,
-    maxBarThickness: B,
+    language: z = "en",
+    theme: M = "light",
+    labelOrder: O,
+    minHeight: I = 0,
+    maxBarThickness: S,
     ariaLabel: b,
     resetSelectionOnDoubleClick: v = !0,
     detailsOnClick: R,
-    barAxisTitle: V,
-    noOfTicks: A = 5,
-    valueColor: ce,
+    barAxisTitle: T,
+    noOfTicks: V = 5,
+    valueColor: ne,
     styles: W,
     classNames: H,
-    filterNA: se = !0,
-    showColorScale: M = !0,
+    filterNA: ee = !0,
+    showColorScale: N = !0,
     animate: P = !1,
     precision: m = 2,
     customLayers: k = [],
     timeline: f = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
     naLabel: d = "NA"
-  } = fe, [u, n] = S(0), [a, s] = S(0), [t, l] = S(f.autoplay), h = Be(
+  } = fe, [u, n] = L(0), [s, l] = L(0), [t, a] = L(f.autoplay), h = Be(
     Te(
       o.filter((c) => c.date !== void 0 && c.date !== null),
       (c) => c.date
     ).map((c) => Se(`${c.date}`, f.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
     (c, te) => tt(c, te)
-  ), [Oe, K] = S(f.autoplay ? 0 : h.length - 1), [we, ve] = S(void 0), Ce = Me(null), oe = Me(null);
+  ), [ve, Oe] = L(f.autoplay ? 0 : h.length - 1), [ce, be] = L(void 0), we = Me(null), re = Me(null);
   ze(() => {
     const c = new ResizeObserver((te) => {
-      n(C || te[0].target.clientWidth || 620), s(Z || te[0].target.clientHeight || 480);
+      n(C || te[0].target.clientWidth || 620), l(Q || te[0].target.clientHeight || 480);
     });
-    return Ce.current && (s(Ce.current.clientHeight || 480), n(Ce.current.clientWidth || 620), C || c.observe(Ce.current)), () => c.disconnect();
-  }, [C, Z]), ze(() => {
+    return we.current && (l(we.current.clientHeight || 480), n(we.current.clientWidth || 620), C || c.observe(we.current)), () => c.disconnect();
+  }, [C, Q]), ze(() => {
     const c = setInterval(
       () => {
-        K((te) => te < h.length - 1 ? te + 1 : 0);
+        Oe((te) => te < h.length - 1 ? te + 1 : 0);
       },
       (f.speed || 2) * 1e3
     );
     return t || clearInterval(c), () => clearInterval(c);
   }, [h, t, f.speed]);
-  const ye = Fe(
+  const Ce = Fe(
     h,
-    Oe,
+    ve,
     f.showOnlyActiveDate,
     f.dateFormat || "yyyy"
   );
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${N || "light"} flex  ${C ? "w-fit grow-0" : "w-full grow"}`,
-      dir: T === "he" || T === "ar" ? "rtl" : void 0,
+      className: `${M || "light"} flex  ${C ? "w-fit grow-0" : "w-full grow"}`,
+      dir: z === "he" || z === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: Ne(
-            `${j ? j === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${T || "en"}`,
+            `${j ? j === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${z || "en"}`,
             H?.graphContainer
           ),
           style: {
@@ -2723,7 +2727,7 @@ function vt(fe) {
             ...j && j !== !0 ? { backgroundColor: j } : {}
           },
           id: xe,
-          ref: oe,
+          ref: re,
           "aria-label": b || `${g ? `The graph shows ${g}. ` : ""}This is a grouped bar chart. ${X ? ` ${X}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
@@ -2745,17 +2749,17 @@ function vt(fe) {
                     graphTitle: g,
                     graphDescription: X,
                     width: C,
-                    graphDownload: x ? oe.current : void 0,
+                    graphDownload: x ? re.current : void 0,
                     dataDownload: w ? o.map((c) => c.data).filter((c) => c !== void 0).length > 0 ? o.map((c) => c.data).filter((c) => c !== void 0) : o.filter((c) => c !== void 0) : null
                   }
                 ) : null,
-                f.enabled && h.length > 0 && ye ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                f.enabled && h.length > 0 && Ce ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => {
-                        l(!t);
+                        a(!t);
                       },
                       className: "p-0 border-0 cursor-pointer bg-transparent",
                       "aria-label": t ? "Click to pause animation" : "Click to play animation",
@@ -2767,63 +2771,63 @@ function vt(fe) {
                     {
                       min: h[0],
                       max: h[h.length - 1],
-                      marks: ye,
+                      marks: Ce,
                       step: null,
                       defaultValue: h[h.length - 1],
-                      value: h[Oe],
+                      value: h[ve],
                       onChangeComplete: (c) => {
-                        K(h.indexOf(c));
+                        Oe(h.indexOf(c));
                       },
                       onChange: (c) => {
-                        K(h.indexOf(c));
+                        Oe(h.indexOf(c));
                       },
                       "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: o.length === 0 ? /* @__PURE__ */ e.jsx(Qe, {}) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                  M ? /* @__PURE__ */ e.jsx(
+                  N ? /* @__PURE__ */ e.jsx(
                     Ke,
                     {
                       width: C,
                       colorDomain: F,
                       colors: G,
                       colorLegendTitle: ae,
-                      setSelectedColor: ve,
+                      setSelectedColor: be,
                       showNAColor: !1
                     }
                   ) : null,
-                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: Ce, "aria-label": "Graph area", children: (C || u) && (Z || a) ? /* @__PURE__ */ e.jsx(
-                    bt,
+                  /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: we, "aria-label": "Graph area", children: (C || u) && (Q || s) ? /* @__PURE__ */ e.jsx(
+                    vt,
                     {
-                      data: Ve(
+                      data: Ae(
                         o,
                         f.dateFormat || "yyyy"
                       ).filter(
-                        (c) => f.enabled ? c.date === $e(
-                          new Date(h[Oe]),
+                        (c) => f.enabled ? c.date === De(
+                          new Date(h[ve]),
                           f.dateFormat || "yyyy"
                         ) : c
-                      ).filter((c) => se ? !c.size.every((te) => te == null) : c),
+                      ).filter((c) => ee ? !c.size.every((te) => te == null) : c),
                       barColors: G,
                       width: C || u,
                       height: Math.max(
-                        L,
-                        Z || (J ? L ? (C || u) * J > L ? (C || u) * J : L : (C || u) * J : a)
+                        I,
+                        Q || (J ? I ? (C || u) * J > I ? (C || u) * J : I : (C || u) * J : s)
                       ),
                       suffix: _,
                       prefix: U,
                       barPadding: me,
-                      showLabels: ne,
+                      showLabels: oe,
                       showValues: he,
                       showTicks: ue,
                       truncateBy: D,
                       leftMargin: ge,
-                      rightMargin: Q,
+                      rightMargin: K,
                       topMargin: Y,
                       bottomMargin: ie,
-                      tooltip: ee,
-                      onSeriesMouseOver: re,
+                      tooltip: Z,
+                      onSeriesMouseOver: se,
                       refValues: E,
                       maxValue: q(de) ? Math.max(
                         ...o.map(
@@ -2842,7 +2846,7 @@ function vt(fe) {
                           )
                         )
                       ) : de,
-                      minValue: q(z) ? Math.min(
+                      minValue: q($) ? Math.min(
                         ...o.map(
                           (c) => Math.min(
                             ...c.size.filter(
@@ -2858,16 +2862,16 @@ function vt(fe) {
                             )
                           )
                         )
-                      ) : z,
+                      ) : $,
                       onSeriesMouseClick: y,
-                      selectedColor: we,
-                      labelOrder: $,
-                      maxBarThickness: B,
+                      selectedColor: ce,
+                      labelOrder: O,
+                      maxBarThickness: S,
                       resetSelectionOnDoubleClick: v,
                       detailsOnClick: R,
-                      barAxisTitle: V,
-                      noOfTicks: A,
-                      valueColor: ce,
+                      barAxisTitle: T,
+                      noOfTicks: V,
+                      valueColor: ne,
                       styles: W,
                       classNames: H,
                       animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
@@ -2878,7 +2882,7 @@ function vt(fe) {
                     }
                   ) : null })
                 ] }) }),
-                I || p ? /* @__PURE__ */ e.jsx(
+                A || p ? /* @__PURE__ */ e.jsx(
                   Ue,
                   {
                     styles: { footnote: W?.footnote, source: W?.source },
@@ -2886,7 +2890,7 @@ function vt(fe) {
                       footnote: H?.footnote,
                       source: H?.source
                     },
-                    sources: I,
+                    sources: A,
                     footNote: p,
                     width: C
                   }
@@ -2899,58 +2903,58 @@ function vt(fe) {
     }
   );
 }
-function wt(fe) {
+function Ct(fe) {
   const {
     data: o,
     width: g,
     height: G,
-    barColors: I,
+    barColors: A,
     barPadding: X,
     showLabels: me,
     showTicks: ue,
     truncateBy: ge,
-    leftMargin: Q,
+    leftMargin: K,
     topMargin: Y,
     bottomMargin: ie,
     rightMargin: D,
-    tooltip: ne,
+    tooltip: oe,
     onSeriesMouseOver: he,
     suffix: j,
     prefix: _,
     showValues: U,
-    refValues: Z,
+    refValues: Q,
     maxValue: C,
     onSeriesMouseClick: p,
     selectedColor: F,
     labelOrder: ae,
     maxBarThickness: le,
     minBarThickness: J,
-    resetSelectionOnDoubleClick: ee,
-    detailsOnClick: re,
+    resetSelectionOnDoubleClick: Z,
+    detailsOnClick: se,
     barAxisTitle: E,
     valueColor: xe,
     noOfTicks: de,
-    styles: z,
+    styles: $,
     classNames: y,
     animate: x,
     colorDomain: w,
-    precision: T,
-    customLayers: N,
-    naLabel: $
-  } = fe, L = Me(null), B = Ee(L, {
+    precision: z,
+    customLayers: M,
+    naLabel: O
+  } = fe, I = Me(null), S = Ee(I, {
     once: x.once,
     amount: x.amount
   }), b = {
     top: Y,
     bottom: ie,
-    left: E ? Q + 30 : Q,
+    left: E ? K + 30 : K,
     right: D
-  }, [v, R] = S(void 0), [V, A] = S(void 0), [ce, W] = S(void 0), [H, se] = S(void 0), M = g - b.left - b.right, P = G - b.top - b.bottom, m = Re().domain([0, C]).range([P, 0]).nice(), k = o.map((n, a) => ({
+  }, [v, R] = L(void 0), [T, V] = L(void 0), [ne, W] = L(void 0), [H, ee] = L(void 0), N = g - b.left - b.right, P = G - b.top - b.bottom, m = Re().domain([0, C]).range([P, 0]).nice(), k = o.map((n, s) => ({
     ...n,
-    id: ae ? `${n.label}` : `${a}`
+    id: ae ? `${n.label}` : `${s}`
   })), f = ae || k.map((n) => `${n.id}`), d = Ie().domain(f).range([
     0,
-    J ? Math.max(M, J * f.length) : le ? Math.min(M, le * f.length) : M
+    J ? Math.max(N, J * f.length) : le ? Math.min(N, le * f.length) : N
   ]).paddingInner(X), u = m.ticks(de);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
@@ -2960,18 +2964,18 @@ function wt(fe) {
         height: `${G}px`,
         viewBox: `0 0 ${g} ${G}`,
         direction: "ltr",
-        ref: L,
+        ref: I,
         children: /* @__PURE__ */ e.jsxs("g", { transform: `translate(${b.left},${b.top})`, children: [
           /* @__PURE__ */ e.jsx(
             _e,
             {
               y1: m(0),
               y2: m(0),
-              x1: 0 - Q,
-              x2: M + b.right,
-              label: De(0, $, T, _, j),
+              x1: 0 - K,
+              x2: N + b.right,
+              label: $e(0, O, z, _, j),
               labelPos: {
-                x: 0 - Q,
+                x: 0 - K,
                 y: m(0),
                 dx: 0,
                 dy: -5
@@ -2980,19 +2984,19 @@ function wt(fe) {
                 axis: y?.xAxis?.axis,
                 label: y?.yAxis?.labels
               },
-              styles: { axis: z?.xAxis?.axis, label: z?.yAxis?.labels }
+              styles: { axis: $?.xAxis?.axis, label: $?.yAxis?.labels }
             }
           ),
           ue ? /* @__PURE__ */ e.jsx(
-            dt,
+            ht,
             {
               values: u.filter((n) => n !== 0),
               y: u.filter((n) => n !== 0).map((n) => m(n)),
-              x1: 0 - Q,
-              x2: M + b.right,
+              x1: 0 - K,
+              x2: N + b.right,
               styles: {
-                gridLines: z?.yAxis?.gridLines,
-                labels: z?.yAxis?.labels
+                gridLines: $?.yAxis?.gridLines,
+                labels: $?.yAxis?.labels
               },
               classNames: {
                 gridLines: y?.yAxis?.gridLines,
@@ -3003,21 +3007,21 @@ function wt(fe) {
               labelType: "secondary",
               showGridLines: !0,
               labelPos: "vertical",
-              precision: T
+              precision: z
             }
           ) : null,
           /* @__PURE__ */ e.jsx(
             Ye,
             {
-              x: 0 - Q - 15,
+              x: 0 - K - 15,
               y: P / 2,
-              style: z?.yAxis?.title,
+              style: $?.yAxis?.title,
               className: y?.yAxis?.title,
               text: E,
               rotate90: !0
             }
           ),
-          N.filter((n) => n.position === "before").map((n) => n.layer),
+          M.filter((n) => n.position === "before").map((n) => n.layer),
           /* @__PURE__ */ e.jsxs(qe, { children: [
             k.map(
               (n) => q(d(n.id)) ? null : /* @__PURE__ */ e.jsxs(
@@ -3034,24 +3038,24 @@ function wt(fe) {
                   },
                   transition: { duration: x.duration },
                   initial: "initial",
-                  animate: B ? "whileInView" : "initial",
+                  animate: S ? "whileInView" : "initial",
                   exit: { opacity: 0, transition: { duration: x.duration } },
                   children: [
-                    n.size.map((a, s) => /* @__PURE__ */ e.jsxs(
+                    n.size.map((s, l) => /* @__PURE__ */ e.jsxs(
                       pe.g,
                       {
-                        opacity: F ? I[s] === F ? 1 : 0.3 : 1,
+                        opacity: F ? A[l] === F ? 1 : 0.3 : 1,
                         onMouseEnter: (t) => {
-                          R({ ...n, sizeIndex: s }), se(t.clientY), W(t.clientX), he?.({ ...n, sizeIndex: s });
+                          R({ ...n, sizeIndex: l }), ee(t.clientY), W(t.clientX), he?.({ ...n, sizeIndex: l });
                         },
                         onMouseMove: (t) => {
-                          R({ ...n, sizeIndex: s }), se(t.clientY), W(t.clientX);
+                          R({ ...n, sizeIndex: l }), ee(t.clientY), W(t.clientX);
                         },
                         onMouseLeave: () => {
-                          R(void 0), W(void 0), se(void 0), he?.(void 0);
+                          R(void 0), W(void 0), ee(void 0), he?.(void 0);
                         },
                         onClick: () => {
-                          (p || re) && (Pe(V, { ...n, sizeIndex: s }) && ee ? (A(void 0), p?.(void 0)) : (A({ ...n, sizeIndex: s }), p && p({ ...n, sizeIndex: s })));
+                          (p || se) && (Pe(T, { ...n, sizeIndex: l }) && Z ? (V(void 0), p?.(void 0)) : (V({ ...n, sizeIndex: l }), p && p({ ...n, sizeIndex: l })));
                         },
                         children: [
                           /* @__PURE__ */ e.jsx(
@@ -3062,20 +3066,20 @@ function wt(fe) {
                               variants: {
                                 initial: {
                                   height: 0,
-                                  fill: I[s],
+                                  fill: A[l],
                                   y: m(0)
                                 },
                                 whileInView: {
                                   height: Math.abs(
-                                    m(ke(n.size.filter((t, l) => l <= s && t))) - m(ke(n.size.filter((t, l) => l < s && t)))
+                                    m(ke(n.size.filter((t, a) => a <= l && t))) - m(ke(n.size.filter((t, a) => a < l && t)))
                                   ),
-                                  y: m(ke(n.size.filter((t, l) => l <= s && t))),
-                                  fill: I[s],
+                                  y: m(ke(n.size.filter((t, a) => a <= l && t))),
+                                  fill: A[l],
                                   transition: { duration: x.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: B ? "whileInView" : "initial",
+                              animate: S ? "whileInView" : "initial",
                               exit: {
                                 height: 0,
                                 y: m(0),
@@ -3088,9 +3092,9 @@ function wt(fe) {
                             {
                               x: d.bandwidth() / 2,
                               style: {
-                                fill: lt(I[s]),
+                                fill: at(A[l]),
                                 textAnchor: "middle",
-                                ...z?.graphObjectValues || {}
+                                ...$?.graphObjectValues || {}
                               },
                               className: Ne("graph-value text-sm", y?.graphObjectValues),
                               dy: "0.33em",
@@ -3098,42 +3102,42 @@ function wt(fe) {
                                 initial: {
                                   y: m(0),
                                   opacity: 0,
-                                  fill: lt(I[s])
+                                  fill: at(A[l])
                                 },
                                 whileInView: {
-                                  y: m(ke(n.size.filter((t, l) => l <= s && t))) + Math.abs(
-                                    m(ke(n.size.filter((t, l) => l <= s && t))) - m(ke(n.size.filter((t, l) => l < s && t)))
+                                  y: m(ke(n.size.filter((t, a) => a <= l && t))) + Math.abs(
+                                    m(ke(n.size.filter((t, a) => a <= l && t))) - m(ke(n.size.filter((t, a) => a < l && t)))
                                   ) / 2,
-                                  opacity: a && Math.abs(
-                                    m(ke(n.size.filter((t, l) => l <= s && t))) - m(ke(n.size.filter((t, l) => l < s && t)))
+                                  opacity: s && Math.abs(
+                                    m(ke(n.size.filter((t, a) => a <= l && t))) - m(ke(n.size.filter((t, a) => a < l && t)))
                                   ) > 20 ? 1 : 0,
-                                  fill: lt(I[s]),
+                                  fill: at(A[l]),
                                   transition: { duration: x.duration }
                                 }
                               },
                               initial: "initial",
-                              animate: B ? "whileInView" : "initial",
+                              animate: S ? "whileInView" : "initial",
                               exit: { opacity: 0, transition: { duration: x.duration } },
-                              children: De(a, $, T, _, j)
+                              children: $e(s, O, z, _, j)
                             }
                           ) : null
                         ]
                       },
-                      `${n.label}-${w[s] || s}`
+                      `${n.label}-${w[l] || l}`
                     )),
                     me ? /* @__PURE__ */ e.jsx(
-                      ct,
+                      dt,
                       {
                         value: `${n.label}`.length < ge ? `${n.label}` : `${`${n.label}`.substring(0, ge)}...`,
                         y: m(0) + 5,
                         x: 0,
                         width: d.bandwidth(),
                         height: b.bottom,
-                        style: z?.xAxis?.labels,
+                        style: $?.xAxis?.labels,
                         className: y?.xAxis?.labels,
                         alignment: "top",
                         animate: x,
-                        isInView: B
+                        isInView: S
                       }
                     ) : null,
                     U ? /* @__PURE__ */ e.jsx(
@@ -3142,7 +3146,7 @@ function wt(fe) {
                         style: {
                           ...xe && { fill: xe },
                           textAnchor: "middle",
-                          ...z?.graphObjectValues || {}
+                          ...$?.graphObjectValues || {}
                         },
                         x: d.bandwidth() / 2,
                         dy: -10,
@@ -3157,7 +3161,7 @@ function wt(fe) {
                             opacity: 0
                           },
                           whileInView: {
-                            y: m(ke(n.size.map((a) => a || 0))),
+                            y: m(ke(n.size.map((s) => s || 0))),
                             opacity: 1,
                             transition: { duration: x.duration }
                           }
@@ -3167,11 +3171,11 @@ function wt(fe) {
                           transition: { duration: x.duration }
                         },
                         initial: "initial",
-                        animate: B ? "whileInView" : "initial",
-                        children: De(
-                          ke(n.size.filter((a) => a)),
-                          $,
-                          T,
+                        animate: S ? "whileInView" : "initial",
+                        children: $e(
+                          ke(n.size.filter((s) => s)),
+                          O,
+                          z,
                           _,
                           j
                         )
@@ -3182,166 +3186,167 @@ function wt(fe) {
                 n.label
               )
             ),
-            Z ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Z.map((n, a) => /* @__PURE__ */ e.jsx(
-              nt,
+            Q ? /* @__PURE__ */ e.jsx(e.Fragment, { children: Q.map((n, s) => /* @__PURE__ */ e.jsx(
+              ct,
               {
                 text: n.text,
                 color: n.color,
                 y: m(n.value),
-                x1: 0 - Q,
-                x2: M + b.right,
+                x1: 0 - K,
+                x2: N + b.right,
                 classNames: n.classNames,
                 styles: n.styles,
                 animate: x,
-                isInView: B
+                isInView: S
               },
-              a
+              s
             )) }) : null
           ] }),
-          N.filter((n) => n.position === "after").map((n) => n.layer)
+          M.filter((n) => n.position === "after").map((n) => n.layer)
         ] })
       }
     ),
-    v && ne && ce && H ? /* @__PURE__ */ e.jsx(
+    v && oe && ne && H ? /* @__PURE__ */ e.jsx(
       Ge,
       {
         data: v,
-        body: ne,
-        xPos: ce,
+        body: oe,
+        xPos: ne,
         yPos: H,
-        backgroundStyle: z?.tooltip,
+        backgroundStyle: $?.tooltip,
         className: y?.tooltip
       }
     ) : null,
-    re && V !== void 0 ? /* @__PURE__ */ e.jsx(
+    se && T !== void 0 ? /* @__PURE__ */ e.jsx(
       We,
       {
-        open: V !== void 0,
+        open: T !== void 0,
         onClose: () => {
-          A(void 0);
+          V(void 0);
         },
         children: /* @__PURE__ */ e.jsx(
           "div",
           {
             className: "graph-modal-content m-0",
-            dangerouslySetInnerHTML: typeof re == "string" ? { __html: Xe(re, V) } : void 0,
-            children: typeof re == "function" ? re(V) : null
+            dangerouslySetInnerHTML: typeof se == "string" ? { __html: Xe(se, T) } : void 0,
+            children: typeof se == "function" ? se(T) : null
           }
         )
       }
     ) : null
   ] });
 }
-function Ct(fe) {
+function kt(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G = je.light.categoricalColors.colors,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me = 0.25,
     showTicks: ue = !0,
     leftMargin: ge = 20,
-    rightMargin: Q = 20,
+    rightMargin: K = 20,
     topMargin: Y = 20,
     bottomMargin: ie = 25,
     truncateBy: D = 999,
-    showLabels: ne = !0,
+    showLabels: oe = !0,
     showValues: he = !0,
     backgroundColor: j = !1,
     showColorScale: _ = !0,
     suffix: U = "",
-    prefix: Z = "",
+    prefix: Q = "",
     height: C,
     width: p,
     footNote: F,
     colorDomain: ae,
     colorLegendTitle: le,
     padding: J,
-    tooltip: ee,
-    onSeriesMouseOver: re,
+    tooltip: Z,
+    onSeriesMouseOver: se,
     relativeHeight: E,
     refValues: xe,
     graphID: de,
-    maxValue: z,
+    maxValue: $,
     onSeriesMouseClick: y,
     graphDownload: x = !1,
     dataDownload: w = !1,
-    language: T = "en",
-    theme: N = "light",
-    labelOrder: $,
-    minHeight: L = 0,
-    maxBarThickness: B,
+    language: z = "en",
+    theme: M = "light",
+    labelOrder: O,
+    minHeight: I = 0,
+    maxBarThickness: S,
     sortParameter: b,
     maxNumberOfBars: v,
     minBarThickness: R,
-    ariaLabel: V,
-    resetSelectionOnDoubleClick: A = !0,
-    detailsOnClick: ce,
+    ariaLabel: T,
+    resetSelectionOnDoubleClick: V = !0,
+    detailsOnClick: ne,
     barAxisTitle: W,
     noOfTicks: H = 5,
-    valueColor: se,
-    styles: M,
+    valueColor: ee,
+    styles: N,
     classNames: P,
     filterNA: m = !0,
     animate: k = !1,
     precision: f = 2,
     customLayers: d = [],
     timeline: u = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 },
-    naLabel: n = "NA"
-  } = fe, [a, s] = S(0), [t, l] = S(0), [h, Oe] = S(u.autoplay), K = Be(
+    naLabel: n = "NA",
+    sortData: s
+  } = fe, [l, t] = L(0), [a, h] = L(0), [ve, Oe] = L(u.autoplay), ce = Be(
     Te(
       o.filter((r) => r.date !== void 0 && r.date !== null),
       (r) => r.date
     ).map((r) => Se(`${r.date}`, u.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
-    (r, O) => tt(r, O)
-  ), [we, ve] = S(u.autoplay ? 0 : K.length - 1), [Ce, oe] = S(void 0), ye = Me(null), c = Me(null);
+    (r, B) => tt(r, B)
+  ), [be, we] = L(u.autoplay ? 0 : ce.length - 1), [re, Ce] = L(void 0), c = Me(null), te = Me(null);
   ze(() => {
-    const r = new ResizeObserver((O) => {
-      s(p || O[0].target.clientWidth || 620), l(C || O[0].target.clientHeight || 480);
+    const r = new ResizeObserver((B) => {
+      t(p || B[0].target.clientWidth || 620), h(C || B[0].target.clientHeight || 480);
     });
-    return ye.current && (l(ye.current.clientHeight || 480), s(ye.current.clientWidth || 620), p || r.observe(ye.current)), () => r.disconnect();
+    return c.current && (h(c.current.clientHeight || 480), t(c.current.clientWidth || 620), p || r.observe(c.current)), () => r.disconnect();
   }, [p, C]), ze(() => {
     const r = setInterval(
       () => {
-        ve((O) => O < K.length - 1 ? O + 1 : 0);
+        we((B) => B < ce.length - 1 ? B + 1 : 0);
       },
       (u.speed || 2) * 1e3
     );
-    return h || clearInterval(r), () => clearInterval(r);
-  }, [K, h, u.speed]);
-  const te = Fe(
-    K,
-    we,
+    return ve || clearInterval(r), () => clearInterval(r);
+  }, [ce, ve, u.speed]);
+  const Ve = Fe(
+    ce,
+    be,
     u.showOnlyActiveDate,
     u.dateFormat || "yyyy"
   );
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${N || "light"} flex  ${p ? "w-fit grow-0" : "w-full grow"}`,
-      dir: T === "he" || T === "ar" ? "rtl" : void 0,
+      className: `${M || "light"} flex  ${p ? "w-fit grow-0" : "w-full grow"}`,
+      dir: z === "he" || z === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: Ne(
-            `${j ? j === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${T || "en"}`,
+            `${j ? j === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${z || "en"}`,
             P?.graphContainer
           ),
           style: {
-            ...M?.graphContainer || {},
+            ...N?.graphContainer || {},
             ...j && j !== !0 ? { backgroundColor: j } : {}
           },
           id: de,
-          ref: c,
-          "aria-label": V || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${X ? ` ${X}` : ""}`,
+          ref: te,
+          "aria-label": T || `${g ? `The graph shows ${g}. ` : ""}This is a stacked bar chart. ${X ? ` ${X}` : ""}`,
           children: /* @__PURE__ */ e.jsx("div", { style: { padding: j ? J || "1rem" : J || 0 }, children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
             g || X || x || w ? /* @__PURE__ */ e.jsx(
               Je,
               {
                 styles: {
-                  title: M?.title,
-                  description: M?.description
+                  title: N?.title,
+                  description: N?.description
                 },
                 classNames: {
                   title: P?.title,
@@ -3350,37 +3355,37 @@ function Ct(fe) {
                 graphTitle: g,
                 graphDescription: X,
                 width: p,
-                graphDownload: x ? c.current : void 0,
+                graphDownload: x ? te.current : void 0,
                 dataDownload: w ? o.map((r) => r.data).filter((r) => r !== void 0).length > 0 ? o.map((r) => r.data).filter((r) => r !== void 0) : o.filter((r) => r !== void 0) : null
               }
             ) : null,
-            u.enabled && K.length > 0 && te ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+            u.enabled && ce.length > 0 && Ve ? /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
               /* @__PURE__ */ e.jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => {
-                    Oe(!h);
+                    Oe(!ve);
                   },
                   className: "p-0 border-0 cursor-pointer bg-transparent",
-                  "aria-label": h ? "Click to pause animation" : "Click to play animation",
-                  children: h ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
+                  "aria-label": ve ? "Click to pause animation" : "Click to play animation",
+                  children: ve ? /* @__PURE__ */ e.jsx(Ze, {}) : /* @__PURE__ */ e.jsx(et, {})
                 }
               ),
               /* @__PURE__ */ e.jsx(
                 He,
                 {
-                  min: K[0],
-                  max: K[K.length - 1],
-                  marks: te,
+                  min: ce[0],
+                  max: ce[ce.length - 1],
+                  marks: Ve,
                   step: null,
-                  defaultValue: K[K.length - 1],
-                  value: K[we],
+                  defaultValue: ce[ce.length - 1],
+                  value: ce[be],
                   onChangeComplete: (r) => {
-                    ve(K.indexOf(r));
+                    we(ce.indexOf(r));
                   },
                   onChange: (r) => {
-                    ve(K.indexOf(r));
+                    we(ce.indexOf(r));
                   },
                   "aria-label": "Time slider. Use arrow keys to adjust selected time period."
                 }
@@ -3394,79 +3399,81 @@ function Ct(fe) {
                   colorDomain: ae,
                   colors: G,
                   colorLegendTitle: le,
-                  setSelectedColor: oe,
+                  setSelectedColor: Ce,
                   showNAColor: !1
                 }
               ) : null,
-              /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: ye, "aria-label": "Graph area", children: (p || a) && (C || t) ? /* @__PURE__ */ e.jsx(
-                wt,
+              /* @__PURE__ */ e.jsx("div", { className: "w-full grow leading-0", ref: c, "aria-label": "Graph area", children: (p || l) && (C || a) ? /* @__PURE__ */ e.jsx(
+                Ct,
                 {
-                  data: b !== void 0 ? b === "total" ? Ae(
-                    Ve(
+                  data: b !== void 0 ? b === "total" ? st(
+                    Ae(
                       o,
                       u.dateFormat || "yyyy"
                     ).filter(
-                      (r) => u.enabled ? r.date === $e(
-                        new Date(K[we]),
+                      (r) => u.enabled ? r.date === De(
+                        new Date(ce[be]),
                         u.dateFormat || "yyyy"
                       ) : r
                     ).filter(
-                      (r) => m ? !r.size.every((O) => O == null) : r
+                      (r) => m ? !r.size.every((B) => B == null) : r
                     ),
-                    (r) => ke(r.size.filter((O) => !q(O)))
-                  ).filter((r, O) => v ? O < v : !0) : Ae(
-                    Ve(
+                    (r) => ke(r.size.filter((B) => !q(B))),
+                    [s || "asc"]
+                  ).filter((r, B) => v ? B < v : !0) : st(
+                    Ae(
                       o,
                       u.dateFormat || "yyyy"
                     ).filter(
-                      (r) => u.enabled ? r.date === $e(
-                        new Date(K[we]),
+                      (r) => u.enabled ? r.date === De(
+                        new Date(ce[be]),
                         u.dateFormat || "yyyy"
                       ) : r
                     ).filter(
-                      (r) => m ? !r.size.every((O) => O == null) : r
+                      (r) => m ? !r.size.every((B) => B == null) : r
                     ),
-                    (r) => q(r.size[b]) ? -1 / 0 : r.size[b]
-                  ).filter((r, O) => v ? O < v : !0) : Ve(
+                    (r) => q(r.size[b]) ? -1 / 0 : r.size[b],
+                    [s || "asc"]
+                  ).filter((r, B) => v ? B < v : !0) : Ae(
                     o,
                     u.dateFormat || "yyyy"
-                  ).filter((r) => m ? !r.size.every((O) => O == null) : r).filter((r, O) => v ? O < v : !0),
+                  ).filter((r) => m ? !r.size.every((B) => B == null) : r).filter((r, B) => v ? B < v : !0),
                   barColors: G,
-                  width: p || a,
+                  width: p || l,
                   height: Math.max(
-                    L,
-                    C || (E ? L ? (p || a) * E > L ? (p || a) * E : L : (p || a) * E : t)
+                    I,
+                    C || (E ? I ? (p || l) * E > I ? (p || l) * E : I : (p || l) * E : a)
                   ),
                   barPadding: me,
-                  showLabels: ne,
+                  showLabels: oe,
                   showTicks: ue,
                   truncateBy: D,
                   leftMargin: ge,
-                  rightMargin: Q,
+                  rightMargin: K,
                   topMargin: Y,
                   bottomMargin: ie,
-                  tooltip: ee,
-                  onSeriesMouseOver: re,
+                  tooltip: Z,
+                  onSeriesMouseOver: se,
                   showValues: he,
                   suffix: U,
-                  prefix: Z,
+                  prefix: Q,
                   refValues: xe,
-                  maxValue: q(z) ? Math.max(
+                  maxValue: q($) ? Math.max(
                     ...o.map(
-                      (r) => ke(r.size.filter((O) => !q(O))) || 0
+                      (r) => ke(r.size.filter((B) => !q(B))) || 0
                     )
-                  ) : z,
+                  ) : $,
                   onSeriesMouseClick: y,
-                  selectedColor: Ce,
-                  labelOrder: $,
-                  maxBarThickness: B,
+                  selectedColor: re,
+                  labelOrder: O,
+                  maxBarThickness: S,
                   minBarThickness: R,
-                  resetSelectionOnDoubleClick: A,
-                  detailsOnClick: ce,
+                  resetSelectionOnDoubleClick: V,
+                  detailsOnClick: ne,
                   barAxisTitle: W,
                   noOfTicks: H,
-                  valueColor: se,
-                  styles: M,
+                  valueColor: ee,
+                  styles: N,
                   classNames: P,
                   animate: k === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : k || { duration: 0, once: !0, amount: 0 },
                   colorDomain: ae,
@@ -3476,15 +3483,15 @@ function Ct(fe) {
                 }
               ) : null })
             ] }) }),
-            I || F ? /* @__PURE__ */ e.jsx(
+            A || F ? /* @__PURE__ */ e.jsx(
               Ue,
               {
-                styles: { footnote: M?.footnote, source: M?.source },
+                styles: { footnote: N?.footnote, source: N?.source },
                 classNames: {
                   footnote: P?.footnote,
                   source: P?.source
                 },
-                sources: I,
+                sources: A,
                 footNote: F,
                 width: p
               }
@@ -3495,56 +3502,56 @@ function Ct(fe) {
     }
   );
 }
-function ai(fe) {
+function si(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G,
-    barPadding: I,
+    barPadding: A,
     showTicks: X,
     leftMargin: me,
     rightMargin: ue,
     topMargin: ge,
-    bottomMargin: Q,
+    bottomMargin: K,
     truncateBy: Y,
     showLabels: ie,
     showValues: D,
-    backgroundColor: ne,
+    backgroundColor: oe,
     suffix: he,
     prefix: j,
     sources: _,
     graphDescription: U,
-    height: Z,
+    height: Q,
     width: C,
     footNote: p,
     colorDomain: F,
     colorLegendTitle: ae,
     padding: le,
     relativeHeight: J,
-    tooltip: ee,
-    onSeriesMouseOver: re,
+    tooltip: Z,
+    onSeriesMouseOver: se,
     refValues: E,
     showColorScale: xe,
     graphID: de,
-    maxValue: z,
+    maxValue: $,
     minValue: y,
     highlightedDataPoints: x,
     onSeriesMouseClick: w,
-    graphDownload: T,
-    dataDownload: N,
-    language: $,
-    theme: L,
-    sortData: B,
+    graphDownload: z,
+    dataDownload: M,
+    language: O,
+    theme: I,
+    sortData: S,
     labelOrder: b,
     showNAColor: v,
     minHeight: R,
-    maxBarThickness: V,
-    maxNumberOfBars: A,
-    minBarThickness: ce,
+    maxBarThickness: T,
+    maxNumberOfBars: V,
+    minBarThickness: ne,
     ariaLabel: W,
     resetSelectionOnDoubleClick: H,
-    detailsOnClick: se,
-    barAxisTitle: M,
+    detailsOnClick: ee,
+    barAxisTitle: N,
     noOfTicks: P,
     valueColor: m,
     orientation: k = "vertical",
@@ -3552,188 +3559,188 @@ function ai(fe) {
     classNames: d,
     filterNA: u,
     animate: n,
-    dimmedOpacity: a,
-    precision: s,
+    dimmedOpacity: s,
+    precision: l,
     customLayers: t,
-    timeline: l,
+    timeline: a,
     naLabel: h
   } = fe;
   return k === "vertical" ? /* @__PURE__ */ e.jsx(
-    yt,
+    bt,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      barPadding: I,
+      barPadding: A,
       showTicks: X,
       leftMargin: me,
       rightMargin: ue,
       topMargin: ge,
-      bottomMargin: Q,
+      bottomMargin: K,
       truncateBy: Y,
       showLabels: ie,
       showValues: D,
-      backgroundColor: ne,
+      backgroundColor: oe,
       suffix: he,
       prefix: j,
       sources: _,
       graphDescription: U,
-      height: Z,
+      height: Q,
       width: C,
       footNote: p,
       colorDomain: F,
       colorLegendTitle: ae,
       padding: le,
       relativeHeight: J,
-      tooltip: ee,
-      onSeriesMouseOver: re,
+      tooltip: Z,
+      onSeriesMouseOver: se,
       refValues: E,
       showColorScale: xe,
       graphID: de,
-      maxValue: z,
+      maxValue: $,
       minValue: y,
       highlightedDataPoints: x,
       onSeriesMouseClick: w,
-      graphDownload: T,
-      dataDownload: N,
-      language: $,
-      theme: L,
-      sortData: B,
+      graphDownload: z,
+      dataDownload: M,
+      language: O,
+      theme: I,
+      sortData: S,
       labelOrder: b,
       showNAColor: v,
       minHeight: R,
-      maxBarThickness: V,
-      maxNumberOfBars: A,
-      minBarThickness: ce,
+      maxBarThickness: T,
+      maxNumberOfBars: V,
+      minBarThickness: ne,
       ariaLabel: W,
       resetSelectionOnDoubleClick: H,
       styles: f,
-      detailsOnClick: se,
-      barAxisTitle: M,
+      detailsOnClick: ee,
+      barAxisTitle: N,
       noOfTicks: P,
       valueColor: m,
       classNames: d,
       filterNA: u,
       animate: n,
-      dimmedOpacity: a,
-      precision: s,
+      dimmedOpacity: s,
+      precision: l,
       customLayers: t,
-      timeline: l
+      timeline: a
     }
   ) : /* @__PURE__ */ e.jsx(
-    ut,
+    mt,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      barPadding: I,
+      barPadding: A,
       showTicks: X,
       leftMargin: me,
       rightMargin: ue,
       topMargin: ge,
-      bottomMargin: Q,
+      bottomMargin: K,
       truncateBy: Y,
       showLabels: ie,
       showValues: D,
-      backgroundColor: ne,
+      backgroundColor: oe,
       suffix: he,
       prefix: j,
       sources: _,
       graphDescription: U,
-      height: Z,
+      height: Q,
       width: C,
       footNote: p,
       colorDomain: F,
       colorLegendTitle: ae,
       padding: le,
       relativeHeight: J,
-      tooltip: ee,
-      onSeriesMouseOver: re,
+      tooltip: Z,
+      onSeriesMouseOver: se,
       refValues: E,
       showColorScale: xe,
       graphID: de,
-      maxValue: z,
+      maxValue: $,
       minValue: y,
       highlightedDataPoints: x,
       onSeriesMouseClick: w,
-      graphDownload: T,
-      dataDownload: N,
-      language: $,
-      theme: L,
-      sortData: B,
+      graphDownload: z,
+      dataDownload: M,
+      language: O,
+      theme: I,
+      sortData: S,
       labelOrder: b,
       showNAColor: v,
       minHeight: R,
-      maxBarThickness: V,
-      maxNumberOfBars: A,
-      minBarThickness: ce,
+      maxBarThickness: T,
+      maxNumberOfBars: V,
+      minBarThickness: ne,
       ariaLabel: W,
       resetSelectionOnDoubleClick: H,
       styles: f,
-      detailsOnClick: se,
-      barAxisTitle: M,
+      detailsOnClick: ee,
+      barAxisTitle: N,
       noOfTicks: P,
       valueColor: m,
       classNames: d,
       filterNA: u,
-      dimmedOpacity: a,
-      precision: s,
+      dimmedOpacity: s,
+      precision: l,
       customLayers: t,
-      timeline: l,
+      timeline: a,
       naLabel: h
     }
   );
 }
-function li(fe) {
+function ri(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me,
     showTicks: ue,
     truncateBy: ge,
-    height: Q,
+    height: K,
     width: Y,
     footNote: ie,
     colorDomain: D,
-    colorLegendTitle: ne,
+    colorLegendTitle: oe,
     suffix: he,
     prefix: j,
     showValues: _,
     padding: U,
-    backgroundColor: Z,
+    backgroundColor: Q,
     leftMargin: C,
     rightMargin: p,
     topMargin: F,
     bottomMargin: ae,
     showLabels: le,
     relativeHeight: J,
-    tooltip: ee,
-    onSeriesMouseOver: re,
+    tooltip: Z,
+    onSeriesMouseOver: se,
     refValues: E,
     graphID: xe,
     maxValue: de,
-    minValue: z,
+    minValue: $,
     onSeriesMouseClick: y,
     graphDownload: x,
     dataDownload: w,
-    language: T,
-    labelOrder: N,
-    minHeight: $,
-    theme: L,
-    maxBarThickness: B,
+    language: z,
+    labelOrder: M,
+    minHeight: O,
+    theme: I,
+    maxBarThickness: S,
     ariaLabel: b,
     resetSelectionOnDoubleClick: v,
     detailsOnClick: R,
-    barAxisTitle: V,
-    noOfTicks: A,
-    valueColor: ce,
+    barAxisTitle: T,
+    noOfTicks: V,
+    valueColor: ne,
     orientation: W = "vertical",
     styles: H,
-    classNames: se,
-    filterNA: M,
+    classNames: ee,
+    filterNA: N,
     animate: P,
     precision: m,
     customLayers: k,
@@ -3742,55 +3749,55 @@ function li(fe) {
     naLabel: u
   } = fe;
   return W === "vertical" ? /* @__PURE__ */ e.jsx(
-    vt,
+    wt,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      sources: I,
+      sources: A,
       graphDescription: X,
       barPadding: me,
       showTicks: ue,
       truncateBy: ge,
-      height: Q,
+      height: K,
       width: Y,
       footNote: ie,
       colorDomain: D,
-      colorLegendTitle: ne,
+      colorLegendTitle: oe,
       suffix: he,
       prefix: j,
       showValues: _,
       padding: U,
-      backgroundColor: Z,
+      backgroundColor: Q,
       leftMargin: C,
       rightMargin: p,
       topMargin: F,
       bottomMargin: ae,
       showLabels: le,
       relativeHeight: J,
-      tooltip: ee,
-      onSeriesMouseOver: re,
+      tooltip: Z,
+      onSeriesMouseOver: se,
       refValues: E,
       graphID: xe,
       maxValue: de,
-      minValue: z,
+      minValue: $,
       onSeriesMouseClick: y,
       graphDownload: x,
       dataDownload: w,
-      language: T,
-      labelOrder: N,
-      minHeight: $,
-      theme: L,
-      maxBarThickness: B,
+      language: z,
+      labelOrder: M,
+      minHeight: O,
+      theme: I,
+      maxBarThickness: S,
       ariaLabel: b,
       resetSelectionOnDoubleClick: v,
       styles: H,
       detailsOnClick: R,
-      barAxisTitle: V,
-      noOfTicks: A,
-      valueColor: ce,
-      classNames: se,
-      filterNA: M,
+      barAxisTitle: T,
+      noOfTicks: V,
+      valueColor: ne,
+      classNames: ee,
+      filterNA: N,
       animate: P,
       precision: m,
       customLayers: k,
@@ -3799,55 +3806,55 @@ function li(fe) {
       naLabel: u
     }
   ) : /* @__PURE__ */ e.jsx(
-    gt,
+    xt,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      sources: I,
+      sources: A,
       graphDescription: X,
       barPadding: me,
       showTicks: ue,
       truncateBy: ge,
-      height: Q,
+      height: K,
       width: Y,
       footNote: ie,
       colorDomain: D,
-      colorLegendTitle: ne,
+      colorLegendTitle: oe,
       suffix: he,
       prefix: j,
       showValues: _,
       padding: U,
-      backgroundColor: Z,
+      backgroundColor: Q,
       leftMargin: C,
       rightMargin: p,
       topMargin: F,
       bottomMargin: ae,
       showLabels: le,
       relativeHeight: J,
-      tooltip: ee,
-      onSeriesMouseOver: re,
+      tooltip: Z,
+      onSeriesMouseOver: se,
       refValues: E,
       graphID: xe,
       maxValue: de,
-      minValue: z,
+      minValue: $,
       onSeriesMouseClick: y,
       graphDownload: x,
       dataDownload: w,
-      language: T,
-      labelOrder: N,
-      minHeight: $,
-      theme: L,
-      maxBarThickness: B,
+      language: z,
+      labelOrder: M,
+      minHeight: O,
+      theme: I,
+      maxBarThickness: S,
       ariaLabel: b,
       resetSelectionOnDoubleClick: v,
       styles: H,
       detailsOnClick: R,
-      barAxisTitle: V,
-      noOfTicks: A,
-      valueColor: ce,
-      classNames: se,
-      filterNA: M,
+      barAxisTitle: T,
+      noOfTicks: V,
+      valueColor: ne,
+      classNames: ee,
+      filterNA: N,
       animate: P,
       precision: m,
       customLayers: k,
@@ -3857,188 +3864,191 @@ function li(fe) {
     }
   );
 }
-function si(fe) {
+function oi(fe) {
   const {
     data: o,
     graphTitle: g,
     colors: G,
-    sources: I,
+    sources: A,
     graphDescription: X,
     barPadding: me,
     showTicks: ue,
     leftMargin: ge,
-    rightMargin: Q,
+    rightMargin: K,
     topMargin: Y,
     bottomMargin: ie,
     truncateBy: D,
-    showLabels: ne,
+    showLabels: oe,
     showValues: he,
     backgroundColor: j,
     suffix: _,
     prefix: U,
-    height: Z,
+    height: Q,
     width: C,
     footNote: p,
     colorDomain: F,
     colorLegendTitle: ae,
     padding: le,
     tooltip: J,
-    onSeriesMouseOver: ee,
-    relativeHeight: re,
+    onSeriesMouseOver: Z,
+    relativeHeight: se,
     refValues: E,
     graphID: xe,
     maxValue: de,
-    onSeriesMouseClick: z,
+    onSeriesMouseClick: $,
     graphDownload: y,
     dataDownload: x,
     language: w,
-    theme: T,
-    labelOrder: N,
-    minHeight: $,
-    maxBarThickness: L,
-    sortParameter: B,
-    maxNumberOfBars: b,
-    minBarThickness: v,
-    ariaLabel: R,
+    theme: z,
+    labelOrder: M,
+    minHeight: O,
+    maxBarThickness: I,
+    sortParameter: S,
+    sortData: b,
+    maxNumberOfBars: v,
+    minBarThickness: R,
+    ariaLabel: T,
     resetSelectionOnDoubleClick: V,
-    detailsOnClick: A,
-    barAxisTitle: ce,
-    noOfTicks: W,
-    valueColor: H,
-    orientation: se = "vertical",
-    styles: M,
-    classNames: P,
-    filterNA: m,
-    animate: k,
-    precision: f,
-    customLayers: d,
-    showColorScale: u,
-    timeline: n,
-    naLabel: a
+    detailsOnClick: ne,
+    barAxisTitle: W,
+    noOfTicks: H,
+    valueColor: ee,
+    orientation: N = "vertical",
+    styles: P,
+    classNames: m,
+    filterNA: k,
+    animate: f,
+    precision: d,
+    customLayers: u,
+    showColorScale: n,
+    timeline: s,
+    naLabel: l
   } = fe;
-  return se === "vertical" ? /* @__PURE__ */ e.jsx(
-    Ct,
+  return N === "vertical" ? /* @__PURE__ */ e.jsx(
+    kt,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      sources: I,
+      sources: A,
       graphDescription: X,
       barPadding: me,
       showTicks: ue,
       leftMargin: ge,
-      rightMargin: Q,
+      rightMargin: K,
       topMargin: Y,
       bottomMargin: ie,
       truncateBy: D,
-      showLabels: ne,
+      showLabels: oe,
       showValues: he,
       backgroundColor: j,
       suffix: _,
       prefix: U,
-      height: Z,
+      height: Q,
       width: C,
       footNote: p,
       colorDomain: F,
       colorLegendTitle: ae,
       padding: le,
       tooltip: J,
-      onSeriesMouseOver: ee,
-      relativeHeight: re,
+      onSeriesMouseOver: Z,
+      relativeHeight: se,
       refValues: E,
       graphID: xe,
       maxValue: de,
-      onSeriesMouseClick: z,
+      onSeriesMouseClick: $,
       graphDownload: y,
       dataDownload: x,
       language: w,
-      theme: T,
-      labelOrder: N,
-      minHeight: $,
-      maxBarThickness: L,
-      sortParameter: B,
-      maxNumberOfBars: b,
-      minBarThickness: v,
-      ariaLabel: R,
+      theme: z,
+      labelOrder: M,
+      minHeight: O,
+      maxBarThickness: I,
+      sortParameter: S,
+      sortData: b,
+      maxNumberOfBars: v,
+      minBarThickness: R,
+      ariaLabel: T,
       resetSelectionOnDoubleClick: V,
-      styles: M,
-      detailsOnClick: A,
-      barAxisTitle: ce,
-      noOfTicks: W,
-      valueColor: H,
-      classNames: P,
-      filterNA: m,
-      animate: k,
-      precision: f,
-      customLayers: d,
-      showColorScale: u,
-      timeline: n,
-      naLabel: a
+      styles: P,
+      detailsOnClick: ne,
+      barAxisTitle: W,
+      noOfTicks: H,
+      valueColor: ee,
+      classNames: m,
+      filterNA: k,
+      animate: f,
+      precision: d,
+      customLayers: u,
+      showColorScale: n,
+      timeline: s,
+      naLabel: l
     }
   ) : /* @__PURE__ */ e.jsx(
-    pt,
+    ft,
     {
       data: o,
       graphTitle: g,
       colors: G,
-      sources: I,
+      sources: A,
       graphDescription: X,
       barPadding: me,
       showTicks: ue,
       leftMargin: ge,
-      rightMargin: Q,
+      rightMargin: K,
       topMargin: Y,
       bottomMargin: ie,
       truncateBy: D,
-      showLabels: ne,
+      showLabels: oe,
       showValues: he,
       backgroundColor: j,
       suffix: _,
       prefix: U,
-      height: Z,
+      height: Q,
       width: C,
       footNote: p,
       colorDomain: F,
       colorLegendTitle: ae,
       padding: le,
       tooltip: J,
-      onSeriesMouseOver: ee,
-      relativeHeight: re,
+      onSeriesMouseOver: Z,
+      relativeHeight: se,
       refValues: E,
       graphID: xe,
       maxValue: de,
-      onSeriesMouseClick: z,
+      onSeriesMouseClick: $,
       graphDownload: y,
       dataDownload: x,
       language: w,
-      theme: T,
-      labelOrder: N,
-      minHeight: $,
-      maxBarThickness: L,
-      sortParameter: B,
-      maxNumberOfBars: b,
-      minBarThickness: v,
-      ariaLabel: R,
+      theme: z,
+      labelOrder: M,
+      minHeight: O,
+      maxBarThickness: I,
+      sortParameter: S,
+      sortData: b,
+      maxNumberOfBars: v,
+      minBarThickness: R,
+      ariaLabel: T,
       resetSelectionOnDoubleClick: V,
-      styles: M,
-      detailsOnClick: A,
-      barAxisTitle: ce,
-      noOfTicks: W,
-      valueColor: H,
-      classNames: P,
-      filterNA: m,
-      animate: k,
-      precision: f,
-      customLayers: d,
-      showColorScale: u,
-      timeline: n,
-      naLabel: a
+      styles: P,
+      detailsOnClick: ne,
+      barAxisTitle: W,
+      noOfTicks: H,
+      valueColor: ee,
+      classNames: m,
+      filterNA: k,
+      animate: f,
+      precision: d,
+      customLayers: u,
+      showColorScale: n,
+      timeline: s,
+      naLabel: l
     }
   );
 }
 export {
-  li as GroupedBarGraph,
-  ai as SimpleBarGraph,
-  si as StackedBarGraph
+  ri as GroupedBarGraph,
+  si as SimpleBarGraph,
+  oi as StackedBarGraph
 };
 //# sourceMappingURL=BarGraph.js.map