@hashicorp/mds-react 0.9.2 → 0.9.4

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { ResponsivePie as g } from "@nivo/pie";
+import f from "use-resize-observer";
+import m from "classnames";
+import { Tabs as c } from "../../tabs/index.js";
+import { useTabsContext as L } from "../../tabs/use-tabs-context.js";
+import o from "./styles.module.css.js";
+import { renderArcTooltip as h } from "./components/arc-tooltip/index.js";
+import { useRenderArcLinkLabelComponent as d } from "./components/external-arc-label/index.js";
+import { useRenderArcLabelComponent as k } from "./components/internal-arc-label/index.js";
+const C = (e) => e > 4 ? 24 : 16, A = (e) => e === "xsmall" ? { top: 10, right: 0, bottom: 10, left: 0 } : e === "small" ? { top: 10, right: 40, bottom: 20, left: 40 } : { top: 80, right: 210, bottom: 84, left: 210 }, N = ({ data: e }) => e.length > 1 ? /* @__PURE__ */ i(c.Provider, { size: "large", children: [
+  /* @__PURE__ */ t(c.TabList, { children: e.map((r, a) => /* @__PURE__ */ t(c.Tab, { className: o.tab, children: r.groupName }, a)) }),
+  /* @__PURE__ */ t(D, { data: e })
+] }) : /* @__PURE__ */ t(p, { data: e });
+N.displayName = "DonutChart";
+const D = ({ data: e }) => {
+  const { selectedTabIndex: r, tabIds: a } = L(), n = a[r];
+  return /* @__PURE__ */ t(p, { tabId: n, data: e, groupIndex: r });
+}, p = ({
+  tabId: e,
+  data: r,
+  groupIndex: a = 0
+}) => {
+  const [n, s] = b("regular"), { ref: u } = f({
+    onResize: ({ width: l }) => {
+      l && l < 360 ? s("xsmall") : l && l < 600 ? s("small") : s("regular");
+    }
+  });
+  return /* @__PURE__ */ i(
+    "figure",
+    {
+      className: m(
+        o["chart-container"],
+        r.length > 1 && o.multiple
+      ),
+      id: r[a].groupId,
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : r[a].groupName,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ i("div", { className: m(o.chart, o[n]), ref: u, children: [
+          /* @__PURE__ */ t(
+            g,
+            {
+              data: r[a].groupData,
+              margin: A(n),
+              enableArcLabels: n !== "regular",
+              enableArcLinkLabels: n === "regular",
+              arcLabelsComponent: k,
+              arcLinkLabelComponent: d,
+              arcLinkLabelsSkipAngle: C(
+                r[a].groupData.length
+              ),
+              tooltip: h,
+              "aria-hidden": "true",
+              colors: { datum: "data.color" },
+              innerRadius: 0.5,
+              padAngle: 1,
+              cornerRadius: 8,
+              activeOuterRadiusOffset: 4,
+              arcLinkLabelsThickness: 1,
+              arcLinkLabelsOffset: 4,
+              arcLinkLabelsDiagonalLength: 28,
+              arcLinkLabelsStraightLength: 24,
+              arcLabelsSkipAngle: 16
+            }
+          ),
+          r[a].groupCaption && /* @__PURE__ */ t("figcaption", { children: r[a].groupCaption })
+        ] }),
+        n !== "regular" && /* @__PURE__ */ t("ul", { className: o.legend, "aria-hidden": "true", children: r[a].groupData.map((l) => /* @__PURE__ */ i("li", { children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: o["legend-dot"],
+              style: { background: l.color }
+            }
+          ),
+          l.label
+        ] }, l.id)) })
+      ]
+    }
+  );
+};
+export {
+  N as DonutChart
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/donut-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { ResponsivePie } from '@nivo/pie'\nimport type { DonutChartData, DonutChartProps, DonutChartSize } from './types'\nimport useResizeObserver from 'use-resize-observer'\nimport classNames from 'classnames'\nimport { Tabs } from '../../tabs'\nimport {\n\trenderArcTooltip,\n\tuseRenderArcLabelComponent,\n\tuseRenderArcLinkLabelComponent,\n} from './components'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport s from './styles.module.css'\n\nconst getArcLinkLabelsSkipAngle = (count: number): number => {\n\tif (count > 4) {\n\t\treturn 24\n\t}\n\n\treturn 16\n}\n\nconst getMargins = (\n\tsize: DonutChartSize\n): {\n\ttop?: number\n\tright?: number\n\tbottom?: number\n\tleft?: number\n} => {\n\tif (size === 'xsmall') {\n\t\treturn { top: 10, right: 0, bottom: 10, left: 0 }\n\t} else if (size === 'small') {\n\t\treturn { top: 10, right: 40, bottom: 20, left: 40 }\n\t} else {\n\t\treturn { top: 80, right: 210, bottom: 84, left: 210 }\n\t}\n}\n\nexport const DonutChart = ({ data }: DonutChartProps) =>\n\tdata.length > 1 ? (\n\t\t<Tabs.Provider size=\"large\">\n\t\t\t<Tabs.TabList>\n\t\t\t\t{data.map((group, i) => (\n\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t{group.groupName}\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t))}\n\t\t\t</Tabs.TabList>\n\t\t\t<DonutChartPanelWithTabCtx data={data} />\n\t\t</Tabs.Provider>\n\t) : (\n\t\t<DonutChartPanel data={data} />\n\t)\n\nDonutChart.displayName = 'DonutChart'\n\nconst DonutChartPanelWithTabCtx = ({ data }: { data: DonutChartData[] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<DonutChartPanel tabId={tabId} data={data} groupIndex={selectedTabIndex} />\n\t)\n}\n\nexport interface DonutChartPanelProps {\n\ttabId?: string\n\tdata: DonutChartData[]\n\tgroupIndex?: number\n}\n\nconst DonutChartPanel = ({\n\ttabId,\n\tdata,\n\tgroupIndex = 0,\n}: DonutChartPanelProps) => {\n\tconst [size, setSize] = useState<DonutChartSize>('regular')\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\tif (width && width < 360) {\n\t\t\t\tsetSize('xsmall')\n\t\t\t} else if (width && width < 600) {\n\t\t\t\tsetSize('small')\n\t\t\t} else {\n\t\t\t\tsetSize('regular')\n\t\t\t}\n\t\t},\n\t})\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(\n\t\t\t\ts['chart-container'],\n\t\t\t\tdata.length > 1 && s.multiple\n\t\t\t)}\n\t\t\tid={data[groupIndex].groupId}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : data[groupIndex].groupName}\n\t\t\taria-labelledby={tabId || undefined}\n\t\t>\n\t\t\t<div className={classNames(s.chart, s[size])} ref={ref}>\n\t\t\t\t<ResponsivePie\n\t\t\t\t\tdata={data[groupIndex].groupData}\n\t\t\t\t\tmargin={getMargins(size)}\n\t\t\t\t\tenableArcLabels={size !== 'regular'}\n\t\t\t\t\tenableArcLinkLabels={size === 'regular'}\n\t\t\t\t\tarcLabelsComponent={useRenderArcLabelComponent}\n\t\t\t\t\tarcLinkLabelComponent={useRenderArcLinkLabelComponent}\n\t\t\t\t\tarcLinkLabelsSkipAngle={getArcLinkLabelsSkipAngle(\n\t\t\t\t\t\tdata[groupIndex].groupData.length\n\t\t\t\t\t)}\n\t\t\t\t\ttooltip={renderArcTooltip}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tcolors={{ datum: 'data.color' }}\n\t\t\t\t\tinnerRadius={0.5}\n\t\t\t\t\tpadAngle={1}\n\t\t\t\t\tcornerRadius={8}\n\t\t\t\t\tactiveOuterRadiusOffset={4}\n\t\t\t\t\tarcLinkLabelsThickness={1}\n\t\t\t\t\tarcLinkLabelsOffset={4}\n\t\t\t\t\tarcLinkLabelsDiagonalLength={28}\n\t\t\t\t\tarcLinkLabelsStraightLength={24}\n\t\t\t\t\tarcLabelsSkipAngle={16}\n\t\t\t\t/>\n\t\t\t\t{data[groupIndex].groupCaption && (\n\t\t\t\t\t<figcaption>{data[groupIndex].groupCaption}</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{size !== 'regular' && (\n\t\t\t\t<ul className={s.legend} aria-hidden=\"true\">\n\t\t\t\t\t{data[groupIndex].groupData.map((record) => (\n\t\t\t\t\t\t<li key={record.id}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName={s['legend-dot']}\n\t\t\t\t\t\t\t\tstyle={{ background: record.color }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{record.label}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</figure>\n\t)\n}\n"],"names":["getArcLinkLabelsSkipAngle","count","getMargins","size","DonutChart","data","jsxs","Tabs","jsx","group","i","s","DonutChartPanelWithTabCtx","DonutChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","groupIndex","setSize","useResizeObserver","width","classNames","ref","ResponsivePie","useRenderArcLabelComponent","renderArcTooltip","record"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+const l = "multiple__wNVrv", e = "chart__e2uI3", t = "regular__ZEuW4", a = "small__mxvr9", r = "xsmall__XrerL", n = "legend__t7i7f", _ = {
+  "chart-container": "chart-container__uF6xN",
+  multiple: l,
+  chart: e,
+  regular: t,
+  small: a,
+  xsmall: r,
+  legend: n,
+  "legend-dot": "legend-dot__1ramU"
+};
+export {
+  e as chart,
+  _ as default,
+  n as legend,
+  l as multiple,
+  t as regular,
+  a as small,
+  r as xsmall
+};
+//# sourceMappingURL=styles.module.css.js.map

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

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

package/hooks/use-media-query/index.js

@@ -0,0 +1,16 @@
+import { useState as r, useEffect as i } from "react";
+function o(s) {
+  const [t, n] = r(!1);
+  return i(() => {
+    const e = window.matchMedia(s);
+    e.matches !== t && n(e.matches);
+    const a = (c) => {
+      n(c.matches);
+    };
+    return e.addEventListener("change", a), () => e.removeEventListener("change", a);
+  }, [t, s]), t;
+}
+export {
+  o as useMediaQuery
+};
+//# sourceMappingURL=index.js.map

package/hooks/use-media-query/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../hooks/use-media-query/index.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nfunction useMediaQuery(query: string) {\n\tconst [matches, setMatches] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst media = window.matchMedia(query)\n\t\tif (media.matches !== matches) {\n\t\t\tsetMatches(media.matches)\n\t\t}\n\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tsetMatches(event.matches)\n\t\t}\n\n\t\tmedia.addEventListener('change', listener)\n\t\treturn () => media.removeEventListener('change', listener)\n\t}, [matches, query])\n\n\treturn matches\n}\n\nexport { useMediaQuery }\n"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","media","listener","event"],"mappings":";AAEA,SAASA,EAAcC,GAAe;AACrC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,SAAAC,EAAU,MAAM;AACf,UAAMC,IAAQ,OAAO,WAAWL,CAAK;AACrC,IAAIK,EAAM,YAAYJ,KACrBC,EAAWG,EAAM,OAAO;AAGzB,UAAMC,IAAW,CAACC,MAA+B;AAChD,MAAAL,EAAWK,EAAM,OAAO;AAAA,IACzB;AAEA,WAAAF,EAAM,iBAAiB,UAAUC,CAAQ,GAClC,MAAMD,EAAM,oBAAoB,UAAUC,CAAQ;AAAA,EAC1D,GAAG,CAACL,GAASD,CAAK,CAAC,GAEZC;AACR;"}

