@hashicorp/mds-react 0.9.2 → 0.9.4

package/patterns/index.js

@@ -1,25 +1,35 @@
-import { C as s, c as r, d as C, e as P, L as e, N as O, h as d, i as t, j as L, b as n, P as R, f as U, g as _, a as i, l as A, R as m, U as u, n as D, k as T } from "../index-B9mPJh9w.js";
-import { n as c } from "../index-WkGIywHj.js";
+import { PartnerCard as e } from "./card/partner-card/index.js";
+import { CardPrimitives as m } from "./card/primitives.js";
+import { CopyButton as O } from "./copy-button/index.js";
+import { LAYOUT_APPEARANCES as p, LAYOUT_BACKGROUNDS as a, LAYOUT_PADDING as d, Layout as f, normalizeLayoutProps as x } from "./layout/index.js";
+import { ProductBadge as R } from "./product-badge/index.js";
+import { PRODUCT_LOGO_COLORS as _, PRODUCT_LOGO_PRODUCTS as n, PRODUCT_LOGO_SIZES as A, ProductLogo as i, normalizeProductLogoProps as u } from "./product-logo/index.js";
+import { RelatedContent as T } from "./related-content/index.js";
+import { NewsroomCard as S } from "./card/newsroom-card/index.js";
+import { PersonCard as c } from "./card/person-card/index.js";
+import { PromoCard as g } from "./card/promo-card/index.js";
+import { ResourceCard as y } from "./card/resource-card/index.js";
+import { UnifiedCard as E } from "./card/unified-card/index.js";
 export {
-  s as CardPrimitives,
-  c as CopyButton,
-  r as LAYOUT_APPEARANCES,
-  C as LAYOUT_BACKGROUNDS,
-  P as LAYOUT_PADDING,
-  e as Layout,
-  O as NewsroomCard,
-  d as PRODUCT_LOGO_COLORS,
-  t as PRODUCT_LOGO_PRODUCTS,
-  L as PRODUCT_LOGO_SIZES,
-  n as PartnerCard,
-  R as PersonCard,
-  U as ProductBadge,
-  _ as ProductLogo,
-  i as PromoCard,
-  A as RelatedContent,
-  m as ResourceCard,
-  u as UnifiedCard,
-  D as normalizeLayoutProps,
-  T as normalizeProductLogoProps
+  m as CardPrimitives,
+  O as CopyButton,
+  p as LAYOUT_APPEARANCES,
+  a as LAYOUT_BACKGROUNDS,
+  d as LAYOUT_PADDING,
+  f as Layout,
+  S as NewsroomCard,
+  _ as PRODUCT_LOGO_COLORS,
+  n as PRODUCT_LOGO_PRODUCTS,
+  A as PRODUCT_LOGO_SIZES,
+  e as PartnerCard,
+  c as PersonCard,
+  R as ProductBadge,
+  i as ProductLogo,
+  g as PromoCard,
+  T as RelatedContent,
+  y as ResourceCard,
+  E as UnifiedCard,
+  x as normalizeLayoutProps,
+  u as normalizeProductLogoProps
 };
 //# sourceMappingURL=index.js.map

package/patterns/index.js.map

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

package/patterns/layout/index.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export declare const LAYOUT_APPEARANCES: readonly ["light", "dark"];
 export declare const LAYOUT_BACKGROUNDS: readonly ["primary", "faint", "transparent"];
 export declare const LAYOUT_PADDING: readonly ["none", "small", "medium", "large"];
