@atlaskit/code 14.4.7 → 14.5.0

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

@@ -20,7 +20,7 @@ export declare const getBaseCodeStyles: (theme: CodeTheme) => {
  *
  * @param theme
  */
-export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, hasLineNumbers?: boolean | undefined) => CSSObject;
+export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, showLineNumbers: boolean, shouldWrapLongLines: boolean) => CSSObject;
 export declare const getCodeStyles: (globalTheme: Theme | {
     theme: Theme;
 }) => CSSObject;

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

@@ -1,24 +1,33 @@
 import type { SupportedLanguages } from '../constants';
 export interface CodeBlockProps {
     /**
-     * The code to be formatted
+     * The code to be formatted.
      */
     text: string;
     /**
-     * A unique string that appears as a data attribute `data-testid`
-     * in the rendered code. Serves as a hook for automated tests.
+     * A unique string that appears as a data attribute `data-testid` in the
+     * rendered code. Serves as a hook for automated tests.
      */
     testId?: string;
     /**
-     * Whether to showLineNumbers or not, defaults to true
+     *  Sets whether to display code line numbers or not.
+     *  @default true
      */
     showLineNumbers?: boolean;
     /**
-     * The language in which the code is written
+     * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
+     * `design-system/code`. Run against language grammars from PrismJS (full list
+     * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
+     *
+     * When set to "text" will not perform highlighting. If unsupported language
+     * provided - code will be treated as "text" with no highlighting.
+     *
+     * @default 'text'
      */
     language?: SupportedLanguages;
     /**
-     * Lines to highlight comma delimited.
+     * Comma delimited lines to highlight.
+     *
      * Example uses:
      * - To highlight one line `highlight="3"`
      * - To highlight a group of lines `highlight="1-5"`
@@ -26,32 +35,36 @@ export interface CodeBlockProps {
      */
     highlight?: string;
     /**
-     * Screen reader text for the start of a highlighted line
+     * Screen reader text for the start of a highlighted line.
      */
     highlightedStartText?: string;
     /**
-     * Screen reader text for the end of a highlighted line
+     * Screen reader text for the end of a highlighted line.
      */
     highlightedEndText?: string;
     /**
-     * When false, disables decorating code with bidi warnings
-     *
-     * defaults to true
+     * When set to `false`, disables code decorating with bidi warnings.
+     * @default true
      */
     codeBidiWarnings?: boolean;
     /**
-     * Labels for the previous and next buttons used in pagination.
-     * Defaults to `Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.`.
+     * Label for the bidi warning tooltip.
+     * @default 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'
      */
     codeBidiWarningLabel?: string;
     /**
-     * Defaults to enabled (true)
-     *
-     * Intended to be disabled when used in a mobile view, such as in the editor
-     * via mobile bridge, where the tooltip could end up being cut off of otherwise
-     * not work as expected.
+     * Sets whether to render tooltip with the warning or not.
+     * Intended to be disabled when used in a mobile view, such as in the editor via mobile bridge,
+     * where the tooltip could end up being cut off or otherwise not work as expected.
+     * @default true
      */
     codeBidiWarningTooltipEnabled?: boolean;
+    /**
+     * Sets whether long lines will create a horizontally scrolling container.
+     * When set to `true`, these lines will visually wrap instead.
+     * @default false
+     */
+    shouldWrapLongLines?: boolean;
 }
 export type { SupportedLanguages, LanguageAlias, Language } from '../constants';
 export type { CodeBlockTheme, CodeTheme } from './theme/types';

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

@@ -0,0 +1,3 @@
+import { SyntaxHighlighter } from './types';
+declare const _default: typeof SyntaxHighlighter;
+export default _default;

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

@@ -0,0 +1,36 @@
+/**
+ * Original library: https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * All modifications by Atlassian
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) 2019 Conor Hastings
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+ * __Syntax Highlighter__
+ *
+ * A syntax highlighter based on top of [refractor](https://github.com/wooorm/refractor).
+ * @atlaskit/code uses this under-the-hood, but it is not intended for public consumption.
+ * You should be using @atlaskit/code directly.
+ */
+import SyntaxHighlighter from './async';
+export default SyntaxHighlighter;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SyntaxHighlighterProps } from '../types';
+/**
+ * Takes in a code string and (in the default behaviour):
+ * - Uses refractor to turn it into a tree structure with highlighting metadata
+ * - Collapses this tree into lines for a renderer
+ * - Passes these lines to a React renderer
+ *
+ * In future, the final step could have a custom renderer.
+ */
+declare const Highlight: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
+export default Highlight;

