@redocly/theme 0.4.6 → 0.4.8

package/icons/ArrowIcon/ArrowIcon.js

@@ -3,12 +3,23 @@ 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.ArrowIcon = 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 directionToTransform(_a) {
     var direction = _a.direction;
@@ -25,9 +36,7 @@ function directionToTransform(_a) {
 }
 var Icon = function (_a) {
     var className = _a.className;
-    return (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" },
-        react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
-            react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
+    return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "icons/ArrowIcon/ArrowIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }) })) })));
 };
 exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/icons/ColorModeIcon/ColorModeIcon.js

@@ -3,25 +3,33 @@ 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.ColorModeIcon = 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 Icon(_a) {
     var mode = _a.mode, className = _a.className;
     switch (mode) {
         case 'dark':
-            return (react_1.default.createElement("svg", { className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.createElement("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" })));
+            return ((0, jsx_runtime_1.jsx)("svg", __assign({ className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" }) })));
         case 'light':
-            return (react_1.default.createElement("svg", { "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.createElement("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" })));
+            return ((0, jsx_runtime_1.jsx)("svg", __assign({ "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" }) })));
         default:
-            return (react_1.default.createElement("svg", { "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.createElement("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" })));
+            return ((0, jsx_runtime_1.jsx)("svg", __assign({ "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" }) })));
     }
 }
 exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({

package/icons/ShelfIcon/ShelfIcon.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import type { CSSProperties } from 'react';
 export interface ShelfIconProps {
     className?: string;
     float?: 'left' | 'right';
     size?: string;
     color?: string;
     direction: 'left' | 'right' | 'up' | 'down';
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
 export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {
     'data-component-name': string;

package/icons/ShelfIcon/ShelfIcon.js

@@ -3,6 +3,17 @@ 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);
@@ -28,7 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShelfIcon = void 0;
-var React = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../../utils");
 var directionMap = {
@@ -39,9 +50,7 @@ var directionMap = {
 };
 var IntShelfIcon = function (_a) {
     var className = _a.className, style = _a.style;
-    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" })));
+    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" })] })));
 };
 exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(function () { return ({
     'data-component-name': 'icons/ShelfIcon/ShelfIcon',

package/mocks/Link.js

@@ -10,18 +10,15 @@ 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 react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 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 react_1.default.createElement("a", __assign({ href: filteredProps.to }, filteredProps));
+    return (0, jsx_runtime_1.jsx)("a", __assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/package.json

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

package/src/Button/Button.tsx

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

package/src/Cards/Card.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import styled from 'styled-components';
 
+import type { ResolvedNavItem } from '@theme/types/portal';
+
 import { Link } from '@portal/Link';
 import { H3 } from '@theme/Typography';
-import { ResolvedNavItem } from '@theme/types/portal';
 
 export interface CardProps {
   title?: string;
@@ -31,7 +31,7 @@ export function Card(props: CardProps): JSX.Element {
 
 const CardWrapper = styled.div`
   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);
   padding: 20px;
   margin: 0 20px 20px 0;
   min-width: 25%;

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

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

package/src/CopyButton/CopyButton.tsx

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

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,7 +1,9 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
+
+import type { TooltipProps } from '@theme/Tooltip';
 
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip, TooltipProps } from '@theme/Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
 
@@ -10,12 +12,14 @@ export interface CopyButtonWrapperProps {
   children: (props: {
     renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
   }) => JSX.Element;
+  onCopyClick?: () => void;
   dataTestId?: string;
 }
 
 function CopyButtonWrapperComponent({
   data,
   children,
+  onCopyClick,
   dataTestId = 'copy-button',
 }: CopyButtonWrapperProps): JSX.Element {
   const tooltip = useControl();
@@ -32,6 +36,8 @@ function CopyButtonWrapperComponent({
     const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
     ClipboardService.copyCustom(content);
     showTooltip();
+
+    onCopyClick?.();
   };
 
   const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {

package/src/EditPageButton/EditPageButton.tsx

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

package/src/Footer/CustomFooter.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import styled from 'styled-components';
 
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+
 import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/Footer/CustomFooterNavItem.tsx

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

package/src/Footer/Footer.tsx

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

package/src/Footer/FooterColumn.tsx

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

package/src/Footer/FooterColumns.tsx

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

package/src/Footer/FooterCopyright.tsx

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

package/src/JsonViewer/JsonViewer.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useRef, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import { memo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { CopyButtonWrapper } from '@theme/CopyButton';
@@ -13,6 +14,7 @@ export interface JsonProps {
   jsonSampleExpandLevel: number;
   withLineNumbers?: boolean;
   startLineNumber?: number;
+  onCopyClick?: () => void;
 }
 
 function JsonComponent({
@@ -21,6 +23,7 @@ function JsonComponent({
   className,
   withLineNumbers,
   startLineNumber,
+  onCopyClick,
 }: JsonProps): JSX.Element {
   const node = useRef<HTMLDivElement | null>(null);
 
@@ -103,7 +106,7 @@ function JsonComponent({
   };
 
   return (
-    <CopyButtonWrapper data-cy="copy-button" data={data}>
+    <CopyButtonWrapper data-cy="copy-button" data={data} onCopyClick={onCopyClick}>
       {renderInner}
     </CopyButtonWrapper>
   );

package/src/LastUpdated/LastUpdated.tsx

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

package/src/Layout/PageLayout.tsx

@@ -1,14 +1,11 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { PropsWithChildren, ReactNode } from 'react';
 
 interface PageLayoutProps {
-  sidebar?: React.ReactNode;
+  sidebar?: ReactNode;
 }
 
-export function PageLayout({
-  sidebar,
-  children,
-}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
+export function PageLayout({ sidebar, children }: 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: React.ReactNode;
-  footer: React.ReactNode;
+  navbar: ReactNode;
+  footer: ReactNode;
 }
 
 const Wrapper = styled.div``;
@@ -12,7 +12,7 @@ export function RootLayout({
   navbar,
   footer,
   children,
-}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
+}: 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,
-}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+}: PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
     <Wrapper type={type} data-component-name="Markdown/Admonition">
       <AlertIcon type={type} />

package/src/Markdown/CodeSample/CodeSample.tsx

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

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 }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+export function Details({ summary, children }: PropsWithChildren<DetailsProps>): JSX.Element {
   return (
     <StyledDetails>
       <summary>{summary}</summary>

package/src/Markdown/Heading.tsx

@@ -1,4 +1,5 @@
-import React, { createElement, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import { 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: React.ReactNode;
-  markdownWrapper: React.ReactNode;
+  tableOfContent: ReactNode;
+  markdownWrapper: ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
   editPage?: {

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

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

package/src/Markdown/Sup.tsx

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

package/src/Markdown/Tabs/Tab.tsx

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

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
-import React, { useState, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';
@@ -38,7 +39,6 @@ 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,4 +1,3 @@
-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 React, { useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/MobileNavbarMenu.tsx

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

package/src/Navbar/Navbar.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import styled from 'styled-components';
+import type { ReactNode } from 'react';
+
+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';
@@ -12,9 +13,9 @@ import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
-  logo: React.ReactNode;
-  search: React.ReactNode;
-  profile?: React.ReactNode;
+  logo: ReactNode;
+  search: ReactNode;
+  profile?: ReactNode;
 }
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {

package/src/Navbar/NavbarDropdown.tsx

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

package/src/Navbar/NavbarItem.tsx

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

package/src/Navbar/NavbarMenu.tsx

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

package/src/NavbarLogo/NavbarLogo.tsx

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

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

package/src/PageNavigation/PageNavigation.tsx

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

package/src/PageNavigation/PreviousPageLink.tsx

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

package/src/Panel/Panel.ts

@@ -14,8 +14,8 @@ export const Panel = styled(PanelComponent).attrs(({ className }) => ({
   font-family: var(--panel-font-family-local);
   font-size: var(--panel-font-size-local);
   font-weight: var(--panel-font-weight-local);
+  border-radius: var(--panel-border-radius-local);
   border: var(--panel-border-local);
-  border-radius: var(--panel-border-radius);
 
   ${PanelHeader} + ${PanelBody} {
     border-top-left-radius: 0;
@@ -24,7 +24,7 @@ export const Panel = styled(PanelComponent).attrs(({ className }) => ({
 
   ${PanelHeader} {
     ${ShelfIcon} {
-      fill: var(--panel-chevron-icon-color); // ?????
+      fill: var(--panel-chevron-icon-color);
     }
   }