@redocly/theme 0.1.14 → 0.1.17

package/src/Markdown/CodeSample/styled.ts

@@ -1,6 +1,4 @@
-import styled from 'styled-components';
-
-import { generateCodeBlockTokens } from '@theme';
+import styled, { css } from 'styled-components';
 
 export const CodeSampleButtonContainer = styled.div`
   position: absolute;
@@ -23,6 +21,105 @@ export const DoneIndicator = styled.div`
   cursor: default;
 `;
 
+// const lightStyleTokens = css`
+//   .token.comment,
+//   .token.prolog,
+//   .token.doctype,
+//   .token.cdata {
+//     color: #999988;
+//     font-style: italic;
+//   }
+//   .token.namespace {
+//     opacity: 0.7;
+//   }
+//   .token.string,
+//   .token.attr-value {
+//     color: #e3116c;
+//   }
+//   .token.punctuation,
+//   .token.operator {
+//     color: #393a34; /* no highlight */
+//   }
+//   .token.entity,
+//   .token.url,
+//   .token.symbol,
+//   .token.number,
+//   .token.boolean,
+//   .token.variable,
+//   .token.constant,
+//   .token.property,
+//   .token.regex,
+//   .token.inserted {
+//     color: #36acaa;
+//   }
+//   .token.atrule,
+//   .token.keyword,
+//   .token.attr-name,
+//   .language-autohotkey .token.selector {
+//     color: #00a4db;
+//   }
+//   .token.function,
+//   .token.deleted,
+//   .language-autohotkey .token.tag {
+//     color: #9a050f;
+//   }
+//   .token.tag,
+//   .token.selector,
+//   .language-autohotkey .token.keyword {
+//     color: #00009f;
+//   }
+// `;
+
+const darkStyleTokens = css`
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #62bff9;
+  }
+  .token.boolean {
+    color: firebrick;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a0fbaa;
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+  .token.deleted {
+    color: red;
+  }
+`;
+
 export const Wrapper = styled.div`
   overflow: auto;
   border-radius: 4px;
@@ -33,8 +130,8 @@ export const Wrapper = styled.div`
     color: rgba(255, 255, 255, 0.15);
   }
   ${CopyCodeButton}:hover {
-    color: white;
-    outline: 1px solid white;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.15);
   }
 
   &:hover {
@@ -107,53 +204,6 @@ export const Wrapper = styled.div`
       opacity: 0.7;
     }
 
-    .token.comment,
-    .token.prolog,
-    .token.doctype,
-    .token.cdata {
-      color: #999988;
-      font-style: italic;
-    }
-    .token.namespace {
-      opacity: 0.7;
-    }
-    .token.string,
-    .token.attr-value {
-      color: #e3116c;
-    }
-    .token.punctuation,
-    .token.operator {
-      color: #393a34; /* no highlight */
-    }
-    .token.entity,
-    .token.url,
-    .token.symbol,
-    .token.number,
-    .token.boolean,
-    .token.variable,
-    .token.constant,
-    .token.property,
-    .token.regex,
-    .token.inserted {
-      color: #36acaa;
-    }
-    .token.atrule,
-    .token.keyword,
-    .token.attr-name,
-    .language-autohotkey .token.selector {
-      color: #00a4db;
-    }
-    .token.function,
-    .token.deleted,
-    .language-autohotkey .token.tag {
-      color: #9a050f;
-    }
-    .token.tag,
-    .token.selector,
-    .language-autohotkey .token.keyword {
-      color: #00009f;
-    }
-
-    ${generateCodeBlockTokens()}
+    ${darkStyleTokens};
   }
 `;

package/src/utils/ClipboardService.ts

@@ -1,9 +1,28 @@
 export class ClipboardService {
   static isSupported(): boolean {
-    return typeof navigator?.clipboard !== 'undefined';
+    return typeof navigator !== 'undefined' && !!navigator.clipboard;
   }
 
   static copyCustom(text: string): Promise<void> {
     return navigator.clipboard.writeText(text);
   }
+
+  static selectElement(element: HTMLDivElement | null): void {
+    if (!element) {
+      return;
+    }
+    let range;
+    let selection;
+    if ((document.body as any).createTextRange) {
+      range = (document.body as any).createTextRange();
+      range.moveToElementText(element);
+      range.select();
+    } else if (document.createRange && window.getSelection) {
+      selection = window.getSelection();
+      range = document.createRange();
+      range.selectNodeContents(element);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }
 }

package/ui/AlertIcon.js

@@ -3,37 +3,40 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Icon(_a) {
     var type = _a.type, className = _a.className;
     switch (type) {
         case 'warning':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "342.1", r: "25.3" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }),
+                react_1.default.createElement("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "342.1", r: "25.3" })));
         case 'success':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
+                react_1.default.createElement("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }),
+                react_1.default.createElement("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })));
         case 'danger':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
+                react_1.default.createElement("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }),
+                react_1.default.createElement("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })));
         case 'attention':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "339.2", r: "22.5" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "339.2", r: "22.5" })));
         default:
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "163.7", r: "25.3" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }),
+                react_1.default.createElement("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "163.7", r: "25.3" })));
     }
 }
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({

package/ui/Arrow.js

@@ -3,23 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Arrow = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function directionToTransform(_a) {
     var direction = _a.direction;
@@ -36,7 +25,9 @@ function directionToTransform(_a) {
 }
 var Icon = function (_a) {
     var className = _a.className;
-    return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "ui/Arrow/Arrow" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }) })) })));
+    return (react_1.default.createElement("span", { "data-component-name": "ui/Arrow/Arrow" },
+        react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
+            react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
 exports.Arrow = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/ui/Button.js

@@ -10,18 +10,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Button");
 var Link_1 = require("../mocks/Link");
 var StyledButtonAsLink = Button_1.Button.withComponent(Link_1.Link);
 function Button(props) {
     if (props.to) {
-        return (0, jsx_runtime_1.jsx)(StyledButtonAsLink, __assign({}, props, { role: "button", "data-component-name": "ui/Button" }));
+        return react_1.default.createElement(StyledButtonAsLink, __assign({}, props, { role: "button", "data-component-name": "ui/Button" }));
     }
     else {
-        return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, props, { role: "button", "data-component-name": "ui/Button" })));
+        return (react_1.default.createElement(Button_1.Button, __assign({}, props, { role: "button", "data-component-name": "ui/Button" })));
     }
 }
 exports.Button = Button;