@@ -11,37 +11,37 @@ export declare const normalizeLayoutProps: ((input: {
     paddingTop?: unknown;
     paddingBottom?: unknown;
 }, opts?: {
-    all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+    all?: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform"> | undefined;
     each?: {
-        appearance?: import("../../utils/make-normalizer").NormalizerOpts<"dark" | "light"> | undefined;
-        background?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "faint" | "transparent"> | undefined;
-        paddingTop?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "none" | "medium" | "large"> | undefined;
-        paddingBottom?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "none" | "medium" | "large"> | undefined;
+        appearance?: import('../../utils/make-normalizer').NormalizerOpts<"light"> | undefined;
+        background?: import('../../utils/make-normalizer').NormalizerOpts<"primary"> | undefined;
+        paddingTop?: import('../../utils/make-normalizer').NormalizerOpts<"medium"> | undefined;
+        paddingBottom?: import('../../utils/make-normalizer').NormalizerOpts<"medium"> | undefined;
     } | undefined;
 } | undefined) => {
-    appearance: "dark" | "light";
-    background: "primary" | "faint" | "transparent";
-    paddingTop: "small" | "none" | "medium" | "large";
-    paddingBottom: "small" | "none" | "medium" | "large";
+    appearance: "light";
+    background: "primary";
+    paddingTop: "medium";
+    paddingBottom: "medium";
 }) & {
-    with(all: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">): (input: {
+    with(all: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform">): (input: {
         appearance?: unknown;
         background?: unknown;
         paddingTop?: unknown;
         paddingBottom?: unknown;
     }, opts?: {
-        all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+        all?: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform"> | undefined;
         each?: {
-            appearance?: import("../../utils/make-normalizer").NormalizerOpts<"dark" | "light"> | undefined;
-            background?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "faint" | "transparent"> | undefined;
-            paddingTop?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "none" | "medium" | "large"> | undefined;
-            paddingBottom?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "none" | "medium" | "large"> | undefined;
+            appearance?: import('../../utils/make-normalizer').NormalizerOpts<"light"> | undefined;
+            background?: import('../../utils/make-normalizer').NormalizerOpts<"primary"> | undefined;
+            paddingTop?: import('../../utils/make-normalizer').NormalizerOpts<"medium"> | undefined;
+            paddingBottom?: import('../../utils/make-normalizer').NormalizerOpts<"medium"> | undefined;
         } | undefined;
     } | undefined) => {
-        appearance: "dark" | "light";
-        background: "primary" | "faint" | "transparent";
-        paddingTop: "small" | "none" | "medium" | "large";
-        paddingBottom: "small" | "none" | "medium" | "large";
+        appearance: "light";
+        background: "primary";
+        paddingTop: "medium";
+        paddingBottom: "medium";
     };
 };
 export interface LayoutProps extends PropsWithChildren {

package/patterns/layout/index.js

@@ -0,0 +1,47 @@
+import { jsx as c } from "react/jsx-runtime";
+import { makeNormalizerSet as D, makeNormalizer as a } from "../../utils/make-normalizer/index.js";
+import N from "classnames";
+import o from "./layout.module.css.js";
+const m = "light", r = "primary", n = "medium", i = "medium", T = ["light", "dark"], k = ["primary", "faint", "transparent"], t = ["none", "small", "medium", "large"], _ = D({
+  appearance: a(T, {
+    fallback: m
+  }),
+  background: a(k, {
+    fallback: r
+  }),
+  paddingTop: a(t, {
+    fallback: n
+  }),
+  paddingBottom: a(t, {
+    fallback: i
+  })
+}), L = ({
+  className: s,
+  children: e,
+  appearance: l = m,
+  background: d = r,
+  paddingBottom: p = n,
+  paddingTop: A = i
+}) => /* @__PURE__ */ c(
+  "div",
+  {
+    className: N([
+      o.layout,
+      { "mds-dark-mode": l === "dark" },
+      o[d],
+      o[`padding-top-${A}`],
+      o[`padding-bottom-${p}`],
+      s
+    ]),
+    children: e
+  }
+);
+L.displayName = "Layout";
+export {
+  T as LAYOUT_APPEARANCES,
+  k as LAYOUT_BACKGROUNDS,
+  t as LAYOUT_PADDING,
+  L as Layout,
+  _ as normalizeLayoutProps
+};
+//# sourceMappingURL=index.js.map

package/patterns/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/patterns/layout/index.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { makeNormalizer, makeNormalizerSet } from '../../utils/make-normalizer'\nimport classNames from 'classnames'\nimport s from './layout.module.css'\n\nconst DEFAULT_APPEARANCE = 'light'\nconst DEFAULT_BACKGROUND = 'primary'\nconst DEFAULT_PADDING_TOP = 'medium'\nconst DEFAULT_PADDING_BOTTOM = 'medium'\n\nexport const LAYOUT_APPEARANCES = ['light', 'dark'] as const\nexport const LAYOUT_BACKGROUNDS = ['primary', 'faint', 'transparent'] as const\nexport const LAYOUT_PADDING = ['none', 'small', 'medium', 'large'] as const\n\nexport type LayoutAppearance = (typeof LAYOUT_APPEARANCES)[number]\nexport type LayoutBackground = (typeof LAYOUT_BACKGROUNDS)[number]\nexport type LayoutPadding = (typeof LAYOUT_PADDING)[number]\n\nexport const normalizeLayoutProps = makeNormalizerSet({\n\tappearance: makeNormalizer(LAYOUT_APPEARANCES, {\n\t\tfallback: DEFAULT_APPEARANCE,\n\t}),\n\tbackground: makeNormalizer(LAYOUT_BACKGROUNDS, {\n\t\tfallback: DEFAULT_BACKGROUND,\n\t}),\n\tpaddingTop: makeNormalizer(LAYOUT_PADDING, {\n\t\tfallback: DEFAULT_PADDING_TOP,\n\t}),\n\tpaddingBottom: makeNormalizer(LAYOUT_PADDING, {\n\t\tfallback: DEFAULT_PADDING_BOTTOM,\n\t}),\n})\n\nexport interface LayoutProps extends PropsWithChildren {\n\tclassName?: string\n\t/**\n\t * The appearance of the layout\n\t */\n\tappearance?: LayoutAppearance\n\t/**\n\t * The color token used for the background. The color value changes based on `appearance`\n\t */\n\tbackground?: LayoutBackground\n\t/**\n\t * The space between the layout component's content and its top border\n\t */\n\tpaddingTop?: LayoutPadding\n\t/**\n\t * The space between the layout component's content and its bottom border\n\t */\n\tpaddingBottom?: LayoutPadding\n}\n\nexport const Layout = ({\n\tclassName,\n\tchildren,\n\tappearance = DEFAULT_APPEARANCE,\n\tbackground = DEFAULT_BACKGROUND,\n\tpaddingBottom = DEFAULT_PADDING_TOP,\n\tpaddingTop = DEFAULT_PADDING_BOTTOM,\n}: LayoutProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames([\n\t\t\t\ts.layout,\n\t\t\t\t{ ['mds-dark-mode']: appearance === 'dark' },\n\t\t\t\ts[background],\n\t\t\t\ts[`padding-top-${paddingTop}`],\n\t\t\t\ts[`padding-bottom-${paddingBottom}`],\n\t\t\t\tclassName,\n\t\t\t])}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nLayout.displayName = 'Layout'\n"],"names":["DEFAULT_APPEARANCE","DEFAULT_BACKGROUND","DEFAULT_PADDING_TOP","DEFAULT_PADDING_BOTTOM","LAYOUT_APPEARANCES","LAYOUT_BACKGROUNDS","LAYOUT_PADDING","normalizeLayoutProps","makeNormalizerSet","makeNormalizer","Layout","className","children","appearance","background","paddingBottom","paddingTop","jsx","classNames","s"],"mappings":";;;;AAKA,MAAMA,IAAqB,SACrBC,IAAqB,WACrBC,IAAsB,UACtBC,IAAyB,UAElBC,IAAqB,CAAC,SAAS,MAAM,GACrCC,IAAqB,CAAC,WAAW,SAAS,aAAa,GACvDC,IAAiB,CAAC,QAAQ,SAAS,UAAU,OAAO,GAMpDC,IAAuBC,EAAkB;AAAA,EACrD,YAAYC,EAAeL,GAAoB;AAAA,IAC9C,UAAUJ;AAAA,EAAA,CACV;AAAA,EACD,YAAYS,EAAeJ,GAAoB;AAAA,IAC9C,UAAUJ;AAAA,EAAA,CACV;AAAA,EACD,YAAYQ,EAAeH,GAAgB;AAAA,IAC1C,UAAUJ;AAAA,EAAA,CACV;AAAA,EACD,eAAeO,EAAeH,GAAgB;AAAA,IAC7C,UAAUH;AAAA,EAAA,CACV;AACF,CAAC,GAsBYO,IAAS,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAab;AAAA,EACb,YAAAc,IAAab;AAAA,EACb,eAAAc,IAAgBb;AAAA,EAChB,YAAAc,IAAab;AACd,MAEE,gBAAAc;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAW;AAAA,MACrBC,EAAE;AAAA,MACF,EAAG,iBAAkBN,MAAe,OAAA;AAAA,MACpCM,EAAEL,CAAU;AAAA,MACZK,EAAE,eAAeH,CAAU,EAAE;AAAA,MAC7BG,EAAE,kBAAkBJ,CAAa,EAAE;AAAA,MACnCJ;AAAA,IAAA,CACA;AAAA,IAEA,UAAAC;AAAA,EAAA;AAAA;AAKJF,EAAO,cAAc;"}

package/patterns/layout/layout.module.css.js

@@ -0,0 +1,20 @@
+const t = "layout__bSrhA", a = "faint__Z2ywD", d = "transparent__9mJjZ", n = {
+  layout: t,
+  faint: a,
+  transparent: d,
+  "padding-top-none": "padding-top-none__9PeMj",
+  "padding-top-small": "padding-top-small__bSFSb",
+  "padding-top-medium": "padding-top-medium__GrQm5",
+  "padding-top-large": "padding-top-large__mDeeb",
+  "padding-bottom-none": "padding-bottom-none__G-i6w",
+  "padding-bottom-small": "padding-bottom-small__LraeK",
+  "padding-bottom-medium": "padding-bottom-medium__PswfC",
+  "padding-bottom-large": "padding-bottom-large__0VyXJ"
+};
+export {
+  n as default,
+  a as faint,
+  t as layout,
+  d as transparent
+};
+//# sourceMappingURL=layout.module.css.js.map

package/patterns/layout/layout.module.css.js.map

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

package/patterns/product-badge/index.js

@@ -0,0 +1,22 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Badge as d } from "../../components/badge/index.js";
+import s from "./style.module.css.js";
+const e = ({ productName: o, hasDot: a }) => {
+  const r = o.replace("hashicorp", "HashiCorp"), t = r === "HashiCorp cloud platform" ? "hashicorp" : o;
+  return /* @__PURE__ */ c(
+    d,
+    {
+      className: s.badge,
+      text: r,
+      ...a && {
+        icon: "dot",
+        iconColor: `var(--mds-color-${t}-brand)`
+      }
+    }
+  );
+};
+e.displayName = "ProductBadge";
+export {
+  e as ProductBadge
+};
+//# sourceMappingURL=index.js.map

