@atlaskit/code 14.6.8 → 15.0.0

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

@@ -75,7 +75,7 @@ var generator = function generator(options) {
   (0, _defineProperty2.default)(AsyncHighlighter, "highlightInstance", _highlight.default);
   return AsyncHighlighter;
 };
-var _default = generator({
+var _default = exports.default = generator({
   loader: function loader() {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_refractor-import" */
@@ -85,5 +85,4 @@ var _default = generator({
       return module.default || module;
     });
   }
-});
-exports.default = _default;
+});

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

@@ -40,5 +40,4 @@ var _async = _interopRequireDefault(require("./async"));
  * @atlaskit/code uses this under-the-hood, but it is not intended for public consumption.
  * You should be using @atlaskit/code directly.
  */
-var _default = _async.default;
-exports.default = _default;
+var _default = exports.default = _async.default;

package/dist/cjs/syntax-highlighter/lib/highlight.js

@@ -87,5 +87,4 @@ var Highlight = /*#__PURE__*/(0, _react.memo)(function Highlight(_ref) {
     codeBidiWarningConfig: codeBidiWarningConfig
   });
 });
-var _default = Highlight;
-exports.default = _default;
+var _default = exports.default = Highlight;

package/dist/cjs/syntax-highlighter/lib/process/create-line.js

@@ -28,5 +28,4 @@ function createLineGenerator(lineProps, shouldCreateParentElementForLines, showL
     }
   };
 }
-var _default = createLineGenerator;
-exports.default = _default;
+var _default = exports.default = createLineGenerator;

package/dist/cjs/syntax-highlighter/lib/process/index.js

@@ -39,7 +39,7 @@ function processLines(_ref) {
     var testNode = tree[index];
     if (testNode.type === 'text') {
       index++;
-      return "continue";
+      return 1; // continue
     }
     var node = testNode;
     var firstChildNode = node.children[0];
@@ -100,8 +100,7 @@ function processLines(_ref) {
     index++;
   };
   while (index < tree.length) {
-    var _ret = _loop();
-    if (_ret === "continue") continue;
+    if (_loop()) continue;
   }
   if (lastLineBreakIndex !== tree.length - 1) {
     var children = tree.slice(lastLineBreakIndex + 1, tree.length);

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

@@ -15,7 +15,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // 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 = /*#__PURE__*/function (_React$PureComponent) {
+var SyntaxHighlighter = exports.SyntaxHighlighter = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(SyntaxHighlighter, _React$PureComponent);
   var _super = _createSuper(SyntaxHighlighter);
   function SyntaxHighlighter() {
@@ -32,5 +32,4 @@ var SyntaxHighlighter = /*#__PURE__*/function (_React$PureComponent) {
  * Props to be passed to the `span` wrapping each code line. Can be an
  * object or a function that receives current line number as argument and
  * returns a props object.
- */
-exports.SyntaxHighlighter = SyntaxHighlighter;
+ */

package/dist/es2019/code-block.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -30,8 +29,7 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   shouldWrapLongLines = false
 }) {
   const numLines = (text || '').split('\n').length;
-  const globalTheme = useGlobalTheme();
-  const theme = useMemo(() => getCodeBlockTheme(globalTheme, numLines), [globalTheme, numLines]);
+  const theme = useMemo(() => getCodeBlockTheme(numLines), [numLines]);
   const getStyles = useMemo(() => getCodeBlockStyles(theme), [theme]);
   const styles = useMemo(() => css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines)), [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
   const {

package/dist/es2019/code.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
@@ -19,8 +18,7 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
   testId,
   ...props
 }, ref) {
-  const theme = useGlobalTheme();
-  const styles = useMemo(() => css(getCodeStyles(theme)), [theme]);
+  const styles = css(getCodeStyles());
   const {
     children,
     codeBidiWarnings = true,

package/dist/es2019/internal/theme/get-theme.js

@@ -1,228 +1,69 @@
 import memoizeOne from 'memoize-one';
 import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 import { codeFontFamily } from '@atlaskit/theme/constants';
 // Hardcoded values have been used due to the current color palette not having any
 // accessible color options for Teal and Yellow and +20A
 const T800 = '#067384';
 const Y1100 = '#7A5D1A';
-const PLUS20 = '#3A434E';
-export const getBaseTheme = theme => ({
+export const getBaseTheme = () => ({
   fontFamily: codeFontFamily(),
   fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
-  backgroundColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N20})`,
-    dark: `var(--ds-background-neutral, ${colors.DN50})`
-  })({
-    theme
-  }),
-  textColor: themed({
-    light: `var(--ds-text, ${colors.N800})`,
-    dark: `var(--ds-text, ${colors.DN800})`
-  })({
-    theme
-  }),
-  lineNumberColor: themed({
-    light: `var(--ds-text-subtlest, ${colors.N400})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN400})`
-  })({
-    theme
-  }),
-  lineNumberBgColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N30})`,
-    dark: `var(--ds-background-neutral, ${colors.DN20})`
-  })({
-    theme
-  })
+  backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
+  textColor: `var(--ds-text, ${colors.N800})`,
+  lineNumberColor: `var(--ds-text-subtlest, ${colors.N400})`,
+  lineNumberBgColor: `var(--ds-background-neutral, ${colors.N30})`
 });