package/index.js

@@ -1,105 +1,159 @@
-import { A as e, a as o, b as r, c as t, d as i, e as d, f as n, g as l, B as T, _ as S, h as C, l as O, j as u, k as c, C as A, D as L, $ as I, i as _, E as g, F as P, m as B, o as p, n as N, H as m, J as D, I as R, K as E, L as x, p as F, M as G, N as U, q as b, s as k, t as f, r as h, R as M, S as v, P as Z, v as y, Q as H, Y as K, x as Y, T as z, w as j, z as w, y as X, G as V, U as W, V as q, W as J, X as Q, u as $, O as aa, Z as sa } from "./index-C4GBbW3N.js";
-import { B as oa, a as ra, b as ta, e as ia, f as da, g as na, c as la, d as Ta, C as Sa, n as Ca, F as Oa, h as ua, i as ca, j as Aa, k as La, S as Ia, l as _a, m as ga, T as Pa } from "./index-WkGIywHj.js";
-import { C as pa, c as Na, d as ma, e as Da, L as Ra, N as Ea, h as xa, i as Fa, j as Ga, b as Ua, P as ba, f as ka, g as fa, a as ha, l as Ma, R as va, U as Za, n as ya, k as Ha } from "./index-B9mPJh9w.js";
-import { u as Ya, a as za, b as ja, c as wa } from "./use-screen-size-BOnkX_K-.js";
-import { M as Va } from "./index-DBjAbGt7.js";
+import { Accordion as e } from "./components/accordion/index.js";
+import { BADGE_COLORS as p, BADGE_SIZES as m, BADGE_TYPES as x, Badge as f } from "./components/badge/index.js";
+import { BadgeCount as i } from "./components/badge-count/index.js";
+import { Alert as n, AlertActions as l, AlertButton as T, AlertStandaloneLink as C } from "./components/alert/index.js";
+import { Breadcrumbs as S } from "./components/breadcrumbs/index.js";
+import { BUTTON_COLORS as A, BUTTON_ICON_POSITIONS as s, BUTTON_SIZES as L, Button as c } from "./components/button/index.js";
+import { Card as _, CardContent as P } from "./components/card/index.js";
+import { CodeBlock as B } from "./components/code-block/index.js";
+import { DisclosurePrimitive as D } from "./components/disclosure-primitive/index.js";
+import { useDisclosurePrimitive as R } from "./components/disclosure-primitive/use-disclosure-primitive.js";
+import { Dropdown as F } from "./components/dropdown/index.js";
+import { FLIGHT_ICON_SIZES as b, FlightIcon as k } from "./components/flight-icon/index.js";
+import { CheckboxBase as M, CheckboxField as v, CheckboxGroup as Z } from "./components/form/checkbox/index.js";
+import { Error as H } from "./components/form/error/index.js";
+import { Field as Y } from "./components/form/field/index.js";
+import { Fieldset as w } from "./components/form/fieldset/index.js";
+import { FileInputBase as V, FileInputField as W } from "./components/form/file-input/index.js";
+import { HelperText as q } from "./components/form/helper-text/index.js";
+import { Indicator as Q } from "./components/form/indicator/index.js";
+import { Label as oo } from "./components/form/label/index.js";
+import { Legend as eo } from "./components/form/legend/index.js";
+import { RadioBase as po, RadioField as mo, RadioGroup as xo } from "./components/form/radio/index.js";
+import { RadioCard as ao } from "./components/form/radio-card/index.js";
+import { SelectField as no } from "./components/form/select/index.js";
+import { SuperSelectField as To } from "./components/form/super-select/index.js";
+import { TextInput as Oo, TextInputBase as So } from "./components/form/text-input/index.js";
+import { TextAreaField as Ao } from "./components/form/textarea/index.js";
+import { ToggleBase as Lo, ToggleField as co, ToggleGroup as Io } from "./components/form/toggle/index.js";
+import { IconTile as Po } from "./components/icon-tile/index.js";
+import { InlineLink as Bo } from "./components/inline-link/index.js";
+import { MDSButton as Do } from "./components/legacy-button/index.js";
+import { ModalProvider as Ro } from "./components/modal/index.js";
+import { Separator as Fo } from "./components/separator/index.js";
+import { STANDALONE_LINK_COLORS as bo, STANDALONE_LINK_ICON_POSITIONS as ko, STANDALONE_LINK_SIZES as ho, StandaloneLink as Mo } from "./components/standalone-link/index.js";
+import { Table as Zo } from "./components/table/index.js";
+import { getDensity as Ho, getHorizontalAlignment as Ko, getScope as Yo, getVerticalAlignment as zo } from "./components/table/utils.js";
+import { Tabs as Xo } from "./components/tabs/index.js";
+import { useTabsContext as Wo } from "./components/tabs/use-tabs-context.js";
+import { TEXT_COLORS as qo, TEXT_WEIGHTS as Jo, Text as Qo } from "./components/text/index.js";
+import { BarChart as or } from "./components/visualizations/bar-chart/index.js";
+import { DonutChart as er } from "./components/visualizations/donut-chart/index.js";
+import { PartnerCard as pr } from "./patterns/card/partner-card/index.js";
+import { CardPrimitives as xr } from "./patterns/card/primitives.js";
+import { CopyButton as ar } from "./patterns/copy-button/index.js";
+import { LAYOUT_APPEARANCES as dr, LAYOUT_BACKGROUNDS as nr, LAYOUT_PADDING as lr, Layout as Tr, normalizeLayoutProps as Cr } from "./patterns/layout/index.js";
+import { ProductBadge as Sr } from "./patterns/product-badge/index.js";
+import { PRODUCT_LOGO_COLORS as Ar, PRODUCT_LOGO_PRODUCTS as sr, PRODUCT_LOGO_SIZES as Lr, ProductLogo as cr, normalizeProductLogoProps as Ir } from "./patterns/product-logo/index.js";
+import { RelatedContent as Pr } from "./patterns/related-content/index.js";
+import { useLarge as Br, useMedium as Nr, useMediumUp as Dr, useSmall as Er } from "./utils/hooks/use-screen-size.js";
+import { MDSProvider as Gr } from "./utils/mds-context/index.js";
+import { AccordionContent as Ur, AccordionItem as br, AccordionToggle as kr } from "./components/accordion/item/index.js";
+import { RadioCardGroup as Mr } from "./components/form/radio-card/group.js";
+import { useModal as Zr } from "./components/modal/use-modal.js";
+import { NewsroomCard as Hr } from "./patterns/card/newsroom-card/index.js";
+import { PersonCard as Yr } from "./patterns/card/person-card/index.js";
+import { PromoCard as wr } from "./patterns/card/promo-card/index.js";
+import { ResourceCard as Vr } from "./patterns/card/resource-card/index.js";
+import { UnifiedCard as jr } from "./patterns/card/unified-card/index.js";
 export {
   e as Accordion,
-  o as AccordionContent,
-  r as AccordionItem,
-  t as AccordionToggle,
-  i as Alert,
-  d as AlertActions,
-  n as AlertButton,
-  l as AlertStandaloneLink,
-  oa as BADGE_COLORS,
-  ra as BADGE_SIZES,
-  ta as BADGE_TYPES,
-  ia as BUTTON_COLORS,
-  da as BUTTON_ICON_POSITIONS,
-  na as BUTTON_SIZES,
-  la as Badge,
-  T as BadgeCount,
-  S as BarChart,
-  C as Breadcrumbs,
-  Ta as Button,
-  Sa as Card,
-  pa as CardPrimitives,
-  O as CheckboxBase,
-  u as CheckboxField,
-  c as CheckboxGroup,
-  A as CodeBlock,
-  Ca as CopyButton,
-  L as DisclosurePrimitive,
-  I as DonutChart,
-  _ as Dropdown,
-  g as Error,
-  Oa as FLIGHT_ICON_SIZES,
-  P as Field,
-  B as Fieldset,
-  p as FileInputBase,
-  N as FileInputField,
-  ua as FlightIcon,
-  m as HelperText,
-  D as IconTile,
-  R as Indicator,
-  E as InlineLink,
-  Na as LAYOUT_APPEARANCES,
-  ma as LAYOUT_BACKGROUNDS,
-  Da as LAYOUT_PADDING,
-  x as Label,
-  Ra as Layout,
-  F as Legend,
-  G as MDSButton,
-  Va as MDSProvider,
-  U as ModalProvider,
-  Ea as NewsroomCard,
-  xa as PRODUCT_LOGO_COLORS,
-  Fa as PRODUCT_LOGO_PRODUCTS,
-  Ga as PRODUCT_LOGO_SIZES,
-  Ua as PartnerCard,
-  ba as PersonCard,
-  ka as ProductBadge,
-  fa as ProductLogo,
-  ha as PromoCard,
-  b as RadioBase,
-  k as RadioCard,
-  f as RadioCardGroup,
-  h as RadioField,
-  M as RadioGroup,
-  Ma as RelatedContent,
-  va as ResourceCard,
-  ca as STANDALONE_LINK_COLORS,
-  Aa as STANDALONE_LINK_ICON_POSITIONS,
-  La as STANDALONE_LINK_SIZES,
-  v as SelectField,
-  Z as Separator,
-  Ia as StandaloneLink,
-  y as SuperSelectField,
-  _a as TEXT_COLORS,
-  ga as TEXT_WEIGHTS,
-  H as Table,
-  K as Tabs,
-  Pa as Text,
-  Y as TextAreaField,
-  z as TextInput,
-  j as TextInputBase,
-  w as ToggleBase,
-  X as ToggleField,
-  V as ToggleGroup,
-  Za as UnifiedCard,
-  W as getDensity,
-  q as getHorizontalAlignment,
-  J as getScope,
-  Q as getVerticalAlignment,
-  ya as normalizeLayoutProps,
-  Ha as normalizeProductLogoProps,
-  $ as useDisclosurePrimitive,
-  Ya as useLarge,
-  za as useMedium,
-  ja as useMediumUp,
-  aa as useModal,
-  wa as useSmall,
-  sa as useTabsContext
+  Ur as AccordionContent,
+  br as AccordionItem,
+  kr as AccordionToggle,
+  n as Alert,
+  l as AlertActions,
+  T as AlertButton,
+  C as AlertStandaloneLink,
+  p as BADGE_COLORS,
+  m as BADGE_SIZES,
+  x as BADGE_TYPES,
+  A as BUTTON_COLORS,
+  s as BUTTON_ICON_POSITIONS,
+  L as BUTTON_SIZES,
+  f as Badge,
+  i as BadgeCount,
+  or as BarChart,
+  S as Breadcrumbs,
+  c as Button,
+  _ as Card,
+  P as CardContent,
+  xr as CardPrimitives,
+  M as CheckboxBase,
+  v as CheckboxField,
+  Z as CheckboxGroup,
+  B as CodeBlock,
+  ar as CopyButton,
+  D as DisclosurePrimitive,
+  er as DonutChart,
+  F as Dropdown,
+  H as Error,
+  b as FLIGHT_ICON_SIZES,
+  Y as Field,
+  w as Fieldset,
+  V as FileInputBase,
+  W as FileInputField,
+  k as FlightIcon,
+  q as HelperText,
+  Po as IconTile,
+  Q as Indicator,
+  Bo as InlineLink,
+  dr as LAYOUT_APPEARANCES,
+  nr as LAYOUT_BACKGROUNDS,
+  lr as LAYOUT_PADDING,
+  oo as Label,
+  Tr as Layout,
+  eo as Legend,
+  Do as MDSButton,
+  Gr as MDSProvider,
+  Ro as ModalProvider,
+  Hr as NewsroomCard,
+  Ar as PRODUCT_LOGO_COLORS,
+  sr as PRODUCT_LOGO_PRODUCTS,
+  Lr as PRODUCT_LOGO_SIZES,
+  pr as PartnerCard,
+  Yr as PersonCard,
+  Sr as ProductBadge,
+  cr as ProductLogo,
+  wr as PromoCard,
+  po as RadioBase,
+  ao as RadioCard,
+  Mr as RadioCardGroup,
+  mo as RadioField,
+  xo as RadioGroup,
+  Pr as RelatedContent,
+  Vr as ResourceCard,
+  bo as STANDALONE_LINK_COLORS,
+  ko as STANDALONE_LINK_ICON_POSITIONS,
+  ho as STANDALONE_LINK_SIZES,
+  no as SelectField,
+  Fo as Separator,
+  Mo as StandaloneLink,
+  To as SuperSelectField,
+  qo as TEXT_COLORS,
+  Jo as TEXT_WEIGHTS,
+  Zo as Table,
+  Xo as Tabs,
+  Qo as Text,
+  Ao as TextAreaField,
+  Oo as TextInput,
+  So as TextInputBase,
+  Lo as ToggleBase,
+  co as ToggleField,
+  Io as ToggleGroup,
+  jr as UnifiedCard,
+  Ho as getDensity,
+  Ko as getHorizontalAlignment,
+  Yo as getScope,
+  zo as getVerticalAlignment,
+  Cr as normalizeLayoutProps,
+  Ir as normalizeProductLogoProps,
+  R as useDisclosurePrimitive,
+  Br as useLarge,
+  Nr as useMedium,
+  Dr as useMediumUp,
+  Zr as useModal,
+  Er as useSmall,
+  Wo as useTabsContext
 };
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/mds-react",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Materia Design System React components",
   "author": "HashiCorp",
   "license": "MPL-2.0",

