@hashicorp/mds-react 0.9.0

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

@@ -0,0 +1,76 @@
+.datasetValue {
+	--width: 0;
+
+	display: flex;
+	align-items: center;
+	height: 23px;
+	position: relative;
+	width: calc(var(--width) * 1%);
+}
+
+.datasetValueBar {
+	--currentValue: 0;
+	--highestValue: 0;
+
+	flex-shrink: 0;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+
+	&::after {
+		content: '';
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		background: var(--bar-background);
+	}
+}
+
+.datasetValuePercent {
+	--currentValue: 0;
+	--highestValue: 0;
+	--previousValue: 0;
+
+	/* Ensure letters display at the same width. Totaling ~ 52px */
+
+	/* https://twitter.com/wesbos/status/932644812582522880/ */
+	font-feature-settings: 'tnum';
+	font-variant-numeric: tabular-nums;
+	left: 0;
+	padding-left: var(--mds-spacing-02);
+	z-index: 1;
+
+	&.offset {
+		color: var(--mds-color-foreground-primary);
+
+		/* HACK: Ensures values meeting the criteria 
+		to be `.offset` in stacked bars maintain 
+		non-`.offset` styles on widths where the 
+		bar is stackable */
+		&.stackable {
+			@media (min-width: 560px) {
+				color: inherit;
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+
+	&:not(.offset) {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+}
+
+.light {
+	color: #fff;
+}
+
+.dark {
+	color: #000;
+}

package/dist/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/dist/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/dist/components/visualizations/bar-chart/horizontal-chart/index.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+interface Dataset {
+    label: string;
+    values: Array<{
+        value: number;
+        color: string;
+    }>;
+    total?: number;
+}
+interface Category {
+    label: string;
+    color: string;
+}
+export interface HorizontalBarChartProps {
+    /**
+     * Passing more than one category causes
+     * the Key to be displayed.
+     *
+     * If no categories are passed, the default
+     * color is Blue.
+     */
+    categories?: Array<Category>;
+    /**
+     * All group.values.length must be equal
+     * to the length of the number of groups
+     * passed. If no groups are passed, each
+     * group.values.length must equal one.
+     */
+    datasets: Array<Dataset>;
+    /**
+     * The total number of groups to display
+     * initially before the user hits the
+     * "Show all" button.  Default unlimited.
+     * */
+    maxInitialDatasets?: number;
+    /**
+     * If true, values in each `group` will
+     * be stacked together to form a single
+     * bar.
+     */
+    stacked?: boolean;
+}
+export default function HorizontalBarChart({ categories, datasets, maxInitialDatasets, stacked, }: HorizontalBarChartProps): JSX.Element;
+export {};

package/dist/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/dist/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/dist/components/visualizations/bar-chart/horizontal-chart/legend/index.d.ts

@@ -0,0 +1,10 @@
+interface Key {
+    label: string;
+    color: string;
+}
+interface LegendProps {
+    className?: string;
+    keys: Array<Key>;
+}
+export default function Legend({ keys, className }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/dist/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/dist/components/visualizations/bar-chart/horizontal-chart/legend/style.module.css

@@ -0,0 +1,29 @@
+.keyWrapper {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	max-width: 100%;
+	column-gap: var(--mds-spacing-09);
+	row-gap: var(--mds-spacing-07);
+}
+
+.key {
+	align-items: center;
+	display: flex;
+}
+
+.dot {
+	--size: 16px;
+
+	flex-shrink: 0;
+	border-radius: var(--size);
+	height: var(--size);
+	width: var(--size);
+	margin-right: var(--mds-spacing-03);
+}
+
+.name {
+	composes: mds-typography-body-200 from global;
+	margin: 0;
+	color: var(--mds-color-foreground-primary);
+}

package/dist/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/dist/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/dist/components/visualizations/bar-chart/horizontal-chart/style.module.css

@@ -0,0 +1,76 @@
+.barChart {
+	margin: 0 auto;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.chart {
+	width: 100%;
+	display: grid;
+	row-gap: var(--mds-spacing-06);
+}
+
+.dataset {
+	display: grid;
+	width: 100%;
+
+	@media (--large) {
+		grid-column-gap: var(--mds-spacing-07);
+		grid-row-gap: var(--mds-spacing-04);
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.datasetLabel {
+	align-self: center;
+	display: flex;
+	margin-bottom: var(--mds-spacing-01);
+	color: var(--mds-color-foreground-primary);
+	composes: mds-typography-body-200 from global;
+
+	@media (--large) {
+		justify-content: flex-end;
+		margin-bottom: 0;
+		text-align: right;
+	}
+}
+
+.datasetValues {
+	align-self: center;
+	overflow: hidden;
+
+	&.datasetValuesStacked {
+		display: grid;
+		@media (min-width: 560px) {
+			display: flex;
+			align-items: center;
+		}
+	}
+}
+
+.datasetTotal {
+	margin: 0;
+}
+
+.datasetTotalText {
+	@media (min-width: 560px) {
+		display: none;
+	}
+}
+
+.datasetTotalPercent {
+	padding-left: var(--mds-spacing-02);
+}
+
+.showAllButton {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: var(--mds-spacing-08);
+}
+
+.legend {
+	margin-top: var(--mds-spacing-09);
+}

package/dist/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/dist/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/dist/components/visualizations/bar-chart/index.d.ts

@@ -0,0 +1,13 @@
+import { default as HorizontalBarChart, HorizontalBarChartProps } from './horizontal-chart';
+interface HorizontalBarChart extends HorizontalBarChartProps {
+    name: string;
+    caption: string;
+}
+export interface BarChartProps {
+    data: HorizontalBarChart[];
+}
+export declare const BarChart: {
+    ({ data }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/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/dist/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/dist/components/visualizations/bar-chart/style.module.css

@@ -0,0 +1,39 @@
+.chartContainer {
+	position: relative;
+	background: var(--mds-accent-border-color, var(--mds-color-border-primary));
+	border-radius: var(--mds-spacing-04);
+	margin: 0;
+	padding: var(--mds-spacing-08);
+	isolation: isolate;
+
+	&.multiple {
+		margin-top: var(--mds-spacing-08);
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		z-index: -1;
+		inset: var(--mds-accent-border-width, 1px);
+		background-color: var(--mds-color-surface-primary);
+		border-radius: calc(
+			var(--mds-spacing-04) - var(--mds-accent-border-width, 1px)
+		);
+	}
+
+	@media (--medium-up) {
+		padding: var(--mds-spacing-11) var(--mds-spacing-15);
+	}
+}
+
+.caption {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}

package/dist/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/dist/components/visualizations/bar-chart/style.module.css.js.map

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

package/dist/components/visualizations/donut-chart/components/arc-tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DefaultRawDatum, PieTooltipProps } from '@nivo/pie';
+export declare const renderArcTooltip: FC<PieTooltipProps<DefaultRawDatum>>;

package/dist/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/dist/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/dist/components/visualizations/donut-chart/components/arc-tooltip/styles.module.css

@@ -0,0 +1,14 @@
+.container {
+	background: #222;
+	color: #fff;
+	display: flex;
+	flex-direction: column;
+	max-width: 200px;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+
+.label {
+	font-size: 0.875rem;
+	line-height: 1rem;
+}

package/dist/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/dist/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/dist/components/visualizations/donut-chart/components/external-arc-label/index.d.ts

@@ -0,0 +1,3 @@
+import { ComputedDatum, DefaultRawDatum } from '@nivo/pie';
+import { ArcLinkLabelComponent } from '@nivo/arcs';
+export declare const useRenderArcLinkLabelComponent: typeof ArcLinkLabelComponent<ComputedDatum<DefaultRawDatum>>;