@redocly/theme 0.4.1 → 0.4.2

package/LastUpdated/LastUpdated.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface LastUpdatedProps {
+    lastModified: string | Date;
+}
+export declare function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null;

package/LastUpdated/LastUpdated.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LastUpdated = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var timeago_js_1 = require("timeago.js");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+function LastUpdated(_a) {
+    var lastModified = _a.lastModified;
+    var lastUpdatedBlock = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).lastUpdatedBlock;
+    if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
+        return null;
+    }
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated" },
+        "Last updated ",
+        (0, timeago_js_1.format)(lastModified)));
+}
+exports.LastUpdated = LastUpdated;
+var Wrapper = styled_components_1.default.time(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 20px;\n"], ["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 20px;\n"])));
+var templateObject_1;

package/Panel/PanelComponent.d.ts

@@ -3,9 +3,10 @@ import { PanelHeaderProps } from '../Panel/PanelHeader';
 export interface PanelComponentProps {
     expanded?: boolean;
     className?: string;
+    renderChildrenHidden?: boolean;
     header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
     onToggle?: (expanded: boolean) => void;
     description?: React.ReactNode;
 }
-export declare function PanelComponent({ expanded, header, className, children, onToggle, description, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
+export declare function PanelComponent({ expanded, renderChildrenHidden, header, className, children, onToggle, description, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
 export declare const InlineBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Panel/PanelComponent.js

@@ -54,9 +54,9 @@ var PanelBody_1 = require("../Panel/PanelBody");
 var PanelHeader_1 = require("../Panel/PanelHeader");
 var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
 function PanelComponent(_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
-    var _c = __read((0, react_1.useState)(expanded), 2), isExpanded = _c[0], setExpanded = _c[1];
-    var _d = __read((0, react_1.useState)(false), 2), animate = _d[0], setAnimate = _d[1];
+    var _b = _a.expanded, expanded = _b === void 0 ? true : _b, _c = _a.renderChildrenHidden, renderChildrenHidden = _c === void 0 ? false : _c, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
+    var _d = __read((0, react_1.useState)(expanded), 2), isExpanded = _d[0], setExpanded = _d[1];
+    var _e = __read((0, react_1.useState)(false), 2), animate = _e[0], setAnimate = _e[1];
     var toggle = function (_a) {
         var target = _a.target;
         if (target instanceof HTMLAnchorElement)
@@ -73,7 +73,7 @@ function PanelComponent(_a) {
                     react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-cy": "title" }, header),
                     react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
                     description)))),
-        isExpanded && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
+        (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
 }
 exports.PanelComponent = PanelComponent;
 exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n"])));

package/globalStyle.js

@@ -30,7 +30,8 @@ var inputs = (0, styled_components_1.css)(templateObject_21 || (templateObject_2
 var markdown = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n  * @tokens Markdown Container\n  */\n\n  --md-container-max-width: 910px;\n  --md-container-padding-vertical: 25px; // @presenter Spacing\n  --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Blockquote\n  */\n\n  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n  --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n  --md-blockquote-padding-vertical: 0; // @presenter Spacing\n  --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n  --md-blockquote-border-color: var(--border-color); // @presenter Color\n  --md-blockquote-background-color: transparent; // @presenter Color\n  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n  --md-blockquote-text-color: var(--text-color); // @presenter Color\n  --md-blockquote-box-shadow: none; // @presenter Shadow\n\n  /** \n  * @tokens Markdown Paragraph\n  */\n\n  --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n  /**\n  * @tokens Markdown Table\n  */\n\n  --md-table-font-size: 14px; // @presenter FontSize\n  --md-table-margin-vertical: 20px; // @presenter Spacing\n  --md-table-background-color: transparent; // @presenter Color\n\n  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n  --md-table-border-width: 1px;\n  --md-table-border-color: var(--border-color); // @presenter Color\n\n  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n  --md-table-cell-text-color: var(--text-color); // @presenter Color\n  --md-table-cell-padding: 12px; // @presenter Spacing\n\n  --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n  --md-table-head-text-color: var(--text-color); // @presenter Color\n  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n  * @tokens Markdown Horizontal Rule\n  */\n\n  --md-hr-background-color: transparent; // @presenter Color\n  --md-hr-border-color: var(--border-color); // @presenter Color\n  --md-hr-height: unset;\n  --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n  /** \n  * @tokens Markdown List\n  */\n\n  --md-list-left-padding: 2rem; // @presenter Spacing\n  --md-list-margin: 1rem; // @presenter Spacing\n  --md-list-item-margin: 0.25rem; // @presenter Spacing\n  --md-list-item-style: inherit;\n\n  /** \n  * @tokens Markdown Numbered List\n  */\n\n  --md-numbered-list-number-display: none;\n  --md-numbered-list-item-style: var(--md-list-item-style);\n  --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n  --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var search = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: #fff; // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: #fff;\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"], ["\n  /**\n      * @tokens Search\n      */\n\n  --search-highlight-text-color: #ffff03; // @presenter Color\n\n  /**\n      * @tokens Portal Search\n      */\n\n  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-text-color: #fff; // @presenter Color\n\n  --search-input-border: none;\n  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n  --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n  --search-input-line-height: 1.15em; // @presenter LineHeight\n\n  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n  --search-input-hover-border: none; // @presenter Color\n  --search-input-placeholder-color: var(--search-input-text-color);\n\n  --search-popover-background-color: #fff; // @presenter Color\n  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n  --search-popover-border: none;\n\n  --search-item-padding: 8px 24px;\n  --search-item-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-title-text-color: var(--text-color); // @presenter Color\n  --search-item-background-color: transparent; // @presenter Color\n  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n  --search-item-active-title-text-color: var(--text-color); // @presenter Color\n  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n  /**\n    * @tokens Sidebar Search\n    */\n\n  --sidebar-search-button-background-color: transparent; // @presenter Color\n  --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n  --sidebar-search-button-border: var(--border-color);\n  --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n  --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n  --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n  --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n  --sidebar-search-button-active-background-color: transparent; // @presenter Color\n  --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Search results modal\n    * @presenter Color\n    */\n\n  --search-modal-background: #fff;\n  --search-modal-text-color: var(--text-color);\n  --search-modal-border: none;\n  --search-modal-box-shadow: none;\n\n  --search-modal-header-border-radius: 8px;\n  --search-modal-header-background-color: var(--color-secondary-100);\n  --search-modal-clear-button-background-color: var(--color-secondary-300);\n  --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n  // @tokens End\n"])));
 var dropdown = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"], ["\n  --dropdown-font-size: 14px;\n  --dropdown-text-color: var(--text-color);\n\n  --dropdown-padding-vertical: 8px;\n  --dropdown-padding-left: 10px;\n  --dropdown-padding-right: 26px;\n  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n    var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n  --dropdown-border: none;\n"])));
-exports.darkMode = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), baseDarkColors);
-exports.styles = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, exports.darkMode);
-exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
+var lastUpdated = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"], ["\n  --last-updated-text-color: var(--text-color);\n  --last-updated-font-size: var(--font-size-small);\n  --last-updated-font-family: var(--font-family-base);\n  --last-updated-line-height: var(--line-height-base);\n"])));
+exports.darkMode = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), baseDarkColors);
+exports.styles = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"], ["\n  :root {\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  :root.dark {\n    ", ";\n  }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, exports.darkMode);
+exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), exports.styles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;

