@redocly/theme 0.4.7 → 0.4.8

package/TableOfContent/TableOfContent.js

@@ -3,35 +3,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableOfContent = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("./utils");
 var useFullHeight_1 = require("../hooks/useFullHeight");
@@ -56,21 +45,18 @@ function TableOfContent(props) {
     if (!(headings === null || headings === void 0 ? void 0 : headings.length)) {
         return null;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
-        react_1.default.createElement(TableOfContentItems, { ref: sidebar },
-            react_1.default.createElement(TocHeader, null, ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page'),
-            displayedHeadings.map(function (heading, idx) {
-                // TODO: not sure about !heading
-                if (!heading) {
-                    return null;
-                }
-                var href = '#' + heading.id;
-                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }));
-            }))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headings && ((0, jsx_runtime_1.jsx)(TableOfContentMenu, __assign({ "data-component-name": "TableOfContent/TableOfContent" }, { children: (0, jsx_runtime_1.jsxs)(TableOfContentItems, __assign({ ref: sidebar }, { children: [(0, jsx_runtime_1.jsx)(TocHeader, { children: ((_a = toc === null || toc === void 0 ? void 0 : toc.header) === null || _a === void 0 ? void 0 : _a.label) || 'On this page' }), displayedHeadings.map(function (heading, idx) {
+                        // TODO: not sure about !heading
+                        if (!heading) {
+                            return null;
+                        }
+                        var href = '#' + heading.id;
+                        return ((0, jsx_runtime_1.jsx)(MenuItem, { href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": "toc-".concat(heading.value) }, href + idx));
+                    })] })) }))) }));
 }
 exports.TableOfContent = TableOfContent;
 var TocHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"], ["\n  font-family: var(--toc-heading-font-family);\n  font-size: var(--toc-heading-font-size);\n  font-weight: var(--toc-heading-font-weight);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  color: var(--toc-heading-text-color);\n  text-transform: uppercase;\n"])));
-var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  font-family: var(--toc-item-font-family);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family);\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
+var MenuItem = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family, var(--toc-item-font-family));\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: block;\n  color: var(--toc-item-text-color);\n  background-color: var(--toc-item-background-color);\n  cursor: pointer;\n  font-size: var(--toc-item-font-size);\n  padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);\n  padding-left: calc(var(--toc-item-nested-offset) * ", ");\n  transition: background-color 0.3s, color 0.3s;\n  text-decoration: none;\n  word-break: break-word;\n  font-family: var(--heading-font-family, var(--toc-item-font-family));\n\n  :hover,\n  &.active {\n    color: var(--toc-item-active-text-color);\n    background-color: var(--toc-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (_a) {
     var depth = _a.depth;
     return depth;
 });

package/TableOfContent/utils.d.ts

@@ -1,4 +1,4 @@
-import { MdHeading } from '@theme/types/portal';
+import type { MdHeading } from '@theme/types/portal';
 export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocMaxDepth: number): Array<MdHeading | null>;
 export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
 export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;

package/TableOfContent/utils.js

@@ -23,10 +23,7 @@ function getDisplayedHeadings(headings, tocMaxDepth) {
         if (idx === 0 && heading.depth === 1) {
             return false;
         }
-        if (heading.depth && heading.depth > tocMaxDepth) {
-            return false;
-        }
-        return true;
+        return !(heading.depth && heading.depth > tocMaxDepth);
     });
 }
 exports.getDisplayedHeadings = getDisplayedHeadings;

package/Tooltip/Tooltip.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 export interface TooltipProps {
     tip: string | ReactNode;
@@ -10,4 +9,4 @@ export interface TooltipProps {
     dataTestId?: string;
 }
 export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
-export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;
+export declare const Tooltip: import("react").NamedExoticComponent<PropsWithChildren<TooltipProps>>;

package/Tooltip/Tooltip.js

@@ -39,7 +39,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = exports.TooltipComponent = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../hooks");
 function TooltipComponent(_a) {
@@ -63,9 +64,7 @@ function TooltipComponent(_a) {
         onMouseLeave: handleClose,
         onClick: handleClose,
     };
-    return (react_1.default.createElement(TooltipWrapper, __assign({ ref: ref }, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
-        children,
-        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
+    return ((0, jsx_runtime_1.jsxs)(TooltipWrapper, __assign({ ref: ref }, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }, { children: [children, isOpened && ((0, jsx_runtime_1.jsx)(TooltipBody, __assign({ "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, { children: tip })))] })));
 }
 exports.TooltipComponent = TooltipComponent;
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);

package/hooks/useFullHeight.d.ts

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare function useFullHeight(element: MutableRefObject<HTMLElement | null>): void;

package/hooks/useMobileMenu.d.ts

@@ -1,2 +1,2 @@
-import { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 export declare function useMobileMenu(initialState?: boolean): [boolean, Dispatch<SetStateAction<boolean>>];

package/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare function useOutsideClick(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void): void;

package/icons/AlertIcon/AlertIcon.js

@@ -3,40 +3,37 @@ 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.AlertIcon = 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 type = _a.type, className = _a.className;
     switch (type) {
         case 'warning':
-            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
-                react_1.default.createElement("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }),
-                react_1.default.createElement("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }),
-                react_1.default.createElement("circle", { cx: "250.3", cy: "342.1", r: "25.3" })));
+            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "342.1", r: "25.3" })] })));
         case 'success':
-            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
-                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
-                react_1.default.createElement("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }),
-                react_1.default.createElement("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })));
+            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" })] })));
         case 'danger':
-            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
-                react_1.default.createElement("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }),
-                react_1.default.createElement("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }),
-                react_1.default.createElement("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })));
+            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" })] })));
         case 'attention':
-            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
-                react_1.default.createElement("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }),
-                react_1.default.createElement("circle", { cx: "250.3", cy: "339.2", r: "22.5" })));
+            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "339.2", r: "22.5" })] })));
         default:
-            return (react_1.default.createElement("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" },
-                react_1.default.createElement("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }),
-                react_1.default.createElement("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }),
-                react_1.default.createElement("circle", { cx: "250.3", cy: "163.7", r: "25.3" })));
+            return ((0, jsx_runtime_1.jsxs)("svg", __assign({ className: className, xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "Layer_1", x: "0", y: "0", viewBox: "0 0 500.6 500.6", enableBackground: "new 0 0 500.6 500.6" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" }), (0, jsx_runtime_1.jsx)("path", { d: "M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "250.3", cy: "163.7", r: "25.3" })] })));
     }
 }
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({

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.7",
+  "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">