@redocly/theme 0.1.20 → 0.1.23

package/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { FlattenSimpleInterpolation } from 'styled-components';
 export declare type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
 export declare type ButtonColor = 'primary' | 'secondary' | 'default' | string;
@@ -10,8 +11,8 @@ export interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     extraClass?: string;
+    to?: string;
+    onClick?: (e?: any) => void;
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;
-export declare const Button: import("styled-components").StyledComponent<"button", any, {
-    className: `button-color-${string}${string}`;
-} & ButtonProps, "className">;
+export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, {}, never>;

package/Button/Button.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,19 +37,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.baseButtonStyles = void 0;
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var Link_1 = require("../mocks/Link");
 var getBlink = function () { return (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"], ["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"]))); };
 var getSize = function (size) {
     if (size === void 0) { size = 'medium'; }
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"], ["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"])), size, size, size);
 };
 exports.baseButtonStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"], ["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
-exports.Button = styled_components_1.default.button.attrs(function (_a) {
+var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'default' : _b, extraClass = _a.extraClass;
     return ({
         className: "button-color-".concat(color).concat(extraClass ? " ".concat(extraClass) : ''),
+        'data-component-name': 'Button/Button',
     });
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
@@ -57,4 +74,14 @@ exports.Button = styled_components_1.default.button.attrs(function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "])));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var ButtonComponent = function (props) {
+    if (props.to) {
+        return (react_1.default.createElement(Link_1.Link, { to: props.to },
+            react_1.default.createElement(StyledButton, __assign({}, props))));
+    }
+    else {
+        return react_1.default.createElement(StyledButton, __assign({}, props));
+    }
+};
+exports.Button = (0, styled_components_1.default)(ButtonComponent)(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/Footer/Footer.js

@@ -12,9 +12,12 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumns_1 = require("../Footer/FooterColumns");
 var FooterCopyright_1 = require("../Footer/FooterCopyright");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
 function Footer(_a) {
     var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
-    if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText)) {
+    var footer = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS).footer;
+    if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
     return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },

package/JsonViewer/JsonViewer.js

@@ -38,7 +38,6 @@ var SamplesPanelControls_1 = require("../SamplesPanelControls");
 var utils_1 = require("../utils");
 var hooks_1 = require("../hooks");
 var CodeBlock_1 = require("../CodeBlock");
-var styled_1 = require("../JsonViewer/styled");
 function JsonComponent(_a) {
     var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className;
     var node = (0, react_1.useRef)(null);
@@ -109,7 +108,7 @@ function JsonComponent(_a) {
     return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data }, renderInner));
 }
 exports.Json = (0, react_1.memo)(JsonComponent);
-exports.JsonViewer = (0, styled_components_1.default)(exports.Json)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styled_1.jsonStyles);
+exports.JsonViewer = (0, styled_components_1.default)(exports.Json)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"])));
 exports.JsonViewerWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"])), SamplesPanelControls_1.SampleControls);
 exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/JsonViewer/index.d.ts

@@ -1,2 +1 @@
 export * from '../JsonViewer/JsonViewer';
-export * from '../JsonViewer/styled';

package/JsonViewer/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../JsonViewer/JsonViewer"), exports);
-__exportStar(require("../JsonViewer/styled"), exports);

package/Markdown/Admonition.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var AlertIcon_1 = require("../ui/AlertIcon");
+var AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
 function Admonition(_a) {
     var _b = _a.type, type = _b === void 0 ? 'info' : _b, name = _a.name, children = _a.children;
     return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition/Admonition" },

package/Markdown/CodeSample/CodeSample.js

@@ -1,4 +1,8 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -25,8 +29,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeSample = void 0;
 var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
-var styled_1 = require("../../Markdown/CodeSample/styled");
 function CodeSample(_a) {
     var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
     var langClassName = language ? "language-".concat(language) : '';
@@ -36,11 +40,17 @@ function CodeSample(_a) {
         setIsCopied(true);
         setTimeout(function () { return setIsCopied(false); }, 1500);
     };
-    return (react_1.default.createElement(styled_1.Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
-        react_1.default.createElement(styled_1.CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
-            !isCopied && react_1.default.createElement(styled_1.CopyCodeButton, { title: "Copy the code snippet" }, "Copy"),
-            isCopied && react_1.default.createElement(styled_1.DoneIndicator, null, "Copied")),
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+        react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+            !isCopied && react_1.default.createElement(CopyCodeButton, { title: "Copy the code snippet" }, "Copy"),
+            isCopied && react_1.default.createElement(DoneIndicator, null, "Copied")),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
 exports.CodeSample = CodeSample;
+var CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
+var CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+var DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"])));
+var darkStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n  .token.deleted {\n    color: red;\n  }\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", ";\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", ";\n  }\n"])), CopyCodeButton, DoneIndicator, CopyCodeButton, CodeSampleButtonContainer, CopyCodeButton, darkStyleTokens);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Markdown/CodeSample/index.d.ts

@@ -1,2 +1 @@
 export * from '../../Markdown/CodeSample/CodeSample';
-export * from '../../Markdown/CodeSample/styled';

package/Markdown/CodeSample/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
-__exportStar(require("../../Markdown/CodeSample/styled"), exports);

package/Navbar/Navbar.d.ts

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

package/Navbar/Navbar.js

@@ -10,13 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarContainer = exports.Navbar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
 var Navbar_1 = require("../Navbar");
 function Navbar(_a) {
+    var _b;
     var menu = _a.menu, logo = _a.logo, search = _a.search;
+    var settings = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS);
+    var searchSettings = settings.search;
+    var hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
+    if ((_b = settings === null || settings === void 0 ? void 0 : settings.navbar) === null || _b === void 0 ? void 0 : _b.hide) {
+        return null;
+    }
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
-        search));
+        hideSearch ? null : search));
 }
 exports.Navbar = Navbar;
 exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {

package/PageNavigation/NextPageLink.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextPageLink = void 0;
 var react_1 = __importDefault(require("react"));
 var usePageData_1 = require("../mocks/hooks/usePageData");
-var ui_1 = require("../ui");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var Button_1 = require("../Button/Button");
 function NextPageLink() {
+    var _a, _b, _c;
     var nextPage = ((0, usePageData_1.usePageData)() || {}).nextPage;
-    if (!nextPage) {
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
+    if (!nextPage || ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    return (react_1.default.createElement(ui_1.Button, { variant: "outlined", size: "large", to: nextPage.link },
-        "Next to ",
-        nextPage.label));
+    var label = ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _b === void 0 ? void 0 : _b.nextPageLink) === null || _c === void 0 ? void 0 : _c.label) || "Next to ".concat(nextPage.label);
+    return (react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "large", to: nextPage.link }, label));
 }
 exports.NextPageLink = NextPageLink;

