@redocly/theme 0.65.0-next.3 → 0.65.0-next.5

package/lib/components/Button/Button.d.ts

@@ -14,6 +14,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     extraClass?: string;
     to?: string;
     external?: boolean;
+    languageInsensitive?: boolean;
     icon?: JSX.Element;
     iconPosition?: 'left' | 'right';
     title?: string;

package/lib/components/Button/Button.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -166,13 +177,14 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
     `}
 `;
 const ButtonComponent = (props) => {
+    const { languageInsensitive } = props, buttonProps = __rest(props, ["languageInsensitive"]);
     const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
-    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, buttonProps, { iconOnly: !props.children && props.icon !== null, tabIndex: tabIndex }),
         props.icon && props.iconPosition !== 'right' && props.icon,
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, onClick: props.onClick }, button));
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, languageInsensitive: languageInsensitive, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Catalog/CatalogTags.js

@@ -49,6 +49,7 @@ function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvat
 const CatalogTagsWrapper = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
+  row-gap: var(--catalog-tags-row-gap);
 `;
 const MoreTagsButton = styled_components_1.default.span `
   font-size: var(--catalog-tags-more-button-font-size);

package/lib/components/Catalog/variables.js

@@ -150,6 +150,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-row-gap: var(--spacing-xxs);
   --catalog-tags-placeholder-bg-color: var(--bg-color);
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -62,13 +62,25 @@ function DropdownMenuItem(_a) {
         }
     };
     className = className || '' + (active ? ' active' : '');
+    const sharedProps = {
+        $active: active,
+        $dangerous: dangerous,
+        $disabled: disabled,
+        $separator: separator,
+        $separatorLine: separatorLine,
+        'data-component-name': 'Dropdown/DropdownMenuItem',
+        className,
+        onClick: handleClick,
+        role,
+        style,
+    };
     if (to) {
-        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, "$separatorLine": separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
+        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, to: to }, sharedProps, dataAttributes, otherProps),
             prefix,
             children,
             suffix));
     }
-    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ "data-component-name": "Dropdown/DropdownMenuItem", className: className, role: role, style: style }, dataAttributes, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1, active: active, disabled: disabled, separator: separator, dangerous: dangerous, "$separatorLine": separatorLine }),
+    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({}, sharedProps, dataAttributes, { onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1 }),
         prefix,
         children || content,
         suffix));
@@ -109,7 +121,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     color: var(--dropdown-menu-item-color-hover);
   }
 
