@atlaskit/code 14.1.5 → 14.3.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/code
 
+## 14.3.2
+
+### Patch Changes
+
+- [`b5226ba2c15`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5226ba2c15) - Replace `bolt` with `yarn` for rendered example changeset commands
+
+## 14.3.1
+
+### Patch Changes
+
+- [`7a34eeea327`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a34eeea327) - Bump prismjs due to vulnerability
+
+## 14.3.0
+
+### Minor Changes
+
+- [`db3477abb18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db3477abb18) - [ux] ED-13938 disabled code-bidi warning tooltip for mobile, reworked TextWrapper to fix bidi mitigation, and fixed issue where bidi warnings were not presented when renderer used with an annotation provider with draftMode set to true
+
+## 14.2.0
+
+### Minor Changes
+
+- [`c80c71b537d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c80c71b537d) - [ux] ED-13860 add bidi warning decorations to code components
+
 ## 14.1.5
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 
 import { Code } from '../src';
 
-export default () => <Code>bolt changeset</Code>;
+export default () => <Code>yarn changeset</Code>;

package/bidi-warning/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/code/bidi-warning",
+  "main": "../dist/cjs/bidi-warning/index.js",
+  "module": "../dist/esm/bidi-warning/index.js",
+  "module:es2019": "../dist/es2019/bidi-warning/index.js",
+  "types": "../dist/types/bidi-warning/index.d.ts"
+}

package/bidi-warning-decorator/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/code/bidi-warning-decorator",
+  "main": "../dist/cjs/bidi-warning/bidi-warning-decorator.js",
+  "module": "../dist/esm/bidi-warning/bidi-warning-decorator.js",
+  "module:es2019": "../dist/es2019/bidi-warning/bidi-warning-decorator.js",
+  "types": "../dist/types/bidi-warning/bidi-warning-decorator.d.ts"
+}

package/codemods/__tests__/14.0.0-lite-mode/14.0.0-lite-mode.ts

@@ -14,12 +14,12 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language="text" text="bolt changeset" />. Then you will be prompted
+          <Code language="text" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -32,12 +32,12 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code>bolt changeset</Code>. Then you will be prompted
+          <Code>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -60,7 +60,7 @@ describe('all transforms should be applied', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <AkCode language={language} text="bolt changeset" />. Then you will be prompted
+          <AkCode language={language} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -78,7 +78,7 @@ describe('all transforms should be applied', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <AkCode>bolt changeset</AkCode>. Then you will be prompted
+          <AkCode>yarn changeset</AkCode>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -186,11 +186,11 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
-          To start creating a changeset, run <Code language="text" text="bolt changeset" />. All g mate.
+          To start creating a changeset, run <Code language="text" text="yarn changeset" />. All g mate.
         </p>
       );
     }
@@ -202,11 +202,11 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
-          To start creating a changeset, run <Code>bolt changeset</Code>. All g mate.
+          To start creating a changeset, run <Code>yarn changeset</Code>. All g mate.
         </p>
       );
     }

package/codemods/__tests__/14.0.0-lite-mode/remove-language.ts

@@ -27,7 +27,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language="text" text="bolt changeset" />. Then you will be prompted
+          <Code language="text" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -43,7 +43,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -66,7 +66,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language={language} text="bolt changeset" />. Then you will be prompted
+          <Code language={language} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -84,7 +84,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -105,7 +105,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -120,7 +120,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );

package/codemods/__tests__/14.0.0-lite-mode/text-to-child.ts

