@hashicorp/mds-react 0.9.13 → 0.9.15

package/components/tabs/tab-panel.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes } from 'react';
-type TabPanelProps = HTMLAttributes<HTMLDivElement>;
-declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
-export type { TabPanelProps };
-export { TabPanel };

package/components/tabs/tab-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId]\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex]\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}

package/components/tabs/tab.d.ts

@@ -1,24 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { FlightIconName } from '../flight-icon';
-interface TabProps extends HTMLAttributes<HTMLLIElement> {
-    tabIndicatorTheme?: 'primary' | 'secondary';
-    /**
-     * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)
-     */
-    count?: string;
-    /**
-     * Displays an icon in the tab. (optional)
-     */
-    icon?: FlightIconName;
-    /**
-     * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)
-     */
-    isSelected?: boolean;
-    /**
-     * Used to append analytics and tracking related data attributes to any interactive element internal to this component.
-     */
-    trackingKey?: string;
-}
-declare const Tab: ({ count, icon, isSelected: isInitialTab, children, className, trackingKey, tabIndicatorTheme, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
-export type { TabProps };
-export { Tab };

package/components/tabs/tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}

package/components/tabs/tabs.module.scss

@@ -1,163 +0,0 @@
-@use 'styles/mixins/focus-ring' as *;
-
-.tablist-wrapper {
-	position: relative;
-
-	// bottom gray border:
-	&::before {
-		position: absolute;
-		right: 0;
-		bottom: calc(
-			(var(--mds-tabs-indicator-height) - var(--mds-tabs-divider-height)) /
-				2
-		);
-		left: 0;
-		display: block;
-		border-top: var(--mds-tabs-divider-height) solid
-			var(--mds-color-border-primary);
-		content: '';
-	}
-}
-
-.tablist {
-	position: relative;
-	display: flex;
-	margin: 0;
-	padding: 0;
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-}
-
-.tab {
-	position: relative;
-	display: flex;
-	align-items: center;
-	height: var(--mds-tabs-tab-height-medium);
-	margin: 0;
-	padding: var(--mds-tabs-tab-padding-vertical)
-		var(--mds-tabs-tab-padding-horizontal-medium);
-	white-space: nowrap;
-	text-decoration: none;
-	list-style: none;
-
-	&.primary {
-		color: var(
-			--mds-accent-tab-color-foreground,
-			var(--mds-color-foreground-primary)
-		);
-
-		&:hover {
-			color: var(
-				--mds-accent-tab-color-foreground-hover,
-				var(
-					--mds-accent-tab-color-foreground,
-					var(--mds-color-foreground-action)
-				)
-			);
-		}
-
-		&.selected {
-			color: var(
-				--mds-accent-tab-selected-color-foreground,
-				var(
-					--mds-accent-tab-color-foreground,
-					var(--mds-color-foreground-action)
-				)
-			);
-
-			&:hover {
-				color: var(
-					--mds-accent-tab-selected-color-foreground-hover,
-					var(
-						--mds-accent-tab-selected-color-foreground,
-						var(
-							--mds-accent-tab-color-foreground,
-							var(--mds-color-foreground-action-hover)
-						)
-					)
-				);
-
-				& ~ .indicator {
-					background: var(
-						--mds-accent-tab-indicator-color,
-						var(--mds-color-foreground-action-hover)
-					);
-				}
-			}
-		}
-	}
-
-	&.secondary {
-		color: var(--mds-color-foreground-faint);
-
-		&:hover {
-			color: var(--mds-color-foreground-strong);
-		}
-
-		&.selected {
-			color: var(--mds-color-foreground-strong);
-		}
-
-		& ~ .indicator {
-			background: var(
-				--mds-accent-tab-indicator-color,
-				var(--mds-color-foreground-strong)
-			);
-		}
-	}
-}
-
-.tab-button {
-	@include hds-focus-ring-with-pseudo-element(
-		$top: var(--mds-tabs-tab-focus-inset),
-		$right: var(--mds-tabs-tab-focus-inset),
-		$bottom: var(--mds-tabs-tab-focus-inset),
-		$left: var(--mds-tabs-tab-focus-inset)
-	);
-	position: static;
-	display: flex;
-	gap: var(--mds-tabs-tab-gutter);
-	align-items: center;
-	padding: 0;
-	color: inherit;
-	background-color: transparent;
-	border: none;
-	border-radius: var(--mds-tabs-tab-border-radius);
-	cursor: pointer;
-
-	// Expand click target area
-	&::after {
-		position: absolute;
-		content: '';
-		inset: 0;
-	}
-}
-
-.indicator {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	// notice: this custom prop is set dynamically via JavaScript
-	left: var(--indicator-left-pos);
-	z-index: 10;
-	display: block;
-	// notice: this custom prop is set dynamically via JavaScript
-	width: var(--indicator-width);
-	height: var(--mds-tabs-indicator-height);
-	background: var(
-		--mds-accent-tab-indicator-color,
-		var(--mds-color-foreground-action)
-	);
-	border-radius: var(--mds-tabs-indicator-height);
-
-	@media screen and (prefers-reduced-motion: no-preference) {
-		transition-timing-function: var(--mds-tabs-indicator-transition-function);
-		transition-duration: var(--mds-tabs-indicator-transition-duration);
-		transition-property: left, width;
-	}
-}
-
-// Prevent consumers from accidentally overriding default styling of HTML “hidden” attribute
-.panel[hidden] {
-	display: none;
-}

package/components/tabs/use-tabs-context.d.ts

@@ -1,15 +0,0 @@
-import { MutableRefObject, MouseEvent, KeyboardEvent } from 'react';
-interface TabsContextState {
-    tabNodes: MutableRefObject<Array<HTMLButtonElement>>;
-    panelNodes: MutableRefObject<Array<HTMLDivElement>>;
-    tabIds: Array<string>;
-    panelIds: Array<string>;
-    selectedTabIndex: number;
-    onClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void;
-    onKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void;
-    size: 'medium' | 'large';
-    tabsListRef: MutableRefObject<HTMLUListElement | null>;
-}
-export declare const TabsContext: import('react').Context<TabsContextState | undefined>;
-export declare function useTabsContext(): TabsContextState;
-export {};

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

@@ -1 +0,0 @@
-{"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/components/text/index.d.ts

@@ -1,69 +0,0 @@
-import { ComponentPropsWithRef, ElementType, 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<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: BodyProps<TTag>) => import('react').FunctionComponentElement<TextImplInternalProps>;
-    DisplayExpressive: <TTag_1 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: DisplayExpressiveProps<TTag_1>) => import('react').FunctionComponentElement<TextImplInternalProps>;
-    Label: <TTag_2 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: LabelProps<TTag_2>) => import('react').FunctionComponentElement<TextImplInternalProps>;
-    HDSBody: <TTag_3 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: HDSBodyProps<TTag_3>) => import('react').FunctionComponentElement<TextImplInternalProps>;
-    Code: <TTag_4 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: CodeProps<TTag_4>) => import('react').FunctionComponentElement<TextImplInternalProps>;
-};
-export { Text, TEXT_COLORS, TEXT_WEIGHTS };

package/components/text/index.js.map

@@ -1 +0,0 @@
-{"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/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.d.ts

@@ -1,8 +0,0 @@
-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 {};

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

@@ -1,62 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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/index.d.ts

@@ -1,44 +0,0 @@
-/// <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/components/visualizations/bar-chart/horizontal-chart/index.js

@@ -1,104 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,10 +0,0 @@
-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 {};