@hashicorp/mds-react 0.9.3 → 0.9.5

package/components/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps<T extends ElementType> {\n\ttag?: T\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n}\n\ninterface TextImplProps<T extends ElementType> extends BaseTextProps<T> {\n\tgroup: TextGroup\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = <T extends ElementType = 'span'>({\n\ttag,\n\tgroup,\n\tsize = '200',\n\tweight,\n\talign,\n\tcolor,\n\tchildren,\n\tclassName,\n\t...rest\n}: TextImplProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof TextImplProps<T>>) => {\n\tconst Component = tag ?? 'span'\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\ninterface BodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '200' | '300' | '400'\n}\n\nconst Body = <T extends ElementType>({\n\tsize = '300',\n\t...rest\n}: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'body',\n\t})\n}\n\ninterface DisplayExpressiveProps<T extends ElementType>\n\textends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nconst DisplayExpressive = <T extends ElementType>({\n\tsize = '200',\n\t...rest\n}: DisplayExpressiveProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof DisplayExpressiveProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'display-expressive',\n\t})\n}\n\ntype LabelProps<T extends ElementType> = Omit<BaseTextProps<T>, 'size'>\n\nconst Label = <T extends ElementType>(\n\tprops: LabelProps<T> & Omit<ComponentPropsWithRef<T>, keyof LabelProps<T>>\n) => {\n\treturn createElement(TextImpl, {\n\t\t...props,\n\t\tgroup: 'label',\n\t})\n}\n\ninterface HDSBodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst HDSBody = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: HDSBodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof HDSBodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body',\n\t})\n}\n\ninterface CodeProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst Code = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code',\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","props","HDSBody","Code","Text"],"mappings":";;;;AAQA,MAAMA,IAAc;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAqBMC,IAAe,CAAC,WAAW,UAAU,YAAY,MAAM;AAuB7D,SAASC,EAAmBC,GAAkBC,GAAwB;AASrE,SARmD;AAAA,IAClD,YAAY,8BAA8BA,CAAI;AAAA,IAC9C,MAAM,uBAAuBA,CAAI;AAAA,IACjC,sBAAsB,qCAAqCA,CAAI;AAAA,IAC/D,OAAO;AAAA,IACP,MAAM,uBAAuBA,CAAI;AAAA,EAAA,EAGXD,CAAK;AAC7B;AAEA,MAAME,IAAW,CAAiC;AAAA,EACjD,KAAAC;AAAA,EACA,OAAAH;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAG;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAC4D;AAC3D,QAAMC,IAAYP,KAAO,QACnBQ,IAAUZ,EAAmBC,GAAOC,CAAI,GAExCW,IAAsBf,EAAY,SAASS,CAAkB;AAEnE,SACC,gBAAAO;AAAA,IAACH;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVH;AAAA,QACA;AAAA,UACC,CAACI,EAAE,SAASV,CAAK,EAAE,CAAC,GAAGA;AAAA,UACvB,CAAC,8BAA8BD,CAAM,EAAE,GAAGA;AAAA,UAC1C,CAAC,kBAAkBE,CAAK,EAAE,GAAGA,KAASM;AAAA,QAAA;AAAA,QAEvCJ;AAAA,MAAA;AAAA,MAED,OAAOF,KAAS,CAACM,IAAsB,EAAE,OAAAN,EAAA,IAAU,CAAA;AAAA,MAClD,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGJ,GAMMS,IAAO,CAAwB;AAAA,EACpC,MAAAf,IAAO;AAAA,EACP,GAAGQ;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAQIiB,IAAoB,CAAwB;AAAA,EACjD,MAAAjB,IAAO;AAAA,EACP,GAAGQ;AACJ,MAEQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAKIkB,IAAQ,CACbC,MAEOH,EAAcf,GAAU;AAAA,EAC9B,GAAGkB;AAAA,EACH,OAAO;AAAA,CACP,GAOIC,IAAU,CAAwB;AAAA,EACvC,MAAApB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAOIkB,IAAO,CAAwB;AAAA,EACpC,MAAArB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAGImB,IAAO;AAAA,EACZ,MAAAP;AAAA,EACA,mBAAAE;AAAA,EACA,OAAAC;AAAA,EACA,SAAAE;AAAA,EACA,MAAAC;AACD;"}

package/components/text/style.module.scss.js

@@ -0,0 +1,9 @@
+const l = {
+  "align-left": "align-left__Twy3l",
+  "align-center": "align-center__iK1pm",
+  "align-right": "align-right__YgPRT"
+};
+export {
+  l as default
+};
+//# sourceMappingURL=style.module.scss.js.map

