@atlaskit/code 16.3.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/code
 
+## 17.0.0
+
+### Major Changes
+
+- [#125263](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/125263)
+  [`1437a53a170e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1437a53a170e0) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Deprecating the `getCodeStyles` function export from the @atlaskit/code package as it is no longer
+  used.
+
+  Please note, in order to use this version of `@atlaskit/code`, you will need to ensure that your
+  bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
+  for `.css` imports, so you may not need to do anything. If you are using a different bundler,
+  please refer to the documentation for that bundler to understand how to handle `.css` imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.3.0
 
 ### Minor Changes

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

@@ -1,62 +1,28 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Decorator = Decorator;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var decoration = (0, _react2.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(_colors.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(_colors.Y75, ")"),
-    color: "var(--ds-text-warning, #533F04)"
-  }
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var decoration = {
+  root: "_kqswh2mm _szpl2smr _dsq41wug _1xyt1b66 _123w1b66 _15nnze3t _rxygze3t _1a354jg8 _1j6r1odn _1uakf6fq _1kt9y7el _is06wx40 _1rus1tzq _1cfcvrvc _24gj1h6o _19o61h6o _cfu1116y _1rbawx40 _1xqc1rd4"
+};
 function Decorator(_ref) {
   var bidiCharacter = _ref.bidiCharacter,
     children = _ref.children,
     testId = _ref.testId;
   var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
-    css: decoration,
+  return /*#__PURE__*/React.createElement(_react.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
@@ -64,10 +30,11 @@ function Decorator(_ref) {
     // visual decoration purposes.
     // We use a visually hidden `mark` element below for screen readers
     ,
-    "aria-hidden": "true"
-  }, children), (0, _react2.jsx)(_visuallyHidden.default, {
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([decoration.root])
+  }, children), /*#__PURE__*/React.createElement(_visuallyHidden.default, {
     testId: testId && "".concat(testId, "--visually-hidden")
-  }, (0, _react2.jsx)("mark", null, bidiCharacterCode)));
+  }, /*#__PURE__*/React.createElement("mark", null, bidiCharacterCode)));
 }
 function getBidiCharacterCode(bidiCharacter) {
   var _bidiCharacter$codePo;

package/dist/cjs/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/cjs/code-block.js

@@ -1,22 +1,31 @@
+/* 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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./code-block.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _useHighlight = require("./internal/hooks/use-highlight");
 var _styles = require("./internal/theme/styles");
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
 var _syntaxHighlighter = _interopRequireDefault(require("./syntax-highlighter"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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__
@@ -50,17 +59,7 @@ var CodeBlock = /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(function () {
-    return (0, _styles.getCodeBlockTheme)(numLines);
-  }, [numLines]);
-  var getStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getCodeBlockStyles)(theme);
-  }, [theme]);
-  var styles = (0, _react.useMemo)(function () {
-    return (0, _react2.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 ? (0, _styles.getLineNumWidth)(numLines) : 0;
   var _useHighlightLines = (0, _useHighlight.useHighlightLines)({
       highlight: highlight,
       testId: testId
@@ -76,12 +75,16 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var languageToUse = text ? language : 'text';
-  return (0, _react2.jsx)(_syntaxHighlighter.default, {
+  return /*#__PURE__*/React.createElement(_syntaxHighlighter.default, {
     "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
@@ -94,7 +97,8 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     codeBidiWarnings: codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
-    text: text
+    text: text,
+    className: (0, _runtime.ax)([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, showLineNumbers ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
 CodeBlock.displayName = 'CodeBlock';

package/dist/cjs/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/cjs/code.js

@@ -1,3 +1,4 @@
+/* code.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,39 +13,21 @@ Object.defineProperty(exports, "getCodeStyles", {
     return _styles.getCodeStyles;
   }
 });
+require("./code.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
 var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
-var _constants = require("./internal/theme/constants");
 var _styles = require("./internal/theme/styles");
 var _excluded = ["testId"],
   _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var styles = (0, _react2.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(_constants.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__
@@ -67,18 +50,16 @@ var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     _props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
     otherProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
-  var decoratedChildren = codeBidiWarnings ? (0, _react2.jsx)(RenderCodeChildrenWithBidiWarnings, {
+  var decoratedChildren = codeBidiWarnings ? /*#__PURE__*/_react.default.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
-    (0, _react2.jsx)("code", (0, _extends2.default)({
-      ref: ref,
-      "data-testid": testId,
-      css: styles
-    }, otherProps), decoratedChildren)
-  );
+  return /*#__PURE__*/_react.default.createElement("code", (0, _extends2.default)({
+    ref: ref,
+    "data-testid": testId
+  }, otherProps, {
+    className: (0, _runtime.ax)([styles.base])
+  }), decoratedChildren);
 }));
 function RenderCodeChildrenWithBidiWarnings(_ref2) {
   var children = _ref2.children,
@@ -89,7 +70,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
       var decorated = (0, _bidiWarningDecorator.default)(childNode, function (_ref3) {
         var bidiCharacter = _ref3.bidiCharacter,
           index = _ref3.index;
-        return (0, _react2.jsx)(_bidiWarning.default, {
+        return /*#__PURE__*/_react.default.createElement(_bidiWarning.default, {
           bidiCharacter: bidiCharacter,
           key: index,
           label: codeBidiWarningLabel,
@@ -101,7 +82,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
     if (isReactElement(childNode) && childNode.props.children) {
       // eslint-disable-next-line @repo/internal/react/no-clone-element
       var newChildNode = /*#__PURE__*/_react.default.cloneElement(childNode, {
-        children: (0, _react2.jsx)(RenderCodeChildrenWithBidiWarnings, {
+        children: /*#__PURE__*/_react.default.createElement(RenderCodeChildrenWithBidiWarnings, {
           codeBidiWarningLabel: codeBidiWarningLabel,
           codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
         }, childNode.props.children)
@@ -110,7 +91,7 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
     }
     return childNode;
   });
-  return (0, _react2.jsx)(_react.default.Fragment, null, replacedChildren);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, replacedChildren);
 }
 function isReactElement(child) {
   return !!child.type;

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

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VAR_CODE_LINE_NUMBER_BG_COLOR = exports.VAR_CODE_BG_COLOR = exports.SPACING = exports.LINE_NUMBER_GUTTER = exports.HIGHLIGHT_BORDER_WIDTH = exports.CODE_LINE_HEIGHT = exports.CODE_FONT_SIZE = exports.CODE_BLOCK_SELECTOR = void 0;
-var _constants = require("@atlaskit/theme/constants");
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-var CODE_FONT_SIZE = exports.CODE_FONT_SIZE = 12;
-var CODE_LINE_HEIGHT = exports.CODE_LINE_HEIGHT = '20px';
-var HIGHLIGHT_BORDER_WIDTH = exports.HIGHLIGHT_BORDER_WIDTH = '4px';
-var SPACING = exports.SPACING = (0, _constants.gridSize)();
-var LINE_NUMBER_GUTTER = exports.LINE_NUMBER_GUTTER = SPACING * 2;
-var VAR_CODE_LINE_NUMBER_BG_COLOR = exports.VAR_CODE_LINE_NUMBER_BG_COLOR = '--ds--code--line-number-bg-color';
-var VAR_CODE_BG_COLOR = exports.VAR_CODE_BG_COLOR = '--ds--code--bg-color';
-
+exports.CODE_BLOCK_SELECTOR = void 0;
 // selector for codeblock
 var CODE_BLOCK_SELECTOR = exports.CODE_BLOCK_SELECTOR = "data-ds--code--code-block";