@redocly/theme 0.82.2-rc.2 → 0.82.4-rc.1

package/lib/components/Dropdown/variables.js

@@ -17,7 +17,6 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
   --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
-  --dropdown-menu-color-disabled: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
   --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
 
@@ -30,11 +29,16 @@ exports.dropdown = (0, styled_components_1.css) `
   --dropdown-menu-item-bg-color: transparent;
   --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
   --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
+  --dropdown-menu-item-bg-color-disabled: var(--dropdown-menu-item-bg-color); // @presenter Color
   --dropdown-menu-item-separator-border-color: var(--border-color-primary); // @presenter Color
   --dropdown-menu-item-separator-font-size: var(--font-size-sm); // @presenter FontSize
   --dropdown-menu-item-separator-line-height: var(--line-height-sm); // @presenter LineHeight
   --dropdown-menu-item-separator-text-color: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-item-justify-content: flex-start;
+  --dropdown-menu-item-color: var(--dropdown-menu-text-color); // @presenter Color
+  --dropdown-menu-item-color-hover: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-active: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-disabled: var(--text-color-disabled); // @presenter Color
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 

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

@@ -9,6 +9,7 @@ export type CommentProps = {
         submitText?: string;
     };
     standAlone?: boolean;
+    isDialog?: boolean;
     className?: string;
 };
-export declare function Comment({ settings, onSubmit, onCancel, className, standAlone, }: CommentProps): JSX.Element;
+export declare function Comment({ settings, onSubmit, onCancel, className, standAlone, isDialog, }: CommentProps): JSX.Element;

package/lib/components/Feedback/Comment.js

@@ -29,7 +29,7 @@ const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
 const Button_1 = require("../../components/Button/Button");
-function Comment({ settings, onSubmit, onCancel, className, standAlone = true, }) {
+function Comment({ settings, onSubmit, onCancel, className, standAlone = true, isDialog = false, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { label, submitText } = settings || {};
@@ -63,7 +63,7 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, }
         react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         standAlone && (react_1.default.createElement(ButtonsContainer, null,
             onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
-            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "primary", size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: isDialog ? 'primary' : 'secondary', size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
 }
 exports.Comment = Comment;
 const StyledFormMandatoryFields = styled_components_1.default.div `
@@ -82,7 +82,7 @@ const CommentWrapper = styled_components_1.default.div `
   flex-direction: column;
   justify-content: space-between;
   border-radius: var(--border-radius-lg);
-  background: var(--feedback-background-color);
+  background: var(--feedback-bg-color);
   gap: var(--spacing-xxs);
 
   max-width: var(--feedback-report-dialog-max-width);

package/lib/components/Feedback/Mood.js

@@ -102,13 +102,13 @@ function Mood({ settings, onSubmit, className }) {
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(React.Fragment, null,
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.DISSATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                                 setScore(MOOD_STATES.DISSATISFIED);
                             }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.NEUTRAL, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.NEUTRAL);
                             }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.SATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.SATISFIED);
                             }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) })))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -120,7 +120,7 @@ function Mood({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitMoodForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Mood = Mood;
 const remapScore = (score) => {

package/lib/components/Feedback/Rating.js

@@ -88,7 +88,7 @@ function Rating({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Rating = Rating;
 const StyledForm = styled_components_1.default.form `

package/lib/components/Feedback/ReportDialog.js

@@ -36,7 +36,7 @@ function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback,
                     });
                     telemetry.send('code_snippet_reported', {});
                     onSubmit();
-                }), onCancel: onCancel }))));
+                }), isDialog: true, onCancel: onCancel }))));
 }
 exports.ReportDialog = ReportDialog;
 const ReportDialogWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Scale.js