package/patterns/product-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/patterns/product-badge/index.tsx"],"sourcesContent":["import { Badge } from '../../components/badge'\nimport s from './style.module.css'\n\ntype Products =\n\t| 'hashicorp'\n\t| 'boundary'\n\t| 'consul'\n\t| 'nomad'\n\t| 'packer'\n\t| 'terraform'\n\t| 'vault'\n\t| 'vagrant'\n\t| 'waypoint'\n\ninterface ProductBadgeProps {\n\tproductName: Products\n\thasDot?: boolean\n}\n\nconst ProductBadge = ({ productName, hasDot }: ProductBadgeProps) => {\n\tconst finalProductName = productName.replace('hashicorp', 'HashiCorp')\n\n\tconst productBrand =\n\t\tfinalProductName === 'HashiCorp cloud platform' ? 'hashicorp' : productName\n\n\treturn (\n\t\t<Badge\n\t\t\tclassName={s.badge}\n\t\t\ttext={finalProductName}\n\t\t\t{...(hasDot && {\n\t\t\t\ticon: 'dot',\n\t\t\t\ticonColor: `var(--mds-color-${productBrand}-brand)`,\n\t\t\t})}\n\t\t/>\n\t)\n}\n\nProductBadge.displayName = 'ProductBadge'\n\nexport type { ProductBadgeProps }\nexport { ProductBadge }\n"],"names":["ProductBadge","productName","hasDot","finalProductName","productBrand","jsx","Badge"],"mappings":";;;AAmBA,MAAMA,IAAe,CAAC,EAAE,aAAAC,GAAa,QAAAC,QAAgC;AACpE,QAAMC,IAAmBF,EAAY,QAAQ,aAAa,WAAW,GAE/DG,IACLD,MAAqB,6BAA6B,cAAcF;AAEjE,SACC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAW,EAAE;AAAA,MACb,MAAMH;AAAA,MACL,GAAID,KAAU;AAAA,QACd,MAAM;AAAA,QACN,WAAW,mBAAmBE,CAAY;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGH;AAEAJ,EAAa,cAAc;"}

