@hashicorp/mds-react 0.9.4 → 0.9.5

package/components/form/radio-card/RadioCardStory.css

@@ -0,0 +1,21 @@
+.doc-radio-card-list-demo {
+	margin: 0;
+	padding: 0;
+	color: #3b3d45;
+
+	& li {
+		margin: 0;
+		padding: 8px 0 8px 24px;
+		list-style: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z' fill='%233b3d45'/%3E%3Cpath d='M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z' fill='%233b3d45'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: left 9px;
+		background-size: 16px;
+		border-bottom: 1px solid #ddd;
+		font-family: var(--mds-typography-font-stack-text);
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+}

package/components/icon-tile/style.module.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $hds-icon-tile-sizes: ('small', 'medium', 'large');
 $hds-icon-tile-colors-products: (
 	'boundary',
@@ -78,24 +80,24 @@ $size-props: (
 
 @each $size in $hds-icon-tile-sizes {
 	.size-#{$size} {
-		width: map-get($size-props, $size, 'size');
-		height: map-get($size-props, $size, 'size');
-		border-radius: map-get($size-props, $size, 'border-radius');
+		width: map.get($size-props, $size, 'size');
+		height: map.get($size-props, $size, 'size');
+		border-radius: map.get($size-props, $size, 'border-radius');
 
 		.icon {
-			width: map-get($size-props, $size, 'icon-size');
-			height: map-get($size-props, $size, 'icon-size');
+			width: map.get($size-props, $size, 'icon-size');
+			height: map.get($size-props, $size, 'icon-size');
 		}
 
 		.logo {
-			width: map-get($size-props, $size, 'logo-size');
-			height: map-get($size-props, $size, 'logo-size');
+			width: map.get($size-props, $size, 'logo-size');
+			height: map.get($size-props, $size, 'logo-size');
 		}
 
 		.extra {
-			width: map-get($size-props, $size, 'extra-size');
-			height: map-get($size-props, $size, 'extra-size');
-			border-radius: map-get($size-props, $size, 'extra-border-radius');
+			width: map.get($size-props, $size, 'extra-size');
+			height: map.get($size-props, $size, 'extra-size');
+			border-radius: map.get($size-props, $size, 'extra-border-radius');
 		}
 	}
 }

package/components/inline-link/index.js

@@ -1,26 +1,27 @@
 import { jsxs as c, jsx as p } from "react/jsx-runtime";
-import f from "classnames";
-import { Interactive as I } from "../interactive/index.js";
+import I from "classnames";
+import { Interactive as d } from "../interactive/index.js";
 import i from "./inline-link.module.css.js";
-import { FlightIcon as d } from "../flight-icon/index.js";
+import { FlightIcon as f } from "../flight-icon/index.js";
 const g = ({
-  text: m,
-  color: o = "primary",
+  text: o,
+  color: s = "primary",
   icon: r,
   iconPosition: e = "trailing",
-  className: s,
-  isHrefExternal: t,
+  className: t,
+  isHrefExternal: l,
   ...a
 }) => {
-  const l = r || !t ? r : "external-link", n = l && /* @__PURE__ */ p(d, { name: l, size: 16, className: i.icon });
+  const m = r || !l ? r : "external-link", n = m && /* @__PURE__ */ p(f, { name: m, size: 16, className: i.icon });
   return /* @__PURE__ */ c(
-    I,
+    d,
     {
-      className: f(i["link-inline"], i[`color-${o}`], s),
+      className: I(i["link-inline"], i[`color-${s}`], t),
+      isHrefExternal: l,
       ...a,
       children: [
         n && e === "leading" && n,
-        m,
+        o,
         n && e === "trailing" && n
       ]
     }

package/components/inline-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/inline-link/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport s from './inline-link.module.css'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\n\ninterface InlineLinkProps {\n\t/**\n\t * There are two available colors for an `<InlineLink />`: primary and secondary.\n\t */\n\tcolor?: 'primary' | 'secondary'\n\t/**\n\t * Use this parameter to show an icon.\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Positions the icon before or after the text.\n\t */\n\ticonPosition?: 'leading' | 'trailing'\n\t/**\n\t * URL parameter that’s passed down to the `<a>` element.\n\t */\n\thref: string\n\t/**\n\t * Controls if the <a> link is external. For security reasons, we add the target=\"_blank\" and rel=\"noopener noreferrer\" attributes to it by default.\n\t * default: `false`\n\t */\n\tisHrefExternal?: boolean\n\t/**\n\t * The content of the <a> HTML element.\n\t */\n\ttext: string\n\t/**\n\t * Optional class name to add to the component.\n\t */\n\tclassName?: string\n\tprefetch?: boolean\n\tlocale?: string\n}\n\nconst InlineLink = ({\n\ttext,\n\tcolor = 'primary',\n\ticon,\n\ticonPosition = 'trailing',\n\tclassName,\n\tisHrefExternal,\n\t...props\n}: InlineLinkProps) => {\n\tconst resolvedIcon = icon || !isHrefExternal ? icon : 'external-link'\n\tconst iconElement = resolvedIcon && (\n\t\t<FlightIcon name={resolvedIcon} size={16} className={s.icon} />\n\t)\n\n\treturn (\n\t\t<Interactive\n\t\t\tclassName={classNames(s['link-inline'], s[`color-${color}`], className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t{text}\n\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t</Interactive>\n\t)\n}\n\nInlineLink.displayName = 'InlineLink'\n\nexport type { InlineLinkProps }\nexport { InlineLink }\n"],"names":["InlineLink","text","color","icon","iconPosition","className","isHrefExternal","props","resolvedIcon","iconElement","jsx","FlightIcon","s","jsxs","Interactive","classNames"],"mappings":";;;;;AAwCA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAeL,KAAQ,CAACG,IAAiBH,IAAO,iBAChDM,IAAcD,KACnB,gBAAAE,EAACC,GAAA,EAAW,MAAMH,GAAc,MAAM,IAAI,WAAWI,EAAE,KAAA,CAAM;AAG9D,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWH,EAAE,aAAa,GAAGA,EAAE,SAASV,CAAK,EAAE,GAAGG,CAAS;AAAA,MACrE,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeL,MAAiB,aAAaK;AAAA,QAC7CR;AAAA,QACAQ,KAAeL,MAAiB,cAAcK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AAEAT,EAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/inline-link/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport s from './inline-link.module.css'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\n\ninterface InlineLinkProps {\n\t/**\n\t * There are two available colors for an `<InlineLink />`: primary and secondary.\n\t */\n\tcolor?: 'primary' | 'secondary'\n\t/**\n\t * Use this parameter to show an icon.\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Positions the icon before or after the text.\n\t */\n\ticonPosition?: 'leading' | 'trailing'\n\t/**\n\t * URL parameter that’s passed down to the `<a>` element.\n\t */\n\thref: string\n\t/**\n\t * Controls if the <a> link is external. For security reasons, we add the target=\"_blank\" and rel=\"noopener noreferrer\" attributes to it by default.\n\t * default: `false`\n\t */\n\tisHrefExternal?: boolean\n\t/**\n\t * The content of the <a> HTML element.\n\t */\n\ttext: string\n\t/**\n\t * Optional class name to add to the component.\n\t */\n\tclassName?: string\n\tprefetch?: boolean\n\tlocale?: string\n}\n\nconst InlineLink = ({\n\ttext,\n\tcolor = 'primary',\n\ticon,\n\ticonPosition = 'trailing',\n\tclassName,\n\tisHrefExternal,\n\t...props\n}: InlineLinkProps) => {\n\tconst resolvedIcon = icon || !isHrefExternal ? icon : 'external-link'\n\tconst iconElement = resolvedIcon && (\n\t\t<FlightIcon name={resolvedIcon} size={16} className={s.icon} />\n\t)\n\n\treturn (\n\t\t<Interactive\n\t\t\tclassName={classNames(s['link-inline'], s[`color-${color}`], className)}\n\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t{text}\n\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t</Interactive>\n\t)\n}\n\nInlineLink.displayName = 'InlineLink'\n\nexport type { InlineLinkProps }\nexport { InlineLink }\n"],"names":["InlineLink","text","color","icon","iconPosition","className","isHrefExternal","props","resolvedIcon","iconElement","jsx","FlightIcon","s","jsxs","Interactive","classNames"],"mappings":";;;;;AAwCA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAeL,KAAQ,CAACG,IAAiBH,IAAO,iBAChDM,IAAcD,KACnB,gBAAAE,EAACC,GAAA,EAAW,MAAMH,GAAc,MAAM,IAAI,WAAWI,EAAE,KAAA,CAAM;AAG9D,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWH,EAAE,aAAa,GAAGA,EAAE,SAASV,CAAK,EAAE,GAAGG,CAAS;AAAA,MACtE,gBAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeL,MAAiB,aAAaK;AAAA,QAC7CR;AAAA,QACAQ,KAAeL,MAAiB,cAAcK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AAEAT,EAAW,cAAc;"}

package/components/modal/modal.module.css

@@ -1,4 +1,9 @@
 .modal {
+	display: flex;
+	overflow: scroll;
+	border-radius: 8px;
+	padding: 0;
+	border: 0;
 	position: fixed;
 	z-index: 50;
 	height: fit-content;

package/components/tabs/index.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as b, jsxs as M } from "react/jsx-runtime";
-import I from "classnames";
-import { useState as i, useRef as N, useCallback as m, useEffect as u, useMemo as O } from "react";
+import { jsx as u, jsxs as M } from "react/jsx-runtime";
+import x from "classnames";
+import { useState as a, useRef as T, useCallback as f, useEffect as d, useMemo as O } from "react";
 import { TabPanel as S } from "./tab-panel.js";
 import { Tab as U } from "./tab.js";
 import { useTabsContext as q, TabsContext as B } from "./use-tabs-context.js";
-import p from "./tabs.module.scss.js";
+import m from "./tabs.module.scss.js";
 const F = ({
-  children: h,
-  onClickTab: n,
-  initialSelectedTabIndex: c = 0,
-  size: x = "medium",
-  className: E,
+  children: p,
+  onClickTab: r,
+  initialSelectedTabIndex: n = 0,
+  size: w = "medium",
+  className: I,
   ...k
 }) => {
-  const [l, f] = i(
-    c
-  ), s = N([]), d = N([]), [r, A] = i([]), [L, R] = i([]), [W, C] = i(0), [K, V] = i(0), a = N(null), y = m((t) => {
+  const [i, b] = a(
+    n
+  ), s = T([]), l = T([]), [o, A] = a([]), [L, E] = a([]), [R, W] = a(0), [C, K] = a(0), c = T(null), h = f((t) => {
     const e = s.current[t]?.parentNode;
     e && e.scrollIntoView({
       behavior: "smooth",
@@ -24,91 +24,89 @@ const F = ({
       inline: "nearest"
     });
   }, []);
-  u(() => {
-    f(c);
-  }, [c]), u(() => {
-    const t = s.current[l]?.parentElement;
-    if (t && a.current) {
-      const e = t.offsetLeft, o = t.offsetWidth;
-      V(e), C(o), a.current.scrollTo({
+  d(() => {
+    b(n);
+  }, [n]), d(() => {
+    const t = s.current[i]?.parentElement;
+    if (t && c.current) {
+      const e = t.offsetLeft, v = t.offsetWidth;
+      K(e), W(v), c.current.scrollTo({
         left: e,
         behavior: "smooth"
       });
     }
-  }, [s, l, y, a]), u(() => {
-    A(s.current.map((o) => o.id));
-    let t = 0, e = 0;
-    if (s.current.forEach((o, T) => {
-      o.hasAttribute("data-is-selected") && (t = T, e++);
-    }), e > 1)
-      throw new Error("Only one tab may use isSelected argument");
-    f(t);
-  }, [s]), u(() => {
-    R(d.current.map((t) => t.id));
-  }, [d]);
-  const P = m(
+  }, [s, i, h, c]), d(() => {
+    A(s.current.map((e) => e.id));
+    let t = 0;
+    s.current.forEach((e) => {
+      e.hasAttribute("data-is-selected") && t++;
+    }), t > 1 && console.error("Only one tab may use isSelected argument");
+  }, [s]), d(() => {
+    E(l.current.map((t) => t.id));
+  }, [l]);
+  const P = f(
     (t, e) => {
-      f(t), y(t), typeof n == "function" && n(e, t);
+      b(t), h(t), typeof r == "function" && r(e, t);
     },
-    [n, y]
-  ), w = m(
+    [r, h]
+  ), y = f(
     (t, e) => {
       e.preventDefault(), s.current[t].focus();
     },
     []
-  ), g = m(
+  ), g = f(
     (t, e) => {
-      const o = "ArrowLeft", T = "ArrowRight", $ = "Enter", D = " ";
-      if (e.key === T) {
-        const v = (t + 1) % r.length;
-        w(v, e);
-      } else if (e.key === o) {
-        const v = (t + r.length - 1) % r.length;
-        w(v, e);
-      } else (e.key === $ || e.key === D) && f(t);
+      const v = "ArrowLeft", j = "ArrowRight", $ = "Enter", D = " ";
+      if (e.key === j) {
+        const N = (t + 1) % o.length;
+        y(N, e);
+      } else if (e.key === v) {
+        const N = (t + o.length - 1) % o.length;
+        y(N, e);
+      } else (e.key === $ || e.key === D) && b(t);
     },
-    [w, r.length]
-  ), j = O(
+    [y, o.length]
+  ), V = O(
     () => ({
       tabNodes: s,
-      tabIds: r,
-      panelNodes: d,
+      tabIds: o,
+      panelNodes: l,
       panelIds: L,
-      selectedTabIndex: l,
+      selectedTabIndex: i,
       onClick: P,
       onKeyUp: g,
-      size: x,
-      tabsListRef: a
+      size: w,
+      tabsListRef: c
     }),
     [
       s,
-      r,
-      d,
-      L,
+      o,
       l,
+      L,
+      i,
       P,
       g,
-      x,
-      a
+      w,
+      c
     ]
   );
-  return /* @__PURE__ */ b(B.Provider, { value: j, children: /* @__PURE__ */ b(
+  return /* @__PURE__ */ u(B.Provider, { value: V, children: /* @__PURE__ */ u(
     "div",
     {
-      className: I(p.tabs, E),
+      className: x(m.tabs, I),
       ...k,
       style: {
-        "--indicator-left-pos": `${K}px`,
-        "--indicator-width": `${W}px`
+        "--indicator-left-pos": `${C}px`,
+        "--indicator-width": `${R}px`
       },
-      children: h
+      children: p
     }
   ) });
-}, G = ({ children: h, className: n }) => {
-  const { tabsListRef: c } = q();
-  return /* @__PURE__ */ b("div", { className: I(p["tablist-wrapper"], n), children: /* @__PURE__ */ M("ul", { className: p.tablist, role: "tablist", ref: c, children: [
-    h,
-    /* @__PURE__ */ b("li", { className: p.indicator, role: "presentation" })
+}, G = ({ children: p, className: r }) => {
+  const { tabsListRef: n } = q();
+  return /* @__PURE__ */ u("div", { className: x(m["tablist-wrapper"], r), children: /* @__PURE__ */ M("ul", { className: m.tablist, role: "tablist", ref: n, children: [
+    p,
+    /* @__PURE__ */ u("li", { className: m.indicator, role: "presentation" })
   ] }) });
 }, z = { Provider: F, TabList: G, Panel: S, Tab: U };
 export {

package/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\t\tlet initialTabIndex = 0\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement, index) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tinitialTabIndex = index\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tthrow new Error('Only one tab may use isSelected argument')\n\t\t}\n\n\t\tsetSelectedTabIndex(initialTabIndex)\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","initialTabIndex","selectedCount","index","tabElement","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tconsole.error('Only one tab may use isSelected argument')\n\t\t}\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","selectedCount","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}

package/package.json

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/person-card/index.tsx"],"sourcesContent":["import { memo, type ReactNode } from 'react'\nimport { Text } from '../../../components/text'\nimport { IconGithub16 } from '@hashicorp/flight-icons/svg-react/github-16'\nimport { IconTwitter16 } from '@hashicorp/flight-icons/svg-react/twitter-16'\nimport { IconLinkedin16 } from '@hashicorp/flight-icons/svg-react/linkedin-16'\nimport { IconLink16 } from '@hashicorp/flight-icons/svg-react/link-16'\nimport { IconMail16 } from '@hashicorp/flight-icons/svg-react/mail-16'\nimport type { ProductBadgesProps, ThumbnailProps } from '../types'\nimport { CardPrimitives } from '../primitives'\nimport s from './style.module.css'\n\ninterface PersonCardProps {\n\tthumbnail: ThumbnailProps\n\tlink: string\n\tname: string\n\tlocation?: string\n\tbio?: string\n\tproductBadges?: ProductBadgesProps['badges']\n}\n\n// Map of hostnames to icons.\n/* eslint-disable react/jsx-key */\nconst iconMap = new Map<string, ReactNode>([\n\t// null signals that we don't want to render any icon\n\t['hashicorp.com', null],\n\t[\n\t\t'twitter.com',\n\t\t<IconTwitter16 data-testid={'wpl-personcard-twitter-icon'} />,\n\t],\n\t['github.com', <IconGithub16 data-testid={'wpl-personcard-github-icon'} />],\n\t[\n\t\t'linkedin.com',\n\t\t<IconLinkedin16 data-testid={'wpl-personcard-linkedin-icon'} />,\n\t],\n\t['mailto:', <IconMail16 data-testid={'wpl-personcard-mail-icon'} />],\n])\n/* eslint-enable react/jsx-key */\n\nconst Icon = memo(function Icon({ url }: { url: string }) {\n\tconst { protocol, host } = new URL(url)\n\tconst icon = iconMap.get(protocol === 'mailto:' ? 'mailto:' : host)\n\n\t// If the icon value is null, don't render an icon\n\tif (icon === null) {\n\t\treturn null\n\t}\n\n\t// Render the icon or the default icon if the icon value is undefined\n\treturn (\n\t\t<div className={s.thumbnailIcon}>\n\t\t\t{icon ?? <IconLink16 data-testid={'wpl-personcard-link-icon'} />}\n\t\t</div>\n\t)\n})\n\nconst PersonCard = ({\n\tlink,\n\tthumbnail,\n\tname,\n\tlocation,\n\tbio,\n\tproductBadges,\n}: PersonCardProps) => {\n\treturn (\n\t\t<CardPrimitives.Root link={link} withArrow={false} aria-label={name}>\n\t\t\t<div className={s.thumbnailContainer}>\n\t\t\t\t<CardPrimitives.PersonThumbnail {...thumbnail} />\n\t\t\t\t<Icon url={link} />\n\t\t\t</div>\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t<div>\n\t\t\t\t\t<CardPrimitives.Heading>{name}</CardPrimitives.Heading>\n\t\t\t\t\t{location ? (\n\t\t\t\t\t\t<Text.Body tag=\"p\" size=\"200\" className={s.location}>\n\t\t\t\t\t\t\t{location}\n\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{bio ? (\n\t\t\t\t\t<CardPrimitives.Description>{bio}</CardPrimitives.Description>\n\t\t\t\t) : null}\n\t\t\t\t{productBadges && productBadges?.length > 0 ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges} />\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPersonCard.displayName = 'PersonCard'\n\nexport type { PersonCardProps }\nexport { PersonCard }\n"],"names":["iconMap","jsx","IconTwitter16","IconGithub16","IconLinkedin16","IconMail16","Icon","memo","url","protocol","host","icon","s","IconLink16","PersonCard","link","thumbnail","name","location","bio","productBadges","jsxs","CardPrimitives","Text"],"mappings":";;;;;;;;;;AAsBA,MAAMA,wBAAc,IAAuB;AAAA;AAAA,EAE1C,CAAC,iBAAiB,IAAI;AAAA,EACtB;AAAA,IACC;AAAA,IACA,gBAAAC,EAACC,GAAA,EAAc,eAAa,8BAAA,CAA+B;AAAA,EAAA;AAAA,EAE5D,CAAC,cAAc,gBAAAD,EAACE,GAAA,EAAa,eAAa,8BAA8B,CAAE;AAAA,EAC1E;AAAA,IACC;AAAA,IACA,gBAAAF,EAACG,GAAA,EAAe,eAAa,+BAAA,CAAgC;AAAA,EAAA;AAAA,EAE9D,CAAC,WAAW,gBAAAH,EAACI,GAAA,EAAW,eAAa,4BAA4B,CAAE;AACpE,CAAC,GAGKC,IAAOC,EAAK,SAAc,EAAE,KAAAC,KAAwB;AACzD,QAAM,EAAE,UAAAC,GAAU,MAAAC,EAAA,IAAS,IAAI,IAAIF,CAAG,GAChCG,IAAOX,EAAQ,IAAIS,MAAa,YAAY,YAAYC,CAAI;AAGlE,SAAIC,MAAS,OACL,OAKP,gBAAAV,EAAC,OAAA,EAAI,WAAWW,EAAE,eAChB,eAAQ,gBAAAX,EAACY,GAAA,EAAW,eAAa,2BAAA,CAA4B,EAAA,CAC/D;AAEF,CAAC,GAEKC,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,eAAAC;AACD,MAEE,gBAAAC,EAACC,EAAe,MAAf,EAAoB,MAAAP,GAAY,WAAW,IAAO,cAAYE,GAC9D,UAAA;AAAA,EAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWT,EAAE,oBACjB,UAAA;AAAA,IAAA,gBAAAX,EAACqB,EAAe,iBAAf,EAAgC,GAAGN,EAAA,CAAW;AAAA,IAC/C,gBAAAf,EAACK,GAAA,EAAK,KAAKS,EAAA,CAAM;AAAA,EAAA,GAClB;AAAA,EACA,gBAAAM,EAACC,EAAe,SAAf,EACA,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EACA,UAAA;AAAA,MAAA,gBAAApB,EAACqB,EAAe,SAAf,EAAwB,UAAAL,EAAA,CAAK;AAAA,MAC7BC,IACA,gBAAAjB,EAACsB,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAWX,EAAE,UACzC,aACF,IACG;AAAA,IAAA,GACL;AAAA,IACCO,IACA,gBAAAlB,EAACqB,EAAe,aAAf,EAA4B,aAAI,IAC9B;AAAA,IACHF,KAAiBA,GAAe,SAAS,IACzC,gBAAAnB,EAACqB,EAAe,eAAf,EAA6B,QAAQF,EAAA,CAAe,IAClD;AAAA,EAAA,EAAA,CACL;AAAA,GACD;AAIFN,EAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/person-card/index.tsx"],"sourcesContent":["import { memo, type ReactNode } from 'react'\nimport { Text } from '../../../components/text'\nimport { FlightIcon } from '../../../components/flight-icon'\nimport type { ProductBadgesProps, ThumbnailProps } from '../types'\nimport { CardPrimitives } from '../primitives'\nimport s from './style.module.css'\n\ninterface PersonCardProps {\n\tthumbnail: ThumbnailProps\n\tlink: string\n\tname: string\n\tlocation?: string\n\tbio?: string\n\tproductBadges?: ProductBadgesProps['badges']\n}\n\n// Map of hostnames to icons.\n/* eslint-disable react/jsx-key */\nconst iconMap = new Map<string, ReactNode>([\n\t// null signals that we don't want to render any icon\n\t['hashicorp.com', null],\n\t[\n\t\t'twitter.com',\n\t\t<FlightIcon name=\"twitter\" data-testid={'wpl-personcard-twitter-icon'} />,\n\t],\n\t[\n\t\t'github.com',\n\t\t<FlightIcon name=\"github\" data-testid={'wpl-personcard-github-icon'} />,\n\t],\n\t[\n\t\t'linkedin.com',\n\t\t<FlightIcon name=\"linkedin\" data-testid={'wpl-personcard-linkedin-icon'} />,\n\t],\n\t[\n\t\t'mailto:',\n\t\t<FlightIcon name=\"mail\" data-testid={'wpl-personcard-mail-icon'} />,\n\t],\n])\n/* eslint-enable react/jsx-key */\n\nconst Icon = memo(function Icon({ url }: { url: string }) {\n\tconst { protocol, host } = new URL(url)\n\tconst icon = iconMap.get(protocol === 'mailto:' ? 'mailto:' : host)\n\n\t// If the icon value is null, don't render an icon\n\tif (icon === null) {\n\t\treturn null\n\t}\n\n\t// Render the icon or the default icon if the icon value is undefined\n\treturn (\n\t\t<div className={s.thumbnailIcon}>\n\t\t\t{icon ?? (\n\t\t\t\t<FlightIcon name=\"link\" data-testid={'wpl-personcard-link-icon'} />\n\t\t\t)}\n\t\t</div>\n\t)\n})\n\nconst PersonCard = ({\n\tlink,\n\tthumbnail,\n\tname,\n\tlocation,\n\tbio,\n\tproductBadges,\n}: PersonCardProps) => {\n\treturn (\n\t\t<CardPrimitives.Root link={link} withArrow={false} aria-label={name}>\n\t\t\t<div className={s.thumbnailContainer}>\n\t\t\t\t<CardPrimitives.PersonThumbnail {...thumbnail} />\n\t\t\t\t<Icon url={link} />\n\t\t\t</div>\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t<div>\n\t\t\t\t\t<CardPrimitives.Heading>{name}</CardPrimitives.Heading>\n\t\t\t\t\t{location ? (\n\t\t\t\t\t\t<Text.Body tag=\"p\" size=\"200\" className={s.location}>\n\t\t\t\t\t\t\t{location}\n\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{bio ? (\n\t\t\t\t\t<CardPrimitives.Description>{bio}</CardPrimitives.Description>\n\t\t\t\t) : null}\n\t\t\t\t{productBadges && productBadges?.length > 0 ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges} />\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPersonCard.displayName = 'PersonCard'\n\nexport type { PersonCardProps }\nexport { PersonCard }\n"],"names":["iconMap","jsx","FlightIcon","Icon","memo","url","protocol","host","icon","PersonCard","link","thumbnail","name","location","bio","productBadges","jsxs","CardPrimitives","Text"],"mappings":";;;;;;AAkBA,MAAMA,wBAAc,IAAuB;AAAA;AAAA,EAE1C,CAAC,iBAAiB,IAAI;AAAA,EACtB;AAAA,IACC;AAAA,IACA,gBAAAC,EAACC,GAAA,EAAW,MAAK,WAAU,eAAa,8BAAA,CAA+B;AAAA,EAAA;AAAA,EAExE;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,UAAS,eAAa,6BAAA,CAA8B;AAAA,EAAA;AAAA,EAEtE;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,YAAW,eAAa,+BAAA,CAAgC;AAAA,EAAA;AAAA,EAE1E;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,QAAO,eAAa,2BAAA,CAA4B;AAAA,EAAA;AAEnE,CAAC,GAGKC,IAAOC,EAAK,SAAc,EAAE,KAAAC,KAAwB;AACzD,QAAM,EAAE,UAAAC,GAAU,MAAAC,EAAA,IAAS,IAAI,IAAIF,CAAG,GAChCG,IAAOR,EAAQ,IAAIM,MAAa,YAAY,YAAYC,CAAI;AAGlE,SAAIC,MAAS,OACL,OAKP,gBAAAP,EAAC,OAAA,EAAI,WAAW,EAAE,eAChB,UAAAO,KACA,gBAAAP,EAACC,GAAA,EAAW,MAAK,QAAO,eAAa,2BAAA,CAA4B,GAEnE;AAEF,CAAC,GAEKO,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,eAAAC;AACD,MAEE,gBAAAC,EAACC,EAAe,MAAf,EAAoB,MAAAP,GAAY,WAAW,IAAO,cAAYE,GAC9D,UAAA;AAAA,EAAA,gBAAAI,EAAC,OAAA,EAAI,WAAW,EAAE,oBACjB,UAAA;AAAA,IAAA,gBAAAf,EAACgB,EAAe,iBAAf,EAAgC,GAAGN,EAAA,CAAW;AAAA,IAC/C,gBAAAV,EAACE,GAAA,EAAK,KAAKO,EAAA,CAAM;AAAA,EAAA,GAClB;AAAA,EACA,gBAAAM,EAACC,EAAe,SAAf,EACA,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EACA,UAAA;AAAA,MAAA,gBAAAf,EAACgB,EAAe,SAAf,EAAwB,UAAAL,EAAA,CAAK;AAAA,MAC7BC,IACA,gBAAAZ,EAACiB,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAW,EAAE,UACzC,aACF,IACG;AAAA,IAAA,GACL;AAAA,IACCJ,IACA,gBAAAb,EAACgB,EAAe,aAAf,EAA4B,aAAI,IAC9B;AAAA,IACHF,KAAiBA,GAAe,SAAS,IACzC,gBAAAd,EAACgB,EAAe,eAAf,EAA6B,QAAQF,EAAA,CAAe,IAClD;AAAA,EAAA,EAAA,CACL;AAAA,GACD;AAIFN,EAAW,cAAc;"}

package/patterns/card/primitives.js

@@ -1,11 +1,11 @@
-import { jsxs as o, jsx as r, Fragment as y } from "react/jsx-runtime";
+import { jsxs as o, jsx as e, Fragment as y } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
 import { Card as w } from "../../components/card/index.js";
 import { Text as n } from "../../components/text/index.js";
-import { IconArrowRight24 as C } from "@hashicorp/flight-icons/svg-react/arrow-right-24";
+import { FlightIcon as C } from "../../components/flight-icon/index.js";
 import { ProductBadge as x } from "../product-badge/index.js";
 import { LogoThumbnail as P, PersonThumbnail as B, Thumbnail as D } from "./thumbnails/index.js";
-import e from "./style.module.css.js";
+import r from "./style.module.css.js";
 import L from "classnames";
 const d = v((a, t) => {
   const {
@@ -20,7 +20,7 @@ const d = v((a, t) => {
   return /* @__PURE__ */ o(
     w,
     {
-      className: L(e.card, f),
+      className: L(r.card, f),
       href: s,
       onClickCapture: h,
       isExternal: N,
@@ -28,26 +28,26 @@ const d = v((a, t) => {
       "aria-label": b,
       children: [
         g,
-        /* @__PURE__ */ r("div", { className: e.cta, children: i ? /* @__PURE__ */ r(C, {}) : null })
+        /* @__PURE__ */ e("div", { className: r.cta, children: i ? /* @__PURE__ */ e(C, { name: "arrow-right", size: 24 }) : null })
       ]
     }
   );
 });
 d.displayName = "CardPrimitives.Root";
-const c = ({ items: a }) => /* @__PURE__ */ r("div", { className: e.meta, "data-testid": "wpl-card-meta", children: /* @__PURE__ */ r(n.Label, { children: a.map((t, i) => {
+const l = ({ items: a }) => /* @__PURE__ */ e("div", { className: r.meta, "data-testid": "wpl-card-meta", children: /* @__PURE__ */ e(n.Label, { children: a.map((t, i) => {
   const s = i === a.length - 1;
   return /* @__PURE__ */ o(y, { children: [
     t,
-    s ? null : /* @__PURE__ */ r("span", { className: e.metaSeparator, "aria-hidden": !0, children: "|" })
+    s ? null : /* @__PURE__ */ e("span", { className: r.metaSeparator, "aria-hidden": !0, children: "|" })
   ] });
 }) }) });
-c.displayName = "Meta";
-const l = ({ children: a }) => /* @__PURE__ */ r("div", { className: e.content, "data-testid": "wpl-card-content", children: a });
-l.displayName = "Content";
-const m = ({ as: a = "h2", children: t }) => /* @__PURE__ */ r(n.DisplayExpressive, { tag: a, size: "200", className: e.heading, children: t });
+l.displayName = "Meta";
+const c = ({ children: a }) => /* @__PURE__ */ e("div", { className: r.content, "data-testid": "wpl-card-content", children: a });
+c.displayName = "Content";
+const m = ({ as: a = "h2", children: t }) => /* @__PURE__ */ e(n.DisplayExpressive, { tag: a, size: "200", className: r.heading, children: t });
 m.displayName = "Heading";
-const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className: e.productBadges, "data-testid": "wpl-card-badges", children: [
-  a.map((i, s) => /* @__PURE__ */ r(
+const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className: r.productBadges, "data-testid": "wpl-card-badges", children: [
+  a.map((i, s) => /* @__PURE__ */ e(
     x,
     {
       productName: i,
@@ -58,15 +58,15 @@ const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className:
   t
 ] });
 p.displayName = "ProductBadges";
-const u = ({ children: a }) => /* @__PURE__ */ r(n.Body, { tag: "p", size: "200", className: e.description, children: a });
+const u = ({ children: a }) => /* @__PURE__ */ e(n.Body, { tag: "p", size: "200", className: r.description, children: a });
 u.displayName = "Description";
 const M = {
   Root: d,
   Thumbnail: D,
   PersonThumbnail: B,
   LogoThumbnail: P,
-  Meta: c,
-  Content: l,
+  Meta: l,
+  Content: c,
   Heading: m,
   Description: u,
   ProductBadges: p

package/patterns/card/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","sources":["../../../src/patterns/card/primitives.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Card as MDSCard } from '../../components/card'\nimport { Text } from '../../components/text'\nimport { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'\nimport { ProductBadge } from '../product-badge'\nimport { Thumbnail, PersonThumbnail, LogoThumbnail } from './thumbnails'\nimport type {\n\tCardPrimitiveProps,\n\tMetaProps,\n\tContentProps,\n\tHeadingProps,\n\tProductBadgesProps,\n\tDescriptionProps,\n} from './types'\nimport s from './style.module.css'\nimport classNames from 'classnames'\n\nconst Root = forwardRef<HTMLDivElement, CardPrimitiveProps>((props, ref) => {\n\tconst {\n\t\twithArrow = true,\n\t\tlink,\n\t\tclickHandler,\n\t\tisExternal,\n\t\tchildren,\n\t\tclassName,\n\t\t'aria-label': ariaLabel,\n\t} = props\n\n\treturn (\n\t\t<MDSCard\n\t\t\tclassName={classNames(s.card, className)}\n\t\t\thref={link}\n\t\t\tonClickCapture={clickHandler}\n\t\t\tisExternal={isExternal}\n\t\t\tref={ref}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{children}\n\t\t\t<div className={s.cta}>{withArrow ? <IconArrowRight24 /> : null}</div>\n\t\t</MDSCard>\n\t)\n})\n\nRoot.displayName = 'CardPrimitives.Root'\n\nconst Meta = ({ items }: MetaProps) => {\n\treturn (\n\t\t<div className={s.meta} data-testid=\"wpl-card-meta\">\n\t\t\t<Text.Label>\n\t\t\t\t{items.map((item, stableIdx) => {\n\t\t\t\t\tconst isLastItem = stableIdx === items.length - 1\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{item}\n\t\t\t\t\t\t\t{!isLastItem ? (\n\t\t\t\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t\t\t\t|\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</Text.Label>\n\t\t</div>\n\t)\n}\n\nMeta.displayName = 'Meta'\n\nconst Content = ({ children }: ContentProps) => {\n\treturn (\n\t\t<div className={s.content} data-testid=\"wpl-card-content\">\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nContent.displayName = 'Content'\n\nconst Heading = ({ as = 'h2', children }: HeadingProps) => {\n\treturn (\n\t\t<Text.DisplayExpressive tag={as} size=\"200\" className={s.heading}>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t)\n}\n\nHeading.displayName = 'Heading'\n\nconst ProductBadges = ({ badges, children }: ProductBadgesProps) => {\n\treturn (\n\t\t<div className={s.productBadges} data-testid=\"wpl-card-badges\">\n\t\t\t{badges.map((badge, stableIdx) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ProductBadge\n\t\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t\tkey={`product-badge-${stableIdx}`}\n\t\t\t\t\t\tproductName={badge}\n\t\t\t\t\t\thasDot={true}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nProductBadges.displayName = 'ProductBadges'\n\nconst Description = ({ children }: DescriptionProps) => {\n\treturn (\n\t\t<Text.Body tag=\"p\" size=\"200\" className={s.description}>\n\t\t\t{children}\n\t\t</Text.Body>\n\t)\n}\n\nDescription.displayName = 'Description'\n\nconst CardPrimitives = {\n\tRoot,\n\tThumbnail,\n\tPersonThumbnail,\n\tLogoThumbnail,\n\tMeta,\n\tContent,\n\tHeading,\n\tDescription,\n\tProductBadges,\n}\n\nexport { CardPrimitives }\n"],"names":["Root","forwardRef","props","ref","withArrow","link","clickHandler","isExternal","children","className","ariaLabel","jsxs","MDSCard","classNames","s","jsx","IconArrowRight24","Meta","items","Text","item","stableIdx","isLastItem","Fragment","Content","Heading","as","ProductBadges","badges","badge","ProductBadge","Description","CardPrimitives","Thumbnail","PersonThumbnail","LogoThumbnail"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAOC,EAA+C,CAACC,GAAOC,MAAQ;AAC3E,QAAM;AAAA,IACL,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAcC;AAAA,EAAA,IACXR;AAEJ,SACC,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,WAAWC,EAAWC,EAAE,MAAML,CAAS;AAAA,MACvC,MAAMJ;AAAA,MACN,gBAAgBC;AAAA,MAChB,YAAAC;AAAA,MACA,KAAAJ;AAAA,MACA,cAAYO;AAAA,MAEX,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAO,EAAC,SAAI,WAAWD,EAAE,KAAM,UAAAV,IAAY,gBAAAW,EAACC,GAAA,CAAA,CAAiB,IAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE,CAAC;AAEDhB,EAAK,cAAc;AAEnB,MAAMiB,IAAO,CAAC,EAAE,OAAAC,QAEd,gBAAAH,EAAC,OAAA,EAAI,WAAWD,EAAE,MAAM,eAAY,iBACnC,UAAA,gBAAAC,EAACI,EAAK,OAAL,EACC,UAAAD,EAAM,IAAI,CAACE,GAAMC,MAAc;AAC/B,QAAMC,IAAaD,MAAcH,EAAM,SAAS;AAChD,SACC,gBAAAP,EAAAY,GAAA,EACE,UAAA;AAAA,IAAAH;AAAA,IACCE,IAIE,OAHH,gBAAAP,EAAC,QAAA,EAAK,WAAWD,EAAE,eAAe,eAAa,IAAM,UAAA,IAAA,CAErD;AAAA,EACG,GACL;AAEF,CAAC,GACF,GACD;AAIFG,EAAK,cAAc;AAEnB,MAAMO,IAAU,CAAC,EAAE,UAAAhB,0BAEhB,OAAA,EAAI,WAAWM,EAAE,SAAS,eAAY,oBACrC,UAAAN,GACF;AAIFgB,EAAQ,cAAc;AAEtB,MAAMC,IAAU,CAAC,EAAE,IAAAC,IAAK,MAAM,UAAAlB,QAE5B,gBAAAO,EAACI,EAAK,mBAAL,EAAuB,KAAKO,GAAI,MAAK,OAAM,WAAWZ,EAAE,SACvD,UAAAN,EAAA,CACF;AAIFiB,EAAQ,cAAc;AAEtB,MAAME,IAAgB,CAAC,EAAE,QAAAC,GAAQ,UAAApB,0BAE9B,OAAA,EAAI,WAAWM,EAAE,eAAe,eAAY,mBAC3C,UAAA;AAAA,EAAAc,EAAO,IAAI,CAACC,GAAOR,MAElB,gBAAAN;AAAA,IAACe;AAAA,IAAA;AAAA,MAGA,aAAaD;AAAA,MACb,QAAQ;AAAA,IAAA;AAAA,IAFH,iBAAiBR,CAAS;AAAA,EAAA,CAKjC;AAAA,EACAb;AAAA,GACF;AAIFmB,EAAc,cAAc;AAE5B,MAAMI,IAAc,CAAC,EAAE,UAAAvB,QAErB,gBAAAO,EAACI,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAWL,EAAE,aACzC,UAAAN,EAAA,CACF;AAIFuB,EAAY,cAAc;AAE1B,MAAMC,IAAiB;AAAA,EACtB,MAAAhC;AAAA,EACA,WAAAiC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAlB;AAAA,EACA,SAAAO;AAAA,EACA,SAAAC;AAAA,EACA,aAAAM;AAAA,EACA,eAAAJ;AACD;"}
+{"version":3,"file":"primitives.js","sources":["../../../src/patterns/card/primitives.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Card as MDSCard } from '../../components/card'\nimport { Text } from '../../components/text'\nimport { FlightIcon } from '../../components/flight-icon'\nimport { ProductBadge } from '../product-badge'\nimport { Thumbnail, PersonThumbnail, LogoThumbnail } from './thumbnails'\nimport type {\n\tCardPrimitiveProps,\n\tMetaProps,\n\tContentProps,\n\tHeadingProps,\n\tProductBadgesProps,\n\tDescriptionProps,\n} from './types'\nimport s from './style.module.css'\nimport classNames from 'classnames'\n\nconst Root = forwardRef<HTMLDivElement, CardPrimitiveProps>((props, ref) => {\n\tconst {\n\t\twithArrow = true,\n\t\tlink,\n\t\tclickHandler,\n\t\tisExternal,\n\t\tchildren,\n\t\tclassName,\n\t\t'aria-label': ariaLabel,\n\t} = props\n\n\treturn (\n\t\t<MDSCard\n\t\t\tclassName={classNames(s.card, className)}\n\t\t\thref={link}\n\t\t\tonClickCapture={clickHandler}\n\t\t\tisExternal={isExternal}\n\t\t\tref={ref}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{children}\n\t\t\t<div className={s.cta}>\n\t\t\t\t{withArrow ? <FlightIcon name=\"arrow-right\" size={24} /> : null}\n\t\t\t</div>\n\t\t</MDSCard>\n\t)\n})\n\nRoot.displayName = 'CardPrimitives.Root'\n\nconst Meta = ({ items }: MetaProps) => {\n\treturn (\n\t\t<div className={s.meta} data-testid=\"wpl-card-meta\">\n\t\t\t<Text.Label>\n\t\t\t\t{items.map((item, stableIdx) => {\n\t\t\t\t\tconst isLastItem = stableIdx === items.length - 1\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{item}\n\t\t\t\t\t\t\t{!isLastItem ? (\n\t\t\t\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t\t\t\t|\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</Text.Label>\n\t\t</div>\n\t)\n}\n\nMeta.displayName = 'Meta'\n\nconst Content = ({ children }: ContentProps) => {\n\treturn (\n\t\t<div className={s.content} data-testid=\"wpl-card-content\">\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nContent.displayName = 'Content'\n\nconst Heading = ({ as = 'h2', children }: HeadingProps) => {\n\treturn (\n\t\t<Text.DisplayExpressive tag={as} size=\"200\" className={s.heading}>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t)\n}\n\nHeading.displayName = 'Heading'\n\nconst ProductBadges = ({ badges, children }: ProductBadgesProps) => {\n\treturn (\n\t\t<div className={s.productBadges} data-testid=\"wpl-card-badges\">\n\t\t\t{badges.map((badge, stableIdx) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ProductBadge\n\t\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t\tkey={`product-badge-${stableIdx}`}\n\t\t\t\t\t\tproductName={badge}\n\t\t\t\t\t\thasDot={true}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nProductBadges.displayName = 'ProductBadges'\n\nconst Description = ({ children }: DescriptionProps) => {\n\treturn (\n\t\t<Text.Body tag=\"p\" size=\"200\" className={s.description}>\n\t\t\t{children}\n\t\t</Text.Body>\n\t)\n}\n\nDescription.displayName = 'Description'\n\nconst CardPrimitives = {\n\tRoot,\n\tThumbnail,\n\tPersonThumbnail,\n\tLogoThumbnail,\n\tMeta,\n\tContent,\n\tHeading,\n\tDescription,\n\tProductBadges,\n}\n\nexport { CardPrimitives }\n"],"names":["Root","forwardRef","props","ref","withArrow","link","clickHandler","isExternal","children","className","ariaLabel","jsxs","MDSCard","classNames","s","jsx","FlightIcon","Meta","items","Text","item","stableIdx","isLastItem","Fragment","Content","Heading","as","ProductBadges","badges","badge","ProductBadge","Description","CardPrimitives","Thumbnail","PersonThumbnail","LogoThumbnail"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAOC,EAA+C,CAACC,GAAOC,MAAQ;AAC3E,QAAM;AAAA,IACL,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAcC;AAAA,EAAA,IACXR;AAEJ,SACC,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,WAAWC,EAAWC,EAAE,MAAML,CAAS;AAAA,MACvC,MAAMJ;AAAA,MACN,gBAAgBC;AAAA,MAChB,YAAAC;AAAA,MACA,KAAAJ;AAAA,MACA,cAAYO;AAAA,MAEX,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAE,KAChB,UAAAV,IAAY,gBAAAW,EAACC,GAAA,EAAW,MAAK,eAAc,MAAM,GAAA,CAAI,IAAK,KAAA,CAC5D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH,CAAC;AAEDhB,EAAK,cAAc;AAEnB,MAAMiB,IAAO,CAAC,EAAE,OAAAC,QAEd,gBAAAH,EAAC,OAAA,EAAI,WAAWD,EAAE,MAAM,eAAY,iBACnC,UAAA,gBAAAC,EAACI,EAAK,OAAL,EACC,UAAAD,EAAM,IAAI,CAACE,GAAMC,MAAc;AAC/B,QAAMC,IAAaD,MAAcH,EAAM,SAAS;AAChD,SACC,gBAAAP,EAAAY,GAAA,EACE,UAAA;AAAA,IAAAH;AAAA,IACCE,IAIE,OAHH,gBAAAP,EAAC,QAAA,EAAK,WAAWD,EAAE,eAAe,eAAa,IAAM,UAAA,IAAA,CAErD;AAAA,EACG,GACL;AAEF,CAAC,GACF,GACD;AAIFG,EAAK,cAAc;AAEnB,MAAMO,IAAU,CAAC,EAAE,UAAAhB,0BAEhB,OAAA,EAAI,WAAWM,EAAE,SAAS,eAAY,oBACrC,UAAAN,GACF;AAIFgB,EAAQ,cAAc;AAEtB,MAAMC,IAAU,CAAC,EAAE,IAAAC,IAAK,MAAM,UAAAlB,QAE5B,gBAAAO,EAACI,EAAK,mBAAL,EAAuB,KAAKO,GAAI,MAAK,OAAM,WAAWZ,EAAE,SACvD,UAAAN,EAAA,CACF;AAIFiB,EAAQ,cAAc;AAEtB,MAAME,IAAgB,CAAC,EAAE,QAAAC,GAAQ,UAAApB,0BAE9B,OAAA,EAAI,WAAWM,EAAE,eAAe,eAAY,mBAC3C,UAAA;AAAA,EAAAc,EAAO,IAAI,CAACC,GAAOR,MAElB,gBAAAN;AAAA,IAACe;AAAA,IAAA;AAAA,MAGA,aAAaD;AAAA,MACb,QAAQ;AAAA,IAAA;AAAA,IAFH,iBAAiBR,CAAS;AAAA,EAAA,CAKjC;AAAA,EACAb;AAAA,GACF;AAIFmB,EAAc,cAAc;AAE5B,MAAMI,IAAc,CAAC,EAAE,UAAAvB,QAErB,gBAAAO,EAACI,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAWL,EAAE,aACzC,UAAAN,EAAA,CACF;AAIFuB,EAAY,cAAc;AAE1B,MAAMC,IAAiB;AAAA,EACtB,MAAAhC;AAAA,EACA,WAAAiC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAlB;AAAA,EACA,SAAAO;AAAA,EACA,SAAAC;AAAA,EACA,aAAAM;AAAA,EACA,eAAAJ;AACD;"}