@redocly/theme 0.3.0 → 0.4.0

package/Button/Button.js

@@ -50,7 +50,7 @@ var getSize = function (size) {
     if (size === void 0) { size = 'medium'; }
     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);
 };
-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  margin: var(--button-margin);\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  margin: var(--button-margin);\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.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  margin: var(--button-margin);\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-hover-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  margin: var(--button-margin);\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-hover-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
 var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'default' : _b, extraClass = _a.extraClass;
     return ({
@@ -63,7 +63,7 @@ var StyledButton = styled_components_1.default.button.attrs(function (_a) {
 }, exports.baseButtonStyles, function (_a) {
     var variant = _a.variant;
     return variant === 'outlined'
-        ? (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          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\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-border-color);\n          background-color: transparent;\n          &:hover {\n            color: var(--button-hover-background-color);\n            border: 2px solid var(--button-hover-border-color);\n          }\n\n          &:active {\n            color: var(--button-active-background-color);\n            border: 2px solid var(--button-active-border-color);\n          }\n\n          &:disabled {\n            color: var(--button-disabled-background-color);\n            background-color: transparent;\n          }\n        "], ["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-border-color);\n          background-color: transparent;\n          &:hover {\n            color: var(--button-hover-background-color);\n            border: 2px solid var(--button-hover-border-color);\n          }\n\n          &:active {\n            color: var(--button-active-background-color);\n            border: 2px solid var(--button-active-border-color);\n          }\n\n          &:disabled {\n            color: var(--button-disabled-background-color);\n            background-color: transparent;\n          }\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--button-color);\n          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\n            background-color: var(--button-active-background-color);\n          }\n        "])));
 }, function (_a) {
     var size = _a.size;
     return getSize(size);
@@ -72,7 +72,7 @@ var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     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 && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999;\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: var(--button-disabled-color);\n        background-color: var(--button-disabled-background-color);\n        border-color: var(--button-disabled-background-color);\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: var(--button-disabled-color);\n        background-color: var(--button-disabled-background-color);\n        border-color: var(--button-disabled-background-color);\n        pointer-events: none;\n      }\n    "])));
 });
 var ButtonComponent = function (props) {
     if (props.to) {

package/CodeBlock/CodeBlock.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.CodeBlock = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'CodeBlock/CodeBlock',
-}); })(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  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\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  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\n  }\n\n  ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
+}); })(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    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: var(--code-block-tokens-link-color);\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: var(--code-block-tokens-property-string-color);\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  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\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    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: var(--code-block-tokens-link-color);\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: var(--code-block-tokens-property-string-color);\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  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\n  }\n\n  ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
 var templateObject_1;

package/ColorModeSwitcher/ColorModeSwitcher.js

@@ -76,5 +76,5 @@ function ColorModeSwitcher() {
         react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode })));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: calc(var(--sidebar-spacing-horizontal) * 2);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  margin-left: var(--navbar-item-padding-horizontal);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])));
 var templateObject_1;

package/Footer/Footer.js

@@ -26,5 +26,5 @@ function Footer(_a) {
         react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
 }
 exports.Footer = Footer;
-var FooterContainer = styled_components_1.default.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 1rem;\n  flex-shrink: 0;\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  font-family: var(--font-family-base);\n  a,\n  a:hover {\n    color: var(--footer-text-color);\n  }\n"], ["\n  font-size: 1rem;\n  flex-shrink: 0;\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  font-family: var(--font-family-base);\n  a,\n  a:hover {\n    color: var(--footer-text-color);\n  }\n"])));
+var FooterContainer = styled_components_1.default.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: var(--footer-font-size);\n  flex-shrink: 0;\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  font-family: var(--footer-font-family);\n  font-weight: var(--footer-font-weight);\n  a,\n  a:hover {\n    color: var(--footer-text-color);\n  }\n"], ["\n  font-size: var(--footer-font-size);\n  flex-shrink: 0;\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  font-family: var(--footer-font-family);\n  font-weight: var(--footer-font-weight);\n  a,\n  a:hover {\n    color: var(--footer-text-color);\n  }\n"])));
 var templateObject_1;

