@redocly/theme 0.2.2 → 0.4.0

package/Sidebar/DrilldownMenu.js

@@ -45,8 +45,8 @@ function DrilldownMenu(_a) {
             children)));
 }
 exports.DrilldownMenu = DrilldownMenu;
-var MenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-background-color);\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-background-color);\n"])));
+var MenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-item-drilldown-background-color);\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-item-drilldown-background-color);\n"])));
 var slideInAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    transform: translateX(100%)\n  }\n  100% {\n    transform: translateX(0%)\n  }\n"], ["\n  0% {\n    transform: translateX(100%)\n  }\n  100% {\n    transform: translateX(0%)\n  }\n"])));
 var MenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation-name: ", ";\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n  animation-timing-function: ease;\n  background-color: transparent;\n"], ["\n  animation-name: ", ";\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n  animation-timing-function: ease;\n  background-color: transparent;\n"])), slideInAnimation);
-var MenuWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"], ["\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"])));
+var MenuWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"], ["\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/DrilldownMenuItem.js

@@ -19,7 +19,7 @@ function DrilldownMenuItem(_a) {
             item.sublabel ? react_1.default.createElement(SubLabel, null, item.sublabel) : null)));
 }
 exports.DrilldownMenuItem = DrilldownMenuItem;
-var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-color);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-bold);\n"], ["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-color);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-bold);\n"])));
-var Icon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: calc(var(--sidebar-spacing-unit) * 4);\n  height: calc(var(--sidebar-spacing-unit) * 4);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: 50%;\n  flex-shrink: 0;\n  overflow: hidden;\n"], ["\n  width: calc(var(--sidebar-spacing-unit) * 4);\n  height: calc(var(--sidebar-spacing-unit) * 4);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: 50%;\n  flex-shrink: 0;\n  overflow: hidden;\n"])));
-var SubLabel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 2px;\n  font-size: 0.85rem;\n  color: var(--color-content);\n  font-weight: var(--font-weight-regular);\n"], ["\n  margin-top: 2px;\n  font-size: 0.85rem;\n  color: var(--color-content);\n  font-weight: var(--font-weight-regular);\n"])));
+var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-drilldown-text-color);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--sidebar-item-drilldown-font-size);\n  font-family: var(--sidebar-item-drilldown-font-family);\n  text-transform: var(--sidebar-text-drilldown-transform);\n  background: var(--sidebar-item-drilldown-background-color);\n"], ["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-drilldown-text-color);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--sidebar-item-drilldown-font-size);\n  font-family: var(--sidebar-item-drilldown-font-family);\n  text-transform: var(--sidebar-text-drilldown-transform);\n  background: var(--sidebar-item-drilldown-background-color);\n"])));
+var Icon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: var(--sidebar-item-icon-size);\n  height: var(--sidebar-item-icon-size);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: var(--sidebar-item-icon-border-radius);\n  flex-shrink: 0;\n  overflow: hidden;\n"], ["\n  width: var(--sidebar-item-icon-size);\n  height: var(--sidebar-item-icon-size);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: var(--sidebar-item-icon-border-radius);\n  flex-shrink: 0;\n  overflow: hidden;\n"])));
+var SubLabel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 2px;\n  color: var(--sidebar-item-sublabel-text-color);\n  font-weight: var(-sidebar-item-sublabel-font-weight);\n  font-size: var(--sidebar-item-sublabel-font-size);\n  font-family: var(--sidebar-item-sublabel-font-family);\n"], ["\n  margin-top: 2px;\n  color: var(--sidebar-item-sublabel-text-color);\n  font-weight: var(-sidebar-item-sublabel-font-weight);\n  font-size: var(--sidebar-item-sublabel-font-size);\n  font-family: var(--sidebar-item-sublabel-font-family);\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Sidebar/ExternalIcon.js

@@ -19,5 +19,5 @@ var Icon = function (_a) {
             react_1.default.createElement("path", { d: "M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" }),
             react_1.default.createElement("path", { d: "M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" }))));
 };
-exports.ExternalIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-chevron-color);\n"], ["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-chevron-color);\n"])));
+exports.ExternalIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-group-item-chevron-color);\n"], ["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-group-item-chevron-color);\n"])));
 var templateObject_1;

