@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,89 @@
+"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.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tabs_1 = require("../../components/Tabs");
+function Tabs(props) {
+    var _a;
+    const children = react_1.default.Children.toArray(props.children);
+    const [activeTab, setActiveTab] = (0, react_1.useState)((_a = children[0]) === null || _a === void 0 ? void 0 : _a.props.label);
+    const onTabSelect = (label) => setActiveTab(label);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs", className: props.className },
+        react_1.default.createElement(TabList, null, children.map((child, idx) => {
+            const { label } = child.props;
+            return (react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: `${label}-${idx}`, label: label, onClick: onTabSelect }));
+        })),
+        react_1.default.createElement(TabContent, null, children.map((child, idx) => {
+            if (child.props.label !== activeTab)
+                return undefined;
+            return react_1.default.createElement(react_1.default.Fragment, { key: idx },
+                " ",
+                child.props.children);
+        }))));
+}
+exports.Tabs = Tabs;
+const TabsContainer = styled_components_1.default.div `
+  color: var(--md-tabs-container-text-color);
+  font-size: var(--md-tabs-container-font-size);
+  font-family: var(--md-tabs-container-font-family);
+  font-style: var(--md-tabs-container-font-style);
+  font-weight: var(--md-tabs-container-font-weight);
+  background-color: var(--md-tabs-container-background-color);
+  margin: var(--md-tabs-container-margin);
+  padding: var(--md-tabs-container-padding);
+  border: var(--md-tabs-container-border);
+
+  ol[class^='Tabs__TabList'] {
+    margin: 0;
+    padding: 0;
+  }
+`;
+const TabList = styled_components_1.default.ol `
+  padding: var(--md-tabs-padding);
+  margin-block-end: 0;
+  border: var(--md-tabs-border);
+  border-width: var(--md-tabs-border-width);
+
+  li[class^='Tab__TabItem'] {
+    margin: var(--md-tabs-tab-margin);
+  }
+`;
+const TabContent = styled_components_1.default.div `
+  color: var(--md-tabs-content-text-color);
+  font-size: var(--md-tabs-content-font-size);
+  font-family: var(--md-tabs-content-font-family);
+  font-style: var(--md-tabs-content-font-style);
+  font-weight: var(--md-tabs-content-font-weight);
+  background-color: var(--md-tabs-content-background-color);
+  margin: var(--md-tabs-content-margin);
+  padding: var(--md-tabs-content-padding);
+  border: var(--md-tabs-content-border);
+`;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1,2 @@
+export * from '../../components/Tabs/Tab';
+export * from '../../components/Tabs/Tabs';

package/lib/components/Tabs/index.js

