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

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

@@ -1,5 +1,8 @@
-export declare const Badge: import("styled-components").StyledComponent<"span", any, {
-    'data-component-name': string;
-} & {
-    deprecated?: boolean | undefined;
-}, "data-component-name">;
+import { type PropsWithChildren } from 'react';
+export type BadgeProps = PropsWithChildren<{
+    deprecated?: boolean;
+    color?: string;
+    key?: string;
+    className?: string;
+}>;
+export declare function Badge(props: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -22,12 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-exports.Badge = styled_components_1.default.span.attrs({
-    'data-component-name': 'Badge/Badge',
-}) `
+function Badge(props) {
+    return react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }));
+}
+exports.Badge = Badge;
+const BadgeComponent = styled_components_1.default.span `
   display: inline-block;
   padding: 0 var(--spacing-xs);
   vertical-align: middle;

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

@@ -5,5 +5,5 @@ type BreadcrumbProps = {
     isActive: boolean;
     onClick?: () => void;
 };
-export declare const Breadcrumb: ({ label, link, isActive, onClick }: BreadcrumbProps) => JSX.Element;
+export declare function Breadcrumb({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element;
 export {};

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -7,9 +7,9 @@ exports.Breadcrumb = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../components/Link/Link");
-const Breadcrumb = ({ label, link, isActive, onClick }) => {
+function Breadcrumb({ label, link, isActive, onClick }) {
     return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
-};
+}
 exports.Breadcrumb = Breadcrumb;
 const BreadcrumbText = styled_components_1.default.div `
   cursor: default;

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

@@ -1,4 +1,4 @@
-import React from 'react';
-export declare const Breadcrumbs: (props: {
+/// <reference types="react" />
+export declare function Breadcrumbs(props: {
     className?: string;
-}) => React.JSX.Element | null;
+}): JSX.Element | null;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
-const Breadcrumbs = (props) => {
+function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const breadcrumbs = useBreadcrumbs();
@@ -27,7 +27,7 @@ const Breadcrumbs = (props) => {
                 } }),
             isLast ? null : react_1.default.createElement("span", null, "/")));
     })));
-};
+}
 exports.Breadcrumbs = Breadcrumbs;
 const BreadcrumbsWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Button/Button.js

@@ -166,7 +166,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
     }
     else {
         return button;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TooltipProps } from '../../components/Tooltip/Tooltip';
 import type { ControlItemType } from '../../components/CodeBlock/CodeBlockControls';
-type CopyButtonProps = {
+export type CopyButtonProps = {
     data: unknown;
     type?: ControlItemType;
     toasterPlacement?: TooltipProps['placement'];
@@ -11,6 +11,6 @@ type CopyButtonProps = {
     onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
     dataTestId?: string;
     className?: string;
+    variant?: string;
 };
 export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;
-export {};

package/lib/components/Buttons/CopyButton.js

@@ -30,7 +30,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CopyButtonComponent = ({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, }) => {
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = useTranslate();
@@ -47,7 +47,7 @@ const CopyButtonComponent = ({ data, type = 'icon', toasterPlacement = 'top', to
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick(e);
     };
     return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
-        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: "small", variant: "text" }, type !== 'icon' && translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy'))));
-};
+        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: "small", variant: variant }, type !== 'icon' && translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy'))));
+}
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type EditPageButtonProps = {
+export type EditPageButtonProps = {
     to: string;
 };
-export declare const EditPageButton: ({ to }: EditPageButtonProps) => JSX.Element;
-export {};
+export declare function EditPageButton({ to }: EditPageButtonProps): JSX.Element;

package/lib/components/Buttons/EditPageButton.js

@@ -9,14 +9,14 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const Link_1 = require("../../components/Link/Link");
-const EditPageButton = ({ to }) => {
+function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", to: to, onClick: () => telemetry.send('edit_page_link_clicked', {}) },
         react_1.default.createElement(ButtonIcon, null),
         react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
-};
+}
 exports.EditPageButton = EditPageButton;
 const EditPageButtonWrapper = (0, styled_components_1.default)(Link_1.Link) `
   height: fit-content;

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

@@ -1,7 +1,6 @@
-import React from 'react';
-interface EmailButtonProps {
+/// <reference types="react" />
+export type EmailButtonProps = {
     data: string;
     dataTestId?: string;
-}
-export declare const EmailButton: ({ data, dataTestId }: EmailButtonProps) => React.JSX.Element;
-export {};
+};
+export declare function EmailButton({ data, dataTestId }: EmailButtonProps): JSX.Element;

package/lib/components/Buttons/EmailButton.js

@@ -7,12 +7,12 @@ exports.EmailButton = void 0;
 const react_1 = __importDefault(require("react"));
 const Button_1 = require("../../components/Button/Button");
 const EmailIcon_1 = require("../../icons/EmailIcon/EmailIcon");
-const EmailButton = ({ data, dataTestId = 'email-button' }) => {
+function EmailButton({ data, dataTestId = 'email-button' }) {
     const onClick = () => {
         window.location.href = `mailto:${data}`;
     };
     return (react_1.default.createElement("div", { "data-component-name": "Buttons/EmailButton" },
         react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(EmailIcon_1.EmailIcon, null), size: "small", variant: "text", "data-testid": dataTestId, "aria-label": "Email" })));
-};
+}
 exports.EmailButton = EmailButton;
 //# sourceMappingURL=EmailButton.js.map

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

@@ -1,7 +1,6 @@
-import React from 'react';
-interface NewTabButtonProps {
+/// <reference types="react" />
+export type NewTabButtonProps = {
     data: string;
     dataTestId?: string;
-}
-export declare const NewTabButton: ({ data, dataTestId }: NewTabButtonProps) => React.JSX.Element;
-export {};
+};
+export declare function NewTabButton({ data, dataTestId, }: NewTabButtonProps): JSX.Element;

package/lib/components/Buttons/NewTabButton.js

@@ -7,12 +7,12 @@ exports.NewTabButton = void 0;
 const react_1 = __importDefault(require("react"));
 const Button_1 = require("../../components/Button/Button");
 const ArrowUpRightIcon_1 = require("../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
-const NewTabButton = ({ data, dataTestId = 'new-tab-button' }) => {
+function NewTabButton({ data, dataTestId = 'new-tab-button', }) {
     const onClick = () => {
         window.open(data, '_blank');
     };
     return (react_1.default.createElement("div", { "data-component-name": "Buttons/NewTabButton" },
         react_1.default.createElement(Button_1.Button, { onClick: onClick, icon: react_1.default.createElement(ArrowUpRightIcon_1.ArrowUpRightIcon, null), "data-testid": dataTestId, "aria-label": "Open in new tab", size: "small", variant: "text" })));
-};
+}
 exports.NewTabButton = NewTabButton;
 //# sourceMappingURL=NewTabButton.js.map

package/lib/components/Catalog/Catalog.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import type { CatalogConfig } from '../../config';
-export default function Catalog(props: {
+export type CatalogProps = {
     pageProps: {
         catalogId: string;
         catalogConfig: CatalogConfig;
     };
-}): JSX.Element;
+};
+export default function Catalog(props: CatalogProps): JSX.Element;
 export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
 export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;

package/lib/components/Catalog/Catalog.js

@@ -15,7 +15,6 @@ const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
@@ -133,9 +132,6 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: flex;
   }
-
-  ${MenuContainer_1.MenuContainer} {
-    padding: 0;
-  }
+  --menu-container-padding-top: 0;
 `;
 //# sourceMappingURL=Catalog.js.map

package/lib/components/Catalog/CatalogActions.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
-type CatalogActionsProps = {
+export type CatalogActionsProps = {
     onOpenFilter: () => void;
     filters: ResolvedFilter[];
     filterTerm: string;
 };
 export declare function CatalogActions(props: CatalogActionsProps): JSX.Element;
-export {};

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { CatalogItem } from '../../core/types';
-type CatalogCardProps = {
+export type CatalogCardProps = {
     item: CatalogItem;
 };
 export declare function CatalogCard({ item }: CatalogCardProps): JSX.Element;
-export {};

package/lib/components/Catalog/CatalogCard.js

@@ -37,10 +37,9 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const Button_1 = require("../../components/Button/Button");
 function CatalogCard({ item }) {
-    var _a, _b;
+    var _a;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const hasTags = item.scorecardLevel || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { "data-component-name": "Catalog/CatalogCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardContent, null,
@@ -48,14 +47,14 @@ function CatalogCard({ item }) {
                     React.createElement(CardTitle, null,
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : ''))),
             React.createElement(CardFooter, null,
-                hasTags && (React.createElement(CardTags, null,
+                React.createElement(CardTags, null,
                     (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, (0, utils_1.capitalize)(tag))))),
                     (item.scorecardLevel && (React.createElement(Tag_1.Tag, { borderless: true, withStatusDot: true, statusDotColor: `var(${(0, utils_1.getScorecardColorVariable)(item.scorecardLevelIdx || 0, Object.keys(item.scorecardLevels || {}).length)})` },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.scorecardLevel)))) ||
-                        null)),
+                        null),
                 React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
 }
 exports.CatalogCard = CatalogCard;

package/lib/components/Catalog/CatalogHighlight.d.ts

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

package/lib/components/Catalog/CatalogInfoBlock.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-type CatalogInfoBlockProps = {
+export type CatalogInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;
         scoreCardSlug?: string;
@@ -9,4 +9,3 @@ type CatalogInfoBlockProps = {
     };
 };
 export declare function CatalogInfoBlock(props: CatalogInfoBlockProps): JSX.Element;
-export {};

package/lib/components/CodeBlock/CodeBlock.js

@@ -37,7 +37,7 @@ const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControl
 function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
     var _a, _b, _c, _d, _e, _f;
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)))) !== null && _c !== void 0 ? _c : '');
-    const highlightedCode = highlightedHtml || children ? null : (0, utils_1.highlight)(sourceCode, lang);
+    const highlightedCode = highlightedHtml || (children ? null : (0, utils_1.highlight)(sourceCode, lang));
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888

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

@@ -1,5 +1,14 @@
-export declare const CodeBlockContainer: import("styled-components").StyledComponent<"pre", any, {
-    maxHeight?: string | undefined;
-    hideCodeColors?: boolean | undefined;
-    wrapContents?: boolean | undefined;
-}, never>;
+import { type PropsWithChildren } from 'react';
+export type CodeBlockContainerProps = PropsWithChildren<{
+    hideCodeColors?: boolean;
+    maxHeight?: string;
+    wrapContents?: boolean;
+    ref?: (instance: HTMLPreElement | null) => void;
+    className?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    suppressHydrationWarning?: boolean;
+    tabIndex?: number;
+}>;
+export declare function CodeBlockContainer(props: CodeBlockContainerProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -22,14 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockContainer = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
-exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
-    'data-component-name': 'CodeBlock/CodeBlockContainer',
-    className,
-})) `
+function CodeBlockContainer(props) {
+    return (react_1.default.createElement(CodeBlockContainerComponent, Object.assign({}, props, { "data-component-name": "CodeBlock/CodeBlockContainer" })));
+}
+exports.CodeBlockContainer = CodeBlockContainer;
+const CodeBlockContainerComponent = styled_components_1.default.pre `
   && {
     overflow-x: auto;
     font-family: var(--code-block-font-family);

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -48,6 +48,8 @@ exports.CodeBlockControls = CodeBlockControls;
 const ContainerWrapper = styled_components_1.default.div `
   display: grid;
   justify-content: end;
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   background-color: var(--code-block-controls-bg-color);
   padding: var(--code-block-controls-padding);
   border-bottom: var(--code-block-controls-border);

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
-type CodeBlockTabsProps = {
+export type CodeBlockTabsProps = {
     tabs: FileTabs;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;
-export {};

package/lib/components/CodeBlock/variables.js

@@ -49,8 +49,8 @@ exports.code = (0, styled_components_1.css) `
   --code-block-controls-font-weight: var(--font-weight-medium); // @presenter Color
   --code-block-controls-bg-color: transparent; // @presenter Color
   --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
-  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
-  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
+  --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
   --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
   --code-block-controls-height: 20px;
   --code-block-controls-width: 20px;

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

@@ -1,10 +1,6 @@
-import React from 'react';
-export interface ColorModeIconProps {
+/// <reference types="react" />
+export type ColorModeIconProps = {
     mode?: 'dark' | 'light' | string;
     className?: string;
-}
-declare function Icon({ mode, className }: ColorModeIconProps): React.JSX.Element;
-export declare const ColorModeIcon: import("styled-components").StyledComponent<typeof Icon, any, {
-    'data-component-name': string;
-}, "data-component-name">;
-export {};
+};
+export declare function ColorModeIcon(props: ColorModeIconProps): JSX.Element;

package/lib/components/ColorModeSwitcher/ColorModeIcon.js

@@ -9,6 +9,10 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ContrastIcon_1 = require("../../icons/ContrastIcon/ContrastIcon");
 const MoonIcon_1 = require("../../icons/MoonIcon/MoonIcon");
 const SunIcon_1 = require("../../icons/SunIcon/SunIcon");
+function ColorModeIcon(props) {
+    return (react_1.default.createElement(ColorModeIconComponent, Object.assign({}, props, { "data-component-name": "ColorModeSwitcher/ColorModeIcon" })));
+}
+exports.ColorModeIcon = ColorModeIcon;
 function Icon({ mode, className }) {
     switch (mode) {
         case 'dark':
@@ -19,9 +23,7 @@ function Icon({ mode, className }) {
             return react_1.default.createElement(ContrastIcon_1.ContrastIcon, { "data-testid": "custom", className: className + (mode ? ' ' + mode : '') });
     }
 }
-exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
-    'data-component-name': 'ColorModeSwitcher/ColorModeIcon',
-})) `
+const ColorModeIconComponent = (0, styled_components_1.default)(Icon) `
   box-sizing: border-box;
 `;
 //# sourceMappingURL=ColorModeIcon.js.map

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

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

package/lib/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { DatePicker as DatePickerComponent } from 'react-date-picker';
-type Props = React.ComponentProps<typeof DatePickerComponent>;
-export declare const DatePicker: (props: Props) => React.JSX.Element;
-export {};
+export type DatePickerProps = React.ComponentProps<typeof DatePickerComponent>;
+export declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-type DropdownProps = PropsWithChildren<{
+export type DropdownProps = PropsWithChildren<{
     trigger: React.ReactNode;
     triggerEvent?: 'click' | 'hover';
     placement?: 'top' | 'bottom';
@@ -11,5 +11,4 @@ type DropdownProps = PropsWithChildren<{
     className?: string;
     withArrow?: boolean;
 }>;
-export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, }: DropdownProps): React.JSX.Element;
-export {};
+export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, }: DropdownProps): JSX.Element;

package/lib/components/Dropdown/Dropdown.js

@@ -41,14 +41,19 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const handleClose = () => {
         setIsOpen(false);
     };
-    const handleToggle = () => {
+    const handleChildClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleClose();
+    };
+    const handleToggle = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
         setIsOpen(!isOpen);
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-            handleToggle();
-            event.stopPropagation();
-            event.preventDefault();
+            handleToggle(event);
         }
     };
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
@@ -56,7 +61,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined }),
         dropdownTrigger,