package/dist/types/syntax-highlighter/lib/process/create-line-element.d.ts

@@ -0,0 +1,9 @@
+import { AST, RefractorNode, SyntaxHighlighterLineProps } from '../../types';
+export declare type CreateLineElementProps = {
+    children: RefractorNode[];
+    lineNumber: number;
+    showLineNumbers?: boolean;
+    lineProps?: SyntaxHighlighterLineProps;
+    className?: string[];
+};
+export default function createLineElement({ children, lineNumber, showLineNumbers, lineProps, className, }: CreateLineElementProps): AST.Element;

package/dist/types/syntax-highlighter/lib/process/create-line.d.ts

@@ -0,0 +1,3 @@
+import { RefractorNode, SyntaxHighlighterLineProps } from '../../types';
+declare function createLineGenerator(lineProps: SyntaxHighlighterLineProps, shouldCreateParentElementForLines: boolean, showLineNumbers: boolean): (children: RefractorNode[], lineNumber: number, className?: string[]) => RefractorNode | RefractorNode[];
+export default createLineGenerator;

package/dist/types/syntax-highlighter/lib/process/flatten-code-tree.d.ts

@@ -0,0 +1,2 @@
+import { RefractorNode } from '../../types';
+export default function flattenCodeTree(tree: RefractorNode[], offset?: number, className?: string[]): RefractorNode[];

package/dist/types/syntax-highlighter/lib/process/get-code-tree.d.ts

@@ -0,0 +1,2 @@
+import { AstGenerator, RefractorNode } from '../../types';
+export default function getCodeTree(language: string, code: string, astGenerator?: AstGenerator): RefractorNode[];

package/dist/types/syntax-highlighter/lib/process/get-inline-line-number.d.ts

@@ -0,0 +1,2 @@
+import { RefractorNode } from '../../types';
+export default function getInlineLineNumber(lineNumber: number): RefractorNode;

package/dist/types/syntax-highlighter/lib/process/index.d.ts

@@ -0,0 +1,17 @@
+import { AstGenerator, RefractorNode, SyntaxHighlighterLineProps } from '../../types';
+interface ProcessLines {
+    astGenerator: AstGenerator;
+    code: string;
+    language: string;
+    shouldCreateParentElementForLines: boolean;
+    lineProps: SyntaxHighlighterLineProps;
+    showLineNumbers: boolean;
+}
+/**
+ * __Line Processor__
+ *
+ * A line processor, that uses refractor to turn code into a tree structure
+ * with highlighting metadata and collapses this tree into lines for a renderer.
+ */
+export default function processLines({ astGenerator, code, language, shouldCreateParentElementForLines, lineProps, showLineNumbers, }: ProcessLines): RefractorNode[];
+export {};

package/dist/types/syntax-highlighter/lib/react-renderer/create-children.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { CodeBidiWarningConfig, RefractorNode } from '../../types';
+export default function createChildren(codeBidiWarningConfig: CodeBidiWarningConfig): (children: RefractorNode[]) => ReactNode[];

package/dist/types/syntax-highlighter/lib/react-renderer/create-element.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { CodeBidiWarningConfig, RefractorNode } from '../../types';
+export default function createElement({ node, codeBidiWarningConfig, key, }: {
+    node: RefractorNode;
+    codeBidiWarningConfig: CodeBidiWarningConfig;
+    key: string;
+}): ReactNode;

package/dist/types/syntax-highlighter/lib/react-renderer/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CodeBidiWarningConfig, RefractorNode } from '../../types';
+/**
+ * __React Renderer__
+ *
+ * A component that receives processed code lines and renders them into the code
+ * rows inside the wrapping span and nested code tag, applying passed props and
+ * code bidi warning config settings.
+ */
+export default function ReactRenderer({ containerProps, codeTagProps, rows, codeBidiWarningConfig, }: {
+    containerProps: React.HTMLProps<HTMLElement>;
+    codeTagProps: React.HTMLProps<HTMLElement>;
+    rows: RefractorNode[];
+    codeBidiWarningConfig: CodeBidiWarningConfig;
+}): JSX.Element;

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

