@redocly/theme 0.4.15 → 0.5.0

package/{SourceCode → lib/SourceCode}/SourceCode.js

@@ -22,31 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SourceCode = exports.Code = void 0;
-var react_1 = __importStar(require("react"));
-var utils_1 = require("../utils");
-var SamplesPanelControls_1 = require("../SamplesPanelControls");
-var CopyButton_1 = require("../CopyButton");
-function Code(_a) {
-    var source = _a.source, lang = _a.lang, dataTestId = _a.dataTestId, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
-    var highlightedCode = (0, utils_1.highlight)(source, lang);
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../utils");
+const SamplesPanelControls_1 = require("../SamplesPanelControls");
+const CopyButton_1 = require("../CopyButton");
+function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }) {
+    const highlightedCode = (0, utils_1.highlight)(source, lang);
     return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { dangerouslySetInnerHTML: {
             __html: withLineNumbers
                 ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
@@ -54,27 +37,24 @@ function Code(_a) {
         }, "data-cy": dataTestId }));
 }
 exports.Code = Code;
-function SourceCode(_a) {
-    var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, onCopyClick = _a.onCopyClick, withCopyButton = _a.withCopyButton, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'source-code' : _b, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
-    var _c = __read((0, react_1.useState)(source !== null && source !== void 0 ? source : ''), 2), sourceCode = _c[0], setSourceCode = _c[1];
+function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, }) {
+    const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         var _a, _b;
-        var _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
+        const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
         if (_source) {
             setSourceCode(_source);
         }
     }, [source, externalSource]);
     if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
-            var renderCopyButton = _a.renderCopyButton;
-            return (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
-                react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
-                react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })));
-        }));
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
+            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
+            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId })))));
     }
     return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;
+//# sourceMappingURL=SourceCode.js.map

package/{SourceCode → lib/SourceCode}/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../SourceCode/SourceCode"), exports);
+//# sourceMappingURL=index.js.map

