@redocly/theme 0.1.7 → 0.1.10

package/ui/Tiles/ThinTile.js

@@ -0,0 +1,98 @@
+"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 __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThinTile = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../../mocks/Link");
+var Flex_1 = require("../../ui/Flex");
+var TileText_1 = require("../../ui/Tiles/TileText");
+var TileHeader_1 = require("../../ui/Tiles/TileHeader");
+var ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  box-sizing: border-box;\n  transition: box-shadow 0.25s ease;\n  padding: 24px;\n  margin-bottom: 20px;\n  text-decoration: none;\n  width: 100%;\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  :hover {\n    box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);\n  }\n\n  ", " {\n    width: calc(50% - 20px);\n    margin-right: 10px;\n    margin-left: 10px;\n  }\n\n  ", " {\n    width: 250px;\n  }\n\n  ", " {\n    width: 280px;\n  }\n\n  &.external-url {\n    :after {\n      display: none;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  box-sizing: border-box;\n  transition: box-shadow 0.25s ease;\n  padding: 24px;\n  margin-bottom: 20px;\n  text-decoration: none;\n  width: 100%;\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  :hover {\n    box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);\n  }\n\n  ", " {\n    width: calc(50% - 20px);\n    margin-right: 10px;\n    margin-left: 10px;\n  }\n\n  ", " {\n    width: 250px;\n  }\n\n  ", " {\n    width: 280px;\n  }\n\n  &.external-url {\n    :after {\n      display: none;\n    }\n  }\n"])), function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor || '#fff';
+}, function (_a) {
+    var bgImage = _a.bgImage;
+    return (bgImage ? "url(".concat(bgImage, ")") : 'none');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.small;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.large;
+});
+var ThinTileIcon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 90px;\n\n  ", " {\n    width: 80px;\n  }\n"], ["\n  width: 90px;\n\n  ", " {\n    width: 80px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 24px;\n  text-align: ", ";\n"], ["\n  font-size: 24px;\n  text-align: ", ";\n"])), function (_a) {
+    var align = _a.align;
+    return align || 'center';
+});
+var ThinTileText = (0, styled_components_1.default)(TileText_1.TileText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 18px;\n  line-height: 1.5;\n  flex-shrink: 0;\n  min-height: 3em;\n  text-align: ", ";\n  ", ";\n  ", " {\n    min-height: 6em;\n  }\n\n  ", " {\n    min-height: 4.5em;\n  }\n"], ["\n  font-size: 18px;\n  line-height: 1.5;\n  flex-shrink: 0;\n  min-height: 3em;\n  text-align: ", ";\n  ", ";\n  ", " {\n    min-height: 6em;\n  }\n\n  ", " {\n    min-height: 4.5em;\n  }\n"])), function (_a) {
+    var align = _a.align;
+    return align || 'center';
+}, function (_a) {
+    var icon = _a.icon;
+    return icon
+        ? "\n    display: -webkit-box;\n    -webkit-line-clamp: 8;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    line-clamp: 8;\n  "
+        : '';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.small;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var ThinTile = /** @class */ (function (_super) {
+    __extends(ThinTile, _super);
+    function ThinTile() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ThinTile.prototype.render = function () {
+        var _a = this.props, header = _a.header, icon = _a.icon, children = _a.children, to = _a.to, target = _a.target, headerAlign = _a.headerAlign, textAlign = _a.textAlign, color = _a.color, className = _a.className, style = _a.style;
+        var Wrapper = to
+            ? ThinTileWrapper
+            : ThinTileWrapper.withComponent('div');
+        return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ to: to, target: target, color: color, className: className, style: style, "data-component-name": "ui/Tiles/ThinTile" }, { children: [(icon || header) && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ flexDirection: "column" }, { children: [icon && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ flexShrink: 0, height: { xs: 'auto', small: '100px', medium: '110px' }, alignItems: "center", justifyContent: "center", mb: "25px" }, { children: (0, jsx_runtime_1.jsx)(ThinTileIcon, { src: icon }) }))), header && ((0, jsx_runtime_1.jsx)(ThinTileHeader, __assign({ align: headerAlign, color: color, "data-cy": "Thin-".concat(header) }, { children: header })))] }))), children && ((0, jsx_runtime_1.jsx)(ThinTileText, __assign({ icon: icon, align: textAlign, color: color }, { children: children })))] })));
+    };
+    return ThinTile;
+}(react_1.Component));
+exports.ThinTile = ThinTile;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Tiles/TileHeader.d.ts