package/Sidebar/Menu.js

@@ -11,5 +11,5 @@ exports.Menu = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Menu = styled_components_1.default.ul.attrs(function () { return ({
     'data-component-name': 'Sidebar/Menu',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-color);\n  position: relative;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-color);\n  position: relative;\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-text-color);\n  position: relative;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-text-color);\n  position: relative;\n"])));
 var templateObject_1;

package/Sidebar/MenuContainer.js

@@ -11,5 +11,5 @@ exports.MenuContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MenuContainer = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuContainer',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-offset-top);\n"])));
 var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -26,7 +26,11 @@ function MenuGroup(_a) {
 }
 exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"], ["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"])));
-var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"], ["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); });
+var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n"])));
+var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); }, function (props) {
+    return props.active
+        ? "color: var(--sidebar-item-group-active-text-color);\n        background-color: var(--sidebar-item-group-active-background-color);"
+        : null;
+});
 var MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/MenuItemLabel.js

@@ -11,7 +11,7 @@ exports.MenuItemLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MenuItemLabel = styled_components_1.default.li.attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuItemLabel',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  font-family: var(--sidebar-font-family);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-spacing-offset-left);\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-top-left-radius: var(--sidebar-border-radius);\n  border-bottom-left-radius: var(--sidebar-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  font-family: var(--sidebar-font-family);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-spacing-offset-left);\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-top-left-radius: var(--sidebar-border-radius);\n  border-bottom-left-radius: var(--sidebar-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (props) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  background-color: var(--sidebar-item-background-color);\n  font-family: var(--sidebar-item-font-family);\n  font-size: var(--sidebar-item-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-offset-left);\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-radius: var(--sidebar-item-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  background-color: var(--sidebar-item-background-color);\n  font-family: var(--sidebar-item-font-family);\n  font-size: var(--sidebar-item-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-offset-left);\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-radius: var(--sidebar-item-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (props) {
     return props.active
         ? "\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  "
         : null;

package/Sidebar/MenuLink.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var UniversalLink_1 = require("../ui/UniversalLink");
 exports.MenuLink = (0, styled_components_1.default)(UniversalLink_1.UniversalLink).attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuLink',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n  color: var(--sidebar-item-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"], ["\n  text-decoration: none;\n  color: var(--sidebar-item-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n  color: var(--sidebar-item-text-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"], ["\n  text-decoration: none;\n  color: var(--sidebar-item-text-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"])));
 var templateObject_1;