@@ -19,7 +19,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -34,7 +34,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code>bolt changeset</Code>. Then you will be prompted
+          <Code>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -51,7 +51,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset";
+    const text = "yarn changeset";
 
     export default function CodeDefaultExample() {
       return (
@@ -68,7 +68,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset";
+    const text = "yarn changeset";
 
     export default function CodeDefaultExample() {
       return (
@@ -95,7 +95,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code testId="hello!" text="bolt changeset" />. Then you will be prompted
+          <Code testId="hello!" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -110,7 +110,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code testId="hello!">bolt changeset</Code>. Then you will be prompted
+          <Code testId="hello!">yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -133,7 +133,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code {...codeProps} text="bolt changeset" />. Then you will be prompted
+          <Code {...codeProps} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -150,7 +150,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code {...codeProps}>bolt changeset</Code>. Then you will be prompted
+          <Code {...codeProps}>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -167,7 +167,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset" ;
+    const text = "yarn changeset" ;
 
     export default function CodeDefaultExample() {
       return (
@@ -185,7 +185,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset" ;
+    const text = "yarn changeset" ;
 
     export default function CodeDefaultExample() {
       return (

package/dist/cjs/bidi-warning/bidi-warning-decorator.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bidiCharacterRegex = void 0;
+exports.default = codeBidiWarningDecorator;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+exports.bidiCharacterRegex = bidiCharacterRegex;
+
+function codeBidiWarningDecorator(originalText, decorate) {
+  var matches = (0, _toConsumableArray2.default)(originalText.matchAll(bidiCharacterRegex));
+
+  if (matches.length === 0) {
+    // No matches encountered, so we return the originalText value
+    return originalText;
+  }
+
+  var children = [];
+  var mappedTo = 0;
+
+  var _iterator = _createForOfIteratorHelper(matches),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var match = _step.value;
+
+      if (mappedTo !== match.index) {
+        // There were unmatched characters prior to this match which haven't been
+        // mapped to the children.
+        // Add them as plain text.
+        children.push(originalText.substring(mappedTo, match.index));
+      }
+
+      children.push(decorate({
+        bidiCharacter: match[0],
+        index: match.index
+      })); // While index is guaranteed to be present, it needs to be asserted due
+      // to a limitation of typescripts regex handling
+      //
+      // https://github.com/microsoft/TypeScript/issues/36788
+      // Decorate bidi character
+
+      mappedTo = match.index + match[0].length;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (mappedTo !== originalText.length) {
+    // There is text following the final match, which needs to be mapped
+    // to the children.
+    // Added as plain text.
+    children.push(originalText.substring(mappedTo, originalText.length));
+  } // return the mapped children with decorated bidi characters
+
+
+  return children;
+}

package/dist/cjs/bidi-warning/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ui.default;
+  }
+});
+
+var _ui = _interopRequireDefault(require("./ui"));

package/dist/cjs/bidi-warning/ui/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BidiWarning;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _styled = require("./styled");
+
+var _excluded = ["children"];
+
+function BidiWarning(_ref) {
+  var testId = _ref.testId,
+      bidiCharacter = _ref.bidiCharacter,
+      skipChildren = _ref.skipChildren,
+      tooltipEnabled = _ref.tooltipEnabled,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
+
+  if (tooltipEnabled) {
+    return (
+      /*#__PURE__*/
+      // Following patches, this should be updated to use the render props signature which will provide aria attributes.
+      // Note: this should be tested, as initial testing did not see attributes work with current tooltip implementation.
+      _react.default.createElement(_tooltip.default, {
+        content: label,
+        tag: CustomizedTagWithRef
+      }, /*#__PURE__*/_react.default.createElement(_styled.Decorator, {
+        testId: testId,
+        bidiCharacter: bidiCharacter
+      }, skipChildren ? null : bidiCharacter))
+    );
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_styled.Decorator, {
+    testId: testId,
+    bidiCharacter: bidiCharacter
+  }, skipChildren ? null : bidiCharacter);
+}
+
+var CustomizedTagWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+    ref: ref
+  }), children);
+});

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Decorator = Decorator;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var decoration = (0, _core.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',
+  ':before': {
+    /* layout */
+    display: 'inline-flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0 4px',
+    fontSize: '14px',
+    lineHeight: '18px',
+    background: _colors.Y75,
+
+    /**
+     * Ensures the decoration receives pointer events when it occurs with
+     * an ancestor that disables them.
+     */
+    pointerEvents: 'auto',
+
+    /* contents */
+    content: '"<"attr(data-bidi-character-code)">"',
+    // This color is Y800 which is not yet rolled out
+    // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
+    color: '#7F5F01',
+    fontStyle: 'normal'
+  },
+  ':hover:before': {
+    color: '#533F04'
+  }
+});
+
+function Decorator(_ref) {
+  var bidiCharacter = _ref.bidiCharacter,
+      children = _ref.children,
+      testId = _ref.testId;
+  var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
+  return (0, _core.jsx)("span", {
+    "aria-label": bidiCharacterCode
+  }, (0, _core.jsx)("span", {
+    css: decoration,
+    "data-testid": testId,
+    "data-bidi-character-code": bidiCharacterCode // This is set to true so that the content is not read out by
+    // screen readers as the content includes angle brackets for
+    // visual decoration purposes.
+    // We use a span with the aria-label set to the bidi character  code
+    // above this span for screen readers.
+    ,
+    "aria-hidden": "true"
+  }, children));
+}
+
+function getBidiCharacterCode(bidiCharacter) {
+  var _bidiCharacter$codePo;
+
+  var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
+  return "U+".concat(bidiCharacterCode);
+}

package/dist/cjs/bidi-warning/ui/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/code-block.js

