@redocly/theme 0.1.11 → 0.1.14

package/CodeBlock/CodeBlock.js

@@ -9,5 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (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 utils_1 = require("../utils");
+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.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\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.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  ", "\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.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\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.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  ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
 var templateObject_1;

package/Markdown/CodeSample/index.d.ts

@@ -1,3 +1,2 @@
 export * from '../../Markdown/CodeSample/CodeSample';
 export * from '../../Markdown/CodeSample/styled';
-export * from '../../Markdown/CodeSample/types';

package/Markdown/CodeSample/index.js

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
 __exportStar(require("../../Markdown/CodeSample/styled"), exports);
-__exportStar(require("../../Markdown/CodeSample/types"), exports);

package/Markdown/CodeSample/styled.d.ts

@@ -1,4 +1,3 @@
-export declare const CodeButton: import("styled-components").FlattenSimpleInterpolation;
 export declare const CodeSampleButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CopyCodeButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DoneIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Markdown/CodeSample/styled.js

@@ -3,107 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = exports.CodeButton = void 0;
-var polished_1 = require("polished");
-var styled_components_1 = __importStar(require("styled-components"));
-var Typography_1 = require("../../ui/Typography");
-function genTokens(tokens) {
-    var _a;
-    if (!tokens) {
-        return '';
-    }
-    var res = '';
-    for (var _i = 0, _b = Object.keys(tokens); _i < _b.length; _i++) {
-        var token = _b[_i];
-        if (token !== 'default') {
-            res += ".token.".concat(token, " { color: ").concat((_a = tokens[token]) === null || _a === void 0 ? void 0 : _a.color, "; }\n");
-        }
-    }
-    if (tokens.default) {
-        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      pre& {\n        ", "\n      }\n      ", "\n    "], ["\n      pre& {\n        ", "\n      }\n      ", "\n    "])), (0, Typography_1.typography)(tokens.default), res);
-    }
-    return res;
-}
-var getCodeBlockBackgroundColor = function (theme) {
-    return Array.isArray(theme.codeBlock.backgroundColor)
-        ? theme.codeBlock.backgroundColor[0]
-        : theme.codeBlock.backgroundColor;
-};
-exports.CodeButton = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n"])));
-exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
-exports.CopyCodeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), exports.CodeButton);
-exports.DoneIndicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  cursor: default;\n"], ["\n  ", "\n  cursor: default;\n"])), exports.CodeButton);
-var lightStyleCodeButton = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-});
-var darkStyleCodeButton = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.contrastText;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.background;
-});
-var lightStyleTokens = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"])));
-var darkStyleTokens = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\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    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\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    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.25
-        ? darkStyleCodeButton
-        : lightStyleCodeButton;
-}, exports.CodeSampleButtonContainer, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return (theme.typography.code.wrap ? 'pre-wrap' : 'pre');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.code.fontFamily;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.backgroundColor;
-}, function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34';
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.borderRadius;
-}, function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens;
-}, function (_a) {
-    var theme = _a.theme;
-    return genTokens(theme.codeBlock.tokens);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var _theme_1 = require("../../index.js");
+exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
+exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: white;\n    outline: 1px solid white;\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\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    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata {\n      color: #999988;\n      font-style: italic;\n    }\n    .token.namespace {\n      opacity: 0.7;\n    }\n    .token.string,\n    .token.attr-value {\n      color: #e3116c;\n    }\n    .token.punctuation,\n    .token.operator {\n      color: #393a34; /* no highlight */\n    }\n    .token.entity,\n    .token.url,\n    .token.symbol,\n    .token.number,\n    .token.boolean,\n    .token.variable,\n    .token.constant,\n    .token.property,\n    .token.regex,\n    .token.inserted {\n      color: #36acaa;\n    }\n    .token.atrule,\n    .token.keyword,\n    .token.attr-name,\n    .language-autohotkey .token.selector {\n      color: #00a4db;\n    }\n    .token.function,\n    .token.deleted,\n    .language-autohotkey .token.tag {\n      color: #9a050f;\n    }\n    .token.tag,\n    .token.selector,\n    .language-autohotkey .token.keyword {\n      color: #00009f;\n    }\n\n    ", "\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: white;\n    outline: 1px solid white;\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\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    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata {\n      color: #999988;\n      font-style: italic;\n    }\n    .token.namespace {\n      opacity: 0.7;\n    }\n    .token.string,\n    .token.attr-value {\n      color: #e3116c;\n    }\n    .token.punctuation,\n    .token.operator {\n      color: #393a34; /* no highlight */\n    }\n    .token.entity,\n    .token.url,\n    .token.symbol,\n    .token.number,\n    .token.boolean,\n    .token.variable,\n    .token.constant,\n    .token.property,\n    .token.regex,\n    .token.inserted {\n      color: #36acaa;\n    }\n    .token.atrule,\n    .token.keyword,\n    .token.attr-name,\n    .language-autohotkey .token.selector {\n      color: #00a4db;\n    }\n    .token.function,\n    .token.deleted,\n    .language-autohotkey .token.tag {\n      color: #9a050f;\n    }\n    .token.tag,\n    .token.selector,\n    .language-autohotkey .token.keyword {\n      color: #00009f;\n    }\n\n    ", "\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, (0, _theme_1.generateCodeBlockTokens)());
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Markdown/StyledMarkdown.d.ts

@@ -1,7 +1,5 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
-import { ITypography } from '../ui/Typography';
 export declare const baseTable: FlattenSimpleInterpolation;
-export declare function margins(theme: ITypography): FlattenSimpleInterpolation | string;
 export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
 export declare const StyledMarkdown: import("styled-components").StyledComponent<"main", any, {
     'data-component-name': string;

package/Markdown/StyledMarkdown.js

@@ -27,28 +27,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledMarkdown = exports.headingAnchor = exports.margins = exports.baseTable = void 0;
+exports.StyledMarkdown = exports.headingAnchor = exports.baseTable = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var Typography_1 = require("../ui/Typography");
+var utils_1 = require("../utils");
 exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"], ["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"])));
-function margins(theme) {
-    if (!theme)
-        return '';
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), {
-        marginTop: theme.marginTop || theme.marginVertical || '',
-        marginBottom: theme.marginBottom || theme.marginVertical || '',
-        marginLeft: theme.marginLeft || theme.marginHorizontal || '',
-        marginRight: theme.marginRight || theme.marginHorizontal || '',
-    });
-}
-exports.margins = margins;
 // TODO: Can users specify another className or we should hardcode it?
 function headingAnchor(className) {
     if (className === void 0) { className = 'anchor'; }
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "], ["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "])), className, className, className, className, className);
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "], ["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "])), className, className, className, className, className);
 }
 exports.headingAnchor = headingAnchor;
 exports.StyledMarkdown = styled_components_1.default.main.attrs(function () { return ({
     'data-component-name': 'Markdown/StyledMarkdown',
-}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    ", ";\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n\n    ", ";\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    ", ";\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n\n    ", ";\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, Typography_1.typography)(Typography_1.typographyTokens.heading1), margins(Typography_1.typographyTokens.heading1), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading2), margins(Typography_1.typographyTokens.heading2), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading3), margins(Typography_1.typographyTokens.heading3), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading4), margins(Typography_1.typographyTokens.heading4), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading5), margins(Typography_1.typographyTokens.heading5), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading6), margins(Typography_1.typographyTokens.heading6), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.blockquote));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
+var templateObject_1, templateObject_2, templateObject_3;

