@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/components/Buttons/ConnectMCPButton.js

@@ -19,55 +19,57 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 const hooks_1 = require("../../core/hooks");
 const constants_1 = require("../../core/constants");
-const MENU_OPTIONS = [
-    {
-        key: 'cursor',
+const MENU_OPTIONS = {
+    cursor: {
         icon: CursorIcon_1.CursorIcon,
         titleTranslationKey: 'page.actions.connectMcp.cursor',
         titleDefault: 'Connect to Cursor',
         descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
         descriptionDefault: 'Install MCP server on Cursor',
     },
-    {
-        key: 'vscode',
+    vscode: {
         icon: VSCodeIcon_1.VSCodeIcon,
         titleTranslationKey: 'page.actions.connectMcp.vscode',
         titleDefault: 'Connect to VS Code',
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
-    {
-        key: 'claude-code',
+    claude: {
+        icon: ClaudeIcon_1.ClaudeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.claude',
+        titleDefault: 'Connect to Claude',
+        descriptionTranslationKey: 'page.actions.connectMcp.claudeDescription',
+        descriptionDefault: 'Add MCP server to your Claude account',
+    },
+    'claude-code': {
         icon: ClaudeIcon_1.ClaudeIcon,
         titleTranslationKey: 'page.actions.connectMcp.claudeCode',
         titleDefault: 'Connect to Claude Code',
         descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
         descriptionDefault: 'Copy the Claude Code CLI command',
     },
-    {
-        key: 'codex',
+    codex: {
         icon: CodexIcon_1.CodexIcon,
         titleTranslationKey: 'page.actions.connectMcp.codex',
         titleDefault: 'Connect to Codex CLI',
         descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
         descriptionDefault: 'Copy the Codex CLI command',
     },
-    {
-        key: 'copy',
+    copy: {
         icon: CopyIcon_1.CopyIcon,
         titleTranslationKey: 'page.actions.connectMcp.copyConfig',
         titleDefault: 'Copy MCP Configuration',
         descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
         descriptionDefault: 'Copy MCP JSON Configuration',
     },
-];
+};
 // Copy actions keep the dropdown open so the copied checkmark is visible.
 const COPY_OPTIONS = ['claude-code', 'codex', 'copy'];
 function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = constants_1.DEFAULT_MCP_OPTIONS, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
-    const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+    const menuOptions = visibleOptions.map((key) => (Object.assign({ key }, MENU_OPTIONS[key])));
     const primaryOption = menuOptions[0];
     const dropdownOptions = menuOptions.slice(1);
     if (!primaryOption)
@@ -75,7 +77,7 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = c
     const PrimaryIcon = primaryOption.icon;
     const showPrimaryCopied = copiedOption === primaryOption.key;
     return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" }, react_1.default.createElement(SplitButton_1.SplitButton, { variant: "secondary", placement: placement, alignment: alignment, closeOnSelect: false, toggleAriaLabel: translate('page.actions.connectMcp.moreOptions', 'More options'), button: react_1.default.createElement(Button_1.Button, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)) }, dropdownOptions.length > 0
-        ? ({ close }) => (react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
+        ? ({ close }) => (react_1.default.createElement(StyledDropdownMenu, null, dropdownOptions.map((option) => {
             const Icon = option.icon;
             const showCheckmark = copiedOption === option.key;
             return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => {
@@ -87,6 +89,9 @@ function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = c
         })))
         : null)));
 }
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --dropdown-menu-max-height: var(--connect-mcp-button-dropdown-max-height);
+`;
 const ConnectMCPButtonWrapper = styled_components_1.default.div `
   display: inline-block;
   position: relative;

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

@@ -1 +1,2 @@
 export declare const aiAssistantButton: import("styled-components").RuleSet<object>;
+export declare const connectMcpButton: import("styled-components").RuleSet<object>;

package/lib/components/Buttons/variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.aiAssistantButton = void 0;
+exports.connectMcpButton = exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
 /* eslint-disable theme/no-raw-colors-in-styles */
 exports.aiAssistantButton = (0, styled_components_1.css) `
@@ -52,4 +52,7 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
+exports.connectMcpButton = (0, styled_components_1.css) `
+  --connect-mcp-button-dropdown-max-height: fit-content;
+`;
 //# sourceMappingURL=variables.js.map

package/lib/components/Catalog/Catalog.js

@@ -94,9 +94,9 @@ function Catalog(props) {
                     react_1.default.createElement(CatalogPageContentWrapper, null,
                         react_1.default.createElement(CatalogTitleWrapper, null,
                             react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
-                                (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                react_1.default.createElement("span", null, (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
                                     ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
-                                    : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
+                                    : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug),
                                 ' '),
                             react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
                         react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey)),
@@ -151,7 +151,7 @@ const CatalogDescription = styled_components_1.default.p `
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);
 
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.d.ts

@@ -1,2 +1,2 @@
 import type { CatalogEntityRelationsGraphProps } from '../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
-export declare const CatalogEntityRelationsGraph: import("react").ComponentType<CatalogEntityRelationsGraphProps>;
+export declare const CatalogEntityRelationsGraph: import("../../../../core/utils").DynamicComponent<CatalogEntityRelationsGraphProps>;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.js

@@ -35,5 +35,5 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsGraph = void 0;
 const utils_1 = require("../../../../core/utils");
-exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('./CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
+exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
 //# sourceMappingURL=CatalogEntityRelationsGraph.lazy.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -142,10 +142,10 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
 }
 const SidebarOverlay = styled_components_1.default.div `
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -98,7 +98,7 @@ const SplitViewWrapper = styled_components_1.default.div `
 const SchemaSampleWrapper = styled_components_1.default.div `
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
+  top: calc(var(--navbar-offset) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -101,17 +101,20 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
             react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
                 const id = 'filter--' + filter.property + '--' + value;
-                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
-                        filter.toggleOption(value);
-                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
-                        ]);
-                    } },
-                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
-                            ? filter.selectedOptions.has(value) ||
-                                filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
-                            : false }),
-                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
+                const checked = filter.selectedOptions instanceof Set
+                    ? filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                    : false;
+                return (react_1.default.createElement(FilterCheckboxOption, { key: id },
+                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: checked }),
+                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value },
+                        react_1.default.createElement(FilterCheckboxInput, { checked: checked, onChange: () => {
+                                filter.toggleOption(value);
+                                telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('catalogEntitiesFilterCheckboxId', 'checkbox')), { category: filter.property, value: value }),
+                                ]);
+                            } }),
+                        highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
                     showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
             })))));
 }
@@ -147,6 +150,22 @@ const HighlightedText = styled_components_1.default.span `
 `;
 const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+const FilterCheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' }) `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 const FilterSearchWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);

package/lib/components/Catalog/CatalogFilter/CatalogFilterDateRange.js

@@ -46,6 +46,7 @@ const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
 const Accordion_1 = require("../../../components/Accordion/Accordion");
 function CatalogFilterDateRange({ filter, className, }) {
+    const [today] = (0, react_1.useState)(() => new Date());
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const from = (0, react_1.useMemo)(() => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined), [filter.selectedOptions.from]);
@@ -62,7 +63,7 @@ function CatalogFilterDateRange({ filter, className, }) {
                 react_1.default.createElement(DateRangeWrapper, null,
                     react_1.default.createElement(DateRangeRow, null,
                         react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
-                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
+                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: today, onChange: (from) => {
                                 if (Array.isArray(from))
                                     return;
                                 filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.js

@@ -14,7 +14,7 @@ function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }
 }
 const CatalogMobileFiltersPanelWrapper = styled_components_1.default.div `
   width: 100%;
-  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  max-height: calc(100vh - var(--navbar-offset));
   overflow-y: auto;
   background: var(--sidebar-bg-color);
   display: flex;

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.js

@@ -15,10 +15,10 @@ function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterCon
 const CatalogMobileFiltersPanelOverlayWrapper = styled_components_1.default.div `
   display: none;
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   z-index: 3;
   background: var(--bg-color);
   flex-direction: column;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -11,8 +11,7 @@ const CopyButton_1 = require("../../components/Buttons/CopyButton");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
-const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
-const MinimizeIcon_1 = require("../../icons/MinimizeIcon/MinimizeIcon");
+const ExpandCollapseIcon_1 = require("../../icons/ExpandCollapseIcon/ExpandCollapseIcon");
 const SelectIcon_1 = require("../../icons/SelectIcon/SelectIcon");
 const WarningSquareIcon_1 = require("../../icons/WarningSquareIcon/WarningSquareIcon");
 const Button_1 = require("../../components/Button/Button");
@@ -40,9 +39,8 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
             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: ((_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,
+            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(ExpandCollapseIcon_1.ExpandCollapseIcon, 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')))) : 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(ExpandCollapseIcon_1.ExpandCollapseIcon, { $collapse: true }) : 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" },

package/lib/components/Consent/Consent.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function Consent(): JSX.Element;

package/lib/components/Consent/Consent.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consent = Consent;
+const react_1 = __importDefault(require("react"));
+const ConsentBanner_1 = require("../../components/Consent/ConsentBanner");
+const ConsentDialog_1 = require("../../components/Consent/ConsentDialog");
+const hooks_1 = require("../../core/hooks");
+function Consent() {
+    (0, hooks_1.useConsentTelemetry)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ConsentBanner_1.ConsentBanner, null),
+        react_1.default.createElement(ConsentDialog_1.ConsentDialog, null)));
+}
+//# sourceMappingURL=Consent.js.map

package/lib/components/Consent/ConsentBanner.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function ConsentBanner(): JSX.Element | null;

package/lib/components/Consent/ConsentBanner.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.ConsentBanner = ConsentBanner;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const Link_1 = require("../../components/Link/Link");
+const hooks_1 = require("../../core/hooks");
+function ConsentBanner() {
+    var _a;
+    const { useConsent, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const consent = useConsent();
+    const { translate } = useTranslate();
+    if (!consent.enabled || consent.mode !== 'opt-in' || consent.decided || consent.isDialogOpen) {
+        return null;
+    }
+    const title = translate('consent.title', 'We value your privacy');
+    return (react_1.default.createElement(BannerWrapper, { "data-component-name": "Consent/ConsentBanner", role: "region", "aria-label": title },
+        react_1.default.createElement(Title, null, title),
+        react_1.default.createElement(Message, null,
+            translate('consent.message', 'By selecting "Accept all cookies", you agree to the use of cookies to improve site navigation, understand how our site is used, and support our marketing efforts. Select "Customize" to choose which types of cookies you allow.'),
+            ' ',
+            ((_a = consent.config) === null || _a === void 0 ? void 0 : _a.privacyPolicyUrl) ? (react_1.default.createElement(Link_1.Link, { to: consent.config.privacyPolicyUrl, external: true }, translate('consent.privacyPolicy', 'Privacy policy'))) : null),
+        react_1.default.createElement(Actions, null,
+            react_1.default.createElement(MainActions, null,
+                react_1.default.createElement(Button_1.Button, { variant: "outlined", onClick: consent.reject }, translate('consent.rejectAll', 'Reject all')),
+                react_1.default.createElement(Button_1.Button, { variant: "primary", onClick: consent.accept }, translate('consent.acceptAllCookies', 'Accept all cookies'))),
+            react_1.default.createElement(Button_1.Button, { variant: "text", onClick: consent.openDialog }, translate('consent.customize', 'Customize')))));
+}
+const slideUp = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const BannerWrapper = styled_components_1.default.div `
+  position: fixed;
+  left: var(--consent-banner-offset);
+  bottom: var(--consent-banner-offset);
+  z-index: var(--consent-banner-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--consent-banner-gap);
+  width: var(--consent-banner-width);
+  max-width: calc(100vw - 2 * var(--consent-banner-offset));
+  padding: var(--consent-banner-padding);
+  border: 1px solid var(--consent-banner-border-color);
+  border-radius: var(--consent-banner-border-radius);
+  background: var(--consent-banner-bg-color);
+  color: var(--consent-banner-text-color);
+  box-shadow: var(--consent-banner-box-shadow);
+  font-family: var(--font-family-base);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${slideUp} 240ms ease-out;
+  }
+`;
+const Title = styled_components_1.default.h2 `
+  margin: 0;
+  font-size: var(--consent-banner-title-font-size);
+  font-weight: var(--font-weight-bold);
+`;
+const Message = styled_components_1.default.p `
+  margin: 0;
+  color: var(--text-color-secondary);
+  font-size: var(--consent-banner-font-size);
+`;
+const Actions = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+  align-items: center;
+  justify-content: space-between;
+`;
+const MainActions = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+`;
+//# sourceMappingURL=ConsentBanner.js.map

package/lib/components/Consent/ConsentDialog.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function ConsentDialog(): JSX.Element | null;

package/lib/components/Consent/ConsentDialog.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentDialog = ConsentDialog;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const Link_1 = require("../../components/Link/Link");
+const Portal_1 = require("../../components/Portal/Portal");
+const Switch_1 = require("../../components/Switch/Switch");
+const hooks_1 = require("../../core/hooks");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const noop = () => { };
+function ConsentDialog() {
+    const { useConsent } = (0, hooks_1.useThemeHooks)();
+    const consent = useConsent();
+    if (!consent.enabled || !consent.isDialogOpen) {
+        return null;
+    }
+    return react_1.default.createElement(ConsentDialogContent, { consent: consent });
+}
+function ConsentDialogContent({ consent }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { draft, setCategory, dialogRef, close, save, categories } = (0, hooks_1.useConsentDialog)(consent);
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement(Overlay, { className: "scroll-lock", "data-component-name": "Consent/ConsentDialog", onMouseDown: (event) => {
+                if (event.target === event.currentTarget)
+                    close();
+            } },
+            react_1.default.createElement(Dialog, { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": "redocly-consent-dialog-title", tabIndex: -1 },
+                react_1.default.createElement(TitleRow, null,
+                    react_1.default.createElement(Title, { id: "redocly-consent-dialog-title" }, translate('consent.dialog.title', 'Cookie preferences')),
+                    react_1.default.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), "aria-label": translate('consent.dialog.close', 'Close'), onClick: close })),
+                react_1.default.createElement(Description, null,
+                    translate('consent.dialog.description', 'Choose which cookies this site may use. You can change your choice at any time.'),
+                    ' ',
+                    ((_a = consent.config) === null || _a === void 0 ? void 0 : _a.privacyPolicyUrl) ? (react_1.default.createElement(Link_1.Link, { to: consent.config.privacyPolicyUrl, external: true }, translate('consent.privacyPolicy', 'Privacy policy'))) : null),
+                categories.map((category) => {
+                    const gpcLocked = category.id === 'marketing' && consent.gpc;
+                    return (react_1.default.createElement(Row, { key: category.id },
+                        react_1.default.createElement(RowText, null,
+                            react_1.default.createElement(RowTitle, null, translate(category.titleTranslationKey, category.titleDefault)),
+                            react_1.default.createElement(RowDescription, null, translate(category.descriptionTranslationKey, category.descriptionDefault)),
+                            gpcLocked ? (react_1.default.createElement(GpcNotice, null, translate('consent.gpcNotice', 'Your browser asked us not to share your data, so this stays off.'))) : null),
+                        category.locked ? (react_1.default.createElement(SwitchGroup, { role: "group", "aria-label": translate('consent.alwaysOn', 'Always on') },
+                            react_1.default.createElement(Switch_1.Switch, { value: true, disabled: true, onChange: noop }))) : gpcLocked ? (react_1.default.createElement(SwitchGroup, { role: "group", "aria-label": translate('consent.alwaysOff', 'Always off') },
+                            react_1.default.createElement(Switch_1.Switch, { value: false, disabled: true, onChange: noop }))) : (react_1.default.createElement(Switch_1.Switch, { value: draft[category.id], onChange: (value) => setCategory(category.id, value) }))));
+                }),
+                react_1.default.createElement(Actions, null,
+                    react_1.default.createElement(Button_1.Button, { variant: "outlined", onClick: consent.reject }, translate('consent.rejectAll', 'Reject all')),
+                    react_1.default.createElement(Spacer, null),
+                    react_1.default.createElement(Button_1.Button, { variant: "outlined", onClick: consent.accept }, translate('consent.acceptAll', 'Accept all')),
+                    react_1.default.createElement(Button_1.Button, { variant: "primary", onClick: save }, translate('consent.savePreferences', 'Save preferences')))))));
+}
+const Overlay = styled_components_1.default.div `
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color-modal-overlay);
+  font-family: var(--font-family-base);
+`;
+const Dialog = styled_components_1.default.div `
+  width: var(--consent-dialog-width);
+  max-width: var(--consent-dialog-max-width);
+  padding: var(--consent-dialog-padding);
+  border-radius: var(--consent-dialog-border-radius);
+  background: var(--consent-dialog-bg-color);
+  box-shadow: var(--consent-dialog-box-shadow);
+`;
+const TitleRow = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+const Title = styled_components_1.default.h2 `
+  margin: 0 0 var(--spacing-xs);
+  font-size: var(--font-size-lg);
+`;
+const Description = styled_components_1.default.p `
+  margin: 0 0 var(--spacing-base);
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+const Row = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-base);
+  align-items: flex-start;
+  padding: var(--spacing-sm) 0;
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+const RowText = styled_components_1.default.div `
+  flex: 1;
+`;
+const RowTitle = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+`;
+const RowDescription = styled_components_1.default.div `
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+const GpcNotice = styled_components_1.default.div `
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+const SwitchGroup = styled_components_1.default.div `
+  flex: none;
+`;
+const Actions = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-base);
+  padding-top: var(--spacing-base);
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+const Spacer = styled_components_1.default.span `
+  flex: 1;
+`;
+//# sourceMappingURL=ConsentDialog.js.map

