@redocly/theme 0.4.7 → 0.4.9

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -3,29 +3,58 @@ import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
 
-type CodeSampleProps = {
+export interface MdCopyCodeProps {
+  enabled?: boolean;
+  buttonText?: string;
+  tooltipText?: string;
+  toasterText?: string;
+  toasterDuration?: number;
+}
+
+export type CodeSampleProps = {
   language: string;
   highlighted: string;
   rawContent: string;
+  copyCodeSnippet: MdCopyCodeProps;
+};
+
+const defaultCopyCodeSnippet = {
+  enabled: true,
+  buttonText: 'Copy',
+  tooltipText: 'Copy the code snippet',
+  toasterText: 'Copied',
+  toasterDuration: 1500,
 };
 
-export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+export function CodeSample({
+  rawContent,
+  highlighted,
+  language,
+  copyCodeSnippet,
+}: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
+  const copyCodeProps = { ...defaultCopyCodeSnippet, ...copyCodeSnippet };
 
   const [isCopied, setIsCopied] = useState(false);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 1500);
+    setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
   };
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
-        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
-        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
-      </CodeSampleButtonContainer>
+      {copyCodeProps.enabled && (
+        <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+          {!isCopied && (
+            <CopyCodeButton title={copyCodeProps.tooltipText}>
+              {copyCodeProps.buttonText}
+            </CopyCodeButton>
+          )}
+          {isCopied && <DoneIndicator>{copyCodeProps.toasterText}</DoneIndicator>}
+        </CodeSampleButtonContainer>
+      )}
       <pre className={langClassName}>
         <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
       </pre>

package/src/Markdown/Heading.tsx