package/OperationBadge/OperationBadge.js

@@ -11,5 +11,5 @@ exports.OperationBadge = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.OperationBadge = styled_components_1.default.span.attrs(function (props) { return ({
     className: "operation-type ".concat(props.type),
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"], ["\n  display: inline-block;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"])));
 var templateObject_1;

package/PageNavigation/NextPageLink.js

@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var usePageData_1 = require("../mocks/hooks/usePageData");
 var ui_1 = require("../ui");
 function NextPageLink() {
-    var nextPage = (0, usePageData_1.usePageData)().nextPage;
+    var nextPage = ((0, usePageData_1.usePageData)() || {}).nextPage;
     if (!nextPage) {
         return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
     }

package/PageNavigation/PreviousPageLink.js

@@ -16,7 +16,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var usePageData_1 = require("../mocks/hooks/usePageData");
 var ui_1 = require("../ui");
 function PreviousPageLink() {
-    var prevPage = (0, usePageData_1.usePageData)().prevPage;
+    var prevPage = ((0, usePageData_1.usePageData)() || {}).prevPage;
     if (!prevPage) {
         return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
     }

package/Search/ClearIcon.js

@@ -22,7 +22,7 @@ exports.ClearIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props, { children: (0, jsx_runtime_1.jsx)("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " }) }))); };
-exports.ClearIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"])), function (_a) {
+exports.ClearIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--search-input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--search-input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 });

