@redocly/theme 0.82.2-rc.3 → 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/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/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/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/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/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: "secondary", 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/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/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");
@@ -32,7 +32,7 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
             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", 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;