@redocly/theme 0.67.0-next.0 → 0.67.0-next.1

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
+import { ReportButtonProps } from '../../core/hooks';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;
@@ -22,7 +23,7 @@ type ControlProps = {
     label?: string;
     tooltipText?: string;
     onClick?: () => void;
-    props?: Record<string, any>;
+    props?: ReportButtonProps;
 };
 type CopyControlProps = ControlProps & {
     data?: string;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -18,7 +18,7 @@ const WarningSquareIcon_1 = require("../../icons/WarningSquareIcon/WarningSquare
 const Button_1 = require("../../components/Button/Button");
 const CodeBlockDropdown_1 = require("../../components/CodeBlock/CodeBlockDropdown");
 function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -38,12 +38,14 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined, "aria-label": "Report a problem" }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, "aria-label": "Expand all", onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, "aria-label": "Collapse all" }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
-            select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
-            deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
+            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: ((_b = report.props) === null || _b === void 0 ? void 0 : _b.tooltip) ||
+                    translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined, "aria-label": "Report a problem", onClick: (_c = report.props) === null || _c === void 0 ? void 0 : _c.onClick }, controlsType !== 'icon' && (((_d = report.props) === null || _d === void 0 ? void 0 : _d.buttonText) || 'Report')))) : null,
+            expand && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: ((_f = expand.props) === null || _f === void 0 ? void 0 : _f.tooltip) || translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, "aria-label": "Expand all", onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
+            collapse && !((_g = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _g === void 0 ? void 0 : _g.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: ((_h = collapse.props) === null || _h === void 0 ? void 0 : _h.tooltip) ||
+                    translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" }, react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, "aria-label": "Collapse all" }, controlsType !== 'icon' && ((collapse === null || collapse === void 0 ? void 0 : collapse.label) || 'Collapse all')))) : null,
+            select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick, "aria-label": "Select all" }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
+            deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, "aria-label": "Clear all" }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
+            copy && !((_j = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _j === void 0 ? void 0 : _j.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -68,7 +68,7 @@ function CodeBlockTabs({ tabs }) {
                         : null;
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;
-                    }, "data-name": name, active: id === tabs.value, key: id, onClick: () => tabs.onChange(id) },
+                    }, "data-name": name, $active: id === tabs.value, key: id, onClick: () => tabs.onChange(id) },
                     fileIcon,
                     name));
             }))),
@@ -129,7 +129,7 @@ const Tab = styled_components_1.default.button `
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
 
-  ${({ active }) => active
+  ${({ $active }) => $active
     ? (0, styled_components_1.css) `
           color: var(--text-color-primary);
           background-color: var(--tab-bg-color-filled);

package/lib/components/Dropdown/Dropdown.js

@@ -70,7 +70,7 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, 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' } : {})), 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: ref || dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,
-        react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
+        react_1.default.createElement(ChildrenWrapper, { $placement: placement, $alignment: alignment, $isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
 });
 const DropdownWrapper = styled_components_1.default.div `
   --button-gap: var(--spacing-xxs);
@@ -91,11 +91,11 @@ const DropdownWrapper = styled_components_1.default.div `
 const ChildrenWrapper = styled_components_1.default.div `
   padding-top: var(--dropdown-menu-padding-top);
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
-  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
+  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
+  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
+  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
 
   z-index: var(--dropdown-menu-z-index);
 `;

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

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

package/lib/components/Feedback/Comment.js