@@ -0,0 +1,5 @@
+export declare const TileHeader: import("styled-components").StyledComponent<"h3", any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+}, "data-component-name">;

package/ui/Tiles/TileHeader.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.TileHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.TileHeader = styled_components_1.default.h3.attrs(function () { return ({
+    'data-component-name': 'ui/Tiles/TileHeader',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"], ["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"])), function (props) { return props.color || 'var(--color-content)'; });
+var templateObject_1;

package/ui/Tiles/TileText.d.ts

@@ -0,0 +1,5 @@
+export declare const TileText: import("styled-components").StyledComponent<"span", any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+}, "data-component-name">;

package/ui/Tiles/TileText.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.TileText = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.TileText = styled_components_1.default.span.attrs(function () { return ({
+    'data-component-name': 'ui/Tiles/TileText',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-base);\n"], ["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-base);\n"])), function (props) { return props.color || 'var(--color-content)'; });
+var templateObject_1;

package/ui/Tiles/WideTile.d.ts

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

package/ui/Tiles/WideTile.js

@@ -0,0 +1,93 @@
+"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 __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WideTile = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../../mocks/Link");
+var TileText_1 = require("../../ui/Tiles/TileText");
+var TileHeader_1 = require("../../ui/Tiles/TileHeader");
+// prettier-ignore
+var WideTileWrapper = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: ", ";\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  padding: 24px;\n  padding-right: ", ";\n  margin-bottom: 32px;\n  box-sizing: border-box;\n  position: relative;\n  text-decoration: none;\n  width: 100%;\n  transition: box-shadow 0.25s ease;\n  :hover {\n    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.2);\n  }\n  :before {\n    content: ", ";\n    display: inline-block;\n    width: 9px;\n    min-height: 18px;\n    background-size: 9px 18px;\n    background-repeat: no-repeat;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 30px;\n  }\n  &.external-url::after {\n    content: none;\n  }\n  \n  ", " {\n    width: calc(50% - 2em);\n    padding: 32px;\n    padding-right: ", ";\n    flex-direction: row;\n    max-width: ", ";\n  }\n"], ["\n  display: inline-flex;\n  flex-direction: ", ";\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  padding: 24px;\n  padding-right: ", ";\n  margin-bottom: 32px;\n  box-sizing: border-box;\n  position: relative;\n  text-decoration: none;\n  width: 100%;\n  transition: box-shadow 0.25s ease;\n  :hover {\n    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.2);\n  }\n  :before {\n    content: ", ";\n    display: inline-block;\n    width: 9px;\n    min-height: 18px;\n    background-size: 9px 18px;\n    background-repeat: no-repeat;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 30px;\n  }\n  &.external-url::after {\n    content: none;\n  }\n  \n  ", " {\n    width: calc(50% - 2em);\n    padding: 32px;\n    padding-right: ", ";\n    flex-direction: row;\n    max-width: ", ";\n  }\n"])), function (_a) {
+    var withIcon = _a.withIcon;
+    return (withIcon ? 'column' : 'row');
+}, function (_a) {
+    var bgColor = _a.bgColor;
+    return bgColor || '#fff';
+}, function (_a) {
+    var bgImage = _a.bgImage;
+    return (bgImage ? "url(".concat(bgImage, ")") : 'none');
+}, function (_a) {
+    var disableArrow = _a.disableArrow;
+    return (disableArrow ? '24px' : '56px');
+}, function (_a) {
+    var disableArrow = _a.disableArrow;
+    return (disableArrow ? 'none' : '""');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+}, function (_a) {
+    var disableArrow = _a.disableArrow;
+    return (disableArrow ? '32px' : '64px');
+}, function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth;
+});
+var WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 24px;\n  text-align: ", ";\n"], ["\n  font-size: 24px;\n  text-align: ", ";\n"])), function (_a) {
+    var align = _a.align;
+    return align || 'left';
+});
+var WideTileText = (0, styled_components_1.default)(TileText_1.TileText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 18px;\n  text-align: ", ";\n"], ["\n  font-size: 18px;\n  text-align: ", ";\n"])), function (_a) {
+    var align = _a.align;
+    return align || 'left';
+});
+var WideTileIcon = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  flex-shrink: 0;\n  width: 70px;\n  img {\n    display: block;\n    height: auto;\n    max-width: 100%;\n  }\n\n  ", " {\n    margin-right: 24px;\n    margin-bottom: 0;\n  }\n"], ["\n  margin-bottom: 24px;\n  flex-shrink: 0;\n  width: 70px;\n  img {\n    display: block;\n    height: auto;\n    max-width: 100%;\n  }\n\n  ", " {\n    margin-right: 24px;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var WideTile = /** @class */ (function (_super) {
+    __extends(WideTile, _super);
+    function WideTile() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    WideTile.prototype.render = function () {
+        var _a = this.props, to = _a.to, header = _a.header, children = _a.children, target = _a.target, disableArrow = _a.disableArrow, textAlign = _a.textAlign, headerAlign = _a.headerAlign, icon = _a.icon, bgColor = _a.bgColor, bgImage = _a.bgImage, color = _a.color, className = _a.className, style = _a.style, maxWidth = _a.maxWidth;
+        return ((0, jsx_runtime_1.jsxs)(WideTileWrapper, __assign({ 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" }, { children: [icon && ((0, jsx_runtime_1.jsx)(WideTileIcon, { children: (0, jsx_runtime_1.jsx)("img", { src: icon, alt: "" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [header && ((0, jsx_runtime_1.jsx)(WideTileHeader, __assign({ align: textAlign, color: color, "data-cy": "Wide-".concat(header) }, { children: header }))), children && ((0, jsx_runtime_1.jsx)(WideTileText, __assign({ align: headerAlign, color: color }, { children: children })))] })] })));
+    };
+    return WideTile;
+}(react_1.Component));
+exports.WideTile = WideTile;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Tiles/index.d.ts

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

package/ui/Tiles/index.js

@@ -0,0 +1,20 @@
+"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("../../ui/Tiles/ThinTile"), exports);
+__exportStar(require("../../ui/Tiles/TileHeader"), exports);
+__exportStar(require("../../ui/Tiles/TileText"), exports);
+__exportStar(require("../../ui/Tiles/WideTile"), exports);

package/ui/Typography.d.ts

@@ -0,0 +1,110 @@
+import { SimpleInterpolation } from 'styled-components';
+import { ColorProps, TypographyProps } from 'styled-system';
+export interface ITypography {
+    fontSize?: string;
+    fontWeight?: string | number;
+    fontFamily?: string;
+    lineHeight?: string;
+    color?: string;
+    transform?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginLeft?: string;
+    marginBottom?: string;
+    marginVertical?: string;
+    marginHorizontal?: string;
+}
+export declare const typographyTokens: {
+    typography: {
+        fontSize: string;
+        fontFamily: string;
+        lineHeight: string;
+    };
+    heading1: {
+        fontSize: string;
+        fontFamily: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    heading2: {
+        fontSize: string;
+        fontFamily: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    heading3: {
+        fontSize: string;
+        fontFamily: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+    heading4: {};
+    heading5: {};
+    heading6: {};
+    blockquote: {
+        color: string;
+    };
+    alert: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        marginTop: string;
+        marginBottom: string;
+        heading: {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            transform: string;
+        };
+    };
+};
+export declare function typography(theme?: ITypography): string | SimpleInterpolation;
+export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
+    'data-component-name': string;
+}, "data-component-name">;
+export declare const H1: import("styled-components").StyledComponent<"h1", any, {
+    'data-component-name': string;
+} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    mt?: string | undefined;
+    mb?: string | undefined;
+}, "data-component-name">;
+export declare const H2: import("styled-components").StyledComponent<"h1", any, {
+    'data-component-name': string;
+} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    mt?: string | undefined;
+    mb?: string | undefined;
+}, "data-component-name">;
+export declare const H3: import("styled-components").StyledComponent<"h1", any, {
+    'data-component-name': string;
+} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    mt?: string | undefined;
+    mb?: string | undefined;
+}, "data-component-name">;
+export declare const SectionHeader: import("styled-components").StyledComponent<"h2", any, {}, never>;
+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">;
+export declare const CompactTypography: 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;
+} & {
+    mt: string;
+    mb: string;
+    'data-component-name': string;
+}, "data-component-name" | "mt" | "mb">;

package/ui/Typography.js

@@ -0,0 +1,137 @@
+"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);
+    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.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = exports.typography = exports.typographyTokens = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var styled_system_1 = require("styled-system");
+exports.typographyTokens = {
+    typography: {
+        fontSize: 'var(--font-size-base)',
+        fontFamily: 'var(--h-font-family)',
+        lineHeight: 'var(--line-height-base)',
+    },
+    heading1: {
+        fontSize: 'var(--h1-font-size)',
+        fontFamily: 'var(--h-font-family)',
+        fontWeight: 'var(--font-weight-bold)',
+        lineHeight: 'var(--h1-line-height)',
+        color: 'var(--color-content)',
+        marginTop: 'var(--h1-margin-top)',
+        marginBottom: 'var(--h1-margin-bottom)',
+    },
+    heading2: {
+        fontSize: 'var(--h2-font-size)',
+        fontFamily: 'var(--h-font-family)',
+        fontWeight: 'var(--font-weight-bold)',
+        lineHeight: 'var(--h2-line-height)',
+        color: 'var(--color-content)',
+        marginTop: 'var(--h2-margin-top)',
+        marginBottom: 'var(--h2-margin-bottom)',
+    },
+    heading3: {
+        fontSize: 'var(--h3-font-size)',
+        fontFamily: 'var(--h-font-family)',
+        fontWeight: 'var(--font-weight-bold)',
+        lineHeight: 'var(--h3-line-height)',
+        color: 'var(--color-content)',
+        marginTop: 'var(--h3-margin-top)',
+        marginBottom: 'var(--h3-margin-bottom)',
+    },
+    heading4: {},
+    heading5: {},
+    heading6: {},
+    blockquote: {
+        color: 'var(--color-content)',
+    },
+    alert: {
+        fontSize: 'var(--admonition-font-size)',
+        fontWeight: 'var(--admonition-font-weight)',
+        lineHeight: 'var(--admonition-line-height)',
+        marginTop: 'var(--admonition-margin-vertical)',
+        marginBottom: 'var(--admonition-margin-vertical)',
+        heading: {
+            fontSize: 'var(--admonition-heading-font-size)',
+            fontWeight: 'var(--admonition-heading-font-weight)',
+            lineHeight: 'var(--admonition-line-height)',
+            transform: 'var(--admonition-heading-transform)',
+        },
+    },
+};
+function typography(theme) {
+    if (!theme)
+        return '';
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "], ["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "])), theme.fontSize || '', theme.fontWeight || '', theme.fontFamily || '', theme.lineHeight || '', theme.color || '', theme.transform || '');
+}
+exports.typography = typography;
+exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
+    'data-component-name': 'ui/Typography/Emphasis',
+}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
+exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
+    'data-component-name': 'ui/Typography/H1',
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading1), function (_a) {
+    var mt = _a.mt;
+    return mt && "margin-top: ".concat(mt, ";");
+}, function (_a) {
+    var mb = _a.mb;
+    return mb && "margin-bottom: ".concat(mb, ";");
+}, styled_system_1.color, styled_system_1.typography);
+exports.H2 = styled_components_1.default.h1.attrs(function () { return ({
+    'data-component-name': 'ui/Typography/H2',
+}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading2), function (_a) {
+    var mt = _a.mt;
+    return mt && "margin-top: ".concat(mt, ";");
+}, function (_a) {
+    var mb = _a.mb;
+    return mb && "margin-bottom: ".concat(mb, ";");
+}, styled_system_1.color, styled_system_1.typography);
+exports.H3 = styled_components_1.default.h1.attrs(function () { return ({
+    'data-component-name': 'ui/Typography/H3',
+}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading3), function (_a) {
+    var mt = _a.mt;
+    return mt && "margin-top: ".concat(mt, ";");
+}, function (_a) {
+    var mb = _a.mb;
+    return mb && "margin-bottom: ".concat(mb, ";");
+}, styled_system_1.color, styled_system_1.typography);
+exports.SectionHeader = styled_components_1.default.h2(templateObject_6 || (templateObject_6 = __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: 0px 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: 0px 20px;\n  font-family: var(--h-font-family);\n"])));
+exports.Typography = styled_components_1.default.p.attrs(function () { return ({
+    'data-component-name': 'ui/Typography/Typography',
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  color: var(--color-content);\n  ", "\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  ", ";\n  color: var(--color-content);\n  ", "\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), typography(exports.typographyTokens.typography), 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);
+exports.CompactTypography = (0, styled_components_1.default)(exports.Typography).attrs(function () { return ({
+    mt: '0em',
+    mb: '0em',
+    'data-component-name': 'ui/Typography/CompactTypography',
+}); })(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/ui/UniversalLink.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { LinkProps } from 'react-router-dom';
+export declare const withPropsFilter: (filterList: string[]) => (WrappedComponent: React.FunctionComponent) => (props: React.PropsWithChildren<object>) => JSX.Element;
+export interface PortalLinkProps<TState> extends LinkProps<TState> {
+    activeClassName?: string;
+    activeStyle?: object;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    partiallyActive?: boolean;
+    replace?: boolean;
+    state?: TState;
+    to: string;
+}
+export interface UniversalLinkProps extends Partial<PortalLinkProps<object>> {
+    external?: boolean;
+    ref?: any;
+}
+export declare const UniversalLink: (props: React.PropsWithChildren<object>) => JSX.Element;

package/ui/UniversalLink.js

@@ -0,0 +1,62 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniversalLink = exports.withPropsFilter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+var isUrl_1 = require("../utils/isUrl");
+var replaceHashInColor_1 = require("../utils/replaceHashInColor");
+var Link_1 = require("../mocks/Link");
+var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='", "' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E\");\n      width: 10px;\n      height: 10px;\n      background-repeat: no-repeat;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, replaceHashInColor_1.replaceHashInColor)(theme.colors.text.primary);
+});
+// TODO: We're using our own Link component so probably filtering is not necessary here.
+// filter out unnecessary props
+var propsList = [
+    'color',
+    'size',
+    'variant',
+    'bgColor',
+    'bgImage',
+    'disableArrow',
+    'withIcon',
+    'maxWidth',
+    'inversed',
+    'transparent',
+    'large',
+];
+var withPropsFilter = function (filterList) { return function (WrappedComponent) {
+    return function WithPropsFilter(props) {
+        var filteredProps = Object.fromEntries(Object.entries(props).filter(function (_a) {
+            var key = _a[0];
+            return !filterList.includes(key);
+        }));
+        return (0, jsx_runtime_1.jsx)(WrappedComponent, __assign({}, filteredProps));
+    };
+}; };
+exports.withPropsFilter = withPropsFilter;
+exports.UniversalLink = (0, exports.withPropsFilter)(propsList)(function (props) {
+    var _a;
+    return (typeof props.to === 'string' && ((0, isUrl_1.isUrl)(props.to) || props.to.startsWith('mailto:'))) ||
+        props.external ? ((0, jsx_runtime_1.jsx)(StyledExternalLink, __assign({ style: props.style, href: props.to, target: props.target || (props.external && '_blank') || '_self', className: "".concat(props.external ? 'external-url' : '', " ").concat(props.className), rel: props.rel, "data-cy": "universalLink-".concat(typeof props.children === 'string' ? props.children : 'with-nested-jsx') }, { children: props.children }))) : props.to == null ? ((0, jsx_runtime_1.jsx)("a", __assign({ onClick: props.onClick, className: props.className, style: props.style }, { children: props.children }))) : ((0, jsx_runtime_1.jsx)(Link_1.Link, __assign({}, props, { to: props.to, state: __assign({ previousPath: (_a = (0, react_router_dom_1.useLocation)()) === null || _a === void 0 ? void 0 : _a.pathname }, props.state) })));
+});
+var templateObject_1;

package/ui/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export * from '../ui/Tiles';
+export * from '../ui/AlertIcon';
+export * from '../ui/Arrow';
+export * from '../ui/Background';
+export * from '../ui/Box';
+export * from '../ui/Button';
+export * from '../ui/Dropdown';
+export * from '../ui/Flex';
+export * from '../ui/Jumbotron';
+export * from '../ui/Typography';
+export * from '../ui/UniversalLink';
+export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
+export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;