package/PageNavigation/PreviousPageLink.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviousPageLink = void 0;
 var react_1 = __importDefault(require("react"));
 var usePageData_1 = require("../mocks/hooks/usePageData");
-var ui_1 = require("../ui");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var Button_1 = require("../Button/Button");
 function PreviousPageLink() {
+    var _a, _b, _c;
     var prevPage = ((0, usePageData_1.usePageData)() || {}).prevPage;
-    if (!prevPage) {
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
+    if (!prevPage || ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    return (react_1.default.createElement(ui_1.Button, { variant: "outlined", size: "large", to: prevPage.link },
-        "Back to ",
-        prevPage.label));
+    var label = ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _b === void 0 ? void 0 : _b.nextPageLink) === null || _c === void 0 ? void 0 : _c.label) || "Back to ".concat(prevPage.label);
+    return (react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "large", to: prevPage.link }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;

package/Search/SidebarSearch.d.ts

@@ -0,0 +1,2 @@
+import { Search } from '../Search/Search';
+export declare const SidebarSearch: import("styled-components").StyledComponent<typeof Search, any, {}, never>;

package/Search/SidebarSearch.js

@@ -0,0 +1,15 @@
+"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.SidebarSearch = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Search_1 = require("../Search/Search");
+var Popover_1 = require("../Search/Popover");
+exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --search-input-text-color: var(--sidebar-item-active-color);\n\n  ", " {\n    right: unset;\n    top: 100%;\n  }\n"], ["\n  --search-input-text-color: var(--sidebar-item-active-color);\n\n  ", " {\n    right: unset;\n    top: 100%;\n  }\n"])), Popover_1.Popover);
+var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuGroup = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Arrow_1 = require("../ui/Arrow");
+var ArrowIcon_1 = require("../icons/ArrowIcon/ArrowIcon");
 var MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
@@ -28,5 +28,5 @@ exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"], ["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"])));
 var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"], ["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); });
-var MenuGroupArrow = (0, styled_components_1.default)(Arrow_1.Arrow)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
+var MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/SidebarLayout.d.ts

@@ -3,5 +3,5 @@ interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
 }
-export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element;
+export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/Sidebar/SidebarLayout.js

@@ -14,12 +14,20 @@ var Sidebar_1 = require("../Sidebar/Sidebar");
 var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 var MenuContainer_1 = require("../Sidebar/MenuContainer");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var SidebarSearch_1 = require("../Search/SidebarSearch");
 function SidebarLayout(_a) {
     var versions = _a.versions, menu = _a.menu;
     var _b = (0, useMobileMenu_1.useMobileMenu)(), isOpen = _b[0], setIsOpen = _b[1];
     var toggleMenu = function () { return setIsOpen(!isOpen); };
+    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), search = _c.search, sidebar = _c.sidebar;
+    if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
+        return null;
+    }
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
+        !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));

package/TableOfContent/TableOfContent.js

@@ -34,12 +34,19 @@ exports.TableOfContent = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var useFullHeight_1 = require("../hooks/useFullHeight");
+var hooks_1 = require("../mocks/hooks");
 var useActiveHeading_1 = require("../hooks/useActiveHeading");