package/Sidebar/SeparatorItem.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(function () { return ({
     'data-component-name': 'Sidebar/SeparatorItem',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-item-color);\n  font-family: var(--sidebar-item-separator-font-family);\n  font-size: var(--sidebar-item-separator-font-size);\n  text-transform: var(--sidebar-item-separator-text-transform);\n  background: var(--sidebar-item-separator-background-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-item-color);\n  font-family: var(--sidebar-item-separator-font-family);\n  font-size: var(--sidebar-item-separator-font-size);\n  text-transform: var(--sidebar-item-separator-text-transform);\n  background: var(--sidebar-item-separator-background-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
 var templateObject_1;

package/Sidebar/SeparatorLine.js

@@ -11,5 +11,5 @@ exports.SeparatorLine = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.SeparatorLine = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Sidebar/SeparatorLine',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--sidebar-separator-line-color);\n  margin: var(--sidebar-spacing-padding-vertical) 0;\n"], ["\n  height: 1px;\n  background-color: var(--sidebar-separator-line-color);\n  margin: var(--sidebar-spacing-padding-vertical) 0;\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--sidebar-item-separator-line-color);\n  margin: var(--sidebar-item-padding-vertical) 0;\n"], ["\n  height: 1px;\n  background-color: var(--sidebar-item-separator-line-color);\n  margin: var(--sidebar-item-padding-vertical) 0;\n"])));
 var templateObject_1;

package/Sidebar/Sidebar.js

@@ -11,7 +11,7 @@ exports.Sidebar = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Sidebar = styled_components_1.default.aside.attrs(function () { return ({
     'data-component-name': 'Sidebar/Sidebar',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-right: 1px solid var(--sidebar-right-line-color);\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background: var(--sidebar-background-color);\n  font-size: var(--sidebar-font-size);\n  font-family: var(--sidebar-font-family);\n  color: var(--sidebar-item-color);\n  top: var(--navbar-height);\n  height: calc(100vh - var(--navbar-height));\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  ", ";\n\n  ", " {\n    position: sticky;\n    pointer-events: auto;\n    display: flex;\n    opacity: 1;\n    flex-shrink: 0;\n    width: var(--sidebar-width);\n\n    & > * {\n      transform: none;\n    }\n  }\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  border-right: 1px solid var(--sidebar-right-line-color);\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background: var(--sidebar-background-color);\n  font-size: var(--sidebar-font-size);\n  font-family: var(--sidebar-font-family);\n  color: var(--sidebar-item-color);\n  top: var(--navbar-height);\n  height: calc(100vh - var(--navbar-height));\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  ", ";\n\n  ", " {\n    position: sticky;\n    pointer-events: auto;\n    display: flex;\n    opacity: 1;\n    flex-shrink: 0;\n    width: var(--sidebar-width);\n\n    & > * {\n      transform: none;\n    }\n  }\n\n  ", " {\n    transform: none;\n  }\n"])), function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-right: 1px solid var(--sidebar-border-color);\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background: var(--sidebar-background-color);\n  font-size: var(--sidebar-item-font-size);\n  font-family: var(--sidebar-item-font-family);\n  color: var(--sidebar-item-text-color);\n  top: var(--navbar-height);\n  height: calc(100vh - var(--navbar-height));\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  ", ";\n\n  ", " {\n    position: sticky;\n    pointer-events: auto;\n    display: flex;\n    opacity: 1;\n    flex-shrink: 0;\n    width: var(--sidebar-width);\n\n    & > * {\n      transform: none;\n    }\n  }\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  border-right: 1px solid var(--sidebar-border-color);\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background: var(--sidebar-background-color);\n  font-size: var(--sidebar-item-font-size);\n  font-family: var(--sidebar-item-font-family);\n  color: var(--sidebar-item-text-color);\n  top: var(--navbar-height);\n  height: calc(100vh - var(--navbar-height));\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  ", ";\n\n  ", " {\n    position: sticky;\n    pointer-events: auto;\n    display: flex;\n    opacity: 1;\n    flex-shrink: 0;\n    width: var(--sidebar-width);\n\n    & > * {\n      transform: none;\n    }\n  }\n\n  ", " {\n    transform: none;\n  }\n"])), function (_a) {
     var opened = _a.opened, animate = _a.animate;
     return "\n    opacity: ".concat(opened ? '1' : '0', ";\n    pointer-events: ").concat(opened ? 'auto' : 'none', ";\n    \n    & > * {\n      transform: ").concat(opened ? 'translate(0, 0)' : 'translate(0, 40px)', ";\n      transition: ").concat(animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none', ";\n    }\n  ");
 }, function (_a) {

package/SidebarLogo/SidebarLogo.js

@@ -19,7 +19,7 @@ function SidebarLogo(_a) {
     return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor: backgroundColor }, "data-component-name": "SidebarLogo/SidebarLogo" }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
 }
 exports.SidebarLogo = SidebarLogo;
-var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));
+var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--sidebar-logo-max-height);\n  max-width: var(--sidebar-logo-max-width);\n  padding: var(--sidebar-logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--sidebar-logo-max-height);\n  max-width: var(--sidebar-logo-max-width);\n  padding: var(--sidebar-logo-padding);\n  width: 100%;\n  display: block;\n"])));
 var LogoWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  line-height: 0;\n"], ["\n  text-align: center;\n  line-height: 0;\n"])));
 var Link = styled_components_1.default.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/SourceCode/SourceCode.js

@@ -61,12 +61,12 @@ function SourceCode(_a) {
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c;
-        var _externalSource = (_c = (_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)) !== null && _c !== void 0 ? _c : '';
-        if (_externalSource) {
-            setSourceCode(_externalSource);
+        var _a, _b;
+        var _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
+        if (_source) {
+            setSourceCode(_source);
         }
-    }, [externalSource]);
+    }, [source, externalSource]);
     if (withCopyButton) {
         return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;

package/TableOfContent/TableOfContent.js

@@ -69,14 +69,14 @@ function TableOfContent(props) {
             }))))));
 }
 exports.TableOfContent = TableOfContent;
