@atlaskit/code 16.2.0 → 17.0.0

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

@@ -1,325 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _constants = require("./constants");
-var _getTheme = require("./get-theme");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+exports.getLineNumWidth = exports.getCodeStyles = void 0;
 var getLineNumWidth = exports.getLineNumWidth = function getLineNumWidth(numLines) {
-  if (!numLines) {
-    return '1ch';
-  }
-  return "".concat(numLines.toFixed(0).length, "ch");
-};
-var lineNumberStyle = function lineNumberStyle(theme) {
-  return {
-    // width of the line number gutter
-    minWidth: "calc(".concat(theme.lineNumberWidth, " + ").concat(_constants.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: "".concat(theme.lineNumberColor, " !important"),
-    flexShrink: 0,
-    // needed to replicate existing design spec
-    boxSizing: 'border-box',
-    paddingRight: "".concat(_constants.SPACING, "px !important"),
-    paddingLeft: _constants.SPACING,
-    marginRight: _constants.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
-var syntaxKeywordColors = function syntaxKeywordColors(theme) {
-  return {
-    '.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)"
-      }
-    }
-  };
+  return !numLines ? '1ch' : "".concat(numLines.toFixed(0).length, "ch");
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
 /**
- * Styles applied at the root element level, common across code/codeblock
+ * @deprecated
  */
-var getBaseCodeStyles = function getBaseCodeStyles(theme) {
-  return {
-    fontSize: _constants.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(".concat(_constants.VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
-    color: theme.textColor,
-    borderStyle: 'none',
-    borderRadius: "var(--ds-border-radius, 3px)"
-  };
-};
-
-/**
- * Takes an implemented CodeBlock theme, and returns styles required for
- * react-syntax-highlighter.
- *
- * @param theme
- */
-var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyles(theme) {
-  return function (highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines) {
-    return _objectSpread(_objectSpread(_objectSpread({
-      // this is required to account for prismjs styles leaking into the codeblock
-      'code[class*="language-"], pre[class*="language-"], code': {
-        all: 'unset',
-        padding: showLineNumbers ? "".concat(_constants.SPACING, "px 0") : _constants.SPACING,
-        tabSize: 4
-      },
-      display: 'flex',
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-      lineHeight: _constants.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: "".concat(_constants.SPACING, "px !important"),
-        marginRight: "-".concat(_constants.SPACING, "px")
-      },
-      '& [data-ds--code--row--highlight]': {
-        background: "".concat(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: "\" [".concat(highlightedStartText, "] \"")
-        },
-        '&::after': {
-          content: "\" [".concat(highlightedEndText, "] \"")
-        }
-      },
-      '& [data-ds--code--row--highlight] .linenumber': {
-        borderLeft: "".concat(_constants.HIGHLIGHT_BORDER_WIDTH, " solid ").concat(theme.highlightedLineBorderColor),
-        paddingLeft: "".concat(_constants.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: _constants.HIGHLIGHT_BORDER_WIDTH,
-        top: '-1px',
-        left: "-".concat(_constants.HIGHLIGHT_BORDER_WIDTH),
-        borderTop: "1px solid ".concat(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(".concat(_constants.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(_constants.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(_constants.LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(_constants.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: "".concat(_constants.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: '" "'
-      }
-    });
-  };
-};
 var getCodeStyles = exports.getCodeStyles = function getCodeStyles() {
-  var theme = (0, _getTheme.getBaseTheme)();
-  var baseStyles = getBaseCodeStyles(theme);
-  return _objectSpread(_objectSpread({}, baseStyles), {}, {
+  return {
     display: 'inline',
     padding: '2px 0.5ch',
+    backgroundColor: "var(--ds--code--bg-color,".concat("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'
-  });
-};
-var getCodeBlockTheme = exports.getCodeBlockTheme = function getCodeBlockTheme(maxLines) {
-  return _objectSpread(_objectSpread(_objectSpread({}, (0, _getTheme.getBaseTheme)()), (0, _getTheme.getColorPalette)()), {}, {
-    lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
-  });
+  };
 };

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

@@ -13,7 +13,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = _interopRequireDefault(require("react"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-// 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
 var SyntaxHighlighter = exports.SyntaxHighlighter = /*#__PURE__*/function (_React$PureComponent) {

package/dist/es2019/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/es2019/bidi-warning/ui/styled.js

@@ -1,55 +1,19 @@
-/**
- * @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';
-const 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)"} ${"var(--ds-space-050, 4px)"}`,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    background: `var(--ds-background-warning, ${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, ${Y75})`,
-    color: "var(--ds-text-warning, #533F04)"
-  }
-});
+const decoration = {
+  root: "_kqswh2mm _szpl2smr _dsq41wug _1xyt1b66 _123w1b66 _15nnze3t _rxygze3t _1a354jg8 _1j6r1odn _1uakf6fq _1kt9y7el _is06wx40 _1rus1tzq _1cfcvrvc _24gj1h6o _19o61h6o _cfu1116y _1rbawx40 _1xqc1rd4"
+};
 export function Decorator({
   bidiCharacter,
   children,
   testId
 }) {
   const 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
@@ -57,10 +21,11 @@ export function Decorator({
     // 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 && `${testId}--visually-hidden`
-  }, jsx("mark", null, bidiCharacterCode)));
+  }, /*#__PURE__*/React.createElement("mark", null, bidiCharacterCode)));
 }
 function getBidiCharacterCode(bidiCharacter) {
   var _bidiCharacter$codePo;

package/dist/es2019/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:" "}

package/dist/es2019/code-block.js

@@ -1,15 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* code-block.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+import "./code-block.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo, useCallback, useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useHighlightLines } from './internal/hooks/use-highlight';
-import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
+import { getLineNumWidth } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
 import SyntaxHighlighter from './syntax-highlighter';
+const getCodeBlockStyles = {
+  root: "_2rkoglpi _1dqoglyw _1wyb1crf _k48pi7a9 _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _ect41odn _1ozdn7od _7xinn7od _t7aun7od _1v15u2gc _ilvcu2gc _m29uu2gc _17wyu2gc _pn28u2gc _gz9fu2gc _1hmyegat _vblregat _vbulegat _wozj1dyw _1agb1dyw _lkm81dyw _tv41hkgb _1hmimyb0 _1ra01n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _j1w0ww7y _13cdh2mm _15ba126e _zvy9f705 _qcxof705 _14y71a66 _j0l11wug _1weckb7n _1na21hna _1xx2grf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _jeky1l04 _1gec1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _1552u2gc _12afu2gc _28ddu2gc _1i8zu2gc _12tu1a66 _zu0j1a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
+  showLineNumbers: "_17071olh _1i3h1txw _1huoidpf _1a9lidpf _20bqidpf _1oggidpf _bympidpf _9nnjidpf",
+  dontShowLineNumbers: "_1i3h1ule _1huou2gc _1a9lu2gc _20bqu2gc _1oggu2gc _bympu2gc _9nnju2gc",
+  shouldWrapLongLines: "_13dgkb7n",
+  dontWrapLongLines: "_13dgkb7n"
+};
 
 /**
  * __Code block__
@@ -35,11 +41,7 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   shouldWrapLongLines = false
 }) {
   const numLines = (text || '').split('\n').length + (firstLineNumber > 0 ? firstLineNumber : 1) - 1;
-  const theme = useMemo(() => getCodeBlockTheme(numLines), [numLines]);
-  const getStyles = useMemo(() => getCodeBlockStyles(theme), [theme]);
-  const styles = useMemo(() => css(
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines)), [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
+  const lineNumberWidth = numLines ? getLineNumWidth(numLines) : 0;
   const {
     getHighlightStyles,
     highlightedLines
@@ -52,12 +54,16 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   const languageToUse = text ? language : 'text';
-  return jsx(SyntaxHighlighter, {
+  return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     "data-code-lang": language,
     "data-ds--code--code-block": "",
     testId: testId,
     language: languageToUse,
-    css: styles,
+    style: {
+      '--ads-code-line-number-width': `calc(${lineNumberWidth} + 16px)`,
+      '--ads-highlighted-start-text': highlightedStartText,
+      '--ads-highlighted-end-text': highlightedEndText
+    },
     showLineNumbers: showLineNumbers,
     firstLineNumber: firstLineNumber,
     lineProps: getLineProps
@@ -70,7 +76,8 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
     codeBidiWarnings: codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
-    text: text
+    text: text,
+    className: ax([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, showLineNumbers ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
 CodeBlock.displayName = 'CodeBlock';

package/dist/es2019/code.compiled.css

@@ -0,0 +1,16 @@
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._1dqoglyw{border-style:none}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._18m91wug{overflow-y:auto}
+._19bvm5ip{padding-left:.5ch}
+._1e0c1nu9{display:inline}
+._1i4q1hna{overflow-wrap:break-word}
+._1reo1wug{overflow-x:auto}
+._bfhktkvp{background-color:var(--ds--code--bg-color,var(--ds-background-neutral,#091e420f))}
+._ca0qyh40{padding-top:2px}
+._n3tdyh40{padding-bottom:2px}
+._o5721jtm{white-space:pre-wrap}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3m5ip{padding-right:.5ch}
+._vwz41kw7{line-height:inherit}