@@ -67,12 +67,12 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, i
     if (submitValue) {
         return (react_1.default.createElement(StateWrapper, { "data-component-name": "Feedback/Comment", className: className },
             react_1.default.createElement(StyledFormMandatoryFields, null,
-                react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.submitText", standAlone: standAlone }, submitText ||
+                react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.submitText", $standAlone: standAlone }, submitText ||
                     translate('feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
                 react_1.default.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (react_1.default.createElement(CommentWrapper, { ref: modalRef, "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' } },
-        react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.label", standAlone: standAlone }, label ||
+        react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.label", $standAlone: standAlone }, label ||
             translate('feedback.settings.comment.label', 'Please share your feedback with us.')),
         react_1.default.createElement(TextArea, { rows: 3, maxLength: constants_1.MAX_CONTEXT_LENGTH, onChange: handleTextAreaChange }),
         isMaxLengthReached && (react_1.default.createElement(MaxLengthMessage, { "data-translation-key": "feedback.settings.comment.maxLength" }, translate('feedback.settings.comment.maxLength', {
@@ -114,7 +114,7 @@ const Label = styled_components_1.default.h4 `
   font-size: var(--feedback-font-size);
   line-height: var(--feedback-line-height);
 
-  ${({ standAlone }) => standAlone &&
+  ${({ $standAlone }) => $standAlone &&
     (0, styled_components_1.css) `
       font-size: var(--feedback-header-font-size);
       line-height: var(--feedback-header-line-height);

package/lib/components/Feedback/Mood.js

@@ -145,14 +145,14 @@ function Mood({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                React.createElement(Label, { $standAlone: true, "data-translation-key": "feedback.settings.submitText" }, submitText ||
                     translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
         React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { $standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.DISSATISFIED, type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                             setScore(MOOD_STATES.DISSATISFIED);
@@ -209,7 +209,7 @@ const Label = styled_components_1.default.h4 `
   line-height: var(--feedback-line-height);
   color: var(--feedback-text-color);
 
-  ${({ standAlone = false }) => standAlone &&
+  ${({ $standAlone = false }) => $standAlone &&
     (0, styled_components_1.css) `
       font-size: var(--feedback-header-font-size);
       line-height: var(--feedback-header-line-height);

package/lib/components/Filter/FilterContent.js

@@ -71,7 +71,7 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
             hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
         !hideSearch && (react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })),
-        react_1.default.createElement(FilterItems, { hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
+        react_1.default.createElement(FilterItems, { $hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
 }
 const FilterContentWrapper = styled_components_1.default.div `
   padding: var(--filter-content-padding-vertical) var(--filter-content-padding-horizontal);
@@ -97,7 +97,7 @@ const FilterItems = styled_components_1.default.div `
   flex-direction: column;
   gap: var(--spacing-base);
   border-top: 1px solid var(--border-color-secondary);
-  ${({ hideSearch }) => hideSearch &&
+  ${({ $hideSearch }) => $hideSearch &&
     (0, styled_components_1.css) `
       border-top: none;
     `}

package/lib/components/Footer/Footer.js

@@ -18,7 +18,7 @@ function Footer({ className }) {
         return null;
     }
     const withColumns = items.some((item) => { var _a; return (((_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; });
-    return (react_1.default.createElement(FooterWrapper, { "data-component-name": "Footer/Footer", className: className, withColumns: withColumns },
+    return (react_1.default.createElement(FooterWrapper, { "data-component-name": "Footer/Footer", className: className, $withColumns: withColumns },
         !!items.length && (react_1.default.createElement(FooterColumnsSection, null, withColumns
             ? items.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column })))
             : items.map((item, index) => (react_1.default.createElement(FooterItem_1.FooterItem, { key: index, item: item }))))),
@@ -74,7 +74,7 @@ const FooterWrapper = styled_components_1.default.footer `
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
     flex-direction: row;
-    ${({ withColumns }) => withColumns
+    ${({ $withColumns }) => $withColumns
     ? `
     flex-direction: column;
     align-items: stretch;

package/lib/components/Footer/FooterColumn.js

@@ -17,7 +17,7 @@ function FooterColumn({ column, className }) {
     const label = translate(column.labelTranslationKey, column.label);
     return (react_1.default.createElement(FooterColumnWrapper, { "data-component-name": "Footer/FooterColumn", className: className },
         !(0, utils_1.isNavLinkItem)(column) && react_1.default.createElement(FooterColumnTitle, null, label),
-        react_1.default.createElement(FooterColumnItems, { iconsOnly: (0, utils_1.isNavLinkItem)(column) ? false : iconsOnly }, (0, utils_1.isNavLinkItem)(column) ? (react_1.default.createElement(NonGroupItem, { item: column, iconsOnly: Boolean((column === null || column === void 0 ? void 0 : column.label) === (column === null || column === void 0 ? void 0 : column.link) && ((column === null || column === void 0 ? void 0 : column.icon) || (column === null || column === void 0 ? void 0 : column.srcSet))), key: column.label, className: "nonGroupFooterItem" })) : (items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => (react_1.default.createElement(FooterItem_1.FooterItem, { item: columnItem, iconsOnly: iconsOnly, key: columnItemIndex })))))));
+        react_1.default.createElement(FooterColumnItems, { $iconsOnly: (0, utils_1.isNavLinkItem)(column) ? false : iconsOnly }, (0, utils_1.isNavLinkItem)(column) ? (react_1.default.createElement(NonGroupItem, { item: column, iconsOnly: Boolean((column === null || column === void 0 ? void 0 : column.label) === (column === null || column === void 0 ? void 0 : column.link) && ((column === null || column === void 0 ? void 0 : column.icon) || (column === null || column === void 0 ? void 0 : column.srcSet))), key: column.label, className: "nonGroupFooterItem" })) : (items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => (react_1.default.createElement(FooterItem_1.FooterItem, { item: columnItem, iconsOnly: iconsOnly, key: columnItemIndex })))))));
 }
 const FooterColumnWrapper = styled_components_1.default.div `
   display: flex;
@@ -67,7 +67,7 @@ const FooterColumnItems = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};
+  flex-direction: ${(props) => (props.$iconsOnly ? 'row' : 'column')};
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     justify-content: flex-start;

package/lib/components/Footer/FooterItem.js

@@ -20,8 +20,8 @@ function FooterItem({ item, iconsOnly, className }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.sendFooterItemClickedMessage(), "data-translation-key": item.labelTranslationKey },
-        hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
+    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", $iconsOnly: iconsOnly, $item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.sendFooterItemClickedMessage(), "data-translation-key": item.labelTranslationKey },
+        hasIcon ? (react_1.default.createElement(FooterLinkIcon, { $iconsOnly: iconsOnly },
             react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,
         item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "10px" }) : null))));
@@ -36,7 +36,7 @@ const FooterLinkIcon = styled_components_1.default.div `
   --icon-width: var(--footer-item-icon-width);
   --icon-height: var(--footer-item-icon-height);
   display: inline-flex;
-  margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
+  margin-right: ${({ $iconsOnly }) => ($iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
   vertical-align: middle;
   border: 1px solid var(--footer-item-icon-border-color);
   border-radius: var(--footer-item-icon-border-radius);
@@ -55,9 +55,9 @@ const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
   }
 `;
 const FooterItemWrapper = styled_components_1.default.div `
-  margin: ${({ iconsOnly, item }) => iconsOnly
+  margin: ${({ $iconsOnly, $item }) => $iconsOnly
     ? '0 var(--footer-item-icon-margin-right) 0 0;'
-    : item.type === 'link'
+    : $item.type === 'link'
         ? 'var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);'
         : '0'};
 `;

package/lib/components/Image/Image.js

@@ -76,10 +76,10 @@ function Image(props) {
         lightboxImage ? (react_1.default.createElement(LightboxContainer, { ref: lightboxContainerRef, onClick: handleCloseLightbox, onKeyDown: handleLightboxKeyDown, tabIndex: 0 },
             react_1.default.createElement(Overlay, { style: lightboxOverlayStyles }),
             react_1.default.createElement(Image, { src: lightboxImage, alt: alt }))) : null,
-        src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))))));
+        src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className, width: width, height: height, style: combinedStyles, onClick: () => handleImageClick(src) })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, $colorMode: key, src: value, alt: alt, className: className, width: width, height: height, $withLightbox: withLightbox, style: combinedStyles, onClick: () => handleImageClick(value) }))))));
 }
 const ColorModeAwareImage = styled_components_1.default.img `
-  html:not(.${(props) => props.colorMode}) && {
+  html:not(.${(props) => props.$colorMode}) && {
     display: none;
   }
   ${({ $withLightbox }) => $withLightbox &&

package/lib/components/LastUpdated/LastUpdated.js

@@ -67,7 +67,7 @@ function LastUpdated(props) {
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');
-    return (react_1.default.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+    return (react_1.default.createElement(LastUpdatedWrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", $rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
         " ",
         react_1.default.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
@@ -79,7 +79,7 @@ const LastUpdatedWrapper = styled_components_1.default.div `
   line-height: var(--last-updated-line-height);
   padding-bottom: 30px;
 
-  ${({ rawOnPrint }) => rawOnPrint &&
+  ${({ $rawOnPrint }) => $rawOnPrint &&
     `@media print {
       time {
         display: none;

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

@@ -1,22 +1,5 @@
 import * as React from 'react';
 import type { JSX } from 'react';
-import type { RelativeRoutingType } from 'react-router-dom';
-export type LinkProps = {
-    to: string;
-    target?: '_self' | '_blank';
-    external?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    innerRef?: React.Ref<HTMLAnchorElement>;
-    languageInsensitive?: boolean;
-    onClick?: () => void;
-    reloadDocument?: boolean;
-    replace?: boolean;
-    state?: unknown;
-    preventScrollReset?: boolean;
-    relative?: RelativeRoutingType;
-    viewTransition?: boolean;
-    [key: string]: unknown;
-    rel?: string;
-};
+import type { LinkProps } from '../../core/types';
+export type { LinkProps };
 export declare function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element;

package/lib/components/Link/Link.js

@@ -43,15 +43,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = Link;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 const ThemeDataContext_1 = require("../../core/contexts/ThemeDataContext");
 function Link(props) {
     const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);
@@ -59,10 +55,7 @@ function Link(props) {
         const { LinkComponent } = context.components;
         return React.createElement(LinkComponent, Object.assign({}, props));
     }
-    else {
-        const { innerRef, to, external: _external, languageInsensitive: _languageInsensitive, reloadDocument, replace, state, preventScrollReset, relative, viewTransition } = props, restProps = __rest(props, ["innerRef", "to", "external", "languageInsensitive", "reloadDocument", "replace", "state", "preventScrollReset", "relative", "viewTransition"]);
-        const linkProps = Object.fromEntries(Object.entries(restProps).filter(([key, value]) => value !== undefined && (0, is_prop_valid_1.default)(key)));
-        return (React.createElement(react_router_dom_1.Link, Object.assign({ ref: innerRef, to: to, reloadDocument: reloadDocument, replace: replace, state: state, preventScrollReset: preventScrollReset, relative: relative, viewTransition: viewTransition }, linkProps)));
-    }
+    const { external: _1, languageInsensitive: _2, innerRef } = props, filteredProps = __rest(props, ["external", "languageInsensitive", "innerRef"]);
+    return React.createElement(react_router_dom_1.Link, Object.assign({ ref: innerRef }, filteredProps));
 }
 //# sourceMappingURL=Link.js.map

package/lib/components/Loaders/Loading.js

@@ -15,13 +15,13 @@ const LoadingMessage = styled_components_1.default.div `
   text-align: center;
   font-size: 25px;
   margin: 30px 0 20px 0;
-  color: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  color: ${({ $color }) => (0, utils_1.getCssColorVariable)($color)};
 `;
 function Loading({ color }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     return (react_1.default.createElement("div", { style: { textAlign: 'center' } },
-        react_1.default.createElement(LoadingMessage, { color: color }, translate('loaders.loading', 'Loading...')),
+        react_1.default.createElement(LoadingMessage, { $color: color }, translate('loaders.loading', 'Loading...')),
         react_1.default.createElement(Spinner_1.Spinner, { color: color })));
 }
 //# sourceMappingURL=Loading.js.map

package/lib/components/Loaders/SpinnerLoader.js

@@ -7,12 +7,12 @@ exports.SpinnerLoader = SpinnerLoader;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function SpinnerLoader({ color, size }) {
-    return react_1.default.createElement(Spinner, { color: color, size: size });
+    return react_1.default.createElement(Spinner, { $color: color, $size: size });
 }
 const Spinner = styled_components_1.default.div `
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  border: 3px solid ${({ color }) => color};
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  border: 3px solid ${({ $color }) => $color};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;

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

@@ -4,26 +4,23 @@ export type MarkdownProps = PropsWithChildren<{
     compact?: boolean;
     inline?: boolean;
     base?: boolean;
-    ref?: (node: HTMLDivElement) => void;
 }>;
-export declare const Markdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, "className"> & {
-    className?: string;
-}, "base" | "children" | "className" | "compact" | "inline" | "ref"> & {
+export declare const Markdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, "data-component-name"> & {
+    'data-component-name': string;
+}, "base" | "children" | "className" | "compact" | "inline"> & {
     className?: string;
     compact?: boolean;
     inline?: boolean;
     base?: boolean;
-    ref?: (node: HTMLDivElement) => void;
 } & {
     children?: import("react").ReactNode | undefined;
-}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, "className"> & {
-    className?: string;
-}, "base" | "children" | "className" | "compact" | "inline" | "ref"> & {
+}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").ClassAttributes<HTMLElement> | keyof import("react").HTMLAttributes<HTMLElement>> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, "data-component-name"> & {
+    'data-component-name': string;
+}, "base" | "children" | "className" | "compact" | "inline"> & {
     className?: string;
     compact?: boolean;
     inline?: boolean;
     base?: boolean;
-    ref?: (node: HTMLDivElement) => void;
 } & {
     children?: import("react").ReactNode | undefined;
-}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab">>> & string;
+}, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "data-component-name" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "draggable" | "enterKeyHint" | "exportparts" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "part" | "popover" | "popoverTarget" | "popoverTargetAction" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "title" | "translate" | "typeof" | "unselectable" | "vocab">>> & string;

package/lib/components/Markdown/Markdown.js

@@ -40,10 +40,13 @@ const base_table_1 = require("../../components/Markdown/styles/base-table");
 const links_1 = require("../../components/Markdown/styles/links");
 const heading_anchor_1 = require("../../components/Markdown/styles/heading-anchor");
 const constants_1 = require("../../core/constants");
-exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
+exports.Markdown = styled_components_1.default.main
+    .withConfig({
+    shouldForwardProp: (prop) => !['compact', 'inline', 'base'].includes(prop),
+})
+    .attrs({
     'data-component-name': 'Markdown/Markdown',
-    className,
-})) `
+}) `
   font-size: var(--md-content-font-size);
   font-family: var(--md-content-font-family);
   font-weight: var(--md-content-font-weight);

package/lib/components/Marker/Marker.js

@@ -59,13 +59,13 @@ exports.Marker = (0, react_1.forwardRef)(({ marker, dataAttribures, registerMark
         registerMarker(currentElement);
         return () => removeMarker(currentElement);
     }, [registerMarker, removeMarker, marker]);
-    return (react_1.default.createElement(StyledMarker, Object.assign({ "data-component-name": "Marker/Marker", ref: internalRef, marker: marker }, (dataAttribures !== null && dataAttribures !== void 0 ? dataAttribures : {}))));
+    return (react_1.default.createElement(StyledMarker, Object.assign({ "data-component-name": "Marker/Marker", ref: internalRef, $marker: marker }, (dataAttribures !== null && dataAttribures !== void 0 ? dataAttribures : {}))));
 });
 const StyledMarker = styled_components_1.default.div `
   position: absolute;
   z-index: -1;
-  top: ${({ marker }) => marker.offset}px;
-  height: ${({ marker }) => marker.height}px;
+  top: ${({ $marker }) => $marker.offset}px;
+  height: ${({ $marker }) => $marker.height}px;
   width: 100%;
   left: 0;
 `;

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

@@ -1,4 +1,4 @@
-import type { JSX, PropsWithChildren } from 'react';
+import { type JSX, type PropsWithChildren } from 'react';
 import type { MenuItemsAnimation } from '../../core/types';
 export type MenuContainerProps = PropsWithChildren<{
     growContent?: boolean;
@@ -6,4 +6,4 @@ export type MenuContainerProps = PropsWithChildren<{
     hidden?: boolean;
     animation?: MenuItemsAnimation;
 }>;
-export declare function MenuContainer(props: MenuContainerProps): JSX.Element;
+export declare function MenuContainer({ growContent, className, hidden, animation, children }: MenuContainerProps): JSX.Element;

package/lib/components/Menu/MenuContainer.js

@@ -39,8 +39,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuContainer = MenuContainer;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-function MenuContainer(props) {
-    return react_1.default.createElement(MenuContainerComponent, Object.assign({}, props, { "data-component-name": "Menu/MenuContainer" }));
+function MenuContainer({ growContent, className, hidden, animation, children, }) {
+    return (react_1.default.createElement(MenuContainerComponent, { "data-component-name": "Menu/MenuContainer", $growContent: growContent === undefined ? true : growContent, $animation: animation, $hidden: hidden, className: className }, children));
 }
 const slideInRightAnimation = (0, styled_components_1.keyframes) `
   0% {
@@ -58,14 +58,12 @@ const slideInLeftAnimation = (0, styled_components_1.keyframes) `
     transform: translateX(0%)
   }
 `;
-const MenuContainerComponent = styled_components_1.default.div.attrs(({ growContent, className, animation }) => ({
-    growContent: growContent === undefined ? true : growContent,
-    className,
-    animation,
-})) `
-  animation-name: ${({ animation }) => animation === 'slideInRight'
+const MenuContainerComponent = styled_components_1.default.div.attrs({
+    'data-component-name': 'Menu/MenuContainer',
+}) `
+  animation-name: ${({ $animation }) => $animation === 'slideInRight'
     ? slideInRightAnimation
-    : animation === 'slideInLeft'
+    : $animation === 'slideInLeft'
         ? slideInLeftAnimation
         : 'none'};
   animation-fill-mode: forwards;
@@ -73,9 +71,9 @@ const MenuContainerComponent = styled_components_1.default.div.attrs(({ growCont
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
-  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
+  flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
-  display: ${({ hidden }) => (hidden ? 'none' : 'block')};
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};
   overscroll-behavior: contain;
 `;
 //# sourceMappingURL=MenuContainer.js.map