@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/card/index.d.ts

@@ -0,0 +1,5 @@
+import type { CardContentProps, CardProps } from './types';
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardContent: ({ badges, description, eyebrow, heading, thumbnail, subheading, cta, children, showArrow, }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Card };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAA;AAUxE,QAAA,MAAM,IAAI,sGAyET,CAAA;AAID,eAAO,MAAM,WAAW,GAAI,6FAUzB,gBAAgB,4CA4BlB,CAAA;AAsHD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, type PropsWithChildren } from 'react'\nimport type { CardContentProps, CardProps, CardCtaProps } from './types'\nimport { CardThumbnail } from './card-thumbnail'\nimport { useMDSLink } from '../../utils/mds-context'\nimport { Text } from '../text'\nimport classNames from 'classnames'\nimport { Badge } from '../badge'\nimport { StandaloneLink } from '../standalone-link'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.css'\n\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontent,\n\t\t\tctaLabel,\n\t\t\thref,\n\t\t\tstandaloneLink,\n\t\t\tisExternal,\n\t\t\tonClickCapture,\n\t\t\t'aria-label': ariaLabel,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Link = useMDSLink()\n\n\t\tconst isCardLink = href && !ctaLabel\n\n\t\tconst linkProps = isExternal\n\t\t\t? { target: '_blank', rel: 'noopener noreferrer' }\n\t\t\t: {}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.card,\n\t\t\t\t\t{ [s.interactive]: isCardLink },\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isCardLink && (\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tclassName={s.link}\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t{...linkProps}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<CardContent\n\t\t\t\t\t\tbadges={content.badges}\n\t\t\t\t\t\tdescription={content.description}\n\t\t\t\t\t\teyebrow={content.eyebrow}\n\t\t\t\t\t\theading={content.heading}\n\t\t\t\t\t\tsubheading={content.subheading}\n\t\t\t\t\t\tthumbnail={content.thumbnail}\n\t\t\t\t\t\tshowArrow={content.showArrow && !!isCardLink}\n\t\t\t\t\t\tcta={{\n\t\t\t\t\t\t\tctaLabel,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tstandaloneLink,\n\t\t\t\t\t\t\tonClickCapture,\n\t\t\t\t\t\t\tisExternal,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{children && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={ctaLabel}\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tstandaloneLink={standaloneLink}\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\tisExternal={isExternal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t},\n)\n\nCard.displayName = 'Card'\n\nexport const CardContent = ({\n\tbadges,\n\tdescription,\n\teyebrow,\n\theading,\n\tthumbnail,\n\tsubheading,\n\tcta,\n\tchildren,\n\tshowArrow,\n}: CardContentProps) => {\n\treturn (\n\t\t<div className={classNames(s.content, { [s['has-thumbnail']]: thumbnail })}>\n\t\t\t{thumbnail && <CardThumbnail {...thumbnail} />}\n\t\t\t<div className={s.contentLockup}>\n\t\t\t\t<CardEyebrow>{eyebrow}</CardEyebrow>\n\t\t\t\t<CardHeading>{heading}</CardHeading>\n\t\t\t\t<CardSubheading>{subheading}</CardSubheading>\n\t\t\t\t<CardDescription>{description}</CardDescription>\n\t\t\t\t<Badges badges={badges} />\n\t\t\t\t{cta && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={cta.ctaLabel}\n\t\t\t\t\t\thref={cta.href}\n\t\t\t\t\t\tstandaloneLink={cta.standaloneLink}\n\t\t\t\t\t\tisExternal={cta.isExternal}\n\t\t\t\t\t\tonClickCapture={cta.onClickCapture}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showArrow ? (\n\t\t\t\t\t<div className={s.arrow}>\n\t\t\t\t\t\t<FlightIcon name=\"arrow-right\" />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst CardCta = ({\n\thref,\n\tctaLabel,\n\tstandaloneLink,\n\tisExternal,\n\tonClickCapture,\n}: CardCtaProps) => {\n\tconst isCardLink = href && !ctaLabel\n\n\tif (standaloneLink) {\n\t\tconst standaloneLinkProps = {\n\t\t\t...standaloneLink,\n\t\t\ticon: standaloneLink.icon || 'chevron-right',\n\t\t\ticonPosition: standaloneLink.iconPosition || 'trailing',\n\t\t}\n\n\t\treturn <StandaloneLink className={s.cta} {...standaloneLinkProps} />\n\t}\n\n\tif (href && !isCardLink && ctaLabel) {\n\t\treturn (\n\t\t\t<StandaloneLink\n\t\t\t\tclassName={s.cta}\n\t\t\t\ttext={ctaLabel}\n\t\t\t\thref={href}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t\ticonPosition=\"trailing\"\n\t\t\t\tcolor=\"secondary\"\n\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\tisHrefExternal={isExternal}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nconst CardEyebrow = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (Array.isArray(children)) {\n\t\treturn <CardEyebrowList items={Array.from(children)} />\n\t}\n\n\treturn <CardEyebrowText>{children}</CardEyebrowText>\n}\n\nconst CardEyebrowList = ({ items }: { items: string[] }) => (\n\t<ul className={s.meta}>\n\t\t{items.map((item, idx) => (\n\t\t\t<li key={item}>\n\t\t\t\t<CardEyebrowText>{item}</CardEyebrowText>\n\t\t\t\t{idx < items.length - 1 ? (\n\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t|\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</li>\n\t\t))}\n\t</ul>\n)\n\nconst CardEyebrowText = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Label color=\"faint\" weight=\"medium\">\n\t\t\t{children}\n\t\t</Text.Label>\n\t) : null\n\nconst CardHeading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.DisplayExpressive\n\t\t\ttag=\"span\"\n\t\t\tsize=\"200\"\n\t\t\tweight=\"semibold\"\n\t\t\tcolor=\"strong\"\n\t\t>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t) : null\n\nconst CardSubheading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Body tag=\"span\" size=\"200\" className={s.subheading} color=\"primary\">\n\t\t\t{children}\n\t\t</Text.Body>\n\t) : null\n\nconst CardDescription = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Text.Body tag=\"span\" size=\"200\" color=\"primary\">\n\t\t\t\t{children}\n\t\t\t</Text.Body>\n\t\t)\n\t}\n\n\treturn <>{children}</>\n}\n\nconst Badges = ({ badges }: { badges: CardContentProps['badges'] }) =>\n\tbadges && badges.length > 0 ? (\n\t\t<div className={s.badges}>\n\t\t\t{badges.map((badge) => (\n\t\t\t\t<Badge key={badge.text} {...badge} />\n\t\t\t))}\n\t\t</div>\n\t) : null\n\nCard.displayName = 'Card'\nexport { Card }\n"],"names":["Card","forwardRef","children","className","content","ctaLabel","href","standaloneLink","isExternal","onClickCapture","ariaLabel","ref","Link","useMDSLink","isCardLink","jsxs","classNames","s","jsx","linkProps","CardContent","CardCta","badges","description","eyebrow","heading","thumbnail","subheading","cta","showArrow","CardThumbnail","CardEyebrow","CardHeading","CardSubheading","CardDescription","FlightIcon","standaloneLinkProps","StandaloneLink","CardEyebrowList","CardEyebrowText","items","item","idx","Text","Fragment","Badges","badge","Badge"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import type { BadgeProps } from '../badge';
+import type { ReactNode } from 'react';
+import type { StandaloneLinkProps } from '../standalone-link';
+interface CardPropsBase {
+    className?: string;
+    ctaLabel?: string;
+    href?: string;
+    standaloneLink?: StandaloneLinkProps;
+    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement>;
+    isExternal?: boolean;
+    'aria-label'?: string;
+}
+export type CardProps = (CardPropsBase & {
+    content: CardContentProps;
+    children?: never;
+}) | (CardPropsBase & {
+    content?: never;
+    children: React.ReactNode;
+});
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type NonZeroDigit = Exclude<Digit, '0'>;
+type CardThumbnailAspectRatio = `${NonZeroDigit}/${NonZeroDigit}` | `${NonZeroDigit}/${NonZeroDigit}${Digit}` | `${NonZeroDigit}${Digit}/${NonZeroDigit}` | `${NonZeroDigit}${Digit}/${NonZeroDigit}${Digit}`;
+export interface CardThumbnailProps {
+    src: string;
+    alt: string;
+    /**
+     * The aspect ratio of the image, specified as a string in the format `width/height`.
+     * This follows the same format as the CSS `aspect-ratio` property.
+     *
+     * @example "16/9" - This would represent an aspect ratio of 16:9.
+     * @example "4/3" - This would represent an aspect ratio of 4:3.
+     */
+    aspectRatio: CardThumbnailAspectRatio;
+}
+export interface CardContentProps {
+    badges?: BadgeProps[];
+    cta?: CardCtaProps;
+    eyebrow?: ReactNode;
+    heading?: string;
+    subheading?: string;
+    description?: React.ReactNode;
+    thumbnail?: CardThumbnailProps;
+    showArrow?: boolean;
+    children?: React.ReactNode;
+}
+export interface CardCtaProps {
+    href?: string;
+    ctaLabel?: string;
+    standaloneLink?: StandaloneLinkProps;
+    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement>;
+    isExternal?: boolean;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,UAAU,aAAa;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,MAAM,SAAS,GAClB,CAAC,aAAa,GAAG;IAAE,OAAO,EAAE,gBAAgB,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACjE,CAAC,aAAa,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAA;AAEnE,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AACtE,KAAK,YAAY,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;AAEvC,KAAK,wBAAwB,GAC1B,GAAG,YAAY,IAAI,YAAY,EAAE,GACjC,GAAG,YAAY,IAAI,YAAY,GAAG,KAAK,EAAE,GACzC,GAAG,YAAY,GAAG,KAAK,IAAI,YAAY,EAAE,GACzC,GAAG,YAAY,GAAG,KAAK,IAAI,YAAY,GAAG,KAAK,EAAE,CAAA;AAEpD,MAAM,WAAW,kBAAkB;IAClC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;OAMG;IACH,WAAW,EAAE,wBAAwB,CAAA;CACrC;AAED,MAAM,WAAW,gBAAgB;IAChC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;IACrB,GAAG,CAAC,EAAE,YAAY,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB"}

package/dist/components/code-block/code-block.module.scss

@@ -0,0 +1,505 @@
+//
+// CODE-BLOCK
+//
+
+@use 'styles/mixins/focus-ring' as *;
+
+// CODE-BLOCK PARENT/WRAPPER
+.code-block {
+	--code-block-code-padding: 16px;
+
+	position: relative;
+	color: var(--code-block-color-foreground-primary);
+	background-color: var(--code-block-color-surface-primary);
+	border: 1px solid var(--code-block-color-border-strong);
+
+	pre,
+	code {
+		line-height: 1.4286;
+		white-space: pre;
+		text-align: left;
+		text-shadow: none;
+		overflow-wrap: normal;
+		word-break: normal;
+		word-spacing: normal;
+		tab-size: 4;
+		hyphens: none;
+
+		@media print {
+			text-shadow: none;
+		}
+	}
+
+	@media print {
+		.line-highlight {
+			/*
+       * This will prevent browsers from replacing the background color with white.
+       * It's necessary because the element is layered on top of the displayed code.
+       */
+			-webkit-print-color-adjust: exact;
+			print-color-adjust: exact;
+		}
+	}
+}
+
+.dark {
+	// COLORS
+
+	// Descriptive color names:
+
+	--code-block-color-blue: #2d8eff;
+	--code-block-color-cyan: #32fff7;
+	--code-block-color-green: #86ff13;
+	--code-block-color-orange: #ffa800;
+	--code-block-color-purple: #c76cff;
+	--code-block-color-red: #ff3b20;
+
+	// Semantic color names:
+
+	// Base UI colors:
+	--code-block-color-foreground-primary: #d5d7db;
+	--code-block-color-foreground-faint: #b2b6bd;
+	--code-block-color-surface-primary: #0d0e12;
+	--code-block-color-surface-faint: #15181e;
+	// status ----
+	--code-block-color-foreground-success: #009241;
+	--code-block-color-foreground-critical: #ef3016;
+	// interactive ---
+	--code-block-color-foreground-interactive: #dedfe3;
+	--code-block-color-foreground-interactive-hover: #fff;
+	--code-block-color-foreground-interactive-active: #f1f2f3;
+	--code-block-color-surface-interactive-active: #2b303c;
+	// actions ---
+	--code-block-color-foreground-action: #2b89ff;
+	--code-block-color-foreground-action-hover: #389aff;
+	--code-block-color-foreground-action-active: #4ca1ff;
+	// borders
+	--code-block-color-border-strong: rgba(178, 182, 189, 40%); // #b2b6bd66
+	--code-block-color-border-primary: rgba(178, 182, 189, 20%); // #b2b6bd33
+	// selection
+	--code-block-color-foreground-selection: #0d0e12;
+	--code-block-color-surface-selection: #86ff13;
+
+	// CodeBlock UI:
+	// lines of code - highlighted ----
+	--code-block-color-line-highlight: rgba(0, 74, 222, 20%);
+	--code-block-color-line-highlight-border: #1555d4;
+
+	// Syntax highlighting tokens:
+	// general ----
+	--code-block-color-token: var(--code-block-color-foreground-primary);
+	// specific ----
+	--code-block-color-atrule: var(--code-block-color-blue);
+	--code-block-color-code-block-attr-name: var(--code-block-color-blue);
+	--code-block-color-attr-value: var(--code-block-color-blue);
+	--code-block-color-boolean: var(--code-block-color-purple);
+	--code-block-color-builtin: var(--code-block-color-orange);
+	--code-block-color-char: var(--code-block-color-orange);
+	--code-block-color-class-name: var(--code-block-color-blue);
+	--code-block-color-comment: var(--code-block-color-foreground-faint);
+	--code-block-color-control: var(--code-block-color-cyan);
+	--code-block-color-constant: var(--code-block-color-purple);
+	--code-block-color-deleted: var(--code-block-color-red);
+	--code-block-color-entity: var(--code-block-color-green);
+	--code-block-color-function: var(--code-block-color-blue);
+	--code-block-color-important: var(--code-block-color-red);
+	--code-block-color-keyword: var(--code-block-color-green);
+	--code-block-color-namespace: var(--code-block-color-red);
+	--code-block-color-number: var(--code-block-color-purple);
+	--code-block-color-operator: var(--code-block-color-cyan);
+	--code-block-color-prolog: var(--code-block-color-foreground-primary);
+	--code-block-color-property: var(--code-block-color-blue);
+	--code-block-color-punctuation: var(--code-block-color-foreground-primary);
+	--code-block-color-regex: var(--code-block-color-orange);
+	--code-block-color-script: var(--code-block-color-foreground-primary);
+	--code-block-color-selector: var(--code-block-color-green);
+	--code-block-color-string: var(--code-block-color-orange);
+	--code-block-color-symbol: var(--code-block-color-orange);
+	--code-block-color-tag: var(--code-block-color-green);
+	--code-block-color-url: var(--code-block-color-cyan);
+	// language-scoped:
+	// css ----
+	--code-block-color-lang-css: var(--code-block-color-purple);
+	--code-block-color-lang-css-token: var(--code-block-color-green);
+	--code-block-color-lang-css-atrule: var(--code-block-color-purple);
+	--code-block-color-lang-css-entity: var(--code-block-color-blue);
+	--code-block-color-lang-css-function: var(--code-block-color-cyan);
+	--code-block-color-lang-css-property: var(--code-block-color-cyan);
+	--code-block-color-lang-css-punctuation: var(--code-block-color-orange);
+	--code-block-color-lang-css-not-atrule: var(--code-block-color-foreground-primary);
+	--code-block-color-lang-css-selector: var(--code-block-color-blue);
+	--code-block-color-lang-css-url: var(--code-block-color-orange);
+	// javascript ----
+	--code-block-color-lang-js-constant: var(--code-block-color-orange);
+	// markup/html ----
+	--code-block-color-lang-markup-attr-value: var(--code-block-color-yellow);
+	--code-block-color-lang-markup-entity-named: var(--code-block-color-purple);
+	--code-block-color-lang-markup-entity-not-named: var(--code-block-color-green);
+}
+
+// Syntax highlighting ----
+// General
+.code-block {
+	// Common tokens
+	:global(.token.bold) {
+		font-weight: bold;
+	}
+	:global(.token.italic) {
+		font-style: italic;
+	}
+
+	// General tokens
+	:global(.token) {
+		color: var(--code-block-color-token);
+	}
+
+	:global(.token.atrule) {
+		color: var(--code-block-color-atrule);
+	}
+	:global(.token.attr-name) {
+		color: var(--code-block-color-attr-name);
+	}
+	:global(.token.attr-value) {
+		color: var(--code-block-color-attr-value);
+	}
+	:global(.token.boolean) {
+		color: var(--code-block-color-boolean);
+	}
+	:global(.token.builtin) {
+		color: var(--code-block-color-builtin);
+	}
+	:global(.token.char) {
+		color: var(--code-block-color-char);
+	}
+	:global(.token.class-name) {
+		color: var(--code-block-color-class-name);
+	}
+	:global(.token.comment) {
+		color: var(--code-block-color-comment);
+	}
+	:global(.token.constant) {
+		color: var(--code-block-color-constant);
+	}
+	:global(.token.deleted) {
+		color: var(--code-block-color-deleted);
+	}
+	:global(.token.entity) {
+		color: var(--code-block-color-entity);
+	}
+	:global(.token.function) {
+		color: var(--code-block-color-function);
+	}
+	:global(.token.important) {
+		color: var(--code-block-color-important);
+	}
+	:global(.token.keyword) {
+		color: var(--code-block-color-keyword);
+	}
+	:global(.token.namespace) {
+		color: var(--code-block-color-namespace);
+	}
+	:global(.token.number) {
+		color: var(--code-block-color-number);
+	}
+	:global(.token.operator) {
+		color: var(--code-block-color-operator);
+	}
+	:global(.token.punctuation) {
+		color: var(--code-block-color-punctuation);
+	}
+	:global(.token.prolog) {
+		color: var(--code-block-color-prolog);
+	}
+	:global(.token.property) {
+		color: var(--code-block-color-property);
+	}
+	:global(.token.regex) {
+		color: var(--code-block-color-regex);
+	}
+	:global(.token.script) {
+		color: var(--code-block-color-script);
+	}
+	:global(.token.selector) {
+		color: var(--code-block-color-selector);
+	}
+	:global(.token.string) {
+		color: var(--code-block-color-string);
+	}
+	:global(.token.symbol) {
+		color: var(--code-block-color-symbol);
+	}
+	:global(.token.tag) {
+		color: var(--code-block-color-tag);
+	}
+	:global(.token.url) {
+		color: var(--code-block-color-url);
+	}
+	:global(.token.variable) {
+		color: var(--code-block-color-comment);
+	}
+}
+// Language-specific
+.language-css {
+	color: var(--code-block-color-lang-css);
+
+	.token {
+		color: var(--code-block-color-lang-css-token);
+	}
+	:global(.token.atrule) {
+		color: var(--code-block-color-lang-css-atrule);
+	}
+	:global(.token.rule:not(.atrule)) {
+		color: var(--code-block-color-lang-css-not-atrule);
+	}
+	:global(.token.entity) {
+		color: var(--code-block-color-lang-css-entity);
+	}
+	:global(.token.function) {
+		color: var(--code-block-color-lang-css-function);
+	}
+	:global(.token.property) {
+		color: var(--code-block-color-lang-css-property);
+	}
+	:global(.token.punctuation) {
+		color: var(--code-block-color-lang-css-punctuatione);
+	}
+	:global(.token.selector) {
+		color: var(--code-block-color-lang-css-selector);
+	}
+	:global(.token.url) {
+		color: var(--code-block-color-lang-css-url);
+	}
+}
+.language-javascript {
+	:global(.token.constant) {
+		color: var(--code-block-color-lang-js-constant);
+	}
+}
+.language-markup,
+.language-html {
+	:global(.token.attr-value) {
+		color: var(--code-block-color-lang-markup-attr-value);
+	}
+	:global(.token.entity.named-entity) {
+		color: var(--code-block-color-lang-markup-entity-named);
+	}
+	:global(.token.entity:not(.named-entity)) {
+		color: var(--code-block-color-lang-markup-entity-not-named);
+	}
+}
+
+// isStandalone
+.is-standalone {
+	border-radius: 6px;
+}
+
+// CHILD COMPONENTS / ELEMENTS
+
+// Header (contains title & description)
+
+.title {
+	color: var(--code-block-color-foreground-primary);
+}
+
+.description {
+	color: var(--code-block-color-foreground-faint);
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px var(--code-block-code-padding);
+	background-color: var(--code-block-color-surface-faint);
+	border-bottom: 1px solid var(--code-block-color-border-primary);
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+
+	&:empty {
+		display: none;
+	}
+
+	// we add very basic styling for elements that may be yielded in the "title"/"description" elements
+
+	strong {
+		font-weight: var(--mds-typography-font-weight-semibold);
+	}
+
+	code,
+	pre {
+		display: inline;
+		font-size: 0.9em; // as discussed with designers, we reduce the size for optical/visual balance
+		font-family: var(--mds-typography-font-stack-mono);
+		line-height: 1em;
+	}
+
+	a {
+		color: var(--code-block-color-foreground-action);
+
+		&:focus,
+		&:focus-visible {
+			text-decoration: none;
+			outline: 2px solid var(--mds-color-focus-action-internal);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			color: var(--mds-color-foreground-action-hover);
+		}
+
+		&:active {
+			color: var(--mds-color-foreground-action-active);
+		}
+	}
+}
+
+.body {
+	position: relative;
+	border-radius: inherit;
+}
+
+// Code
+.code {
+	@include hds-focus-ring-basic;
+	display: block;
+	margin: 0;
+	padding: var(--code-block-code-padding) 0;
+	overflow: auto;
+	font-size: 0.8125rem;
+	font-family: var(--mds-typography-font-stack-mono);
+	border-radius: inherit;
+
+	::selection {
+		color: var(--code-block-color-foreground-selection);
+		background-color: var(--code-block-color-surface-selection);
+	}
+}
+
+// CopyButton
+.copy-button {
+	--copy-button-token-idle: var(--code-block-color-foreground-primary) !important;
+	--copy-button-token-success: var(--code-block-color-foreground-success) !important;
+	--copy-button-token-error: var(--code-block-color-foreground-critical) !important;
+
+	position: absolute !important;
+	top: 11px; // 12px -1px accounting for border
+	right: 12px; // 12px -1px accounting for border
+	// Overriding default colors must have !important due to style modules
+	color: var(--code-block-color-foreground-primary) !important;
+	background-color: var(--code-block-color-surface-faint) !important;
+	border: 1px solid var(--code-block-color-border-strong) !important;
+
+	&:hover {
+		background-color: var(--code-block-color-surface-primary) !important;
+		border-color: var(--code-block-color-border-strong) !important;
+	}
+
+	&:active {
+		background-color: var(--code-block-color-surface-interactive-active) !important;
+	}
+
+	&:focus,
+	&:focus-visible {
+		background-color: var(--code-block-color-surface-faint) !important;
+	}
+}
+
+// Highlighted Lines
+.line-highlight {
+	right: 0;
+	left: 0;
+	margin-top: 0px;
+	background-color: var(--code-block-color-line-highlight);
+	border: solid var(--code-block-color-line-highlight-border);
+	border-width: 0 0 0 4px;
+	mix-blend-mode: screen;
+	pointer-events: none;
+
+	// Enable the top border if this is the first line in a group of lines
+	&.line-highlight-first {
+		border-top-width: 1px;
+	}
+
+	// Enable the bottom border if this is the last line in a group of lines
+	&.line-highlight-last {
+		border-bottom-width: 1px;
+	}
+}
+
+.line-numbers {
+	counter-reset: linenumber;
+
+	.code {
+		position: relative;
+		padding-left: 49px;
+	}
+
+	.line-numbers-rows {
+		position: absolute;
+		top: 0;
+		left: 0;
+		min-width: 49px;
+		min-height: 100%;
+		padding: var(--code-block-code-padding) 0;
+		border-right: 1px solid var(--code-block-color-border-primary);
+		user-select: none;
+		pointer-events: none;
+
+		> span {
+			display: block;
+			counter-increment: linenumber;
+
+			&::before {
+				display: block;
+				padding-right: var(--code-block-code-padding);
+				text-align: right;
+				content: counter(linenumber);
+			}
+		}
+	}
+
+	.line-of-code.line-highlight {
+		// This disables the thicker left border on highlighted lines.
+		border-width: 0;
+
+		// This resets the left padding to the original value.
+		padding-left: var(--mds-spacing-05);
+	}
+}
+
+.line-of-code {
+	// Lines of code are <span> elements which are inline by default, but
+	// we want them to take up the full width of the code block.
+	display: block;
+
+	// When we're rendering line numbers, we need to add padding to the
+	// left of lines of code to make room for the line numbers.
+	padding-left: var(--mds-spacing-05);
+
+	&.line-highlight {
+		// This accounts for the 4px margin on the left side so the content
+		// does not get moved by the margin.
+		padding-left: var(--mds-spacing-04);
+
+		// Enable the top border if this is the first line in a group of lines
+		&.line-highlight-first {
+			border-top-width: 1px;
+		}
+
+		// Enable the bottom border if this is the last line in a group of lines
+		&.line-highlight-last {
+			border-bottom-width: 1px;
+		}
+	}
+
+	& > span {
+		padding-right: var(--mds-spacing-09);
+	}
+}
+
+.line-number {
+	// Line numbers are <span> elements which are inline by default, but we
+	// want them to behave like block elements.
+	display: block;
+	color: #999;
+}

package/dist/components/code-block/code-lines/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Note: lines of code are expected to be stable. If we need to work with
+ * dynamic code blocks in the future, we could assign random unique IDs
+ * to each line during the `linesOfCode` `useMemo` function.
+ *
+ * For now, we disable react/no-array-index key for the entire file.
+ */
+import { type ReactNode } from 'react';
+interface CodeLinesProps {
+    value: ReactNode;
+    hasLineNumbers?: boolean;
+    highlightLines?: string;
+}
+/**
+ * Render the provided code into separate line elements,
+ * accounting for all provided options.
+ */
+declare const CodeLines: ({ value, hasLineNumbers: lineNumbers, highlightLines: highlight, }: CodeLinesProps) => import("react/jsx-runtime").JSX.Element;
+export { CodeLines };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/code-block/code-lines/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code-block/code-lines/index.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAGH,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAO/C,UAAU,cAAc;IACvB,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,GAAI,oEAIhB,cAAc,4CA+EhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/code-block/code-lines/utils/split-html-into-lines.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+/**
+ * Given a string of HTML, split it on newlines,
+ * and return an array of React <span> elements,
+ * each of which will contain a single line.
+ *
+ * Note that HTML tokens should not be multi-line,
+ * ie, all newline characters should be surfaced
+ * to the top level rather than nested in syntax
+ * highlighting tokens (otherwise the line-by-line
+ * markup we render would be invalid). We have
+ * a rehype plugin we use with our highlightString()
+ * utility to ensure newlines are surfaced in this way.
+ *
+ * @param {string} codeHtml String of HTML
+ * @returns Array of JSX <span> elements
+ */
+declare function splitHtmlIntoLines(codeHtml: string): (ReactNode | null)[];
+export default splitHtmlIntoLines;
+//# sourceMappingURL=split-html-into-lines.d.ts.map

package/dist/components/code-block/code-lines/utils/split-html-into-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-html-into-lines.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-block/code-lines/utils/split-html-into-lines.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAsBlE;AAED,eAAe,kBAAkB,CAAA"}

package/dist/components/code-block/code-lines/utils/split-jsx-into-lines.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+/**
+ * Given an array of React children,
+ * split the array on newlines, grouping consecutive
+ * non-newline tokens in individual line elements,
+ * and return an array of React <span> elements,
+ * each of which will contain a single line.
+ *
+ * Note that JSX tokens should not be multi-line,
+ * ie, all newline characters should be surfaced
+ * to the top level rather than nested in syntax
+ * highlighting tokens (otherwise the line-by-line
+ * markup we render would be invalid). We have
+ * a rehype plugin we include with our markdown defaults
+ * to ensure newlines are surfaced in this way.
+ *
+ * @param {*} codeJsx Array of JSX elements, some of which may be newline strings
+ * @returns Array of JSX <span> elements representing individual lines
+ */
+declare function splitJsxIntoLines(codeJsx: React.ReactNode | React.ReactNode[]): ReactNode[];
+export default splitJsxIntoLines;
+//# sourceMappingURL=split-jsx-into-lines.d.ts.map

package/dist/components/code-block/code-lines/utils/split-jsx-into-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-jsx-into-lines.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-block/code-lines/utils/split-jsx-into-lines.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,eAmEtE;AAED,eAAe,iBAAiB,CAAA"}