@iqworksai/common-components 0.1.21 → 0.1.23

package/dist/components/Charts/GaugeChart/index.mjs

@@ -0,0 +1,229 @@
+import { jsxs as s, jsx as e, Fragment as F } from "react/jsx-runtime";
+import { useState as v, useRef as D, useEffect as w, useMemo as k, useCallback as f } from "react";
+import { Chart as L, ArcElement as H, Tooltip as J, Legend as K } from "../../../node_modules/chart.js/dist/chart.mjs";
+import { Doughnut as Q } from "../../../node_modules/react-chartjs-2/dist/index.mjs";
+L.register(H, J, K);
+L.defaults.font.family = "'Rubik', 'Inter', sans-serif";
+const Z = (n) => `
+    input[type=range] {
+      height: 4px;
+      -webkit-appearance: none;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      margin: 0;
+      padding: 0;
+      background: none;
+      pointer-events: none;
+    }
+
+    /* Center thumbs vertically on the track */
+    input[type=range]::-webkit-slider-runnable-track {
+      height: 1px;
+      -webkit-appearance: none;
+      color: #13bba4;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: ${n}px;
+      height: ${n}px;
+      border-radius: 50%;
+      background: #ffffff;
+      cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+      border: 2px solid gray;
+      margin-top: -0.8rem;
+      pointer-events: all;
+      z-index: 3;
+    }
+
+    input[type=range]::-moz-range-track {
+      height: 1px;
+      -moz-appearance: none;
+      color: #13bba4;
+    }
+
+    input[type=range]::-moz-range-thumb {
+      width: ${n}px;
+      height: ${n}px;
+      border-radius: 50%;
+      background: #ffffff;
+      cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+      border: 2px solid gray;
+      margin-top: -0.8rem;
+      pointer-events: all;
+    }
+  `, re = ({
+  title: n,
+  data: A,
+  maxValue: $,
+  minRange: g = 0,
+  maxRange: h = 10,
+  onMinRangeChange: i,
+  onMaxRangeChange: c,
+  showRangeSlider: I = !1,
+  sliderMin: o = 0,
+  sliderMax: b = 10,
+  sliderStep: N = 0.1,
+  formatSliderLabel: E = (P) => `${P.toFixed(1)}Y`,
+  hasData: d = !0
+}) => {
+  const [P, W] = v(0), x = D(null), [a, S] = v(g), [l, C] = v(h), j = A, y = $ > 0 ? j / $ * 100 : 0, G = 25;
+  w(() => {
+    const t = () => {
+      if (x.current) {
+        const r = x.current.offsetWidth;
+        W((V) => V !== r ? r : V);
+      }
+    };
+    return window.addEventListener("resize", t), t(), () => window.removeEventListener("resize", t);
+  }, []), w(() => {
+    S(g);
+  }, [g]), w(() => {
+    C(h);
+  }, [h]);
+  const U = k(
+    () => ({
+      responsive: !0,
+      maintainAspectRatio: !1,
+      plugins: {
+        title: {
+          display: !1,
+          text: n || "Gauge Chart",
+          color: "#302d2eff",
+          font: { weight: "bold", size: 24 },
+          position: "top",
+          align: "start",
+          padding: {
+            top: 0
+          }
+        },
+        legend: { display: !1 },
+        tooltip: { enabled: !1 },
+        datalabels: {
+          display: !1
+        }
+      }
+    }),
+    [n]
+  ), X = k(
+    () => ({
+      datasets: [
+        {
+          data: d ? [y, 100 - y] : [0, 100],
+          backgroundColor: d ? [
+            getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim() || "#ff6503",
+            getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8"
+          ] : [
+            getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8",
+            getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8"
+          ],
+          borderWidth: 0,
+          cutout: "75%",
+          circumference: 300,
+          rotation: -150
+        }
+      ]
+    }),
+    [y, d]
+  ), _ = f(
+    (t) => {
+      const r = parseFloat(t.target.value);
+      S(r);
+    },
+    []
+  ), O = f(
+    (t) => {
+      const r = parseFloat(t.target.value);
+      C(r);
+    },
+    []
+  ), z = f(() => {
+    i == null || i(a);
+  }, [a, i]), T = f(() => {
+    c == null || c(l);
+  }, [l, c]), p = b - o, u = p > 0 ? (a - o) / p * 100 : 0, m = p > 0 ? (l - o) / p * 100 : 0, Y = `${u}%`, q = `${m}%`, B = k(() => {
+    const t = getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8", r = getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim() || "#ff6503";
+    return {
+      background: `linear-gradient(to right, ${t} 0%, ${t} ${u}%, 
+        ${r} ${u}%, ${r} ${m}%, ${t} ${m}%, ${t} 100%)`
+    };
+  }, [u, m]);
+  return /* @__PURE__ */ s("div", { className: "retention flex flex-col items-center rounded-xl select-none p-3", children: [
+    /* @__PURE__ */ e("div", { className: "w-full flex flex-col items-center justify-center p-2 mb-4", children: /* @__PURE__ */ s("div", { className: "relative w-11/12 h-64 flex items-center justify-center", children: [
+      /* @__PURE__ */ e(Q, { data: X, options: U }),
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: d ? /* @__PURE__ */ s(F, { children: [
+        /* @__PURE__ */ e("span", { className: "text-xl font-bold", style: { color: "var(--chart-text-color)" }, children: j.toLocaleString() }),
+        /* @__PURE__ */ e("span", { className: "text-xs", style: { color: "var(--secondary-text-color)" }, children: n })
+      ] }) : /* @__PURE__ */ s(F, { children: [
+        /* @__PURE__ */ e("span", { className: "text-lg font-medium", style: { color: "var(--secondary-text-color)" }, children: "No Data" }),
+        /* @__PURE__ */ e("span", { className: "text-xs", style: { color: "var(--secondary-text-color)" }, children: "Available" })
+      ] }) })
+    ] }) }),
+    I && /* @__PURE__ */ e("div", { className: "w-full px-6", children: /* @__PURE__ */ s("div", { className: "relative w-full", ref: x, children: [
+      /* @__PURE__ */ e("style", { children: Z(G) }),
+      /* @__PURE__ */ e("div", { className: "absolute top-0 w-full h-1 rounded-full", style: B }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "range",
+          min: o,
+          max: b,
+          step: N,
+          value: a,
+          onChange: _,
+          onMouseUp: z,
+          onTouchEnd: z,
+          className: "w-full"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "range",
+          min: o,
+          max: b,
+          step: N,
+          value: l,
+          onChange: O,
+          onMouseUp: T,
+          onTouchEnd: T,
+          className: "w-full"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "absolute flex items-center justify-center w-8 h-8 text-white text-xs font-bold rounded",
+          style: {
+            left: Y,
+            top: "-40px",
+            transform: "translateX(-50%)",
+            clipPath: "polygon(0% 0%, 100% 0%, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0% 80%)",
+            backgroundColor: "hsl(var(--brand-orange))"
+          },
+          children: E(a)
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "absolute flex items-center justify-center w-8 h-8 text-white text-xs font-bold rounded",
+          style: {
+            left: q,
+            top: "-40px",
+            transform: "translateX(-50%)",
+            clipPath: "polygon(0% 0%, 100% 0%, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0% 80%)",
+            backgroundColor: "hsl(var(--brand-dark))"
+          },
+          children: E(l)
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  re as default
+};

package/dist/components/Charts/GeoChart/index.mjs

@@ -0,0 +1,85 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as d, useEffect as C } from "react";
+import { Chart as S } from "../../../node_modules/react-chartjs-2/dist/index.mjs";
+import { Chart as m, Tooltip as x, Legend as v, CategoryScale as E, LinearScale as P, BarElement as V } from "../../../node_modules/chart.js/dist/chart.mjs";
+import { ChoroplethController as w, GeoFeature as j, ProjectionScale as k, ColorScale as A } from "../../../node_modules/chartjs-chart-geo/build/index.mjs";
+m.register(w, j, k, A, x, v, E, P, V);
+m.defaults.font.family = "'Rubik', 'Inter', sans-serif";
+const _ = ({ data: l = /* @__PURE__ */ new Map(), defaultCountry: p = "India", geoData: i, dataLabel: f = "Data Points Found" }) => {
+  const [u, c] = d(null), [g, y] = d(0), s = i ? i.features.filter((e) => e.properties.name !== "Antarctica") : [];
+  if (C(() => {
+    if (l != null && l.size) {
+      let e = 0;
+      l.forEach((t, r) => {
+        u === r && (e = t);
+      }), y(e);
+    }
+  }, [u, l]), !i || s.length === 0)
+    return /* @__PURE__ */ a("div", { className: "geochart-container flex flex-col items-center justify-center p-8", style: { minHeight: "400px" }, children: /* @__PURE__ */ a("p", { style: { color: "var(--secondary-text-color)" }, children: "Geo data not provided. Please provide geoData prop." }) });
+  const h = {
+    datasets: [
+      {
+        label: "Data Distribution",
+        data: s.map((e) => ({
+          feature: e,
+          value: l.get(e.properties.name) || 0
+        })),
+        borderColor: "#fff",
+        borderWidth: 1,
+        backgroundColor: (e) => {
+          var n;
+          if (!((n = e == null ? void 0 : e.raw) != null && n.feature))
+            return getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8";
+          const t = e.raw.feature.properties.name, r = getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim() || "#ff6503", o = getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim() || "#dae0e8";
+          return t === p ? r : u === t ? r + "99" : o;
+        }
+      }
+    ]
+  }, b = {
+    responsive: !0,
+    maintainAspectRatio: !1,
+    scales: {
+      projection: {
+        axis: "x",
+        projection: "equirectangular"
+      },
+      color: {
+        axis: "x",
+        display: !1
+      }
+    },
+    plugins: {
+      legend: {
+        display: !1
+      },
+      tooltip: {
+        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color").trim() || "#fff",
+        titleColor: getComputedStyle(document.documentElement).getPropertyValue("--chart-text-color").trim() || "#333",
+        bodyColor: getComputedStyle(document.documentElement).getPropertyValue("--chart-text-color").trim() || "#333",
+        borderColor: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim() || "#e5e7eb",
+        borderWidth: 1,
+        callbacks: {
+          title: (e) => {
+            var t, r, o;
+            return e.length ? ((o = (r = (t = e[0].raw) == null ? void 0 : t.feature) == null ? void 0 : r.properties) == null ? void 0 : o.name) ?? "Unknown" : "";
+          },
+          label: () => `${f}: ${g}`
+        }
+      },
+      datalabels: {
+        display: !1
+      }
+    },
+    onHover: (e, t) => {
+      var r, o;
+      if (t.length > 0) {
+        const n = t[0].index;
+        c(((o = (r = s[n]) == null ? void 0 : r.properties) == null ? void 0 : o.name) || null);
+      }
+    }
+  };
+  return /* @__PURE__ */ a("div", { className: "geochart-container flex flex-col items-center", onMouseLeave: () => c(null), style: { minHeight: "400px" }, children: /* @__PURE__ */ a(S, { type: "choropleth", data: h, options: b, className: "w-full h-full" }) });
+};
+export {
+  _ as default
+};

package/dist/components/Charts/HorizontalBarChart/index.mjs

@@ -0,0 +1,118 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useMemo as S } from "react";
+import { Chart as u, CategoryScale as k, LogarithmicScale as V, LinearScale as L, BarElement as E, Title as M, Tooltip as O, Legend as P } from "../../../node_modules/chart.js/dist/chart.mjs";
+import { Bar as R } from "../../../node_modules/react-chartjs-2/dist/index.mjs";
+import { ScaleType as i } from "../../../constants/enums.mjs";
+import { useTheme as j } from "../../../context/ThemeContext.mjs";
+u.register(k, V, L, E, M, O, P);
+u.defaults.font.family = "'Rubik', 'Inter', sans-serif";
+const N = ({ data: o, maxValue: c = 5e4, scaleType: a = i.LINEAR }) => {
+  const { theme: g } = j(), n = getComputedStyle(document.documentElement).getPropertyValue("--chart-text-color").trim() || (g === "dark" ? "#fff" : "#333333"), { processedData: p, computedMaxValue: f } = S(() => {
+    const e = Object.values(o);
+    let t = [...e], r = c;
+    if (a === i.NORMALISED) {
+      const l = Math.min(...e), s = Math.max(...e) - l;
+      t = e.map((C) => (C - l) / s * 100), r = 100;
+    } else a === i.LOG ? (t = e.map((l) => Math.max(l, 0.1)), r = c || Math.max(...t) * 1.1) : r = c || Math.max(...e) * 1.1;
+    return {
+      processedData: Object.keys(o).reduce(
+        (l, m, s) => (l[m] = t[s], l),
+        {}
+      ),
+      computedMaxValue: r
+    };
+  }, [o, a, c]), b = Math.max(300, Object.keys(o).length * 50), h = (e) => a === i.NORMALISED ? `Value: ${o[Object.keys(o)[e.dataIndex]].toLocaleString()} (${e.raw.toFixed(2)}%)` : `Value: ${e.raw.toLocaleString()}`, y = {
+    indexAxis: "y",
+    responsive: !0,
+    maintainAspectRatio: !1,
+    plugins: {
+      legend: {
+        display: !1,
+        labels: {
+          color: n
+        }
+      },
+      title: {
+        display: !1
+      },
+      datalabels: {
+        color: "#ffff",
+        font: { weight: "bold", size: 14 },
+        anchor: "end",
+        align: "left",
+        formatter: (e, t) => t.dataset.label === "Blue Bar" ? e.toLocaleString() : ""
+      },
+      tooltip: {
+        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color").trim(),
+        titleColor: n,
+        bodyColor: n,
+        borderColor: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim(),
+        borderWidth: 1,
+        callbacks: {
+          label: (e) => h(e)
+        }
+      }
+    },
+    scales: {
+      x: {
+        type: a === i.LOG ? "logarithmic" : "linear",
+        max: f,
+        grid: {
+          display: !1,
+          offset: !1,
+          color: getComputedStyle(document.documentElement).getPropertyValue("--chart-grid-color").trim()
+        },
+        ticks: {
+          font: {
+            size: 11.19,
+            weight: "400"
+          },
+          color: n
+        },
+        border: {
+          color: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim()
+        }
+      },
+      y: {
+        grid: {
+          display: !1,
+          color: getComputedStyle(document.documentElement).getPropertyValue("--chart-grid-color").trim()
+        },
+        ticks: {
+          font: {
+            size: 10.33,
+            weight: "500"
+          },
+          color: n,
+          align: "center",
+          callback: function(e) {
+            const t = this.getLabelForValue(e), r = 25;
+            return t.length > r ? t.slice(0, r) + "..." : t;
+          }
+        },
+        border: {
+          color: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim()
+        }
+      }
+    }
+  }, x = {
+    labels: Object.keys(o),
+    datasets: [
+      {
+        label: "Bar Chart",
+        data: Object.values(p),
+        backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim(),
+        borderRadius: { topLeft: 0, topRight: 20, bottomLeft: 0, bottomRight: 20 },
+        barThickness: 25,
+        borderSkipped: !1,
+        grouped: !1,
+        maxBarThickness: 30,
+        stack: "foreground"
+      }
+    ]
+  };
+  return /* @__PURE__ */ d("div", { className: "horizontal-bar-chart-container", style: { height: `${b}px` }, children: /* @__PURE__ */ d(R, { options: y, data: x }) });
+};
+export {
+  N as default
+};

package/dist/components/Charts/NoDataChart/index.mjs

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { FiBarChart2 as l } from "../../../node_modules/react-icons/fi/index.mjs";
+const c = ({ title: r }) => /* @__PURE__ */ t("div", { className: "nochartdata-container w-full h-full flex flex-col items-center justify-center text-center select-none", children: [
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: "items-center top-0 left-0 p-[1.25rem] absolute justify-center select-none text-[18px] font-[600] p-3",
+      style: { color: "var(--chart-text-color)", fontFamily: "'Afacad', 'Rubik', sans-serif" },
+      children: r
+    }
+  ),
+  /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center w-full h-full", children: [
+    /* @__PURE__ */ e(l, { size: 80, style: { color: "var(--brand-color-orange)", opacity: 0.2 } }),
+    /* @__PURE__ */ e("span", { className: "mt-4 text-[1rem]", style: { color: "var(--secondary-text-color)" }, children: "No data to display" })
+  ] })
+] });
+export {
+  c as default
+};

