@redocly/theme 0.1.27 → 0.1.30

package/Tooltip/Tooltip.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,43 +43,54 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../hooks");
 function TooltipComponent(_a) {
-    var children = _a.children, open = _a.open, tip = _a.tip, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.className, className = _c === void 0 ? 'default' : _c, width = _a.width, _d = _a.dataTestId, dataTestId = _d === void 0 ? tip : _d;
-    var _e = (0, hooks_1.useControl)(open), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
-    var isControlled = open !== undefined;
+    var children = _a.children, isOpen = _a.isOpen, tip = _a.tip, _b = _a.withArrow, withArrow = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.className, className = _d === void 0 ? 'default' : _d, width = _a.width, dataTestId = _a.dataTestId;
+    var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
+    var isControlled = isOpen !== undefined;
     (0, react_1.useEffect)(function () {
         if (isControlled) {
-            if (open) {
+            if (isOpen) {
                 handleOpen();
             }
             else {
                 handleClose();
             }
         }
-    }, [open, isControlled, handleOpen, handleClose]);
-    var handleEnter = (0, react_1.useCallback)(function () {
-        handleOpen();
-    }, [handleOpen]);
-    var handleLeave = (0, react_1.useCallback)(function () {
-        handleClose();
-    }, [handleClose]);
-    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" },
+    }, [isOpen, isControlled, handleOpen, handleClose]);
+    var controllers = !isControlled && {
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onClick: handleClose,
+    };
+    return (react_1.default.createElement(TooltipWrapper, __assign({}, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
         children,
-        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId, placement: placement, width: width }, tip))));
+        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
 }
 exports.TooltipComponent = TooltipComponent;
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 var PLACEMENTS = {
-    top: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "]))),
-    bottom: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "]))),
-    left: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "]))),
-    right: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "]))),
+    top: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top-width: 6px;\n          border-top-style: solid;\n          bottom: 0;\n          left: 50%;\n          transform: translate(-50%, 99%);\n        }\n      "], ["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top-width: 6px;\n          border-top-style: solid;\n          bottom: 0;\n          left: 50%;\n          transform: translate(-50%, 99%);\n        }\n      "])));
+    }),
+    bottom: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom-width: 6px;\n          border-bottom-style: solid;\n          top: 0;\n          left: 50%;\n          transform: translate(-50%, -99%);\n        }\n      "], ["\n        &::after {\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom-width: 6px;\n          border-bottom-style: solid;\n          top: 0;\n          left: 50%;\n          transform: translate(-50%, -99%);\n        }\n      "])));
+    }),
+    left: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-left-width: 6px;\n          border-left-style: solid;\n          top: 50%;\n          right: 0;\n          transform: translate(99%, -50%);\n        }\n      "], ["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-left-width: 6px;\n          border-left-style: solid;\n          top: 50%;\n          right: 0;\n          transform: translate(99%, -50%);\n        }\n      "])));
+    }),
+    right: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "])), function (_a) {
+        var withArrow = _a.withArrow;
+        return withArrow && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-right-width: 6px;\n          border-right-style: solid;\n          top: 50%;\n          left: 0;\n          transform: translate(-99%, -50%);\n        }\n      "], ["\n        &::after {\n          border-top: 5px solid transparent;\n          border-bottom: 5px solid transparent;\n          border-right-width: 6px;\n          border-right-style: solid;\n          top: 50%;\n          left: 0;\n          transform: translate(-99%, -50%);\n        }\n      "])));
+    }),
 };
-var TooltipWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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  pointer-events: none;\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  pointer-events: none;\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 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  pointer-events: none;\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  pointer-events: none;\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 width = _a.width;
     return width || '120px';
 }, function (_a) {
     var placement = _a.placement;
-    return "".concat(PLACEMENTS[placement], ";");
+    return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), PLACEMENTS[placement]);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/globalStyle.js