package/components/text/style.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { useState as g } from "react";
+import i from "classnames";
+import h from "use-resize-observer";
+import { getContrastYIQ as b, hexToRgb as x } from "../../../../../utils/get-contrast-yiq.js";
+import { Text as V } from "../../../../text/index.js";
+import s from "./style.module.css.js";
+function j({
+  value: e,
+  highestValue: l,
+  color: a,
+  stackable: m
+}) {
+  const [n, r] = g(!1), { ref: c } = h({
+    onResize: ({ width: o }) => {
+      e === 0 && (e = 0.5);
+      let t = 32;
+      e >= 10 && e <= 99 ? t = 40 : e >= 100 && (t = 48), o && o < t ? r(!0) : r(!1);
+    }
+  }), d = b(x(a)), p = e / l * 100;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: c,
+      className: i(s.datasetValue, s[d]),
+      style: {
+        "--width": p
+      },
+      children: [
+        /* @__PURE__ */ u(
+          "div",
+          {
+            className: s.datasetValueBar,
+            style: {
+              "--bar-background": a
+            }
+          }
+        ),
+        /* @__PURE__ */ f(
+          V.Body,
+          {
+            tag: "span",
+            size: "200",
+            className: i(s.datasetValuePercent, {
+              [s.offset]: n,
+              [s.stackable]: m
+            }),
+            children: [
+              e,
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as default
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport classNames from 'classnames'\nimport useResizeObserver from 'use-resize-observer'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\nimport { Text } from '../../../../../components/text'\nimport s from './style.module.css'\n\ninterface DatasetValueProps {\n\tvalue: number\n\thighestValue: number\n\tcolor: string\n\tstackable: boolean\n}\n\nexport default function DatasetValue({\n\tvalue,\n\thighestValue,\n\tcolor,\n\tstackable,\n}: DatasetValueProps) {\n\tconst [valueIsOffset, setValueIsOffset] = useState(false)\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\t// If the value is 0, we want to show a 0.5% bar\n\t\t\tif (value === 0) {\n\t\t\t\tvalue = 0.5\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * The logic below determines the threshold (in `px`)\n\t\t\t * a bar's width needs to reach for the value to be offset\n\t\t\t * by moving it to the right of the bar.\n\t\t\t *\n\t\t\t * The default below is for single-digit values.\n\t\t\t */\n\t\t\tlet offsetThreshold = 32\n\n\t\t\tif (value >= 10 && value <= 99) {\n\t\t\t\t// Offset threshold for 2 digit values\n\t\t\t\toffsetThreshold = 40\n\t\t\t} else if (value >= 100) {\n\t\t\t\t// Offset threshold for 3+ digit values\n\t\t\t\toffsetThreshold = 48\n\t\t\t}\n\n\t\t\tif (width && width < offsetThreshold) {\n\t\t\t\tsetValueIsOffset(true)\n\t\t\t} else {\n\t\t\t\tsetValueIsOffset(false)\n\t\t\t}\n\t\t},\n\t})\n\n\tconst valueColor = getContrastYIQ(hexToRgb(color))\n\n\t/**\n\t * The actual width of the bar, however, should be\n\t * a percentage of the highest value in the chart\n\t */\n\tconst percentageOfHighest = (value / highestValue) * 100\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(s.datasetValue, s[valueColor])}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t'--width': percentageOfHighest,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={s.datasetValueBar}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t'--bar-background': color,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Text.Body\n\t\t\t\ttag=\"span\"\n\t\t\t\tsize=\"200\"\n\t\t\t\tclassName={classNames(s.datasetValuePercent, {\n\t\t\t\t\t[s.offset]: valueIsOffset,\n\t\t\t\t\t[s.stackable]: stackable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{value}%\n\t\t\t</Text.Body>\n\t\t</div>\n\t)\n}\n"],"names":["DatasetValue","value","highestValue","color","stackable","valueIsOffset","useState","useResizeObserver","offsetThreshold","width","setValueIsOffset","valueColor","getContrastYIQ","jsxs","ref","classNames","percentageOfHighest","jsx","Text"],"mappings":";;;;;;;;AAgBqC,SACpCA,EAAA;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACD,WAAAC;AACC,GAAA;AACA,QAAM,CAAAC,IAA4C,IAAAC,EAAA,EAAA,YACvC,IAAGC,EAAY;AAAA,IAExB,UAAI,YAAa,MAAA;AAChB,MAAAN,MAAQ,MACTA,IAAA;AAWA,UAAIO,IAAe;AAElB,MAAAP,KAAA,WAAkB,KACnBO,IAAoB,KAEnBP,KAAkB,QACnBO,IAAA,KAGCC,KAAAA,IAAiBD,IAClBE,EAAO,EAAA,IAEPA,EAAA,EAAA;AAAA,IAED;AAAA,EAED,CAAA,GAMMC,IAAAC,IAA+BT,CAAA,QAGpCF,IAAAC,IAAA;AAAA,SAAC,gBAAAW;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAC;AAAA,MACA,WACCC,EAAA,EAAA,cAAA,EAAAJ,CAAA,CAAA;AAAA,MAAA;QAEA,WAAAK;AAAA,MAGD;AAAA,MAAA,UAAA;AAAA,QAAC,gBAAAC;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WACC,EAAA;AAAA,YAAA;cACqB,oBAAAd;AAAA,YACrB;AAAA,UAEF;AAAA,QAAA;AAAA,QACM,gBAAAU;AAAA,UAALK,EAAA;AAAA,UAAA;AAAA,YAEA;YACA;YAA6C,WACnCH,EAAG,EAAA,qBAAA;AAAA,cACZ,CAAC,EAAE,MAAA,GAASV;AAAA,cACZ,CAAA,EAAA,SAAA,GAAAD;AAAA,YAEA;YAAA,UAAA;AAAA,cAAMH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js

@@ -0,0 +1,20 @@
+const a = "datasetValue__7Cgnp", t = "datasetValueBar__XH-zW", e = "datasetValuePercent__5-Ofn", s = "offset__5sIB1", l = "stackable__EL-7z", c = "light__bf-WO", _ = "dark__grmLH", d = {
+  datasetValue: a,
+  datasetValueBar: t,
+  datasetValuePercent: e,
+  offset: s,
+  stackable: l,
+  light: c,
+  dark: _
+};
+export {
+  _ as dark,
+  a as datasetValue,
+  t as datasetValueBar,
+  e as datasetValuePercent,
+  d as default,
+  c as light,
+  s as offset,
+  l as stackable
+};
+//# sourceMappingURL=style.module.css.js.map

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/components/visualizations/bar-chart/horizontal-chart/index.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as T, useMemo as f } from "react";
+import C from "classnames";
+import S from "react-wrap-balancer";
+import y from "./dataset-value/index.js";
+import B from "./legend/index.js";
+import { useMediaQuery as k } from "../../../../hooks/use-media-query/index.js";
+import { MDSButton as v } from "../../../legacy-button/index.js";
+import { Text as w } from "../../../text/index.js";
+import l from "./style.module.css.js";
+function O({
+  categories: n,
+  datasets: r,
+  // Default this to virtually unlimited
+  maxInitialDatasets: i = 999,
+  stacked: o = !1
+}) {
+  const h = k("(min-width: 560px)"), d = r.length > i, [m, p] = T(d), N = f(() => m ? r.slice(0, i) : r, [m, r, i]), g = f(() => {
+    let e = 0;
+    return r.forEach((s) => {
+      if (o) {
+        const t = b(s.values);
+        h ? t > e && (e = t) : s.values.forEach(({ value: u }) => {
+          u > e && (e = u);
+        });
+      } else
+        s.values.forEach(({ value: t }) => {
+          t > e && (e = t);
+        });
+    }), e;
+  }, [r, h]);
+  return /* @__PURE__ */ c("div", { className: l.barChart, children: [
+    /* @__PURE__ */ a("div", { className: l.chart, children: N.map((e) => /* @__PURE__ */ c("div", { className: l.dataset, children: [
+      /* @__PURE__ */ a("div", { className: l.datasetLabel, children: /* @__PURE__ */ a(S, { children: e.label }) }),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: C(l.datasetValues, {
+            [l.datasetValuesStacked]: o
+          }),
+          children: [
+            e.values.map(({ value: s, color: t }, u) => /* @__PURE__ */ a(
+              y,
+              {
+                value: s,
+                highestValue: g,
+                color: t,
+                stackable: o
+              },
+              `dataset-${e.label}-${s}-${u}`
+            )),
+            o ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c(w.Body, { size: "200", tag: "p", className: l.datasetTotal, children: [
+              /* @__PURE__ */ a("span", { className: l.datasetTotalText, children: "Total:" }),
+              /* @__PURE__ */ c("span", { className: l.datasetTotalPercent, children: [
+                e.total || b(e.values),
+                "%"
+              ] })
+            ] }) }) : null
+          ]
+        }
+      )
+    ] }, e.label)) }),
+    d && (m ? /* @__PURE__ */ a(
+      v,
+      {
+        className: l.showAllButton,
+        title: "Show all",
+        theme: {
+          brand: "neutral",
+          variant: "secondary",
+          background: "light"
+        },
+        onClick: () => p(!1)
+      }
+    ) : /* @__PURE__ */ a(
+      v,
+      {
+        className: l.showAllButton,
+        title: "Show less",
+        theme: {
+          brand: "neutral",
+          variant: "secondary",
+          background: "light"
+        },
+        onClick: () => p(!0)
+      }
+    )),
+    n && n.length > 1 && /* @__PURE__ */ a(B, { className: l.legend, keys: n })
+  ] });
+}
+function b(n) {
+  return n.reduce(
+    (i, o) => ({ value: i.value + o.value, color: "" }),
+    {
+      value: 0,
+      color: ""
+    }
+  ).value;
+}
+export {
+  O as default
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/bar-chart/horizontal-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/visualizations/bar-chart/horizontal-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport classNames from 'classnames'\nimport Balancer from 'react-wrap-balancer'\nimport DatasetValue from './dataset-value'\nimport Legend from './legend'\nimport { useMediaQuery } from '@web/hooks/use-media-query'\nimport { MDSButton } from '../../../legacy-button'\nimport { Text } from '../../../../components/text'\nimport s from './style.module.css'\n\ninterface Dataset {\n\tlabel: string\n\tvalues: Array<{\n\t\tvalue: number\n\t\tcolor: string\n\t}>\n\ttotal?: number\n}\n\ninterface Category {\n\tlabel: string\n\tcolor: string\n}\n\nexport interface HorizontalBarChartProps {\n\t/**\n\t * Passing more than one category causes\n\t * the Key to be displayed.\n\t *\n\t * If no categories are passed, the default\n\t * color is Blue.\n\t */\n\tcategories?: Array<Category>\n\t/**\n\t * All group.values.length must be equal\n\t * to the length of the number of groups\n\t * passed. If no groups are passed, each\n\t * group.values.length must equal one.\n\t */\n\tdatasets: Array<Dataset>\n\t/**\n\t * The total number of groups to display\n\t * initially before the user hits the\n\t * \"Show all\" button.  Default unlimited.\n\t * */\n\tmaxInitialDatasets?: number\n\t/**\n\t * If true, values in each `group` will\n\t * be stacked together to form a single\n\t * bar.\n\t */\n\tstacked?: boolean\n}\n\nexport default function HorizontalBarChart({\n\tcategories,\n\tdatasets,\n\t// Default this to virtually unlimited\n\tmaxInitialDatasets = 999,\n\tstacked = false,\n}: HorizontalBarChartProps): JSX.Element {\n\t/**\n\t * If screen width is higher than 560px,\n\t * and this is a stacked bar chart,\n\t * we can stack the bars\n\t */\n\tconst isStackable = useMediaQuery('(min-width: 560px)')\n\tconst initialClipped = datasets.length > maxInitialDatasets\n\t/**\n\t * If true, the chart only shows datasets\n\t * up to `maxInitialDatasets`.\n\t */\n\tconst [isClipped, setIsClipped] = useState(initialClipped)\n\n\tconst datasetsToDisplay = useMemo(() => {\n\t\treturn isClipped ? datasets.slice(0, maxInitialDatasets) : datasets\n\t}, [isClipped, datasets, maxInitialDatasets])\n\n\t/**\n\t * Calculate the largest value to calculate % widths\n\t *\n\t * We make this calculation on `datasets`, rather than\n\t * `datasetsToDisplay` to prevent any resizing after\n\t * 'Show All' is clicked\n\t */\n\tconst highestValue = useMemo(() => {\n\t\tlet valueToReturn = 0\n\t\tdatasets.forEach((dataset) => {\n\t\t\tif (stacked) {\n\t\t\t\t/**\n\t\t\t\t * If we're using a stacked bar chart, we want to add\n\t\t\t\t * up the dataset values to calculate our `valueToReturn`,\n\t\t\t\t * as these will be presented together.\n\t\t\t\t *\n\t\t\t\t * The largest stack will be 100% width.\n\t\t\t\t *\n\t\t\t\t * P.S.: The `color` key in this variable's `.reduce()`\n\t\t\t\t * calculation is just here for proper TS typing;\n\t\t\t\t * `color` isn't otherwise used or necessary for\n\t\t\t\t * `summedObj`.\n\t\t\t\t */\n\t\t\t\tconst valueSum = getDatasetTotal(dataset.values)\n\n\t\t\t\t/**\n\t\t\t\t * If the bars are stackable (i.e. we're above 560px screen width)\n\t\t\t\t * then we use the valueSum calculated above to determine the\n\t\t\t\t * highestValue to return.\n\t\t\t\t *\n\t\t\t\t * Otherwise, we want the chart to behave like the unstacked\n\t\t\t\t * bar chart, so we use the same logic unstacked charts do for\n\t\t\t\t * determining highestValue.\n\t\t\t\t */\n\t\t\t\tif (isStackable) {\n\t\t\t\t\tif (valueSum > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = valueSum\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * In the event that we don't have a stacked bar chart,\n\t\t\t\t * we simply want to find the highest value out of all\n\t\t\t\t * of our values that is set (as that will be 100% width)\n\t\t\t\t */\n\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\treturn valueToReturn\n\t}, [datasets, isStackable])\n\n\treturn (\n\t\t<div className={s.barChart}>\n\t\t\t<div className={s.chart}>\n\t\t\t\t{datasetsToDisplay.map((dataset) => (\n\t\t\t\t\t<div className={s.dataset} key={dataset.label}>\n\t\t\t\t\t\t<div className={s.datasetLabel}>\n\t\t\t\t\t\t\t<Balancer>{dataset.label}</Balancer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(s.datasetValues, {\n\t\t\t\t\t\t\t\t[s.datasetValuesStacked]: stacked,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{dataset.values.map(({ value, color }, barIndex) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DatasetValue\n\t\t\t\t\t\t\t\t\t\tkey={`dataset-${dataset.label}-${value}-${barIndex}`}\n\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\thighestValue={highestValue}\n\t\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\t\tstackable={stacked}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{stacked ? (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Text.Body size=\"200\" tag=\"p\" className={s.datasetTotal}>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalText}>Total:</span>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalPercent}>\n\t\t\t\t\t\t\t\t\t\t\t{dataset.total || getDatasetTotal(dataset.values)}%\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{initialClipped &&\n\t\t\t\t(isClipped ? (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show all\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(false)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show less\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(true)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t{categories && categories.length > 1 && (\n\t\t\t\t<Legend className={s.legend} keys={categories} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction getDatasetTotal(values: Dataset['values']): number {\n\tconst totalObj = values.reduce(\n\t\t(a, b) => {\n\t\t\treturn { value: a.value + b.value, color: '' }\n\t\t},\n\t\t{\n\t\t\tvalue: 0,\n\t\t\tcolor: '',\n\t\t}\n\t)\n\n\treturn totalObj.value\n}\n"],"names":["HorizontalBarChart","categories","datasets","maxInitialDatasets","stacked","isStackable","useMediaQuery","initialClipped","isClipped","setIsClipped","useState","datasetsToDisplay","useMemo","highestValue","dataset","getDatasetTotal","valueSum","valueToReturn","value","jsxs","s","jsx","Balancer","classNames","color","barIndex","DatasetValue","Text","MDSButton","Legend","values","a","b"],"mappings":"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"}

package/components/visualizations/bar-chart/horizontal-chart/legend/index.js

@@ -0,0 +1,13 @@
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import c from "classnames";
+import e from "./style.module.css.js";
+function t({ keys: r, className: m }) {
+  return /* @__PURE__ */ s("div", { className: c(e.legend, m), children: /* @__PURE__ */ s("div", { className: e.keyWrapper, children: r.map(({ label: a, color: d }) => /* @__PURE__ */ n("div", { className: e.key, children: [
+    /* @__PURE__ */ s("div", { className: e.dot, style: { background: d } }),
+    /* @__PURE__ */ s("span", { className: e.name, children: a })
+  ] }, a)) }) });
+}
+export {
+  t as default
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/bar-chart/horizontal-chart/legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/legend/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport s from './style.module.css'\n\ninterface Key {\n\tlabel: string\n\tcolor: string\n}\n\ninterface LegendProps {\n\tclassName?: string\n\tkeys: Array<Key>\n}\n\nexport default function Legend({ keys, className }: LegendProps) {\n\treturn (\n\t\t<div className={classNames(s.legend, className)}>\n\t\t\t<div className={s.keyWrapper}>\n\t\t\t\t{keys.map(({ label, color }: Key) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div className={s.key} key={label}>\n\t\t\t\t\t\t\t<div className={s.dot} style={{ background: color }} />\n\t\t\t\t\t\t\t<span className={s.name}>{label}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["Legend","keys","className","classNames","s","jsx","label","color","jsxs"],"mappings":";;;AAaA,SAAwBA,EAAO,EAAE,MAAAC,GAAM,WAAAC,KAA0B;AAChE,2BACE,OAAA,EAAI,WAAWC,EAAWC,EAAE,QAAQF,CAAS,GAC7C,UAAA,gBAAAG,EAAC,SAAI,WAAWD,EAAE,YAChB,UAAAH,EAAK,IAAI,CAAC,EAAE,OAAAK,GAAO,OAAAC,QAElB,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,EAAE,KACjB,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAE,KAAK,OAAO,EAAE,YAAYG,KAAS;AAAA,IACrD,gBAAAF,EAAC,QAAA,EAAK,WAAWD,EAAE,MAAO,UAAAE,EAAA,CAAM;AAAA,EAAA,EAAA,GAFLA,CAG5B,CAED,GACF,GACD;AAEF;"}

package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js

@@ -0,0 +1,14 @@
+const e = "keyWrapper__g36GJ", a = "key__EbmRa", o = "dot__S1lki", t = "name__L7cad mds-typography-body-200", p = {
+  keyWrapper: e,
+  key: a,
+  dot: o,
+  name: t
+};
+export {
+  p as default,
+  o as dot,
+  a as key,
+  e as keyWrapper,
+  t as name
+};
+//# sourceMappingURL=style.module.css.js.map

package/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js

@@ -0,0 +1,28 @@
+const t = "barChart__uC3IV", a = "chart__uI9kg", e = "dataset__13eXi", s = "datasetLabel__HjzY7 mds-typography-body-200", o = "datasetValues__HZ-9o", d = "datasetValuesStacked__og5RC", l = "datasetTotal__0BJyu", _ = "datasetTotalText__-0bYa", c = "datasetTotalPercent__vCmWD", n = "showAllButton__bY4-d", r = "legend__-b7yq", u = {
+  barChart: t,
+  chart: a,
+  dataset: e,
+  datasetLabel: s,
+  datasetValues: o,
+  datasetValuesStacked: d,
+  datasetTotal: l,
+  datasetTotalText: _,
+  datasetTotalPercent: c,
+  showAllButton: n,
+  legend: r
+};
+export {
+  t as barChart,
+  a as chart,
+  e as dataset,
+  s as datasetLabel,
+  l as datasetTotal,
+  c as datasetTotalPercent,
+  _ as datasetTotalText,
+  o as datasetValues,
+  d as datasetValuesStacked,
+  u as default,
+  r as legend,
+  n as showAllButton
+};
+//# sourceMappingURL=style.module.css.js.map

package/components/visualizations/bar-chart/horizontal-chart/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/components/visualizations/bar-chart/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import c from "./horizontal-chart/index.js";
+import { useTabsContext as m } from "../../tabs/use-tabs-context.js";
+import { Tabs as s } from "../../tabs/index.js";
+import h from "classnames";
+import i from "./style.module.css.js";
+const p = ({ data: e }) => /* @__PURE__ */ a("div", { className: i.root, children: e.length > 1 ? /* @__PURE__ */ n(s.Provider, { size: "large", children: [
+  /* @__PURE__ */ a(s.TabList, { children: e.map((r, t) => /* @__PURE__ */ a(s.Tab, { className: i.tab, children: r.name }, t)) }),
+  /* @__PURE__ */ a(b, { data: e })
+] }) : /* @__PURE__ */ a(l, { data: e }) });
+p.displayName = "BarChart";
+const b = ({ data: e }) => {
+  const { selectedTabIndex: r, tabIds: t } = m(), o = t[r];
+  return /* @__PURE__ */ a(l, { tabId: o, data: e, chartIndex: r });
+}, l = ({ tabId: e, data: r, chartIndex: t = 0 }) => {
+  const o = r[t].name;
+  return /* @__PURE__ */ n(
+    "figure",
+    {
+      className: h(i.chartContainer, r.length > 1 && i.multiple),
+      id: o.toLowerCase(),
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : o,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ a(c, { ...r[t] }),
+        /* @__PURE__ */ a("div", { className: i.chart, children: r[t].caption && /* @__PURE__ */ a("figcaption", { className: i.caption, children: r[t].caption }) })
+      ]
+    }
+  );
+};
+export {
+  p as BarChart
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/bar-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport HorizontalBarChart, {\n\ttype HorizontalBarChartProps,\n} from './horizontal-chart'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport { Tabs } from '../../tabs'\nimport classNames from 'classnames'\nimport s from './style.module.css'\n\ninterface HorizontalBarChart extends HorizontalBarChartProps {\n\tname: string\n\tcaption: string\n}\n\nexport interface BarChartProps {\n\tdata: HorizontalBarChart[]\n}\n\nexport const BarChart = ({ data }: BarChartProps) => {\n\treturn (\n\t\t<div className={s.root}>\n\t\t\t{data.length > 1 ? (\n\t\t\t\t<Tabs.Provider size=\"large\">\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{data.map((chart, i) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t\t\t{chart.name}\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t<BarChartPanelWithTabCtx data={data} />\n\t\t\t\t</Tabs.Provider>\n\t\t\t) : (\n\t\t\t\t<BarChartPanel data={data} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nBarChart.displayName = 'BarChart'\n\nconst BarChartPanelWithTabCtx = ({ data }: { data: BarChartProps['data'] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<BarChartPanel tabId={tabId} data={data} chartIndex={selectedTabIndex} />\n\t)\n}\n\ninterface BarChartPanelProps {\n\ttabId?: string\n\tdata: BarChartProps['data']\n\tchartIndex?: number\n}\n\nconst BarChartPanel = ({ tabId, data, chartIndex = 0 }: BarChartPanelProps) => {\n\tconst chartName = data[chartIndex].name\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(s.chartContainer, data.length > 1 && s.multiple)}\n\t\t\tid={chartName.toLowerCase()}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : chartName}\n\t\t\taria-labelledby={tabId || undefined}\n\t\t>\n\t\t\t<HorizontalBarChart {...data[chartIndex]} />\n\t\t\t<div className={s.chart}>\n\t\t\t\t{data[chartIndex].caption && (\n\t\t\t\t\t<figcaption className={s.caption}>\n\t\t\t\t\t\t{data[chartIndex].caption}\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</figure>\n\t)\n}\n"],"names":["BarChart","data","jsx","jsxs","Tabs","chart","i","s","BarChartPanelWithTabCtx","BarChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","chartIndex","classNames","chartName","HorizontalBarChart"],"mappings":";;;;;;;AAoBC,MAAAA,IAAA,CAAA,EAAA,MAAAC,EACC,MAGI,gBAAAC,EAAK,OAAA,EAAL,mBACM,UAAYD,EAAA,SAAA,IACX,gBAAAE,EAAYC,EAAA,UAAa,EAC7B,MAAA,mBACF;AAAA,EAGF,gBAAAF,EAACE,EAAA,SAAA,EAAA,YAAwB,IAAY,CAAAC,GAAAC,MAAA,gBAAAJ,EAAAE,EAAA,KAAA,EAAA,WAAAG,EAAA,KAAA,UAAAF,EAAA,KAAA,GAAAC,CAAA,CAAA,EAAA,CAAA;AAAA,EACtC,gBAAAJ,EAAAM,GAEe,EAAA,MAAAP,EAEjB,CAAA;AAEF,EAAA,CAAA,IAAA,gBAAAC,EAAAO,GAAA,EAAA,MAAAR,EAAA,CAAA,EAAA,CAAA;AAIAD;AACC,MAAAQ,OAA0B,MAAAP;AAE1B,QAAM,EAAA,kBAAAS,iBAA+BC,EAAA,GAErCC,IAAAC,EAAAH,CACE;AAEH,SAAA,gBAAAR,EAAAO,GAAA,EAAA,OAAAG,GAAA,MAAAX,GAAA,YAAAS,EAAA,CAAA;AAQA,GACCD,IAAkB,CAAA,EAAK,OAAAG,GAAA,MAAAX,GAAY,YAAAa,IAAA,EAAA,MAAA;AAEnC,cACCA,CAAA,EAAA;AAAA,SAAC,gBAAAX;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,WAAIY,oBAAsBd,EAAA,SAAA,KAAAM,EAAA,QAAA;AAAA,MAC1B,IAAAS,EAAK,YAAA;AAAA,MACL,MAAA;AAAA,MACA;MACA,cAAAJ,IAAiB,SAASI;AAAA,MAE1B,mBAAAJ,KAAA;AAAA,MAAA,UAAA;AAAA,0BACCK,GAAe,EAAE,GAAAhB,GAChB,EAAA,CAAA;AAAA,QAKF,gBAAAC,EAAA,OAAA,EAAA,WAAAK,EAAA,OAAA,UAAAN,EAAAa,CAAA,EAAA,WAAA,gBAAAZ,EAAA,cAAA,EAAA,WAAAK,EAAA,SAAA,UAAAN,EAAAa,CAAA,EAAA,QAAA,CAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}

package/components/visualizations/bar-chart/style.module.css.js

@@ -0,0 +1,12 @@
+const t = "chartContainer__6A5KV", n = "multiple__rU9qF", a = "caption__F3uLb", o = {
+  chartContainer: t,
+  multiple: n,
+  caption: a
+};
+export {
+  a as caption,
+  t as chartContainer,
+  o as default,
+  n as multiple
+};
+//# sourceMappingURL=style.module.css.js.map

package/components/visualizations/bar-chart/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/components/visualizations/donut-chart/components/arc-tooltip/index.js

@@ -0,0 +1,14 @@
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import l from "./styles.module.css.js";
+const i = (r) => /* @__PURE__ */ a("div", { className: l.container, children: /* @__PURE__ */ e("div", { className: l.label, children: [
+  r.datum.label,
+  ": ",
+  /* @__PURE__ */ e("strong", { children: [
+    r.datum.value,
+    "%"
+  ] })
+] }) });
+export {
+  i as renderArcTooltip
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/donut-chart/components/arc-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/arc-tooltip/index.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport type { DefaultRawDatum, PieTooltipProps } from '@nivo/pie'\nimport s from './styles.module.css'\n\nexport const renderArcTooltip: FC<PieTooltipProps<DefaultRawDatum>> = (d) => (\n\t<div className={s.container}>\n\t\t<div className={s.label}>\n\t\t\t{d.datum.label}: <strong>{d.datum.value}%</strong>\n\t\t</div>\n\t</div>\n)\n"],"names":["renderArcTooltip","d","jsx","s","jsxs"],"mappings":";;AAIO,MAAMA,IAAyD,CAACC,MACtE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAE,WACjB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAE,OAChB,UAAA;AAAA,EAAAF,EAAE,MAAM;AAAA,EAAM;AAAA,oBAAG,UAAA,EAAQ,UAAA;AAAA,IAAAA,EAAE,MAAM;AAAA,IAAM;AAAA,EAAA,EAAA,CAAC;AAAA,EAAA,CAC1C,EAAA,CACD;"}

package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js

@@ -0,0 +1,10 @@
+const n = "container__BPIK5", a = "label__oFZK-", e = {
+  container: n,
+  label: a
+};
+export {
+  n as container,
+  e as default,
+  a as label
+};
+//# sourceMappingURL=styles.module.css.js.map

package/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/components/visualizations/donut-chart/components/external-arc-label/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useRef as a, useState as h, useEffect as m } from "react";
+import { animated as s } from "@react-spring/web";
+import n from "./styles.module.css.js";
+const l = 180, g = (e) => {
+  const i = a(null), [o, c] = h(0);
+  return m(() => {
+    i.current && c(i.current.offsetHeight);
+  }, []), /* @__PURE__ */ r(s.g, { opacity: e.style.opacity, children: [
+    /* @__PURE__ */ t(
+      s.path,
+      {
+        fill: "none",
+        d: e.style.path,
+        stroke: e.style.linkColor,
+        strokeWidth: e.style.thickness
+      }
+    ),
+    /* @__PURE__ */ t(
+      s.g,
+      {
+        transform: e.style.textPosition,
+        textAnchor: e.style.textAnchor,
+        className: n.containerWrapper,
+        children: /* @__PURE__ */ t(
+          "g",
+          {
+            className: n.container,
+            style: {
+              "--container-width": `${l}px`,
+              "--container-height": `${o}px`
+            },
+            children: /* @__PURE__ */ t(
+              "foreignObject",
+              {
+                dominantBaseline: "central",
+                width: l,
+                height: o,
+                children: /* @__PURE__ */ r("div", { ref: i, className: n.lockup, children: [
+                  /* @__PURE__ */ r("div", { className: n.value, children: [
+                    e.datum.value,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: n.label, children: e.datum.label })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  g as useRenderArcLinkLabelComponent
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/donut-chart/components/external-arc-label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/external-arc-label/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { animated } from '@react-spring/web'\nimport type { ComputedDatum, DefaultRawDatum } from '@nivo/pie'\nimport type { ArcLinkLabelComponent } from '@nivo/arcs'\nimport s from './styles.module.css'\n\nconst FOREIGN_OBJECT_WIDTH = 180\n\nexport const useRenderArcLinkLabelComponent: typeof ArcLinkLabelComponent<\n\tComputedDatum<DefaultRawDatum>\n> = (d) => {\n\tconst lockupRef = useRef<HTMLDivElement>(null)\n\tconst [foreignObjectHeight, setForeignObjectHeight] = useState(0)\n\n\tuseEffect(() => {\n\t\tif (lockupRef.current) {\n\t\t\tsetForeignObjectHeight(lockupRef.current.offsetHeight)\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<animated.g opacity={d.style.opacity}>\n\t\t\t<animated.path\n\t\t\t\tfill=\"none\"\n\t\t\t\td={d.style.path}\n\t\t\t\tstroke={d.style.linkColor}\n\t\t\t\tstrokeWidth={d.style.thickness}\n\t\t\t/>\n\t\t\t<animated.g\n\t\t\t\ttransform={d.style.textPosition}\n\t\t\t\ttextAnchor={d.style.textAnchor}\n\t\t\t\tclassName={s.containerWrapper}\n\t\t\t>\n\t\t\t\t<g\n\t\t\t\t\tclassName={s.container}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t['--container-width' as string]: `${FOREIGN_OBJECT_WIDTH}px`,\n\t\t\t\t\t\t['--container-height' as string]: `${foreignObjectHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<foreignObject\n\t\t\t\t\t\tdominantBaseline=\"central\"\n\t\t\t\t\t\twidth={FOREIGN_OBJECT_WIDTH}\n\t\t\t\t\t\theight={foreignObjectHeight}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div ref={lockupRef} className={s.lockup}>\n\t\t\t\t\t\t\t<div className={s.value}>{d.datum.value}%</div>\n\t\t\t\t\t\t\t<div className={s.label}>{d.datum.label}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t</g>\n\t\t\t</animated.g>\n\t\t</animated.g>\n\t)\n}\n"],"names":["FOREIGN_OBJECT_WIDTH","d","lockupRef","useRef","foreignObjectHeight","setForeignObjectHeight","useState","useEffect","jsxs","animated","jsx","s"],"mappings":";;;;;AAUO,MAAMA,IAAA,SAGiC,CAAAC,MAAA;AAC7C,QAAMC,IAACC,EAAA,IAAqB,GAE5B,CAAAC,GAAgBC,CAAA,IAAAC,EAAA,CAAA;AACf,SAAAC,EAAI,MAAU;AACb,iBACDF,EAAAH,EAAA,QAAA,YAAA;AAAA,EAGD,QAEE,gBAAAM,EAAAC,EAAA,GAAA,EAAA,SAAAR,EAAA,MAAA,SAAA,UAAA;AAAA,IAAU,gBAAAS;AAAA,MAATD,EAAA;AAAA,MAAA;AAAA,QAEA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,QAAAR,EAAA;QAAqB,aAAAA,EAAA,MAAA;AAAA,MACtB;AAAA,IAAA;AAAA,IACU,gBAAAS;AAAA,MAATD,EAAA;AAAA,MAAA;AAAA,QAEA,WAAAR,QAAc;AAAA,QACd,YAAWA,EAAE,MAAA;AAAA,QAEb;QAAA,UAAC,gBAAAS;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WAAOC,EAAA;AAAA,YAAA;cAEL,qBAA8B,GAAGX,CAAsB;AAAA,cACzD,sBAAA,GAAAI,CAAA;AAAA,YAEA;AAAA,YAAA,UAAC,gBAAAM;AAAA,cAAA;AAAA,cAAA;AAAA,gBAEA,kBAAO;AAAA,gBACP;gBAEA;gBACC,UAAC,gBAAAF,EAAA,OAAI,EAAA,KAAaN,GAAQ,WAAAS,EAAA,QAAA,UAAA;AAAA,kBAAQ,gBAAAH,EAAA,OAAA,EAAA,WAAAG,EAAA,OAAA,UAAA;AAAA,oBAAMV,EAAA,MAAA;AAAA;kBAAC,EAAA,CAAA;AAAA,kBAE1C,gBAAAS,EAAA,OAAA,EAAA,WAAAC,EAAA,OAAA,UAAAV,EAAA,MAAA,MAAA,CAAA;AAAA,gBAAA,EAAA,CAAA;AAAA,cAAA;AAAA,YACD;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA;EAIJ,EAAA,CAAA;;"}

package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js

@@ -0,0 +1,16 @@
+const a = "containerWrapper__L6jJb", n = "container__0ahUu", e = "lockup__7l75G", o = "value__AL9Ol", c = "label__oG0LT", l = {
+  containerWrapper: a,
+  container: n,
+  lockup: e,
+  value: o,
+  label: c
+};
+export {
+  n as container,
+  a as containerWrapper,
+  l as default,
+  c as label,
+  e as lockup,
+  o as value
+};
+//# sourceMappingURL=styles.module.css.js.map

package/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/components/visualizations/donut-chart/components/internal-arc-label/index.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as s, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useRef as g, useState as c, useEffect as d } from "react";
+import { animated as a } from "@react-spring/web";
+import p from "classnames";
+import o from "./styles.module.css.js";
+import { getContrastYIQ as u, hexToRgb as b } from "../../../../../utils/get-contrast-yiq.js";
+const C = (t) => {
+  const r = g(null), [i, l] = c(0), [n, m] = c(0);
+  d(() => {
+    r.current && (l(r.current.offsetWidth), m(r.current.offsetHeight));
+  }, []);
+  const f = u(b(t.datum.color));
+  return /* @__PURE__ */ s(h, { children: [
+    /* @__PURE__ */ e("path", {}),
+    /* @__PURE__ */ e(a.g, { transform: t.style.transform, opacity: t.style.progress, children: /* @__PURE__ */ e(
+      "g",
+      {
+        className: o.container,
+        style: {
+          "--container-width": `${i}px`,
+          "--container-height": `${n}px`
+        },
+        children: /* @__PURE__ */ e(
+          a.foreignObject,
+          {
+            width: i,
+            height: n,
+            children: /* @__PURE__ */ e("div", { className: p(o.label, o[f]), children: /* @__PURE__ */ s("div", { ref: r, children: [
+              t.datum.value,
+              "%"
+            ] }) })
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  C as useRenderArcLabelComponent
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/donut-chart/components/internal-arc-label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/internal-arc-label/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { animated } from '@react-spring/web'\nimport type { ComputedDatum, DefaultRawDatum } from '@nivo/pie'\nimport type { ArcLabelComponent } from '@nivo/arcs'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\n\nexport const useRenderArcLabelComponent: typeof ArcLabelComponent<\n\tComputedDatum<DefaultRawDatum>\n> = (d) => {\n\tconst labelRef = useRef<HTMLDivElement>(null)\n\tconst [foreignObjectWidth, setForeignObjectWidth] = useState(0)\n\tconst [foreignObjectHeight, setForeignObjectHeight] = useState(0)\n\n\tuseEffect(() => {\n\t\tif (labelRef.current) {\n\t\t\tsetForeignObjectWidth(labelRef.current.offsetWidth)\n\t\t\tsetForeignObjectHeight(labelRef.current.offsetHeight)\n\t\t}\n\t}, [])\n\n\tconst textColor = getContrastYIQ(hexToRgb(d.datum.color))\n\treturn (\n\t\t<>\n\t\t\t<path />\n\t\t\t<animated.g transform={d.style.transform} opacity={d.style.progress}>\n\t\t\t\t<g\n\t\t\t\t\tclassName={s.container}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t['--container-width' as string]: `${foreignObjectWidth}px`,\n\t\t\t\t\t\t['--container-height' as string]: `${foreignObjectHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<animated.foreignObject\n\t\t\t\t\t\twidth={foreignObjectWidth}\n\t\t\t\t\t\theight={foreignObjectHeight}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={classNames(s.label, s[textColor])}>\n\t\t\t\t\t\t\t<div ref={labelRef}>{d.datum.value}%</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</animated.foreignObject>\n\t\t\t\t</g>\n\t\t\t</animated.g>\n\t\t</>\n\t)\n}\n"],"names":["d","labelRef","useRef","foreignObjectWidth","setForeignObjectWidth","useState","foreignObjectHeight","setForeignObjectHeight","useEffect","jsxs","Fragment","jsx","animated","s","classNames","textColor"],"mappings":";;;;;;;AAaC,UAA4C,CAAAA,MAAA;AAC5C,QAAMC,IAACC,EAAA,IAAoB,GACrB,CAACC,GAAAC,CAAqB,IAAsBC,EAAI,IAEtD,CAAAC,GAAgBC,CAAA,IAAAF,EAAA,CAAA;AACf,EAAAG,EAAI,MAAS;AACZ,kBACAJ,EAAAH,EAAuB,sBACxBM,EAAAN,EAAA,QAAA,YAAA;AAAA,EAGD,GAAA,CAAA,CAAA;AACA,wBAEE,KAAA,CAAA;AAAA,SAAC,gBAAAQ,EAAAC,GAAK,EAAA,UAAA;AAAA,IACN,gBAAAC,EAAC,QAAA,CAAS,CAAA;AAAA,IACR,gBAAAA,EAAAC,EAAA,GAAA,EAAA,WAAAZ,EAAA,MAAA,WAAA,SAAAA,EAAA,MAAA,UAAA,UAAA,gBAAAW;AAAA,MAAA;AAAA,MAAA;AAAA,QAEA,WAAOE,EAAA;AAAA,QAAA;UAEL,qBAA8B,GAAGV,CAAG;AAAA,UACtC,sBAAA,GAAAG,CAAA;AAAA,QAEA;AAAA,QAAA,UAAU,gBAAAK;AAAA,UAATC,EAAA;AAAA,UAAA;AAAA,YAEA;YAEA,QAAAN;AAAA,YACsB,UAAQ,gBAAAK,EAAA,OAAA,EAAA,WAAAG,EAAAD,EAAA,OAAAA,EAAAE,CAAA,CAAA,GAAA,UAAA,gBAAAN,EAAA,OAAA,EAAA,KAAAR,GAAA,UAAA;AAAA,cAAMD,EAAA,MAAA;AAAA,cAAA;AAAA,YACpC,EAAA,CAAA,EAAA,CAAA;AAAA,UAAA;AAAA,QACD;AAAA,MACD;AAAA,MAEF,CAAA;AAAA,EAEF,EAAA,CAAA;;"}

package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js

@@ -0,0 +1,14 @@
+const t = "container__zNSm3", a = "label__lanZz", l = "light__cA0lL", n = "dark__tX3sL", c = {
+  container: t,
+  label: a,
+  light: l,
+  dark: n
+};
+export {
+  t as container,
+  n as dark,
+  c as default,
+  a as label,
+  l as light
+};
+//# sourceMappingURL=styles.module.css.js.map

package/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}