package/Footer/FooterColumn.js

@@ -24,8 +24,8 @@ function FooterColumn(_a) {
         })));
 }
 exports.FooterColumn = FooterColumn;
-var FooterColumnTitle = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  font-size: 24px;\n  margin-bottom: 1.5em;\n  font-family: var(--h-font-family);\n"], ["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  font-size: 24px;\n  margin-bottom: 1.5em;\n  font-family: var(--h-font-family);\n"])));
-var FooterSeparator = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--h-font-family);\n"], ["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--h-font-family);\n"])));
-var FooterColumnContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 20px;\n  width: 20%;\n  word-break: break-word;\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 20px;\n  width: 20%;\n  word-break: break-word;\n"])));
-var FooterLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  padding-bottom: 0.75em;\n  color: var(--footer-text-color);\n  text-decoration: none;\n"], ["\n  font-weight: var(--font-weight-bold);\n  padding-bottom: 0.75em;\n  color: var(--footer-text-color);\n  text-decoration: none;\n"])));
+var FooterColumnTitle = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--footer-title-font-weight);\n  font-size: var(--footer-title-font-size);\n  margin-bottom: var(--footer-title-margin-vertical);\n  font-family: var(--footer-font-family);\n  color: var(--footer-title-text-color);\n"], ["\n  display: inline-block;\n  font-weight: var(--footer-title-font-weight);\n  font-size: var(--footer-title-font-size);\n  margin-bottom: var(--footer-title-margin-vertical);\n  font-family: var(--footer-font-family);\n  color: var(--footer-title-text-color);\n"])));
+var FooterSeparator = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--footer-font-family);\n"], ["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--footer-font-family);\n"])));
+var FooterColumnContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);\n  width: var(--footer-column-width);\n  word-break: break-word;\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);\n  width: var(--footer-column-width);\n  word-break: break-word;\n"])));
+var FooterLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);\n  color: var(--footer-link-text-color);\n  text-decoration: none;\n  &:hover {\n    color: var(--footer-link-hover-color);\n  }\n"], ["\n  font-weight: var(--font-weight-bold);\n  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);\n  color: var(--footer-link-text-color);\n  text-decoration: none;\n  &:hover {\n    color: var(--footer-link-hover-color);\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Footer/FooterColumns.js

@@ -20,7 +20,7 @@ function FooterColumns(_a) {
         react_1.default.createElement(exports.FooterRow, null, columns.map(function (column, index) { return (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: "".concat(column.label, "_").concat(index), column: column })); }))));
 }
 exports.FooterColumns = FooterColumns;
