@redocly/theme 0.4.8 → 0.4.10

package/globalStyle.js

@@ -26,12 +26,13 @@ var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_1
 var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Logo\n    */\n\n  --navbar-logo-height: 2rem; // @presenter Spacing\n  --navbar-logo-width: auto;\n  --navbar-logo-margin: 16px; // @presenter Spacing\n  --navbar-logo-max-width: 285px; // @presenter Spacing\n  --navbar-logo-max-height: 285px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __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-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: 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-container-max-width: 100%;\n\n  /**\n    * @tokens Navbar Item\n    * */\n  --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --navbar-item-font-size: 16px; // @presenter FontSize\n  --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n  --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n  --navbar-item-margin-horizontal: 7px;\n  --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n  --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --navbar-item-hover-background-color: var(--color-primary-300);\n  --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n  --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-hover-text-decoration: none;\n  --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n  --navbar-item-active-text-decoration: none;\n  --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n  /**\n    * @tokens Navbar dropdown\n    * */\n\n  --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n  --navbar-dropdown-background: var(--navbar-item-active-background-color);\n  --navbar-dropdown-border: none;\n\n  // @tokens End\n"])));
 var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens TOC\n    * */\n\n  --toc-width: 240px;\n  --toc-background-color: transparent;\n  --toc-border-color: var(--border-color);\n\n  --toc-spacing-unit: 8px;\n  --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n  /**\n     * @tokens TOC item typography\n     */\n  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens TOC item\n    */\n\n  --toc-item-text-color: var(--text-color); // @presenter Color\n  --toc-item-active-text-color: var(--text-color); // @presenter Color\n  --toc-item-background-color: transparent; // @presenter Color\n  --toc-item-active-background-color: var(--border-color); // @presenter Color\n  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n  /**\n    * @tokens TOC header\n    */\n\n  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n  --toc-heading-font-weight: bold; // @presenter FontWeight\n  --toc-heading-text-color: var(--text-color); // @presenter Color\n\n  // @tokens End\n"])));
-var inputs = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"])));
-var markdown = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __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_22 || (templateObject_22 = __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: var(--background-color); // @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: var(--background-color);\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: var(--background-color); // @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: var(--background-color);\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_23 || (templateObject_23 = __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"])));
-var lastUpdated = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __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"])));
-var tile = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"])));
-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  }\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\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, tile, darkColors_1.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 loadProgressBar = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"], ["\n\n  /**\n    * @tokens Load progress bar\n    */\n\n  --load-progress-bar-color: var(--color-primary-500); // @presenter Color\n  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n  --load-progress-bar-height: 2px; // @presenter Height\n\n  // @tokens End\n \n  /* Make clicks pass-through */\n  #nprogress {\n    pointer-events: none;\n  }\n\n  #nprogress .bar {\n    background: var(--load-progress-bar-color);\n\n    position: fixed;\n    z-index: 1031;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: var(--load-progress-bar-height);\n  }\n\n  #nprogress .peg {\n    display: block;\n    position: absolute;\n    right: 0px;\n    width: 100px;\n    height: 100%;\n    box-shadow: var(--load-progress-bar-shadow);\n    opacity: 1.0;\n\n    -webkit-transform: rotate(3deg) translate(0px, -4px);\n        -ms-transform: rotate(3deg) translate(0px, -4px);\n            transform: rotate(3deg) translate(0px, -4px);\n  }\n\n  .nprogress-custom-parent {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .nprogress-custom-parent #nprogress .bar {\n    position: absolute;\n  }\n"])));
+var inputs = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Inputs\n    */\n  --input-text-color: var(--text-color-inverse); // @presenter Color\n  --input-border: none; // @presenter Border\n  --input-border-radius: var(--border-radius); // @presenter BorderRadius\n  --input-font-size: var(--font-size-base); // @presenter FontSize\n  --input-font-family: var(--code-font-family); // @presenter FontFamily\n  --input-line-height: 1.15em; // @presenter LineHeight\n  --input-padding: 8px;\n\n  --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n  --input-hover-border: none; // @presenter Border\n  --input-focus-border: none; // @presenter Border\n  --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n  --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n  // @tokens End\n"])));
+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: var(--background-color); // @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: var(--background-color);\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: var(--background-color); // @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: var(--background-color);\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"])));
+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"])));
+var tile = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n  --wide-tile-background-color: var(--color-secondary-50);\n  --thin-tile-background-color: var(--color-secondary-50);\n"])));
+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  }\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  }\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, tile, loadProgressBar, darkColors_1.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/hooks/useDefaultThemeSettings.d.ts

@@ -0,0 +1,2 @@
+import type { RawTheme } from '../mocks/types';
+export declare function useDefaultThemeSettings(): RawTheme['settings'];

