@atlaskit/code 16.3.0 → 17.0.0

package/dist/esm/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';
+var 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__
@@ -43,17 +49,7 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
     shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
   var numLines = (text || '').split('\n').length + (firstLineNumber > 0 ? firstLineNumber : 1) - 1;
-  var theme = useMemo(function () {
-    return getCodeBlockTheme(numLines);
-  }, [numLines]);
-  var getStyles = useMemo(function () {
-    return getCodeBlockStyles(theme);
-  }, [theme]);
-  var styles = useMemo(function () {
-    return 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]);
+  var lineNumberWidth = numLines ? getLineNumWidth(numLines) : 0;
   var _useHighlightLines = useHighlightLines({
       highlight: highlight,
       testId: testId
@@ -69,12 +65,16 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var 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(".concat(lineNumberWidth, " + 16px)"),
+      '--ads-highlighted-start-text': highlightedStartText,
+      '--ads-highlighted-end-text': highlightedEndText
+    },
     showLineNumbers: showLineNumbers,
     firstLineNumber: firstLineNumber,
     lineProps: getLineProps
@@ -87,7 +87,8 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     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/esm/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}

package/dist/esm/code.js

@@ -1,35 +1,17 @@
+/* code.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["testId"],
   _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
-/**
- * @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';
-var 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(".concat(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'
-});
+var styles = {
+  base: "_ca0qyh40 _u5f3m5ip _n3tdyh40 _19bvm5ip _2rko1sit _11c81u0j _1reo1wug _18m91wug _1dqoglyw _1e0c1nu9 _bfhktkvp _16d9qvcn _syaz1fxt _vwz41kw7 _1i4q1hna _o5721jtm"
+};
 
 /**
  * __Code__
@@ -52,18 +34,16 @@ var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
     _props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
     otherProps = _objectWithoutProperties(props, _excluded2);
-  var decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
+  var 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(_ref2) {
   var children = _ref2.children,
@@ -74,7 +54,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
       var decorated = codeBidiWarningDecorator(childNode, function (_ref3) {
         var bidiCharacter = _ref3.bidiCharacter,
           index = _ref3.index;
-        return jsx(CodeBidiWarning, {
+        return /*#__PURE__*/React.createElement(CodeBidiWarning, {
           bidiCharacter: bidiCharacter,
           key: index,
           label: codeBidiWarningLabel,
@@ -86,7 +66,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
     if (isReactElement(childNode) && childNode.props.children) {
       // eslint-disable-next-line @repo/internal/react/no-clone-element
       var newChildNode = /*#__PURE__*/React.cloneElement(childNode, {
-        children: jsx(RenderCodeChildrenWithBidiWarnings, {
+        children: /*#__PURE__*/React.createElement(RenderCodeChildrenWithBidiWarnings, {
           codeBidiWarningLabel: codeBidiWarningLabel,
           codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
         }, childNode.props.children)
@@ -95,7 +75,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
     }
     return childNode;
   });
-  return jsx(React.Fragment, null, replacedChildren);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, replacedChildren);
 }
 function isReactElement(child) {
   return !!child.type;

package/dist/esm/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 var CODE_FONT_SIZE = 12;
-export var CODE_LINE_HEIGHT = '20px';
-export var HIGHLIGHT_BORDER_WIDTH = '4px';
-export var SPACING = gridSize();
-export var LINE_NUMBER_GUTTER = SPACING * 2;
-export var VAR_CODE_LINE_NUMBER_BG_COLOR = '--ds--code--line-number-bg-color';
-export var VAR_CODE_BG_COLOR = '--ds--code--bg-color';
-
 // selector for codeblock
 export var CODE_BLOCK_SELECTOR = "data-ds--code--code-block";

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

@@ -1,320 +1,26 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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
-
-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 var 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(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(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
-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)"
-      }
-    }
-  };
-};
-
-/**
- * Styles applied at the root element level, common across code/codeblock
- */
-var getBaseCodeStyles = function getBaseCodeStyles(theme) {
-  return {
-    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(".concat(VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
-    color: theme.textColor,
-    borderStyle: 'none',
-    borderRadius: "var(--ds-border-radius, 3px)"
-  };
+  return !numLines ? '1ch' : "".concat(numLines.toFixed(0).length, "ch");
 };
 
+// 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 var 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(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: "".concat(SPACING, "px !important"),
-        marginRight: "-".concat(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(HIGHLIGHT_BORDER_WIDTH, " solid ").concat(theme.highlightedLineBorderColor),
-        paddingLeft: "".concat(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: "-".concat(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(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(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(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 var getCodeStyles = function getCodeStyles() {
-  var theme = 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'
-  });
-};
-export var getCodeBlockTheme = function getCodeBlockTheme(maxLines) {
-  return _objectSpread(_objectSpread(_objectSpread({}, getBaseTheme()), getColorPalette()), {}, {
-    lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
-  });
+  };
 };

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

@@ -6,9 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 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 var SyntaxHighlighter = /*#__PURE__*/function (_React$PureComponent) {

package/dist/types/bidi-warning/ui/styled.d.ts

@@ -3,9 +3,8 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 export declare function Decorator({ bidiCharacter, children, testId, }: {
     bidiCharacter: string;
     children: ReactNode;
     testId?: string;
-}): jsx.JSX.Element;
+}): JSX.Element;

package/dist/types/internal/theme/constants.d.ts

@@ -1,8 +1 @@
-export declare const CODE_FONT_SIZE = 12;
-export declare const CODE_LINE_HEIGHT = "20px";
-export declare const HIGHLIGHT_BORDER_WIDTH = "4px";
-export declare const SPACING: number;
-export declare const LINE_NUMBER_GUTTER: number;
-export declare const VAR_CODE_LINE_NUMBER_BG_COLOR = "--ds--code--line-number-bg-color";
-export declare const VAR_CODE_BG_COLOR = "--ds--code--bg-color";
 export declare const CODE_BLOCK_SELECTOR = "data-ds--code--code-block";

package/dist/types/internal/theme/styles.d.ts

@@ -1,12 +1,19 @@
-import type { CSSObject } from '@emotion/react';
-import type { CodeBlockTheme } from './types';
 export declare const getLineNumWidth: (numLines: number) => string;
 /**
- * Takes an implemented CodeBlock theme, and returns styles required for
- * react-syntax-highlighter.
- *
- * @param theme
+ * @deprecated
  */
-export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, showLineNumbers: boolean, shouldWrapLongLines: boolean) => CSSObject;
-export declare const getCodeStyles: () => CSSObject;
-export declare const getCodeBlockTheme: (maxLines?: number) => CodeBlockTheme;
+export declare const getCodeStyles: () => {
+    display: string;
+    padding: string;
+    backgroundColor: string;
+    borderRadius: "var(--ds-border-radius)";
+    borderStyle: string;
+    boxDecorationBreak: string;
+    color: "var(--ds-text)";
+    fontFamily: "var(--ds-font-family-code)";
+    fontSize: string;
+    fontWeight: "var(--ds-font-weight-regular)";
+    overflow: string;
+    overflowWrap: string;
+    whiteSpace: string;
+};

package/dist/types/syntax-highlighter/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type SerializedStyles } from '@emotion/react';
+import type { XCSSAllProperties, XCSSAllPseudos, XCSSProp } from '@compiled/react';
 import { type AST, type RefractorNode } from 'refractor';
 export type { AST, RefractorNode } from 'refractor';
 export declare class SyntaxHighlighter extends React.PureComponent<SyntaxHighlighterProps> {
@@ -68,9 +68,9 @@ export interface SyntaxHighlighterProps {
      */
     shouldWrapLongLines?: boolean;
     /**
-     * Serialized styles returned from Emotion's `css()` function.
+     * Serialized styles returned from Compiled's `css()` function.
      */
-    styles?: SerializedStyles;
+    styles?: XCSSProp<XCSSAllProperties, XCSSAllPseudos>;
     /**
      * `codeBidiWarnings` is set via a prop on @atlaskit/code/CodeBlock.
      *

package/dist/types-ts4.5/bidi-warning/ui/styled.d.ts

@@ -3,9 +3,8 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 export declare function Decorator({ bidiCharacter, children, testId, }: {
     bidiCharacter: string;
     children: ReactNode;
     testId?: string;
-}): jsx.JSX.Element;
+}): JSX.Element;

package/dist/types-ts4.5/internal/theme/constants.d.ts

@@ -1,8 +1 @@
-export declare const CODE_FONT_SIZE = 12;
-export declare const CODE_LINE_HEIGHT = "20px";
-export declare const HIGHLIGHT_BORDER_WIDTH = "4px";
-export declare const SPACING: number;
-export declare const LINE_NUMBER_GUTTER: number;
-export declare const VAR_CODE_LINE_NUMBER_BG_COLOR = "--ds--code--line-number-bg-color";
-export declare const VAR_CODE_BG_COLOR = "--ds--code--bg-color";
 export declare const CODE_BLOCK_SELECTOR = "data-ds--code--code-block";

package/dist/types-ts4.5/internal/theme/styles.d.ts

@@ -1,12 +1,19 @@
-import type { CSSObject } from '@emotion/react';
-import type { CodeBlockTheme } from './types';
 export declare const getLineNumWidth: (numLines: number) => string;
 /**
- * Takes an implemented CodeBlock theme, and returns styles required for
- * react-syntax-highlighter.
- *
- * @param theme
+ * @deprecated
  */
-export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, showLineNumbers: boolean, shouldWrapLongLines: boolean) => CSSObject;
-export declare const getCodeStyles: () => CSSObject;
-export declare const getCodeBlockTheme: (maxLines?: number) => CodeBlockTheme;
+export declare const getCodeStyles: () => {
+    display: string;
+    padding: string;
+    backgroundColor: string;
+    borderRadius: "var(--ds-border-radius)";
+    borderStyle: string;
+    boxDecorationBreak: string;
+    color: "var(--ds-text)";
+    fontFamily: "var(--ds-font-family-code)";
+    fontSize: string;
+    fontWeight: "var(--ds-font-weight-regular)";
+    overflow: string;
+    overflowWrap: string;
+    whiteSpace: string;
+};