package/Search/Input.js

@@ -11,5 +11,5 @@ exports.FormInput = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.FormInput = styled_components_1.default.input.attrs(function () { return ({
     'data-component-name': 'Search/Input',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--input-background-color);\n  border-radius: var(--input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--input-text-color);\n  font-size: var(--input-font-size);\n  font-family: var(--input-font-family);\n  line-height: var(--input-line-height);\n\n  ::placeholder {\n    color: var(--input-text-color);\n  }\n"], ["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--input-background-color);\n  border-radius: var(--input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--input-text-color);\n  font-size: var(--input-font-size);\n  font-family: var(--input-font-family);\n  line-height: var(--input-line-height);\n\n  ::placeholder {\n    color: var(--input-text-color);\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-text-color);\n  }\n"], ["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-text-color);\n  }\n"])));
 var templateObject_1;

package/Search/Popover.js

@@ -11,5 +11,5 @@ exports.Popover = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Popover = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Search/Popover',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--popover-border-radius);\n"], ["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--popover-border-radius);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--search-popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n"], ["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--search-popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n"])));
 var templateObject_1;

package/Search/SearchIcon.js

@@ -22,7 +22,7 @@ exports.SearchIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490", "data-component-name": "Search/SearchIcon" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" }) }))); };
-exports.SearchIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"])), function (_a) {
+exports.SearchIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--search-input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--search-input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 });

package/Search/SearchItem.js

@@ -36,7 +36,7 @@ function SearchItem(_a) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), (0, utils_1.highlight)(item.pathName)] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
+    return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), item.pathName ? (0, utils_1.highlight)(item.pathName) : null] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ') }))] })));
 }
 exports.SearchItem = SearchItem;
 var SearchLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"], ["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"])));

package/Sidebar/ApiCallItem.js

@@ -27,7 +27,7 @@ var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 function ApiCallItem(_a) {
     var item = _a.item;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/ApiCallItem" }, { children: [(0, jsx_runtime_1.jsx)(MenuLinkItem_1.MenuLinkItem, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(MenuItemLabel_1.MenuItemLabel, __assign({ active: item.active }, { children: [(0, jsx_runtime_1.jsx)(exports.Badge, __assign({ type: item.httpVerb || 'event' }, { children: item.httpVerb === 'hook' ? 'event' : item.httpVerb })), item.label] })) })), item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.SeparatorLine, {}) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/ApiCallItem" }, { children: [(0, jsx_runtime_1.jsx)(MenuLinkItem_1.MenuLinkItem, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(MenuItemLabel_1.MenuItemLabel, __assign({ active: item.active }, { children: [(0, jsx_runtime_1.jsx)(exports.Badge, __assign({ type: item.httpVerb || '' }, { children: item.httpVerb === 'hook' ? 'event' : item.httpVerb })), item.label] })) })), item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.SeparatorLine, {}) : null] })));
 }
 exports.ApiCallItem = ApiCallItem;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));