-export const defaultBaseTheme = getBaseTheme({
-  mode: 'light'
-});
-export const getColorPalette = memoizeOne(theme => {
-  const akTheme = {
-    theme
-  };
+export const defaultBaseTheme = getBaseTheme();
+export const getColorPalette = memoizeOne(() => {
   return {
-    highlightedLineBgColor: themed({
-      light: `var(--ds-background-neutral, ${colors.N30})`,
-      dark: `var(--ds-background-neutral, ${PLUS20})`
-    })(akTheme),
-    highlightedLineBorderColor: themed({
-      light: `var(--ds-border-focused, ${colors.B200})`,
-      dark: `var(--ds-border-focused, ${colors.B100})`
-    })(akTheme),
-    substringColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    keywordColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    attributeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    selectorTagColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    docTagColor: themed({
-      light: `var(--ds-text-accent-yellow, ${Y1100})`,
-      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
-    })(akTheme),
-    nameColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    builtInColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    literalColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    bulletColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    codeColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    regexpColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    symbolColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    variableColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    templateVariableColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    linkColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    selectorAttributeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    selectorPseudoColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    typeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    stringColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    selectorIdColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    selectorClassColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    quoteColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    templateTagColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    titleColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    sectionColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    commentColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    metaKeywordColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    metaColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    functionColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    numberColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    prologColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    cdataColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.B75})`
-    })(akTheme),
-    punctuationColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    propertyColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    constantColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    booleanColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    charColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    insertedColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.B75})`
-    })(akTheme),
-    deletedColor: themed({
-      light: `var(--ds-text-accent-red, ${colors.R500})`,
-      dark: `var(--ds-text-accent-red, ${colors.B75})`
-    })(akTheme),
-    operatorColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.B75})`
-    })(akTheme),
-    atruleColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    importantColor: themed({
-      light: `var(--ds-text-accent-yellow, ${Y1100})`,
-      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
-    })(akTheme)
+    highlightedLineBgColor: `var(--ds-background-neutral, ${colors.N30})`,
+    highlightedLineBorderColor: `var(--ds-border-focused, ${colors.B200})`,
+    substringColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    keywordColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    attributeColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorTagColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    docTagColor: `var(--ds-text-accent-yellow, ${Y1100})`,
+    nameColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    builtInColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    literalColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    bulletColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    codeColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    regexpColor: `var(--ds-text-accent-teal, ${T800})`,
+    symbolColor: `var(--ds-text-accent-teal, ${T800})`,
+    variableColor: `var(--ds-text-accent-teal, ${T800})`,
+    templateVariableColor: `var(--ds-text-accent-teal, ${T800})`,
+    linkColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    selectorAttributeColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorPseudoColor: `var(--ds-text-accent-teal, ${T800})`,
+    typeColor: `var(--ds-text-accent-teal, ${T800})`,
+    stringColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    selectorIdColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorClassColor: `var(--ds-text-accent-teal, ${T800})`,
+    quoteColor: `var(--ds-text-accent-teal, ${T800})`,
+    templateTagColor: `var(--ds-text-accent-teal, ${T800})`,
+    titleColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    sectionColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    commentColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    metaKeywordColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    metaColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    functionColor: `var(--ds-text, ${colors.N800})`,
+    numberColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    prologColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    cdataColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    punctuationColor: `var(--ds-text, ${colors.N800})`,
+    propertyColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    constantColor: `var(--ds-text-accent-teal, ${T800})`,
+    booleanColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    charColor: `var(--ds-text, ${colors.N800})`,
+    insertedColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    deletedColor: `var(--ds-text-accent-red, ${colors.R500})`,
+    operatorColor: `var(--ds-text, ${colors.N800})`,
+    atruleColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    importantColor: `var(--ds-text-accent-yellow, ${Y1100})`
   };
 });
-const getTheme = theme => ({
-  ...getBaseTheme(theme),
-  ...getColorPalette(theme)
+const getTheme = () => ({
+  ...getBaseTheme(),
+  ...getColorPalette()
 });
 export default getTheme;

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

@@ -1,4 +1,3 @@
-import { borderRadius } from '@atlaskit/theme/constants';
 import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
 import { getBaseTheme, getColorPalette } from './get-theme';
 export const getLineNumWidth = numLines => {
@@ -189,7 +188,7 @@ export const getBaseCodeStyles = theme => ({
   backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
   color: theme.textColor,
   borderStyle: 'none',
-  borderRadius: `${borderRadius()}px`
+  borderRadius: "var(--ds-border-radius, 3px)"
 });
 
 /**
@@ -284,10 +283,8 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
     content: '" "'
   }
 });
-export const getCodeStyles = globalTheme => {
-  // Required to have proper compatibility with styled components interpolations
-  const akTheme = 'theme' in globalTheme ? globalTheme.theme : globalTheme;
-  const theme = getBaseTheme(akTheme);
+export const getCodeStyles = () => {
+  const theme = getBaseTheme();
   const baseStyles = getBaseCodeStyles(theme);
   return {
     ...baseStyles,
@@ -300,10 +297,10 @@ export const getCodeStyles = globalTheme => {
     whiteSpace: 'pre-wrap'
   };
 };
-export const getCodeBlockTheme = (globalTheme, maxLines) => {
+export const getCodeBlockTheme = maxLines => {
   return {
-    ...getBaseTheme(globalTheme),
-    ...getColorPalette(globalTheme),
+    ...getBaseTheme(),
+    ...getColorPalette(),
     lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
   };
 };

package/dist/esm/code-block.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -37,10 +36,9 @@ 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;
-  var globalTheme = useGlobalTheme();
   var theme = useMemo(function () {
-    return getCodeBlockTheme(globalTheme, numLines);
-  }, [globalTheme, numLines]);
+    return getCodeBlockTheme(numLines);
+  }, [numLines]);
   var getStyles = useMemo(function () {
     return getCodeBlockStyles(theme);
   }, [theme]);

package/dist/esm/code.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["testId"],
   _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
 /** @jsx jsx */
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
@@ -21,10 +20,7 @@ import { getCodeStyles } from './internal/theme/styles';
 var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
   var testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useGlobalTheme();
-  var styles = useMemo(function () {
-    return css(getCodeStyles(theme));
-  }, [theme]);
+  var styles = css(getCodeStyles());
   var children = props.children,
     _props$codeBidiWarnin = props.codeBidiWarnings,
     codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,