@@ -0,0 +1,129 @@
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { AST, RefractorNode } from 'refractor';
+export type { AST, RefractorNode } from 'refractor';
+export declare class SyntaxHighlighter extends React.PureComponent<SyntaxHighlighterProps> {
+}
+/**
+ * Function that receives current line number as argument and returns a
+ * line props object to be applied to each `span` wrapping code line.
+ */
+declare type lineTagPropsFunction = (lineNumber?: number) => AST.Properties;
+/**
+ * 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.
+ */
+export declare type SyntaxHighlighterLineProps = lineTagPropsFunction | AST.Properties;
+export interface SyntaxHighlighterProps {
+    /**
+     * A unique string that appears as a data attribute `data-testid`
+     * in the rendered code. Serves as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
+     * `design-system/code`. Run against language grammars from PrismJS (full list
+     * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
+     *
+     * When set to "text" will not perform highlighting. If unsupported language
+     * provided - code will be treated as "text" with no highlighting.
+     * @default 'text'
+     */
+    language?: string;
+    /**
+     * Props to be passed to the `span` wrapping each line if
+     * `shouldCreateParentElementForLines` is `true`. Can be an object or a function
+     * that receives current line number as argument and returns a props object.
+     */
+    lineProps?: SyntaxHighlighterLineProps;
+    /**
+     * Props to be passed to the `code` element that is the parent of all lines of code.
+     */
+    codeTagProps?: React.HTMLProps<HTMLElement>;
+    /**
+     * Sets whether to display code line numbers or not. Defaults to `true`
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Determines whether or not each line of code should be wrapped in a parent
+     * element.
+     *
+     * When set to false, can not take action on an element on the line level,
+     * meaning, for example, that props will not be passed down.
+     *
+     * @default false
+     */
+    shouldCreateParentElementForLines?: boolean;
+    /**
+     * Sets whether long lines will create a horizontally scrolling container.
+     * When set to `true`, these lines will visually wrap instead.
+     *
+     * @default false
+     */
+    shouldWrapLongLines?: boolean;
+    /**
+     * Serialized styles returned from Emotion's `css()` function.
+     */
+    styles?: SerializedStyles;
+    /**
+     * `codeBidiWarnings` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * When set to `false`, disables code decorating with bidi warnings.
+     *
+     * @default true
+     */
+    codeBidiWarnings?: CodeBidiWarningConfig['codeBidiWarnings'];
+    /**
+     * `codeBidiWarningLabel` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * Label for the bidi warning tooltip.
+     *
+     * @default 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'
+     */
+    codeBidiWarningLabel?: CodeBidiWarningConfig['codeBidiWarningLabel'];
+    /**
+     * `codeBidiWarningTooltipEnabled` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * Sets whether to render tooltip with the warning or not.
+     * Intended to be disabled when used in a mobile view, such as in the editor via mobile bridge,
+     * where the tooltip could end up being cut off or otherwise not work as expected.
+     * @default true
+     */
+    codeBidiWarningTooltipEnabled?: CodeBidiWarningConfig['codeBidiWarningTooltipEnabled'];
+    /**
+     * Code to render; equivalent of `text` prop on @atlaskit/code/CodeBlock.
+     */
+    text?: string;
+    [spread: string]: any;
+}
+export interface CodeBidiWarningConfig {
+    /**
+     * `codeBidiWarnings` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * When set to `false`, disables code decorating with bidi warnings.
+     * @default true
+     */
+    codeBidiWarnings?: boolean;
+    /**
+     * `codeBidiWarningLabel` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * Label for the bidi warning tooltip.
+     *
+     * @default 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'
+     */
+    codeBidiWarningLabel?: string;
+    /**
+     * `codeBidiWarningTooltipEnabled` is set via a prop on @atlaskit/code/CodeBlock.
+     *
+     * Sets whether to render tooltip with the warning or not.
+     * Intended to be disabled when used in a mobile view, such as in the editor via mobile bridge,
+     * where the tooltip could end up being cut off or otherwise not work as expected.
+     * @default true
+     */
+    codeBidiWarningTooltipEnabled?: boolean;
+}
+interface IAstGenerator {
+    highlight: (code: string, language: string) => RefractorNode[];
+}
+export declare type AstGenerator = IAstGenerator | null;

package/dist/types/types.d.ts

