@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/patterns/card/style.module.css

@@ -0,0 +1,119 @@
+.card {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+
+	&:hover {
+		& .cta svg {
+			transform: translateX(2px);
+		}
+	}
+
+	&.dark {
+		& .thumbnail {
+			border-bottom: 0;
+		}
+	}
+}
+
+.link {
+	position: absolute;
+	inset: 0;
+	outline: none;
+}
+
+.thumbnail {
+	& .image {
+		position: relative;
+		display: grid;
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+
+		& img {
+			object-fit: cover;
+			object-position: center;
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+.personThumbnail {
+	composes: thumbnail;
+	& .image {
+		aspect-ratio: 4 / 3;
+	}
+}
+
+.logoThumbnail {
+	composes: thumbnail;
+	padding: var(--mds-spacing-07);
+
+	& .image {
+		& img {
+			aspect-ratio: 16 / 9;
+			object-fit: contain;
+		}
+	}
+}
+
+.meta {
+	color: var(--mds-color-foreground-faint);
+	text-transform: uppercase;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding: 0;
+}
+
+.metaSeparator {
+	--padding-x: 12px;
+
+	padding-left: var(--padding-x);
+	padding-right: var(--padding-x);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	row-gap: 16px;
+	padding: 20px 20px 0 20px;
+}
+
+.heading {
+	font-weight: var(--mds-typography-font-weight-bold);
+	color: var(--mds-color-foreground-strong);
+	margin: 0;
+}
+
+.description {
+	color: var(--mds-color-foreground-primary);
+	margin: 0;
+}
+
+.productBadges {
+	margin-top: auto;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.cta {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	color: var(--mds-color-foreground-primary);
+	padding: 8px 20px 20px 20px;
+	margin-top: auto;
+	transition: color 0.25s ease;
+
+	& svg {
+		transition: transform 0.25s ease;
+	}
+
+	&:empty {
+		padding-top: 0;
+	}
+}

package/dist/patterns/card/thumbnails/index.d.ts

@@ -0,0 +1,14 @@
+import type { ThumbnailProps } from '../types';
+export declare const Thumbnail: {
+    ({ src, alt }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const PersonThumbnail: {
+    ({ src, alt }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const LogoThumbnail: {
+    ({ src, alt }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/card/thumbnails/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/patterns/card/thumbnails/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C,eAAO,MAAM,SAAS;mBAAkB,cAAc;;CAUrD,CAAA;AAID,eAAO,MAAM,eAAe;mBAAkB,cAAc;;CAU3D,CAAA;AAID,eAAO,MAAM,aAAa;mBAAkB,cAAc;;CAUzD,CAAA"}

package/dist/patterns/card/types.d.ts

@@ -0,0 +1,42 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import type { ProductBadgeProps } from '../../patterns/product-badge';
+import type { NewsroomCardProps } from './newsroom-card';
+import type { PersonCardProps } from './person-card';
+import type { ResourceCardProps } from './resource-card';
+import type { UnifiedCardProps } from './unified-card';
+interface BaseCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-label'> {
+    withArrow?: boolean;
+    link: string;
+    clickHandler?: () => void;
+    isExternal?: boolean;
+}
+interface CardPrimitiveProps extends BaseCardProps {
+    children: ReactNode;
+    'aria-label': string;
+}
+interface ThumbnailProps {
+    src: string;
+    alt: string;
+}
+interface MetaProps {
+    items: Array<string | ReactNode>;
+}
+type ContentProps = PropsWithChildren;
+interface HeadingProps {
+    as?: 'h2' | 'h3' | 'h4';
+    children: string;
+}
+interface ProductBadgesProps extends PropsWithChildren {
+    badges: Array<ProductBadgeProps['productName']>;
+}
+type DescriptionProps = PropsWithChildren;
+interface CardPatternProps extends BaseCardProps {
+    heading: string;
+    thumbnail?: ThumbnailProps;
+    meta?: MetaProps['items'];
+    description?: DescriptionProps['children'];
+    productBadges?: ProductBadgesProps['badges'];
+    'aria-label'?: string;
+}
+export type { CardPrimitiveProps, ThumbnailProps, MetaProps, ContentProps, HeadingProps, ProductBadgesProps, DescriptionProps, CardPatternProps, NewsroomCardProps, PersonCardProps, ResourceCardProps, UnifiedCardProps, };
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,UAAU,aAAc,SAAQ,IAAI,CACnC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CACZ;IACA,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,UAAU,kBAAmB,SAAQ,aAAa;IACjD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,cAAc;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACX;AAED,UAAU,SAAS;IAClB,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CAChC;AAED,KAAK,YAAY,GAAG,iBAAiB,CAAA;AAErC,UAAU,YAAY;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;CAChB;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACrD,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAA;CAC/C;AAED,KAAK,gBAAgB,GAAG,iBAAiB,CAAA;AAEzC,UAAU,gBAAiB,SAAQ,aAAa;IAC/C,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IACzB,WAAW,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IAC1C,aAAa,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,YAAY,EACX,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GAChB,CAAA"}

package/dist/patterns/card/unified-card/index.d.ts

@@ -0,0 +1,11 @@
+import type { CardPatternProps } from '../types';
+interface UnifiedCardProps extends CardPatternProps {
+    badges?: (string | string[])[];
+}
+declare const UnifiedCard: {
+    ({ heading, meta, link, productBadges, badges, thumbnail, withArrow, isExternal, className, "aria-label": ariaLabel, }: UnifiedCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { UnifiedCardProps };
+export { UnifiedCard };
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/card/unified-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/patterns/card/unified-card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhD,UAAU,gBAAiB,SAAQ,gBAAgB;IAClD,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAA;CAC9B;AAED,QAAA,MAAM,WAAW;4HAWd,gBAAgB;;CA+BlB,CAAA;AAID,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/patterns/card/unified-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/unified-card/index.tsx"],"sourcesContent":["import { Badge } from '../../../components/badge'\nimport { CardPrimitives } from '../primitives'\nimport type { CardPatternProps } from '../types'\n\ninterface UnifiedCardProps extends CardPatternProps {\n\tbadges?: (string | string[])[]\n}\n\nconst UnifiedCard = ({\n\theading,\n\tmeta,\n\tlink,\n\tproductBadges,\n\tbadges,\n\tthumbnail,\n\twithArrow = false,\n\tisExternal = false,\n\tclassName,\n\t'aria-label': ariaLabel,\n}: UnifiedCardProps) => {\n\treturn (\n\t\t<CardPrimitives.Root\n\t\t\tlink={link}\n\t\t\twithArrow={withArrow}\n\t\t\tisExternal={isExternal}\n\t\t\tclassName={className}\n\t\t\taria-label={ariaLabel || heading}\n\t\t>\n\t\t\t{thumbnail ? <CardPrimitives.Thumbnail {...thumbnail} /> : null}\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t{meta && meta.length > 0 ? <CardPrimitives.Meta items={meta} /> : null}\n\t\t\t\t<CardPrimitives.Heading>{heading}</CardPrimitives.Heading>\n\t\t\t\t{productBadges && productBadges?.length > 0 ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges}>\n\t\t\t\t\t\t{badges && badges.length > 0\n\t\t\t\t\t\t\t? badges.map((badge, stableIdx) => {\n\t\t\t\t\t\t\t\t\tif (Array.isArray(badge)) {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Badge key={stableIdx} icon={badge[0]} text={badge[1]} />\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\treturn <Badge key={stableIdx} text={badge} />\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t: null}\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\nUnifiedCard.displayName = 'UnifiedCard'\n\nexport type { UnifiedCardProps }\nexport { UnifiedCard }\n"],"names":["UnifiedCard","heading","meta","link","productBadges","badges","thumbnail","withArrow","isExternal","className","ariaLabel","jsxs","CardPrimitives","jsx","badge","stableIdx","Badge"],"mappings":";;;AAQA,MAAMA,IAAc,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,cAAcC;AACf,MAEE,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACA,MAAAT;AAAA,IACA,WAAAI;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAYC,KAAaT;AAAA,IAExB,UAAA;AAAA,MAAAK,sBAAaM,EAAe,WAAf,EAA0B,GAAGN,GAAW,IAAK;AAAA,MAC3D,gBAAAK,EAACC,EAAe,SAAf,EACC,UAAA;AAAA,QAAAV,KAAQA,EAAK,SAAS,IAAI,gBAAAW,EAACD,EAAe,MAAf,EAAoB,OAAOV,EAAA,CAAM,IAAK;AAAA,QAClE,gBAAAW,EAACD,EAAe,SAAf,EAAwB,UAAAX,EAAA,CAAQ;AAAA,QAChCG,KAAiBA,GAAe,SAAS,IACzC,gBAAAS,EAACD,EAAe,eAAf,EAA6B,QAAQR,GACpC,UAAAC,KAAUA,EAAO,SAAS,IACxBA,EAAO,IAAI,CAACS,GAAOC,MACf,MAAM,QAAQD,CAAK,IAErB,gBAAAD,EAACG,GAAA,EAAsB,MAAMF,EAAM,CAAC,GAAG,MAAMA,EAAM,CAAC,EAAA,GAAxCC,CAA2C,IAIlD,gBAAAF,EAACG,GAAA,EAAsB,MAAMF,EAAA,GAAjBC,CAAwB,CAC3C,IACA,KAAA,CACJ,IACG;AAAA,MAAA,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAAA;AAKHf,EAAY,cAAc;"}

package/dist/patterns/copy-button/index.d.ts

@@ -0,0 +1,20 @@
+import { type ClipboardHandlerArgs } from '../../utils/clipboard';
+export interface CopyButtonProps {
+    size?: 'small' | 'medium';
+    isIconOnly?: boolean;
+    isFullWidth?: boolean;
+    text: string;
+    textToCopy?: string;
+    getTextFn?: () => string;
+    targetToCopy?: string | Element;
+    onSuccess?: (args: ClipboardHandlerArgs) => void;
+    onError?: (args: ClipboardHandlerArgs) => void;
+    className?: string;
+    defaultIcon?: string;
+}
+declare const CopyButton: {
+    ({ size, isIconOnly, isFullWidth, text, textToCopy, getTextFn, targetToCopy, onSuccess, onError, className, defaultIcon, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CopyButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/copy-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/copy-button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,oBAAoB,EACzB,MAAM,uBAAuB,CAAA;AAK9B,MAAM,WAAW,eAAe;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAOD,QAAA,MAAM,UAAU;wIAab,eAAe;;CAyDjB,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/patterns/copy-button/index.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as E } from "react/jsx-runtime";
+import { useState as x, useRef as O } from "react";
+import { onClipboardClickHandler as R } from "../../utils/clipboard.js";
+import U from "classnames";
+import { Button as A } from "../../components/button/index.js";
+import i from "./style.module.css.js";
+const B = "clipboard-copy", D = "clipboard-checked", I = "clipboard-x", a = "idle", g = ({
+  size: u = "medium",
+  isIconOnly: l = !1,
+  isFullWidth: m = !1,
+  text: p,
+  textToCopy: d,
+  getTextFn: f,
+  targetToCopy: C,
+  onSuccess: r,
+  onError: c,
+  className: S,
+  defaultIcon: y,
+  ...N
+}) => {
+  const [t, o] = x(a), s = O(null), T = t === "idle" ? y || B : t === "success" ? D : I, n = () => {
+    s.current && clearTimeout(s.current), s.current = setTimeout(() => {
+      o(a);
+    }, 1500);
+  }, _ = (e) => {
+    o("success"), n(), r && r(e);
+  }, b = (e) => {
+    o("error"), n(), c && c(e);
+  };
+  return /* @__PURE__ */ E(
+    A,
+    {
+      className: U(i["copy-button"], i[t], S),
+      size: u,
+      isFullWidth: m,
+      text: p,
+      icon: T,
+      isIconOnly: l,
+      color: "secondary",
+      iconPosition: "trailing",
+      ...R({
+        text: d,
+        getTextFn: f,
+        target: C,
+        onSuccess: _,
+        onError: b
+      }),
+      ...N
+    }
+  );
+};
+g.displayName = "CopyButton";
+export {
+  g as CopyButton
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/copy-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/patterns/copy-button/index.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport {\n\tonClipboardClickHandler,\n\ttype ClipboardHandlerArgs,\n} from '../../utils/clipboard'\nimport classNames from 'classnames'\nimport { Button } from '../../components/button'\nimport s from './style.module.css'\n\nexport interface CopyButtonProps {\n\tsize?: 'small' | 'medium'\n\tisIconOnly?: boolean\n\tisFullWidth?: boolean\n\ttext: string\n\ttextToCopy?: string\n\tgetTextFn?: () => string\n\ttargetToCopy?: string | Element\n\tonSuccess?: (args: ClipboardHandlerArgs) => void\n\tonError?: (args: ClipboardHandlerArgs) => void\n\tclassName?: string\n\tdefaultIcon?: string\n}\n\nconst DEFAULT_ICON = 'clipboard-copy'\nconst SUCCESS_ICON = 'clipboard-checked'\nconst ERROR_ICON = 'clipboard-x'\nconst DEFAULT_STATUS = 'idle'\n\nconst CopyButton = ({\n\tsize = 'medium',\n\tisIconOnly = false,\n\tisFullWidth = false,\n\ttext,\n\ttextToCopy,\n\tgetTextFn,\n\ttargetToCopy,\n\tonSuccess,\n\tonError,\n\tclassName,\n\tdefaultIcon,\n\t...rest\n}: CopyButtonProps) => {\n\tconst [status, setStatus] = useState(DEFAULT_STATUS)\n\tconst timer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\tconst icon =\n\t\tstatus === 'idle'\n\t\t\t? defaultIcon || DEFAULT_ICON\n\t\t\t: status === 'success'\n\t\t\t\t? SUCCESS_ICON\n\t\t\t\t: ERROR_ICON\n\n\tconst resetStatusDelayed = () => {\n\t\tif (timer.current) {\n\t\t\tclearTimeout(timer.current)\n\t\t}\n\t\ttimer.current = setTimeout(() => {\n\t\t\tsetStatus(DEFAULT_STATUS)\n\t\t}, 1500)\n\t}\n\n\tconst _onSuccess = (args: ClipboardHandlerArgs) => {\n\t\tsetStatus('success')\n\t\tresetStatusDelayed()\n\n\t\tif (onSuccess) {\n\t\t\tonSuccess(args)\n\t\t}\n\t}\n\n\tconst _onError = (args: ClipboardHandlerArgs) => {\n\t\tsetStatus('error')\n\t\tresetStatusDelayed()\n\n\t\tif (onError) {\n\t\t\tonError(args)\n\t\t}\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tclassName={classNames(s['copy-button'], s[status], className)}\n\t\t\tsize={size}\n\t\t\tisFullWidth={isFullWidth}\n\t\t\ttext={text}\n\t\t\ticon={icon}\n\t\t\tisIconOnly={isIconOnly}\n\t\t\tcolor=\"secondary\"\n\t\t\ticonPosition=\"trailing\"\n\t\t\t{...onClipboardClickHandler({\n\t\t\t\ttext: textToCopy,\n\t\t\t\tgetTextFn: getTextFn,\n\t\t\t\ttarget: targetToCopy,\n\t\t\t\tonSuccess: _onSuccess,\n\t\t\t\tonError: _onError,\n\t\t\t})}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\nCopyButton.displayName = 'CopyButton'\n\nexport { CopyButton }\n"],"names":["DEFAULT_ICON","SUCCESS_ICON","ERROR_ICON","DEFAULT_STATUS","CopyButton","size","isIconOnly","isFullWidth","text","textToCopy","getTextFn","targetToCopy","onSuccess","onError","className","defaultIcon","rest","status","setStatus","useState","timer","useRef","icon","resetStatusDelayed","_onSuccess","args","_onError","jsx","Button","classNames","s","onClipboardClickHandler"],"mappings":";;;;;;;AA0BA,MAAMA,IAAe,kBACfC,IAAa,qBACbC,IAAA,eAEAC,IAAc,QACnBC,IAAO,CAAA;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,YAAAC;EACA,aAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,CAAAC,GAAQC,KAAiDC,EAAAhB,CAAA,GACzDiB,IACLC,EAAA,OAMKC,IAAAL,eAA2BF,KAAAf,IAAAiB,MAAA,YAAAhB,IAAAC,GAC5BqB,IAAe,MAAA;AAClB,IAAAH,EAAA,WACD,aAAAA,EAAA,OAAA,GAECA,EAAA,UAAU,WAAc,MAAA;QAClBjB,CAAA;AAAA,IACR,GAAA,IAAA;AAAA,EAEA,GACCqB,IAAU,CAAAC,MAAS;AACnB,IAAAP,WAAA,GAEAK,EAAe,GACdX,KACDA,EAAAa,CAAA;AAAA,EAGD,GACCC,IAAU,CAAAD,MAAO;AACjB,IAAAP,YAEAK,EAAa,GACZV,KACDA,EAAAY,CAAA;AAAA,EAGD;AACC,SAAC,gBAAAE;AAAA,IAAAC;AAAA,IAAA;AAAA,MAEA,WAAAC,EAAAC,EAAA,aAAA,GAAAA,EAAAb,CAAA,GAAAH,CAAA;AAAA,MACA,MAAAT;AAAA,MACA,aAAAE;AAAA,MACA,MAAAC;AAAA,MACA,MAAAc;AAAA,MACA,YAAAhB;AAAA,MACA,OAAA;AAAA,MACC;MAA2B,GAC3ByB,EAAM;AAAA,QACN,MAAAtB;AAAA,QACA,WAAAC;AAAA,QACA,QAAAC;AAAA,QACA,WAASa;AAAA,QACT,SAAAE;AAAA,MACA,CAAA;AAAA,MAAG,GAAAV;AAAA,IACL;AAAA,EAEF;AAEA;;"}

package/dist/patterns/index.d.ts

@@ -0,0 +1,16 @@
+export { NewsroomCard, PersonCard, PromoCard, ResourceCard, UnifiedCard, } from './card';
+export type { NewsroomCardProps, PersonCardProps, PromoCardProps, ResourceCardProps, UnifiedCardProps, } from './card';
+export type { CardPatternProps } from './card/types';
+export { PartnerCard } from './card/partner-card';
+export { CardPrimitives } from './card/primitives';
+export type { CopyButtonProps } from './copy-button';
+export { CopyButton } from './copy-button';
+export type { LayoutAppearance, LayoutBackground, LayoutPadding, LayoutProps, } from './layout';
+export { Layout, LAYOUT_APPEARANCES, LAYOUT_BACKGROUNDS, LAYOUT_PADDING, normalizeLayoutProps, } from './layout';
+export type { ProductBadgeProps } from './product-badge';
+export { ProductBadge } from './product-badge';
+export type { ProductLogoColor, ProductLogoProduct, ProductLogoSize, ProductLogoProps, } from './product-logo';
+export { ProductLogo, PRODUCT_LOGO_COLORS, PRODUCT_LOGO_PRODUCTS, PRODUCT_LOGO_SIZES, normalizeProductLogoProps, } from './product-logo';
+export type { RelatedContentProps } from './related-content/types';
+export { RelatedContent } from './related-content';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AACA,OAAO,EACN,YAAY,EACZ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,GACX,MAAM,QAAQ,CAAA;AACf,YAAY,EACX,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,QAAQ,CAAA;AACf,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,YAAY,EACX,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,WAAW,GACX,MAAM,UAAU,CAAA;AACjB,OAAO,EACN,MAAM,EACN,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACpB,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,YAAY,EACX,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GAChB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACN,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GACzB,MAAM,gBAAgB,CAAA;AAEvB,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/patterns/layout/index.d.ts

@@ -0,0 +1,70 @@
+import type { 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"];
+export type LayoutAppearance = (typeof LAYOUT_APPEARANCES)[number];
+export type LayoutBackground = (typeof LAYOUT_BACKGROUNDS)[number];
+export type LayoutPadding = (typeof LAYOUT_PADDING)[number];
+export declare const normalizeLayoutProps: ((input: {
+    appearance?: unknown;
+    background?: unknown;
+    paddingTop?: unknown;
+    paddingBottom?: unknown;
+}, opts?: {
+    all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+    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;
+    } | undefined;
+} | undefined) => {
+    appearance: "dark" | "light";
+    background: "primary" | "faint" | "transparent";
+    paddingTop: "small" | "none" | "medium" | "large";
+    paddingBottom: "small" | "none" | "medium" | "large";
+}) & {
+    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">;
+        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;
+        } | undefined;
+    } | undefined) => {
+        appearance: "dark" | "light";
+        background: "primary" | "faint" | "transparent";
+        paddingTop: "small" | "none" | "medium" | "large";
+        paddingBottom: "small" | "none" | "medium" | "large";
+    };
+};
+export interface LayoutProps extends PropsWithChildren {
+    className?: string;
+    /**
+     * The appearance of the layout
+     */
+    appearance?: LayoutAppearance;
+    /**
+     * The color token used for the background. The color value changes based on `appearance`
+     */
+    background?: LayoutBackground;
+    /**
+     * The space between the layout component's content and its top border
+     */
+    paddingTop?: LayoutPadding;
+    /**
+     * The space between the layout component's content and its bottom border
+     */
+    paddingBottom?: LayoutPadding;
+}
+export declare const Layout: {
+    ({ className, children, appearance, background, paddingBottom, paddingTop, }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAU9C,eAAO,MAAM,kBAAkB,4BAA6B,CAAA;AAC5D,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,eAAO,MAAM,cAAc,+CAAgD,CAAA;AAE3E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAClE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa/B,CAAA;AAEF,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAA;CAC7B;AAED,eAAO,MAAM,MAAM;kFAOhB,WAAW;;CAeb,CAAA"}

package/dist/patterns/layout/layout.module.css

@@ -0,0 +1,66 @@
+.layout {
+	--none: 0;
+	--small: var(--mds-spacing-08);
+	--medium: var(--mds-spacing-10);
+	--large: var(--mds-spacing-12);
+
+	color: var(--mds-color-foreground-primary);
+
+	@media (--medium-up) {
+		--small: var(--mds-spacing-10);
+		--medium: var(--mds-spacing-12);
+		--large: var(--mds-spacing-14);
+	}
+
+	@media (--large) {
+		--small: var(--mds-spacing-12);
+		--medium: var(--mds-spacing-14);
+		--large: var(--mds-spacing-16);
+	}
+
+	/* Background */
+
+	background-color: var(--background-color-primary-override, var(--mds-color-surface-primary));
+
+	&.faint {
+		background-color: var(--background-color-faint-override, var(--mds-color-surface-faint));
+	}
+
+	&.transparent {
+		background-color: transparent;
+	}
+
+	/* Padding */
+
+	&.padding-top-none {
+		padding-top: var(--none);
+	}
+
+	&.padding-top-small {
+		padding-top: var(--small);
+	}
+
+	&.padding-top-medium {
+		padding-top: var(--medium);
+	}
+
+	&.padding-top-large {
+		padding-top: var(--large);
+	}
+
+	&.padding-bottom-none {
+		padding-bottom: var(--none);
+	}
+
+	&.padding-bottom-small {
+		padding-bottom: var(--small);
+	}
+
+	&.padding-bottom-medium {
+		padding-bottom: var(--medium);
+	}
+
+	&.padding-bottom-large {
+		padding-bottom: var(--large);
+	}
+}

package/dist/patterns/product-badge/index.d.ts

@@ -0,0 +1,12 @@
+type Products = 'hashicorp' | 'boundary' | 'consul' | 'nomad' | 'packer' | 'terraform' | 'vault' | 'vagrant' | 'waypoint';
+interface ProductBadgeProps {
+    productName: Products;
+    hasDot?: boolean;
+}
+declare const ProductBadge: {
+    ({ productName, hasDot }: ProductBadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ProductBadgeProps };
+export { ProductBadge };
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/product-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/product-badge/index.tsx"],"names":[],"mappings":"AAGA,KAAK,QAAQ,GACV,WAAW,GACX,UAAU,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,SAAS,GACT,UAAU,CAAA;AAEb,UAAU,iBAAiB;IAC1B,WAAW,EAAE,QAAQ,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,YAAY;8BAA6B,iBAAiB;;CAgB/D,CAAA;AAID,YAAY,EAAE,iBAAiB,EAAE,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,3 @@
+.badge {
+	text-transform: capitalize;
+}

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

@@ -0,0 +1,49 @@
+export declare const PRODUCT_LOGO_SIZES: readonly ["small", "medium", "large"];
+export declare const PRODUCT_LOGO_COLORS: readonly ["primary", "strong"];
+export declare const PRODUCT_LOGO_PRODUCTS: readonly ["hcp", "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vault-dedicated", "vault-enterprise", "vault-radar", "vault-secrets", "vagrant", "waypoint"];
+export type ProductLogoSize = (typeof PRODUCT_LOGO_SIZES)[number];
+export type ProductLogoColor = (typeof PRODUCT_LOGO_COLORS)[number];
+export type ProductLogoProduct = (typeof PRODUCT_LOGO_PRODUCTS)[number];
+export declare const normalizeProductLogoProps: ((input: {
+    size?: unknown;
+    color?: unknown;
+    product?: unknown;
+}, opts?: {
+    all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
+    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;
+    } | 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";
+}) & {
+    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">;
+        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;
+        } | 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";
+    };
+};
+export interface ProductLogoProps {
+    size?: ProductLogoSize;
+    color?: ProductLogoColor;
+    product: ProductLogoProduct;
+}
+export declare const ProductLogo: {
+    ({ size, color, product, }: ProductLogoProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/product-logo/index.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,kBAAkB,uCAAwC,CAAA;AACvE,eAAO,MAAM,mBAAmB,gCAAiC,CAAA;AACjE,eAAO,MAAM,qBAAqB,4LAexB,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUpC,CAAA;AAEF,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,kBAAkB,CAAA;CAC3B;AAED,eAAO,MAAM,WAAW;gCAIrB,gBAAgB;;CAyClB,CAAA"}

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

@@ -0,0 +1,7 @@
+import type { RelatedContentProps } from './types';
+declare const RelatedContent: {
+    ({ appearance, headline, description, cards, cta, }: RelatedContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RelatedContent };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/related-content/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAKlD,QAAA,MAAM,cAAc;yDAMjB,mBAAmB;;CAuDrB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}

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

@@ -0,0 +1,74 @@
+.root {
+	width: 100%;
+	background-color: var(--mds-color-surface-primary);
+
+	&.transparent {
+		background-color: transparent;
+	}
+}
+
+.wrapper {
+	composes: g-grid from global;
+	composes: g-grid-container from global;
+	padding-top: var(--mds-spacing-12);
+	padding-bottom: var(--mds-spacing-12);
+
+	@media (--large) {
+		padding-top: 88px;
+		padding-bottom: 88px;
+	}
+}
+
+.textStack {
+	grid-column: 1 / -1;
+	margin-bottom: var(--mds-spacing-07);
+
+	@media (--medium) {
+		grid-column: 1 / span 7;
+		margin-bottom: var(--mds-spacing-08);
+	}
+
+	@media (--large) {
+		grid-column: 1 / span 6;
+		margin-bottom: var(--mds-spacing-08);
+	}
+}
+
+.headline {
+	margin: 0 0 var(--mds-spacing-05) 0;
+}
+
+.cards {
+	--columns: 1;
+
+	grid-column: 1 / -1;
+	display: grid;
+	gap: var(--mds-spacing-08);
+	grid-template-columns: repeat(var(--columns), 1fr);
+	margin-bottom: var(--mds-spacing-08);
+
+	@media (--medium) {
+		--columns: 2;
+	}
+	@media (--large) {
+		--columns: 4;
+	}
+}
+
+.cta {
+	grid-column: 1 / -1;
+
+	& a {
+		font-weight: 500;
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: 0.0125em;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+		display: inline;
+
+		@nest .dark & {
+			color: var(--mds-color-foreground-faint);
+		}
+	}
+}

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

@@ -0,0 +1,15 @@
+import type { CardPatternProps } from '../card/types';
+interface RelatedContentCtaProps {
+    href: string;
+    text: string;
+}
+type RelatedContentCardProps = Omit<CardPatternProps, 'appearance'>;
+export interface RelatedContentProps {
+    appearance?: 'light' | 'dark' | 'transparent';
+    headline: string;
+    description?: string;
+    cards: Array<RelatedContentCardProps>;
+    cta?: RelatedContentCtaProps;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/related-content/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,UAAU,sBAAsB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACZ;AAED,KAAK,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAA;AAEnE,MAAM,WAAW,mBAAmB;IACnC,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAA;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,sBAAsB,CAAA;CAC5B"}