@@ -0,0 +1,19 @@
+"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/Tabs/Tab"), exports);
+__exportStar(require("../../components/Tabs/Tabs"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'default';
+type ActionStatusColor = 'approved' | 'declined' | 'pending';
+type SubjectStatusColor = 'active' | 'draft' | 'deprecated';
+type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
+type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
+type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
+interface TagProps {
+    className?: string;
+    children?: React.ReactNode;
+    closable?: boolean;
+    color?: StatusColor | Color | string;
+    size?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+}
+export declare function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element;
+export {};

package/lib/components/Tag/Tag.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Tag({ children, className, color, icon, onClick, size }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color, size: size, onClick: onClick },
+        icon ? icon : null,
+        children));
+}
+exports.Tag = Tag;
+const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
+    'data-component-name': 'Tag/Tag',
+    className: (className || '') +
+        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
+})) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-wrap: nowrap;
+
+  padding: var(--tag-padding);
+  margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  gap: var(--tag-gap);
+
+  font-size: var(--tag-font-size);
+  font-family: var(--tag-font-family);
+  font-weight: var(--tag-font-weight);
+  line-height: var(--tag-line-height);
+  box-shadow: var(--tag-box-shadow);
+  text-transform: var(--tag-text-transform);
+
+  color: var(--tag-color);
+  background-color: var(--tag-background-color);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
+  border-radius: var(--tag-border-radius);
+`;
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1,2 @@
+export * from '../../components/Tag/Tag';
+export * from '../../components/Tag/styledVariables';

package/lib/components/Tag/index.js

@@ -0,0 +1,19 @@
+"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/Tag/Tag"), exports);
+__exportStar(require("../../components/Tag/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Tag/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const tag: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Tag/styledVariables.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tag = void 0;
+const styled_components_1 = require("styled-components");
+exports.tag = (0, styled_components_1.css) `
+  /**
+    * @tokens Tag borders
+    */
+
+  --tag-border-width: 1px; //@presenter Border
+  --tag-border-style: solid; //@presenter Border
+  --tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --tag-box-shadow: none; // @presenter Shadow
+
+  /**
+    * @tokens Tag spacing
+    */
+
+  --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
+  --tag-margin: 0 5px 0 0; //@presenter Spacing
+  --tag-gap: 5px; //@presenter Spacing
+
+  /**
+    * @tokens Tag size
+    */
+   
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-base);
+  }
+
+  /**
+    * @tokens Tag typography
+    */
+
+  --tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --tag-font-family: inherit; // @presenter FontFamily
+  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --tag-line-height: var(--line-height-sm);
+  --tag-text-transform: capitalize;
+
+  /**
+    * @tokens Tag icon
+    */
+
+  --tag-icon-width: 1em; // @presenter Spacing
+  --tag-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Tag colors
+    */
+
+  .tag-grey,
+  .tag-draft,
+  .tag-schema,
+  .tag-default {
+    --tag-color: var(--text-primary); // @presenter Color
+    --tag-background-color: var(--bg-overlay); // @presenter Color
+    --tag-border-color: var(--border-primary); // @presenter Color
+  }
+
+  .tag-green,
+  .tag-success,
+  .tag-approved,
+  .tag-get {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
+  }
+
+  .tag-red,
+  .tag-error,
+  .tag-declined,
+  .tag-delete {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-background-color: var(--color-error-bg); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
+  }
+
+  .tag-gold,
+  .tag-warning,
+  .tag-deprecated,
+  .tag-put {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
+  }
+
+  .tag-blue,
+  .tag-processing,
+  .tag-post {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
+  }
+
+  .tag-cyan,
+  .tag-option {
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
+  }
+
+  .tag-yellow,
+  .tag-patch {
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
+  }
+
+  .tag-geekblue,
+  .tag-link {
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook {
+    --tag-color: var(--color-magenta-7); // @presenter Color
+    --tag-background-color: var(--color-magenta-1); // @presenter Color
+    --tag-border-color: var(--color-magenta-7); // @presenter Color
+  }
+
+  .tag-lime {
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
+  }
+
+  /**
+    * @tokens Tag http
+    */
+  .tag-http {
+    --tag-text-transform: uppercase;
+  }
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.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,126 @@
+"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: var(--border-radius-lg);
+  box-sizing: border-box;
+  padding: var(--spacing-lg);
+  margin-bottom: 20px;
+  text-decoration: none;
+  width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+
+  :hover {
+    border-color: var(--border-primary);
+  }
+
+  ${({ 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;
+  font-weight: var(--font-weight-bold);
+  text-align: ${({ align }) => align || 'center'};
+`;
+const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
+  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/TileHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const TileHeader: import("styled-components").StyledComponent<"h3", any, {
+    color?: string | undefined;
+}, never>;

package/lib/components/Tiles/TileHeader.js

@@ -0,0 +1,20 @@
+"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(({ className }) => ({
+    'data-component-name': 'ui/Tiles/TileHeader',
+    className,
+})) `
+  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: 0 0 var(--h3-margin-bottom);
+  }
+`;
+//# sourceMappingURL=TileHeader.js.map

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

@@ -0,0 +1,3 @@
+export declare const TileText: import("styled-components").StyledComponent<"span", any, {
+    color?: string | undefined;
+}, never>;

package/lib/components/Tiles/TileText.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.TileText = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TileText = styled_components_1.default.span.attrs(({ className }) => ({
+    'data-component-name': 'ui/Tiles/TileText',
+    className,
+})) `
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  overflow: hidden;
+  color: ${(props) => props.color || 'var(--text-base)'};
+  line-height: 1.25;
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=TileText.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,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.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')};
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
+  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+  padding: var(--spacing-lg);
+  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
+  margin-bottom: var(--spacing-xl);
+  box-sizing: border-box;
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  :hover {
+    border-color: var(--border-primary);
+  }
+  :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: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
+    flex-direction: row;
+    max-width: ${({ maxWidth }) => maxWidth};
+  }
+`;
+const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
+  font-size: 24px;
+  font-weight: var(--font-weight-bold);
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
+  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';