@ably/ui 15.8.1 → 16.0.0-dev.308accbb

package/index.d.ts

@@ -420,8 +420,12 @@ type FeaturedLinkProps = {
     newWindow?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    /**
+     * Optional class name for the icon.
+     */
+    iconClassName?: string;
 };
-const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
+const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, iconClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
 export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.d.ts.map
 }
@@ -472,9 +476,9 @@ type FlyoutProps = {
      */
     menuItems: {
         /**
-         * Label for the menu item.
+         * Name for the menu item.
          */
-        label: string;
+        name: string;
         /**
          * Optional content to be displayed in the flyout panel.
          */
@@ -504,29 +508,39 @@ type FlyoutProps = {
      * Optional class name for the viewport.
      */
     viewPortClassName?: string;
-    /**
-     * Flag to indicate if animation should be applied.
-     */
-    hasAnimation: boolean;
 };
-const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, hasAnimation, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
 export default Flyout;
 //# sourceMappingURL=Flyout.d.ts.map
 }
 
-declare module '@ably/ui/core/Footer' {
-type FooterProps = {
-    paths: {
-        ablyStack: string;
-        bestSupport: string;
-        highPerformer: string;
-        usersMostLikely: string;
-        bestMeetsRequirements: string;
-    };
-    urlBase: string;
-    statusUrl: string;
+declare module '@ably/ui/core/Footer/data' {
+import { IconName } from ".@ably/ui/core/Icon/types";
+type FooterLinksProps = {
+    title: string;
+    links: {
+        label: string;
+        link: string;
+        badge?: string;
+    }[];
 };
-const Footer: ({ paths, urlBase, statusUrl }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export const footerLinks: FooterLinksProps[];
+export const bottomFooterLinks: {
+    label: string;
+    link: string;
+}[];
+export const socialLinks: {
+    key: string;
+    colorIcon: IconName;
+    monoIcon: IconName;
+    link: string;
+}[];
+export {};
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Footer' {
+const Footer: () => import("react/jsx-runtime").JSX.Element;
 export default Footer;
 //# sourceMappingURL=Footer.d.ts.map
 }
@@ -534,9 +548,7 @@ export default Footer;
 declare module '@ably/ui/core/Header/HeaderLinks' {
 import React from "react";
 import { HeaderProps } from ".@ably/ui/core/Header";
-export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
-    className?: string;
-}>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton" | "className">>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
@@ -576,6 +588,14 @@ export type HeaderSessionState = {
  * Props for the Header component.
  */
 export type HeaderProps = {
+    /**
+     * Optional classnames to add to the header
+     */
+    className?: string;
+    /**
+     * Indicates if the notice banner is visible.
+     */
+    isNoticeVisible?: boolean;
     /**
      * Optional search bar element.
      */
@@ -605,6 +625,10 @@ export type HeaderProps = {
          */
         external?: boolean;
     }[];
+    /**
+     * Optional classname for styling the header links container.
+     */
+    headerLinksClassName?: string;
     /**
      * Optional desktop navigation element.
      */
@@ -684,60 +708,26 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
-declare module '@ably/ui/core/LinkButton' {
-import React from "react";
-import { ButtonPropsBase } from "@ably/ui/core/Button";
-import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
-export type LinkButtonProps = ButtonPropsBase & {
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    iconColor?: ColorClass | ColorThemeSet;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-const LinkButton: React.FC<LinkButtonProps>;
-export default LinkButton;
-//# sourceMappingURL=LinkButton.d.ts.map
-}
-
-declare module '@ably/ui/core/Loader' {
-type LoaderProps = {
-    size?: string;
-    ringColor?: string;
-    additionalCSS?: string;
-};
-const Loader: ({ ringColor, size, additionalCSS, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
-export default Loader;
-//# sourceMappingURL=Loader.d.ts.map
-}
-
-declare module '@ably/ui/core/Logo' {
-import React from "react";
-type LogoProps = {
-    dataId?: string;
-    logoUrl?: string;
-    logoAlt?: string;
-    href?: string;
-    additionalImgAttrs?: object;
-    additionalLinkAttrs?: object;
-    theme?: "light" | "dark";
-    variant?: "default" | "mono";
-    orientation?: "default" | "stacked";
+declare module '@ably/ui/core/LegacyFooter/LegacyFooter' {
+type LegacyFooterProps = {
+    paths: {
+        ablyStack: string;
+        bestSupport: string;
+        highPerformer: string;
+        usersMostLikely: string;
+        bestMeetsRequirements: string;
+    };
+    urlBase: string;
+    statusUrl: string;
 };
-const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
-//# sourceMappingURL=Logo.d.ts.map
-}
-
-declare module '@ably/ui/core/Meganav/component' {
-export default function Meganav({ themeName, addSearchApiKey }: {
-    themeName: any;
-    addSearchApiKey: any;
-}): () => void;
-//# sourceMappingURL=component.d.ts.map
+const LegacyFooter: ({ paths, urlBase, statusUrl }: LegacyFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyFooter;
+//# sourceMappingURL=LegacyFooter.d.ts.map
 }
 
-declare module '@ably/ui/core/Meganav' {
+declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
 import { ReactNode } from "react";
-import { ColorClass } from "@ably/ui/core/styles/colors/types";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
 export type MeganavTheme = {
     backgroundColor?: ColorClass;
     textColor?: ColorClass;
@@ -815,13 +805,13 @@ type MeganavProps = {
     statusUrl: string;
     searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
-export default Meganav;
-//# sourceMappingURL=Meganav.d.ts.map
+const LegacyMeganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyMeganav;
+//# sourceMappingURL=LegacyMeganav.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavBlogPostsList' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavBlogPostsList' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 type MeganavBlogPostsListProps = {
     recentBlogPosts: {
         link: string;
@@ -835,8 +825,8 @@ export default MeganavBlogPostsList;
 //# sourceMappingURL=MeganavBlogPostsList.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentCompany' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentCompany' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
 type MeganavContentCompanyProps = {
     absUrl: AbsUrl;
     paths?: MeganavPaths;
@@ -846,8 +836,8 @@ export default MeganavContentCompany;
 //# sourceMappingURL=MeganavContentCompany.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentDevelopers' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentDevelopers' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
     absUrl: AbsUrl;
     statusUrl: string;
@@ -856,8 +846,8 @@ export default MeganavContentDevelopers;
 //# sourceMappingURL=MeganavContentDevelopers.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentProducts' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentProducts' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
 type MeganavContentProductsProps = {
     paths?: MeganavPaths;
     absUrl: AbsUrl;
@@ -867,8 +857,8 @@ export default MeganavContentProducts;
 //# sourceMappingURL=MeganavContentProducts.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentUseCases' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentUseCases' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavContentUseCases: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -876,7 +866,7 @@ export default MeganavContentUseCases;
 //# sourceMappingURL=MeganavContentUseCases.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControl/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControl/component' {
 export default MeganavControl;
 function MeganavControl(): {
     teardown: () => void;
@@ -885,9 +875,9 @@ function MeganavControl(): {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControl' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControl' {
 import { ReactNode } from "react";
-import { MeganavTheme } from "@ably/ui/core/Meganav";
+import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavControlProps = {
     ariaControls: string;
     ariaLabel: string;
@@ -900,7 +890,7 @@ export default MeganavControl;
 //# sourceMappingURL=MeganavControl.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobileDropdown/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown/component' {
 export default MeganavControlMobileDropdown;
 function MeganavControlMobileDropdown({ clearPanels }: {
     clearPanels: any;
@@ -911,8 +901,8 @@ function MeganavControlMobileDropdown({ clearPanels }: {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobileDropdown' {
-import { MeganavTheme } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown' {
+import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 const MeganavControlMobileDropdown: ({ theme }: {
     theme: MeganavTheme;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -920,7 +910,7 @@ export default MeganavControlMobileDropdown;
 //# sourceMappingURL=MeganavControlMobileDropdown.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelClose/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose/component' {
 function _default(): {
     teardown: () => void;
     clear: () => void;
@@ -929,7 +919,7 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelClose' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose' {
 type MeganavControlMobilePanelCloseProps = {
     ariaControls: string;
     displayHr?: boolean;
@@ -939,7 +929,7 @@ export default MeganavControlMobilePanelClose;
 //# sourceMappingURL=MeganavControlMobilePanelClose.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelOpen/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelOpen/component' {
 function _default(): {
     teardown: () => void;
     clear: () => void;
@@ -948,7 +938,7 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelOpen' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelOpen' {
 import { ReactNode } from "react";
 type MeganavControlMobilePanelOpenProps = {
     ariaControls: string;
@@ -959,9 +949,9 @@ export default MeganavControlMobilePanelOpen;
 //# sourceMappingURL=MeganavControlMobilePanelOpen.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsDesktop' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsDesktop' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/Meganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavDesktopItems = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -975,9 +965,9 @@ export default _default;
 //# sourceMappingURL=MeganavItemsDesktop.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsMobile' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsMobile' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavItemsMobileProps = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -993,8 +983,8 @@ export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsSignedIn' {
-import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsSignedIn' {
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
@@ -1006,8 +996,8 @@ export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearch' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearch' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
     dataId?: string;
@@ -1016,7 +1006,7 @@ export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchAutocomplete/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchAutocomplete/component' {
 function _default(apiKey: any): {
     teardown: () => void;
     clear: () => void;
@@ -1025,14 +1015,14 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchAutocomplete' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchAutocomplete' {
 const MeganavSearchAutocomplete: () => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearchAutocomplete;
 //# sourceMappingURL=MeganavSearchAutocomplete.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchPanel' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchPanel' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavSearchPanel: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -1040,7 +1030,7 @@ export default MeganavSearchPanel;
 //# sourceMappingURL=MeganavSearchPanel.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchSuggestions/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions/component' {
 export default MeganavSearchSuggestions;
 function MeganavSearchSuggestions(): {
     teardown: () => void;
@@ -1049,8 +1039,8 @@ function MeganavSearchSuggestions(): {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchSuggestions' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 type MeganavSearchSuggestionsProps = {
     absUrl: AbsUrl;
     displaySupportLink: boolean;
@@ -1060,7 +1050,164 @@ export default MeganavSearchSuggestions;
 //# sourceMappingURL=MeganavSearchSuggestions.d.ts.map
 }
 
+declare module '@ably/ui/core/LegacyMeganav/SignOutLink' {
+import { MouseEventHandler, ReactNode } from "react";
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+type SignOutLinkProps = {
+    token: string;
+    href: string;
+    text: string;
+    children: ({ href, text, onClick, }: {
+        href: string;
+        text: string;
+        onClick: MouseEventHandler<HTMLAnchorElement>;
+    }) => ReactNode;
+    absUrl: AbsUrl;
+};
+const SignOutLink: ({ token, href, text, children, absUrl, }: SignOutLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default SignOutLink;
+//# sourceMappingURL=SignOutLink.d.ts.map
+}
+
+declare module '@ably/ui/core/LegacyMeganav/component' {
+export default function Meganav({ themeName, addSearchApiKey }: {
+    themeName: any;
+    addSearchApiKey: any;
+}): () => void;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/LinkButton' {
+import React from "react";
+import { ButtonPropsBase } from "@ably/ui/core/Button";
+import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
+export type LinkButtonProps = ButtonPropsBase & {
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    iconColor?: ColorClass | ColorThemeSet;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+const LinkButton: React.FC<LinkButtonProps>;
+export default LinkButton;
+//# sourceMappingURL=LinkButton.d.ts.map
+}
+
+declare module '@ably/ui/core/Loader' {
+type LoaderProps = {
+    size?: string;
+    ringColor?: string;
+    additionalCSS?: string;
+};
+const Loader: ({ ringColor, size, additionalCSS, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Loader;
+//# sourceMappingURL=Loader.d.ts.map
+}
+
+declare module '@ably/ui/core/Logo' {
+import React from "react";
+type LogoProps = {
+    dataId?: string;
+    logoUrl?: string;
+    logoAlt?: string;
+    href?: string;
+    additionalImgAttrs?: object;
+    additionalLinkAttrs?: object;
+    theme?: "light" | "dark";
+    variant?: "default" | "mono";
+    orientation?: "default" | "stacked";
+};
+const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=Logo.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavMobile' {
+import { AccordionData } from ".@ably/ui/core/Accordion/types";
+export const MeganavMobile: ({ navItems }: {
+    navItems: AccordionData[];
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MeganavMobile.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavPanel' {
+import React from "react";
+import { FlyoutPanelHighlight, FlyoutPanelList } from "@ably/ui/core/data";
+export const MeganavPanel: ({ displayProductTile, panelLeft, panelLeftClassName, panelRightHeading, panelRightItems, panelRightBottom, }: {
+    displayProductTile?: boolean;
+    panelLeft?: FlyoutPanelHighlight;
+    panelLeftClassName?: string;
+    panelRightHeading?: string;
+    panelRightItems: FlyoutPanelList[];
+    panelRightBottom?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MeganavPanel.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/data' {
+import React from "react";
+import { IconName } from ".@ably/ui/core/Icon/types";
+export type FlyoutPanelList = {
+    label: string;
+    icon: IconName;
+    link: string;
+    isMobile?: boolean;
+};
+export type FlyoutPanelHighlight = {
+    heading: string;
+    content: string;
+    labelLink: string;
+    url: string;
+    image: string;
+};
+export type MenuItem = {
+    name: string;
+    link?: string;
+    isHiddenMobile?: boolean;
+    content?: React.ReactNode;
+    panelClassName?: string;
+};
+export const ablyAwards: {
+    image: string;
+    desc: string;
+}[];
+export const menuItemLinks: {
+    name: string;
+    link: string;
+    isHiddenMobile: boolean;
+}[];
+export const menuItemsForHeader: MenuItem[];
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav' {
+import { HeaderSessionState } from "@ably/ui/core/Header";
+export type MeganavNoticeBannerProps = {
+    props: {
+        title: string;
+        bodyText: string;
+        buttonLink: string;
+        buttonLabel: string;
+        closeBtn: boolean;
+    };
+    config: {
+        cookieId: string;
+        noticeId: string | number;
+        options: {
+            collapse: boolean;
+        };
+    };
+};
+export type MeganavProps = {
+    sessionState: HeaderSessionState;
+    notice?: MeganavNoticeBannerProps;
+    theme?: string;
+};
+const Meganav: ({ sessionState, notice, theme }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+export default Meganav;
+//# sourceMappingURL=Meganav.d.ts.map
+}
+
 declare module '@ably/ui/core/Notice/component' {
+export const COLLAPSE_TRIGGER_DISTANCE: 5;
 export default Notice;
 function Notice({ bannerContainer, cookieId, noticeId, options }: {
     bannerContainer: any;
@@ -1206,7 +1353,8 @@ export default ProductLabel;
 
 declare module '@ably/ui/core/ProductTile/data' {
 import { IconName } from ".@ably/ui/core/Icon/types";
-export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
+export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
+export type ProductName = (typeof productNames)[number];
 type Products = Record<ProductName, {
     label: string;
     description: string;
@@ -1295,25 +1443,6 @@ export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map
 }
 
-declare module '@ably/ui/core/SignOutLink' {
-import { MouseEventHandler, ReactNode } from "react";
-import { AbsUrl } from "@ably/ui/core/Meganav";
-type SignOutLinkProps = {
-    token: string;
-    href: string;
-    text: string;
-    children: ({ href, text, onClick, }: {
-        href: string;
-        text: string;
-        onClick: MouseEventHandler<HTMLAnchorElement>;
-    }) => ReactNode;
-    absUrl: AbsUrl;
-};
-const SignOutLink: ({ token, href, text, children, absUrl, }: SignOutLinkProps) => import("react/jsx-runtime").JSX.Element;
-export default SignOutLink;
-//# sourceMappingURL=SignOutLink.d.ts.map
-}
-
 declare module '@ably/ui/core/Slider' {
 import { ReactNode } from "react";
 interface SliderProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.8.1",
+  "version": "16.0.0-dev.308accbb",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/core/Meganav/component.js

@@ -1,2 +0,0 @@
-import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName??null),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
-//# sourceMappingURL=component.js.map

package/core/MeganavBlogPostsList/component.js

@@ -1,2 +0,0 @@
-import{queryIdAll}from"../dom-query";import{selectRecentBlogPosts}from"../remote-blogs-posts";import{connectState}from"../remote-data-store";const template=({link,title,pubDate})=>{const[li,a,heading,copy]=["li","a","p","p"].map(el=>document.createElement(el));a.href=link;a.classList.add("ui-meganav-media","group");heading.textContent=title;heading.classList.add("ui-meganav-media-heading");copy.textContent=pubDate;copy.classList.add("ui-meganav-media-copy");a.appendChild(heading);a.appendChild(copy);li.appendChild(a);return li};export default(()=>{connectState(selectRecentBlogPosts,recentBlogPosts=>{if(Array.isArray(recentBlogPosts)&&recentBlogPosts.length>0){const sections=queryIdAll("meganav-company-panel-blog-section");const containers=queryIdAll("meganav-company-panel-recent-blog-posts");Array.from(containers).forEach(container=>{const fragment=document.createDocumentFragment();recentBlogPosts.forEach(post=>fragment.appendChild(template(post)));container.appendChild(fragment)});Array.from(sections).forEach(section=>section.classList.remove("hidden"))}})});
-//# sourceMappingURL=component.js.map

package/core/MeganavBlogPostsList/component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/MeganavBlogPostsList/component.js"],"sourcesContent":["import { queryIdAll } from \"../dom-query\";\nimport { selectRecentBlogPosts } from \"../remote-blogs-posts\";\nimport { connectState } from \"../remote-data-store\";\n\nconst template = ({ link, title, pubDate }) => {\n  const [li, a, heading, copy] = [\"li\", \"a\", \"p\", \"p\"].map((el) =>\n    document.createElement(el),\n  );\n\n  a.href = link;\n  a.classList.add(\"ui-meganav-media\", \"group\");\n\n  heading.textContent = title;\n  heading.classList.add(\"ui-meganav-media-heading\");\n\n  copy.textContent = pubDate;\n  copy.classList.add(\"ui-meganav-media-copy\");\n\n  a.appendChild(heading);\n  a.appendChild(copy);\n  li.appendChild(a);\n\n  return li;\n};\n\nexport default () => {\n  connectState(selectRecentBlogPosts, (recentBlogPosts) => {\n    if (Array.isArray(recentBlogPosts) && recentBlogPosts.length > 0) {\n      const sections = queryIdAll(\"meganav-company-panel-blog-section\");\n      const containers = queryIdAll(\"meganav-company-panel-recent-blog-posts\");\n\n      Array.from(containers).forEach((container) => {\n        const fragment = document.createDocumentFragment();\n        recentBlogPosts.forEach((post) => fragment.appendChild(template(post)));\n        container.appendChild(fragment);\n      });\n\n      Array.from(sections).forEach((section) =>\n        section.classList.remove(\"hidden\"),\n      );\n    }\n  });\n};\n"],"names":["queryIdAll","selectRecentBlogPosts","connectState","template","link","title","pubDate","li","a","heading","copy","map","el","document","createElement","href","classList","add","textContent","appendChild","recentBlogPosts","Array","isArray","length","sections","containers","from","forEach","container","fragment","createDocumentFragment","post","section","remove"],"mappings":"AAAA,OAASA,UAAU,KAAQ,cAAe,AAC1C,QAASC,qBAAqB,KAAQ,uBAAwB,AAC9D,QAASC,YAAY,KAAQ,sBAAuB,CAEpD,MAAMC,SAAW,CAAC,CAAEC,IAAI,CAAEC,KAAK,CAAEC,OAAO,CAAE,IACxC,KAAM,CAACC,GAAIC,EAAGC,QAASC,KAAK,CAAG,CAAC,KAAM,IAAK,IAAK,IAAI,CAACC,GAAG,CAAC,AAACC,IACxDC,SAASC,aAAa,CAACF,IAGzBJ,CAAAA,EAAEO,IAAI,CAAGX,KACTI,EAAEQ,SAAS,CAACC,GAAG,CAAC,mBAAoB,QAEpCR,CAAAA,QAAQS,WAAW,CAAGb,MACtBI,QAAQO,SAAS,CAACC,GAAG,CAAC,2BAEtBP,CAAAA,KAAKQ,WAAW,CAAGZ,QACnBI,KAAKM,SAAS,CAACC,GAAG,CAAC,yBAEnBT,EAAEW,WAAW,CAACV,SACdD,EAAEW,WAAW,CAACT,MACdH,GAAGY,WAAW,CAACX,GAEf,OAAOD,EACT,CAEA,eAAe,CAAA,KACbL,aAAaD,sBAAuB,AAACmB,kBACnC,GAAIC,MAAMC,OAAO,CAACF,kBAAoBA,gBAAgBG,MAAM,CAAG,EAAG,CAChE,MAAMC,SAAWxB,WAAW,sCAC5B,MAAMyB,WAAazB,WAAW,2CAE9BqB,MAAMK,IAAI,CAACD,YAAYE,OAAO,CAAC,AAACC,YAC9B,MAAMC,SAAWhB,SAASiB,sBAAsB,GAChDV,gBAAgBO,OAAO,CAAC,AAACI,MAASF,SAASV,WAAW,CAAChB,SAAS4B,QAChEH,UAAUT,WAAW,CAACU,SACxB,GAEAR,MAAMK,IAAI,CAACF,UAAUG,OAAO,CAAC,AAACK,SAC5BA,QAAQhB,SAAS,CAACiB,MAAM,CAAC,UAE7B,CACF,EACF,CAAA,CAAE"}

package/core/MeganavBlogPostsList.js

@@ -1,2 +0,0 @@
-import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavBlogPostsList=({recentBlogPosts,absUrl})=>recentBlogPosts?React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-blog"},"Blog"),React.createElement("ul",{className:"mb-8","aria-labelledby":"meganav-company-panel-list-blog"},recentBlogPosts.map(post=>React.createElement("li",{key:post.link},React.createElement("a",{href:post.link,className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},post.title),React.createElement("p",{className:"ui-meganav-media-copy"},post.pubDate))))),React.createElement(FeaturedLink,{url:absUrl("/blog"),textSize:"text-p3"},"More from our Blog")):null;export default MeganavBlogPostsList;
-//# sourceMappingURL=MeganavBlogPostsList.js.map

package/core/MeganavBlogPostsList.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/MeganavBlogPostsList.tsx"],"sourcesContent":["import React from \"react\";\n\nimport FeaturedLink from \"./FeaturedLink\";\nimport { AbsUrl } from \"./Meganav\";\n\ntype MeganavBlogPostsListProps = {\n  recentBlogPosts: {\n    link: string;\n    title: string;\n    pubDate: string;\n  }[];\n  absUrl: AbsUrl;\n};\n\nconst MeganavBlogPostsList = ({\n  recentBlogPosts,\n  absUrl,\n}: MeganavBlogPostsListProps) =>\n  recentBlogPosts ? (\n    <div className=\"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0\">\n      <h3 className=\"ui-meganav-overline\" id=\"meganav-company-panel-list-blog\">\n        Blog\n      </h3>\n      <ul className=\"mb-8\" aria-labelledby=\"meganav-company-panel-list-blog\">\n        {recentBlogPosts.map((post) => (\n          <li key={post.link}>\n            <a href={post.link} className=\"ui-meganav-media group\">\n              <p className=\"ui-meganav-media-heading\">{post.title}</p>\n              <p className=\"ui-meganav-media-copy\">{post.pubDate}</p>\n            </a>\n          </li>\n        ))}\n      </ul>\n\n      <FeaturedLink url={absUrl(\"/blog\")} textSize=\"text-p3\">\n        More from our Blog\n      </FeaturedLink>\n    </div>\n  ) : null;\n\nexport default MeganavBlogPostsList;\n"],"names":["React","FeaturedLink","MeganavBlogPostsList","recentBlogPosts","absUrl","div","className","h3","id","ul","aria-labelledby","map","post","li","key","link","a","href","p","title","pubDate","url","textSize"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,iBAAkB,gBAAiB,CAY1C,MAAMC,qBAAuB,CAAC,CAC5BC,eAAe,CACfC,MAAM,CACoB,GAC1BD,gBACE,oBAACE,OAAIC,UAAU,mFACb,oBAACC,MAAGD,UAAU,sBAAsBE,GAAG,mCAAkC,QAGzE,oBAACC,MAAGH,UAAU,OAAOI,kBAAgB,mCAClCP,gBAAgBQ,GAAG,CAAC,AAACC,MACpB,oBAACC,MAAGC,IAAKF,KAAKG,IAAI,EAChB,oBAACC,KAAEC,KAAML,KAAKG,IAAI,CAAET,UAAU,0BAC5B,oBAACY,KAAEZ,UAAU,4BAA4BM,KAAKO,KAAK,EACnD,oBAACD,KAAEZ,UAAU,yBAAyBM,KAAKQ,OAAO,MAM1D,oBAACnB,cAAaoB,IAAKjB,OAAO,SAAUkB,SAAS,WAAU,uBAIvD,IAEN,gBAAepB,oBAAqB"}