package/lib/components/Consent/ConsentSettingsLink.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function ConsentSettingsLink(): JSX.Element | null;

package/lib/components/Consent/ConsentSettingsLink.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsentSettingsLink = ConsentSettingsLink;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
+function ConsentSettingsLink() {
+    const { useConsent, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { consent: consentConfig, footer } = (0, hooks_1.useThemeConfig)() || {};
+    const consent = useConsent();
+    const { translate } = useTranslate();
+    if (!consent.enabled || (0, utils_1.resolveSettingsLinkPlacement)(consentConfig, footer) !== 'footer') {
+        return null;
+    }
+    return (react_1.default.createElement(SettingsLinkButton, { variant: "link", size: "small", "data-component-name": "Consent/ConsentSettingsLink", onClick: consent.openDialog }, translate('consent.settingsLink', 'Cookie preferences')));
+}
+const SettingsLinkButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin: var(--footer-link-padding-vertical) 0 var(--footer-link-padding-vertical) var(--spacing-sm);
+  padding: 0;
+  color: var(--footer-link-text-color);
+  font: inherit;
+  line-height: inherit;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--footer-link-color-hover);
+    background: none;
+  }
+`;
+//# sourceMappingURL=ConsentSettingsLink.js.map

package/lib/components/Consent/variables.d.ts

@@ -0,0 +1 @@
+export declare const consent: import("styled-components").RuleSet<object>;