package/lib/TableOfContent/TableOfContent.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.TableOfContent = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useFullHeight_1 = require("../hooks/useFullHeight");
+const useActiveHeading_1 = require("../hooks/useActiveHeading");
+const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const utils_1 = require("./utils");
+function TableOfContent(props) {
+    var _a;
+    const { headings, tocMaxDepth, contentWrapper } = props;
+    const sidebar = (0, react_1.useRef)(null);
+    (0, useFullHeight_1.useFullHeight)(sidebar);
+    const { toc } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, tocMaxDepth);
+    const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
+    const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
+    if (toc === null || toc === void 0 ? void 0 : toc.hide) {
+        return null;
+    }
+    if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
+        return null;
+    }
+    if (!(headings === null || headings === void 0 ? void 0 : headings.length)) {
+        return null;
+    }
+    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, ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page'),
+            displayedHeadings.map((heading, idx) => {
+                // TODO: not sure about !heading
+                if (!heading) {
+                    return null;
+                }
+                const href = '#' + heading.id;
+                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+            }))))));
+}
+exports.TableOfContent = TableOfContent;
+const TocHeader = styled_components_1.default.div `
+  font-family: var(--toc-heading-font-family);
+  font-size: var(--toc-heading-font-size);
+  font-weight: var(--toc-heading-font-weight);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  color: var(--toc-heading-text-color);
+  text-transform: uppercase;
+`;
+const MenuItem = styled_components_1.default.a `
+  display: block;
+  color: var(--toc-item-text-color);
+  background-color: var(--toc-item-background-color);
+  cursor: pointer;
+  font-size: var(--toc-item-font-size);
+  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
+  padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
+  transition: background-color 0.3s, color 0.3s;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--heading-font-family, var(--toc-item-font-family));
+
+  :hover,
+  &.active {
+    color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;
+const TableOfContentMenu = styled_components_1.default.aside `
+  background-color: var(--toc-background-color);
+  flex-shrink: 0;
+  display: none !important;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--toc-width);
+    display: block !important;
+  }
+`;
+const TableOfContentItems = styled_components_1.default.div `
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  border-left: 1px solid var(--toc-border-color);
+  overflow-y: auto;
+  width: var(--toc-width); ;
+`;
+//# sourceMappingURL=TableOfContent.js.map

package/{TableOfContent → lib/TableOfContent}/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../TableOfContent/TableOfContent"), exports);
+//# sourceMappingURL=index.js.map

package/lib/TableOfContent/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLeastDepth = exports.getDisplayedHeadingsIds = exports.getDisplayedHeadings = void 0;
+function getDisplayedHeadings(headings, tocMaxDepth) {
+    if (!headings) {
+        return [];
+    }
+    return headings.filter((heading, idx) => {
+        if (!heading) {
+            return false;
+        }
+        if (idx === 0 && heading.depth === 1) {
+            return false;
+        }
+        return !(heading.depth && heading.depth > tocMaxDepth);
+    });
+}
+exports.getDisplayedHeadings = getDisplayedHeadings;
+function getDisplayedHeadingsIds(headings) {
+    if (!headings) {
+        return [];
+    }
+    return headings.map((header) => header === null || header === void 0 ? void 0 : header.id);
+}
+exports.getDisplayedHeadingsIds = getDisplayedHeadingsIds;
+function getLeastDepth(headings) {
+    if (!headings || headings.length === 0) {
+        return 1;
+    }
+    let depth = null;
+    for (const heading of headings) {
+        if (!heading)
+            continue;
+        if (depth === null || depth > heading.depth) {
+            depth = heading.depth;
+        }
+    }
+    return depth !== null && depth !== void 0 ? depth : 1;
+}
+exports.getLeastDepth = getLeastDepth;
+//# sourceMappingURL=utils.js.map

package/lib/Tooltip/Tooltip.js

@@ -0,0 +1,173 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.TooltipComponent = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../hooks");
+function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, }) {
+    const ref = (0, react_1.useRef)(null);
+    const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
+    (0, hooks_1.useOutsideClick)(ref, handleClose);
+    const isControlled = isOpen !== undefined;
+    (0, react_1.useEffect)(() => {
+        if (isControlled) {
+            if (isOpen) {
+                handleOpen();
+            }
+            else {
+                handleClose();
+            }
+        }
+    }, [isOpen, isControlled, handleOpen, handleClose]);
+    const controllers = !isControlled && {
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onClick: handleClose,
+    };
+    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
+        children,
+        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
+}
+exports.TooltipComponent = TooltipComponent;
+exports.Tooltip = (0, react_1.memo)(TooltipComponent);
+const PLACEMENTS = {
+    top: (0, styled_components_1.css) `
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -99%);
+    margin-top: -10px;
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-top-width: 6px;
+          border-top-style: solid;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 99%);
+        }
+      `}
+  `,
+    bottom: (0, styled_components_1.css) `
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 99%);
+    margin-bottom: -10px;
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom-width: 6px;
+          border-bottom-style: solid;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, -99%);
+        }
+      `}
+  `,
+    left: (0, styled_components_1.css) `
+    top: 50%;
+    left: 0;
+    transform: translate(-100%, -50%);
+    margin-left: -10px;
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left-width: 6px;
+          border-left-style: solid;
+          top: 50%;
+          right: 0;
+          transform: translate(99%, -50%);
+        }
+      `}
+  `,
+    right: (0, styled_components_1.css) `
+    top: 50%;
+    right: 0;
+    transform: translate(100%, -50%);
+    margin-right: -10px;
+
+    ${({ withArrow }) => withArrow &&
+        (0, styled_components_1.css) `
+        &::after {
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-right-width: 6px;
+          border-right-style: solid;
+          top: 50%;
+          left: 0;
+          transform: translate(-99%, -50%);
+        }
+      `}
+  `,
+};
+const TooltipWrapper = styled_components_1.default.div `
+  position: relative;
+  display: inline-block;
+`;
+const TooltipBody = styled_components_1.default.span `
+  display: inline-block;
+
+  position: absolute;
+  text-align: center;
+
+  padding: 10px 20px;
+  max-width: 250px;
+  white-space: normal;
+  overflow-wrap: break-word;
+
+  border-radius: var(--border-radius);
+  transition: opacity 0.3s ease-out;
+
+  font-size: 13px;
+
+  &::after {
+    position: absolute;
+
+    content: ' ';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-color: var(--tooltip-background-color);
+  }
+
+  background: var(--tooltip-background-color);
+  color: var(--tooltip-text-color);
+  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
+
+  width: ${({ width }) => width || '120px'};
+  ${({ placement }) => (0, styled_components_1.css) `
+      ${PLACEMENTS[placement]};
+    `}
+`;
+//# sourceMappingURL=Tooltip.js.map