+var constants_1 = require("../mocks/constants");
 function TableOfContent(props) {
+    var _a, _b, _c;
     var headings = props.headings, tocMaxDepth = props.tocMaxDepth, contentWrapper = props.contentWrapper;
     var sidebar = (0, react_1.useRef)(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
     var activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper);
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
+    if ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.toc) === null || _a === void 0 ? void 0 : _a.hide) {
+        return null;
+    }
     if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
         return null;
     }
@@ -48,7 +55,7 @@ function TableOfContent(props) {
     }
     return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
         react_1.default.createElement(TableOfContentItems, { ref: sidebar },
-            react_1.default.createElement(TocHeader, null, "On this page"),
+            react_1.default.createElement(TocHeader, null, ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.toc) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.label) || 'On this page'),
             headings.map(function (heading, idx) {
                 // TODO: not sure about !heading
                 if (!heading) {

package/Typography/CompactTypography.d.ts

@@ -0,0 +1,11 @@
+export declare const CompactTypography: import("styled-components").StyledComponent<"p", any, {
+    'data-component-name': string;
+} & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    color?: string | undefined;
+    mt?: string | undefined;
+    mb?: string | undefined;
+} & {
+    mt: string;
+    mb: string;
+    'data-component-name': string;
+}, "data-component-name" | "mt" | "mb">;

package/Typography/CompactTypography.js

@@ -0,0 +1,18 @@
+"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.CompactTypography = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Typography_1 = require("../Typography/Typography");
+exports.CompactTypography = (0, styled_components_1.default)(Typography_1.Typography).attrs(function () { return ({
+    mt: '0em',
+    mb: '0em',
+    'data-component-name': 'Typography/CompactTypography',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Typography/Emphasis.d.ts

@@ -0,0 +1,3 @@
+export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/Emphasis.js

@@ -0,0 +1,15 @@
+"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.Emphasis = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
+    'data-component-name': 'Typography/Emphasis',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
+var templateObject_1;

package/Typography/H1.d.ts

@@ -0,0 +1,3 @@
+export declare const H1: import("styled-components").StyledComponent<"h1", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H1.js

@@ -0,0 +1,16 @@
+"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.H1 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
+    'data-component-name': 'Headings/H1',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
+var templateObject_1;

package/Typography/H2.d.ts

@@ -0,0 +1,3 @@
+export declare const H2: import("styled-components").StyledComponent<"h2", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H2.js

@@ -0,0 +1,16 @@
+"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.H2 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
+    'data-component-name': 'Headings/H2',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
+var templateObject_1;

package/Typography/H3.d.ts

@@ -0,0 +1,3 @@
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/H3.js

@@ -0,0 +1,16 @@
+"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.H3 = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../utils");
+exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
+    'data-component-name': 'Headings/H3',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
+var templateObject_1;

package/Typography/SectionHeader.d.ts

@@ -0,0 +1 @@
+export declare const SectionHeader: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/Typography/SectionHeader.js

@@ -0,0 +1,13 @@
+"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.SectionHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SectionHeader = styled_components_1.default.h2(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
+var templateObject_1;

package/Typography/Typography.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from 'styled-system';
+export declare const Typography: import("styled-components").StyledComponent<"p", any, {
+    'data-component-name': string;
+} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    color?: string | undefined;
+    mt?: string | undefined;
+    mb?: string | undefined;
+}, "data-component-name">;

package/Typography/Typography.js

@@ -0,0 +1,22 @@
+"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.Typography = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_system_1 = require("styled-system");
+exports.Typography = styled_components_1.default.p.attrs(function () { return ({
+    'data-component-name': 'Typography/Typography',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), styled_system_1.color, function (_a) {
+    var mt = _a.mt;
+    return mt || '1em';
+}, function (_a) {
+    var mb = _a.mb;
+    return mb || '1em';
+}, styled_system_1.typography);
+var templateObject_1;

package/Typography/index.d.ts

@@ -0,0 +1,7 @@
+export * from '../Typography/H1';
+export * from '../Typography/H2';
+export * from '../Typography/H3';
+export * from '../Typography/Emphasis';
+export * from '../Typography/SectionHeader';
+export * from '../Typography/Typography';
+export * from '../Typography/CompactTypography';

package/{Headings → Typography}/index.js

@@ -14,4 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../Headings/Headings"), exports);
+__exportStar(require("../Typography/H1"), exports);
+__exportStar(require("../Typography/H2"), exports);
+__exportStar(require("../Typography/H3"), exports);
+__exportStar(require("../Typography/Emphasis"), exports);
+__exportStar(require("../Typography/SectionHeader"), exports);
+__exportStar(require("../Typography/Typography"), exports);
+__exportStar(require("../Typography/CompactTypography"), exports);

package/{ui → icons/AlertIcon}/AlertIcon.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-interface IconProps {
+export interface AlertIconProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
     className?: string;
 }
-declare function Icon({ type, className }: IconProps): JSX.Element;
+declare function Icon({ type, className }: AlertIconProps): JSX.Element;
 export declare const AlertIcon: import("styled-components").StyledComponent<typeof Icon, any, {
     'data-component-name': string;
 }, "data-component-name">;