package/package.json

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

package/src/LastUpdated/LastUpdated.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { format } from 'timeago.js';
+
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+
+export interface LastUpdatedProps {
+  lastModified: string | Date;
+}
+
+export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
+  const { lastUpdatedBlock } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (lastUpdatedBlock?.hide) {
+    return null;
+  }
+
+  return (
+    <Wrapper data-component-name="LastUpdated/LastUpdated">
+      Last updated {format(lastModified)}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.time`
+  color: var(--last-updated-text-color);
+  font-size: var(--last-updated-font-size);
+  font-family: var(--last-updated-font-family);
+  line-height: var(--last-updated-line-height);
+  padding-bottom: 20px;
+`;

package/src/Panel/PanelComponent.tsx

@@ -15,6 +15,7 @@ import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 export interface PanelComponentProps {
   expanded?: boolean;
   className?: string;
+  renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
   description?: React.ReactNode;
@@ -22,6 +23,7 @@ export interface PanelComponentProps {
 
 export function PanelComponent({
   expanded = true,
+  renderChildrenHidden = false,
   header,
   className,
   children,
@@ -61,7 +63,7 @@ export function PanelComponent({
           </PanelHeader>
         ))}
 
-      {isExpanded && (
+      {(isExpanded || renderChildrenHidden) && (
         <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
           {children}
         </PanelBody>

package/src/globalStyle.ts

@@ -1846,6 +1846,13 @@ const dropdown = css`
   --dropdown-border: none;
 `;
 
+const lastUpdated = css`
+  --last-updated-text-color: var(--text-color);
+  --last-updated-font-size: var(--font-size-small);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;
+
 export const darkMode = css`
   ${baseDarkColors}
 `;
@@ -1875,6 +1882,7 @@ export const styles = css`
     ${dropdown}
     ${apiReferencePanels}
     ${apiReferenceDocs}
+    ${lastUpdated}
   }
 
   :root.dark {

package/src/settings.yaml

@@ -23,3 +23,5 @@ colorMode:
   modes:
     - 'light'
     - 'dark'
+lastUpdatedBlock:
+  hide: false