-        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleClose : undefined }, children))));
+        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
 }
 exports.Dropdown = Dropdown;
 const DropdownWrapper = styled_components_1.default.div `

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ReactNode } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
@@ -9,4 +8,4 @@ export type DropdownMenuProps = {
 } | {
     children?: ReactNode;
 });
-export declare function DropdownMenu(props: DropdownMenuProps): React.JSX.Element;
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { CSSProperties, ReactNode, PropsWithChildren } from 'react';
 import type { LinkProps } from '../../components/Link/Link';
 export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'external'>> & {
@@ -16,4 +15,4 @@ export type DropdownMenuItemProps = Partial<Pick<LinkProps, 'to' | 'target' | 'e
     onAction?: () => void;
     active?: boolean;
 };
-export declare function DropdownMenuItem({ children, content, active, onAction, to, dangerous, prefix, suffix, disabled, separator, dataAttributes, className, separatorLine, style, role, ...otherProps }: PropsWithChildren<DropdownMenuItemProps>): React.JSX.Element;
+export declare function DropdownMenuItem({ children, content, active, onAction, to, dangerous, prefix, suffix, disabled, separator, dataAttributes, className, separatorLine, style, role, ...otherProps }: PropsWithChildren<DropdownMenuItemProps>): JSX.Element;

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -51,6 +51,7 @@ function DropdownMenuItem(_a) {
             onAction === null || onAction === void 0 ? void 0 : onAction();
         }
     };
+    className = className || '' + (active ? ' active' : '');
     if (to) {
         return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, separatorLine: separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
             prefix,
@@ -99,17 +100,30 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     `}
 
   background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  ${({ active }) => active &&
+    (0, styled_components_1.css) `
+      background-color: var(--dropdown-menu-item-bg-color-active);
+      color: var(--dropdown-menu-item-color-active);
+      svg {
+        fill: var(--dropdown-menu-item-color-active);
+      }
+    `}
+
   &:hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
+    color: var(--dropdown-menu-item-color-hover);
   }
 
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
-      color: var(--dropdown-menu-color-disabled);
+      background-color: var(--dropdown-menu-item-bg-color-disabled);
+      color: var(--dropdown-menu-item-color-disabled);
       svg {
-        fill: var(--dropdown-menu-color-disabled);
+        fill: var(--dropdown-menu-item-color-disabled);
       }
     `}
 
@@ -128,9 +142,12 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
 
   ${({ dangerous }) => dangerous &&
     (0, styled_components_1.css) `
-      color: var(--dropdown-menu-item-color-dangerous);
-      svg {
-        fill: var(--dropdown-menu-item-color-dangerous);
+      &:hover,
+      & {
+        color: var(--dropdown-menu-item-color-dangerous);
+        svg {
+          fill: var(--dropdown-menu-item-color-dangerous);
+        }
       }
     `}
 `;