@hashicorp/mds-react 0.9.13 → 0.9.15

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

@@ -1,511 +0,0 @@
-//
-// 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;
-		word-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/components/code-block/code-lines/index.d.ts

@@ -1,12 +0,0 @@
-import { 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 };

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

@@ -1,19 +0,0 @@
-import { 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;

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

@@ -1,21 +0,0 @@
-import { 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;

package/components/code-block/code-lines/utils/split-jsx-into-lines.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"split-jsx-into-lines.js","sources":["../../../../../src/components/code-block/code-lines/utils/split-jsx-into-lines.ts"],"sourcesContent":["import { Children, type ReactNode } from 'react'\n\n/**\n * Given an array of React children,\n * split the array on newlines, grouping consecutive\n * non-newline tokens in individual line elements,\n * and return an array of React <span> elements,\n * each of which will contain a single line.\n *\n * Note that JSX tokens should not be multi-line,\n * ie, all newline characters should be surfaced\n * to the top level rather than nested in syntax\n * highlighting tokens (otherwise the line-by-line\n * markup we render would be invalid). We have\n * a rehype plugin we include with our markdown defaults\n * to ensure newlines are surfaced in this way.\n *\n * @param {*} codeJsx Array of JSX elements, some of which may be newline strings\n * @returns Array of JSX <span> elements representing individual lines\n */\nfunction splitJsxIntoLines(codeJsx: React.ReactNode | React.ReactNode[]) {\n\tconst linesArray = Children.toArray(codeJsx)\n\t/**\n\t * Many newlines take the form of a literal newline string, `\\n`.\n\t * However, some newlines take different forms. We expect these to be tagged\n\t * with an `empty-line` className by our rehype code plugins.\n\t * Here we detect the latter types of newline, and convert them to the former.\n\t */\n\tconst withNormalizedNewlines = linesArray.map((token) => {\n\t\t// If our token has an `empty-line` className, use a literal newline\n\t\t// rather than the token itself (which would render, but with zero height)\n\t\tif (typeof token === 'object' && 'props' in token) {\n\t\t\tif (token.props.className?.includes('empty-line')) {\n\t\t\t\treturn '\\n'\n\t\t\t}\n\t\t}\n\t\t// Otherwise, return the token unmodified\n\t\treturn token\n\t})\n\t// Filter out any surfaces newlines, that are \"in between\"\n\t// other lines of code. Special exceptions should be made for:\n\t// 1. newlines at start or end of array - should be rendered as blank lines\n\t// 2. consecutive newlines - \"n\" consecutive newlines should be rendered\n\t//    as \"n - 1\" blank lines.\n\tconst accumulatedLines = withNormalizedNewlines.reduce(\n\t\t(acc, token, idx) => {\n\t\t\tconst isLastLine = idx === withNormalizedNewlines.length - 1\n\t\t\tconst isNewline = token === '\\n'\n\t\t\tconst isInlineToken = token !== '\\n'\n\t\t\t// For newlines, increment the consecutive newline counter\n\t\t\tif (isNewline) acc.consecutiveNewlines++\n\t\t\t// If this token is an inline token, and we have\n\t\t\t// pending newlines, then start a new line,\n\t\t\t// adding blank lines for consecutive newlines as needed\n\t\t\tconst isFinalNewline = isNewline && isLastLine\n\t\t\tconst hasNewlines = acc.consecutiveNewlines > 0\n\t\t\tconst needsNewlines = (isInlineToken || isFinalNewline) && hasNewlines\n\t\t\tif (needsNewlines) {\n\t\t\t\t// If there are any tokens in the current line, add them as a new line\n\t\t\t\tif (acc.currentLine.length > 0) {\n\t\t\t\t\tacc.lines.push(acc.currentLine)\n\t\t\t\t\tacc.currentLine = []\n\t\t\t\t}\n\t\t\t\t// Add blank lines for each consecutive newline, then reset the counter\n\t\t\t\tfor (let i = 1; i < acc.consecutiveNewlines; i++) {\n\t\t\t\t\tacc.lines.push('')\n\t\t\t\t}\n\t\t\t\tacc.consecutiveNewlines = 0\n\t\t\t}\n\t\t\t// If this token is an inline token,\n\t\t\t// append it to the current line\n\t\t\tif (isInlineToken) {\n\t\t\t\tacc.currentLine.push(token)\n\t\t\t\t// If this is the last line,\n\t\t\t\t// then ensure the current line\n\t\t\t\t// has been pushed to the lines array\n\t\t\t\tif (isLastLine) acc.lines.push(acc.currentLine)\n\t\t\t}\n\t\t\treturn acc\n\t\t},\n\t\t{\n\t\t\tlines: [] as ReactNode[],\n\t\t\tcurrentLine: [] as ReactNode[],\n\t\t\tconsecutiveNewlines: 1, // Start at 1 to handle leading newlines\n\t\t}\n\t)\n\treturn accumulatedLines.lines\n}\n\nexport default splitJsxIntoLines\n"],"names":["splitJsxIntoLines","codeJsx","withNormalizedNewlines","Children","token","acc","idx","isLastLine","isNewline","isInlineToken","isFinalNewline","hasNewlines","i"],"mappings":";AAoBA,SAASA,EAAkBC,GAA8C;AAQxE,QAAMC,IAPaC,EAAS,QAAQF,CAAO,EAOD,IAAI,CAACG,MAG1C,OAAOA,KAAU,YAAY,WAAWA,KACvCA,EAAM,MAAM,WAAW,SAAS,YAAY,IACxC;AAAA,IAIFA,CACP;AAgDD,SA1CyBF,EAAuB;AAAA,IAC/C,CAACG,GAAKD,GAAOE,MAAQ;AACpB,YAAMC,IAAaD,MAAQJ,EAAuB,SAAS,GACrDM,IAAYJ,MAAU;AAAA,GACtBK,IAAgBL,MAAU;AAAA;AAEhC,MAAII,KAAWH,EAAI;AAInB,YAAMK,IAAiBF,KAAaD,GAC9BI,IAAcN,EAAI,sBAAsB;AAE9C,WADuBI,KAAiBC,MAAmBC,GACxC;AAElB,QAAIN,EAAI,YAAY,SAAS,MAC5BA,EAAI,MAAM,KAAKA,EAAI,WAAW,GAC9BA,EAAI,cAAc,CAAA;AAGnB,iBAASO,IAAI,GAAGA,IAAIP,EAAI,qBAAqBO;AAC5C,UAAAP,EAAI,MAAM,KAAK,EAAE;AAElB,QAAAA,EAAI,sBAAsB;AAAA,MAC3B;AAGA,aAAII,MACHJ,EAAI,YAAY,KAAKD,CAAK,GAItBG,KAAYF,EAAI,MAAM,KAAKA,EAAI,WAAW,IAExCA;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO,CAAA;AAAA,MACP,aAAa,CAAA;AAAA,MACb,qBAAqB;AAAA;AAAA,IAAA;AAAA,EACtB,EAEuB;AACzB;"}

package/components/code-block/hidden-copy-content/index.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-declare const HiddenCopyContent: import('react').ForwardRefExoticComponent<{
-    code: ReactNode;
-} & import('react').RefAttributes<HTMLPreElement>>;
-export { HiddenCopyContent };

package/components/code-block/hidden-copy-content/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/code-block/hidden-copy-content/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useState, type ReactNode } from 'react'\n\n/**\n * This hidden element acts solely as a container\n * that we can fetch textContent to copy to clipboard.\n * This allows to ignore the \"how will we copy this cleanly\"\n * concern when splitting code into lines, and adding\n * line numbers and so on in other parts of code-block.\n */\nconst HiddenCopyContentComponent = (\n\t{ code }: { code: ReactNode },\n\tcopyRef: React.ForwardedRef<HTMLPreElement>\n) => {\n\tconst [isClient, setIsClient] = useState(false)\n\n\tuseEffect(() => {\n\t\tsetIsClient(true)\n\t}, [])\n\n\t/**\n\t * We are avoiding SSR here as this component is only used for the copy-to-clipboard interaction, and so rendering\n\t * the text content of the code introduces duplicate markup and some difficult-to-debug hydration mismatches.\n\t * By the time someone interacts with the copy-to-clipboard functionality, this should be rendered.\n\t */\n\tif (!isClient) return null\n\n\treturn (\n\t\t<pre ref={copyRef} style={{ display: 'none' }}>\n\t\t\t{typeof code === 'string' ? (\n\t\t\t\t<span dangerouslySetInnerHTML={{ __html: code }} />\n\t\t\t) : (\n\t\t\t\tcode\n\t\t\t)}\n\t\t</pre>\n\t)\n}\n\nconst HiddenCopyContent = forwardRef(HiddenCopyContentComponent)\n\nexport { HiddenCopyContent }\n"],"names":["HiddenCopyContentComponent","code","copyRef","isClient","setIsClient","useState","useEffect","jsx"],"mappings":";;;AAeC,MAAAA,IAAgC,CAAA,EAAA,MAAAC,EAAS,GAAAC,MAAK;AAE9C,QAAA,CAAAC,GAAgBC,CAAA,IAAAC,EAAA,EAAA;AAWhB,SAVCC,EAAA,MAAY;AACb,IAAAF,EAAK,EAAA;AAAA,EAOL,GAAA,CAAI,CAAC,OAWN,gBAAAG,EAAA,OAAA,EAAA,KAAAL,GAAA,OAAA,EAAA,SAAA,OAAA,GAAA,UAAA,OAAAD,KAAA,WAAA,gBAAAM,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAAN,EAAA,EAAA,CAAA,IAAAA,EAAA,CAAA;AAEA;"}

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

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * ALERT: This component is a combination of logic from the official HashiCorp
- * Design System CodeBlock component and the CodeBlock component written by the
- * Web Presence Team. The official component relies on client-side rendering
- * for the calculation of line-heights for line numbers, but this is something
- * we want to be able to achieve without client-side rendering.
- */
-interface CodeBlockProps {
-    /**
-     * The text/code content for the CodeBlock. The component encodes this
-     * argument before displaying it. Should be a pre-highlighted string
-     * generated by Prism.js or Shiki.
-     */
-    value: ReactNode;
-    /**
-     * The coding language to use for syntax highlighting. If you need
-     * additional languages contact the Design Systems Team.
-     */
-    language?: string;
-    /**
-     * Applies rounded borders to the component. When used within another
-     * component or when the context requires it, you can turn it off.
-     */
-    isStandalone?: boolean;
-    /**
-     * Used to control whether a copy button for copying the code/text content
-     * will be displayed.
-     */
-    hasCopyButton?: boolean;
-    /**
-     * Used to control display of line numbers.
-     */
-    hasLineNumbers?: boolean;
-    /**
-     * Accepts a list or range of line numbers to highlight.
-     * (Examples: `2, 4`,`6-10`)
-     */
-    highlightLines?: string;
-    /**
-     * Accepts any valid CSS unit. If the CodeBlock content exceeds the maximum
-     * height a vertical scrollbar is enabled. This value applies to the code
-     * content only and does not include the header element (title and/or description).
-     */
-    maxHeight?: string;
-    title?: ReactNode;
-    description?: ReactNode;
-    className?: string;
-}
-declare const CodeBlock: {
-    ({ title, description, language, value, isStandalone, hasCopyButton, hasLineNumbers, highlightLines, maxHeight, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { CodeBlockProps };
-export { CodeBlock };

package/components/code-block/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/code-block/index.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useRef, type ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Text } from '../text'\nimport { CodeLines } from './code-lines'\nimport { HiddenCopyContent } from './hidden-copy-content'\nimport processSnippet from './utils/process-snippet'\nimport { CopyButton } from '../../patterns/copy-button'\nimport s from './code-block.module.scss'\n\n/**\n * ALERT: This component is a combination of logic from the official HashiCorp\n * Design System CodeBlock component and the CodeBlock component written by the\n * Web Presence Team. The official component relies on client-side rendering\n * for the calculation of line-heights for line numbers, but this is something\n * we want to be able to achieve without client-side rendering.\n */\n\ninterface CodeBlockProps {\n\t/**\n\t * The text/code content for the CodeBlock. The component encodes this\n\t * argument before displaying it. Should be a pre-highlighted string\n\t * generated by Prism.js or Shiki.\n\t */\n\tvalue: ReactNode\n\n\t/**\n\t * The coding language to use for syntax highlighting. If you need\n\t * additional languages contact the Design Systems Team.\n\t */\n\tlanguage?: string\n\n\t/**\n\t * Applies rounded borders to the component. When used within another\n\t * component or when the context requires it, you can turn it off.\n\t */\n\tisStandalone?: boolean\n\n\t/**\n\t * Used to control whether a copy button for copying the code/text content\n\t * will be displayed.\n\t */\n\thasCopyButton?: boolean\n\n\t/**\n\t * Used to control display of line numbers.\n\t */\n\thasLineNumbers?: boolean\n\n\t/**\n\t * Accepts a list or range of line numbers to highlight.\n\t * (Examples: `2, 4`,`6-10`)\n\t */\n\thighlightLines?: string\n\n\t/**\n\t * Accepts any valid CSS unit. If the CodeBlock content exceeds the maximum\n\t * height a vertical scrollbar is enabled. This value applies to the code\n\t * content only and does not include the header element (title and/or description).\n\t */\n\tmaxHeight?: string\n\ttitle?: ReactNode\n\tdescription?: ReactNode\n\tclassName?: string\n}\n\nconst CodeBlock = ({\n\ttitle,\n\tdescription,\n\tlanguage,\n\tvalue,\n\tisStandalone = true,\n\thasCopyButton,\n\thasLineNumbers = true,\n\thighlightLines,\n\tmaxHeight = 'auto',\n\tclassName,\n}: CodeBlockProps) => {\n\tconst copyRef = useRef<HTMLPreElement>(null)\n\tconst preCodeId = useId()\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts['code-block'],\n\t\t\t\ts.dark,\n\t\t\t\t{\n\t\t\t\t\t[s[`language-${language}`]]: language,\n\t\t\t\t\t[s['is-standalone']]: isStandalone,\n\t\t\t\t\t[s['line-numbers']]: hasLineNumbers,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div className={s.header}>\n\t\t\t\t{title && (\n\t\t\t\t\t<Text.HDSBody\n\t\t\t\t\t\tsize=\"200\"\n\t\t\t\t\t\ttag=\"p\"\n\t\t\t\t\t\tweight=\"semibold\"\n\t\t\t\t\t\tclassName={s.title}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Text.HDSBody>\n\t\t\t\t)}\n\t\t\t\t{description && (\n\t\t\t\t\t<Text.HDSBody tag=\"p\" size=\"100\" className={s.description}>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Text.HDSBody>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className={s.body}>\n\t\t\t\t{/**\n\t\t\t\t * NOTE: ideally we'd keep the markup of this component in lockstep\n\t\t\t\t * with the markup of the Helios code block. However, we also need\n\t\t\t\t * to support \"clever\" copying of snippets, parsing out shell\n\t\t\t\t * prompt characters like `$` from output, as this is a common\n\t\t\t\t * practice in our tutorial and documentation content. So, this\n\t\t\t\t * HiddenCopyContent component is one divergence from the markup\n\t\t\t\t * of the Helios code block.\n\t\t\t\t */}\n\t\t\t\t<HiddenCopyContent code={value} ref={copyRef} />\n\t\t\t\t<pre className={s.code} id={preCodeId} style={{ maxHeight }}>\n\t\t\t\t\t<code>\n\t\t\t\t\t\t<CodeLines\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\thighlightLines={highlightLines}\n\t\t\t\t\t\t\thasLineNumbers={hasLineNumbers}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</code>\n\t\t\t\t</pre>\n\t\t\t\t{hasCopyButton && (\n\t\t\t\t\t<CopyButton\n\t\t\t\t\t\tclassName={s['copy-button']}\n\t\t\t\t\t\taria-describedby={preCodeId}\n\t\t\t\t\t\tgetTextFn={() => {\n\t\t\t\t\t\t\tconst rawSnippet = copyRef.current?.textContent\n\t\t\t\t\t\t\tif (!rawSnippet) {\n\t\t\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t\t\t\"`code-block` - Couldn't find text content to copy.\"\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn processSnippet(rawSnippet)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttext=\"Copy\"\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nCodeBlock.displayName = 'CodeBlock'\n\nexport type { CodeBlockProps }\nexport { CodeBlock }\n"],"names":["CodeBlock","title","description","language","value","isStandalone","hasCopyButton","hasLineNumbers","highlightLines","maxHeight","className","copyRef","jsxs","classNames","s","jsx","Text","HiddenCopyContent","preCodeId","CodeLines","CopyButton","rawSnippet","processSnippet"],"mappings":";;;;;;;;;;AAmEmB,MAClBA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC,IAAA;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAA;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC,IAAA;AAAA,EACD,WAAAC;AACC;AACA,QAAMC,MAAY,IAAM,SAGvB;AAAA,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE,YAAA;AAAA,QACFA,EAAA;AAAA,QAAA;AAAA,UAEC,CAACA,EAAE,YAAAX,CAAmB,EAAA,CAAA,GAAAA;AAAA,UACtB,CAACW,EAAE,eAAe,CAAA,GAAGT;AAAA,UACtB,CAAAS,EAAA,cAAA,CAAA,GAAAP;AAAA,QACA;AAAA,QACDG;AAAA,MAEA;AAAA,MAAA,UAAA;AAAA,iCAEE,EAAA,WAAAI,EAAA,QAAA,UAAA;AAAA,UAAAb,KAAM,gBAAAc;AAAA,YAALC,EAAA;AAAA,YAAA;AAAA,cAEA,MAAI;AAAA,cACJ,KAAA;AAAA,cACA,QAAA;AAAA,cAEC,WAAAF,EAAA;AAAA,cAAA,UAAAb;AAAA,YACF;AAAA,UAEA;AAAA,eAKF,gBAAAc,EAAAC,EAAA,SAAA,EAAA,KAAA,KAAA,MAAA,OAAA,WAAAF,EAAA,aAAA,UAAAZ,EAAA,CAAA;AAAA,QAAA,EAAA,CAAA;AAAA,QAWC,gBAAAU,EAAA,OAAC,EAAA,WAAAE,EAAkB,MAAM,UAAO;AAAA,UAChC,gBAAAC,EAACE,GAAI,EAAW,MAAEb,GAAU,KAAAO,EAAW,CAAA;AAAA,UAEpC,gBAAAI,EAAA,OAAA,EAAA,WAAAD,EAAA,MAAA,IAAAI,GAAA,OAAA,EAAA,WAAAT,EAAA,GAAA,UAAA,gBAAAM,EAAA,QAAA,EAAA,UAAA,gBAAAA;AAAA,YAAAI;AAAA,YAAA;AAAA,cAEA,OAAAf;AAAA,cACA,gBAAAI;AAAA,cAAA,gBAAAD;AAAA;UAIF,EAAA,CAAA,EAAA,CAAA;AAAA,UACAD,KAAC,gBAAAS;AAAA,YAAAK;AAAA,YAAA;AAAA,cAEA,WAAAN,EAAA,aAAkB;AAAA,cAClB,oBAAiBI;AAAA,cAChB,WAAM,MAAA;AACN,sBAAKG,IAAYV,EAAA,SAAA;AAChB,oBAAA,CAAAU;AAAU,wBACT,IAAA;AAAA,oBACD;AAAA,kBACD;AAED,uBAAAC,EAAAD,CAAA;AAAA,cACA;AAAA,cACA,MAAA;AAAA,cACA,YAAK;AAAA,cAAA,MAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAEF,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;AAEA;;"}

package/components/code-block/utils/parse-highlighted-lines.d.ts

@@ -1,2 +0,0 @@
-declare function parseHighlightedLines(string?: string | boolean): number[];
-export default parseHighlightedLines;

package/components/code-block/utils/parse-highlighted-lines.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"parse-highlighted-lines.js","sources":["../../../../src/components/code-block/utils/parse-highlighted-lines.ts"],"sourcesContent":["function parseHighlightedLines(string?: string | boolean) {\n\tif (typeof string == 'undefined' || string === false || string === '') {\n\t\treturn []\n\t}\n\n\tif (typeof string !== 'string') {\n\t\tthrow new Error(\n\t\t\t`The highlight prop must be a string. Received a value of type \"${typeof string}\" instead.`\n\t\t)\n\t}\n\n\tconst hasValidChars = /^[-,0-9\\s]+$/.test(string)\n\tif (!hasValidChars) {\n\t\tthrow new Error(\n\t\t\t`The highlight prop must be a comma-separated list of single integers or ranges with a single dash between two integers. Found invalid characters: \"${string}\".`\n\t\t)\n\t}\n\n\tconst parts = string.split(',')\n\treturn parts.reduce((acc, part) => {\n\t\treturn acc.concat(parsePart(part))\n\t}, [] as number[])\n}\n\nfunction parsePart(string: string): number[] {\n\tconst dashParts = string.split('-')\n\tif (dashParts.length > 2) {\n\t\tthrow new Error(\n\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value with multiple dashes: \"${string}\".`\n\t\t)\n\t}\n\t// Single integers are easy, just parse and return\n\tconst isSingle = dashParts.length == 1\n\tif (isSingle) {\n\t\tconst parsedInt = parseInt(string)\n\t\tconst isNaN = parsedInt !== parsedInt\n\t\tif (isNaN) {\n\t\t\tthrow new Error(\n\t\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a value that parsed to NaN: \"${\n\t\t\t\t\tstring === '' ? '<empty string>' : string\n\t\t\t\t}\".`\n\t\t\t)\n\t\t}\n\t\treturn [parsedInt]\n\t}\n\t// Ranges require a little more logic\n\tconst [startVal, endVal] = dashParts.map((v) => parseInt(v))\n\tconst hasNaNStart = startVal !== startVal\n\tconst hasNaNEnd = endVal !== endVal\n\tif (hasNaNStart || hasNaNEnd) {\n\t\tthrow new Error(\n\t\t\t`Each comma-separated value in the highlight prop must be either a single integer, or a range with a single dash between two integers. Found a range that produced a NaN: \"${string}\".`\n\t\t)\n\t}\n\tconst length = endVal - startVal + 1\n\tconst values = [...Array(length).keys()].map((int) => int + startVal)\n\treturn values\n}\n\nexport default parseHighlightedLines\n"],"names":["parseHighlightedLines","string","acc","part","parsePart","dashParts","parsedInt","startVal","endVal","v","length","int"],"mappings":"AAAA,SAASA,EAAsBC,GAA2B;AACzD,MAAI,OAAOA,IAAU,OAAeA,MAAW,MAASA,MAAW;AAClE,WAAO,CAAA;AAGR,MAAI,OAAOA,KAAW;AACrB,UAAM,IAAI;AAAA,MACT,kEAAkE,OAAOA,CAAM;AAAA,IAAA;AAKjF,MAAI,CADkB,eAAe,KAAKA,CAAM;AAE/C,UAAM,IAAI;AAAA,MACT,sJAAsJA,CAAM;AAAA,IAAA;AAK9J,SADcA,EAAO,MAAM,GAAG,EACjB,OAAO,CAACC,GAAKC,MAClBD,EAAI,OAAOE,EAAUD,CAAI,CAAC,GAC/B,CAAA,CAAc;AAClB;AAEA,SAASC,EAAUH,GAA0B;AAC5C,QAAMI,IAAYJ,EAAO,MAAM,GAAG;AAClC,MAAII,EAAU,SAAS;AACtB,UAAM,IAAI;AAAA,MACT,8KAA8KJ,CAAM;AAAA,IAAA;AAKtL,MADiBI,EAAU,UAAU,GACvB;AACb,UAAMC,IAAY,SAASL,CAAM;AAEjC,QADcK,MAAcA;AAE3B,YAAM,IAAI;AAAA,QACT,4KACCL,MAAW,KAAK,mBAAmBA,CACpC;AAAA,MAAA;AAGF,WAAO,CAACK,CAAS;AAAA,EAClB;AAEA,QAAM,CAACC,GAAUC,CAAM,IAAIH,EAAU,IAAI,CAACI,MAAM,SAASA,CAAC,CAAC;AAG3D,MAFoBF,MAAaA,KACfC,MAAWA;AAE5B,UAAM,IAAI;AAAA,MACT,6KAA6KP,CAAM;AAAA,IAAA;AAGrL,QAAMS,IAASF,IAASD,IAAW;AAEnC,SADe,CAAC,GAAG,MAAMG,CAAM,EAAE,MAAM,EAAE,IAAI,CAACC,MAAQA,IAAMJ,CAAQ;AAErE;"}