Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 | 38x 38x 38x 37x 38x 22x 38x 38x 27x 38x 38x 8x 37x 8x 8x 10x 10x 8x 6x 6x 6x 6x 6x 6x 4x 6x 5x 5x 5x 5x 5x 5x 5x 5x 10x 5x 5x 10x 5x 10x 5x 17x 17x 17x 17x 6x 6x 17x 17x 17x 17x 9x 17x 17x 17x 116x 116x 116x 734x 587x 147x 147x 734x 10x 10x 10x 10x 1x 1x 2x 2x 1x 1x 1x 1x 4x 4x 4x 4x 4x 16x 16x 16x 16x 16x 38x 38x 38x 8x 8x 8x 8x 8x 17x 17x 17x 6x 6x 6x 2x 2x 2x 5x 5x 5x 2x 2x 2x 5x 5x 5x 5x 5x 5x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 147x 3x 1x 3x 3x 3x 3x | import type { ElementContent } from 'hast';
import type { Root } from 'mdast';
import type { ContainerDirective, LeafDirective, TextDirective } from 'mdast-util-directive';
import { visit } from 'unist-util-visit';
import { getLinkIcon } from './link-icons';
type DirectiveNode = ContainerDirective | LeafDirective | TextDirective;
/** Linked card: optional top image, then a title + description body. */
function buildCard(attrs: Record<string, string | null | undefined>): DirectiveNode['data'] {
const { title, description, href, image } = attrs;
const body: ElementContent[] = [];
if (title) {
body.push({
type: 'element',
tagName: 'h3',
properties: { className: ['card__title'] },
children: [{ type: 'text', value: title }],
});
}
if (description) {
body.push({
type: 'element',
tagName: 'p',
properties: { className: ['card__description'] },
children: [{ type: 'text', value: description }],
});
}
const children: ElementContent[] = [];
if (image) {
children.push({
type: 'element',
tagName: 'div',
properties: { className: ['card__media'] },
children: [
{
type: 'element',
tagName: 'img',
properties: { src: image, alt: '', loading: 'lazy' },
children: [],
},
],
});
}
children.push({
type: 'element',
tagName: 'div',
properties: { className: ['card__body'] },
children: body,
});
return {
hName: 'a',
hProperties: { className: [image ? 'card card--image' : 'card'], href: href || '#' },
hChildren: children,
};
}
// Trailing arrow for link tiles; CSS shows it only in the 1-column row layout.
// Same glyph as ArrowRightIcon in components/icons.tsx.
const LINK_CARD_ARROW_SVG =
'<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M11.2676 15.7931C10.9679 16.0787 10.4929 16.0672 10.207 15.7677C9.92139 15.468 9.93293 14.993 10.2324 14.7071L14.3779 10.7501L3.75 10.7501C3.33579 10.7501 3 10.4143 3 10.0001C3 9.58587 3.33579 9.25008 3.75 9.25008L14.3779 9.25008L10.2324 5.29305C9.93292 5.00717 9.92139 4.53215 10.207 4.2325C10.4929 3.933 10.9679 3.92147 11.2676 4.20711L16.7676 9.45711C16.9158 9.59863 17 9.79512 17 10.0001C17 10.205 16.9158 10.4006 16.7676 10.5421L11.2676 15.7931Z" fill="currentColor"></path></svg>';
/** Raw HTML node (inlined SVG); rendered because the pipeline allows dangerous HTML. */
function raw(value: string): ElementContent {
return { type: 'raw', value } as unknown as ElementContent;
}
/**
* Do / Don't status glyphs (check-circle / close-circle from Figma) in
* currentColor so CSS tints them with the success / error tokens.
*/
const DO_ICON_PATH =
'M16.0004 1.6C23.9531 1.60021 30.3998 8.04762 30.3998 16.0004C30.3996 23.953 23.953 30.3996 16.0004 30.3998C8.04762 30.3998 1.60021 23.9531 1.6 16.0004C1.6 8.04749 8.04749 1.6 16.0004 1.6ZM16.0004 4.00039C9.37297 4.00039 4.00039 9.37297 4.00039 16.0004C4.0006 22.6276 9.3731 28.0004 16.0004 28.0004C22.6275 28.0002 28.0002 22.6275 28.0004 16.0004C28.0004 9.3731 22.6276 4.0006 16.0004 4.00039ZM20.1254 10.7436C20.5542 10.2386 21.3115 10.1763 21.8168 10.6049C22.3219 11.0336 22.3839 11.791 21.9555 12.2963L14.3549 21.2563C14.1151 21.5387 13.7583 21.6951 13.3881 21.6791C13.0177 21.6629 12.6757 21.4758 12.4613 21.1732L9.74063 17.3334C9.35771 16.7926 9.48601 16.0436 10.0268 15.6605C10.5675 15.2779 11.3166 15.4052 11.6996 15.9457L13.5248 18.5238L20.1254 10.7436Z';
const DONT_ICON_PATH =
'M16.3715 1.60488C24.1527 1.80192 30.3998 8.17169 30.3998 16.0004L30.3949 16.3715C30.1979 24.1526 23.8289 30.3996 16.0004 30.3998L15.6283 30.3949C7.97065 30.2009 1.7988 24.0292 1.60488 16.3715L1.6 16.0004C1.6 8.04749 8.04749 1.6 16.0004 1.6L16.3715 1.60488ZM16.0004 4.00039C9.37297 4.00039 4.00039 9.37297 4.00039 16.0004C4.0006 22.6276 9.3731 28.0004 16.0004 28.0004C22.6275 28.0002 28.0002 22.6275 28.0004 16.0004C28.0004 9.3731 22.6276 4.0006 16.0004 4.00039ZM20.352 9.95156C20.8205 9.48323 21.5797 9.48329 22.0482 9.95156C22.5166 10.4202 22.5168 11.1803 22.0482 11.6488L17.6967 15.9994L22.0482 20.352C22.5166 20.8206 22.5168 21.5797 22.0482 22.0482C21.5797 22.5168 20.8206 22.5166 20.352 22.0482L15.9994 17.6967L11.6488 22.0482C11.1803 22.5168 10.4202 22.5166 9.95156 22.0482C9.48328 21.5797 9.48325 20.8205 9.95156 20.352L14.3031 15.9994L9.95156 11.6488C9.48296 11.1802 9.48295 10.4202 9.95156 9.95156C10.4202 9.48296 11.1802 9.48296 11.6488 9.95156L15.9994 14.3031L20.352 9.95156Z';
function doDontIconSvg(kind: 'do' | 'dont', className: string): string {
const d = kind === 'dont' ? DONT_ICON_PATH : DO_ICON_PATH;
return `<svg class="${className}" viewBox="0 0 32 32" fill="none" aria-hidden="true"><path d="${d}" fill="currentColor"></path></svg>`;
}
// Same glyph as CaretRightIcon in components/icons.tsx. No xmlns: the browser
// adds the SVG namespace itself.
const ACCORDION_CARET_SVG =
'<svg class="accordion__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M7.71967 5.71967C8.01256 5.42678 8.48732 5.42678 8.78022 5.71967L12.5302 9.46967C12.6709 9.61031 12.7499 9.80105 12.7499 9.99994C12.7499 10.1988 12.6709 10.3896 12.5302 10.5302L8.78022 14.2802C8.48732 14.5731 8.01256 14.5731 7.71967 14.2802C7.42678 13.9873 7.42678 13.5126 7.71967 13.2197L10.9394 9.99994L7.71967 6.78022C7.42678 6.48732 7.42678 6.01256 7.71967 5.71967Z" fill="currentColor"></path></svg>';
type Attrs = Record<string, string | null | undefined>;
/** Figure with an optional caption; size=2 is the floated half-width image. */
function buildImage(attrs: Attrs): DirectiveNode['data'] {
const { src, alt, caption, size, align } = attrs;
const half = size === '2';
const className = ['content-image', half ? 'content-image--half' : 'content-image--full'];
if (half) className.push(`content-image--${align === 'right' ? 'right' : 'left'}`);
const children: ElementContent[] = [
{
type: 'element',
tagName: 'img',
properties: { src: src || '', alt: alt || caption || '', loading: 'lazy' },
children: [],
},
];
if (caption) {
children.push({
type: 'element',
tagName: 'figcaption',
properties: { className: ['content-image__caption'] },
children: [{ type: 'text', value: caption }],
});
}
return { hName: 'figure', hProperties: { className: [className.join(' ')] }, hChildren: children };
}
/** Framed image with a status badge over the top edge, then an icon + text lockup. */
function buildDoDont(attrs: Attrs, kind: 'do' | 'dont'): DirectiveNode['data'] {
const { image, alt, text } = attrs;
return {
hName: 'figure',
hProperties: { className: [`do-dont do-dont--${kind}`] },
hChildren: [
{
type: 'element',
tagName: 'div',
properties: { className: ['do-dont__frame'] },
children: [
{
type: 'element',
tagName: 'img',
properties: { src: image || '', alt: alt || '', loading: 'lazy', className: ['do-dont__image'] },
children: [],
},
{
type: 'element',
tagName: 'span',
properties: { className: ['do-dont__badge'] },
children: [raw(doDontIconSvg(kind, 'do-dont__badge-icon'))],
},
],
},
{
type: 'element',
tagName: 'figcaption',
properties: { className: ['do-dont__text'] },
children: [
raw(doDontIconSvg(kind, 'do-dont__icon')),
{
type: 'element',
tagName: 'span',
properties: {},
children: [{ type: 'text', value: text || '' }],
},
],
},
],
};
}
/**
* Native <details> accordion item: a <summary> (title + caret) followed by the
* directive's parsed children, moved into a panel wrapper.
*/
function buildAccordionItem(node: ContainerDirective) {
const { title, open } = node.attributes ?? {};
node.data = {
hName: 'details',
hProperties: { className: ['accordion__item'], ...(open !== undefined ? { open: true } : {}) },
};
// Custom mdast nodes: their hName / hChildren drive the hast output.
const summary = {
type: 'accordionSummary',
data: {
hName: 'summary',
hProperties: { className: ['accordion__header'] },
hChildren: [
{
type: 'element',
tagName: 'span',
properties: { className: ['accordion__title'] },
children: [{ type: 'text', value: title || '' }],
},
raw(ACCORDION_CARET_SVG),
],
},
children: [],
};
const panel = {
type: 'accordionPanel',
data: { hName: 'div', hProperties: { className: ['accordion__panel'] } },
children: node.children,
};
node.children = [summary, panel] as unknown as ContainerDirective['children'];
}
/**
* Inline tabs: a tablist of buttons followed by one panel per :::tab child.
* Every panel stays in the HTML; all but the first start `hidden` and
* `InlineTabsHydrator` switches them. Other children are dropped.
*/
function buildTabs(node: ContainerDirective, id: string) {
const tabs = node.children.filter(
(child): child is ContainerDirective => child.type === 'containerDirective' && child.name === 'tab',
);
node.data = { hName: 'div', hProperties: { className: ['inline-tabs'] } };
const list = {
type: 'inlineTabList',
data: {
hName: 'div',
hProperties: { className: ['inline-tabs__list'], role: 'tablist' },
hChildren: tabs.map((tab, i) => ({
type: 'element',
tagName: 'button',
properties: {
type: 'button',
className: ['inline-tabs__tab'],
role: 'tab',
id: `${id}-tab-${i}`,
ariaControls: `${id}-panel-${i}`,
ariaSelected: i === 0 ? 'true' : 'false',
tabIndex: i === 0 ? 0 : -1,
},
children: [{ type: 'text', value: tab.attributes?.title || `Tab ${i + 1}` }],
})),
},
children: [],
};
tabs.forEach((tab, i) => {
tab.data = {
hName: 'div',
hProperties: {
className: ['inline-tabs__panel'],
role: 'tabpanel',
id: `${id}-panel-${i}`,
ariaLabelledBy: `${id}-tab-${i}`,
tabIndex: 0,
...(i === 0 ? {} : { hidden: true }),
},
};
});
node.children = [list, ...tabs] as unknown as ContainerDirective['children'];
}
/** Bordered link tile: optional icon, title + description body, trailing arrow. */
function buildLinkCard(attrs: Record<string, string | null | undefined>): DirectiveNode['data'] {
const { title, description, href, icon } = attrs;
const external = !!href?.startsWith('http');
const children: ElementContent[] = [];
if (icon) {
// A registered icon is inlined so it recolors on hover; anything else is an image URL.
const svg = getLinkIcon(icon);
children.push({
type: 'element',
tagName: 'span',
properties: { className: ['link-card__icon'] },
children: [
svg
? raw(svg)
: {
type: 'element',
tagName: 'img',
properties: { src: icon, alt: '', loading: 'lazy' },
children: [],
},
],
});
}
const body: ElementContent[] = [];
Eif (title) {
body.push({
type: 'element',
tagName: 'h3',
properties: { className: ['link-card__title'] },
children: [{ type: 'text', value: title }],
});
}
if (description) {
body.push({
type: 'element',
tagName: 'p',
properties: { className: ['link-card__description'] },
children: [{ type: 'text', value: description }],
});
}
children.push({
type: 'element',
tagName: 'div',
properties: { className: ['link-card__body'] },
children: body,
});
children.push({
type: 'element',
tagName: 'span',
properties: { className: ['link-card__arrow'], ariaHidden: 'true' },
children: [raw(LINK_CARD_ARROW_SVG)],
});
return {
hName: 'a',
hProperties: {
className: ['link-card'],
href: href || '#',
...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
},
hChildren: children,
};
}
/**
* Rewrites known custom directives into HTML nodes at build time.
*
* Supported directives (documented on the Button prototype page):
* :::callout{type=info|warning|error|success} container - alert-colored callout box with a status icon
* :::variant{name=... image=...} container - variant description block
* ::storybook{url="..."} leaf - "View in Storybook" link
* ::storybook-embed{url=... title=... height=...} leaf - inline Storybook iframe
* :token{name=...} text - inline styling-hook chip
* :::card-grid{columns=1|2|3} container - grid of cards (anything else falls back to 2)
* ::card{title=... description=... href=... image=...} leaf - linked card, optional top image
* :::link-grid{columns=1|2|3} container - grid of link tiles (anything else falls back to 3)
* ::link-card{title=... description=... href=... icon=...} leaf - bordered link tile; `icon` is a
* registered link-tile icon name or an image URL
* ::image{src=... alt=... caption=... size=1|2 align=left|right} leaf - figure; size=2 is a
* half-width image floated to `align` (default left)
* :::do-dont container - side-by-side pair of ::do / ::dont
* ::do{image=... alt=... text=...} leaf - framed image with a success badge (::dont: error)
* ::::accordion container - stack of :::accordion-item
* :::accordion-item{title=... open} container - native <details>; bare `open` starts expanded
* ::::tabs container - inline ARIA tabs, one per :::tab
* :::tab{title=...} container - tab panel (only inside ::::tabs)
* :::table{variant=lines|dividers|plain outline} container - wraps a GFM table to pick its
* line style; `outline` adds an edge border + radius
*/
export function remarkSldsDirectives() {
return (tree: Root) => {
// Per-document counter for unique tab / panel ids.
let tabsCount = 0;
visit(tree, (node, index, parent) => {
if (
node.type !== 'containerDirective' &&
node.type !== 'leafDirective' &&
node.type !== 'textDirective'
) {
return;
}
const directive = node as DirectiveNode;
const attrs = directive.attributes ?? {};
switch (directive.name) {
case 'callout': {
const requested = attrs.type ?? 'info';
const type = ['warning', 'error', 'success'].includes(requested) ? requested : 'info';
directive.data = {
hName: 'aside',
hProperties: { className: [`callout callout--${type}`], role: 'note' },
};
break;
}
case 'variant': {
directive.data = {
hName: 'section',
hProperties: {
className: ['variant'],
'data-variant-name': attrs.name ?? '',
'data-variant-image': attrs.image ?? '',
},
};
break;
}
case 'storybook': {
directive.data = {
hName: 'a',
hProperties: {
className: ['storybook-link'],
href: attrs.url ?? '#',
rel: 'noopener noreferrer',
target: '_blank',
},
hChildren: [{ type: 'text', value: 'View in Storybook ↗' }],
};
break;
}
case 'storybook-embed': {
const url = attrs.url ?? '';
const height = attrs.height ?? '260';
directive.data = {
hName: 'iframe',
hProperties: {
className: ['storybook-embed'],
src: url,
'data-storybook-url': url,
title: attrs.title ?? 'Storybook example',
loading: 'lazy',
height,
sandbox: 'allow-scripts allow-same-origin',
referrerPolicy: 'no-referrer-when-downgrade',
},
hChildren: [],
};
break;
}
case 'component-demo': {
const url = attrs.storybook ?? attrs.url ?? '';
const height = attrs.height ?? '400';
const title = attrs.title ?? 'Component Demo';
directive.data = {
hName: 'div',
hProperties: {
className: ['component-demo'],
'data-storybook-url': url,
'data-sb-theme': 'light',
},
// hast children — typed loosely; unified will render them.
hChildren: [
{
type: 'element',
tagName: 'div',
properties: { className: ['component-demo__header'] },
children: [
{
type: 'element',
tagName: 'h4',
properties: { className: ['component-demo__title'] },
children: [{ type: 'text', value: title }],
},
...(url
? [
{
type: 'element',
tagName: 'div',
properties: { className: ['component-demo__actions'] },
children: [
{
type: 'element',
tagName: 'button',
properties: {
type: 'button',
className: ['component-demo__theme', 'storybook-theme-toggle'],
'aria-label': 'Toggle demo theme',
},
children: [{ type: 'text', value: '☾' }],
},
{
type: 'element',
tagName: 'a',
properties: {
href: url,
target: '_blank',
rel: 'noopener noreferrer',
className: ['component-demo__external'],
'aria-label': 'Open in Storybook',
},
children: [{ type: 'text', value: '↗' }],
},
],
},
]
: []),
],
},
{
type: 'element',
tagName: 'div',
properties: {
className: ['component-demo__frame'],
style: `--demo-height:${height}px`,
},
children: url
? [
{
type: 'element',
tagName: 'iframe',
properties: {
src: url,
'data-storybook-url': url,
title,
className: ['component-demo__iframe'],
loading: 'lazy',
sandbox: 'allow-scripts allow-same-origin',
referrerPolicy: 'no-referrer-when-downgrade',
},
children: [],
},
]
: [
{
type: 'element',
tagName: 'div',
properties: { className: ['component-demo__empty'] },
children: [{ type: 'text', value: 'No demo URL provided' }],
},
],
},
] as unknown as import('hast').ElementContent[],
};
break;
}
case 'card-grid': {
Iif (directive.type !== 'containerDirective') break;
const requested = attrs.columns ?? '';
const columns = ['1', '2', '3'].includes(requested) ? requested : '2';
directive.data = {
hName: 'div',
hProperties: { className: [`card-grid card-grid--${columns}`] },
};
break;
}
case 'card': {
Iif (directive.type === 'textDirective') break;
directive.data = buildCard(attrs);
break;
}
case 'link-grid': {
Iif (directive.type !== 'containerDirective') break;
const requested = attrs.columns ?? '';
const columns = ['1', '2', '3'].includes(requested) ? requested : '3';
directive.data = {
hName: 'div',
hProperties: { className: [`link-grid link-grid--${columns}`] },
};
break;
}
case 'link-card': {
Iif (directive.type === 'textDirective') break;
directive.data = buildLinkCard(attrs);
break;
}
case 'image': {
Iif (directive.type === 'textDirective') break;
directive.data = buildImage(attrs);
break;
}
case 'do-dont': {
Iif (directive.type !== 'containerDirective') break;
directive.data = { hName: 'div', hProperties: { className: ['do-dont-grid'] } };
break;
}
case 'do':
case 'dont': {
Iif (directive.type === 'textDirective') break;
directive.data = buildDoDont(attrs, directive.name);
break;
}
case 'accordion': {
Iif (directive.type !== 'containerDirective') break;
directive.data = { hName: 'div', hProperties: { className: ['accordion'] } };
break;
}
case 'accordion-item': {
Iif (directive.type !== 'containerDirective') break;
buildAccordionItem(directive);
break;
}
case 'tabs': {
Iif (directive.type !== 'containerDirective') break;
buildTabs(directive, `inline-tabs-${++tabsCount}`);
break;
}
case 'table': {
Iif (directive.type !== 'containerDirective') break;
const requested = attrs.variant ?? '';
const variant = ['lines', 'dividers', 'plain'].includes(requested) ? requested : 'lines';
// `outline` is a bare attribute; `outline=false` turns it off.
const outline = attrs.outline !== undefined && attrs.outline !== 'false';
const className = ['content-table', `content-table--${variant}`];
if (outline) className.push('content-table--outline');
directive.data = { hName: 'div', hProperties: { className: [className.join(' ')] } };
break;
}
case 'token': {
directive.data = {
hName: 'code',
hProperties: { className: ['token-chip'], 'data-token-name': attrs.name ?? '' },
hChildren: [{ type: 'text', value: attrs.name ?? '' }],
};
break;
}
}
// `{!$Input:Product2.Name}` or `Note:Text` isn't a directive: put back
// the literal text instead of rendering an empty <div>.
if (directive.type === 'textDirective' && !directive.data && parent && index !== undefined) {
const attrText = Object.entries(attrs)
.map(([k, v]) => (v ? `${k}="${v}"` : k))
.join(' ');
const label = directive.children.length
? [{ type: 'text', value: '[' }, ...directive.children, { type: 'text', value: ']' }]
: [];
const literal = [
{ type: 'text', value: `:${directive.name}` },
...label,
...(attrText ? [{ type: 'text', value: `{${attrText}}` }] : []),
] as TextDirective['children'];
parent.children.splice(index, 1, ...(literal as never[]));
return index + literal.length;
}
});
};
}
|