@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/tabs/use-tabs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-context.js","sources":["../../../src/components/tabs/use-tabs-context.ts"],"sourcesContent":["'use client'\n\nimport {\n\ttype MutableRefObject,\n\ttype MouseEvent,\n\ttype KeyboardEvent,\n\tcreateContext,\n\tuseContext,\n} from 'react'\n\ninterface TabsContextState {\n\ttabNodes: MutableRefObject<Array<HTMLButtonElement>>\n\tpanelNodes: MutableRefObject<Array<HTMLDivElement>>\n\ttabIds: Array<string>\n\tpanelIds: Array<string>\n\tselectedTabIndex: number\n\tonClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void\n\tonKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void\n\tsize: 'medium' | 'large'\n\ttabsListRef: MutableRefObject<HTMLUListElement | null>\n}\n\nexport const TabsContext = createContext<TabsContextState | undefined>(\n\tundefined,\n)\n\nexport function useTabsContext(): TabsContextState {\n\tconst context = useContext(TabsContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useTabsContext must be used within a TabsContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext"],"mappings":";;AAsB2B,MAC1BA,IAAAC;AAAA,EACD;AAEO;AACN,SAAMC,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,2DAAA;AAED,SAAAA;;"}

package/dist/components/text/index.d.ts

@@ -0,0 +1,70 @@
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+declare const TEXT_COLORS: readonly ["primary", "strong", "faint", "disabled", "high-contrast", "action", "action-hover", "action-active", "highlight", "highlight-on-surface", "highlight-high-contrast", "success", "success-on-surface", "success-high-contrast", "warning", "warning-on-surface", "warning-high-contrast", "critical", "critical-on-surface", "critical-high-contrast"];
+declare const TEXT_GROUPS: readonly ["hds-body", "code", "body", "display-expressive", "label"];
+declare const TEXT_SIZES: readonly ["100", "200", "300", "400", "500", "600", "700", "800"];
+declare const TEXT_WEIGHTS: readonly ["regular", "medium", "semibold", "bold"];
+type TextColor = (typeof TEXT_COLORS)[number];
+type TextWeight = (typeof TEXT_WEIGHTS)[number];
+type TextGroup = (typeof TEXT_GROUPS)[number];
+type TextSize = (typeof TEXT_SIZES)[number];
+type HexColor = string & {
+    hexish?: unknown;
+};
+interface BaseTextProps {
+    size?: TextSize;
+    weight?: TextWeight;
+    align?: 'left' | 'center' | 'right';
+    color?: TextColor | HexColor;
+    className?: string;
+    children?: ReactNode;
+}
+type PolymorphicTextProps<TTag extends ElementType, OwnProps extends object> = OwnProps & {
+    tag?: TTag;
+} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps | 'tag'>;
+interface TextImplInternalProps extends BaseTextProps {
+    group: TextGroup;
+    tag?: ElementType;
+    [key: string]: unknown;
+}
+/** ------------------------------------------------------------------
+ * Body
+ * ------------------------------------------------------------------ */
+interface BodyOwnProps extends BaseTextProps {
+    size?: '200' | '300' | '400';
+}
+export type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, BodyOwnProps>;
+/** ------------------------------------------------------------------
+ * DisplayExpressive
+ * ------------------------------------------------------------------ */
+interface DisplayExpressiveOwnProps extends BaseTextProps {
+    size?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800';
+}
+export type DisplayExpressiveProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, DisplayExpressiveOwnProps>;
+/** ------------------------------------------------------------------
+ * Label
+ * ------------------------------------------------------------------ */
+type LabelOwnProps = Omit<BaseTextProps, 'size'>;
+export type LabelProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, LabelOwnProps>;
+/** ------------------------------------------------------------------
+ * HDSBody
+ * ------------------------------------------------------------------ */
+interface HDSBodyOwnProps extends BaseTextProps {
+    size?: '100' | '200' | '300';
+}
+export type HDSBodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, HDSBodyOwnProps>;
+/** ------------------------------------------------------------------
+ * Code
+ * ------------------------------------------------------------------ */
+interface CodeOwnProps extends BaseTextProps {
+    size?: '100' | '200' | '300';
+}
+export type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, CodeOwnProps>;
+declare const Text: {
+    Body: <TTag extends ElementType = "span">(props: BodyProps<TTag>) => import("react").FunctionComponentElement<TextImplInternalProps>;
+    DisplayExpressive: <TTag extends ElementType = "span">(props: DisplayExpressiveProps<TTag>) => import("react").FunctionComponentElement<TextImplInternalProps>;
+    Label: <TTag extends ElementType = "span">(props: LabelProps<TTag>) => import("react").FunctionComponentElement<TextImplInternalProps>;
+    HDSBody: <TTag extends ElementType = "span">(props: HDSBodyProps<TTag>) => import("react").FunctionComponentElement<TextImplInternalProps>;
+    Code: <TTag extends ElementType = "span">(props: CodeProps<TTag>) => import("react").FunctionComponentElement<TextImplInternalProps>;
+};
+export { Text, TEXT_COLORS, TEXT_WEIGHTS };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text/index.tsx"],"names":[],"mappings":"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"}

package/dist/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\ttype ReactNode,\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 {\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\ntype PolymorphicTextProps<\n\tTTag extends ElementType,\n\tOwnProps extends object,\n> = OwnProps & {\n\ttag?: TTag\n} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps | 'tag'>\n\ninterface TextImplInternalProps extends BaseTextProps {\n\tgroup: TextGroup\n\ttag?: ElementType\n\t// allow any other intrinsic props to pass through\n\t[key: string]: unknown\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 = (props: TextImplInternalProps) => {\n\tconst {\n\t\ttag,\n\t\tgroup,\n\t\tsize = '200',\n\t\tweight,\n\t\talign,\n\t\tcolor,\n\t\tchildren,\n\t\tclassName,\n\t\t...rest\n\t} = props\n\n\tconst Component = (tag ?? 'span') as ElementType\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\n/** ------------------------------------------------------------------\n * Body\n * ------------------------------------------------------------------ */\n\ninterface BodyOwnProps extends BaseTextProps {\n\tsize?: '200' | '300' | '400'\n}\n\nexport type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tBodyOwnProps\n>\n\nconst Body = <TTag extends ElementType = 'span'>(props: BodyProps<TTag>) => {\n\tconst { tag, size = '300', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'body' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * DisplayExpressive\n * ------------------------------------------------------------------ */\n\ninterface DisplayExpressiveOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nexport type DisplayExpressiveProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, DisplayExpressiveOwnProps>\n\nconst DisplayExpressive = <TTag extends ElementType = 'span'>(\n\tprops: DisplayExpressiveProps<TTag>,\n) => {\n\tconst { tag, size = '200', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'display-expressive' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * Label\n * ------------------------------------------------------------------ */\n\ntype LabelOwnProps = Omit<BaseTextProps, 'size'>\n\nexport type LabelProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, LabelOwnProps>\n\nconst Label = <TTag extends ElementType = 'span'>(props: LabelProps<TTag>) => {\n\tconst { tag, ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tgroup: 'label' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * HDSBody\n * ------------------------------------------------------------------ */\n\ninterface HDSBodyOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300'\n}\n\nexport type HDSBodyProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, HDSBodyOwnProps>\n\nconst HDSBody = <TTag extends ElementType = 'span'>(\n\tprops: HDSBodyProps<TTag>,\n) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * Code\n * ------------------------------------------------------------------ */\n\ninterface CodeOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300'\n}\n\nexport type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tCodeOwnProps\n>\n\nconst Code = <TTag extends ElementType = 'span'>(props: CodeProps<TTag>) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code' as const,\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","props","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","HDSBody","Code","Text"],"mappings":"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"}

package/dist/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.d.ts

@@ -0,0 +1,9 @@
+interface DatasetValueProps {
+    value: number;
+    highestValue: number;
+    color: string;
+    stackable: boolean;
+}
+export default function DatasetValue({ value, highestValue, color, stackable, }: DatasetValueProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,KAAK,EACL,YAAY,EACZ,KAAK,EACL,SAAS,GACT,EAAE,iBAAiB,2CAyEnB"}

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

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

package/dist/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 '@usefy/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: (entry) => {\n\t\t\tconst width = entry.contentRect?.width ?? 0\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","ref","useResizeObserver","width","entry","offsetThreshold","setValueIsOffset","valueColor","getContrastYIQ","jsxs","classNames","s","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,GACjD,EAAA,KAAAC,EAAU,IAACC,EAAU;AAAA,IACpB,iBAAc;AAEd,YAAIC,IAAUC,EAAG,aAAA,SAAA;AAChB,MAAAT,MAAQ,MACTA,IAAA;AAWA,UAAIU,IAAe;AAElB,MAAAV,KAAA,WAAkB,KACnBU,IAAoB,KAEnBV,KAAkB,QACnBU,IAAA,KAGCF,KAAAA,IAAiBE,IAClBC,EAAO,EAAA,IAEPA,EAAA,EAAA;AAAA,IAED;AAAA,EAED,CAAA,GAMMC,IAAAC,IAA+BX,CAAA,QAGpCF,IAAAC,IAAA;AAAA,SAAC,gBAAAa;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAR;AAAA,MACA,WACCS,EAAAC,EAAA,cAAAA,EAAAJ,CAAA,CAAA;AAAA,MAAA;QAEA,WAAAK;AAAA,MAGD;AAAA,MAAA,UAAA;AAAA,QAAC,gBAAAC;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WACCF,EAAA;AAAA,YAAA;cACqB,oBAAAd;AAAA,YACrB;AAAA,UAEF;AAAA,QAAA;AAAA,QACM,gBAAAY;AAAA,UAALK,EAAA;AAAA,UAAA;AAAA,YAEA;YACA;YAA6C,WACnCJ,EAAGC,EAAA,qBAAA;AAAA,cACZ,CAACA,EAAE,MAAA,GAASZ;AAAA,cACZ,CAAAY,EAAA,SAAA,GAAAb;AAAA,YAEA;YAAA,UAAA;AAAA,cAAMH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}

package/dist/components/visualizations/bar-chart/horizontal-chart/index.d.ts

@@ -0,0 +1,44 @@
+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 {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/bar-chart/horizontal-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/visualizations/bar-chart/horizontal-chart/index.tsx"],"names":[],"mappings":"AAYA,UAAU,OAAO;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;KACb,CAAC,CAAA;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,uBAAuB;IACvC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IACxB;;;;SAIK;IACL,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAC1C,UAAU,EACV,QAAQ,EAER,kBAAwB,EACxB,OAAe,GACf,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAmJvC"}

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 "../../../../utils/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 '../../../../utils/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,11 @@
+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 {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/bar-chart/horizontal-chart/legend/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/legend/index.tsx"],"names":[],"mappings":"AAGA,UAAU,GAAG;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACb;AAED,UAAU,WAAW;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW,2CAe9D"}

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) {
+		column-gap: var(--mds-spacing-07);
+		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/index.d.ts

@@ -0,0 +1,14 @@
+import HorizontalBarChart, { type 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 {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/visualizations/bar-chart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,kBAAkB,EAAE,EAC1B,KAAK,uBAAuB,EAC5B,MAAM,oBAAoB,CAAA;AAM3B,UAAU,kBAAmB,SAAQ,uBAAuB;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,kBAAkB,EAAE,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ;eAAc,aAAa;;CAmB/C,CAAA"}

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

@@ -0,0 +1,37 @@
+.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-path: inset(50%);
+	white-space: nowrap;
+	border-width: 0;
+}

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

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { DefaultRawDatum, PieTooltipProps } from '@nivo/pie';
+export declare const renderArcTooltip: FC<PieTooltipProps<DefaultRawDatum>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/visualizations/donut-chart/components/arc-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAGjE,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,CAMjE,CAAA"}

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

@@ -0,0 +1,4 @@
+import type { ComputedDatum, DefaultRawDatum } from '@nivo/pie';
+import type { ArcLinkLabelComponent } from '@nivo/arcs';
+export declare const useRenderArcLinkLabelComponent: typeof ArcLinkLabelComponent<ComputedDatum<DefaultRawDatum>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/donut-chart/components/external-arc-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/visualizations/donut-chart/components/external-arc-label/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAKvD,eAAO,MAAM,8BAA8B,EAAE,OAAO,qBAAqB,CACxE,aAAa,CAAC,eAAe,CAAC,CA6C9B,CAAA"}

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

@@ -0,0 +1,4 @@
+export { renderArcTooltip } from './arc-tooltip';
+export { useRenderArcLinkLabelComponent } from './external-arc-label';
+export { useRenderArcLabelComponent } from './internal-arc-label';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/visualizations/donut-chart/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,8BAA8B,EAAE,MAAM,sBAAsB,CAAA;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA"}

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

@@ -0,0 +1,4 @@
+import type { ComputedDatum, DefaultRawDatum } from '@nivo/pie';
+import type { ArcLabelComponent } from '@nivo/arcs';
+export declare const useRenderArcLabelComponent: typeof ArcLabelComponent<ComputedDatum<DefaultRawDatum>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/visualizations/donut-chart/components/internal-arc-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/visualizations/donut-chart/components/internal-arc-label/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAKnD,eAAO,MAAM,0BAA0B,EAAE,OAAO,iBAAiB,CAChE,aAAa,CAAC,eAAe,CAAC,CAqC9B,CAAA"}

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

@@ -0,0 +1,11 @@
+import type { DonutChartData, DonutChartProps } from './types';
+export declare const DonutChart: {
+    ({ data }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface DonutChartPanelProps {
+    tabId?: string;
+    data: DonutChartData[];
+    groupIndex?: number;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/visualizations/donut-chart/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAkB,MAAM,SAAS,CAAA;AAqC9E,eAAO,MAAM,UAAU;eAAc,eAAe;;CAclD,CAAA;AAcF,MAAM,WAAW,oBAAoB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,cAAc,EAAE,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB"}