-exports.FooterColumnsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"], ["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"])), function (_a) {
+exports.FooterColumnsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: var(--footer-container-max-width);\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"], ["\n  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: var(--footer-container-max-width);\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.small;
 }, function (_a) {

package/Footer/FooterCopyright.js

@@ -15,5 +15,5 @@ function FooterCopyright(_a) {
     return copyrightText ? (react_1.default.createElement(Wrapper, { "data-component-name": "Footer/FooterCopyright" }, copyrightText)) : null;
 }
 exports.FooterCopyright = FooterCopyright;
-var Wrapper = styled_components_1.default.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  font-size: 0.875em;\n  padding: 1.5em 3em;\n  font-weight: var(--font-weight-bold);\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  text-align: center;\n  span {\n    max-width: 1200px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  font-size: 0.875em;\n  padding: 1.5em 3em;\n  font-weight: var(--font-weight-bold);\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  text-align: center;\n  span {\n    max-width: 1200px;\n  }\n"])));
+var Wrapper = styled_components_1.default.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  font-size: 0.875em;\n  padding: 1.5em 3em;\n  font-weight: var(--font-weight-bold);\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  text-align: center;\n  span {\n    max-width: var(--footer-container-max-width);\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  font-size: 0.875em;\n  padding: 1.5em 3em;\n  font-weight: var(--font-weight-bold);\n  background-color: var(--footer-background-color);\n  color: var(--footer-text-color);\n  text-align: center;\n  span {\n    max-width: var(--footer-container-max-width);\n  }\n"])));
 var templateObject_1;

package/JsonViewer/JsonViewer.js

@@ -141,7 +141,7 @@ function JsonComponent(_a) {
 exports.Json = (0, react_1.memo)(JsonComponent);
 exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(function () { return ({
     'data-component-name': 'JsonViewer/JsonViewer',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\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  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\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: inline;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\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  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\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: inline;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--panel-samples-code-block-background-color);\n    color: var(--text-color-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--border-radius);\n  background-color: var(--panel-samples-code-block-background-color);\n  color: var(--text-color-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\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: inline;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--panel-samples-code-block-background-color);\n    color: var(--text-color-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--border-radius);\n  background-color: var(--panel-samples-code-block-background-color);\n  color: var(--text-color-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    white-space: nowrap;\n\n    & > .collapser:after {\n      content: '+';\n    }\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    --size: 15px;\n    --margin-right: 3px;\n\n    display: inline-block;\n    background-color: transparent;\n    border: 0;\n    padding: 1px;\n    color: #fff;\n    width: var(--size);\n    height: var(--size);\n    margin-left: calc((var(--size) + var(--margin-right)) * -1);\n    margin-right: var(--margin-right);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n    }\n\n    &:focus {\n      outline: #fff dotted 1px;\n    }\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: inline;\n  }\n"])));
 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/Markdown/Admonition.js

@@ -21,11 +21,11 @@ function Admonition(_a) {
 exports.Admonition = Admonition;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  align-items: center;\n  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);\n  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);\n  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));\n  border-radius: var(--admonition-border-radius);\n  font-size: var(--admonition-font-size);\n  font-weight: var(--admonition-font-weight);\n  line-height: var(--admonition-line-height);\n\n  ", "\n"], ["\n  position: relative;\n  align-items: center;\n  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);\n  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);\n  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));\n  border-radius: var(--admonition-border-radius);\n  font-size: var(--admonition-font-size);\n  font-weight: var(--admonition-font-weight);\n  line-height: var(--admonition-line-height);\n\n  ", "\n"])), function (_a) {
     var type = _a.type;
-    return "\n    background-color: var(--admonition-".concat(type, "-background-color);\n    color: var(--admonition-").concat(type, "-text-color);\n  ");
+    return "\n    background-color: var(--admonition-".concat(type, "-background-color);\n    color: var(--admonition-").concat(type, "-text-color);\n    border: var(--admonition-").concat(type, "-border);\n  ");
 });