@@ -12,7 +12,7 @@ var responseColors = (0, styled_components_1.css)(templateObject_3 || (templateO
 var typography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"], ["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"])));
 var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"], ["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"])));
 var borders = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"])));
-var buttons = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"])));
+var buttons = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-margin: 5px; // @presenter Margin\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-margin: 5px; // @presenter Margin\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var sidebar = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"])));
 var admonition = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n  /* info */\n  --admonition-info-background-color: #ebedf0;\n  --admonition-info-text-color: var(--color-content);\n  --admonition-info-icon-color: #4782cb;\n\n  /* attention */\n  --admonition-attention-background-color: #e6eef8;\n  --admonition-attention-text-color: var(--color-content);\n  --admonition-attention-icon-color: #4782cb;\n\n  /* warning */\n  --admonition-warning-background-color: #feeda5;\n  --admonition-warning-text-color: var(--color-content);\n  --admonition-warning-icon-color: #d4ad03;\n\n  /* danger */\n  --admonition-danger-background-color: #fceaea;\n  --admonition-danger-text-color: var(--color-content);\n  --admonition-danger-icon-color: #e53935;\n\n  /* success */\n  --admonition-success-background-color: #ddffe1;\n  --admonition-success-text-color: var(--color-content);\n  --admonition-success-icon-color: #00aa13;\n\n  /**\n    * @tokens Admonition typography\n    */\n  --admonition-font-size: 16px; // @presenter FontSize\n  --admonition-font-weight: normal; // @presenter FontWeight\n  --admonition-line-height: 1.5em; // @presenter LineHeight\n  --admonition-heading-font-size: 16px; // @presenter FontSize\n  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n  --admonition-heading-transform: uppercase;\n\n  /**\n    * @tokens Admonition spacing\n    * @presenter Spacing\n    */\n  --admonition-margin-horizontal: 0;\n  --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n  --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n  --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n  --admonition-icon-size: 25px;\n\n  /**\n    * @tokens Admonition border\n    */\n  --admonition-border-radius: 8px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Admonition colors\n    * @presenter Color\n    */\n\n  /* info */\n  --admonition-info-background-color: #ebedf0;\n  --admonition-info-text-color: var(--color-content);\n  --admonition-info-icon-color: #4782cb;\n\n  /* attention */\n  --admonition-attention-background-color: #e6eef8;\n  --admonition-attention-text-color: var(--color-content);\n  --admonition-attention-icon-color: #4782cb;\n\n  /* warning */\n  --admonition-warning-background-color: #feeda5;\n  --admonition-warning-text-color: var(--color-content);\n  --admonition-warning-icon-color: #d4ad03;\n\n  /* danger */\n  --admonition-danger-background-color: #fceaea;\n  --admonition-danger-text-color: var(--color-content);\n  --admonition-danger-icon-color: #e53935;\n\n  /* success */\n  --admonition-success-background-color: #ddffe1;\n  --admonition-success-text-color: var(--color-content);\n  --admonition-success-icon-color: #00aa13;\n\n  /**\n    * @tokens Admonition typography\n    */\n  --admonition-font-size: 16px; // @presenter FontSize\n  --admonition-font-weight: normal; // @presenter FontWeight\n  --admonition-line-height: 1.5em; // @presenter LineHeight\n  --admonition-heading-font-size: 16px; // @presenter FontSize\n  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n  --admonition-heading-transform: uppercase;\n\n  /**\n    * @tokens Admonition spacing\n    * @presenter Spacing\n    */\n  --admonition-margin-horizontal: 0;\n  --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n  --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n  --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n  --admonition-icon-size: 25px;\n\n  /**\n    * @tokens Admonition border\n    */\n  --admonition-border-radius: 8px; // @presenter BorderRadius\n\n  // @tokens End\n"])));
 var panels = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Panel border\n    */\n  --panels-border-radius: 8px; // @presenter BorderRadius\n\n  /**\n    * @tokens Samples panel\n    * @presenter Color\n    */\n  --samples-panel-gap: 20px;\n  --samples-panel-width: 50%;\n\n  --panels-background-color: #fff;\n  --samples-panel-block-background-color: #fff;\n  --samples-panel-background-color: #52606d;\n  --samples-panel-callback-background-color: var(--color-secondary-300);\n  --samples-panel-controls-background-color: #323f4b;\n  --samples-panel-controls-hover-background-color: #3c4c5a;\n  --samples-panel-controls-active-border-color: var(--color-accent-500);\n  --samples-panel-text-color: #fff;\n  --samples-panel-heading-color: #fff;\n\n  --samples-panel-markdown-background-color: #3c4c5a;\n  --samples-panel-markdown-border-color: #46596a;\n\n  /**\n    * @tokens Try It panel\n    * @presenter Color\n    */\n\n  --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n  --try-it-panel-active-tab-background-color: #47535e;\n  --try-it-panel-active-tab-border-color: var(--color-accent-500);\n  --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n  --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n  --try-it-panel-action-button-width: auto;\n\n  /**\n    * @tokens Request and Response panel\n    * @presenter Color\n    */\n  --request-and-response-panel-background-color: #fff;\n\n  // @tokens End\n"])));
@@ -22,7 +22,7 @@ var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13
 var openapiAndGraphqlDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"], ["\n  /* === ref docs and graphql docs specific === */\n\n  /**\n    * @tokens OpenAPI-GraphQL Logo\n    */\n  --logo-max-height: 285px;\n  --logo-max-width: 285px;\n  --logo-padding: 2px;\n\n  /**\n    * @tokens OpenAPI-GraphQL Layout\n    */\n  --layout-buttons-top-offset: 20px; // @presenter Spacing\n  --layout-buttons-height: 36px; // @presenter Spacing\n  --layout-buttons-width: 36px; // @presenter Spacing\n\n  --layout-stacked-small-max-width: 90%;\n  --layout-stacked-medium-max-width: 75%;\n  --layout-stacked-large-max-width: 1200px;\n\n  --layout-three-panel-small-max-width: 100%;\n  --layout-three-panel-medium-max-width: 100%;\n  --layout-three-panel-large-max-width: 1800px;\n\n  --layout-middle-panel-small-max-width: none;\n  --layout-middle-panel-medium-max-width: none;\n  --layout-middle-panel-large-max-width: none;\n\n  /**\n    * @tokens OpenAPI-GraphQL Schema\n    */\n  --schema-lines-color: var(--global-border-color); // @presenter Color\n  --schema-default-details-width: 70%;\n  --schema-type-name-color: var(--color-content-secondary); // @presenter Color\n  --schema-type-title-color: var(--color-content-secondary); // @presenter Color\n  --schema-require-label-color: var(--color-error-900); // @presenter Color\n  --schema-labels-text-size: 0.9em; // @presenter Spacing\n  --schema-nesting-spacing: 1em; // @presenter Spacing\n  --schema-nested-background-color: var(--color-secondary-200); // @presenter Color\n  --schema-chevron-color: var(--color-content); // @presenter Color\n  --schema-chevron-size: 9px; // @presenter Spacing\n\n  --schema-controls-color: var(--color-emphasis-800); // @presenter Color\n  --schema-controls-background-color: var(--color-secondary-400); // @presenter Color\n  --schema-controls-hover-background-color: var(--color-secondary-500); // @presenter Color\n  --schema-controls-border-color: var(--color-secondary-600); // @presenter Color\n\n  --field-name-font-size: var(--code-font-size); // @presenter FontSize\n  --field-name-font-family: var(--code-font-family); // @presenter FontFamily\n  --field-example-color: var(--color-content); // @presenter Color\n  --field-example-background-color: var(--inline-code-background-color); // @presenter Color\n  --field-constraint-color: var(--color-content); // @presenter Color\n  --field-constraint-background-color: var(--inline-code-background-color); // @presenter Color\n\n  /**\n    * @tokens OpenAPI-GraphQL Search\n    * @presenter Color\n    */\n  --search-input-border-bottom: #e6e6e6;\n  --search-results-background-color: #f2f2f2;\n  --search-results-active-item-background-color: #e6e6e6;\n  --search-marked-background-color: #ffff03;\n  --search-popup-header-background-color: var(--color-secondary-200);\n  --search-clear-button-background-color: var(--color-secondary-400);\n  --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n  /*\n    * @tokens OpenAPI-GraphQL Badge\n    */\n  --badge-color: var(--color-emphasis-100); // @presenter Color\n  --badge-background-color: var(--color-primary-500); // @presenter Color\n  --deprecated-badge-color: var(--color-emphasis-100); // @presenter Color\n  --deprecated-badge-background-color: var(--color-warning-500); // @presenter Color\n\n  --http-badge-font-size: 12px; // @presenter FontSize\n  --http-badge-line-height: 20px; // @presenter LineHeight\n  --http-badge-font-family: var(--code-font-family); // @presenter FontFamily\n  --http-badge-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --http-badge-border-radius: 16px; // @presenter BorderRadius\n  --http-badge-color: var(--color-content-inverse); // @presenter Color\n\n  --http-badge-menu-font-size: 8px; // @presenter FontSize\n  --http-badge-menu-line-height: 14px; // @presenter FontSize\n\n  /**\n    * @tokens OpenAPI-GraphQL Other\n    */\n  --recursive-label-color: var(--color-warning-500); // @presenter Color\n  --spinner-color: var(--color-primary-500); // @presenter Color\n  --linear-progress-color: var(--color-accent-500); // @presenter Color\n  --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n  /* Floating action button */\n  --fab-color: #0065fb; // @presenter Color\n  --fab-background-color: #f2f2f2; // @presenter Color\n\n  // @tokens End\n"])));
 var footer = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Footer\n    */\n  --footer-background-color: var(--color-primary-500); // @presenter Color\n  --footer-text-color: #fff; // @presenter Color\n\n  // @tokens End\n"])));
 var logo = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n  --logo-height: 2rem; // @presenter Spacing\n  --logo-margin: var(--sidebar-margin-left); // @presenter Spacing\n\n  // @tokens End\n"])));
-var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
+var navbar = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Navbar\n    */\n  --navbar-height: 60px; // @presenter Spacing\n  --navbar-text-color: #fff; // @presenter Color\n  --navbar-background-color: var(--color-primary-500); // @presenter Color\n  --navbar-drowpdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5);\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-margin-horizontal: 0; // @presenter Spacing\n  --navbar-item-margin-vertical: 0; // @presenter Spacing\n  --navbar-item-border-radius: 10px; // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-active-background-color: #1b75fa; // @presenter Color\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-separator-line-color: var(--sidebar-separator-line-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n  --toc-width: 240px;\n\n  // @tokens End\n"])));
 var markdown = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Markdown\n    * */\n  --content-wrapper-max-width: 910px;\n  --content-wrapper-padding-vertical: 25px; // @presenter Spacing\n  --content-wrapper-padding-horizontal: 0px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var blockquote = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Blockquote\n    * */\n  // TODO: fix typo\n  --bloquote-margin-vertical: 1.5em; // @presenter Spacing\n  --bloquote-margin-horizontal: 0; // @presenter Spacing\n  --bloquote-padding-vertical: 0; // @presenter Spacing\n  --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --bloquote-background-color: transparent; // @presenter Color\n\n  // @tokens End\n"])));

package/hooks/__tests__/mocks/MockIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+export declare class MockIntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    private viewPort;
+    private entries;
+    private readonly callback;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    private intersect;
+    isInViewPort(target: HTMLElement): boolean;
+    observe(target: HTMLElement): void;
+    unobserve(target: HTMLElement): void;
+    disconnect(): void;
+    takeRecords(): any[];
+}

package/hooks/__tests__/mocks/MockIntersectionObserver.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+var MockIntersectionObserver = /** @class */ (function () {
+    function MockIntersectionObserver(callback, options) {
+        var _this = this;
+        this.intersect = function () {
+            _this.entries.map(function (entry) {
+                entry.isIntersecting = _this.isInViewPort(entry.target);
+            });
+            _this.callback(_this.entries, _this);
+        };
+        this.viewPort = (options === null || options === void 0 ? void 0 : options.root) ? options.root : window;
+        this.entries = [];
+        this.root = null;
+        this.rootMargin = '0px';
+        this.thresholds = [1];
+        this.callback = callback;
+        this.viewPort.addEventListener('scroll', this.intersect);
+    }
+    MockIntersectionObserver.prototype.isInViewPort = function (target) {
+        return target.id !== 'toc-0';
+    };
+    MockIntersectionObserver.prototype.observe = function (target) {
+        this.entries.push({ isIntersecting: false, target: target });
+    };
+    MockIntersectionObserver.prototype.unobserve = function (target) {
+        this.entries = this.entries.filter(function (ob) { return ob.target !== target; });
+    };
+    MockIntersectionObserver.prototype.disconnect = function () {
+        this.viewPort.removeEventListener('scroll', this.intersect);
+        this.entries = [];
+    };
+    MockIntersectionObserver.prototype.takeRecords = function () {
+        return this.entries;
+    };
+    return MockIntersectionObserver;
+}());
+exports.MockIntersectionObserver = MockIntersectionObserver;

package/hooks/useActiveHeading.d.ts

@@ -1,2 +1,2 @@
 export declare type UseActiveHeadingReturnType = string | undefined;
-export declare function useActiveHeading(contentElement: Element | null): UseActiveHeadingReturnType;
+export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;

package/hooks/useActiveHeading.js

@@ -1,34 +1,99 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = void 0;
 var react_1 = require("react");
-function useActiveHeading(contentElement) {
-    var _a = (0, react_1.useState)(undefined), heading = _a[0], setHeading = _a[1];
-    var headings = (0, react_1.useMemo)(function () { return contentElement && contentElement.querySelectorAll('.heading-anchor'); }, [contentElement]);
-    var handler = (0, react_1.useCallback)(
-    // throttle(
-    function () {
-        if (!headings) {
+var react_router_dom_1 = require("react-router-dom");
+function useActiveHeading(contentElement, displayedHeaders) {
+    var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
+    var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
+    var headingElementsRef = (0, react_1.useRef)({});
+    var history = (0, react_router_dom_1.useHistory)();
+    var getVisibleHeadings = function () {
+        var visibleHeadings = [];
+        for (var key in headingElementsRef.current) {
+            var headingElement = headingElementsRef.current[key];
+            if (headingElement.isIntersecting) {
+                visibleHeadings.push(headingElement);
+            }
+        }
+        return visibleHeadings;
+    };
+    var getIndexFromId = function (id) {
+        return headingElements.findIndex(function (item) { return item.id === id; });
+    };
+    var findHeaders = function (allContent) {
+        var allHeaders = allContent.querySelectorAll('.heading-anchor');
+        return Array.from(allHeaders);
+    };
+    var intersectionCallback = function (headings) {
+        var _a;
+        headingElementsRef.current = headings.reduce(function (map, headingElement) {
+            map[headingElement.target.id] = headingElement;
+            return map;
+        }, headingElementsRef.current);
+        var totalHeight = window.scrollY + window.innerHeight;
+        // handle bottom of the page
+        if (totalHeight >= document.body.scrollHeight) {
+            var newHeading = ((_a = headingElements[(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length) - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+            setHeading(newHeading);
             return;
         }
-        for (var i = 0; i < headings.length; i++) {
-            if (headings[i].offsetTop > window.scrollY) {
-                var newHeading = i === 0 ? undefined : headings[i - 1].getAttribute('id') || undefined;
-                setHeading(newHeading);
-                return;
-            }
+        var visibleHeadings = getVisibleHeadings();
+        if (!visibleHeadings.length) {
+            return;
+        }
+        if (visibleHeadings.length === 1) {
+            setHeading(visibleHeadings[0].target.id);
+            return;
         }
-    }, [headings]);
+        visibleHeadings.sort(function (a, b) {
+            return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+        });
+        setHeading(visibleHeadings[0].target.id);
+    };
     (0, react_1.useEffect)(function () {
-        if (typeof window === 'undefined' || !headings || !headings.length) {
-            return undefined;
+        if (!contentElement) {
+            return;
         }
-        window.addEventListener('scroll', handler, {
-            capture: false,
+        setHeadingElements(findHeaders(contentElement));
+        var unlisten = history.listen(function () {
+            setHeadingElements(findHeaders(contentElement));
+        });
+        return function () { return unlisten(); };
+    }, [contentElement]);
+    (0, react_1.useEffect)(function () {
+        if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
+            return;
+        }
+        headingElementsRef.current = {};
+        // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+        var observer = new IntersectionObserver(intersectionCallback, {
+            rootMargin: '0px 0px -30% 0px',
+            threshold: 1,
+        });
+        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach(function (element) {
+            if (displayedHeaders.includes(element.id)) {
+                observer.observe(element);
+            }
         });
-        handler();
-        return function () { return window.removeEventListener('scroll', handler); };
-    }, [handler, headings]);
+        return function () { return observer.disconnect(); };
+    }, [headingElements, displayedHeaders]);
     return heading;
 }
 exports.useActiveHeading = useActiveHeading;

package/hooks/useActiveSectionId.js

@@ -1,4 +1,20 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,7 +25,7 @@ var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 var useNavbarHeight_1 = require("../hooks/useNavbarHeight");
 function useActiveSectionId(location, hasOverviewPage) {
     if (hasOverviewPage === void 0) { hasOverviewPage = false; }
-    var _a = (0, react_1.useState)(''), itemId = _a[0], setItemId = _a[1];
+    var _a = __read((0, react_1.useState)(''), 2), itemId = _a[0], setItemId = _a[1];
     var navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
     var scrollListener = (0, react_1.useMemo)(function () {
         return (0, lodash_throttle_1.default)(function () {

package/hooks/useControl.js

@@ -1,10 +1,26 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControl = void 0;
 var react_1 = require("react");
 var useControl = function (initialVal) {
     if (initialVal === void 0) { initialVal = false; }
-    var _a = (0, react_1.useState)(initialVal), isOpened = _a[0], setIsOpened = _a[1];
+    var _a = __read((0, react_1.useState)(initialVal), 2), isOpened = _a[0], setIsOpened = _a[1];
     var handleOpen = (0, react_1.useCallback)(function () { return setIsOpened(true); }, []);
     var handleClose = (0, react_1.useCallback)(function () { return setIsOpened(false); }, []);
     return {

package/hooks/useMobileMenu.js

@@ -1,4 +1,20 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenu = void 0;
 var react_1 = require("react");
@@ -6,7 +22,7 @@ var react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState) {
     if (initialState === void 0) { initialState = false; }
     var location = (0, react_router_dom_1.useHistory)().location;
-    var _a = (0, react_1.useState)(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _a = __read((0, react_1.useState)(initialState), 2), isOpen = _a[0], setIsOpen = _a[1];
     (0, react_1.useEffect)(function () { return setIsOpen(false); }, [location.pathname]);
     return [isOpen, setIsOpen];
 }

package/hooks/useNavbarHeight.js

@@ -1,10 +1,26 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNavbarHeight = void 0;
 var react_1 = require("react");
 var getNavbarElement_1 = require("../utils/getNavbarElement");
 function useNavbarHeight(location) {
-    var _a = (0, react_1.useState)(0), height = _a[0], setHeight = _a[1];
+    var _a = __read((0, react_1.useState)(0), 2), height = _a[0], setHeight = _a[1];
     (0, react_1.useEffect)(function () {
         var navbar = (0, getNavbarElement_1.getNavbarElement)();
         setHeight((navbar && navbar.clientHeight) || 0);

package/index.d.ts

@@ -14,3 +14,4 @@ export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
+export * from './Profile';

package/index.js

@@ -30,3 +30,4 @@ __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);
 __exportStar(require("./OperationBadge"), exports);
 __exportStar(require("./TableOfContent"), exports);
+__exportStar(require("./Profile"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.27",
+  "version": "0.1.30",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -48,6 +48,7 @@ export const baseButtonStyles = css`
   font-weight: var(--button-font-weight);
   font-size: 14px;
   padding: 2px 20px;
+  margin: var(--button-margin);
   cursor: pointer;
   transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
@@ -92,12 +93,15 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
         `
       : css`
           color: var(--button-color);
+          border: 2px solid var(--button-background-color);
           background-color: var(--button-background-color);
           &:hover {
+            border: 2px solid var(--button-hover-background-color);
             background-color: var(--button-hover-background-color);
           }
 
           &:active {
+            border: 2px solid var(--button-active-background-color);
             background-color: var(--button-active-background-color);
           }
         `};
@@ -121,7 +125,7 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
       &,
       &:hover {
         cursor: default;
-        color: #999999;
+        color: #999;
         pointer-events: none;
       }
     `}

package/src/CodeBlock/CodeBlock.ts

@@ -84,5 +84,17 @@ export const CodeBlock = styled.div.attrs(() => ({
     cursor: help;
   }
 
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
   ${generateCodeBlockTokens()}
 `;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -37,7 +37,7 @@ function CopyButtonWrapperComponent({
       <Tooltip
         className="copy-button"
         tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
-        open={tooltip.isOpened}
+        isOpen={tooltip.isOpened}
       >
         <SamplesControlButton onClick={copy} data-cy={dataTestId}>
           Copy