package/ui/Dropdown.js

@@ -3,27 +3,39 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
-var Icon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) }))); };
+var Icon = function () { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" }))); };
 var DropDownContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"], ["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"])));
 var DropDownHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-content);\n  background: var(--color-secondary-300);\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-content);\n  background: var(--color-secondary-300);\n"])));
 var DropDownList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background: var(--color-secondary-300);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  background: var(--color-secondary-300);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"])));
@@ -49,7 +61,13 @@ function Dropdown(_a) {
             document.removeEventListener('mousedown', checkIfClickedOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsxs)(DropDownContainer, __assign({ ref: ref, "data-component-name": "ui/Dropdown" }, { children: [(0, jsx_runtime_1.jsxs)(DropDownHeader, __assign({ onClick: toggling }, { children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version, (0, jsx_runtime_1.jsx)(IconWrapper, __assign({ className: isOpen ? 'active' : '' }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))] })), isOpen && ((0, jsx_runtime_1.jsx)(DropDownList, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(ListItem, __assign({ className: activeItem.version === item.version ? 'active' : '', onClick: toggling }, { children: (0, jsx_runtime_1.jsx)(DropDownLink, __assign({ to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, { children: (item === null || item === void 0 ? void 0 : item.label) || item.version })) }), (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version))); }) }))] })));