@@ -1,4 +1,5 @@
-import React, { createElement, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { createElement } from 'react';
 
 import { concatClassNames } from '@theme/utils';
 

package/src/Markdown/MarkdownWrapper.tsx

@@ -1,4 +1,5 @@
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { typography } from '@theme/utils';
 

package/src/Markdown/Sup.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
-import React, { useState, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';

package/src/Navbar/Navbar.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { ResolvedConfigLinks } from '@theme/types/portal';
+
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
-import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';

package/src/NavbarLogo/NavbarLogo.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { LogoConfig } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
-import { LogoConfig } from '@theme/types/portal';
 
 export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
 

package/src/Panel/PanelComponent.tsx

@@ -1,15 +1,12 @@
-import React, {
-  BaseSyntheticEvent,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
+import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
+
 import { ShelfIcon } from '@theme/icons';
 import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelHeader, PanelHeaderProps } from '@theme/Panel/PanelHeader';
+import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
 export interface PanelComponentProps {

package/src/Panel/PanelHeader.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent } from 'react';
+import type { BaseSyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 export interface PanelHeaderProps {

package/src/Search/Autocomplete.tsx

@@ -1,11 +1,5 @@
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  ReactNode,
-  SyntheticEvent,
-  useEffect,
-  useState,
-} from 'react';
+import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 

package/src/Search/ClearIcon.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/SearchIcon.tsx

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Sidebar/ApiCallItem.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { OperationBadge } from '@theme/OperationBadge';
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';

package/src/Sidebar/Drilldown.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
+
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 import { DrilldownMenu } from '@theme/Sidebar/DrilldownMenu';
-import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
-import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
+
 import { BackButton } from '@theme/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
   return (

package/src/Sidebar/MenuGroup.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
+
 import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
-import { ItemState } from '@theme/Sidebar/types/ItemState';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';

package/src/Sidebar/MenuItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { ExternalIcon } from '@theme/Sidebar/ExternalIcon';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';

package/src/Sidebar/MenuLink.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-import { UniversalLink, UniversalLinkProps } from '@theme/ui/UniversalLink';
+import type { UniversalLinkProps } from '@theme/ui/UniversalLink';
+
+import { UniversalLink } from '@theme/ui/UniversalLink';
 
 export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { MenuLink } from '@theme/Sidebar/MenuLink';
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function MenuLinkItem({
   item,

package/src/Sidebar/Separator.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
 

package/src/Sidebar/types/DrilldownMenuProps.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '@theme/Sidebar/types/ItemState';
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 export interface DrilldownMenuProps {
   back: () => void;

package/src/Sidebar/types/ItemState.ts

@@ -1,5 +1,5 @@
-import { NavItem } from '@theme/Sidebar/types/NavItem';
-import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+import type { NavItem } from '@theme/Sidebar/types/NavItem';
+import type { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
 export interface ItemState extends NavItem {
   items: ItemState[];

package/src/Sidebar/types/MenuItemProps.ts

@@ -1,4 +1,4 @@
-import { ItemState } from '@theme/Sidebar/types/ItemState';
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 export interface MenuItemProps {
   item: ItemState;

package/src/Sidebar/types/NavItem.ts

@@ -1,4 +1,4 @@
-import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+import type { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
 
 export interface NavItem {
   label?: string;

package/src/SourceCode/SourceCode.tsx

@@ -17,6 +17,7 @@ export interface SourceCodeProps extends CommonCodeProps {
   lang: string;
   source?: string;
   externalSource?: ExternalSource;
+  onCopyClick?: () => void;
   withCopyButton?: boolean;
   dataTestId?: string;
 }
@@ -67,6 +68,7 @@ export function SourceCode({
   lang,
   source,
   externalSource,
+  onCopyClick,
   withCopyButton,
   dataTestId = 'source-code',
   withLineNumbers,
@@ -86,7 +88,11 @@ export function SourceCode({
 
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={sourceCode} data-component-name="SourceCode/SourceCode">
+      <CopyButtonWrapper
+        data={sourceCode}
+        onCopyClick={onCopyClick}
+        data-component-name="SourceCode/SourceCode"
+      >
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>

package/src/TableOfContent/TableOfContent.tsx

@@ -1,12 +1,13 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 
+import type { MdHeading } from '@theme/types/portal';
+
 import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { MdHeading } from '@theme/types/portal';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 
 interface TableOfContentProps {
@@ -85,13 +86,12 @@ const MenuItem = styled.a<{ depth: number }>`
   background-color: var(--toc-item-background-color);
   cursor: pointer;
   font-size: var(--toc-item-font-size);
-  font-family: var(--toc-item-font-family);
   padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
   padding-left: calc(var(--toc-item-nested-offset) * ${({ depth }) => depth});
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;
-  font-family: var(--heading-font-family);
+  font-family: var(--heading-font-family, var(--toc-item-font-family));
 
   :hover,
   &.active {

package/src/TableOfContent/utils.ts

@@ -1,4 +1,4 @@
-import { MdHeading } from '@theme/types/portal';
+import type { MdHeading } from '@theme/types/portal';
 
 export function getDisplayedHeadings(
   headings: Array<MdHeading | null> | null | undefined,
@@ -14,10 +14,7 @@ export function getDisplayedHeadings(
     if (idx === 0 && heading.depth === 1) {
       return false;
     }
-    if (heading.depth && heading.depth > tocMaxDepth) {
-      return false;
-    }
-    return true;
+    return !(heading.depth && heading.depth > tocMaxDepth);
   });
 }
 

package/src/hooks/useFullHeight.ts

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, MutableRefObject, useMemo } from 'react';
+import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
 export function useFullHeight(element: MutableRefObject<HTMLElement | null>): void {

package/src/hooks/useMobileMenu.ts

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {

package/src/hooks/useOutsideClick.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect } from 'react';
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
 
 export function useOutsideClick(
   ref: MutableRefObject<HTMLElement | null>,

package/src/ui/Box.tsx

@@ -1,11 +1,4 @@
-import {
-  space,
-  position,
-  flex,
-  textAlign,
-  color,
-  border,
-  layout,
+import type {
   SpaceProps,
   LayoutProps,
   TextAlignProps,
@@ -14,6 +7,7 @@ import {
   FlexProps,
   BordersProps,
 } from 'styled-system';
+import { space, position, flex, textAlign, color, border, layout } from 'styled-system';
 import styled from 'styled-components';
 
 export interface BoxProps

package/src/ui/Burger.tsx

@@ -1,4 +1,5 @@
-import React, { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 export interface BurgerProps {

package/src/ui/Dropdown.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 
+import type { Version } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
-import { Version } from '@theme/types/portal';
 
 type DropdownProps = {
   items: Version[];

package/src/ui/Flex.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { flexbox, FlexboxProps, width, WidthProps } from 'styled-system';
+import type { FlexboxProps, WidthProps } from 'styled-system';
+import { flexbox, width } from 'styled-system';
 
 import { Box } from '@theme/ui/Box';
 

package/src/ui/Tiles/ThinTile.tsx

@@ -1,4 +1,5 @@
-import React, { Component, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
@@ -28,7 +29,7 @@ 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;
@@ -40,7 +41,7 @@ const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
   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 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,7 +19,7 @@ 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);
+  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;
@@ -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,5 +1,6 @@
 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 { isUrl } from '@theme/utils/isUrl';

package/src/ui/darkColors.tsx

@@ -17,8 +17,16 @@ export const darkMode = css`
   --link-hover-text-color: #57a5fd;
   --link-text-color: #57a5fd;
   --code-block-background-color: #1e2633;
-  --admonition-attention-background-color: #143568;
+  --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;

package/src/ui/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export * from '@theme/ui/Tiles';
 export * from '@theme/ui/Background';

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/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/Flex.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlexboxProps, WidthProps } from 'styled-system';
+import type { FlexboxProps, WidthProps } from 'styled-system';
 export interface FlexProps extends FlexboxProps, WidthProps {
 }
 export declare const Flex: import("styled-components").StyledComponent<"div", any, {

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

@@ -52,7 +52,7 @@ 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 || 'var(--thin-tile-background-color)';
 }, function (_a) {

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;
 }> {