@redocly/theme 0.4.8 → 0.4.9

package/icons/ShelfIcon/ShelfIcon.js

@@ -3,17 +3,6 @@ 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,7 +28,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../../utils");
 var directionMap = {
@@ -50,7 +39,9 @@ var directionMap = {
 };
 var IntShelfIcon = function (_a) {
     var className = _a.className, style = _a.style;
-    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })] })));
+    return (React.createElement("svg", { className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+        React.createElement("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }),
+        React.createElement("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })));
 };
 exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(function () { return ({
     'data-component-name': 'icons/ShelfIcon/ShelfIcon',

package/mocks/Link.js

@@ -10,15 +10,18 @@ var __assign = (this && this.__assign) || function () {
     };
     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.Link = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var lodash_1 = require("lodash");
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function Link(props) {
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
     var filteredProps = (0, lodash_1.omit)(props, ['active', 'httpVerb', 'hasActiveSubItem']);
-    return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
+    return react_1.default.createElement("a", __assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import styled, { css, keyframes } from 'styled-components';
-import type { FC } from 'react';
 
 import { Link } from '@portal/Link';
 
@@ -140,7 +140,7 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
     `}
 `;
 
-const ButtonComponent: FC<ButtonProps> = (props) => {
+const ButtonComponent: React.FC<ButtonProps> = (props) => {
   if (props.to) {
     return (
       <Link to={props.to}>

package/src/Cards/Card.tsx

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

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { useThemeSettings } from '@portal/hooks';

package/src/CopyButton/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { Button } from '@theme/Button';
 

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import React, { memo } from 'react';
 
 import type { TooltipProps } from '@theme/Tooltip';
 

package/src/EditPageButton/EditPageButton.tsx

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

package/src/Footer/CustomFooter.tsx

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

package/src/Footer/CustomFooterNavItem.tsx

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

package/src/Footer/Footer.tsx

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

package/src/Footer/FooterColumn.tsx

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

package/src/Footer/FooterColumns.tsx

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

package/src/Footer/FooterCopyright.tsx

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

package/src/JsonViewer/JsonViewer.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { memo, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { CopyButtonWrapper } from '@theme/CopyButton';

package/src/LastUpdated/LastUpdated.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import { format } from 'timeago.js';
 

package/src/Layout/PageLayout.tsx

@@ -1,11 +1,14 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren, ReactNode } from 'react';
 
 interface PageLayoutProps {
-  sidebar?: ReactNode;
+  sidebar?: React.ReactNode;
 }
 
-export function PageLayout({ sidebar, children }: PropsWithChildren<PageLayoutProps>): JSX.Element {
+export function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
   return (
     <Container data-component-name="Layout/PageLayout">
       {sidebar}

package/src/Layout/RootLayout.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren, ReactNode } from 'react';
 
 interface LayoutConfig {
-  navbar: ReactNode;
-  footer: ReactNode;
+  navbar: React.ReactNode;
+  footer: React.ReactNode;
 }
 
 const Wrapper = styled.div``;
@@ -12,7 +12,7 @@ export function RootLayout({
   navbar,
   footer,
   children,
-}: PropsWithChildren<LayoutConfig>): JSX.Element {
+}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
   return (
     // TODO: rewrite it to avoid passing components as props
     <Wrapper data-component-name="Layout/RootLayout">

package/src/Markdown/Admonition.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
 
@@ -15,7 +15,7 @@ export function Admonition({
   type = 'info',
   name,
   children,
-}: PropsWithChildren<AdmonitionProps>): JSX.Element {
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
     <Wrapper type={type} data-component-name="Markdown/Admonition">
       <AlertIcon type={type} />

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,31 +1,60 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 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/Details.tsx

@@ -1,11 +1,11 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 type DetailsProps = {
   summary: string;
 };
 
-export function Details({ summary, children }: PropsWithChildren<DetailsProps>): JSX.Element {
+export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
   return (
     <StyledDetails>
       <summary>{summary}</summary>

package/src/Markdown/Heading.tsx

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

package/src/Markdown/MarkdownLayout.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { ReactNode } from 'react';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
 import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
@@ -8,8 +8,8 @@ import { EditPageButton } from '@theme/EditPageButton';
 import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 
 type MarkdownLayoutProps = {
-  tableOfContent: ReactNode;
-  markdownWrapper: ReactNode;
+  tableOfContent: React.ReactNode;
+  markdownWrapper: React.ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
   editPage?: {

package/src/Markdown/Mermaid.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 type MermaidProps = {

package/src/Markdown/Sup.tsx

@@ -1,4 +1,5 @@
 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/Tab.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 type TabProps = {

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';
@@ -39,6 +39,7 @@ const TabList = styled.ol`
 `;
 
 const TabContent = styled.div`
+  padding: 10px 5px;
   border: 1px solid #ccc;
   border-top: none;
   padding: 1rem;

package/src/Navbar/MobileNavbarDropdown.tsx

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

package/src/Navbar/MobileNavbarItem.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/MobileNavbarMenu.tsx

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

package/src/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { ReactNode } from 'react';
 
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 
@@ -13,9 +13,9 @@ import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
-  logo: ReactNode;
-  search: ReactNode;
-  profile?: ReactNode;
+  logo: React.ReactNode;
+  search: React.ReactNode;
+  profile?: React.ReactNode;
 }
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {

package/src/Navbar/NavbarDropdown.tsx

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

package/src/Navbar/NavbarItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/NavbarMenu.tsx

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

package/src/NavbarLogo/NavbarLogo.tsx

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

package/src/PageNavigation/NextPageLink.tsx

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

package/src/PageNavigation/PageNavigation.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';

package/src/PageNavigation/PreviousPageLink.tsx

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

package/src/Panel/PanelComponent.tsx

@@ -1,5 +1,5 @@
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
@@ -15,7 +15,7 @@ export interface PanelComponentProps {
   renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
-  description?: ReactNode;
+  description?: React.ReactNode;
 }
 
 export function PanelComponent({

package/src/Profile/Profile.tsx

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

package/src/Search/Autocomplete.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
-import { useEffect, useState } 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 type { SVGProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/Parameters.tsx

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

package/src/Search/Search.tsx

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

package/src/Search/SearchIcon.tsx

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

package/src/Search/SearchItem.tsx

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

package/src/Search/utils.tsx

@@ -1,3 +1,4 @@
+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,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';

package/src/Sidebar/ArrowBack.tsx

@@ -1,3 +1,4 @@
+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,7 +7,10 @@ interface BackButtonProps {
   back: () => void;
 }
 
-export function BackButton({ children, back }: PropsWithChildren<BackButtonProps>): JSX.Element {
+export function BackButton({
+  children,
+  back,
+}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
     <Button onClick={back} data-component-name="Sidebar/BackButton">
       <ArrowBack />

package/src/Sidebar/Drilldown.tsx

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

package/src/Sidebar/DrilldownMenu.tsx

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

package/src/Sidebar/DrilldownMenuItem.tsx

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

package/src/Sidebar/ExternalIcon.tsx

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

package/src/Sidebar/MenuGroup.tsx

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

package/src/Sidebar/MenuItem.tsx

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