+    return (react_1.default.createElement(DropDownContainer, { ref: ref, "data-component-name": "ui/Dropdown" },
+        react_1.default.createElement(DropDownHeader, { onClick: toggling },
+            (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version,
+            react_1.default.createElement(IconWrapper, { className: isOpen ? 'active' : '' },
+                react_1.default.createElement(Icon, null))),
+        isOpen && (react_1.default.createElement(DropDownList, null, items.map(function (item) { return (react_1.default.createElement(ListItem, { className: activeItem.version === item.version ? 'active' : '', onClick: toggling, key: (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version) },
+            react_1.default.createElement(DropDownLink, { to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, (item === null || item === void 0 ? void 0 : item.label) || item.version))); })))));
 }
 exports.Dropdown = Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Flex.js

@@ -19,13 +19,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexSection = exports.Flex = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
 var Box_1 = require("../ui/Box");
 exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  ", "\n  ", "\n"])), styled_system_1.flexbox, styled_system_1.width);
 function FlexSection(props) {
-    return ((0, jsx_runtime_1.jsx)(exports.Flex, __assign({}, props, { width: props.width || { xs: '90%', large: 910 } }, { children: props.children })));
+    return (react_1.default.createElement(exports.Flex, __assign({}, props, { width: props.width || { xs: '90%', large: 910 } }), props.children));
 }
 exports.FlexSection = FlexSection;
 var templateObject_1;

package/ui/Tiles/ThinTile.js

@@ -18,24 +18,35 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThinTile = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../../mocks/Link");
 var Flex_1 = require("../../ui/Flex");
@@ -90,7 +101,12 @@ var ThinTile = /** @class */ (function (_super) {
         var Wrapper = to
             ? ThinTileWrapper
             : ThinTileWrapper.withComponent('div');
-        return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ to: to, target: target, color: color, className: className, style: style, "data-component-name": "ui/Tiles/ThinTile" }, { children: [(icon || header) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ flexDirection: "column" }, { children: [icon && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ flexShrink: 0, height: { xs: 'auto', small: '100px', medium: '110px' }, alignItems: "center", justifyContent: "center", mb: "25px" }, { children: (0, jsx_runtime_1.jsx)(ThinTileIcon, { src: icon }) }))), header && ((0, jsx_runtime_1.jsx)(ThinTileHeader, __assign({ align: headerAlign, color: color, "data-cy": "Thin-".concat(header) }, { children: header })))] }))), children && ((0, jsx_runtime_1.jsx)(ThinTileText, __assign({ icon: icon, align: textAlign, color: color }, { children: children })))] })));
+        return (react_1.default.createElement(Wrapper, { to: to, target: target, color: color, className: className, style: style, "data-component-name": "ui/Tiles/ThinTile" },
+            (icon || header) && (react_1.default.createElement(Flex_1.Flex, { flexDirection: "column" },
+                icon && (react_1.default.createElement(Flex_1.Flex, { flexShrink: 0, height: { xs: 'auto', small: '100px', medium: '110px' }, alignItems: "center", justifyContent: "center", mb: "25px" },
+                    react_1.default.createElement(ThinTileIcon, { src: icon }))),
+                header && (react_1.default.createElement(ThinTileHeader, { align: headerAlign, color: color, "data-cy": "Thin-".concat(header) }, header)))),
+            children && (react_1.default.createElement(ThinTileText, { icon: icon, align: textAlign, color: color }, children))));
     };
     return ThinTile;
 }(react_1.Component));

package/ui/Tiles/WideTile.js

@@ -18,24 +18,35 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WideTile = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../../mocks/Link");
 var TileText_1 = require("../../ui/Tiles/TileText");