-  ${({ separator }) => separator &&
+  ${({ $separator }) => $separator &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
@@ -119,7 +131,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  ${({ active }) => active &&
+  ${({ $active }) => $active &&
     (0, styled_components_1.css) `
       background-color: var(--dropdown-menu-item-bg-color-active);
       color: var(--dropdown-menu-item-color-active);
@@ -128,7 +140,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  ${({ disabled }) => disabled &&
+  ${({ $disabled }) => $disabled &&
     (0, styled_components_1.css) `
       cursor: default;
       pointer-events: none;
@@ -152,7 +164,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  ${({ dangerous }) => dangerous &&
+  ${({ $dangerous }) => $dangerous &&
     (0, styled_components_1.css) `
       &:hover,
       & {

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -14,7 +14,7 @@ const Button_1 = require("../../components/Button/Button");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function LanguagePicker(props) {
-    const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
+    const { currentLocale, locales, getLocaleUrl } = (0, hooks_1.useLanguagePicker)();
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     if (locales.length < 2 || !currentLocale) {
@@ -23,8 +23,9 @@ function LanguagePicker(props) {
     const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium" }));
     const languageItems = locales.map((locale) => ({
         content: locale.name || locale.code || '',
+        to: getLocaleUrl(locale.code),
+        languageInsensitive: true,
         onAction: () => {
-            setLocale(locale.code);
             props.onChangeLanguage(locale.code);
             telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
         },

package/lib/components/Markdown/Markdown.js

@@ -39,6 +39,7 @@ const utils_1 = require("../../core/utils");
 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 }) => ({
     'data-component-name': 'Markdown/Markdown',
     className,
@@ -85,17 +86,82 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     max-width: 100%;
   }
 
-  h1.md,
-  h2.md,
-  h3.md,
-  h4.md,
-  h5.md,
-  h6.md {
+  .${constants_1.HEADING_ANCHOR_CLASS} {
     font-weight: var(--heading-font-weight);
     font-family: var(--heading-font-family);
     position: relative;
 
     scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    ${(0, heading_anchor_1.headingAnchorCss)(constants_1.ANCHOR_CLASS)};
+
+    h1, h2, h3, h4, h5, h6 {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-sm);
+      margin: 0;
+      font: inherit;
+      color: inherit;
+    }
+  }
+
+  .${constants_1.H1_CLASS} {
+    ${(0, utils_1.typography)('h1')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+
+    h1 code {
+      font-size: var(--h1-font-size);
+      line-height: var(--h1-code-line-height);
+    }
+  }
+
+  .${constants_1.H2_CLASS} {
+    ${(0, utils_1.typography)('h2')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+
+    h2 code {
+      font-size: var(--h2-font-size);
+      line-height: var(--h2-code-line-height);
+    }
+  }
+
+  .${constants_1.H3_CLASS} {
+    ${(0, utils_1.typography)('h3')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+
+    h3 code {
+      font-size: var(--h3-font-size);
+      line-height: var(--h3-code-line-height);
+    }
+  }
+
+  .${constants_1.H4_CLASS} {
+    ${(0, utils_1.typography)('h4')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+
+    h4 code {
+      font-size: var(--h4-font-size);
+      line-height: var(--h4-code-line-height);
+    }
+  }
+
+  .${constants_1.H5_CLASS} {
+    ${(0, utils_1.typography)('h5')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+
+    h5 code {
+      font-size: var(--h5-font-size);
+      line-height: var(--h5-code-line-height);
+    }
+  }
+
+  .${constants_1.H6_CLASS} {
+    ${(0, utils_1.typography)('h6')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+
+    h6 code {
+      font-size: var(--h6-font-size);
+      line-height: var(--h6-code-line-height);
+    }
   }
 
   strong {
@@ -139,71 +205,71 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     margin: var(--md-paragraph-margin);
   }
 
-  h1.md {
+  /**
+   * @deprecated Legacy styles for ejected Heading components that render h1-h6 as the root.
+   *
+   * Deprecated legacy heading styles start.
+   */
+  h1.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h2.md {
+  h2.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h3.md {
+  h3.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h4.md {
+  h4.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h5.md {
+  h5.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h6.md {
+  h6.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h1.md code {
+  h1.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h1-font-size);
     line-height: var(--h1-code-line-height);
   }
 
-  h2.md code {
+  h2.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h2-font-size);
     line-height: var(--h2-code-line-height);
   }
 
-  h3.md code {
+  h3.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h3-font-size);
     line-height: var(--h3-code-line-height);
   }
 
-  h4.md code {
+  h4.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h4-font-size);
     line-height: var(--h4-code-line-height);
   }
 
-  h5.md code {
+  h5.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h5-font-size);
     line-height: var(--h5-code-line-height);
   }
 
-  h6.md code {
+  h6.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h6-font-size);
     line-height: var(--h6-code-line-height);
   }
+  /* Deprecated legacy heading styles end. */
 
   code {
     color: var(--inline-code-text-color);
@@ -267,8 +333,8 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ul.md,
-  ol.md {
+  ul.${constants_1.MARKDOWN_CLASS_NAME},
+  ol.${constants_1.MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

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

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdownBaseTableCss = void 0;
 const styled_components_1 = require("styled-components");
+const constants_1 = require("../../../core/constants");
 exports.markdownBaseTableCss = (0, styled_components_1.css) `
   .md-table-wrapper {
     overflow-x: auto;
   }
 
-  table.md {
+  table.${constants_1.MARKDOWN_CLASS_NAME} {
     width: 100%;
     overflow: hidden;
     word-break: keep-all;

package/lib/components/Markdown/styles/heading-anchor.d.ts

@@ -1,2 +1,2 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare function headingAnchorCss(className?: string): FlattenSimpleInterpolation;
+export declare function headingAnchorCss(className: string): FlattenSimpleInterpolation;

package/lib/components/Markdown/styles/heading-anchor.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.headingAnchorCss = headingAnchorCss;
 const styled_components_1 = require("styled-components");
-function headingAnchorCss(className = 'anchor') {
+function headingAnchorCss(className) {
     return (0, styled_components_1.css) `
     .${className}.before {
       position: absolute;

package/lib/components/Search/variables.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.search = void 0;
 const styled_components_1 = require("styled-components");
-/* eslint-disable theme/no-raw-colors-in-styles */
 exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
@@ -148,7 +147,7 @@ exports.search = (0, styled_components_1.css) `
   * @tokens AI Search
   */
 
-  --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
+  --search-ai-gradient: linear-gradient(to right, var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy)), var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy)));
 
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
@@ -264,5 +263,4 @@ exports.search = (0, styled_components_1.css) `
 
   // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/components/UserMenu/LoginButton.js

@@ -13,6 +13,6 @@ function LoginButton({ href, className, variant = 'primary', size = 'medium', la
     const telemetry = useTelemetry();
     const buttonLabel = label || translate(labelTranslationKey, 'Login');
     return (react_1.default.createElement("span", { "data-component-name": componentName, className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, languageInsensitive: true, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/core/constants/heading.d.ts

@@ -0,0 +1,9 @@
+export declare const HEADING_ANCHOR_CLASS = "heading-anchor";
+export declare const ANCHOR_CLASS = "anchor";
+export declare const HEADING_CLASS_PREFIX = "heading-level";
+export declare const H1_CLASS = "heading-level-1";
+export declare const H2_CLASS = "heading-level-2";
+export declare const H3_CLASS = "heading-level-3";
+export declare const H4_CLASS = "heading-level-4";
+export declare const H5_CLASS = "heading-level-5";
+export declare const H6_CLASS = "heading-level-6";

package/lib/core/constants/heading.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H6_CLASS = exports.H5_CLASS = exports.H4_CLASS = exports.H3_CLASS = exports.H2_CLASS = exports.H1_CLASS = exports.HEADING_CLASS_PREFIX = exports.ANCHOR_CLASS = exports.HEADING_ANCHOR_CLASS = void 0;
+exports.HEADING_ANCHOR_CLASS = 'heading-anchor';
+exports.ANCHOR_CLASS = 'anchor';
+exports.HEADING_CLASS_PREFIX = 'heading-level';
+exports.H1_CLASS = `${exports.HEADING_CLASS_PREFIX}-1`;
+exports.H2_CLASS = `${exports.HEADING_CLASS_PREFIX}-2`;
+exports.H3_CLASS = `${exports.HEADING_CLASS_PREFIX}-3`;
+exports.H4_CLASS = `${exports.HEADING_CLASS_PREFIX}-4`;
+exports.H5_CLASS = `${exports.HEADING_CLASS_PREFIX}-5`;
+exports.H6_CLASS = `${exports.HEADING_CLASS_PREFIX}-6`;
+//# sourceMappingURL=heading.js.map

package/lib/core/constants/index.d.ts

@@ -7,3 +7,5 @@ export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
 export * from './feedback';
+export * from './heading';
+export * from './markdown';

package/lib/core/constants/index.js

@@ -23,4 +23,6 @@ __exportStar(require("./breadcrumb"), exports);
 __exportStar(require("./request-methods"), exports);
 __exportStar(require("./mcp"), exports);
 __exportStar(require("./feedback"), exports);
+__exportStar(require("./heading"), exports);
+__exportStar(require("./markdown"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/markdown.d.ts

@@ -0,0 +1 @@
+export declare const MARKDOWN_CLASS_NAME = "md";

package/lib/core/constants/markdown.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MARKDOWN_CLASS_NAME = void 0;
+exports.MARKDOWN_CLASS_NAME = 'md';
+//# sourceMappingURL=markdown.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.d.ts

@@ -10,15 +10,4 @@ type Params = {
     root: React.RefObject<HTMLDivElement | null>;
 };
 export declare function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }: Params): WalkthroughStepsState;
-type StepsGroup = {
-    freeSpace: number;
-    usedSpace: number;
-    offset: number;
-    steps: {
-        offset: number;
-        height: number;
-        ref?: HTMLElement;
-    }[];
-};
-export declare function getGroupMarkers(group: StepsGroup): number[];
 export {};

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeWalkthroughSteps = useCodeWalkthroughSteps;
-exports.getGroupMarkers = getGroupMarkers;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const js_utils_1 = require("../../utils/js-utils");
@@ -97,7 +96,7 @@ function useCodeWalkthroughSteps({ steps, enableDeepLink, root, }) {
             return;
         }
         step.compRef = element;
-        setVisibleSteps((prevSteps) => (0, js_utils_1.insertAt)(prevSteps, step.index, step));
+        setVisibleSteps((prevSteps) => insertVisibleStepInOrder(prevSteps, step));
     }, [stepsMap]);
     const removeStep = (0, react_1.useCallback)((stepId) => {
         const step = stepsMap.get(stepId);
@@ -315,4 +314,10 @@ function getNormalizedNumber(options) {
     const { min, max, value } = options;
     return (value - min) / (max - min);
 }
+function insertVisibleStepInOrder(visible, step) {
+    const others = visible.filter((s) => s.id !== step.id);
+    const laterAt = others.findIndex((s) => s.index > step.index);
+    const at = laterAt === -1 ? others.length : laterAt;
+    return (0, js_utils_1.insertAt)(others, at, step);
+}
 //# sourceMappingURL=use-code-walkthrough-steps.js.map

package/lib/core/hooks/use-active-heading.js

@@ -4,6 +4,7 @@ exports.useActiveHeading = useActiveHeading;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../utils");
+const constants_1 = require("../constants");
 function useActiveHeading(contentElement, displayedHeadings) {
     const [heading, setHeading] = (0, react_1.useState)(undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
@@ -42,7 +43,7 @@ function useActiveHeading(contentElement, displayedHeadings) {
         return headingElements.findIndex((item) => item.id === id);
     }, [headingElements]);
     const findHeaders = (allContent) => {
-        const allHeaders = allContent.querySelectorAll('.heading-anchor');
+        const allHeaders = allContent.querySelectorAll(`.${constants_1.HEADING_ANCHOR_CLASS}`);
         const headers = Array.from(allHeaders);
         if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
             const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);

package/lib/core/hooks/use-language-picker.d.ts

@@ -1,6 +1,11 @@
 import type { L10nConfig } from '../types/hooks';
-export declare function useLanguagePicker(): {
+export type UseLanguagePickerResult = {
     currentLocale: L10nConfig['locales'][number] | undefined;
     locales: L10nConfig['locales'];
+    getLocaleUrl: (value: string) => string;
+    /**
+     * @deprecated Use `getLocaleUrl` to build the URL for the target locale, then pass it to `<Link>`.
+     */
     setLocale: (value: string) => void;
 };
+export declare function useLanguagePicker(): UseLanguagePickerResult;

package/lib/core/hooks/use-language-picker.js

@@ -9,15 +9,23 @@ function useLanguagePicker() {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     const { currentLocale, locales, defaultLocale } = useL10nConfig();
+    const location = (0, react_router_dom_1.useLocation)();
     const locale = locales.find((l) => l.code === currentLocale);
+    function getLocaleUrl(value) {
+        let newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales);
+        if (location.search) {
+            newLangPathname += location.search;
+        }
+        return (0, urls_1.addLeadingSlash)(newLangPathname);
+    }
     function setLocale(value) {
-        const newLangPathname = (0, urls_1.withPathPrefix)((0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, value, locales));
-        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        const newUrlWithLanguage = (0, urls_1.withPathPrefix)(getLocaleUrl(value));
         loadAndNavigate({ navigate, to: newUrlWithLanguage });
     }
     return {
         currentLocale: locale,
         locales,
+        getLocaleUrl,
         setLocale,
     };
 }

package/lib/core/styles/palette.dark.js

@@ -22,6 +22,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #55576166;
         --color-brand-subtle-4: #6e6f7a66;
         --text-color-on-color: #000000;
+
+        --search-ai-gradient-start-color: var(--color-brand-3); 
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
         case 'pink':
             return (0, styled_components_1.css) `
@@ -41,6 +44,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #85366866;
         --color-brand-subtle-4: #a03a7b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
@@ -60,6 +66,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #8b3c4266;
         --color-brand-subtle-4: #a9434c66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
@@ -79,6 +88,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #93632f66;
         --color-brand-subtle-4: #b6732a66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
@@ -98,6 +110,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #2b715e66;
         --color-brand-subtle-4: #2b816b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4);
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
@@ -117,6 +132,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #246e7f66;
         --color-brand-subtle-4: #1b809766;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
@@ -136,6 +154,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #2a679566;
         --color-brand-subtle-4: #2277b966;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
@@ -155,6 +176,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #36498866;
         --color-brand-subtle-4: #3952a466;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
@@ -174,6 +198,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #43438580;
         --color-brand-subtle-4: #4c4ca080;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `