@redocly/theme 0.54.0-next.3 → 0.54.0-next.5

package/lib/components/Admonition/Admonition.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 type AdmonitionTypeProps = {
     type: 'warning' | 'success' | 'danger' | 'info';
 };

package/lib/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren, JSX } from 'react';
 export type BadgeProps = PropsWithChildren<{
     deprecated?: boolean;
     color?: string;

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 type BreadcrumbProps = {
     label: string;
     link?: string;

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export declare function Breadcrumbs(props: {
     className?: string;
 }): JSX.Element | null;

package/lib/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 export type ButtonSize = 'small' | 'medium' | 'large' | string;
 export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link' | 'ghost' | string;
 type ButtonTone = 'default' | 'danger';

package/lib/components/Buttons/EditPageButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type EditPageButtonProps = {
     to: string;
 };

package/lib/components/Buttons/EmailButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type EmailButtonProps = {
     data: string;
     dataTestId?: string;

package/lib/components/Buttons/NewTabButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type NewTabButtonProps = {
     data: string;
     dataTestId?: string;

package/lib/components/CatalogLegacy/CatalogLegacy.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { CatalogConfig } from '../../config';
 export type CatalogLegacyProps = {
     pageProps: {

package/lib/components/CatalogLegacy/CatalogLegacyActions.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedFilter } from '../../core/types';
 export type CatalogLegacyActionsProps = {
     onOpenFilter: () => void;

package/lib/components/CatalogLegacy/CatalogLegacyCard.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { CatalogItem } from '../../core/types';
 export type CatalogLegacyCardProps = {
     item: CatalogItem;

package/lib/components/CatalogLegacy/CatalogLegacyHighlight.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';
 export declare const HighlightContext: React.Context<string[]>;
 export type CatalogLegacyHighlightProps = React.PropsWithChildren;
 export declare function CatalogLegacyHighlight(props: CatalogLegacyHighlightProps): JSX.Element | null;

package/lib/components/CatalogLegacy/CatalogLegacyInfoBlock.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type CatalogLegacyInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBlockControls';
 export type CodeBlockProps = {
     lang?: string;

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 export type CodeBlockContainerProps = PropsWithChildren<{
     hideCodeColors?: boolean;
     maxHeight?: string;

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -19,8 +19,8 @@ const Button_1 = require("../../components/Button/Button");
 function CodeBlockControls({ children, className, title, controls, tabs, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls || {
         copy: null,
@@ -34,17 +34,24 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.report.tooltipText", placement: "top" },
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
             expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
             collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.copy.tooltipText", placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.copy.tooltipText", placement: "top" },
                 react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
-                        var _a, _b;
-                        (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
-                        (_b = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'code_snippet_copied', {});
+                        var _a;
+                        // If there already is a click handler, events should be handled there, cause they pass additional data
+                        if (copy === null || copy === void 0 ? void 0 : copy.onClick) {
+                            (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
+                        }
+                        else {
+                            otelTelemetry.send('openapi_docs.copy_code_snippet.clicked', {
+                                type: 'code',
+                            });
+                        }
                     } }))) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
     tabs: FileTabs;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -47,7 +47,9 @@ function CodeBlockTabs({ tabs }) {
     }, [tabs.activeTabName]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.files.map(({ name }, i) => (react_1.default.createElement(Tab, { ref: (el) => (tabRefs.current[i] = el), "data-name": name, active: name === tabs.activeTabName, key: name, onClick: () => tabs.handleTabSwitch(name) },
+            react_1.default.createElement(Tabs, null, tabs.files.map(({ name }, i) => (react_1.default.createElement(Tab, { ref: (el) => {
+                    tabRefs.current[i] = el;
+                }, "data-name": name, active: name === tabs.activeTabName, key: name, onClick: () => tabs.handleTabSwitch(name) },
                 react_1.default.createElement(DocumentBlankIcon_1.DocumentBlankIcon, null),
                 name))))),
         showControls && (react_1.default.createElement(Controls, null,

package/lib/components/ColorModeSwitcher/ColorModeIcon.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type ColorModeIconProps = {
     mode?: 'dark' | 'light' | string;
     className?: string;

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type ColorModeSwitcherProps = {
     className?: string;
 };

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, JSX } from 'react';
 export type DropdownProps = PropsWithChildren<{
     trigger: React.ReactNode;
     triggerEvent?: 'click' | 'hover';

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
     className?: string;

package/lib/components/Dropdown/DropdownMenuItem.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode, PropsWithChildren } from 'react';
+import type { CSSProperties, ReactNode, PropsWithChildren, JSX } from 'react';
 import type { LinkProps } from '../../components/Link/Link';
 export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'external'>> & {
     prefix?: ReactNode;

package/lib/components/Feedback/Comment.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type CommentProps = {
     onSubmit: (value: {
         comment: string;

package/lib/components/Feedback/Feedback.js

@@ -46,9 +46,9 @@ const feedbackComponents = {
 };
 function Feedback(props) {
     var _a;
-    const { useSubmitFeedback, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useSubmitFeedback, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { submitFeedback } = useSubmitFeedback();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), { path: props === null || props === void 0 ? void 0 : props.path, type: (props === null || props === void 0 ? void 0 : props.type) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.type) || constants_1.DEFAULT_FEEDBACK_TYPE, settings: (props === null || props === void 0 ? void 0 : props.settings) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.settings) || {}, hide: (_a = props.hide) !== null && _a !== void 0 ? _a : themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.hide });
@@ -64,7 +64,7 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.send('feedback_sent', { type });
+                    otelTelemetry.send('feedback.sent', { type });
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Feedback/Mood.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { OptionalEmailSettings } from '@redocly/config';
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {

package/lib/components/Feedback/Reasons.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type ReasonsProps = {
     onChange: (value: string[]) => void;
     settings: {

package/lib/components/Feedback/ReportDialog.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { SubmitFeedbackParams } from '../../core/types';
 export type ReportDialogProps = {
     location: string;

package/lib/components/Feedback/Scale.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { OptionalEmailSettings } from '@redocly/config';
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {

package/lib/components/Feedback/Scale.js

@@ -120,7 +120,7 @@ function Scale({ settings, onSubmit, className }) {
                     } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
+                React.createElement(Button_1.Button, { "data-translation-key": "feedback.submit", type: "submit", variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
 }
 const ScaleWrapper = styled_components_1.default.div `
   font-family: var(--feedback-font-family);

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Sentiment.js

@@ -129,10 +129,10 @@ function Sentiment({ settings, onSubmit, className }) {
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
                             setScore(1);
-                        }, "aria-label": "Like", icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
+                        }, "aria-label": translate('feedback.sentiment.thumbUp', 'Like'), icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
                     React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
                             setScore(-1);
-                        }, "aria-label": "Dislike", icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
+                        }, "aria-label": translate('feedback.sentiment.thumbDown', 'Dislike'), icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: renderReasonsLabel(score),
@@ -151,8 +151,8 @@ function Sentiment({ settings, onSubmit, className }) {
                         }
                     } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
+                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
 }
 const SentimentWrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);

package/lib/components/Feedback/Stars.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type StarsProps = {
     max?: number;
     name?: string;

package/lib/components/Filter/Filter.d.ts

@@ -1,2 +1,3 @@
+import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
 export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;

package/lib/components/Filter/FilterCheckboxes.d.ts

@@ -1,2 +1,3 @@
+import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
 export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedFilter } from '../../core/types';
 import type { RedoclyConfig } from '../../config';
 export type FilterContentProps = {

package/lib/components/Filter/FilterDateRange.d.ts

@@ -1,2 +1,3 @@
+import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
 export declare function FilterDateRange({ filter }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterInput.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;

package/lib/components/Filter/FilterOption.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 export type FilterOptionProps = PropsWithChildren<{
     role?: string;
     key?: string;

package/lib/components/Filter/FilterOptionLabel.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, JSX } from 'react';
 export type FilterOptionLabelProps = PropsWithChildren<{
     className?: string;
 }>;

package/lib/components/Filter/FilterOptions.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 export type FilterOptionsProps = PropsWithChildren<{
     className?: string;
 }>;

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedFilter } from '../../core/types';
 import type { RedoclyConfig } from '../../config';
 export type FilterPopoverProps = {

package/lib/components/Filter/FilterPopover.js

@@ -14,7 +14,7 @@ function FilterPopover({ onClose, filters, filterValuesCasing, filterTerm, setFi
     const { translate } = useTranslate();
     return (react_1.default.createElement(FilterPopoverWrapper, { "data-component-name": "Filter/FilterPopover" },
         react_1.default.createElement(FilterPopoverHeader, null,
-            react_1.default.createElement(FilterPopoverHeaderLabel, { "data-translation-key": "catalog.filters.add" }, translate('catalog.filters.add', 'Add Filter')),
+            react_1.default.createElement(FilterPopoverHeaderLabel, { "data-translation-key": "catalog.filters.add" }, translate('catalog.filters.add', 'Add filter')),
             react_1.default.createElement(FilterPopoverHeaderButton, { onClick: onClose }, translate('catalog.filters.done', 'Done'))),
         react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing })));
 }

package/lib/components/Filter/FilterSelect.d.ts

@@ -1,2 +1,3 @@
+import type { JSX } from 'react';
 import type { FilterProps } from '../../core/types';
 export declare function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterTitle.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 export type FilterTitleProps = PropsWithChildren<{
     className?: string;
 }>;

package/lib/components/Footer/Footer.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type FooterProps = {
     className?: string;
 };

package/lib/components/Footer/FooterColumn.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItem } from '@redocly/config';
 export type FooterColumnProps = {
     column: ResolvedNavItem;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type FooterCopyrightProps = {
     copyrightText: string;
     className?: string;

package/lib/components/Footer/FooterItem.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItem } from '@redocly/config';
 export type FooterItemProps = {
     item: ResolvedNavItem;

package/lib/components/Image/Image.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 export type ImageProps = {
     src?: string;
     srcSet?: string;

package/lib/components/LanguagePicker/LanguagePicker.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type LanguagePickerProps = {
     onChangeLanguage: (newLang: string) => void;
     onlyIcon?: boolean;

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 type Formats = 'timeago' | 'iso' | 'short' | 'long';
 export type LastUpdatedProps = {
     lastModified: Date;

package/lib/components/Link/Link.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { JSX } from 'react';
 export type LinkProps = {
     to: string;
     target?: '_self' | '_blank';

package/lib/components/Link/Link.js

@@ -46,8 +46,8 @@ function Link(props) {
         return React.createElement(LinkComponent, Object.assign({}, props));
     }
     else {
-        const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4, innerRef } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external", "innerRef"]);
-        // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+        const { active: _, httpVerb: _1, hasActiveSubItem: _2, routeSlug: _3, external: _4, languageInsensitive: _5, iconPosition: _6, innerRef } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem", "routeSlug", "external", "languageInsensitive", "iconPosition", "innerRef"]);
+        // We omit properties to avoid "Warning: Received value for a non-boolean attribute"
         return React.createElement(react_router_dom_1.Link, Object.assign({ ref: innerRef }, filteredProps));
     }
 }

package/lib/components/Loaders/Loading.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type LoadingProps = {
     color: string;
 };

package/lib/components/Loaders/SpinnerLoader.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type LoadingProps = {
     color: string;
     size: string;

package/lib/components/Logo/Logo.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { LogoConfig } from '../../core/types';
 export type LogoProps = {
     config: LogoConfig;

package/lib/components/Menu/Menu.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { DrilldownMenuItemDetails, ItemState } from '../../core/types';
 export type MenuListProps = {
     items: ItemState[];

package/lib/components/Menu/MenuContainer.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 import type { MenuItemsAnimation } from '../../core/types';
 export type MenuContainerProps = PropsWithChildren<{
     growContent?: boolean;

package/lib/components/Menu/MenuItem.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import type { JSX } from 'react';
 import type { MenuItemProps } from '../../core/types';
 export declare function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -49,6 +49,7 @@ function MenuItem(props) {
         nestedMenuRef }));
     const telemetry = useTelemetry();
     const isDrilldown = type === constants_1.MenuItemType.DrillDown;
+    const isSeparator = type === constants_1.MenuItemType.Separator;
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
@@ -62,8 +63,8 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
-        react_1.default.createElement(ChevronWrapper, null, chevron),
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
+        hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
@@ -158,9 +159,9 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
   padding: var(--menu-item-label-padding);
   gap: var(--menu-item-label-gap);
 
-  padding-left: ${({ withChevron, depth }) => `calc(
+  padding-left: ${({ withChevron, depth, isSeparator }) => `calc(
       var(--menu-item-padding-horizontal) +
-      ${!withChevron ? 'var(--menu-item-label-chevron-offset)' : '0px'} +
+      ${!withChevron ? 'var(--menu-item-label-chevron-offset) + ' + (isSeparator ? 'var(--menu-item-separator-offest)' : '0px') : '0px'} +
       ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
     )`};
 

package/lib/components/Menu/MenuMobile.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type MobileMenuProps = {
     className?: string;
     hideUserProfile?: boolean;

package/lib/components/Menu/variables.js

@@ -53,7 +53,7 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-label-margin-vertical: 0;
   --menu-item-label-margin: var(--menu-item-label-margin-vertical) var(--menu-item-label-margin-horizontal);
   --menu-item-label-padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
-  --menu-item-label-gap: var(--spacing-xs);
+  --menu-item-label-gap: var(--spacing-xxs);
   --menu-item-label-border-radius: 6px;
   --menu-item-label-chevron-size: 12px;
   --menu-item-label-chevron-offset: calc(var(--menu-item-label-gap) + var(--menu-item-label-chevron-size));
@@ -81,6 +81,7 @@ exports.menu = (0, styled_components_1.css) `
    */
   --menu-item-separator-line-height: 1px;
   --menu-item-separator-line-bg-color: var(--border-color-secondary);
+  --menu-item-separator-offest: var(--spacing-xxs);
 
   /**
    * @tokens Menu back button

package/lib/components/Navbar/Navbar.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type NavbarProps = {
     className?: string;
 };

package/lib/components/Navbar/NavbarItem.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItem } from '@redocly/config';
 export type NavbarItemProps = {
     navItem: ResolvedNavItem;

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 export type NavbarMenuProps = {
     menuItems: ResolvedConfigLinks;

package/lib/components/PageNavigation/NextButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type NextPageType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type PageNavigationType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type PreviousPageType = {
     prevPage?: ResolvedNavItemWithLink | null;

package/lib/components/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode, JSX } from 'react';
 import type { PanelHeaderProps } from '../../components/Panel/PanelHeader';
 export type PanelProps = {
     expanded?: boolean;