@atlaskit/code 16.2.0 → 17.0.0

package/dist/es2019/code.js

@@ -1,32 +1,14 @@
+/* code.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./code.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
-import { VAR_CODE_BG_COLOR } from './internal/theme/constants';
 import { getCodeStyles } from './internal/theme/styles';
-const styles = css({
-  display: 'inline',
-  padding: '2px 0.5ch',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(${VAR_CODE_BG_COLOR}, ${"var(--ds-background-neutral, #091E420F)"})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  borderStyle: 'none',
-  boxDecorationBreak: 'clone',
-  color: "var(--ds-text, #172B4D)",
-  font: "var(--ds-font-code, normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit',
-  overflow: 'auto',
-  overflowWrap: 'break-word',
-  whiteSpace: 'pre-wrap'
-});
+const styles = {
+  base: "_ca0qyh40 _u5f3m5ip _n3tdyh40 _19bvm5ip _2rko1sit _11c81u0j _1reo1wug _18m91wug _1dqoglyw _1e0c1nu9 _bfhktkvp _16d9qvcn _syaz1fxt _vwz41kw7 _1i4q1hna _o5721jtm"
+};
 
 /**
  * __Code__
@@ -50,18 +32,16 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
     codeBidiWarningTooltipEnabled = true,
     ...otherProps
   } = props;
-  const decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
+  const decoratedChildren = codeBidiWarnings ? /*#__PURE__*/React.createElement(RenderCodeChildrenWithBidiWarnings, {
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }, children) : children;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    jsx("code", _extends({
-      ref: ref,
-      "data-testid": testId,
-      css: styles
-    }, otherProps), decoratedChildren)
-  );
+  return /*#__PURE__*/React.createElement("code", _extends({
+    ref: ref,
+    "data-testid": testId
+  }, otherProps, {
+    className: ax([styles.base])
+  }), decoratedChildren);
 }));
 function RenderCodeChildrenWithBidiWarnings({
   children,
@@ -73,7 +53,7 @@ function RenderCodeChildrenWithBidiWarnings({
       const decorated = codeBidiWarningDecorator(childNode, ({
         bidiCharacter,
         index
-      }) => jsx(CodeBidiWarning, {
+      }) => /*#__PURE__*/React.createElement(CodeBidiWarning, {
         bidiCharacter: bidiCharacter,
         key: index,
         label: codeBidiWarningLabel,
@@ -84,7 +64,7 @@ function RenderCodeChildrenWithBidiWarnings({
     if (isReactElement(childNode) && childNode.props.children) {
       // eslint-disable-next-line @repo/internal/react/no-clone-element
       const newChildNode = /*#__PURE__*/React.cloneElement(childNode, {
-        children: jsx(RenderCodeChildrenWithBidiWarnings, {
+        children: /*#__PURE__*/React.createElement(RenderCodeChildrenWithBidiWarnings, {
           codeBidiWarningLabel: codeBidiWarningLabel,
           codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
         }, childNode.props.children)
@@ -93,7 +73,7 @@ function RenderCodeChildrenWithBidiWarnings({
     }
     return childNode;
   });
-  return jsx(React.Fragment, null, replacedChildren);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, replacedChildren);
 }
 function isReactElement(child) {
   return !!child.type;

package/dist/es2019/constants.js

@@ -321,6 +321,10 @@ export const SUPPORTED_LANGUAGES = [{
   name: 'Protocol Buffers',
   alias: ['protobuf', 'proto'],
   value: 'protobuf'
+}, {
+  name: 'Handlebars',
+  alias: ['handlebars', 'mustache'],
+  value: 'handlebars'
 }, {
   name: 'ABAP',
   alias: ['abap'],

package/dist/es2019/internal/theme/constants.js

@@ -1,12 +1,2 @@
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-export const CODE_FONT_SIZE = 12;
-export const CODE_LINE_HEIGHT = '20px';
-export const HIGHLIGHT_BORDER_WIDTH = '4px';
-export const SPACING = gridSize();
-export const LINE_NUMBER_GUTTER = SPACING * 2;
-export const VAR_CODE_LINE_NUMBER_BG_COLOR = '--ds--code--line-number-bg-color';
-export const VAR_CODE_BG_COLOR = '--ds--code--bg-color';
-
 // selector for codeblock
 export const CODE_BLOCK_SELECTOR = `data-ds--code--code-block`;

package/dist/es2019/internal/theme/styles.js

@@ -1,312 +1,26 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
-import { getBaseTheme, getColorPalette } from './get-theme';
 export const getLineNumWidth = numLines => {
-  if (!numLines) {
-    return '1ch';
-  }
-  return `${numLines.toFixed(0).length}ch`;
+  return !numLines ? '1ch' : `${numLines.toFixed(0).length}ch`;
 };
-const lineNumberStyle = theme => ({
-  // width of the line number gutter
-  minWidth: `calc(${theme.lineNumberWidth} + ${LINE_NUMBER_GUTTER}px) !important`,
-  // this needs to be important or it gets overwritten by inline styles
-  fontStyle: 'normal !important',
-  // this needs to be important or it gets overwritten by inline styles
-  color: `${theme.lineNumberColor} !important`,
-  flexShrink: 0,
-  // needed to replicate existing design spec
-  boxSizing: 'border-box',
-  paddingRight: `${SPACING}px !important`,
-  paddingLeft: SPACING,
-  marginRight: SPACING,
-  textAlign: 'right',
-  userSelect: 'none',
-  // this is to fix SSR spacing issue
-  display: 'block',
-  // This is how we are preventing line numbers being copied to clipboard.
-  // (`user-select: none;` was not sufficent).
-  // https://product-fabric.atlassian.net/browse/DSP-2729
-  '&::after': {
-    content: `attr(data-ds--line-number)`
-  }
-});
-
-// order of these keys does matter as it will affect the css precedence
-const syntaxKeywordColors = theme => ({
-  '.token': {
-    // this specifically stops prism css cascading.
-    '&:not([class=token],[data-ds--code--row--highlight],[data-ds--code--row])': {
-      all: 'unset'
-    },
-    // additional specificity required to match the all: unset
-    '&.key,&.keyword': {
-      color: theme.keywordColor,
-      fontWeight: 'bolder'
-    },
-    '&.attr-name': {
-      color: theme.attributeColor
-    },
-    '&.selector': {
-      color: theme.selectorTagColor
-    },
-    '&.comment,&.block-comment': {
-      color: theme.commentColor,
-      fontFamily: theme.fontFamilyItalic,
-      fontStyle: 'italic'
-    },
-    '&.function-name': {
-      color: theme.sectionColor
-    },
-    '&.doctype': {
-      color: theme.docTagColor
-    },
-    '&.substr': {
-      color: theme.substringColor
-    },
-    '&.namespace': {
-      color: theme.nameColor
-    },
-    '&.builtin': {
-      color: theme.builtInColor
-    },
-    '&.entity': {
-      color: theme.literalColor
-    },
-    '&.bullet': {
-      color: theme.bulletColor
-    },
-    '&.code': {
-      color: theme.codeColor
-    },
-    '&.regex': {
-      color: theme.regexpColor
-    },
-    '&.symbol': {
-      color: theme.symbolColor
-    },
-    '&.variable': {
-      color: theme.variableColor
-    },
-    '&.url': {
-      color: theme.linkColor
-    },
-    '&.selector-attr': {
-      color: theme.selectorAttributeColor
-    },
-    '&.selector-pseudo': {
-      color: theme.selectorPseudoColor
-    },
-    '&.type': {
-      color: theme.typeColor
-    },
-    '&.quote': {
-      color: theme.quoteColor
-    },
-    '&.tag': {
-      color: theme.templateTagColor
-    },
-    '&.string': {
-      color: theme.stringColor
-    },
-    '&.class-name': {
-      color: theme.sectionColor
-    },
-    '&.title': {
-      color: theme.titleColor
-    },
-    '&.section': {
-      color: theme.sectionColor
-    },
-    '&.meta-keyword': {
-      color: theme.metaKeywordColor
-    },
-    '&.meta': {
-      color: theme.metaColor
-    },
-    '&.italic': {
-      fontStyle: 'italic'
-    },
-    '&.bold': {
-      fontWeight: 'bolder'
-    },
-    '&.function': {
-      color: theme.functionColor
-    },
-    '&.number': {
-      color: theme.numberColor
-    },
-    '&.attr-value': {
-      color: theme.attributeColor
-    },
-    '&.prolog': {
-      color: theme.prologColor
-    },
-    '&.cdata': {
-      color: theme.cdataColor
-    },
-    '&.punctuation': {
-      color: theme.punctuationColor
-    },
-    '&.property': {
-      color: theme.propertyColor
-    },
-    '&.constant': {
-      color: theme.constantColor
-    },
-    '&.deleted': {
-      color: theme.deletedColor
-    },
-    '&.boolean': {
-      color: theme.booleanColor
-    },
-    '&.char': {
-      color: theme.charColor
-    },
-    '&.inserted': {
-      color: theme.insertedColor
-    },
-    '&.operator': {
-      color: theme.operatorColor
-    },
-    '&.atrule': {
-      color: theme.atruleColor
-    },
-    '&.important': {
-      color: theme.importantColor,
-      fontWeight: "var(--ds-font-weight-bold, 700)"
-    }
-  }
-});
-
-/**
- * Styles applied at the root element level, common across code/codeblock
- */
-const getBaseCodeStyles = theme => ({
-  fontSize: CODE_FONT_SIZE,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontFamily: theme.fontFamily,
-  fontWeight: "var(--ds-font-weight-regular, 400)",
-  backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
-  color: theme.textColor,
-  borderStyle: 'none',
-  borderRadius: "var(--ds-border-radius, 3px)"
-});
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
 /**
- * Takes an implemented CodeBlock theme, and returns styles required for
- * react-syntax-highlighter.
- *
- * @param theme
+ * @deprecated
  */
-export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines) => ({
-  // this is required to account for prismjs styles leaking into the codeblock
-  'code[class*="language-"], pre[class*="language-"], code': {
-    all: 'unset',
-    padding: showLineNumbers ? `${SPACING}px 0` : SPACING,
-    tabSize: 4
-  },
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: CODE_LINE_HEIGHT,
-  overflowX: 'auto',
-  whiteSpace: 'pre',
-  direction: 'ltr',
-  ...getBaseCodeStyles(theme),
-  ...syntaxKeywordColors(theme),
-  // this is to account for SSR spacing issue once loaded in browser
-  '& .linenumber, .ds-sh-line-number': lineNumberStyle(theme),
-  '& .linenumber': {
-    display: 'inline-block !important',
-    float: 'left'
-  },
-  // these styles are for line highlighting
-  '& [data-ds--code--row]': {
-    display: showLineNumbers ? 'flex' : 'block',
-    paddingRight: `${SPACING}px !important`,
-    marginRight: `-${SPACING}px`
-  },
-  '& [data-ds--code--row--highlight]': {
-    background: `${theme.highlightedLineBgColor}`,
-    // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
-    '&::before, &::after': {
-      clipPath: 'inset(100%)',
-      clip: 'rect(1px, 1px, 1px, 1px)',
-      height: '1px',
-      overflow: 'hidden',
-      position: 'absolute',
-      whiteSpace: 'nowrap',
-      width: '1px'
-    },
-    // The formatting here is an accessibility convention
-    '&::before': {
-      content: `" [${highlightedStartText}] "`
-    },
-    '&::after': {
-      content: `" [${highlightedEndText}] "`
-    }
-  },
-  '& [data-ds--code--row--highlight] .linenumber': {
-    borderLeft: `${HIGHLIGHT_BORDER_WIDTH} solid ${theme.highlightedLineBorderColor}`,
-    paddingLeft: `${SPACING / 2}px !important`,
-    position: 'relative'
-  },
-  // fill in space caused by parent border top
-  '& [data-ds--code--row--highlight] .linenumber::before': {
-    content: '""',
-    position: 'absolute',
-    width: HIGHLIGHT_BORDER_WIDTH,
-    top: '-1px',
-    left: `-${HIGHLIGHT_BORDER_WIDTH}`,
-    borderTop: `1px solid ${theme.highlightedLineBorderColor}`
-  },
-  '[data-ds--code--row--highlight] + [data-ds--code--row]:not([data-ds--code--row--highlight]), [data-ds--code--row]:not([data-ds--code--row--highlight]) + [data-ds--code--row--highlight]': {
-    borderTop: '1px dashed transparent'
-  },
-  '[data-ds--code--row--highlight]:last-child': {
-    borderBottom: '1px dashed transparent'
-  },
-  '& code:first-of-type': {
-    paddingRight: `0px !important`,
-    backgroundImage: showLineNumbers ? `linear-gradient(to right, var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor}), var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor})
-    calc(${theme.lineNumberWidth} + ${LINE_NUMBER_GUTTER}px), transparent calc(${theme.lineNumberWidth} + ${LINE_NUMBER_GUTTER}px), transparent)` : undefined
-  },
-  // we need to use last-of-type because when Code is SSR'd
-  // 2 <code> elements are created and we don't want this style
-  // applied to the first one
-  '& code:last-of-type': {
-    paddingRight: `${SPACING}px !important`,
-    flexBasis: 'auto',
-    flexGrow: 1,
-    // Needed for the highlight line to extend full-width
-    flexShrink: shouldWrapLongLines ? 1 : 0,
-    wordBreak: 'break-word'
-  },
-  // Prevents empty code blocks from vertically collapsing
-  'code > span:only-child:empty:before, code > span:only-child > span:only-child:empty:before': {
-    content: '" "'
-  }
-});
 export const getCodeStyles = () => {
-  const theme = getBaseTheme();
-  const baseStyles = getBaseCodeStyles(theme);
   return {
-    ...baseStyles,
     display: 'inline',
     padding: '2px 0.5ch',
+    backgroundColor: `var(--ds--code--bg-color,${"var(--ds-background-neutral, #091E420F)"})`,
+    borderRadius: "var(--ds-border-radius, 3px)",
+    borderStyle: 'none',
     boxDecorationBreak: 'clone',
+    color: "var(--ds-text, #172B4D)",
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875em',
+    fontWeight: "var(--ds-font-weight-regular, 400)",
     overflow: 'auto',
     overflowWrap: 'break-word',
     whiteSpace: 'pre-wrap'
   };
-};
-export const getCodeBlockTheme = maxLines => {
-  return {
-    ...getBaseTheme(),
-    ...getColorPalette(),
-    lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
-  };
 };

package/dist/es2019/syntax-highlighter/types.js

@@ -1,7 +1,4 @@
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // This wrapper supports the async loading of refractor and language grammars. The internal Highlight is a memo() functional component as expected
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class SyntaxHighlighter extends React.PureComponent {}

package/dist/esm/bidi-warning/ui/styled.compiled.css

@@ -0,0 +1,19 @@
+
+._szpl2smr:before{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._123w1b66:before{padding-inline-end:var(--ds-space-050,4px)}
+._15nnze3t:before{padding-block-start:var(--ds-space-0,0)}
+._19o61h6o:before{align-items:center}
+._1a354jg8:before{font-style:normal}
+._1cfcvrvc:before{flex-direction:row}
+._1j6r1odn:before{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._1kt9y7el:before{content:"<"attr(data-bidi-character-code)">"}
+._1rbawx40:hover:before{color:var(--ds-text-warning,#a54800)}
+._1rus1tzq:before{background-color:var(--ds-background-warning,#fff7d6)}
+._1uakf6fq:before{line-height:18px}
+._1xqc1rd4:hover:before{background-color:var(--ds-background-warning-hovered,#f8e6a0)}
+._1xyt1b66:before{padding-inline-start:var(--ds-space-050,4px)}
+._24gj1h6o:before{justify-content:center}
+._cfu1116y:before{display:inline-flex}
+._dsq41wug:before{pointer-events:auto}
+._is06wx40:before{color:var(--ds-text-warning,#a54800)}
+._kqswh2mm{position:relative}
+._rxygze3t:before{padding-block-end:var(--ds-space-0,0)}

package/dist/esm/bidi-warning/ui/styled.js

@@ -1,54 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Y75 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-var decoration = css({
-  // Required as otherwise the following bidi characters cause the span
-  // to not receive hover events.
-  //
-  // U+2066 LEFT-TO-RIGHT ISOLATE (when using pseudo element before)
-  // U+202E RIGHT-TO-LEFT OVERRIDE' (when using pseudo element after)
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':before': {
-    display: 'inline-flex',
-    padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    background: "var(--ds-background-warning, ".concat(Y75, ")"),
-    color: "var(--ds-text-warning, #7F5F01)",
-    content: '"<"attr(data-bidi-character-code)">"',
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-    fontStyle: 'normal',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '18px',
-    /**
-     * Ensures the decoration receives pointer events when it occurs with
-     * an ancestor that disables them.
-     */
-    pointerEvents: 'auto'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover:before': {
-    background: "var(--ds-background-warning-hovered, ".concat(Y75, ")"),
-    color: "var(--ds-text-warning, #533F04)"
-  }
-});
+var decoration = {
+  root: "_kqswh2mm _szpl2smr _dsq41wug _1xyt1b66 _123w1b66 _15nnze3t _rxygze3t _1a354jg8 _1j6r1odn _1uakf6fq _1kt9y7el _is06wx40 _1rus1tzq _1cfcvrvc _24gj1h6o _19o61h6o _cfu1116y _1rbawx40 _1xqc1rd4"
+};
 export function Decorator(_ref) {
   var bidiCharacter = _ref.bidiCharacter,
     children = _ref.children,
     testId = _ref.testId;
   var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
-  return jsx(Fragment, null, jsx("span", {
-    css: decoration,
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
     "data-bidi-character-code": bidiCharacterCode
     // This is set to true so that the content is not read out by
@@ -56,10 +20,11 @@ export function Decorator(_ref) {
     // visual decoration purposes.
     // We use a visually hidden `mark` element below for screen readers
     ,
-    "aria-hidden": "true"
-  }, children), jsx(VisuallyHidden, {
+    "aria-hidden": "true",
+    className: ax([decoration.root])
+  }, children), /*#__PURE__*/React.createElement(VisuallyHidden, {
     testId: testId && "".concat(testId, "--visually-hidden")
-  }, jsx("mark", null, bidiCharacterCode)));
+  }, /*#__PURE__*/React.createElement("mark", null, bidiCharacterCode)));
 }
 function getBidiCharacterCode(bidiCharacter) {
   var _bidiCharacter$codePo;

package/dist/esm/code-block.compiled.css

@@ -0,0 +1,105 @@
+
+._1ozdn7od code, ._7xinn7od code[class*=language-], ._t7aun7od pre[class*=language-]{all:unset}
+._i7ngn7od .token:not([class=token],[data-ds--code--row--highlight],[data-ds--code--row]){all:unset}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._1dqoglyw{border-style:none}
+._1agb1dyw [data-ds--code--row--highlight]+[data-ds--code--row]:not([data-ds--code--row--highlight]), ._lkm81dyw [data-ds--code--row]:not([data-ds--code--row--highlight])+[data-ds--code--row--highlight]{border-top:1px dashed transparent}
+._j1w0ww7y [data-ds--code--row--highlight] .linenumber{border-left:4px solid var(--ds-border-focused,#388bff)}
+._tv41hkgb [data-ds--code--row--highlight] .linenumber:before{border-top:1px solid var(--ds-border-focused,#388bff)}
+._wozj1dyw [data-ds--code--row--highlight]:last-child{border-bottom:1px dashed transparent}._113p131l .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.cdata{color:var(--ds-text-subtlest,#626f86)}
+._12l6ysn8 [data-ds--code--row--highlight]:after, ._uga3ysn8 [data-ds--code--row--highlight]:before{clip-path:inset(100%)}
+._12nh9lu1 .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.deleted{color:var(--ds-text-accent-red,#ae2e24)}
+._12tu1a66 .linenumber, ._zu0j1a66 .ds-sh-line-number{padding-right:var(--ds-space-100,8px)!important}
+._131n1giz .linenumber, ._gy101giz .ds-sh-line-number{font-style:normal!important}
+._137bh55r .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.inserted{color:var(--ds-text-accent-green,#216e4e)}
+._13cdh2mm [data-ds--code--row--highlight] .linenumber{position:relative}
+._13dgkb7n code:last-of-type{flex-shrink:1}
+._13zt131l .token.token.token.token.token.token.token.substr{color:var(--ds-text-subtlest,#626f86)}
+._14y71a66 code:last-of-type{padding-right:var(--ds-space-100,8px)!important}
+._1552u2gc .linenumber, ._12afu2gc .ds-sh-line-number{margin-right:var(--ds-space-100,8px)}
+._15ba126e [data-ds--code--row--highlight] .linenumber{padding-left:var(--ds-space-050,4px)!important}
+._17071olh code:first-of-type{background-image:linear-gradient(to right,var(--ds--code--line-number-bg-color,var(--ds-background-neutral,#091e420f)),var(--ds--code--line-number-bg-color,var(--ds-background-neutral,#091e420f)) var(--ads-code-line-number-width),transparent var(--ads-code-line-number-width),transparent)}
+._17wyu2gc code, ._pn28u2gc code[class*=language-], ._gz9fu2gc pre[class*=language-]{padding-bottom:var(--ds-space-100,8px)}
+._19o610m5 .token.token.token.token.token.token.token.token.token.token.url{color:var(--ds-text-accent-purple,#5e4db2)}
+._1b9tpnps .token.token.token.token.token.token.token.token.builtin, ._1tq6pnps .token.token.token.token.token.token.token.token.bullet, ._1rd2pnps .token.token.token.token.token.token.token.token.code, ._1pbkpnps .token.token.token.token.token.token.token.token.entity, ._k3lipnps .token.token.token.token.token.token.token.token.namespace{color:var(--ds-text-accent-blue,#05c)}
+._1d4j1y44 [data-ds--code--row--highlight] .linenumber:before{width:4px}
+._1e0c1txw{display:flex}
+._1eimjvyg{direction:ltr}
+._1exb1q9c [data-ds--code--row--highlight]:after, ._1hgu1q9c [data-ds--code--row--highlight]:before{white-space:nowrap}
+._1f0gpnps .token.token.token.selector{color:var(--ds-text-accent-blue,#05c)}
+._1f8gstnw [data-ds--code--row--highlight] .linenumber:before{position:absolute}
+._1g0517qg .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.constant{color:var(--ds-text-accent-teal,#206a83)}
+._1gec1a66 [data-ds--code--row]{padding-right:var(--ds-space-100,8px)!important}
+._1gx21e5h .linenumber{float:left}
+._1hmimyb0 [data-ds--code--row--highlight] .linenumber:before{left:-4px}
+._1hmyegat code, ._vblregat code[class*=language-], ._vbulegat pre[class*=language-]{tab-size:4}
+._1huoidpf code, ._1a9lidpf code[class*=language-], ._20bqidpf pre[class*=language-]{padding-right:0}
+._1huou2gc code, ._1a9lu2gc code[class*=language-], ._20bqu2gc pre[class*=language-]{padding-right:var(--ds-space-100,8px)}
+._1i3h1txw [data-ds--code--row]{display:flex}
+._1i3h1ule [data-ds--code--row]{display:block}
+._1k47pnps .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.number{color:var(--ds-text-accent-blue,#05c)}
+._1k7d1fxt .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.char{color:var(--ds-text,#172b4d)}
+._1ls01ule .linenumber, ._rude1ule .ds-sh-line-number{display:block}
+._1ls0df4r .linenumber{display:inline-block!important}
+._1m3815vq [data-ds--code--row--highlight]:after, ._qk1e15vq [data-ds--code--row--highlight]:before{overflow-y:hidden}
+._1mgnt94y [data-ds--code--row--highlight]:after, ._nhket94y [data-ds--code--row--highlight]:before{width:1px}
+._1n6tpnps .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.prolog{color:var(--ds-text-accent-blue,#05c)}
+._1na21hna code:last-of-type{word-break:break-word}
+._1oggidpf code, ._bympidpf code[class*=language-], ._9nnjidpf pre[class*=language-]{padding-left:0}
+._1oggu2gc code, ._bympu2gc code[class*=language-], ._9nnju2gc pre[class*=language-]{padding-left:var(--ds-space-100,8px)}
+._1pzyb3bt [data-ds--code--row--highlight] .linenumber:before{content:""}
+._1q16glyw .linenumber, ._1io6glyw .ds-sh-line-number{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._1ra01n1a [data-ds--code--row--highlight] .linenumber:before{top:-1px}
+._1reo1wug{overflow-x:auto}
+._1t361fxt .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.operator{color:var(--ds-text,#172b4d)}
+._1v0lh55r .token.token.token.token.token.token.token.token.token.token.token.token.string{color:var(--ds-text-accent-green,#216e4e)}
+._1v15u2gc code, ._ilvcu2gc code[class*=language-], ._m29uu2gc pre[class*=language-]{padding-top:var(--ds-space-100,8px)}
+._1weckb7n code:last-of-type{flex-grow:1}
+._1wfuwrk5 .linenumber, ._16kzwrk5 .ds-sh-line-number{min-width:var(--ads-code-line-number-width)!important}
+._1wyb1crf{font-size:9pt}
+._1xcoh55r .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.atrule{color:var(--ds-text-accent-green,#216e4e)}
+._1xx2grf3 code:first-of-type{padding-right:0!important}
+._1yvq10m5 .token.token.token.token.token.token.token.token.token.token.token.token.token.class-name, ._1vww10m5 .token.token.token.token.token.token.token.token.token.token.token.token.token.section, ._1rju10m5 .token.token.token.token.token.token.token.token.token.token.token.token.token.title{color:var(--ds-text-accent-purple,#5e4db2)}
+._28ddu2gc .linenumber, ._1i8zu2gc .ds-sh-line-number{padding-left:var(--ds-space-100,8px)}
+._2g12fb2s .token.token.token.token.token.token.doctype{color:var(--ds-text-accent-yellow,#7f5f01)}
+._326z1fxt .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.punctuation{color:var(--ds-text,#172b4d)}
+._7gp8h55r .token.token.token.token.token.token.token.token.token.token.token.token.token.token.meta-keyword{color:var(--ds-text-accent-green,#216e4e)}
+._97lipnps .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.boolean{color:var(--ds-text-accent-blue,#05c)}
+._9d3e17qg .token.token.attr-name{color:var(--ds-text-accent-teal,#206a83)}
+._9k2r1m30 .token.italic{font-style:italic}
+._9kk3moej .token.important{font-weight:var(--ds-font-weight-bold,700)}
+._9wu1fb2s .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.important{color:var(--ds-text-accent-yellow,#7f5f01)}
+._b5iy131l .token.token.token.token.block-comment, ._gti3131l .token.token.token.token.comment{color:var(--ds-text-subtlest,#626f86)}
+._bfhktkvp{background-color:var(--ds--code--bg-color,var(--ds-background-neutral,#091e420f))}
+._cjus1w1g .token.bold:not(.important){font-weight:bolder}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._eiht5x2v .token.block-comment:not(.italic), ._t9zb5x2v .token.comment:not(.italic){font-family:SFMono-MediumItalic,var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._euyxusvi .linenumber, ._cahfusvi .ds-sh-line-number{box-sizing:border-box}
+._g0lx1fxt .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.function{color:var(--ds-text,#172b4d)}
+._h909m7j4 [data-ds--code--row--highlight]{background-color:var(--ds-background-neutral,#091e420f)}
+._i2ig10m5 .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.property{color:var(--ds-text-accent-purple,#5e4db2)}
+._ipl81e17 [data-ds--code--row--highlight]:before{content:" [var(--ads-highlighted-start-text)] "}
+._j0l11wug code:last-of-type{flex-basis:auto}
+._jeky1l04 [data-ds--code--row]{margin-right:-var(--ds-space-100,8px)}
+._juomusic .linenumber, ._lcwuusic .ds-sh-line-number{text-align:right}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._k86b10m5 .token.token.token.token.token.function-name{color:var(--ds-text-accent-purple,#5e4db2)}
+._kxov17qg .token.token.token.token.token.token.token.token.token.regex, ._1np517qg .token.token.token.token.token.token.token.token.token.symbol, ._m2f517qg .token.token.token.token.token.token.token.token.token.variable{color:var(--ds-text-accent-teal,#206a83)}
+._mbgcpf9b .linenumber, ._bu7zpf9b .ds-sh-line-number{color:var(--ds-text-subtlest,#626f86)!important}
+._mqok1w1g .token.key:not(.important,.bold), ._3hsg1w1g .token.keyword:not(.important,.bold){font-weight:bolder}
+._mx8b7mnp [data-ds--code--row--highlight]:after, ._1kr87mnp [data-ds--code--row--highlight]:before{clip:rect(1px,1px,1px,1px)}
+._nalpstnw [data-ds--code--row--highlight]:after, ._151dstnw [data-ds--code--row--highlight]:before{position:absolute}
+._nhmw1m30 .token.block-comment:not(.italic), ._yl021m30 .token.comment:not(.italic){font-style:italic}
+._o572qvpr{white-space:pre}
+._qdiapnps .token.key, ._72uvpnps .token.keyword{color:var(--ds-text-accent-blue,#05c)}
+._scgayz1z [data-ds--code--row--highlight]:after{content:" [var(--ads-highlighted-end-text)] "}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._tgu817qg .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.attr-value{color:var(--ds-text-accent-teal,#206a83)}
+._vm2c1rh5 .linenumber:after, ._12ok1rh5 .ds-sh-line-number:after{content:attr(data-ds--line-number)}
+._vwz4gktf{line-height:20px}
+._wmyy17qg .token.token.token.token.token.token.token.token.token.token.token.quote, ._748n17qg .token.token.token.token.token.token.token.token.token.token.token.selector-attr, ._1mfn17qg .token.token.token.token.token.token.token.token.token.token.token.selector-pseudo, ._1d7e17qg .token.token.token.token.token.token.token.token.token.token.token.tag, ._p2vr17qg .token.token.token.token.token.token.token.token.token.token.token.type{color:var(--ds-text-accent-teal,#206a83)}
+._x7c815vq [data-ds--code--row--highlight]:after, ._lh0y15vq [data-ds--code--row--highlight]:before{overflow-x:hidden}
+._xo19t94y [data-ds--code--row--highlight]:after, ._1bemt94y [data-ds--code--row--highlight]:before{height:1px}
+._ys4e131l .token.token.token.token.token.token.token.token.token.token.token.token.token.token.token.meta{color:var(--ds-text-subtlest,#626f86)}
+._zhnuidpf .linenumber, ._1amdidpf .ds-sh-line-number{flex-shrink:0}
+._zvy9f705 code>span:only-child:empty:before, ._qcxof705 code>span:only-child>span:only-child:empty:before{content:" "}