package/dist/components/Charts/PieChart/index.mjs

@@ -0,0 +1,120 @@
+import { jsx as o, jsxs as l, Fragment as A } from "react/jsx-runtime";
+import { useState as F } from "react";
+import { Pie as $ } from "../../../node_modules/react-chartjs-2/dist/index.mjs";
+import { Chart as u, ArcElement as j, Tooltip as M, Legend as R } from "../../../node_modules/chart.js/dist/chart.mjs";
+import z from "../../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.mjs";
+import P from "../../Modal/index.mjs";
+import S from "../CustomLegends/index.mjs";
+import { useTheme as T } from "../../../context/ThemeContext.mjs";
+u.register(j, M, R, z);
+u.defaults.font.family = "'Rubik', 'Inter', sans-serif";
+const G = ({ labels: n, dataValues: r, colors: v, title: b = "", tableHeader: _ = "", renderLegendTable: f }) => {
+  const [d, p] = F(!1), { theme: C } = T(), i = ["#ff6503", "#ff8533", "#ffa366", "#3a3a3a", "#4a4a4a"], s = v || i.slice(0, n.length > i.length ? i.length : n.length), x = {
+    labels: n,
+    datasets: [
+      {
+        data: r,
+        backgroundColor: s,
+        hoverBackgroundColor: s.map((e) => e + "CC"),
+        borderColor: "var(--border-color)",
+        borderWidth: 1
+      }
+    ]
+  }, y = r.reduce((e, t) => e + t, 0), w = {
+    responsive: !0,
+    maintainAspectRatio: !1,
+    plugins: {
+      title: {
+        display: !1
+      },
+      legend: {
+        display: !1
+      },
+      datalabels: {
+        color: "#fff",
+        anchor: "center",
+        align: "center",
+        formatter: (e, t) => {
+          const a = t.chart.data.datasets[0].data.reduce((c, L) => {
+            const g = Number(L);
+            return isNaN(g) ? c : c + g;
+          }, 0);
+          return `${Math.round(e / a * 100) + "%"}`;
+        },
+        font: function(e) {
+          const t = e.chart.width, a = Math.round(t / 24);
+          return {
+            weight: "bold",
+            size: a > 14 ? 14 : a
+          };
+        }
+      },
+      tooltip: {
+        callbacks: {
+          label: (e) => {
+            const t = e.raw, a = r.reduce((m, c) => m + c, 0);
+            return ` ${(t / a * 100).toFixed(2)}% (${t})`;
+          }
+        }
+      }
+    }
+  }, h = n.map((e, t) => ({
+    id: t + 1,
+    label: e,
+    percentage: (r[t] / y * 100).toFixed(2) + "%",
+    value: r[t]
+  })), N = /* @__PURE__ */ o("div", { className: "space-y-2", children: h.map((e) => /* @__PURE__ */ l("div", { className: "flex items-center justify-between p-2 border-b", style: { borderColor: "var(--border-color)" }, children: [
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            width: "12px",
+            height: "12px",
+            borderRadius: "50%",
+            backgroundColor: s[e.id - 1]
+          }
+        }
+      ),
+      /* @__PURE__ */ o("span", { style: { color: "var(--text-color)" }, children: e.label })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ o("span", { style: { color: "var(--secondary-text-color)" }, children: e.percentage }),
+      /* @__PURE__ */ l("span", { style: { color: "var(--secondary-text-color)" }, children: [
+        "(",
+        e.value,
+        ")"
+      ] })
+    ] })
+  ] }, e.id)) });
+  return /* @__PURE__ */ l(A, { children: [
+    /* @__PURE__ */ l("div", { className: "pie-chart-container flex flex-row flex-1 items-end", children: [
+      /* @__PURE__ */ o("div", { className: "w-2/3 h-64", children: /* @__PURE__ */ o($, { data: x, options: w }) }),
+      /* @__PURE__ */ o(
+        S,
+        {
+          legends: n,
+          colors: s,
+          dataValues: r,
+          showAllLegends: d,
+          onClick: () => p(!d)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(
+      P,
+      {
+        isOpen: d,
+        onClose: () => {
+          p(!1);
+        },
+        title: `${b || "Chart"} Legends:`,
+        showFooter: !1,
+        body: f ? f(h) : N
+      }
+    )
+  ] });
+};
+export {
+  G as default
+};

package/dist/components/Charts/StorageChart/index.mjs

@@ -0,0 +1,44 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import n from "react";
+import { formatBytes as m } from "../../../utils/formatBytes.mjs";
+const h = ({ icon: l, value: e, isSize: r = !1, label: a }) => {
+  const o = n.useMemo(() => {
+    if (!r) return e;
+    const d = typeof e == "number" ? e : parseInt(e, 10), c = m(d).split(" ");
+    return {
+      size: c[0],
+      unit: c[1]
+    };
+  }, [e, r]);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: "flex flex-col select-none items-center justify-center rounded-lg relative w-full shadow-sm !p-0",
+      style: { border: "1px solid var(--border-color)" },
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex flex-col flex-1 items-center justify-center p-0", children: [
+          /* @__PURE__ */ t("div", { className: "p-2", style: { color: "hsl(var(--brand-orange))" }, children: typeof l == "string" ? /* @__PURE__ */ t("img", { src: l, alt: a, className: "h-10 w-10 md:h-16 md:w-16 lg:h-20 lg:w-20 object-contain" }) : /* @__PURE__ */ t("div", { className: "text-4xl md:text-5xl lg:text-6xl", children: l }) }),
+          /* @__PURE__ */ s("div", { className: "font-bold text-center text-xl md:text-2xl lg:text-3xl mt-2", style: { color: "var(--chart-text-color)" }, children: [
+            r ? o.size : o,
+            r && /* @__PURE__ */ t("span", { className: "ml-1 text-sm md:text-base", style: { color: "var(--secondary-text-color)" }, children: o.unit })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "flex items-center justify-center font-bold p-2 w-full text-center text-sm md:text-base border-t",
+            style: {
+              backgroundColor: "hsl(var(--brand-light))",
+              color: "hsl(var(--brand-dark))",
+              borderTopColor: "var(--border-color)"
+            },
+            children: a
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  h as default
+};