@@ -97,7 +97,7 @@ function Scale({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "primary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
+                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
 }
 exports.Scale = Scale;
 const ScaleWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -82,10 +82,10 @@ function Sentiment({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Button_1.Button, { type: "button", size: "medium", disabled: score === 1, onClick: () => {
+                    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) }),
-                    React.createElement(Button_1.Button, { size: "medium", type: "button", disabled: score === -1, onClick: () => {
+                    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) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -97,7 +97,7 @@ function Sentiment({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             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: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Sentiment = Sentiment;
 const SentimentWrapper = styled_components_1.default.div `

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
-type FilterContentProps = {
+export type FilterContentProps = {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
     filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 };
 export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }: FilterContentProps): JSX.Element;
-export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/lib/components/Filter/FilterContent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterItems = exports.FilterContent = void 0;
+exports.FilterContent = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FilterInput_1 = require("../../components/Filter/FilterInput");
@@ -30,9 +30,9 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
     return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "theme.catalog.filters.title" }, translate('theme.catalog.filters.title', 'Filters')),
-            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
         react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
-        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
+        react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = styled_components_1.default.div `
@@ -52,7 +52,7 @@ const FiltersTitle = styled_components_1.default.div `
   font-weight: var(--filter-content-title-font-weight);
   line-height: var(--filter-content-title-line-height);
 `;
-exports.FilterItems = styled_components_1.default.div `
+const FilterItems = styled_components_1.default.div `
   padding: var(--filter-content-items-padding);
   height: 100%;
   display: flex;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type FilterInputProps = {
+export type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;
 };
 export declare function FilterInput(props: FilterInputProps): JSX.Element;
-export {};

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

@@ -1,4 +1,8 @@
-export declare const FilterOption: import("styled-components").StyledComponent<"label", any, {
-    'data-testid': string;
-    'data-component-name': string;
-}, "data-component-name" | "data-testid">;
+import { type PropsWithChildren } from 'react';
+export type FilterOptionProps = PropsWithChildren<{
+    role?: string;
+    key?: string;
+    onClick?: () => void;
+    className?: string;
+}>;
+export declare function FilterOption(props: FilterOptionProps): JSX.Element;

package/lib/components/Filter/FilterOption.js

@@ -4,11 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterOption = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FilterOption = styled_components_1.default.label.attrs({
-    'data-testid': 'Filter/FilterOption',
-    'data-component-name': 'Filter/FilterOption',
-}) `
+function FilterOption(props) {
+    return (react_1.default.createElement(FilterOptionComponent, Object.assign({}, props, { "data-component-name": "Filter/FilterOption", "data-testid": "Filter/FilterOption" })));
+}
+exports.FilterOption = FilterOption;
+const FilterOptionComponent = styled_components_1.default.label `
   display: flex;
   gap: var(--filter-option-gap);
   align-items: center;
@@ -18,5 +20,6 @@ exports.FilterOption = styled_components_1.default.label.attrs({
   input {
     cursor: pointer;
   }
+  margin: var(--filter-option-margin);
 `;
 //# sourceMappingURL=FilterOption.js.map

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

@@ -1,3 +1,5 @@
-export declare const FilterOptionLabel: import("styled-components").StyledComponent<"label", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+import { type PropsWithChildren } from 'react';
+export type FilterOptionLabelProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function FilterOptionLabel(props: FilterOptionLabelProps): JSX.Element;

package/lib/components/Filter/FilterOptionLabel.js

@@ -4,10 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterOptionLabel = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FilterOptionLabel = styled_components_1.default.label.attrs({
-    'data-component-name': 'Filter/FilterOptionLabel',
-}) `
+function FilterOptionLabel(props) {
+    return react_1.default.createElement(FilterOptionLabelComponent, Object.assign({}, props, { "data-component-name": "Filter/FilterOptionLabel" }));
+}
+exports.FilterOptionLabel = FilterOptionLabel;
+const FilterOptionLabelComponent = styled_components_1.default.label `
   cursor: pointer;
   font-size: var(--filter-option-label-font-size);
   color: var(--filter-option-label-color);

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

@@ -1,3 +1,5 @@
-export declare const FilterOptions: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+import { type PropsWithChildren } from 'react';
+export type FilterOptionsProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function FilterOptions(props: FilterOptionsProps): JSX.Element;

package/lib/components/Filter/FilterOptions.js

@@ -4,10 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterOptions = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FilterOptions = styled_components_1.default.div.attrs({
-    'data-component-name': 'Filter/FilterOptions',
-}) `
+function FilterOptions(props) {
+    return react_1.default.createElement(FilterOptionsComponent, Object.assign({}, props, { "data-component-name": "Filter/FilterOptions" }));
+}
+exports.FilterOptions = FilterOptions;
+const FilterOptionsComponent = styled_components_1.default.div `
   padding: var(--filter-options-padding-vertical) var(--filter-options-padding-horizontal);
   display: flex;
   flex-direction: column;

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
-type FilterPopoverProps = {
+export type FilterPopoverProps = {
     onClose: () => void;
     filters: ResolvedFilter[];
     filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 };
 export declare function FilterPopover({ onClose, filters, filterValuesCasing, }: FilterPopoverProps): JSX.Element;
-export {};

package/lib/components/Filter/FilterSelect.js

@@ -55,9 +55,6 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
   :hover {
     border-color: var(--filter-select-border-color-hover);
   }
-
-  ${FilterOption_1.FilterOption} {
-    margin: var(--filter-select-option-margin);
-  }
+  --filter-option-margin: var(--filter-select-option-margin);
 `;
 //# sourceMappingURL=FilterSelect.js.map

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

@@ -1,3 +1,5 @@
-export declare const FilterTitle: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+import { type PropsWithChildren } from 'react';
+export type FilterTitleProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function FilterTitle(props: FilterTitleProps): JSX.Element;

package/lib/components/Filter/FilterTitle.js

@@ -4,10 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterTitle = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FilterTitle = styled_components_1.default.div.attrs({
-    'data-component-name': 'Filter/FilterTitle',
-}) `
+function FilterTitle(props) {
+    return react_1.default.createElement(FilterTitleComponent, Object.assign({}, props, { "data-component-name": "Filter/FilterTitle" }));
+}
+exports.FilterTitle = FilterTitle;
+const FilterTitleComponent = styled_components_1.default.div `
   font-weight: var(--filter-title-font-weight);
   font-size: var(--filter-title-font-size);
   line-height: var(--filter-title-line-height);

package/lib/components/Filter/variables.js

@@ -19,7 +19,8 @@ exports.filter = (0, styled_components_1.css) `
   --filter-options-gap: var(--spacing-sm);
 
   --filter-option-font-size: var(--font-size-base);
-  --filter-option-gap: var(--spacing-xs);)
+  --filter-option-gap: var(--spacing-xs);
+  --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
   --filter-option-label-color: var(--text-color-secondary);

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type FooterProps = {
+export type FooterProps = {
     className?: string;
 };
 export declare function Footer({ className }: FooterProps): JSX.Element | null;
-export {};

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
-type FooterColumnProps = {
+export type FooterColumnProps = {
     column: ResolvedNavItem;
     className?: string;
 };
 export declare function FooterColumn({ column, className }: FooterColumnProps): JSX.Element;
-export {};

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type FooterCopyrightProps = {
+export type FooterCopyrightProps = {
     copyrightText: string;
     className?: string;
 };
 export declare function FooterCopyright({ copyrightText, className, }: FooterCopyrightProps): JSX.Element | null;
-export {};

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
-type FooterItemProps = {
+export type FooterItemProps = {
     item: ResolvedNavItem;
     iconsOnly?: boolean;
 };
 export declare function FooterItem({ item, iconsOnly }: FooterItemProps): JSX.Element | null;
-export {};

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

@@ -1,4 +1,3 @@
-import { Logo } from '../../components/Logo/Logo';
-export declare const FooterLogo: import("styled-components").StyledComponent<typeof Logo, any, {
-    'data-component-name': string;
-}, "data-component-name">;
+import React from 'react';
+import type { LogoProps } from '../../components/Logo/Logo';
+export declare function FooterLogo(props: LogoProps): React.JSX.Element;

package/lib/components/Footer/FooterLogo.js

@@ -4,9 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterLogo = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Logo_1 = require("../../components/Logo/Logo");
-exports.FooterLogo = (0, styled_components_1.default)(Logo_1.Logo).attrs({ 'data-component-name': 'Footer/FooterLogo' }) `
+function FooterLogo(props) {
+    return react_1.default.createElement(FooterLogoComponent, Object.assign({}, props, { "data-component-name": "Footer/FooterLogo" }));
+}
+exports.FooterLogo = FooterLogo;
+const FooterLogoComponent = (0, styled_components_1.default)(Logo_1.Logo) `
   --logo-height: var(--footer-logo-height);
   --logo-width: var(--footer-logo-width);
   --logo-max-width: var(--footer-logo-max-width);

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 export type ImageProps = {
     src?: string;
     srcSet?: string;
     alt?: string;
     className?: string;
 };
-export declare function Image(props: ImageProps): React.JSX.Element;
+export declare function Image(props: ImageProps): JSX.Element;

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export interface JsonProps {
+export type JsonProps = {
     data: any;
     className?: string;
     expandLevel: number;
     startLineNumber?: number;
     onCopyClick?: () => void;
-}
+};
 export declare const JsonViewer: React.NamedExoticComponent<JsonProps>;
 export declare const JsonViewerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-type LanguagePickerProps = {
+export type LanguagePickerProps = {
     onChangeLanguage: (newLang: string) => void;
     onlyIcon?: boolean;
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
 };
 export declare function LanguagePicker(props: LanguagePickerProps): JSX.Element | null;
-export {};

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -46,7 +46,7 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   }
 
   --dropdown-menu-item-justify-content: space-between;
-
+  --dropdown-menu-item-gap: var(--spacing-xxs);
   --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
   --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
   --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
@@ -57,7 +57,6 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --dropdown-menu-padding: var(--language-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--language-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
   --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
@@ -71,9 +70,13 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--language-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --language-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--language-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--language-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--language-picker-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=LanguagePicker.js.map

package/lib/components/LanguagePicker/variables.js

@@ -17,7 +17,6 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --language-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --language-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --language-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --language-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -28,8 +27,12 @@ exports.languagePicker = (0, styled_components_1.css) `
   --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --language-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --language-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --language-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --language-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --language-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --language-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

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

@@ -5,7 +5,7 @@ declare const FORMATS: {
     short: (date: Date, locale: string) => string;
     long: (date: Date, locale: string) => string;
 };
-type LastUpdatedProps = {
+export type LastUpdatedProps = {
     lastModified: Date;
     format?: keyof typeof FORMATS;
     locale?: string;

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

@@ -10,4 +10,4 @@ export type LinkProps = {
     onClick?: () => void;
     [key: string]: unknown;
 };
-export declare function Link(props: React.PropsWithChildren<LinkProps>): React.JSX.Element;
+export declare function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface LoadingProps {
+export type LoadingProps = {
     color: string;
-}
+};
 export declare function Loading({ color }: LoadingProps): JSX.Element;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { LogoConfig } from '../../core/types';
-type LogoProps = {
+export type LogoProps = {
     config: LogoConfig;
     className?: string;
 };
 export declare function Logo({ config, className, ...otherProps }: LogoProps): JSX.Element | null;
-export {};

package/lib/components/Markdown/Markdown.d.ts

@@ -1,5 +1,17 @@
+import type { PropsWithChildren } from 'react';
+export type MarkdownProps = PropsWithChildren<{
+    className?: string;
+    compact?: boolean;
+    inline?: boolean;
+    base?: boolean;
+    ref?: (node: HTMLDivElement) => void;
+}>;
 export declare const Markdown: import("styled-components").StyledComponent<"main", any, {
+    className?: string | undefined;
     compact?: boolean | undefined;
     inline?: boolean | undefined;
     base?: boolean | undefined;
+    ref?: ((node: HTMLDivElement) => void) | undefined;
+} & {
+    children?: import("react").ReactNode;
 }, never>;