@redocly/theme 0.70.0-next.2 → 0.70.0-next.3

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>;

package/lib/components/Consent/variables.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consent = void 0;
+const styled_components_1 = require("styled-components");
+exports.consent = (0, styled_components_1.css) `
+  /**
+  * @tokens Consent
+  */
+  --consent-banner-width: 380px;
+  --consent-banner-offset: var(--spacing-base); // @presenter Spacing
+  --consent-banner-bg-color: var(--bg-color); // @presenter Color
+  --consent-banner-text-color: var(--text-color-primary); // @presenter Color
+  --consent-banner-border-color: var(--border-color-primary); // @presenter Color
+  --consent-banner-border-radius: var(--border-radius-lg);
+  --consent-banner-box-shadow: var(--bg-raised-shadow);
+  --consent-banner-padding: var(--spacing-base); // @presenter Spacing
+  --consent-banner-gap: var(--spacing-sm); // @presenter Spacing
+  --consent-banner-title-font-size: var(--font-size-base);
+  --consent-banner-font-size: var(--font-size-sm);
+  --consent-banner-z-index: var(--z-index-overlay);
+
+  --consent-dialog-width: 560px;
+  --consent-dialog-max-width: calc(100vw - 2 * var(--spacing-base));
+  --consent-dialog-padding: var(--spacing-lg); // @presenter Spacing
+  --consent-dialog-border-radius: var(--border-radius-lg);
+  --consent-dialog-bg-color: var(--modal-bg-color); // @presenter Color
+  --consent-dialog-box-shadow: var(--modal-box-shadow);
+  --consent-dialog-row-border-color: var(--border-color-primary); // @presenter Color
+  --consent-dialog-description-color: var(--text-color-secondary); // @presenter Color
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Footer/Footer.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
 const FooterColumn_1 = require("../../components/Footer/FooterColumn");
+const ConsentSettingsLink_1 = require("../../components/Consent/ConsentSettingsLink");
 function Footer({ className }) {
     const { footer } = (0, hooks_1.useThemeConfig)() || {};
     const { items = [], copyrightText } = footer || {};
@@ -22,7 +23,9 @@ function Footer({ className }) {
         !!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 }))))),
-        react_1.default.createElement(FooterCopyrightWrapper, null, copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText }))));
+        react_1.default.createElement(FooterCopyrightWrapper, null,
+            copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText }),
+            react_1.default.createElement(ConsentSettingsLink_1.ConsentSettingsLink, null))));
 }
 const FooterCopyrightWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -1,9 +1,17 @@
 import React from 'react';
+export type JsonFold = {
+    isExpanded: (path: string, level: number) => boolean;
+    setExpanded: (path: string, expanded: boolean) => void;
+};
+type Foldable = [path: string, level: number];
+export declare function isFoldable(value: unknown): value is Record<string, unknown>;
+export declare function collectFoldables(value: unknown, path?: string, level?: number): Foldable[];
 export declare function JsonValue(props: {
     value: any;
     level: number;
+    path: string;
     standalone?: boolean;
-    defaultExpandLevel: number;
-    expandAllSignal: boolean | undefined;
+    fold: JsonFold;
     maxStringLength?: number;
 }): React.ReactNode;
+export {};

package/lib/components/JsonViewer/Helpers.js

@@ -3,30 +3,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFoldable = isFoldable;
+exports.collectFoldables = collectFoldables;
 exports.JsonValue = JsonValue;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ShowMoreToggleButton_1 = require("../../components/Button/ShowMoreToggleButton");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function isFoldable(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        Object.values(value).some((item) => item !== undefined));
+}
+function collectFoldables(value, path = '', level = 1) {
+    if (!isFoldable(value))
+        return [];
+    return Object.entries(value).flatMap(([key, child]) => {
+        const childPath = `${path}/${key}`;
+        return isFoldable(child)
+            ? [[childPath, level], ...collectFoldables(child, childPath, level + 1)]
+            : [];
+    });
+}
 function JsonValue(props) {
-    const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
+    const { standalone, fold, level, path, value, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
-    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
-    const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
-    const [prevLevel, setPrevLevel] = react_1.default.useState(level);
-    if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
-        setPrevExpandAllSignal(expandAllSignal);
-        setPrevLevel(level);
-        if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
-            setExpanded(expandAllSignal);
-        }
-    }
+    const isExpanded = fold.isExpanded(path, level);
     const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
     const valueType = typeof value;
-    const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
-    if (isPrimitive) {
+    if (!isFoldable(value)) {
         const isOversizedString = typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             standalone ? indent : null,
@@ -36,14 +42,14 @@ function JsonValue(props) {
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
     const valueElement = Array.isArray(value)
         ? value.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-            react_1.default.createElement(JsonValue, { value: item, level: level + 1, standalone: true, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
+            react_1.default.createElement(JsonValue, { value: item, level: level + 1, path: `${path}/${index}`, standalone: true, fold: fold, maxStringLength: maxStringLength }),
             index < value.length - 1 ? ',\n' : null)))
         : keys.map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: key },
-            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
+            react_1.default.createElement(JsonKeyValue, { name: key, value: value[key], level: level + 1, path: `${path}/${key}`, fold: fold, maxStringLength: maxStringLength }),
             index < keys.length - 1 ? ',\n' : null)));
     const openingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
-        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        level > 0 ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
         openingPunctuation,
         isExpanded ? '\n' : null)) : null;
     const closingPunctuationElement = standalone ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -56,32 +62,22 @@ function JsonValue(props) {
         closingPunctuationElement));
 }
 function JsonKeyValue(props) {
-    const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
+    const { fold, level, name, path, value, maxStringLength } = props;
     const indent = ' '.repeat(level * 2);
-    const keys = (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
-    const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
-    const [isExpandedState, setExpanded] = react_1.default.useState(expandAllSignal !== null && expandAllSignal !== void 0 ? expandAllSignal : level < defaultExpandLevel);
-    const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-    const [prevExpandAllSignal, setPrevExpandAllSignal] = react_1.default.useState(expandAllSignal);
-    if (prevExpandAllSignal !== expandAllSignal) {
-        setPrevExpandAllSignal(expandAllSignal);
-        if (expandAllSignal !== undefined) {
-            setExpanded(expandAllSignal);
-        }
-    }
+    const isExpanded = fold.isExpanded(path, level);
     const openingPunctuation = Array.isArray(value) ? '[' : '{';
     const closingPunctuation = Array.isArray(value) ? ']' : '}';
-    const valueElement = isCollapsible ? (react_1.default.createElement(react_1.default.Fragment, null,
+    const valueElement = isFoldable(value) ? (react_1.default.createElement(react_1.default.Fragment, null,
         openingPunctuation,
         isExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
             '\n',
-            react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }),
+            react_1.default.createElement(JsonValue, { value: value, level: level, path: path, fold: fold, maxStringLength: maxStringLength }),
             '\n')) : (' … '),
         isExpanded ? indent : null,
-        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, defaultExpandLevel: defaultExpandLevel, expandAllSignal: expandAllSignal, maxStringLength: maxStringLength }));
+        closingPunctuation)) : (react_1.default.createElement(JsonValue, { value: value, level: level, path: path, fold: fold, maxStringLength: maxStringLength }));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         indent,
-        isCollapsible ? (react_1.default.createElement(ExpandIcon, { onClick: () => setExpanded((v) => !v), isExpanded: isExpanded })) : null,
+        isFoldable(value) ? (react_1.default.createElement(ExpandIcon, { onClick: () => fold.setExpanded(path, !isExpanded), isExpanded: isExpanded })) : null,
         react_1.default.createElement("span", { className: "property token string" }, `"${name}"`),
         ": ",
         valueElement));

package/lib/components/JsonViewer/JsonViewer.js

@@ -42,21 +42,18 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const Helpers_1 = require("../../components/JsonViewer/Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, maxStringLength, }) {
-    const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-    const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
-    const expandAll = () => {
-        setExpandAllSignal(true);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(true);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const defaultExpandLevel = Math.max(1, expandLevel);
+    const foldables = react_1.default.useMemo(() => (0, Helpers_1.collectFoldables)(data), [data]);
+    const [expandedPaths, setExpandedPaths] = react_1.default.useState({});
+    const fold = {
+        isExpanded: (path, level) => { var _a; return (_a = expandedPaths[path]) !== null && _a !== void 0 ? _a : level < defaultExpandLevel; },
+        setExpanded: (path, expanded) => setExpandedPaths((prev) => (Object.assign(Object.assign({}, prev), { [path]: expanded }))),
     };
-    const collapseAll = () => {
-        setExpandAllSignal(false);
-        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(false);
-        setTimeout(() => {
-            setExpandAllSignal(undefined);
-        });
+    const hasFoldables = foldables.length > 0;
+    const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
+    const toggleAll = () => {
+        onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(!allExpanded);
+        setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
     };
     const source = JSON.stringify(data, null, 2);
     const hasHeader = title || controls;
@@ -65,13 +62,13 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 ? {
                     title,
                     className: 'code-block-header',
-                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.expand), { onClick: expandAll }) : undefined, collapse: showFoldingButtons
-                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: collapseAll }) : undefined }),
+                    controls: controls && Object.assign(Object.assign({}, controls), { copy: Object.assign(Object.assign({}, controls.copy), { data, onClick: onCopyClick, handleOutside: true }), expand: hasFoldables && !allExpanded
+                            ? Object.assign(Object.assign({}, controls.expand), { onClick: toggleAll }) : undefined, collapse: hasFoldables && allExpanded
+                            ? Object.assign(Object.assign({}, controls.collapse), { onClick: toggleAll }) : undefined }),
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel), maxStringLength: maxStringLength })))));
+                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, path: "", standalone: true, fold: fold, maxStringLength: maxStringLength })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

package/lib/components/Markdown/styles/base-table.js

@@ -23,7 +23,7 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
       color: var(--md-table-cell-text-color);
       font-size: var(--md-table-font-size);
       line-height: var(--md-table-line-height);
-      vertical-align: top;
+      vertical-align: var(--md-table-cell-vertical-align);
     }
 
     thead td,
@@ -72,6 +72,19 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
     th[align='right'] {
       text-align: right;
     }
+
+    th[valign='top'],
+    td[valign='top'] {
+      vertical-align: top;
+    }
+    th[valign='middle'],
+    td[valign='middle'] {
+      vertical-align: middle;
+    }
+    th[valign='bottom'],
+    td[valign='bottom'] {
+      vertical-align: bottom;
+    }
   }
 `;
 //# sourceMappingURL=base-table.js.map

package/lib/components/Markdown/variables.js

@@ -53,6 +53,7 @@ exports.markdown = (0, styled_components_1.css) `
   --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
   --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
   --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing
+  --md-table-cell-vertical-align: top;
 
   --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
   --md-table-head-text-color: var(--text-color-primary); // @presenter Color