package/patterns/card/newsroom-card/index.d.ts

@@ -1,4 +1,4 @@
-import type { ThumbnailProps } from '../types';
+import { ThumbnailProps } from '../types';
 interface NewsroomCardProps {
     heading: string;
     date: string;

package/patterns/card/newsroom-card/index.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { UnifiedCard as d } from "../unified-card/index.js";
+import i from "./style.module.css.js";
+const f = ({
+  heading: r,
+  date: o,
+  category: m,
+  link: a,
+  thumbnail: e,
+  withArrow: s = !1
+}) => /* @__PURE__ */ t(
+  d,
+  {
+    heading: r,
+    meta: [o, m],
+    link: a,
+    thumbnail: e,
+    withArrow: s,
+    className: i.newsroomCard
+  }
+);
+f.displayName = "NewsroomCard";
+export {
+  f as NewsroomCard
+};
+//# sourceMappingURL=index.js.map

package/patterns/card/newsroom-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/newsroom-card/index.tsx"],"sourcesContent":["import type { ThumbnailProps } from '../types'\nimport { UnifiedCard } from '../unified-card'\nimport s from './style.module.css'\n\ninterface NewsroomCardProps {\n\theading: string\n\tdate: string\n\tcategory: string\n\tlink: string\n\tthumbnail?: ThumbnailProps\n\twithArrow?: boolean\n}\n\nconst NewsroomCard = ({\n\theading,\n\tdate,\n\tcategory,\n\tlink,\n\tthumbnail,\n\twithArrow = false,\n}: NewsroomCardProps) => {\n\treturn (\n\t\t<UnifiedCard\n\t\t\theading={heading}\n\t\t\tmeta={[date, category]}\n\t\t\tlink={link}\n\t\t\tthumbnail={thumbnail}\n\t\t\twithArrow={withArrow}\n\t\t\tclassName={s.newsroomCard}\n\t\t/>\n\t)\n}\n\nNewsroomCard.displayName = 'NewsroomCard'\n\nexport type { NewsroomCardProps }\nexport { NewsroomCard }\n"],"names":["NewsroomCard","heading","date","category","link","thumbnail","withArrow","jsx","UnifiedCard","s"],"mappings":";;;AAaA,MAAMA,IAAe,CAAC;AAAA,EACrB,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACb,MAEE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,SAAAP;AAAA,IACA,MAAM,CAACC,GAAMC,CAAQ;AAAA,IACrB,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAWG,EAAE;AAAA,EAAA;AAAA;AAKhBT,EAAa,cAAc;"}

package/patterns/card/newsroom-card/style.module.css.js

@@ -0,0 +1,8 @@
+const o = "newsroomCard__5Rb0H", r = {
+  newsroomCard: o
+};
+export {
+  r as default,
+  o as newsroomCard
+};
+//# sourceMappingURL=style.module.css.js.map

package/patterns/card/newsroom-card/style.module.css.js.map

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

package/patterns/card/partner-card/index.d.ts

@@ -1,5 +1,5 @@
-import type { MDSImageProps } from '../../../utils/mds-context';
-import type { CardPatternProps } from '../types';
+import { MDSImageProps } from '../../../utils/mds-context';
+import { CardPatternProps } from '../types';
 interface PartnerCardProps {
     heading: string;
     description: string;

package/patterns/card/partner-card/index.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useMDSImage as C } from "../../../utils/mds-context/index.js";
+import { Badge as P } from "../../../components/badge/index.js";
+import { Text as u } from "../../../components/text/index.js";
+import { CardPrimitives as t } from "../primitives.js";
+import o from "./style.module.css.js";
+const N = ({
+  heading: n,
+  description: m,
+  meta: d,
+  link: c,
+  productBadges: e,
+  competencyBadges: a,
+  logo: i,
+  className: h
+}) => {
+  const f = C(), p = e && e.length > 0, s = a && a.length > 0;
+  return /* @__PURE__ */ l(
+    t.Root,
+    {
+      link: c,
+      withArrow: !1,
+      isExternal: !1,
+      className: h,
+      "aria-label": n,
+      children: [
+        /* @__PURE__ */ r("div", { className: o.logoContainer, children: /* @__PURE__ */ r(f, { ...i, alt: i.alt, className: o.logo }) }),
+        /* @__PURE__ */ l(t.Content, { children: [
+          /* @__PURE__ */ r(t.Meta, { items: d }),
+          /* @__PURE__ */ r(u.Body, { tag: "p", size: "200", className: o.description, children: m }),
+          p || s ? /* @__PURE__ */ r(t.ProductBadges, { badges: e || [], children: s && a.map((g, x) => /* @__PURE__ */ r(P, { text: g, icon: "dot" }, x)) }) : null
+        ] })
+      ]
+    }
+  );
+};
+N.displayName = "PartnerCard";
+export {
+  N as PartnerCard
+};
+//# sourceMappingURL=index.js.map

package/patterns/card/partner-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/partner-card/index.tsx"],"sourcesContent":["'use client'\n\nimport type { MDSImageProps } from '../../../utils/mds-context'\nimport { useMDSImage } from '../../../utils/mds-context'\nimport { Badge } from '../../../components/badge'\nimport { Text } from '../../../components/text'\nimport { CardPrimitives } from '../primitives'\nimport type { CardPatternProps } from '../types'\nimport s from './style.module.css'\n\ninterface PartnerCardProps {\n\theading: string\n\tdescription: string\n\tmeta: string[]\n\tlink: string\n\tproductBadges?: CardPatternProps['productBadges']\n\tcompetencyBadges?: string[]\n\tlogo: MDSImageProps\n\tclassName?: string\n}\n\nconst PartnerCard = ({\n\theading,\n\tdescription,\n\tmeta,\n\tlink,\n\tproductBadges,\n\tcompetencyBadges,\n\tlogo,\n\tclassName,\n}: PartnerCardProps) => {\n\tconst Image = useMDSImage()\n\n\tconst hasProductBadges = productBadges && productBadges.length > 0\n\tconst hasCompetencyBadges = competencyBadges && competencyBadges.length > 0\n\n\treturn (\n\t\t<CardPrimitives.Root\n\t\t\tlink={link}\n\t\t\twithArrow={false}\n\t\t\tisExternal={false}\n\t\t\tclassName={className}\n\t\t\taria-label={heading}\n\t\t>\n\t\t\t<div className={s.logoContainer}>\n\t\t\t\t<Image {...logo} alt={logo.alt} className={s.logo} />\n\t\t\t</div>\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t<CardPrimitives.Meta items={meta} />\n\t\t\t\t<Text.Body tag=\"p\" size=\"200\" className={s.description}>\n\t\t\t\t\t{description}\n\t\t\t\t</Text.Body>\n\t\t\t\t{hasProductBadges || hasCompetencyBadges ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges || []}>\n\t\t\t\t\t\t{hasCompetencyBadges &&\n\t\t\t\t\t\t\tcompetencyBadges.map((competencyBadge, stableIdx) => (\n\t\t\t\t\t\t\t\t<Badge key={stableIdx} text={competencyBadge} icon=\"dot\" />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</CardPrimitives.ProductBadges>\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPartnerCard.displayName = 'PartnerCard'\n\nexport type { PartnerCardProps }\nexport { PartnerCard }\n"],"names":["PartnerCard","heading","description","meta","link","productBadges","competencyBadges","logo","className","Image","hasProductBadges","jsxs","CardPrimitives","jsx","s","Text","hasCompetencyBadges","competencyBadge","stableIdx","Badge"],"mappings":";;;;;;;AAqBqB,MACpBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,MAAAC;AAAA,EACD,WAAAC;AACC,MAAA;AAEA,QAAMC,MAAmB,GACnBC,IAAAL,KAAsBA,EAAoB,SAAiB,OAGhEC,KAAAA,EAAA,SAAA;AAAA,SAAgB,gBAAAK;AAAA,IAAfC,EAAA;AAAA,IAAA;AAAA,MAEA,MAAAR;AAAA,MACA;MACA,YAAA;AAAA,MACA,WAAAI;AAAA,MAEA,cAAAP;AAAA,MAAA,UAAA;AAAA,QAGA,gBAAAY,EAAA,OAAC,EAAA,4BACA,UAAA,gBAAAA,EAAAJ,GAAA,EAAA,GAAAF,GAAA,KAAAA,EAAA,KAAA,WAAAO,EAAA,KAAA,CAAA,EAAA,CAAA;AAAA,QAAA,gBAAAH,EAAAC,EAAC,SAAoB,EAAA,UAAO;AAAA,UAC5B,gBAAAC,EAACD,EAAU,MAAI,EAAI,OAAKT,EAAA,CAAM;AAAA,UAG7B,gBAAAU,EAAoBE,EAAA,MAAA,EAAA,KAAA,KAAA,MAAA,OAAA,WACnBD,EAAA,aAAe,UAAfZ,EAAqC,CAAA;AAAA,UAMnCQ,KACLM,IAAA,gBAAAH,EAAAD,EAAA,eAAA,EAAA,QAAAP,KAAA,CAAA,GAAA,UAAAW,KAAAV,EAAA,IAAA,CAAAW,GAAAC,MAAA,gBAAAL,EAAAM,GAAA,EAAA,MAAAF,GAAA,MAAA,MAAA,GAAAC,CAAA,CAAA,EAAA,CAAA,IAAA;AAAA,QAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;AAEA;;"}

package/patterns/card/partner-card/style.module.css.js

@@ -0,0 +1,12 @@
+const o = "description__-1CDK", n = "logoContainer__9VUWm", t = "logo__E1-po", i = {
+  description: o,
+  logoContainer: n,
+  logo: t
+};
+export {
+  i as default,
+  o as description,
+  t as logo,
+  n as logoContainer
+};
+//# sourceMappingURL=style.module.css.js.map

package/patterns/card/partner-card/style.module.css.js.map

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

package/patterns/card/person-card/index.d.ts

@@ -1,4 +1,4 @@
-import type { ProductBadgesProps, ThumbnailProps } from '../types';
+import { ProductBadgesProps, ThumbnailProps } from '../types';
 interface PersonCardProps {
     thumbnail: ThumbnailProps;
     link: string;

package/patterns/card/person-card/index.js

@@ -0,0 +1,52 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { Text as d } from "../../../components/text/index.js";
+import { IconGithub16 as p } from "@hashicorp/flight-icons/svg-react/github-16";
+import { IconTwitter16 as h } from "@hashicorp/flight-icons/svg-react/twitter-16";
+import { IconLinkedin16 as u } from "@hashicorp/flight-icons/svg-react/linkedin-16";
+import { IconLink16 as f } from "@hashicorp/flight-icons/svg-react/link-16";
+import { IconMail16 as w } from "@hashicorp/flight-icons/svg-react/mail-16";
+import { CardPrimitives as i } from "../primitives.js";
+import m from "./style.module.css.js";
+const I = /* @__PURE__ */ new Map([
+  // null signals that we don't want to render any icon
+  ["hashicorp.com", null],
+  [
+    "twitter.com",
+    /* @__PURE__ */ o(h, { "data-testid": "wpl-personcard-twitter-icon" })
+  ],
+  ["github.com", /* @__PURE__ */ o(p, { "data-testid": "wpl-personcard-github-icon" })],
+  [
+    "linkedin.com",
+    /* @__PURE__ */ o(u, { "data-testid": "wpl-personcard-linkedin-icon" })
+  ],
+  ["mailto:", /* @__PURE__ */ o(w, { "data-testid": "wpl-personcard-mail-icon" })]
+]), b = s(function({ url: a }) {
+  const { protocol: t, host: r } = new URL(a), n = I.get(t === "mailto:" ? "mailto:" : r);
+  return n === null ? null : /* @__PURE__ */ o("div", { className: m.thumbnailIcon, children: n ?? /* @__PURE__ */ o(f, { "data-testid": "wpl-personcard-link-icon" }) });
+}), g = ({
+  link: l,
+  thumbnail: a,
+  name: t,
+  location: r,
+  bio: n,
+  productBadges: c
+}) => /* @__PURE__ */ e(i.Root, { link: l, withArrow: !1, "aria-label": t, children: [
+  /* @__PURE__ */ e("div", { className: m.thumbnailContainer, children: [
+    /* @__PURE__ */ o(i.PersonThumbnail, { ...a }),
+    /* @__PURE__ */ o(b, { url: l })
+  ] }),
+  /* @__PURE__ */ e(i.Content, { children: [
+    /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ o(i.Heading, { children: t }),
+      r ? /* @__PURE__ */ o(d.Body, { tag: "p", size: "200", className: m.location, children: r }) : null
+    ] }),
+    n ? /* @__PURE__ */ o(i.Description, { children: n }) : null,
+    c && c?.length > 0 ? /* @__PURE__ */ o(i.ProductBadges, { badges: c }) : null
+  ] })
+] });
+g.displayName = "PersonCard";
+export {
+  g as PersonCard
+};
+//# sourceMappingURL=index.js.map