package/patterns/product-badge/style.module.css.js

@@ -0,0 +1,8 @@
+const a = "badge__w7lpk", e = {
+  badge: a
+};
+export {
+  a as badge,
+  e as default
+};
+//# sourceMappingURL=style.module.css.js.map

package/patterns/product-badge/style.module.css.js.map

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

package/patterns/product-logo/index.d.ts

@@ -9,32 +9,32 @@ export declare const normalizeProductLogoProps: ((input: {
     color?: unknown;
     product?: unknown;
 }, opts?: {
-    all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+    all?: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform"> | undefined;
     each?: {
-        size?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "medium" | "large"> | undefined;
-        color?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "strong"> | undefined;
-        product?: import("../../utils/make-normalizer").NormalizerOpts<"boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise"> | undefined;
+        size?: import('../../utils/make-normalizer').NormalizerOpts<"small"> | undefined;
+        color?: import('../../utils/make-normalizer').NormalizerOpts<"primary"> | undefined;
+        product?: import('../../utils/make-normalizer').NormalizerOpts<"hcp"> | undefined;
     } | undefined;
 } | undefined) => {
-    size: "small" | "medium" | "large";
-    color: "primary" | "strong";
-    product: "boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise";
+    size: "small";
+    color: "primary";
+    product: "hcp";
 }) & {
-    with(all: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">): (input: {
+    with(all: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform">): (input: {
         size?: unknown;
         color?: unknown;
         product?: unknown;
     }, opts?: {
-        all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+        all?: Pick<import('../../utils/make-normalizer').NormalizerOpts<string>, "transform"> | undefined;
         each?: {
-            size?: import("../../utils/make-normalizer").NormalizerOpts<"small" | "medium" | "large"> | undefined;
-            color?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "strong"> | undefined;
-            product?: import("../../utils/make-normalizer").NormalizerOpts<"boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise"> | undefined;
+            size?: import('../../utils/make-normalizer').NormalizerOpts<"small"> | undefined;
+            color?: import('../../utils/make-normalizer').NormalizerOpts<"primary"> | undefined;
+            product?: import('../../utils/make-normalizer').NormalizerOpts<"hcp"> | undefined;
         } | undefined;
     } | undefined) => {
-        size: "small" | "medium" | "large";
-        color: "primary" | "strong";
-        product: "boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise";
+        size: "small";
+        color: "primary";
+        product: "hcp";
     };
 };
 export interface ProductLogoProps {

package/patterns/product-logo/index.js

@@ -0,0 +1,130 @@
+import { jsxs as s, jsx as c } from "react/jsx-runtime";
+import p from "classnames";
+import { makeNormalizerSet as u, makeNormalizer as t } from "../../utils/make-normalizer/index.js";
+import { FlightIcon as v } from "../../components/flight-icon/index.js";
+import { Text as i } from "../../components/text/index.js";
+import o from "./product-logo.module.css.js";
+function h(a) {
+  return a.charAt(0).toUpperCase() + a.slice(1);
+}
+const m = "small", d = "primary", O = "hcp", C = [
+  "vault-radar",
+  "vault-secrets",
+  "vault-dedicated"
+], P = ["small", "medium", "large"], f = ["primary", "strong"], D = [
+  "hcp",
+  "hashicorp",
+  "boundary",
+  "consul",
+  "nomad",
+  "packer",
+  "terraform",
+  "vault",
+  "vault-dedicated",
+  "vault-enterprise",
+  "vault-radar",
+  "vault-secrets",
+  "vagrant",
+  "waypoint"
+], N = u({
+  size: t(P, {
+    fallback: m
+  }),
+  color: t(f, {
+    fallback: d
+  }),
+  product: t(D, {
+    fallback: O
+  })
+}), _ = ({
+  size: a = m,
+  color: l = d,
+  product: r
+}) => {
+  const e = n[r]?.name ?? h(r);
+  return /* @__PURE__ */ s("div", { className: p(o["product-logo"], o[a]), children: [
+    /* @__PURE__ */ c(
+      v,
+      {
+        size: a === "small" ? 16 : 24,
+        name: n[r]?.icon ?? `${r}-color`,
+        color: n[r]?.color
+      }
+    ),
+    C.includes(r) ? /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ s(
+        i.DisplayExpressive,
+        {
+          className: o[a],
+          color: l,
+          weight: "semibold",
+          children: [
+            e.split(" ").slice(0, 2).join(" "),
+            " "
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(
+        i.DisplayExpressive,
+        {
+          className: o[a],
+          color: l,
+          weight: "regular",
+          children: e.split(" ").slice(2)[0]
+        }
+      )
+    ] }) : (
+      // Default to unmodified display of the product name
+      /* @__PURE__ */ c(
+        i.DisplayExpressive,
+        {
+          className: o[a],
+          color: l,
+          weight: "semibold",
+          children: e
+        }
+      )
+    )
+  ] });
+};
+_.displayName = "ProductLogo";
+const n = {
+  hcp: {
+    icon: "hashicorp-square",
+    color: "var(--mds-color-hcp-brand)",
+    name: "HashiCorp Cloud Platform"
+  },
+  hashicorp: {
+    icon: "hashicorp",
+    color: "var(--mds-color-hashicorp-brand)",
+    name: "HashiCorp"
+  },
+  "vault-radar": {
+    icon: "vault-square",
+    color: "var(--mds-color-vault-radar-brand)",
+    name: "HCP Vault Radar"
+  },
+  "vault-secrets": {
+    icon: "vault-square",
+    color: "var(--mds-color-vault-secrets-brand)",
+    name: "HCP Vault Secrets"
+  },
+  "vault-dedicated": {
+    icon: "vault-fill",
+    color: "var(--mds-color-vault-secrets-brand)",
+    name: "HCP Vault Dedicated"
+  },
+  "vault-enterprise": {
+    icon: "vault-fill",
+    color: "var(--mds-color-vault-secrets-brand)",
+    name: "Vault Enterprise"
+  }
+};
+export {
+  f as PRODUCT_LOGO_COLORS,
+  D as PRODUCT_LOGO_PRODUCTS,
+  P as PRODUCT_LOGO_SIZES,
+  _ as ProductLogo,
+  N as normalizeProductLogoProps
+};
+//# sourceMappingURL=index.js.map

package/patterns/product-logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/patterns/product-logo/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { makeNormalizer, makeNormalizerSet } from '../../utils/make-normalizer'\nimport { FlightIcon } from '../../components/flight-icon'\nimport { Text } from '../../components/text'\nimport s from './product-logo.module.css'\n\nfunction capitalize(value: string) {\n\treturn value.charAt(0).toUpperCase() + value.slice(1)\n}\n\nconst DEFAULT_SIZE = 'small'\nconst DEFAULT_COLOR = 'primary'\nconst DEFAULT_PRODUCT = 'hcp'\n\nconst HCP_PRODUCT_EXCEPTIONS = [\n\t'vault-radar',\n\t'vault-secrets',\n\t'vault-dedicated',\n]\n\nexport const PRODUCT_LOGO_SIZES = ['small', 'medium', 'large'] as const\nexport const PRODUCT_LOGO_COLORS = ['primary', 'strong'] as const\nexport const PRODUCT_LOGO_PRODUCTS = [\n\t'hcp',\n\t'hashicorp',\n\t'boundary',\n\t'consul',\n\t'nomad',\n\t'packer',\n\t'terraform',\n\t'vault',\n\t'vault-dedicated',\n\t'vault-enterprise',\n\t'vault-radar',\n\t'vault-secrets',\n\t'vagrant',\n\t'waypoint',\n] as const\n\nexport type ProductLogoSize = (typeof PRODUCT_LOGO_SIZES)[number]\nexport type ProductLogoColor = (typeof PRODUCT_LOGO_COLORS)[number]\nexport type ProductLogoProduct = (typeof PRODUCT_LOGO_PRODUCTS)[number]\n\nexport const normalizeProductLogoProps = makeNormalizerSet({\n\tsize: makeNormalizer(PRODUCT_LOGO_SIZES, {\n\t\tfallback: DEFAULT_SIZE,\n\t}),\n\tcolor: makeNormalizer(PRODUCT_LOGO_COLORS, {\n\t\tfallback: DEFAULT_COLOR,\n\t}),\n\tproduct: makeNormalizer(PRODUCT_LOGO_PRODUCTS, {\n\t\tfallback: DEFAULT_PRODUCT,\n\t}),\n})\n\nexport interface ProductLogoProps {\n\tsize?: ProductLogoSize\n\tcolor?: ProductLogoColor\n\tproduct: ProductLogoProduct\n}\n\nexport const ProductLogo = ({\n\tsize = DEFAULT_SIZE,\n\tcolor = DEFAULT_COLOR,\n\tproduct,\n}: ProductLogoProps) => {\n\tconst productName = PRODUCT_LOGO_MAP[product]?.name ?? capitalize(product)\n\n\treturn (\n\t\t<div className={classNames(s['product-logo'], s[size])}>\n\t\t\t<FlightIcon\n\t\t\t\tsize={size === 'small' ? 16 : 24}\n\t\t\t\tname={PRODUCT_LOGO_MAP[product]?.icon ?? `${product}-color`}\n\t\t\t\tcolor={PRODUCT_LOGO_MAP[product]?.color}\n\t\t\t/>\n\t\t\t{HCP_PRODUCT_EXCEPTIONS.includes(product) ? (\n\t\t\t\t<div>\n\t\t\t\t\t{/* Always bold \"HCP [Product]\"... */}\n\t\t\t\t\t<Text.DisplayExpressive\n\t\t\t\t\t\tclassName={s[size]}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\tweight=\"semibold\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{productName.split(' ').slice(0, 2).join(' ')}{' '}\n\t\t\t\t\t</Text.DisplayExpressive>\n\t\t\t\t\t{/* ...But display the sub-product in regular weight */}\n\t\t\t\t\t<Text.DisplayExpressive\n\t\t\t\t\t\tclassName={s[size]}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\tweight=\"regular\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{productName.split(' ').slice(2)[0]}\n\t\t\t\t\t</Text.DisplayExpressive>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t// Default to unmodified display of the product name\n\t\t\t\t<Text.DisplayExpressive\n\t\t\t\t\tclassName={s[size]}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tweight=\"semibold\"\n\t\t\t\t>\n\t\t\t\t\t{productName}\n\t\t\t\t</Text.DisplayExpressive>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nProductLogo.displayName = 'ProductLogo'\n\nconst PRODUCT_LOGO_MAP: Record<\n\tstring,\n\t{ icon: string; name: string; color: string }\n> = {\n\thcp: {\n\t\ticon: 'hashicorp-square',\n\t\tcolor: 'var(--mds-color-hcp-brand)',\n\t\tname: 'HashiCorp Cloud Platform',\n\t},\n\thashicorp: {\n\t\ticon: 'hashicorp',\n\t\tcolor: 'var(--mds-color-hashicorp-brand)',\n\t\tname: 'HashiCorp',\n\t},\n\t'vault-radar': {\n\t\ticon: 'vault-square',\n\t\tcolor: 'var(--mds-color-vault-radar-brand)',\n\t\tname: 'HCP Vault Radar',\n\t},\n\t'vault-secrets': {\n\t\ticon: 'vault-square',\n\t\tcolor: 'var(--mds-color-vault-secrets-brand)',\n\t\tname: 'HCP Vault Secrets',\n\t},\n\t'vault-dedicated': {\n\t\ticon: 'vault-fill',\n\t\tcolor: 'var(--mds-color-vault-secrets-brand)',\n\t\tname: 'HCP Vault Dedicated',\n\t},\n\t'vault-enterprise': {\n\t\ticon: 'vault-fill',\n\t\tcolor: 'var(--mds-color-vault-secrets-brand)',\n\t\tname: 'Vault Enterprise',\n\t},\n}\n"],"names":["capitalize","value","DEFAULT_SIZE","DEFAULT_COLOR","DEFAULT_PRODUCT","HCP_PRODUCT_EXCEPTIONS","PRODUCT_LOGO_SIZES","PRODUCT_LOGO_COLORS","PRODUCT_LOGO_PRODUCTS","normalizeProductLogoProps","makeNormalizerSet","makeNormalizer","ProductLogo","size","color","product","productName","PRODUCT_LOGO_MAP","jsxs","classNames","s","jsx","FlightIcon","Text"],"mappings":"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"}

package/patterns/product-logo/product-logo.module.css.js

@@ -0,0 +1,13 @@
+const o = "small__Y58kj", l = "medium__2A1Tv", m = "large__ho0Xp", a = {
+  "product-logo": "product-logo__moaPv",
+  small: o,
+  medium: l,
+  large: m
+};
+export {
+  a as default,
+  m as large,
+  l as medium,
+  o as small
+};
+//# sourceMappingURL=product-logo.module.css.js.map

package/patterns/product-logo/product-logo.module.css.js.map

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

package/patterns/related-content/index.d.ts

@@ -1,4 +1,4 @@
-import type { RelatedContentProps } from './types';
+import { RelatedContentProps } from './types';
 declare const RelatedContent: {
     ({ appearance, headline, description, cards, cta, }: RelatedContentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/patterns/related-content/index.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Card as h } from "../../components/card/index.js";
+import p from "classnames";
+import { useMDSLink as f } from "../../utils/mds-context/index.js";
+import i from "./style.module.css.js";
+import { Text as l } from "../../components/text/index.js";
+const u = ({
+  appearance: a = "transparent",
+  headline: o,
+  description: s,
+  cards: m,
+  cta: r
+}) => {
+  const d = f();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: p(i.root, i[a], {
+        "mds-dark-mode": a === "dark"
+      }),
+      children: /* @__PURE__ */ n("div", { className: i.wrapper, children: [
+        /* @__PURE__ */ n("div", { className: i.textStack, children: [
+          /* @__PURE__ */ t(
+            l.DisplayExpressive,
+            {
+              tag: "h2",
+              color: "primary",
+              className: i.headline,
+              size: "400",
+              children: o
+            }
+          ),
+          s ? /* @__PURE__ */ t(l.Body, { size: "300", color: "faint", tag: "p", children: s }) : null
+        ] }),
+        /* @__PURE__ */ t("div", { className: i.cards, "data-testid": "wpl-cards-container", children: m.map((e, c) => /* @__PURE__ */ t(
+          h,
+          {
+            href: e.link,
+            content: {
+              ...e.thumbnail && {
+                thumbnail: {
+                  alt: e.thumbnail.alt,
+                  src: e.thumbnail.src,
+                  aspectRatio: "16/9"
+                }
+              },
+              eyebrow: e.meta,
+              heading: e.heading,
+              description: e.description,
+              showArrow: !0
+            }
+          },
+          c
+        )) }),
+        r ? /* @__PURE__ */ t("div", { className: i.cta, "data-testid": "wpl-cta-container", children: /* @__PURE__ */ t(d, { href: r.href, children: r.text }) }) : null
+      ] })
+    }
+  );
+};
+u.displayName = "RelatedContent";
+export {
+  u as RelatedContent
+};
+//# sourceMappingURL=index.js.map

package/patterns/related-content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/patterns/related-content/index.tsx"],"sourcesContent":["'use client'\n\nimport { Card } from '../../components/card'\nimport classNames from 'classnames'\nimport type { RelatedContentProps } from './types'\nimport { useMDSLink } from '../../utils/mds-context'\nimport s from './style.module.css'\nimport { Text } from '../../components'\n\nconst RelatedContent = ({\n\tappearance = 'transparent',\n\theadline,\n\tdescription,\n\tcards,\n\tcta,\n}: RelatedContentProps) => {\n\tconst Link = useMDSLink()\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s.root, s[appearance], {\n\t\t\t\t['mds-dark-mode']: appearance === 'dark',\n\t\t\t})}\n\t\t>\n\t\t\t<div className={s.wrapper}>\n\t\t\t\t<div className={s.textStack}>\n\t\t\t\t\t<Text.DisplayExpressive\n\t\t\t\t\t\ttag=\"h2\"\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\tclassName={s.headline}\n\t\t\t\t\t\tsize=\"400\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{headline}\n\t\t\t\t\t</Text.DisplayExpressive>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<Text.Body size=\"300\" color=\"faint\" tag=\"p\">\n\t\t\t\t\t\t\t{description}\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<div className={s.cards} data-testid=\"wpl-cards-container\">\n\t\t\t\t\t{cards.map((card, i) => (\n\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\thref={card.link}\n\t\t\t\t\t\t\tcontent={{\n\t\t\t\t\t\t\t\t...(card.thumbnail && {\n\t\t\t\t\t\t\t\t\tthumbnail: {\n\t\t\t\t\t\t\t\t\t\talt: card.thumbnail.alt,\n\t\t\t\t\t\t\t\t\t\tsrc: card.thumbnail.src,\n\t\t\t\t\t\t\t\t\t\taspectRatio: '16/9',\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\teyebrow: card.meta,\n\t\t\t\t\t\t\t\theading: card.heading,\n\t\t\t\t\t\t\t\tdescription: card.description,\n\t\t\t\t\t\t\t\tshowArrow: true,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{cta ? (\n\t\t\t\t\t<div className={s.cta} data-testid=\"wpl-cta-container\">\n\t\t\t\t\t\t<Link href={cta.href}>{cta.text}</Link>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nRelatedContent.displayName = 'RelatedContent'\n\nexport { RelatedContent }\n"],"names":["RelatedContent","appearance","headline","description","cards","cta","jsx","classNames","s","jsxs","Text","card","i","Card","Link"],"mappings":";;;;;;;AASwB,MACvBA,IAAa,CAAA;AAAA,EACb,YAAAC,IAAA;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACD,KAAAC;AACC,MAAA;AAEA,cACC;AAAA,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAC6C,WAC3CC,EAAkBC,EAAA,MAAAA,EAAAP,CAAe,GAAA;AAAA,QAClC,iBAAAA,MAAA;AAAA,MAED,CAAA;AAAA,MACC,UAAC,gBAAAQ,EAAA,OAAI,EAAA,WAAaD,EAAA,SACjB,UAAA;AAAA,QAAA,gBAAAC,EAAA,OAAA,EAAA,WAAAD,EAAA,WAAA,UAAA;AAAA,UAAM,gBAAAF;AAAA,YAALI,EAAA;AAAA,YAAA;AAAA,cAEA,KAAA;AAAA,cACA,OAAA;AAAA,cACA,WAAKF,EAAA;AAAA,cAEJ;cAAA,UAAAN;AAAA,YACF;AAAA,UACC;AAAA,cAKF,gBAAAI,EAAAI,EAAA,MAAA,EAAA,MAAA,OAAA,OAAA,SAAA,KAAA,KAAA,UAAAP,EAAA,CAAA,IAAA;AAAA,QAAA,EAAA,CAAA;AAAA,QAGG,gBAAAG,EAAA,OAAA,EAAA,WAAAE,EAAA,OAAA,eAAA,uBAAA,UAAAJ,EAAA,IAAA,CAAAO,GAAAC,MAAA,gBAAAN;AAAA,UAAAO;AAAA,UAAA;AAAA,YAGA,QAAS;AAAA,YAAA;cACc,kBACV;AAAA,gBAAA;kBAEV,KAAKF,EAAK,UAAU;AAAA,kBACpB,iBAAa;AAAA,kBAAA,aAAA;AAAA,gBAEf;AAAA,cACA;AAAA,cACA,SAASA,EAAK;AAAA,cACd,SAAAA,EAAa;AAAA,cACb,aAAWA,EAAA;AAAA,cAAA,WAAA;AAAA,YACZ;AAAA,UAdK;AAAA,UAgBNC;AAAA,QAGD;QAIGP,IACL,gBAAAC,EAAA,OAAA,EAAA,WAAAE,EAAA,KAAA,eAAA,qBAAA,UAAA,gBAAAF,EAAAQ,GAAA,EAAA,MAAAT,EAAA,MAAA,UAAAA,EAAA,KAAA,CAAA,EAAA,CAAA,IAAA;AAAA,MAAA,EAAA,CAAA;AAAA,IACD;AAAA,EAEF;AAEA;;"}

package/patterns/related-content/style.module.css.js

@@ -0,0 +1,22 @@
+const t = "root__wY2Kw", a = "transparent__oS97K", r = "wrapper__z6E7B g-grid g-grid-container", c = "textStack__T-LcO", n = "headline__Msi9v", o = "cards__RaaoR", e = "cta__bp4JK", s = "dark__ccH93", _ = {
+  root: t,
+  transparent: a,
+  wrapper: r,
+  textStack: c,
+  headline: n,
+  cards: o,
+  cta: e,
+  dark: s
+};
+export {
+  o as cards,
+  e as cta,
+  s as dark,
+  _ as default,
+  n as headline,
+  t as root,
+  c as textStack,
+  a as transparent,
+  r as wrapper
+};
+//# sourceMappingURL=style.module.css.js.map

package/patterns/related-content/style.module.css.js.map

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

package/patterns/related-content/types.d.ts

@@ -1,4 +1,4 @@
-import type { CardPatternProps } from '../card/types';
+import { CardPatternProps } from '../card/types';
 interface RelatedContentCtaProps {
     href: string;
     text: string;