-var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"], ["\n  font-size: 0.8em;\n  padding: 10px 15px;\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
-var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--color-content);\n  cursor: pointer;\n  font-size: 0.8em;\n  padding: 10px 15px;\n  padding-left: ", "px;\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--h-font-family);\n\n  :hover,\n  &.active {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
+var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"], ["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"])));
+var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
     var depth = _a.depth;
-    return depth * 15;
+    return depth;
 });
-var TableOfContentMenu = styled_components_1.default.aside(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1rem;\n  background-color: transparent;\n  flex-shrink: 0;\n  display: none !important;\n  font-family: var(--font-family-base);\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"], ["\n  font-size: 1rem;\n  background-color: transparent;\n  flex-shrink: 0;\n  display: none !important;\n  font-family: var(--font-family-base);\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"])), function (_a) {
+var TableOfContentMenu = styled_components_1.default.aside(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: var(--toc-background-color);\n  flex-shrink: 0;\n  display: none !important;\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"], ["\n  background-color: var(--toc-background-color);\n  flex-shrink: 0;\n  display: none !important;\n\n  ", " {\n    width: var(--toc-width);\n    display: block !important;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 });
-var TableOfContentItems = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  top: calc(var(--navbar-height) + 20px);\n  max-height: calc(100vh - var(--navbar-height) - 20px);\n  border-left: 1px solid var(--global-border-color);\n  overflow-y: auto;\n  width: var(--toc-width); ;\n"], ["\n  position: sticky;\n  top: calc(var(--navbar-height) + 20px);\n  max-height: calc(100vh - var(--navbar-height) - 20px);\n  border-left: 1px solid var(--global-border-color);\n  overflow-y: auto;\n  width: var(--toc-width); ;\n"])));
+var TableOfContentItems = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  top: calc(var(--navbar-height) + var(--toc-offset-top));\n  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));\n  border-left: 1px solid var(--toc-border-color);\n  overflow-y: auto;\n  width: var(--toc-width); ;\n"], ["\n  position: sticky;\n  top: calc(var(--navbar-height) + var(--toc-offset-top));\n  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));\n  border-left: 1px solid var(--toc-border-color);\n  overflow-y: auto;\n  width: var(--toc-width); ;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Tooltip/Tooltip.js

@@ -88,7 +88,7 @@ var PLACEMENTS = {
     }),
 };
 var TooltipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
-var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
+var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-text-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--border-radius);\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-text-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width || '120px';
 }, function (_a) {

package/Typography/H1.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
     'data-component-name': 'Typography/H1',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h1-text-color);\n  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h1-text-color);\n  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
 var templateObject_1;

package/Typography/H2.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
     'data-component-name': 'Typography/H2',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h2-text-color);\n  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h2-text-color);\n  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
 var templateObject_1;

package/Typography/H3.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
     'data-component-name': 'Typography/H3',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h3-text-color);\n  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h3-text-color);\n  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
 var templateObject_1;

package/Typography/SectionHeader.js

@@ -11,5 +11,5 @@ exports.SectionHeader = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.SectionHeader = styled_components_1.default.h2.attrs(function () { return ({
     'data-component-name': 'Typography/SectionHeader',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h2-color);\n  font-size: var(--h2-font-size);\n  font-weight: var(--h2-font-weight);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h2-font-family);\n"], ["\n  color: var(--h2-color);\n  font-size: var(--h2-font-size);\n  font-weight: var(--h2-font-weight);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h2-font-family);\n"])));
 var templateObject_1;

package/Typography/Typography.js

@@ -13,7 +13,7 @@ exports.Typography = styled_components_1.default.div.attrs(function () { return
     'data-component-name': 'Typography/Typography',
 }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (_a) {
     var color = _a.color;
-    return color || 'var(--color-content)';
+    return color || 'var(--text-color)';
 }, function (_a) {
     var fontFamily = _a.fontFamily;
     return fontFamily || 'var(--font-family-base)';

package/globalStyle.d.ts

@@ -1,2 +1,3 @@
+export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
 export declare const styles: import("styled-components").FlattenSimpleInterpolation;
 export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;