@redocly/theme 0.4.6 → 0.4.8

package/src/ui/Tiles/ThinTile.tsx

@@ -1,4 +1,5 @@
-import React, { Component, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { Component } from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
@@ -28,19 +29,19 @@ const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
   display: flex;
   flex-direction: column;
   border-radius: 10px;
-  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  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 || '#fff'};
+  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);
+    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {

package/src/ui/Tiles/WideTile.tsx

@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import styled from 'styled-components';
 
+import type { TileProps } from '@theme/ui';
+
 import { Link } from '@portal/Link';
-import { TileProps } from '@theme/ui';
 import { TileText } from '@theme/ui/Tiles/TileText';
 import { TileHeader } from '@theme/ui/Tiles/TileHeader';
 
@@ -18,8 +19,8 @@ const WideTileWrapper = styled(Link)<{
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
   border-radius: 10px;
-  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
-  background-color: ${({ bgColor }) => bgColor || 'var(--color-secondary-50)'};
+  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;
@@ -31,7 +32,7 @@ const WideTileWrapper = styled(Link)<{
   width: 100%;
   transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.2);
+    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};

package/src/ui/UniversalLink.tsx

@@ -1,6 +1,7 @@
-import * as React from 'react';
-import { useLocation, LinkProps } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import type { FunctionComponent, MouseEvent, PropsWithChildren } from 'react';
 
 import { isUrl } from '@theme/utils/isUrl';
 import { Link } from '@portal/Link';
@@ -41,20 +42,19 @@ const propsList = [
   'large',
 ];
 
-export const withPropsFilter =
-  (filterList: string[]) => (WrappedComponent: React.FunctionComponent) =>
-    function WithPropsFilter(props: React.PropsWithChildren<object>): JSX.Element {
-      const filteredProps = Object.fromEntries(
-        Object.entries(props).filter(([key]) => !filterList.includes(key)),
-      );
+export const withPropsFilter = (filterList: string[]) => (WrappedComponent: FunctionComponent) =>
+  function WithPropsFilter(props: PropsWithChildren<object>): JSX.Element {
+    const filteredProps = Object.fromEntries(
+      Object.entries(props).filter(([key]) => !filterList.includes(key)),
+    );
 
-      return <WrappedComponent {...filteredProps} />;
-    };
+    return <WrappedComponent {...filteredProps} />;
+  };
 
 export interface PortalLinkProps<TState> extends LinkProps<TState> {
   activeClassName?: string;
   activeStyle?: object;
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   partiallyActive?: boolean;
   replace?: boolean;
   state?: TState;

package/src/ui/darkColors.tsx

@@ -5,23 +5,62 @@ export const darkMode = css`
      * @tokens Dark Colors
      * @presenter Color
      */
-
-  --color-primary-300: #1e5ab1;
-  --color-primary-500: #003c95;
-
-  --color-accent-50: #6c91c0;
-
-  --color-secondary-50: #031e48;
-  --color-secondary-200: #142d62;
-  --color-secondary-300: #3f517c;
-  --color-secondary-500: #222222;
-
-  --color-emphasis-100: #5c5e62;
-  --color-emphasis-800: #f0f0f0;
-
-  --color-success-50: #627565;
-  --color-error-50: #bda3a7;
-  --color-warning-50: #8c8469;
+  --background-color: #0d1117;
+  --footer-background-color: #16202e;
+  --navbar-background-color: #16202e;
+  --color-primary-500: #57a5fd;
+  --color-primary-300: #15396e;
+  --color-secondary-300: #22262e;
+  --colors-translucent: rgb(50 63 75 / 40%);
+  --inline-code-text-color: #f76663;
+  --color-emphasis-400: #fff;
+  --link-hover-text-color: #57a5fd;
+  --link-text-color: #57a5fd;
+  --code-block-background-color: #1e2633;
+  --admonition-attention-background-color: var(--color-primary-300);
+  --admonition-attention-icon-color: var(--color-emphasis-700);
+  --admonition-warning-background-color: #614b17;
+  --admonition-warning-icon-color: #4c3b12;
+  --admonition-success-background-color: #267e74;
+  --admonition-success-icon-color: #38b9a5;
+  --admonition-danger-background-color: #d6524c;
+  --admonition-danger-icon-color: #d13e37;
+  --admonition-info-background-color: #696969;
+  --admonition-info-icon-color: #505050;
+  --inline-code-background-color: #1e2633;
+  --toc-item-active-background-color: #1e2633;
+  --sidebar-item-active-background-color: #1e2633;
+  --panel-response-success-heading-background-color: #38b9a5;
+  --panel-response-success-border-color: #38b9a5;
+  --panel-response-error-heading-background-color: #d6524c;
+  --panel-response-error-border-color: #d6524c;
+  --panel-samples-heading-background-color: #1e2633;
+  --panel-samples-body-background-color: #263041;
+  --panel-samples-tabs-hover-background-color: #1e2633;
+  --panel-samples-tabs-hover-border-color: #3f4f68;
+  --panel-try-it-action-button-hover-border-color: #2b4cc4;
+  --panel-try-it-action-button-hover-background-color: #2b4cc4;
+  --panel-try-it-action-button-background-color: #0065fb;
+  --button-background-color: #0065fb;
+  --button-border-color: #0065fb;
+  --button-hover-background-color: #2b4cc4;
+  --button-hover-border-color: #2b4cc4;
+  --search-popover-background-color: #1b2738;
+  --search-highlight-text-color: #57a5fd;
+  --search-item-active-background-color: #1f3559;
+  --panel-try-it-nested-body-background-color: #263041;
+  --panel-try-it-tabs-active-background-color: #11151d;
+  --panel-try-it-tabs-hover-background-color: #141a26;
+  --color-emphasis-100: #0065fb;
+  --color-secondary-400: #696969;
+  --color-emphasis-700: #fff;
+  --color-emphasis-800: #fff;
+  --copy-button-tooltip-text-color: #fff;
+  --copy-button-tooltip-background-color: var(--tooltip-background-color);
+  --tooltip-text-color: #fff;
+  --md-table-head-background-color: var(--color-secondary-300);
+  --wide-tile-background-color: #000000;
+  --thin-tile-background-color: #000000;
 
   background-color: var(--background-color);
   color: var(--text-color);

package/src/ui/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 
 export * from '@theme/ui/Tiles';
 export * from '@theme/ui/Background';
@@ -8,6 +8,5 @@ export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
 export * from '@theme/ui/UniversalLink';
 
-export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
-  children;
+export const LandingLayout = ({ children }: PropsWithChildren<object>): ReactNode => children;
 export const EmptyLayout = LandingLayout;

package/ui/Box.d.ts

@@ -1,4 +1,4 @@
-import { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps } from 'styled-system';
+import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps } from 'styled-system';
 export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps {
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, {

package/ui/Burger.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
 export interface BurgerProps {
     onClick: MouseEventHandler;
     className?: string;

package/ui/Burger.js

@@ -3,19 +3,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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.Burger = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function BurgerComponent(_a) {
     var onClick = _a.onClick, className = _a.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)));
+    return ((0, jsx_runtime_1.jsxs)(Button, __assign({ onClick: onClick, className: className, "data-component-name": "ui/Burger" }, { children: [(0, jsx_runtime_1.jsx)(Line, {}), (0, jsx_runtime_1.jsx)(Line, {}), (0, jsx_runtime_1.jsx)(Line, {})] })));
 }
 var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"], ["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"])));
 var Line = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"], ["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"])));

package/ui/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Version } from '@theme/types/portal';
+import type { Version } from '@theme/types/portal';
 declare type DropdownProps = {
     items: Version[];
     activeItem: Version;

package/ui/Dropdown.js

@@ -3,28 +3,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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;
+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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
@@ -47,11 +35,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-var react_1 = __importStar(require("react"));
+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 Icon = function () { return (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" }))); };
+var Icon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ 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" }, { children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) }))); };
 var DropDownContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"], ["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"])));
 var DropDownHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--text-color);\n  background: var(--color-secondary-200);\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--text-color);\n  background: var(--color-secondary-200);\n"])));
 var DropDownList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background: var(--color-secondary-200);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  background: var(--color-secondary-200);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"])));
@@ -77,13 +65,7 @@ function Dropdown(_a) {
             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(function (item) { return (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))); })))));
+    return ((0, jsx_runtime_1.jsxs)(DropDownContainer, __assign({ ref: ref, "data-component-name": "ui/Dropdown" }, { children: [(0, jsx_runtime_1.jsxs)(DropDownHeader, __assign({ onClick: toggling }, { children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version, (0, jsx_runtime_1.jsx)(IconWrapper, __assign({ className: isOpen ? 'active' : '' }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))] })), isOpen && ((0, jsx_runtime_1.jsx)(DropDownList, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(ListItem, __assign({ className: activeItem.version === item.version ? 'active' : '', onClick: toggling }, { children: (0, jsx_runtime_1.jsx)(DropDownLink, __assign({ to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, { children: (item === null || item === void 0 ? void 0 : item.label) || item.version })) }), (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version))); }) }))] })));
 }
 exports.Dropdown = Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Flex.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FlexboxProps, WidthProps } from 'styled-system';
+import type { FlexboxProps, WidthProps } from 'styled-system';
+import type { PropsWithChildren } from 'react';
 export interface FlexProps extends FlexboxProps, WidthProps {
 }
 export declare const Flex: import("styled-components").StyledComponent<"div", any, {
@@ -7,4 +7,4 @@ export declare const Flex: import("styled-components").StyledComponent<"div", an
 } & import("../ui/Box").BoxProps & {
     'data-component-name': string;
 } & FlexProps, "data-component-name">;
-export declare function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element;
+export declare function FlexSection(props: PropsWithChildren<FlexProps>): JSX.Element;

package/ui/Flex.js

@@ -19,13 +19,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexSection = exports.Flex = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
 var Box_1 = require("../ui/Box");
 exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n  ", "\n"])), styled_system_1.flexbox, styled_system_1.width);
 function FlexSection(props) {
-    return (react_1.default.createElement(exports.Flex, __assign({}, props, { width: props.width || { xs: '90%', large: 910 } }), props.children));
+    return ((0, jsx_runtime_1.jsx)(exports.Flex, __assign({}, props, { width: props.width || { xs: '90%', large: 910 } }, { children: props.children })));
 }
 exports.FlexSection = FlexSection;
 var templateObject_1;

package/ui/Tiles/ThinTile.d.ts

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

package/ui/Tiles/ThinTile.js

@@ -18,43 +18,32 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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 __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 react_1 = __importStar(require("react"));
+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 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: 0 10px 30px 0 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: 0 10px 100px 0 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: 0 10px 30px 0 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: 0 10px 100px 0 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';
+    return bgColor || 'var(--thin-tile-background-color)';
 }, function (_a) {
     var bgImage = _a.bgImage;
     return (bgImage ? "url(".concat(bgImage, ")") : 'none');
@@ -101,12 +90,7 @@ var ThinTile = /** @class */ (function (_super) {
         var 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-".concat(header) }, header)))),
-            children && (react_1.default.createElement(ThinTileText, { icon: icon, align: textAlign, color: color }, children))));
+        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));

package/ui/Tiles/WideTile.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { TileProps } from '../../ui';
+import type { TileProps } from '../../ui';
 export declare class WideTile extends Component<TileProps & {
     disableArrow?: boolean;
 }> {

package/ui/Tiles/WideTile.js

@@ -18,46 +18,35 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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 __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 react_1 = __importStar(require("react"));
+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 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: 0 10px 30px 0 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: 0 10px 30px 0 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: 0 10px 30px 0 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: 0 10px 30px 0 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 || 'var(--color-secondary-50)';
+    return bgColor || 'var(--wide-tile-background-color)';
 }, function (_a) {
     var bgImage = _a.bgImage;
     return (bgImage ? "url(".concat(bgImage, ")") : 'none');
@@ -96,12 +85,7 @@ var WideTile = /** @class */ (function (_super) {
     }
     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 (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-".concat(header) }, header)),
-                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
+        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));

package/ui/UniversalLink.d.ts

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

package/ui/UniversalLink.js

@@ -14,29 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -58,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UniversalLink = exports.withPropsFilter = void 0;
-var React = __importStar(require("react"));
+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");
@@ -85,13 +62,13 @@ var withPropsFilter = function (filterList) { return function (WrappedComponent)
             var _b = __read(_a, 1), key = _b[0];
             return !filterList.includes(key);
         }));
-        return React.createElement(WrappedComponent, __assign({}, filteredProps));
+        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 ? (React.createElement(StyledExternalLink, { 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') }, props.children)) : props.to == null ? (React.createElement("a", { onClick: props.onClick, className: props.className, style: props.style }, props.children)) : (React.createElement(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) })));
+        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;