@@ -85,7 +96,12 @@ var WideTile = /** @class */ (function (_super) {
     }
     WideTile.prototype.render = function () {
         var _a = this.props, to = _a.to, header = _a.header, children = _a.children, target = _a.target, disableArrow = _a.disableArrow, textAlign = _a.textAlign, headerAlign = _a.headerAlign, icon = _a.icon, bgColor = _a.bgColor, bgImage = _a.bgImage, color = _a.color, className = _a.className, style = _a.style, maxWidth = _a.maxWidth;
-        return ((0, jsx_runtime_1.jsxs)(WideTileWrapper, __assign({ to: to, target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" }, { children: [icon && ((0, jsx_runtime_1.jsx)(WideTileIcon, { children: (0, jsx_runtime_1.jsx)("img", { src: icon, alt: "" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [header && ((0, jsx_runtime_1.jsx)(WideTileHeader, __assign({ align: textAlign, color: color, "data-cy": "Wide-".concat(header) }, { children: header }))), children && ((0, jsx_runtime_1.jsx)(WideTileText, __assign({ align: headerAlign, color: color }, { children: children })))] })] })));
+        return (react_1.default.createElement(WideTileWrapper, { to: to, target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" },
+            icon && (react_1.default.createElement(WideTileIcon, null,
+                react_1.default.createElement("img", { src: icon, alt: "" }))),
+            react_1.default.createElement("div", null,
+                header && (react_1.default.createElement(WideTileHeader, { align: textAlign, color: color, "data-cy": "Wide-".concat(header) }, header)),
+                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
     };
     return WideTile;
 }(react_1.Component));

package/ui/UniversalLink.js

@@ -14,12 +14,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UniversalLink = exports.withPropsFilter = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var isUrl_1 = require("../utils/isUrl");
@@ -46,13 +69,13 @@ var withPropsFilter = function (filterList) { return function (WrappedComponent)
             var key = _a[0];
             return !filterList.includes(key);
         }));
-        return (0, jsx_runtime_1.jsx)(WrappedComponent, __assign({}, filteredProps));
+        return React.createElement(WrappedComponent, __assign({}, filteredProps));
     };
 }; };
 exports.withPropsFilter = withPropsFilter;
 exports.UniversalLink = (0, exports.withPropsFilter)(propsList)(function (props) {
     var _a;
     return (typeof props.to === 'string' && ((0, isUrl_1.isUrl)(props.to) || props.to.startsWith('mailto:'))) ||
-        props.external ? ((0, jsx_runtime_1.jsx)(StyledExternalLink, __assign({ style: props.style, href: props.to, target: props.target || (props.external && '_blank') || '_self', className: "".concat(props.external ? 'external-url' : '', " ").concat(props.className), rel: props.rel, "data-cy": "universalLink-".concat(typeof props.children === 'string' ? props.children : 'with-nested-jsx') }, { children: props.children }))) : props.to == null ? ((0, jsx_runtime_1.jsx)("a", __assign({ onClick: props.onClick, className: props.className, style: props.style }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(Link_1.Link, __assign({}, props, { to: props.to, state: __assign({ previousPath: (_a = (0, react_router_dom_1.useLocation)()) === null || _a === void 0 ? void 0 : _a.pathname }, props.state) })));
+        props.external ? (React.createElement(StyledExternalLink, { style: props.style, href: props.to, target: props.target || (props.external && '_blank') || '_self', className: "".concat(props.external ? 'external-url' : '', " ").concat(props.className), rel: props.rel, "data-cy": "universalLink-".concat(typeof props.children === 'string' ? props.children : 'with-nested-jsx') }, props.children)) : props.to == null ? (React.createElement("a", { onClick: props.onClick, className: props.className, style: props.style }, props.children)) : (React.createElement(Link_1.Link, __assign({}, props, { to: props.to, state: __assign({ previousPath: (_a = (0, react_router_dom_1.useLocation)()) === null || _a === void 0 ? void 0 : _a.pathname }, props.state) })));
 });
 var templateObject_1;

package/utils/ClipboardService.d.ts

@@ -1,4 +1,5 @@
 export declare class ClipboardService {
     static isSupported(): boolean;
     static copyCustom(text: string): Promise<void>;
+    static selectElement(element: HTMLDivElement | null): void;
 }