-var Heading = styled_components_1.default.h5(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin: 0 0 10px;\n\n  letter-spacing: var(--admonition-heading-letter-spacing);\n  color: ", ";\n\n  && {\n    font-size: var(--admonition-heading-font-size);\n    font-weight: var(--admonition-heading-font-weight);\n    line-height: var(--admonition-line-height);\n    transform: var(--admonition-heading-transform);\n  }\n"], ["\n  display: block;\n  margin: 0 0 10px;\n\n  letter-spacing: var(--admonition-heading-letter-spacing);\n  color: ", ";\n\n  && {\n    font-size: var(--admonition-heading-font-size);\n    font-weight: var(--admonition-heading-font-weight);\n    line-height: var(--admonition-line-height);\n    transform: var(--admonition-heading-transform);\n  }\n"])), function (_a) {
+var Heading = styled_components_1.default.h5(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin: 0 0 10px;\n\n  letter-spacing: var(--admonition-heading-letter-spacing);\n  color: ", ";\n\n  && {\n    font-size: var(--admonition-heading-font-size);\n    font-weight: var(--admonition-heading-font-weight);\n    line-height: var(--admonition-line-height);\n    text-transform: var(--admonition-heading-transform);\n  }\n"], ["\n  display: block;\n  margin: 0 0 10px;\n\n  letter-spacing: var(--admonition-heading-letter-spacing);\n  color: ", ";\n\n  && {\n    font-size: var(--admonition-heading-font-size);\n    font-weight: var(--admonition-heading-font-weight);\n    line-height: var(--admonition-line-height);\n    text-transform: var(--admonition-heading-transform);\n  }\n"])), function (_a) {
     var type = _a.type;
-    return "var(--admonition-".concat(type, "-text-color)");
+    return "var(--admonition-".concat(type, "-heading-text-color)");
 });
 var Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & > p:first-child {\n    margin-top: 0;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Markdown/CodeSample/CodeSample.js

@@ -65,8 +65,8 @@ function CodeSample(_a) {
 }
 exports.CodeSample = CodeSample;
 var 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"])));
-var 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"])));
-var 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"])));
+var CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: var(--code-block-controls-padding);\n  border-radius: var(--code-block-controls-border-radius);\n  font-size: var(--code-block-controls-font-size);\n  font-family: var(--code-block-controls-font-family);\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: var(--code-block-controls-padding);\n  border-radius: var(--code-block-controls-border-radius);\n  font-size: var(--code-block-controls-font-size);\n  font-family: var(--code-block-controls-font-family);\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+var DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: var(--code-block-controls-padding);\n  border-radius: var(--code-block-controls-border-radius);\n  font-size: var(--code-block-controls-font-size);\n  font-family: var(--code-block-controls-font-family);\n  cursor: default;\n"], ["\n  padding: var(--code-block-controls-padding);\n  border-radius: var(--code-block-controls-border-radius);\n  font-size: var(--code-block-controls-font-size);\n  font-family: var(--code-block-controls-font-family);\n  cursor: default;\n"])));
 var darkStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\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  .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  .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  .token.deleted {\n    color: red;\n  }\n"])));
-var Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\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    ", ";\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: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\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    ", ";\n  }\n"])), CopyCodeButton, DoneIndicator, CopyCodeButton, CodeSampleButtonContainer, CopyCodeButton, darkStyleTokens);
+var Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: var(--code-block-controls-text-color);\n    background-color: var(--code-block-controls-background-color);\n    opacity: var(--code-block-controls-opacity);\n  }\n  ", ":hover {\n    color: var(--code-block-controls-hover-text-color);\n    background-color: var(--code-block-controls-hover-background-color);\n    opacity: var(--code-block-controls-active-opacity);\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: var(--code-block-border-radius);\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: var(--code-block-text-color);\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(--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    ", ";\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: var(--code-block-controls-text-color);\n    background-color: var(--code-block-controls-background-color);\n    opacity: var(--code-block-controls-opacity);\n  }\n  ", ":hover {\n    color: var(--code-block-controls-hover-text-color);\n    background-color: var(--code-block-controls-hover-background-color);\n    opacity: var(--code-block-controls-active-opacity);\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: var(--code-block-border-radius);\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: var(--code-block-text-color);\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(--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    ", ";\n  }\n"])), CopyCodeButton, DoneIndicator, CopyCodeButton, darkStyleTokens);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Markdown/ContainerWrapper.d.ts

@@ -0,0 +1,5 @@
+export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {
+    'data-component-name': string;
+} & {
+    withToc: boolean;
+}, "data-component-name">;

package/Markdown/ContainerWrapper.js

@@ -0,0 +1,21 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ContainerWrapper = styled_components_1.default.section.attrs(function () { return ({
+    'data-component-name': 'Markdown/ContainerWrapper',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--md-container-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  max-width: var(--md-container-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+}, function (_a) {
+    var withToc = _a.withToc;
+    return (withToc ? "calc(90% - var(--toc-width))" : '90%');
+});
+var templateObject_1;

package/Markdown/MarkdownLayout.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownLayout = void 0;
 var react_1 = __importDefault(require("react"));
 var PageWrapper_1 = require("../Markdown/PageWrapper");
-var ContentWrapper_1 = require("../Markdown/ContentWrapper");
+var ContainerWrapper_1 = require("../Markdown/ContainerWrapper");
 var PageNavigation_1 = require("../PageNavigation/PageNavigation");
 function MarkdownLayout(_a) {
     var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
-        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { withToc: true },
+        react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             markdownWrapper,
             react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
         tableOfContent));

package/Markdown/MarkdownWrapper.js

@@ -30,14 +30,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../utils");
-exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table.md {\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    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    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    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"], ["\n  table.md {\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    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    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    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"])));
+exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table.md {\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: var(--md-table-margin-vertical);\n    margin-bottom: var(--md-table-margin-vertical);\n    font-size: var(--md-table-font-size);\n\n    th,\n    td {\n      padding: var(--md-table-cell-padding);\n      border-bottom: 1px solid var(--md-table-border-color);\n      color: var(--md-table-cell-text-color);\n    }\n\n    tr {\n      background-color: var(--md-table-stripe-background-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: var(--md-table-head-font-weight);\n      color: var(--md-table-head-text-color);\n      background-color: var(--md-table-head-background-color);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--md-table-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--md-table-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--md-table-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--md-table-border-radius);\n    }\n\n    /* top-right border */\n\n    thead tr:first-child th:last-child {\n      border-top-right-radius: var(--md-table-border-radius);\n    }\n\n    /* bottom-left border */\n\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--md-table-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--md-table-border-radius);\n    }\n  }\n"], ["\n  table.md {\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: var(--md-table-margin-vertical);\n    margin-bottom: var(--md-table-margin-vertical);\n    font-size: var(--md-table-font-size);\n\n    th,\n    td {\n      padding: var(--md-table-cell-padding);\n      border-bottom: 1px solid var(--md-table-border-color);\n      color: var(--md-table-cell-text-color);\n    }\n\n    tr {\n      background-color: var(--md-table-stripe-background-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: var(--md-table-head-font-weight);\n      color: var(--md-table-head-text-color);\n      background-color: var(--md-table-head-background-color);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--md-table-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--md-table-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--md-table-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--md-table-border-radius);\n    }\n\n    /* top-right border */\n\n    thead tr:first-child th:last-child {\n      border-top-right-radius: var(--md-table-border-radius);\n    }\n\n    /* bottom-left border */\n\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--md-table-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--md-table-border-radius);\n    }\n  }\n"])));
 // 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_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);
+    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: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\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: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\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.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
     'data-component-name': 'Markdown/MarkdownWrapper',
-}); })(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.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\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.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\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.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\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.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\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());
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--text-color);\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-text-color);\n    font-weight: var(--link-font-weight);\n\n    &:visited {\n      color: var(--link-visited-text-color);\n      text-decoration: var(--link-visited-decoration);\n    }\n\n    &:hover {\n      text-decoration: var(--link-hover-decoration);\n      color: var(--link-hover-text-color);\n    }\n\n    &:focus {\n      color: var(--link-active-text-color);\n      text-decoration: var(--link-active-decoration);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--heading-font-weight);\n    font-family: var(--heading-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(--md-hr-border-color);\n    background-color: var(--md-hr-background-color);\n    height: var(--md-hr-height);\n    margin: var(--md-hr-margin-vertical) 0;\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--text-color);\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(--heading-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(--text-color-secondary);\n\n        &.active {\n          color: var(--heading-text-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    margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\n  }\n\n  code {\n    color: var(--inline-code-text-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: var(--inline-code-border-radius);\n    border: 1px solid var(--inline-code-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(--inline-code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);\n    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);\n    border-left: var(--md-blockquote-border-left);\n    background-color: var(--md-blockquote-background-color);\n    color: var(--md-blockquote-text-color);\n    box-shadow: var(--md-blockquote-box-shadow);\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  ol {\n    padding-left: var(--md-list-left-padding);\n    margin: 0 0 var(--md-list-margin);\n\n    ul,\n    ol {\n      margin-bottom: 0;\n      margin-top: 0;\n    }\n  }\n\n  li {\n    margin: var(--md-list-item-margin);\n    list-style: var(--md-list-item-style);\n  }\n\n  ol > li {\n    list-style: var(--md-numbered-list-item-style);\n  }\n\n  ol > li:before {\n    content: counter(list-item);\n    display: var(--md-numbered-list-number-display);\n    color: var(--md-numbered-list-number-text-color);\n    font-size: var(--md-numbered-list-number-font-size);\n    font-family: var(--md-numbered-list-number-font-family);\n    font-weight: var(--md-numbered-list-number-font-weight);\n    background-color: var(--md-numbered-list-number-background-color);\n    border-radius: var(--md-numbered-list-number-border-radius);\n    border: var(--md-numbered-list-number-border);\n    margin-right: var(--md-numbered-list-number-margin-right);\n    padding: var(--md-numbered-list-number-padding);\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--text-color);\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-text-color);\n    font-weight: var(--link-font-weight);\n\n    &:visited {\n      color: var(--link-visited-text-color);\n      text-decoration: var(--link-visited-decoration);\n    }\n\n    &:hover {\n      text-decoration: var(--link-hover-decoration);\n      color: var(--link-hover-text-color);\n    }\n\n    &:focus {\n      color: var(--link-active-text-color);\n      text-decoration: var(--link-active-decoration);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--heading-font-weight);\n    font-family: var(--heading-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(--md-hr-border-color);\n    background-color: var(--md-hr-background-color);\n    height: var(--md-hr-height);\n    margin: var(--md-hr-margin-vertical) 0;\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--text-color);\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(--heading-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(--text-color-secondary);\n\n        &.active {\n          color: var(--heading-text-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    margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  h1.md code {\n    font-size: var(--h1-font-size);\n  }\n\n  h2.md code {\n    font-size: var(--h2-font-size);\n  }\n\n  h3.md code {\n    font-size: var(--h3-font-size);\n  }\n\n  h4.md code {\n    font-size: var(--h4-font-size);\n  }\n\n  h5.md code {\n    font-size: var(--h5-font-size);\n  }\n\n  h6.md code {\n    font-size: var(--h6-font-size);\n  }\n\n  code {\n    color: var(--inline-code-text-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: var(--inline-code-border-radius);\n    border: 1px solid var(--inline-code-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(--inline-code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);\n    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);\n    border-left: var(--md-blockquote-border-left);\n    background-color: var(--md-blockquote-background-color);\n    color: var(--md-blockquote-text-color);\n    box-shadow: var(--md-blockquote-box-shadow);\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  ol {\n    padding-left: var(--md-list-left-padding);\n    margin: 0 0 var(--md-list-margin);\n\n    ul,\n    ol {\n      margin-bottom: 0;\n      margin-top: 0;\n    }\n  }\n\n  li {\n    margin: var(--md-list-item-margin);\n    list-style: var(--md-list-item-style);\n  }\n\n  ol > li {\n    list-style: var(--md-numbered-list-item-style);\n  }\n\n  ol > li:before {\n    content: counter(list-item);\n    display: var(--md-numbered-list-number-display);\n    color: var(--md-numbered-list-number-text-color);\n    font-size: var(--md-numbered-list-number-font-size);\n    font-family: var(--md-numbered-list-number-font-family);\n    font-weight: var(--md-numbered-list-number-font-weight);\n    background-color: var(--md-numbered-list-number-background-color);\n    border-radius: var(--md-numbered-list-number-border-radius);\n    border: var(--md-numbered-list-number-border);\n    margin-right: var(--md-numbered-list-number-margin-right);\n    padding: var(--md-numbered-list-number-padding);\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/Markdown/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../Markdown/Admonition';
 export * from '../Markdown/CodeSample';
-export * from '../Markdown/ContentWrapper';
+export * from '../Markdown/ContainerWrapper';
 export * from '../Markdown/Heading';
 export * from '../Markdown/MarkdownLayout';
 export * from '../Markdown/MarkdownWrapper';

package/Markdown/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../Markdown/Admonition"), exports);
 __exportStar(require("../Markdown/CodeSample"), exports);
-__exportStar(require("../Markdown/ContentWrapper"), exports);
+__exportStar(require("../Markdown/ContainerWrapper"), exports);
 __exportStar(require("../Markdown/Heading"), exports);
 __exportStar(require("../Markdown/MarkdownLayout"), exports);
 __exportStar(require("../Markdown/MarkdownWrapper"), exports);

package/Navbar/MobileNavbarItem.js

@@ -77,7 +77,7 @@ function MobileNavbarItem(_a) {
 }
 exports.MobileNavbarItem = MobileNavbarItem;
 var ExpandedArrow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 5px;\n  height: 5px;\n  border: 1px solid;\n  border-left: none;\n  border-top: none;\n  transition: all 0.3s ease-out;\n"], ["\n  width: 5px;\n  height: 5px;\n  border: 1px solid;\n  border-left: none;\n  border-top: none;\n  transition: all 0.3s ease-out;\n"])));
-exports.NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: left;\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  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: left;\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  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"])), function (_a) {
+exports.NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--navbar-item-padding-horizontal);\n  text-align: left;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--navbar-item-padding-horizontal);\n  text-align: left;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"])), function (_a) {
     var active = _a.active;
     return (active ? 'var(--navbar-item-active-background-color)' : 'none');
 });

package/Navbar/MobileNavbarMenu.js

@@ -19,14 +19,14 @@ function MobileNavbarMenu(_a) {
     if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
         return null;
     }
-    return (react_1.default.createElement(NavItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
-        react_1.default.createElement(NavItemsContainer, null, menuItems.map(function (navItem, index) {
+    return (react_1.default.createElement(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
+        react_1.default.createElement(NavbarItemsContainer, null, menuItems.map(function (navItem, index) {
             return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
         })),
-        react_1.default.createElement(NavItemsClosableArea, { onClick: closeMenu })));
+        react_1.default.createElement(NavbarItemsClosableArea, { onClick: closeMenu })));
 }
 exports.MobileNavbarMenu = MobileNavbarMenu;
-var NavItemsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\n      cursor: pointer;\n      a {\n        color: var(--navbar-text-color);\n        text-decoration: none;\n      }\n      :hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\n      cursor: pointer;\n      a {\n        color: var(--navbar-text-color);\n        text-decoration: none;\n      }\n      :hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
-var NavItemsClosableArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"], ["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"])));
-var NavItemsContainer = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", "  { \n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;  \n  }\n  \n  ", " {\n    display: block;\n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", "  {\n      border-bottom: none;\n    }\n  ", " {\n    background-color: var(--navbar-background-color); \n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"], [" \n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", "  { \n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;  \n  }\n  \n  ", " {\n    display: block;\n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", "  {\n      border-bottom: none;\n    }\n  ", " {\n    background-color: var(--navbar-background-color); \n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"])), NavbarItem_1.NavMenuItem, NavbarItem_1.NavMenuItemWithDropdownWrapper, NavbarItem_1.NavMenuItem, NavbarDropdown_1.DropdownWrapper);
+var NavbarItemsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\n      cursor: pointer;\n      a {\n        color: var(--navbar-text-color);\n        text-decoration: none;\n      }\n      :hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\n      cursor: pointer;\n      a {\n        color: var(--navbar-text-color);\n        text-decoration: none;\n      }\n      :hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
+var NavbarItemsClosableArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"], ["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"])));
+var NavbarItemsContainer = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", " {\n    &:not(:last-child) {\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;\n  }\n\n  ", " {\n    display: block;\n    &:not(:last-child) {\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", " {\n      border-bottom: none;\n    }\n  }\n\n  ", " {\n    background-color: var(--navbar-background-color);\n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"], ["\n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", " {\n    &:not(:last-child) {\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;\n  }\n\n  ", " {\n    display: block;\n    &:not(:last-child) {\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", " {\n      border-bottom: none;\n    }\n  }\n\n  ", " {\n    background-color: var(--navbar-background-color);\n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"])), NavbarItem_1.NavbarMenuItem, NavbarItem_1.NavbarMenuItemWithDropdownWrapper, NavbarItem_1.NavbarMenuItem, NavbarDropdown_1.DropdownWrapper);
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/Navbar.d.ts

@@ -8,4 +8,5 @@ interface NavbarProps {
 }
 export declare function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const NavbarRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarContainer = exports.Navbar = void 0;
+exports.NavbarRow = exports.NavbarContainer = exports.Navbar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
@@ -46,18 +46,20 @@ function Navbar(_a) {
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
         isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
-        logo,
-        react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
-        hideSearch ? null : search,
-        profile,
-        react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)));
+        react_1.default.createElement(exports.NavbarRow, null,
+            logo,
+            react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
+            hideSearch ? null : search,
+            profile,
+            react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
 }
 exports.Navbar = 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-text-color);\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: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\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: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {
+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  align-items: center;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  background: var(--navbar-background-color);\n  font-family: var(--navbar-item-font-family);\n\n  ", " {\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  background: var(--navbar-background-color);\n  font-family: var(--navbar-item-font-family);\n\n  ", " {\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 }, function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.print;
 });
-var templateObject_1;
+exports.NavbarRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 auto;\n  width: 100%;\n\n  max-width: var(--navbar-container-max-width);\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 auto;\n  width: 100%;\n\n  max-width: var(--navbar-container-max-width);\n"])));
+var templateObject_1, templateObject_2;

package/Navbar/NavbarDropdown.js

@@ -17,5 +17,5 @@ function NavbarDropdown(_a) {
         react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))); })));
 }
 exports.NavbarDropdown = NavbarDropdown;
-exports.DropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"])));
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background: var(--navbar-dropdown-background);\n  border: var(--navbar-item-border);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background: var(--navbar-dropdown-background);\n  border: var(--navbar-item-border);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"])));
 var templateObject_1;

package/Navbar/NavbarItem.d.ts

@@ -6,8 +6,8 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NavMenuItem: import("styled-components").StyledComponent<"li", any, {
+export declare const NavbarMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavbarLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export declare const NavbarMenuItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean | undefined;
 }, never>;
-export declare const NavLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;

package/Navbar/NavbarItem.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavLink = exports.NavMenuItem = exports.NavMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
+exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
@@ -20,31 +20,34 @@ function NavbarItem(_a) {
     if (navItem.link) {
         var item = navItem;
         var isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
-        return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
-            react_1.default.createElement(exports.NavLink, { to: item.link, active: isActive },
-                react_1.default.createElement(NavLabel, null, item.label))));
+        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.NavbarLink, { to: item.link, active: isActive },
+                react_1.default.createElement(NavbarLabel, null, item.label))));
     }
     if (navItem.items) {
         var item = navItem;
-        return (react_1.default.createElement(exports.NavMenuItemWithDropdownWrapper, null,
-            react_1.default.createElement(exports.NavMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
-                react_1.default.createElement(NavLabel, null, item.label)),
+        return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+                react_1.default.createElement(NavbarLabel, null, item.label)),
             react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
     }
     return null;
 }
 exports.NavbarItem = NavbarItem;
-exports.NavMenuItemWithDropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
-exports.NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 8px calc(var(--sidebar-spacing-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: 8px calc(var(--sidebar-spacing-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');
-});
-exports.NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
+exports.NavbarMenuItemWithDropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
+exports.NavbarLink = (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-text-color)';
 }, function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-decoration)' : 'none';
 });
-var NavLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+exports.NavbarMenuItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  margin-left: var(--navbar-item-margin-horizontal);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  color: ", ";\n  &:hover {\n    color: var(--navbar-item-hover-text-color);\n    text-decoration: var(--navbar-item-hover-text-decoration);\n    background: var(--navbar-item-hover-background-color);\n    ", " {\n      color: var(--navbar-item-hover-text-color);\n      text-decoration: var(--navbar-item-hover-text-decoration);\n    }\n  }\n"], ["\n  display: inline-block;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  margin-left: var(--navbar-item-margin-horizontal);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  color: ", ";\n  &:hover {\n    color: var(--navbar-item-hover-text-color);\n    text-decoration: var(--navbar-item-hover-text-decoration);\n    background: var(--navbar-item-hover-background-color);\n    ", " {\n      color: var(--navbar-item-hover-text-color);\n      text-decoration: var(--navbar-item-hover-text-decoration);\n    }\n  }\n"])), function (_a) {
+    var active = _a.active;
+    return active && 'var(--navbar-item-active-background-color)';
+}, function (_a) {
+    var active = _a.active;
+    return active && 'var(--navbar-item-active-text-color)';
+}, exports.NavbarLink);
+var NavbarLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;