@redocly/theme 0.1.4 → 0.1.5

package/Button/Button.js

@@ -1,15 +1,41 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { css, keyframes } from 'styled-components';
-var getBlink = function () { return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"], ["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"]))); };
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.baseButtonStyles = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var getBlink = function () { return (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"], ["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"]))); };
 var getSize = function (size) {
     if (size === void 0) { size = 'medium'; }
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"], ["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"])), size, size, size);
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"], ["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"])), size, size, size);
 };
-export var baseButtonStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"], ["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
-export var Button = styled.button.attrs(function (_a) {
+exports.baseButtonStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"], ["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
+exports.Button = styled_components_1.default.button.attrs(function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'default' : _b, extraClass = _a.extraClass;
     return ({
         className: "button-color-".concat(color).concat(extraClass ? " ".concat(extraClass) : ''),
@@ -17,18 +43,18 @@ export var Button = styled.button.attrs(function (_a) {
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'auto');
-}, baseButtonStyles, function (_a) {
+}, exports.baseButtonStyles, function (_a) {
     var variant = _a.variant;
     return variant === 'outlined'
-        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "], ["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "]))) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "], ["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "])));
 }, function (_a) {
     var size = _a.size;
     return getSize(size);
 }, function (_a) {
     var blinking = _a.blinking;
-    return blinking && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "], ["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "])), getBlink());
+    return blinking && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "], ["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "])), getBlink());
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "])));
+    return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "])));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/Button/index.js

@@ -1 +1,17 @@
-export * from './Button';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);

package/CodeBlock/CodeBlock.js

@@ -1,7 +1,13 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-export var CodeBlock = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: var(--color-content-inverse);\n  }\n\n  .token.boolean {\n    color: var(--color-error-500);\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #fee39e;\n\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: #f5b83d;\n  }\n\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: #ffdbf4;\n  }\n\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: var(--color-content-inverse);\n  }\n\n  .token.boolean {\n    color: var(--color-error-500);\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #fee39e;\n\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: #f5b83d;\n  }\n\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: #ffdbf4;\n  }\n\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CodeBlock = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: var(--color-content-inverse);\n  }\n\n  .token.boolean {\n    color: var(--color-error-500);\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #fee39e;\n\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: #f5b83d;\n  }\n\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: #ffdbf4;\n  }\n\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: var(--color-content-inverse);\n  }\n\n  .token.boolean {\n    color: var(--color-error-500);\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #fee39e;\n\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: #f5b83d;\n  }\n\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: #ffdbf4;\n  }\n\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"])));
 var templateObject_1;

package/CodeBlock/index.js

@@ -1 +1,17 @@
-export * from './CodeBlock';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CodeBlock"), exports);

package/CopyButton/CopyButton.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -45,12 +46,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '../Button';
-export var CopyButton = function (_a) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Button_1 = require("../Button");
+var CopyButton = function (_a) {
     var text = _a.text, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'copy-button' : _b;
-    var _c = useState('Copy'), title = _c[0], setTitle = _c[1];
+    var _c = (0, react_1.useState)('Copy'), title = _c[0], setTitle = _c[1];
     function write() {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -65,5 +68,6 @@ export var CopyButton = function (_a) {
             });
         });
     }
-    return (_jsx(Button, __assign({ color: "secondary", onClick: write, "data-cy": dataTestId }, { children: title })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ color: "secondary", onClick: write, "data-cy": dataTestId }, { children: title })));
 };
+exports.CopyButton = CopyButton;

