@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Tags/Tags.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Highlight_1 = require("../../ui/Highlight");
+function Tags({ tags }) {
+    return (react_1.default.createElement(TagsWrapper, null, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
+        react_1.default.createElement(Highlight_1.Highlight, null, tag))))));
+}
+exports.Tags = Tags;
+const TagsWrapper = styled_components_1.default.div `
+  margin-top: 16px;
+`;
+const Tag = styled_components_1.default.div `
+  display: inline-block;
+  background-color: #d3f4ef;
+  color: #000;
+  padding: 2px 5px;
+  border-radius: var(--border-radius);
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+`;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
+//# sourceMappingURL=Tags.js.map

package/lib/components/Tags/index.d.ts

@@ -0,0 +1 @@
+export * from './Tags';

package/lib/components/Tags/index.js

@@ -0,0 +1,18 @@
+"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 __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("./Tags"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Tiles/ThinTile.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+import type { TileProps } from '../../components/Tiles/types';
+export declare class ThinTile extends Component<TileProps> {
+    render(): JSX.Element;
+}

package/lib/components/Tiles/ThinTile.js

@@ -0,0 +1,124 @@
+"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.ThinTile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const Flex_1 = require("../../ui/Flex");
+const TileText_1 = require("../../components/Tiles/TileText");
+const TileHeader_1 = require("../../components/Tiles/TileHeader");
+const ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  box-sizing: border-box;
+  transition: box-shadow 0.25s ease;
+  padding: 24px;
+  margin-bottom: 20px;
+  text-decoration: none;
+  width: 100%;
+  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+
+  :hover {
+    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    width: calc(50% - 20px);
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 250px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    width: 280px;
+  }
+
+  &.external-url {
+    :after {
+      display: none;
+    }
+  }
+`;
+const ThinTileIcon = styled_components_1.default.img `
+  width: 90px;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 80px;
+  }
+`;
+const ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'center'};
+`;
+const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  font-size: 18px;
+  line-height: 1.5;
+  flex-shrink: 0;
+  min-height: 3em;
+  text-align: ${({ align }) => align || 'center'};
+  ${({ icon }) => icon
+    ? `
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: 8;
+  `
+    : ''};
+  ${({ theme }) => theme.mediaQueries.small} {
+    min-height: 6em;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    min-height: 4.5em;
+  }
+`;
+class ThinTile extends react_1.Component {
+    render() {
+        const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } = this.props;
+        const Wrapper = to
+            ? ThinTileWrapper
+            : ThinTileWrapper.withComponent('div');
+        return (react_1.default.createElement(Wrapper, { to: to, target: target, color: color, className: className, style: style, "data-component-name": "ui/Tiles/ThinTile" },
+            (icon || header) && (react_1.default.createElement(Flex_1.Flex, { flexDirection: "column" },
+                icon && (react_1.default.createElement(Flex_1.Flex, { flexShrink: 0, height: { xs: 'auto', small: '100px', medium: '110px' }, alignItems: "center", justifyContent: "center", mb: "25px" },
+                    react_1.default.createElement(ThinTileIcon, { src: icon }))),
+                header && (react_1.default.createElement(ThinTileHeader, { align: headerAlign, color: color, "data-cy": `Thin-${header}` }, header)))),
+            children && (react_1.default.createElement(ThinTileText, { icon: icon, align: textAlign, color: color }, children))));
+    }
+}
+exports.ThinTile = ThinTile;
+//# sourceMappingURL=ThinTile.js.map

package/lib/components/Tiles/WideTile.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+import type { TileProps } from '../../components/Tiles/types';
+export declare class WideTile extends Component<TileProps & {
+    disableArrow?: boolean;
+}> {
+    render(): JSX.Element;
+}

package/lib/components/Tiles/WideTile.js

@@ -0,0 +1,114 @@
+"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.WideTile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const TileText_1 = require("../../components/Tiles/TileText");
+const TileHeader_1 = require("../../components/Tiles/TileHeader");
+// prettier-ignore
+const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
+  display: inline-flex;
+  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+  padding: 24px;
+  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
+  margin-bottom: 32px;
+  box-sizing: border-box;
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  transition: box-shadow 0.25s ease;
+  :hover {
+    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+  }
+  :before {
+    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
+    display: inline-block;
+    width: 9px;
+    min-height: 18px;
+    background-size: 9px 18px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 30px;
+  }
+  &.external-url::after {
+    content: none;
+  }
+  
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: calc(50% - 2em);
+    padding: 32px;
+    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    flex-direction: row;
+    max-width: ${({ maxWidth }) => maxWidth};
+  }
+`;
+const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  font-size: 18px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileIcon = styled_components_1.default.div `
+  margin-bottom: 24px;
+  flex-shrink: 0;
+  width: 70px;
+  img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin-right: 24px;
+    margin-bottom: 0;
+  }
+`;
+class WideTile extends react_1.Component {
+    render() {
+        const { to, header, children, target, disableArrow, textAlign, headerAlign, icon, bgColor, bgImage, color, className, style, maxWidth, } = this.props;
+        return (react_1.default.createElement(WideTileWrapper, { to: to, target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" },
+            icon && (react_1.default.createElement(WideTileIcon, null,
+                react_1.default.createElement("img", { src: icon, alt: "" }))),
+            react_1.default.createElement("div", null,
+                header && (react_1.default.createElement(WideTileHeader, { align: textAlign, color: color, "data-cy": `Wide-${header}` }, header)),
+                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
+    }
+}
+exports.WideTile = WideTile;
+//# sourceMappingURL=WideTile.js.map

package/lib/components/Tiles/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../../components/Tiles/ThinTile';
+export * from '../../components/Tiles/TileHeader';
+export * from '../../components/Tiles/TileText';
+export * from '../../components/Tiles/WideTile';

package/lib/components/Tiles/index.js

@@ -0,0 +1,21 @@
+"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 __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("../../components/Tiles/ThinTile"), exports);
+__exportStar(require("../../components/Tiles/TileHeader"), exports);
+__exportStar(require("../../components/Tiles/TileText"), exports);
+__exportStar(require("../../components/Tiles/WideTile"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Tiles/types.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+export type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export interface TileProps {
+    header?: string;
+    icon?: string;
+    children?: string;
+    to?: string;
+    target?: string;
+    headerAlign?: TextAlign;
+    textAlign?: TextAlign;
+    bgColor?: string;
+    bgImage?: string;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+    maxWidth?: string;
+}

package/lib/components/Tiles/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/components/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/lib/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/Tooltip/Tooltip';

package/lib/components/Tooltip/index.js

@@ -0,0 +1,18 @@
+"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 __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("../../components/Tooltip/Tooltip"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Typography/CompactTypography.d.ts

@@ -0,0 +1,7 @@
+export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+} & import("../../components/Typography/Typography").TypographyProps & {
+    mt: string;
+    mb: string;
+    'data-component-name': string;
+}, "data-component-name" | "mt" | "mb">;

package/lib/components/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("../../components/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/components/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/components/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/components/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/components/Typography/index.d.ts

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

package/lib/components/Typography/index.js

@@ -0,0 +1,24 @@
+"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 __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("../../components/Typography/H1"), exports);
+__exportStar(require("../../components/Typography/H2"), exports);
+__exportStar(require("../../components/Typography/H3"), exports);
+__exportStar(require("../../components/Typography/Emphasis"), exports);
+__exportStar(require("../../components/Typography/SectionHeader"), exports);
+__exportStar(require("../../components/Typography/Typography"), exports);
+__exportStar(require("../../components/Typography/CompactTypography"), exports);
+//# sourceMappingURL=index.js.map