@redocly/theme 0.4.15 → 0.5.0

package/lib/icons/ShelfIcon/ShelfIcon.js

@@ -0,0 +1,52 @@
+"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.ShelfIcon = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../utils");
+const directionMap = {
+    right: '0deg',
+    down: '90deg',
+    left: '180deg',
+    up: '270deg',
+};
+const IntShelfIcon = ({ className, style }) => (React.createElement("svg", { className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }),
+    React.createElement("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })));
+exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(() => ({
+    'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+})) `
+  ${({ size = '9px', float = '', direction, color }) => (0, styled_components_1.css) `
+    height: ${size};
+    width: ${size};
+    float: ${float};
+    transform: rotateZ(${directionMap[direction]});
+    fill: ${(0, utils_1.getCssColorVariable)(color)};
+  `}
+  vertical-align: middle;
+  transition: transform 0.2s ease-out;
+`;
+//# sourceMappingURL=ShelfIcon.js.map

package/{icons → lib/icons}/ShelfIcon/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
 var ShelfIcon_1 = require("../../icons/ShelfIcon/ShelfIcon");
 Object.defineProperty(exports, "ShelfIcon", { enumerable: true, get: function () { return ShelfIcon_1.ShelfIcon; } });
+//# sourceMappingURL=index.js.map

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

@@ -18,3 +18,4 @@ __exportStar(require("../icons/ShelfIcon"), exports);
 __exportStar(require("../icons/AlertIcon"), exports);
 __exportStar(require("../icons/ArrowIcon"), exports);
 __exportStar(require("../icons/ColorModeIcon"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -33,3 +33,4 @@ __exportStar(require("./OperationBadge"), exports);
 __exportStar(require("./TableOfContent"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./ColorModeSwitcher"), exports);
+//# sourceMappingURL=index.js.map

package/lib/mocks/Link.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const react_1 = __importDefault(require("react"));
+// TODO: use real typings here
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function Link(props) {
+    const { active: _, httpVerb: _1, hasActiveSubItem: _2 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem"]);
+    // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+    return react_1.default.createElement("a", Object.assign({ href: filteredProps.to }, filteredProps));
+}
+exports.Link = Link;
+//# sourceMappingURL=Link.js.map

package/{mocks → lib/mocks}/constants/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = void 0;
 exports.DEFAULT_THEME_NAME = '@redocly/theme';
 exports.USER_THEME_ALIAS = '@theme';
+//# sourceMappingURL=index.js.map

package/{mocks → lib/mocks}/hooks/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
 function useThemeSettings(_) {
     return {
-        toc: { header: 'header', hide: false },
+        toc: { header: { label: 'header' }, hide: false },
         navigation: {
             nextPageLink: { label: 'next page theme settings label' },
             prevPageLink: { label: 'prev page theme settings label' },
@@ -30,3 +30,4 @@ function useSidebarSiblingsData() {
     };
 }
 exports.useSidebarSiblingsData = useSidebarSiblingsData;
+//# sourceMappingURL=index.js.map

package/{mocks → lib/mocks}/hooks/usePageData.js

@@ -8,3 +8,4 @@ function usePageData() {
     };
 }
 exports.usePageData = usePageData;
+//# sourceMappingURL=usePageData.js.map

package/{mocks → lib/mocks}/search.js

@@ -4,10 +4,11 @@ exports.useFuseSearch = void 0;
 function useFuseSearch() {
     return {
         query: '',
-        setQuery: function (val) {
+        setQuery(val) {
             this.query = val;
         },
         items: [],
     };
 }
 exports.useFuseSearch = useFuseSearch;
+//# sourceMappingURL=search.js.map

package/{mocks → lib/mocks}/types/index.js

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

package/lib/mocks/types.d.ts

@@ -0,0 +1,14 @@
+export declare type ActiveItem<T> = T;
+export declare type SearchDocument = any;
+export declare type OperationParameter = any;
+export interface RawTheme {
+    name: string;
+    settings: {
+        lastUpdatedBlock?: {
+            hide?: boolean;
+            format?: 'timeago' | 'iso' | 'short' | 'long';
+            locale?: string;
+        };
+        [k: string]: any;
+    };
+}

package/{mocks → lib/mocks}/types.js

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

package/{mocks → lib/mocks}/usePreloadHistory.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePreloadHistory = void 0;
 function usePreloadHistory() {
-    var history = [];
+    const history = [];
     return {
-        push: function (url) {
+        push: (url) => {
             history.push(url);
         },
     };
 }
 exports.usePreloadHistory = usePreloadHistory;
+//# sourceMappingURL=usePreloadHistory.js.map

package/{mocks → lib/mocks}/utils.js

@@ -7,7 +7,8 @@ function withPathPrefix(link) {
 exports.withPathPrefix = withPathPrefix;
 function timeAgo(lastModified) {
     // should return format(lastModified) in new-hope
-    var d = new Date(lastModified);
-    return "".concat(d.getDate(), "-").concat(d.getMonth() + 1, "-").concat(d.getFullYear());
+    const d = new Date(lastModified);
+    return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }
 exports.timeAgo = timeAgo;
+//# sourceMappingURL=utils.js.map

package/lib/ui/Background.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Background = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Flex_1 = require("../ui/Flex");
+exports.Background = (0, styled_components_1.default)(Flex_1.Flex).attrs(() => ({
+    'data-component-name': 'ui/Background',
+})) `
+  background: var(--navbar-background-color);
+  color: var(--navbar-text-color);
+  font-family: var(--heading-font-family);
+
+  a:not([role='button']),
+  a:not([role='button']):hover {
+    color: var(--navbar-text-color);
+  }
+`;
+//# sourceMappingURL=Background.js.map

package/lib/ui/Box.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const styled_system_1 = require("styled-system");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Box = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'ui/Box',
+})) `
+  max-width: 100%;
+  ${styled_system_1.space}
+  ${styled_system_1.layout}
+  ${styled_system_1.position}
+  ${styled_system_1.flex}
+  ${styled_system_1.textAlign}
+  ${styled_system_1.color}
+  ${styled_system_1.border}
+`;
+//# sourceMappingURL=Box.js.map

package/lib/ui/Burger.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Burger = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function BurgerComponent({ onClick, className }) {
+    return (react_1.default.createElement(Button, { onClick: onClick, className: className, "data-component-name": "ui/Burger" },
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null)));
+}
+const Button = styled_components_1.default.button `
+  all: unset;
+  max-width: 30px;
+  width: 100%;
+  min-width: 10px;
+  display: block;
+  cursor: pointer;
+`;
+const Line = styled_components_1.default.div `
+  margin: 4px 0;
+  width: 100%;
+  height: 2px;
+  background: #fff;
+  border-radius: 1px;
+`;
+exports.Burger = (0, styled_components_1.default)(BurgerComponent) ``;
+//# sourceMappingURL=Burger.js.map

package/lib/ui/Dropdown.js

@@ -0,0 +1,115 @@
+"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.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+const Icon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" })));
+const DropDownContainer = styled_components_1.default.div `
+  position: relative;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+`;
+const DropDownHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid #e4e7eb;
+  font-weight: 600;
+  color: var(--text-color);
+  background: var(--color-secondary-200);
+`;
+const DropDownList = styled_components_1.default.div `
+  position: absolute;
+  background: var(--color-secondary-200);
+  margin: 2px 20px 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid rgba(38, 50, 56, 0.2);
+  z-index: 9999;
+  left: 0;
+  right: 0;
+`;
+const IconWrapper = styled_components_1.default.span `
+  transition: transform 0.2s;
+  display: inline-block;
+  font-size: 0;
+  &.active {
+    transform: rotate(-180deg);
+  }
+`;
+const ListItem = styled_components_1.default.div `
+  background-color: #fff;
+  padding: 0.4em 10px;
+  font-size: 1em;
+  color: var(--text-color);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(38, 50, 56, 0.12);
+  }
+  &.active {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
+const DropDownLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-decoration: none;
+  color: var(--text-color);
+`;
+function Dropdown({ items, activeItem }) {
+    const ref = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const toggling = () => setIsOpen(!isOpen);
+    (0, react_1.useEffect)(() => {
+        const checkIfClickedOutside = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            if (isOpen && ref.current && !ref.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', checkIfClickedOutside);
+        return () => {
+            document.removeEventListener('mousedown', checkIfClickedOutside);
+        };
+    }, [isOpen]);
+    return (react_1.default.createElement(DropDownContainer, { ref: ref, "data-component-name": "ui/Dropdown" },
+        react_1.default.createElement(DropDownHeader, { onClick: toggling },
+            (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version,
+            react_1.default.createElement(IconWrapper, { className: isOpen ? 'active' : '' },
+                react_1.default.createElement(Icon, null))),
+        isOpen && (react_1.default.createElement(DropDownList, null, items.map((item) => (react_1.default.createElement(ListItem, { className: activeItem.version === item.version ? 'active' : '', onClick: toggling, key: (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version) },
+            react_1.default.createElement(DropDownLink, { to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, (item === null || item === void 0 ? void 0 : item.label) || item.version))))))));
+}
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.js.map

package/lib/ui/Flex.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexSection = exports.Flex = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const Box_1 = require("../ui/Box");
+exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' }) `
+  display: flex;
+  flex-wrap: wrap;
+  ${styled_system_1.flexbox}
+  ${styled_system_1.width}
+`;
+function FlexSection(props) {
+    return (react_1.default.createElement(exports.Flex, Object.assign({}, props, { width: props.width || { xs: '90%', large: 910 } }), props.children));
+}
+exports.FlexSection = FlexSection;
+//# sourceMappingURL=Flex.js.map

package/lib/ui/Jumbotron.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Jumbotron = void 0;
+const styled_system_1 = require("styled-system");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Typography_1 = require("../Typography");
+const Background_1 = require("../ui/Background");
+exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(() => ({
+    'data-component-name': 'ui/Jumbotron',
+})) `
+  flex-direction: column;
+  padding-top: ${({ pt }) => pt || '0'};
+  padding-bottom: ${({ pb }) => pb || '8em'};
+  padding-left: ${({ pl }) => pl || '0'};
+  padding-right: ${({ pr }) => pr || '0'};
+  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+  ${({ bgImage, bgColor }) => bgImage &&
+    `
+      background: ${bgColor || 'var(--text-color)'} url(${bgImage});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+  `};
+  ${({ parallaxEffect }) => parallaxEffect &&
+    `
+      background-attachment: scroll, fixed;
+  `};
+  ${styled_system_1.space}
+  ${Typography_1.H1}, ${Typography_1.H2} {
+    color: ${({ textColor }) => textColor || 'var(--navbar-text-color)'};
+    text-align: center;
+    padding: 0;
+  }
+  h1 {
+    font-size: 3.5em;
+    line-height: 1.2;
+    font-weight: var(--font-weight-bold);
+    margin: 1.75em 0 0.5em 0;
+  }
+  h2 {
+    font-size: 1.875em;
+    line-height: 1;
+    font-weight: var(--font-weight-regular);
+    margin: 0;
+    margin-bottom: 2em;
+  }
+`;
+//# sourceMappingURL=Jumbotron.js.map

package/{ui → lib/ui}/Tiles/ThinTile.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties } from 'react';
 import { Component } from 'react';
+import type { CSSProperties } from 'react';
 declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export interface TileProps {
     header?: string;

package/lib/ui/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("../../ui/Tiles/TileText");
+const TileHeader_1 = require("../../ui/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/ui/Tiles/TileHeader.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.TileHeader = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TileHeader = styled_components_1.default.h3.attrs(() => ({
+    'data-component-name': 'ui/Tiles/TileHeader',
+})) `
+  font-weight: var(--h3-font-weight);
+  line-height: var(--h3-line-height);
+  color: ${(props) => props.color || 'var(--h3-color)'};
+  font-family: var(--h3-font-family);
+  && {
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+  }
+`;
+//# sourceMappingURL=TileHeader.js.map