@@ -7,26 +7,25 @@ export interface CodeProps extends HTMLProps<HTMLElement> {
      */
     testId?: string;
     /**
-     * Content to be rendered in the inline code block
+     * Content to be rendered in the inline code block.
      */
     children?: ReactNode;
     /**
-     * When false, disables decorating code with bidi warnings
-     *
-     * defaults to true
+     * When set to `false`, disables code decorating with bidi warnings. Defaults to `true`.
      */
     codeBidiWarnings?: boolean;
     /**
-     * Labels for the previous and next buttons used in pagination.
-     * Defaults to `Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.`.
+     Label for the bidi warning tooltip.
+  
+     Defaults to `Bidirectional characters change the order that text is rendered.
+     This could be used to obscure malicious code.`
      */
     codeBidiWarningLabel?: string;
     /**
-     * Defaults to enabled (true)
-     *
-     * Intended to be disabled when used in a mobile view, such as in the editor
-     * via mobile bridge, where the tooltip could end up being cut off of otherwise
-     * not work as expected.
+     * Sets whether to render tooltip with the warning or not. Intended to be
+     * disabled when used in a mobile view, such as in the editor via mobile
+     * bridge, where the tooltip could end up being cut off or otherwise not work
+     * as expected. Defaults to `true`.
      */
     codeBidiWarningTooltipEnabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/code",
-  "version": "14.4.7",
+  "version": "14.5.0",
   "description": "Code highlights short strings of code snippets inline with body text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -29,12 +28,12 @@
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0",
-    "react-syntax-highlighter": "^15.4.3"
+    "refractor": "^3.6.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -42,15 +41,18 @@
   "devDependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "^9.0.0",
+    "@atlaskit/ds-explorations": "^2.0.1",
     "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/form": "^8.8.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
-    "@types/react-syntax-highlighter": "^13.5.0",
+    "@types/refractor": "^3.0.2",
     "color-contrast-checker": "^1.5.0",
     "jscodeshift": "^0.13.0",
     "prismjs": "^1.25.0",
@@ -77,7 +79,10 @@
     },
     "@repo/internal": {
       "design-system": "v1",
-      "design-tokens": "spacing",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "dom-events": "use-bind-event-listener",
       "ui-components": [
         "lite-mode"
@@ -86,8 +91,7 @@
         "analytics-next"
       ],
       "theming": [
-        "react-context",
-        "tokens"
+        "react-context"
       ],
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -409,6 +409,7 @@ export interface CodeBlockProps {
   highlightedEndText?: string;
   highlightedStartText?: string;
   language?: SupportedLanguages;
+  shouldWrapLongLines?: boolean;
   showLineNumbers?: boolean;
   testId?: string;
   text: string;

package/dist/cjs/react-syntax-highlighter-bidi-warning-renderer.js

@@ -1,156 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createBidiWarningRenderer = createBidiWarningRenderer;
-exports.createChildren = createChildren;
-exports.createClassNameString = createClassNameString;
-exports.createStyleObject = createStyleObject;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
-var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function createBidiWarningRenderer(codeBidiWarningConfig) {
-  return function bidiWarningRenderer(_ref) {
-    var rows = _ref.rows,
-      stylesheet = _ref.stylesheet,
-      useInlineStyles = _ref.useInlineStyles;
-    return rows.map(function (node, i) {
-      return createElement({
-        node: node,
-        stylesheet: stylesheet,
-        useInlineStyles: useInlineStyles,
-        codeBidiWarningConfig: codeBidiWarningConfig,
-        key: "code-segement".concat(i)
-      });
-    });
-  };
-}
-
-// Get all possible permutations of all power sets
-//
-// Super simple, non-algorithmic solution since the
-// number of class names will not be greater than 4
-function powerSetPermutations(arr) {
-  var arrLength = arr.length;
-  if (arrLength === 0 || arrLength === 1) {
-    return arr;
-  }
-  if (arrLength === 2) {
-    // prettier-ignore
-    return [arr[0], arr[1], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0])];
-  }
-  if (arrLength === 3) {
-    return [arr[0], arr[1], arr[2], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2]), "".concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0])];
-  }
-  if (arrLength >= 4) {
-    // Currently does not support more than 4 extra
-    // class names (after `.token` has been removed)
-    return [arr[0], arr[1], arr[2], arr[3], "".concat(arr[0], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[3]), "".concat(arr[3], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[1], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[0], ".").concat(arr[2], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[0], ".").concat(arr[3], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[2], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[0], ".").concat(arr[3], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[1], ".").concat(arr[2], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[1], ".").concat(arr[3], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[1], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[0], ".").concat(arr[3], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[0], ".").concat(arr[3]), "".concat(arr[2], ".").concat(arr[1], ".").concat(arr[3], ".").concat(arr[0]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[2], ".").concat(arr[3], ".").concat(arr[1], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[1], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[0], ".").concat(arr[2], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[0], ".").concat(arr[2]), "".concat(arr[3], ".").concat(arr[1], ".").concat(arr[2], ".").concat(arr[0]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[0], ".").concat(arr[1]), "".concat(arr[3], ".").concat(arr[2], ".").concat(arr[1], ".").concat(arr[0])];
-  }
-}
-var classNameCombinations = {};
-function getClassNameCombinations(classNames) {
-  if (classNames.length === 0 || classNames.length === 1) {
-    return classNames;
-  }
-  var key = classNames.join('.');
-  if (!classNameCombinations[key]) {
-    classNameCombinations[key] = powerSetPermutations(classNames);
-  }
-  return classNameCombinations[key];
-}
-function createStyleObject(classNames) {
-  var elementStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var stylesheet = arguments.length > 2 ? arguments[2] : undefined;
-  var nonTokenClassNames = classNames.filter(function (className) {
-    return className !== 'token';
-  });
-  var classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
-  return classNamesCombinations.reduce(function (styleObject, className) {
-    return _objectSpread(_objectSpread({}, styleObject), stylesheet[className]);
-  }, elementStyle);
-}
-function createClassNameString(classNames) {
-  return classNames.join(' ');
-}
-function createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig) {
-  var childrenCount = 0;
-  return function (children) {
-    childrenCount += 1;
-    return children.map(function (child, i) {
-      return createElement({
-        node: child,
-        stylesheet: stylesheet,
-        useInlineStyles: useInlineStyles,
-        codeBidiWarningConfig: codeBidiWarningConfig,
-        key: "code-segment-".concat(childrenCount, "-").concat(i)
-      });
-    });
-  };
-}
-function createElement(_ref2) {
-  var node = _ref2.node,
-    stylesheet = _ref2.stylesheet,
-    _ref2$style = _ref2.style,
-    style = _ref2$style === void 0 ? {} : _ref2$style,
-    useInlineStyles = _ref2.useInlineStyles,
-    codeBidiWarningConfig = _ref2.codeBidiWarningConfig,
-    key = _ref2.key;
-  var properties = node.properties,
-    type = node.type,
-    TagName = node.tagName,
-    value = node.value;
-  if (type === 'text') {
-    // occasionally react-syntax-highlighter passes a numeric value when the
-    // type is text
-    var textValue = value + '';
-    var decorated = (0, _bidiWarningDecorator.default)(textValue, function (_ref3) {
-      var bidiCharacter = _ref3.bidiCharacter,
-        index = _ref3.index;
-      return /*#__PURE__*/_react.default.createElement(_bidiWarning.default, {
-        bidiCharacter: bidiCharacter,
-        key: index,
-        label: codeBidiWarningConfig.codeBidiWarningLabel,
-        tooltipEnabled: codeBidiWarningConfig.codeBidiWarningTooltipEnabled
-      });
-    });
-    return decorated;
-  } else if (TagName) {
-    var childrenCreator = createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig);
-    var props;
-    if (!useInlineStyles) {
-      props = _objectSpread(_objectSpread({}, properties), {}, {
-        className: createClassNameString(properties.className)
-      });
-    } else {
-      var allStylesheetSelectors = Object.keys(stylesheet).reduce(function (classes, selector) {
-        selector.split('.').forEach(function (className) {
-          if (!classes.includes(className)) {
-            classes.push(className);
-          }
-        });
-        return classes;
-      }, []);
-
-      // For compatibility with older versions of react-syntax-highlighter
-      var startingClassName = properties.className && properties.className.includes('token') ? ['token'] : [];
-      var className = properties.className && startingClassName.concat(properties.className.filter(function (className) {
-        return !allStylesheetSelectors.includes(className);
-      }));
-      props = _objectSpread(_objectSpread({}, properties), {}, {
-        className: createClassNameString(className) || undefined,
-        style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
-      });
-    }
-    var children = childrenCreator(node.children);
-    return /*#__PURE__*/_react.default.createElement(TagName, (0, _extends2.default)({
-      key: key
-    }, props), children);
-  }
-}