@redocly/theme 0.4.6 → 0.4.8

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 { 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 {
@@ -18,7 +15,7 @@ export interface PanelComponentProps {
   renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
-  description?: React.ReactNode;
+  description?: ReactNode;
 }
 
 export function PanelComponent({
@@ -75,4 +72,8 @@ export function PanelComponent({
 export const InlineBox = styled.div`
   display: inline-flex;
   align-items: center;
+
+  > span:last-child {
+    margin-left: 8px;
+  }
 `;

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/Profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
 
 import { stringToHslColor } from '@theme/utils';

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 { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 

package/src/Search/ClearIcon.tsx

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

package/src/Search/Parameters.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import type { OperationParameter } from '@portal/types';

package/src/Search/Search.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { usePreloadHistory } from '@portal/usePreloadHistory';

package/src/Search/SearchIcon.tsx

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

package/src/Search/SearchItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import type { ActiveItem, SearchDocument } from '@portal/types';

package/src/Search/utils.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from 'styled-components';
 
 export const highlight = (text: string | string[]): JSX.Element | string => {

package/src/Sidebar/ApiCallItem.tsx

@@ -1,8 +1,8 @@
-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/ArrowBack.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Arrow = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/BackButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
 
 import { ArrowBack } from '@theme/Sidebar/ArrowBack';
 
@@ -7,10 +7,7 @@ interface BackButtonProps {
   back: () => void;
 }
 
-export function BackButton({
-  children,
-  back,
-}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
+export function BackButton({ children, back }: PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
     <Button onClick={back} data-component-name="Sidebar/BackButton">
       <ArrowBack />

package/src/Sidebar/Drilldown.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+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;
@@ -17,7 +18,7 @@ export function Drilldown({
   item,
   expand,
   ...props
-}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
+}: PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/Drilldown">
       <DrilldownLabel onClick={expand}>

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
-import { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 import { BackButton } from '@theme/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 
@@ -10,7 +11,7 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
-}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+}: PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu">
       <MenuContent>

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,7 +1,6 @@
-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/ExternalIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const Icon = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/MenuGroup.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+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';
@@ -18,7 +19,7 @@ export function MenuGroup({
   isExpanded,
   toggleExpanded,
   children,
-}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+}: PropsWithChildren<MenuGroupProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuGroup">
       <MenuLinkItem item={item}>

package/src/Sidebar/MenuItem.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';
+
 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,13 +1,11 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren } from 'react';
+
+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,
-  children,
-}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
+export function MenuLinkItem({ item, children }: PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuLinkItem">
       {item.link ? (

package/src/Sidebar/Separator.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';
+
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
 

package/src/Sidebar/SidebarLayout.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { ReactNode } from 'react';
 
 import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
@@ -10,8 +10,8 @@ import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 
 interface SidebarLayoutProps {
-  versions: React.ReactNode;
-  menu: React.ReactNode;
+  versions: ReactNode;
+  menu: ReactNode;
 }
 
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {

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/SidebarLogo/SidebarLogo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export interface LogoProps {

package/src/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { highlight, addLineNumbers } from '@theme/utils';
 import {
@@ -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 { 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/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, memo, useRef } from 'react';
+import { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import type { PropsWithChildren, ReactNode } from 'react';
 

package/src/globalStyle.ts

@@ -656,7 +656,7 @@ const responsePanelColors = css`
   --panel-response-heading-line-height: 20px;
   --panel-response-heading-font-weight: var(--font-weight-bold);
   --panel-response-heading-text-color: var(--text-color);
-
+ 
   --panel-response-body-text-color: var(--text-color);
 
   /**
@@ -815,6 +815,7 @@ const apiReferencePanels = css`
     --panel-font-weight-local: var(--panel-schemas-font-weight);
     --panel-background-color: var(--panel-schemas-background-color); // @presenter Color
     --panel-border-local: var(--panel-schemas-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
     --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color
 
     --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color
@@ -890,6 +891,7 @@ const apiReferencePanels = css`
     --panel-font-weight-local: var(--panel-samples-font-weight);
     --panel-background-color: var(--panel-samples-background-color); // @presenter Color
     --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
     --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
 
     --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
@@ -923,6 +925,7 @@ const apiReferencePanels = css`
   .panel-response-redirect,
   .panel-response-callback {
     --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
 
     --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
     --panel-heading-font-size-local: var(--panel-response-heading-font-size);
@@ -1088,7 +1091,7 @@ const apiReferencePanels = css`
   --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
 
   --panel-try-it-tabs-border-color: transparent; // @presenter Color
-  --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color
+  --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-border-color); // @presenter Color
   --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
   --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
 
@@ -1323,7 +1326,7 @@ const apiReferenceDocs = css`
 
   --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color
   --schema-type-text-color: var(--text-color-secondary); // @presenter Color
-  --schema-labels-font-size: 0.8em; // @presenter FontSize
+  --schema-labels-font-size: 1em; // @presenter FontSize
 
   /**
   * @tokens API Reference Schemas Lines Color
@@ -1844,6 +1847,11 @@ const lastUpdated = css`
   --last-updated-line-height: var(--line-height-base);
 `;
 
+const tile = css`
+  --wide-tile-background-color: var(--color-secondary-50);
+  --thin-tile-background-color: var(--color-secondary-50);
+`
+
 export const styles = css`
   :root {
     ${baseColors}
@@ -1870,6 +1878,7 @@ export const styles = css`
     ${apiReferencePanels}
     ${apiReferenceDocs}
     ${lastUpdated}
+    ${tile}
   }
 
   :root.dark {

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/icons/AlertIcon/AlertIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export interface AlertIconProps {

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export interface ArrowIconProps {

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 export interface ColorModeIconProps {

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import styled, { css } from 'styled-components';
+import type { CSSProperties } from 'react';
 
 import { getCssColorVariable } from '@theme/utils';
 
@@ -16,7 +16,7 @@ export interface ShelfIconProps {
   size?: string;
   color?: string;
   direction: 'left' | 'right' | 'up' | 'down';
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (

package/src/mocks/Link.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { omit } from 'lodash';
 
 // TODO: use real typings here

package/src/types/portal/src/shared/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { PERMISSION_PROP_NAME } from './constants';
+import type { ComponentType } from 'react';
 export declare type ResolvedNavLinkItem = {
     type: 'link';
     link: string;
@@ -73,7 +74,7 @@ export interface PageData {
     versions?: Version[];
 }
 export interface CachedPageData extends PageData {
-    Template: React.ComponentType<{
+    Template: ComponentType<{
         pageProps: PageProps;
     }>;
 }

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,4 @@
-import React, { MouseEventHandler } from 'react';
+import type { MouseEventHandler } 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 { 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 type { PropsWithChildren } from 'react';
 
 import { Box } from '@theme/ui/Box';
 
@@ -13,7 +14,7 @@ export const Flex = styled(Box).attrs({ 'data-component-name': 'ui/Flex' })<Flex
   ${width}
 `;
 
-export function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element {
+export function FlexSection(props: PropsWithChildren<FlexProps>): JSX.Element {
   return (
     <Flex {...props} width={props.width || { xs: '90%', large: 910 }}>
       {props.children}