package/hooks/useDefaultThemeSettings.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultThemeSettings = void 0;
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+function useDefaultThemeSettings() {
+    return (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
+}
+exports.useDefaultThemeSettings = useDefaultThemeSettings;

package/icons/AlertIcon/AlertIcon.js

@@ -3,37 +3,40 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Icon(_a) {
     var type = _a.type, className = _a.className;
     switch (type) {
         case 'warning':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "342.1", r: "25.3" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }),
+                react_1.default.createElement("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "342.1", r: "25.3" })));
         case 'success':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
+                react_1.default.createElement("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }),
+                react_1.default.createElement("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })));
         case 'danger':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
+                react_1.default.createElement("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }),
+                react_1.default.createElement("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })));
         case 'attention':
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "339.2", r: "22.5" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "339.2", r: "22.5" })));
         default:
-            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "163.7", r: "25.3" })] })));
+            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
+                react_1.default.createElement("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }),
+                react_1.default.createElement("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }),
+                react_1.default.createElement("circle", { cx: "250.3", cy: "163.7", r: "25.3" })));
     }
 }
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({

package/icons/ArrowIcon/ArrowIcon.js

@@ -3,23 +3,12 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function directionToTransform(_a) {
     var direction = _a.direction;
@@ -36,7 +25,9 @@ function directionToTransform(_a) {
 }
 var Icon = function (_a) {
     var className = _a.className;
-    return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "icons/ArrowIcon/ArrowIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }) })) })));
+    return (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" },
+        react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
+            react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
 exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/icons/ColorModeIcon/ColorModeIcon.js

@@ -3,33 +3,25 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorModeIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Icon(_a) {
     var mode = _a.mode, className = _a.className;
     switch (mode) {
         case 'dark':
-            return ((0, jsx_runtime_1.jsx)("svg", __assign({ className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" }) })));
+            return (react_1.default.createElement("svg", { className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" })));
         case 'light':
-            return ((0, jsx_runtime_1.jsx)("svg", __assign({ "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" }) })));
+            return (react_1.default.createElement("svg", { "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" })));
         default:
-            return ((0, jsx_runtime_1.jsx)("svg", __assign({ "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" }) })));
+            return (react_1.default.createElement("svg", { "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" })));
     }
 }
 exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({

package/icons/ShelfIcon/ShelfIcon.d.ts

@@ -1,11 +1,11 @@
-import type { CSSProperties } from 'react';
+import * as React from 'react';
 export interface ShelfIconProps {
     className?: string;
     float?: 'left' | 'right';
     size?: string;
     color?: string;
     direction: 'left' | 'right' | 'up' | 'down';
-    style?: CSSProperties;
+    style?: React.CSSProperties;
 }
 export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {
     'data-component-name': string;

package/icons/ShelfIcon/ShelfIcon.js

@@ -3,17 +3,6 @@ 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);
@@ -39,7 +28,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../../utils");
 var directionMap = {
@@ -50,7 +39,9 @@ var directionMap = {
 };
 var IntShelfIcon = function (_a) {
     var className = _a.className, style = _a.style;
-    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })] })));
+    return (React.createElement("svg", { className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+        React.createElement("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }),
+        React.createElement("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })));
 };
 exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(function () { return ({
     'data-component-name': 'icons/ShelfIcon/ShelfIcon',

package/mocks/Link.js

@@ -10,15 +10,18 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var lodash_1 = require("lodash");
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function Link(props) {
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
     var filteredProps = (0, lodash_1.omit)(props, ['active', 'httpVerb', 'hasActiveSubItem']);
-    return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
+    return react_1.default.createElement("a", __assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/mocks/types.d.ts

@@ -1,3 +1,7 @@
 export declare type ActiveItem<T> = T;
 export declare type SearchDocument = any;
 export declare type OperationParameter = any;
+export interface RawTheme {
+    name: string;
+    settings: any;
+}

package/package.json

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

package/src/Button/Button.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import styled, { css, keyframes } from 'styled-components';
-import type { FC } from 'react';
 
 import { Link } from '@portal/Link';
 
@@ -140,7 +140,7 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
     `}
 `;
 
-const ButtonComponent: FC<ButtonProps> = (props) => {
+const ButtonComponent: React.FC<ButtonProps> = (props) => {
   if (props.to) {
     return (
       <Link to={props.to}>

package/src/Cards/Card.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem } from '@theme/types/portal';

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -1,13 +1,12 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount } from '@theme/hooks';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 export function ColorModeSwitcher(): JSX.Element | null {
-  const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
+  const themeSettings = useDefaultThemeSettings();
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
 

package/src/CopyButton/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { Button } from '@theme/Button';
 

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import React, { memo } from 'react';
 
 import type { TooltipProps } from '@theme/Tooltip';
 

package/src/EditPageButton/EditPageButton.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';

package/src/Footer/CustomFooter.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';

package/src/Footer/CustomFooterNavItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';

package/src/Footer/Footer.tsx

@@ -1,19 +1,19 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { isEmptyArray } from '@theme/utils';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface FooterProps {
   data: NavGroupRecord;
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { footer } = useDefaultThemeSettings();
 
   if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
     return null;

package/src/Footer/FooterColumn.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem } from '@theme/types/portal';

package/src/Footer/FooterColumns.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem } from '@theme/types/portal';

package/src/Footer/FooterCopyright.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { NavGroup } from '@theme/types/portal';

package/src/JsonViewer/JsonViewer.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { memo, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { CopyButtonWrapper } from '@theme/CopyButton';

package/src/LastUpdated/LastUpdated.tsx

@@ -1,15 +1,15 @@
+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';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 export interface LastUpdatedProps {
   lastModified: string | Date;
 }
 
 export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
-  const { lastUpdatedBlock } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { lastUpdatedBlock } = useDefaultThemeSettings();
 
   if (lastUpdatedBlock?.hide) {
     return null;