package/{Tooltip → lib/Tooltip}/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../Tooltip/Tooltip"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Typography/CompactTypography.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompactTypography = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Typography_1 = require("../Typography/Typography");
+exports.CompactTypography = (0, styled_components_1.default)(Typography_1.Typography).attrs(() => ({
+    mt: '0em',
+    mb: '0em',
+    'data-component-name': 'Typography/CompactTypography',
+})) ``;
+//# sourceMappingURL=CompactTypography.js.map

package/lib/Typography/Emphasis.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Emphasis = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Emphasis = styled_components_1.default.strong.attrs(() => ({
+    'data-component-name': 'Typography/Emphasis',
+})) `
+  font-weight: var(--font-weight-bold);
+`;
+//# sourceMappingURL=Emphasis.js.map

package/lib/Typography/H1.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H1 = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../utils");
+exports.H1 = styled_components_1.default.h1.attrs(() => ({
+    'data-component-name': 'Typography/H1',
+})) `
+  color: var(--h1-text-color);
+  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
+
+  ${(0, utils_1.typography)('h1', 'h')};
+`;
+//# sourceMappingURL=H1.js.map

package/lib/Typography/H2.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H2 = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../utils");
+exports.H2 = styled_components_1.default.h2.attrs(() => ({
+    'data-component-name': 'Typography/H2',
+})) `
+  color: var(--h2-text-color);
+  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
+
+  ${(0, utils_1.typography)('h2', 'h')};
+`;
+//# sourceMappingURL=H2.js.map

package/lib/Typography/H3.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H3 = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../utils");
+exports.H3 = styled_components_1.default.h3.attrs(() => ({
+    'data-component-name': 'Typography/H3',
+})) `
+  color: var(--h3-text-color);
+  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+
+  ${(0, utils_1.typography)('h3', 'h')};
+`;
+//# sourceMappingURL=H3.js.map

package/lib/Typography/SectionHeader.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SectionHeader = styled_components_1.default.h2.attrs(() => ({
+    'data-component-name': 'Typography/SectionHeader',
+})) `
+  color: var(--h2-color);
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
+  text-align: center;
+  margin: 2.65em 0;
+  padding: 0 20px;
+  font-family: var(--h2-font-family);
+`;
+//# sourceMappingURL=SectionHeader.js.map

package/lib/Typography/Typography.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Typography = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Typography/Typography',
+})) `
+  color: ${({ color }) => color || 'var(--text-color)'};
+  font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
+  font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
+  font-style: ${({ fontStyle }) => fontStyle};
+  font-weight: ${({ fontWeight }) => fontWeight || 'var(--font-weight-regular)'};
+  line-height: ${({ lineHeight }) => lineHeight || 'var(--line-height-base)'};
+  letter-spacing: ${({ letterSpacing }) => letterSpacing};
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+  margin-top: ${({ marginTop }) => marginTop};
+  text-align: ${({ textAlign }) => textAlign};
+`;
+//# sourceMappingURL=Typography.js.map

package/{Typography → lib/Typography}/index.js

@@ -21,3 +21,4 @@ __exportStar(require("../Typography/Emphasis"), exports);
 __exportStar(require("../Typography/SectionHeader"), exports);
 __exportStar(require("../Typography/Typography"), exports);
 __exportStar(require("../Typography/CompactTypography"), exports);
+//# sourceMappingURL=index.js.map