@@ -19,6 +19,8 @@ var _styles = require("./internal/theme/styles");
 
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
 
+var _reactSyntaxHighlighterBidiWarningRenderer = require("./react-syntax-highlighter-bidi-warning-renderer");
+
 /** @jsx jsx */
 var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
   var _ref$showLineNumbers = _ref.showLineNumbers,
@@ -32,7 +34,12 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
       _ref$highlightedEndTe = _ref.highlightedEndText,
       highlightedEndText = _ref$highlightedEndTe === void 0 ? 'Highlight end' : _ref$highlightedEndTe,
       testId = _ref.testId,
-      text = _ref.text;
+      text = _ref.text,
+      _ref$codeBidiWarnings = _ref.codeBidiWarnings,
+      codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
+      codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+      _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
+      codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT;
   var numLines = (text || '').split('\n').length;
   var globalTheme = (0, _components.useGlobalTheme)();
   var theme = (0, _react.useMemo)(function () {
@@ -60,6 +67,10 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
   }, [providedLanguage]); // https://product-fabric.atlassian.net/browse/DST-2472
 
   var languageToUse = text ? language : 'text';
+  var renderer = codeBidiWarnings ? (0, _reactSyntaxHighlighterBidiWarningRenderer.createBidiWarningRenderer)({
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  }) : undefined;
   return (0, _core.jsx)(_reactSyntaxHighlighter.PrismAsync, {
     "data-testid": testId,
     "data-code-lang": language,
@@ -71,7 +82,8 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     ,
     wrapLines: highlight.length > 0 || !!testId,
     lineProps: getLineProps,
-    useInlineStyles: false
+    useInlineStyles: false,
+    renderer: renderer
   }, text);
 });
 CodeBlock.displayName = 'CodeBlock';

package/dist/cjs/code.js

@@ -2,43 +2,108 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 Object.defineProperty(exports, "getCodeStyles", {
   enumerable: true,
   get: function get() {
     return _styles.getCodeStyles;
   }
 });
-exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
 var _components = require("@atlaskit/theme/components");
 
+var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
+
+var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
+
 var _styles = require("./internal/theme/styles");
 
-/** @jsx jsx */
+var _excluded = ["testId"],
+    _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Code(_ref, ref) {
   var testId = _ref.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["testId"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var theme = (0, _components.useGlobalTheme)();
   var styles = (0, _react.useMemo)(function () {
     return (0, _styles.getCodeStyles)(theme);
   }, [theme]);
+  var children = props.children,
+      _props$codeBidiWarnin = props.codeBidiWarnings,
+      codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
+      codeBidiWarningLabel = props.codeBidiWarningLabel,
+      _props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
+      codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
+      otherProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var decoratedChildren = codeBidiWarnings ? (0, _core.jsx)(RenderCodeChildrenWithBidiWarnings, {
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  }, children) : children;
   return (0, _core.jsx)("code", (0, _extends2.default)({
     ref: ref,
     "data-testid": testId,
     css: styles
-  }, props));
+  }, otherProps), decoratedChildren);
 }));
+
+function RenderCodeChildrenWithBidiWarnings(_ref2) {
+  var children = _ref2.children,
+      codeBidiWarningLabel = _ref2.codeBidiWarningLabel,
+      codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled;
+
+  var replacedChildren = _react.default.Children.map(children, function (childNode) {
+    if (typeof childNode === 'string') {
+      var decorated = (0, _bidiWarningDecorator.default)(childNode, function (_ref3) {
+        var bidiCharacter = _ref3.bidiCharacter,
+            index = _ref3.index;
+        return (0, _core.jsx)(_bidiWarning.default, {
+          bidiCharacter: bidiCharacter,
+          key: index,
+          label: codeBidiWarningLabel,
+          tooltipEnabled: codeBidiWarningTooltipEnabled
+        });
+      });
+      return decorated;
+    }
+
+    if (isReactElement(childNode) && childNode.props.children) {
+      var newChildNode = /*#__PURE__*/_react.default.cloneElement(childNode, {
+        children: (0, _core.jsx)(RenderCodeChildrenWithBidiWarnings, {
+          codeBidiWarningLabel: codeBidiWarningLabel,
+          codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+        }, childNode.props.children)
+      });
+
+      return newChildNode;
+    }
+
+    return childNode;
+  });
+
+  return (0, _core.jsx)(_react.default.Fragment, null, replacedChildren);
+}
+
+function isReactElement(child) {
+  return !!child.type;
+}
+
 Code.displayName = 'Code';
 var _default = Code;
 exports.default = _default;