package/CopyButton/CopyButtonWrapper.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,15 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { SamplesControlButton } from '../SamplesPanelControls';
-import { Tooltip } from '../Tooltip';
-import { useControl } from '../hooks';
-import { ClipboardService } from '../utils';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButtonWrapper = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var SamplesPanelControls_1 = require("../SamplesPanelControls");
+var Tooltip_1 = require("../Tooltip");
+var hooks_1 = require("../hooks");
+var utils_1 = require("../utils");
 function CopyButtonWrapperComponent(_a) {
     var data = _a.data, children = _a.children, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'copy-button' : _b;
-    var tooltip = useControl();
+    var tooltip = (0, hooks_1.useControl)();
     var showTooltip = function () {
         tooltip.handleOpen();
         setTimeout(function () {
@@ -26,12 +29,12 @@ function CopyButtonWrapperComponent(_a) {
     };
     var copy = function () {
         var content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
-        ClipboardService.copyCustom(content);
+        utils_1.ClipboardService.copyCustom(content);
         showTooltip();
     };
     var renderCopyButton = function () {
-        return (_jsx(Tooltip, __assign({ className: "copy-button", tip: ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', open: tooltip.isOpened }, { children: _jsx(SamplesControlButton, __assign({ onClick: copy, "data-cy": dataTestId }, { children: "Copy" })) })));
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', open: tooltip.isOpened }, { children: (0, jsx_runtime_1.jsx)(SamplesPanelControls_1.SamplesControlButton, __assign({ onClick: copy, "data-cy": dataTestId }, { children: "Copy" })) })));
     };
     return children({ renderCopyButton: renderCopyButton });
 }
-export var CopyButtonWrapper = memo(CopyButtonWrapperComponent);
+exports.CopyButtonWrapper = (0, react_1.memo)(CopyButtonWrapperComponent);

package/CopyButton/index.js

@@ -1,2 +1,18 @@
-export * from './CopyButtonWrapper';
-export * from './CopyButton';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CopyButtonWrapper"), exports);
+__exportStar(require("./CopyButton"), exports);

package/Headings/Headings.js

@@ -1,10 +1,16 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { typography } from '../utils';
-export var H1 = styled.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), typography('h1', 'h'));
-export var H2 = styled.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), typography('h2', 'h'));
-export var H3 = styled.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), typography('h3', 'h'));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H3 = exports.H2 = exports.H1 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H1 = styled_components_1.default.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
+exports.H2 = styled_components_1.default.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
+exports.H3 = styled_components_1.default.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
 var templateObject_1, templateObject_2, templateObject_3;

package/Headings/index.js

@@ -1 +1,17 @@
-export * from './Headings';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Headings"), exports);

package/JsonViewer/JsonViewer.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,23 +14,28 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useRef } from 'react';
-import styled from 'styled-components';
-import { CopyButtonWrapper } from '../CopyButton';
-import { SampleControls, SamplesControlButton } from '../SamplesPanelControls';
-import { jsonToHTML } from '../utils';
-import { useMount, useUnmount } from '../hooks';
-import { CodeBlock } from '../CodeBlock';
-import { jsonStyles } from './styled';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCodeBlock = exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var CopyButton_1 = require("../CopyButton");
+var SamplesPanelControls_1 = require("../SamplesPanelControls");
+var utils_1 = require("../utils");
+var hooks_1 = require("../hooks");
+var CodeBlock_1 = require("../CodeBlock");
+var styled_1 = require("./styled");
 function JsonComponent(_a) {
     var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className;
-    var node = useRef(null);
-    useMount(function () {
+    var node = (0, react_1.useRef)(null);
+    (0, hooks_1.useMount)(function () {
         var _a;
         (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', clickListener);
     });
-    useUnmount(function () {
+    (0, hooks_1.useUnmount)(function () {
         var _a;
         (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
     });
@@ -79,14 +85,14 @@ function JsonComponent(_a) {
     var renderInner = function (_a) {
         var renderCopyButton = _a.renderCopyButton;
         var showFoldingButtons = data && Object.values(data).some(function (value) { return typeof value === 'object' && value !== null; });
-        return (_jsxs(JsonViewerWrap, __assign({ "data-cy": "json-viewer" }, { children: [_jsxs(SampleControls, __assign({ "data-cy": "buttons" }, { children: [renderCopyButton(), showFoldingButtons && (_jsxs(_Fragment, { children: [_jsx(SamplesControlButton, __assign({ onClick: expandAll, "data-cy": "expand-all" }, { children: "Expand all" })), _jsx(SamplesControlButton, __assign({ onClick: collapseAll, "data-cy": "collapse-all" }, { children: "Collapse all" }))] }))] })), _jsx(StyledCodeBlock, { className: className, ref: node, dangerouslySetInnerHTML: {
-                        __html: jsonToHTML(data, jsonSampleExpandLevel),
+        return ((0, jsx_runtime_1.jsxs)(exports.JsonViewerWrap, __assign({ "data-cy": "json-viewer" }, { children: [(0, jsx_runtime_1.jsxs)(SamplesPanelControls_1.SampleControls, __assign({ "data-cy": "buttons" }, { children: [renderCopyButton(), showFoldingButtons && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SamplesPanelControls_1.SamplesControlButton, __assign({ onClick: expandAll, "data-cy": "expand-all" }, { children: "Expand all" })), (0, jsx_runtime_1.jsx)(SamplesPanelControls_1.SamplesControlButton, __assign({ onClick: collapseAll, "data-cy": "collapse-all" }, { children: "Collapse all" }))] }))] })), (0, jsx_runtime_1.jsx)(exports.StyledCodeBlock, { className: className, ref: node, dangerouslySetInnerHTML: {
+                        __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel),
                     } })] })));
     };
-    return (_jsx(CopyButtonWrapper, __assign({ "data-cy": "copy-button", data: data }, { children: renderInner })));
+    return ((0, jsx_runtime_1.jsx)(CopyButton_1.CopyButtonWrapper, __assign({ "data-cy": "copy-button", data: data }, { children: renderInner })));
 }
-export var Json = memo(JsonComponent);
-export var JsonViewer = styled(Json)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), jsonStyles);
-export var JsonViewerWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"])), SampleControls);
-export var StyledCodeBlock = styled(CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])));
+exports.Json = (0, react_1.memo)(JsonComponent);
+exports.JsonViewer = (0, styled_components_1.default)(exports.Json)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styled_1.jsonStyles);
+exports.JsonViewerWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"])), SamplesPanelControls_1.SampleControls);
+exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/JsonViewer/index.js

@@ -1 +1,17 @@
-export * from './JsonViewer';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./JsonViewer"), exports);

package/JsonViewer/styled.js

@@ -1,7 +1,10 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { css } from 'styled-components';
-export var jsonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code > .collapser {\n    display: none;\n    pointer-events: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"], ["\n  .redoc-json code > .collapser {\n    display: none;\n    pointer-events: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"])));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsonStyles = void 0;
+var styled_components_1 = require("styled-components");
+exports.jsonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code > .collapser {\n    display: none;\n    pointer-events: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"], ["\n  .redoc-json code > .collapser {\n    display: none;\n    pointer-events: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"])));
 var templateObject_1;

package/Logo/Logo.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,13 +14,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { Link } from '../mocks/Link';
-export function Logo(_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+function Logo(_a) {
     var logo = _a.logo;
-    var img = _jsx(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "Logo/Logo" });
-    return (logo === null || logo === void 0 ? void 0 : logo.image) ? logo.link ? _jsx(Link, __assign({ to: logo.link }, { children: img })) : img : null;
+    var img = (0, jsx_runtime_1.jsx)(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "Logo/Logo" });
+    return (logo === null || logo === void 0 ? void 0 : logo.image) ? logo.link ? (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ to: logo.link }, { children: img })) : img : null;
 }
-var NavLogo = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"], ["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"])));
+exports.Logo = Logo;
+var NavLogo = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"], ["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"])));
 var templateObject_1;

package/Navbar/Navbar.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,11 +14,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-export default function Navbar(_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarContainer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search;
-    return (_jsxs(NavbarContainer, __assign({ "data-component-name": "Navbar/Navbar" }, { children: [logo, menu, search] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.NavbarContainer, __assign({ "data-component-name": "Navbar/Navbar" }, { children: [logo, menu, search] })));
 }
-export var NavbarContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"])));
+exports.default = Navbar;
+exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"])));
 var templateObject_1;

package/Navbar/NavbarItem.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,31 +14,37 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
-import { Link } from '../mocks/Link';
-import { withPathPrefix } from '../mocks/utils';
-export var MenuStyle;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var react_router_dom_1 = require("react-router-dom");
+var Link_1 = require("../mocks/Link");
+var utils_1 = require("../mocks/utils");
+var MenuStyle;
 (function (MenuStyle) {
     MenuStyle["Drilldown"] = "drilldown";
-})(MenuStyle || (MenuStyle = {}));
-export default function NavbarItem(_a) {
+})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+function NavbarItem(_a) {
     var navItem = _a.navItem;
-    var pathname = useLocation().pathname;
-    var isActive = pathname === withPathPrefix(navItem.link);
-    return (_jsx(NavMenuItem, __assign({ active: isActive, "data-component-name": "Navbar/NavbarItem" }, { children: _jsx(NavLink, __assign({ to: navItem.link, active: isActive }, { children: _jsx(NavLabel, { children: navItem.label }) })) })));
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    var isActive = pathname === (0, utils_1.withPathPrefix)(navItem.link);
+    return ((0, jsx_runtime_1.jsx)(NavMenuItem, __assign({ active: isActive, "data-component-name": "Navbar/NavbarItem" }, { children: (0, jsx_runtime_1.jsx)(NavLink, __assign({ to: navItem.link, active: isActive }, { children: (0, jsx_runtime_1.jsx)(NavLabel, { children: navItem.label }) })) })));
 }
-var NavMenuItem = styled.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
+exports.default = NavbarItem;
+var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
     var active = _a.active;
     return (active ? 'var(--navbar-item-active-background-color)' : 'none');
 });
-var NavLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
+var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)';
 }, function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-decoration)' : 'none';
 });
-var NavLabel = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+var NavLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/NavbarMenu.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,17 +14,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import NavbarItem from '../Navbar/NavbarItem';
-export default function NavbarMenu(_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var NavbarItem_1 = __importDefault(require("../Navbar/NavbarItem"));
+function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
     if (!menuItems || !menuItems.length) {
         return null;
     }
-    return (_jsx(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {
-            return _jsx(NavbarItem, { "data-cy": navItem.label, navItem: navItem }, index);
+    return ((0, jsx_runtime_1.jsx)(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {
+            return (0, jsx_runtime_1.jsx)(NavbarItem_1.default, { "data-cy": navItem.label, navItem: navItem }, index);
         }) })));
 }
-var NavItemsContainer = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"])));
+exports.default = NavbarMenu;
+var NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"])));
 var templateObject_1;