@ably/ui 16.0.0-dev.f34cb058 → 16.1.0-dev.d9810f04

package/index.d.ts

@@ -306,15 +306,6 @@ export default ConnectStateWrapper;
 //# sourceMappingURL=ConnectStateWrapper.d.ts.map
 }
 
-declare module '@ably/ui/core/ContactFooter' {
-type ContactFooterProps = {
-    urlBase: string;
-};
-const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
-export default ContactFooter;
-//# sourceMappingURL=ContactFooter.d.ts.map
-}
-
 declare module '@ably/ui/core/CookieMessage' {
 type CookieMessageProps = {
     cookieId: string;
@@ -475,9 +466,9 @@ type FlyoutProps = {
      */
     menuItems: {
         /**
-         * Name for the menu item.
+         * Label for the menu item.
          */
-        name: string;
+        label: string;
         /**
          * Optional content to be displayed in the flyout panel.
          */
@@ -517,19 +508,37 @@ 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 const ablyAwards: {
+    image: string;
+    desc: 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
 }
@@ -537,7 +546,9 @@ 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">>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
+    className?: string;
+}>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
@@ -577,10 +588,6 @@ export type HeaderSessionState = {
  * Props for the Header component.
  */
 export type HeaderProps = {
-    /**
-     * Optional classnames to add to the header
-     */
-    className?: string;
     /**
      * Optional search bar element.
      */
@@ -685,63 +692,67 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
-declare module '@ably/ui/core/LegacyMeganav/MeganavControl/component' {
-export default MeganavControl;
-function MeganavControl(): {
-    teardown: () => void;
-    clear: () => void;
-}[];
-//# sourceMappingURL=component.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown/component' {
-export default MeganavControlMobileDropdown;
-function MeganavControlMobileDropdown({ clearPanels }: {
-    clearPanels: any;
-}): {
-    teardown: () => void;
-    clear: () => void;
+declare module '@ably/ui/core/LegacyFooter/LegacyFooter' {
+type LegacyFooterProps = {
+    paths: {
+        ablyStack: string;
+        bestSupport: string;
+        highPerformer: string;
+        usersMostLikely: string;
+        bestMeetsRequirements: string;
+    };
+    urlBase: string;
+    statusUrl: string;
 };
-//# sourceMappingURL=component.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose/component' {
-function _default(): {
-    teardown: () => void;
-    clear: () => void;
-}[];
-export default _default;
-//# 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/LegacyMeganav/MeganavControlMobilePanelOpen/component' {
-function _default(): {
-    teardown: () => void;
-    clear: () => void;
-}[];
-export default _default;
-//# 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/LegacyMeganav/MeganavSearchAutocomplete/component' {
-function _default(apiKey: any): {
-    teardown: () => void;
-    clear: () => void;
-}[];
-export default _default;
-//# sourceMappingURL=component.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/LegacyMeganav/MeganavSearchSuggestions/component' {
-export default MeganavSearchSuggestions;
-function MeganavSearchSuggestions(): {
-    teardown: () => void;
-    clear: () => void;
+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";
 };
-//# sourceMappingURL=component.d.ts.map
+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/LegacyMeganav/component' {
+declare module '@ably/ui/core/Meganav/component' {
 export default function Meganav({ themeName, addSearchApiKey }: {
     themeName: any;
     addSearchApiKey: any;
@@ -749,7 +760,7 @@ export default function Meganav({ themeName, addSearchApiKey }: {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/LegacyMeganav' {
+declare module '@ably/ui/core/Meganav' {
 import { ReactNode } from "react";
 import { ColorClass } from "@ably/ui/core/styles/colors/types";
 export type MeganavTheme = {
@@ -831,136 +842,11 @@ type MeganavProps = {
 };
 const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
-//# sourceMappingURL=LegacyMeganav.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/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;
-    searchDataId: string;
-    notice?: MeganavNoticeBannerProps;
-};
-const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
-export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
 
-declare module '@ably/ui/core/Meganav/MeganavMobile' {
-import { AccordionData } from ".@ably/ui/core/Accordion/types";
-export const MeganavMobile: ({ mobileNavItems, }: {
-    mobileNavItems: 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 menuItemLinks: {
-    name: string;
-    link: string;
-    isHiddenMobile: boolean;
-}[];
-export const menuItemsForHeader: MenuItem[];
-//# sourceMappingURL=data.d.ts.map
-}
-
 declare module '@ably/ui/core/MeganavBlogPostsList' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 type MeganavBlogPostsListProps = {
     recentBlogPosts: {
         link: string;
@@ -975,7 +861,7 @@ export default MeganavBlogPostsList;
 }
 
 declare module '@ably/ui/core/MeganavContentCompany' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
 type MeganavContentCompanyProps = {
     absUrl: AbsUrl;
     paths?: MeganavPaths;
@@ -986,7 +872,7 @@ export default MeganavContentCompany;
 }
 
 declare module '@ably/ui/core/MeganavContentDevelopers' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
     absUrl: AbsUrl;
     statusUrl: string;
@@ -996,7 +882,7 @@ export default MeganavContentDevelopers;
 }
 
 declare module '@ably/ui/core/MeganavContentProducts' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
 type MeganavContentProductsProps = {
     paths?: MeganavPaths;
     absUrl: AbsUrl;
@@ -1007,7 +893,7 @@ export default MeganavContentProducts;
 }
 
 declare module '@ably/ui/core/MeganavContentUseCases' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 const MeganavContentUseCases: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -1015,9 +901,18 @@ export default MeganavContentUseCases;
 //# sourceMappingURL=MeganavContentUseCases.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavControl/component' {
+export default MeganavControl;
+function MeganavControl(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavControl' {
 import { ReactNode } from "react";
-import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
+import { MeganavTheme } from "@ably/ui/core/Meganav";
 type MeganavControlProps = {
     ariaControls: string;
     ariaLabel: string;
@@ -1030,8 +925,19 @@ export default MeganavControl;
 //# sourceMappingURL=MeganavControl.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavControlMobileDropdown/component' {
+export default MeganavControlMobileDropdown;
+function MeganavControlMobileDropdown({ clearPanels }: {
+    clearPanels: any;
+}): {
+    teardown: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavControlMobileDropdown' {
-import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
+import { MeganavTheme } from "@ably/ui/core/Meganav";
 const MeganavControlMobileDropdown: ({ theme }: {
     theme: MeganavTheme;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -1039,6 +945,15 @@ export default MeganavControlMobileDropdown;
 //# sourceMappingURL=MeganavControlMobileDropdown.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavControlMobilePanelClose/component' {
+function _default(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavControlMobilePanelClose' {
 type MeganavControlMobilePanelCloseProps = {
     ariaControls: string;
@@ -1049,6 +964,15 @@ export default MeganavControlMobilePanelClose;
 //# sourceMappingURL=MeganavControlMobilePanelClose.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavControlMobilePanelOpen/component' {
+function _default(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavControlMobilePanelOpen' {
 import { ReactNode } from "react";
 type MeganavControlMobilePanelOpenProps = {
@@ -1062,7 +986,7 @@ export default MeganavControlMobilePanelOpen;
 
 declare module '@ably/ui/core/MeganavItemsDesktop' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/Meganav";
 type MeganavDesktopItems = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -1078,7 +1002,7 @@ export default _default;
 
 declare module '@ably/ui/core/MeganavItemsMobile' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
 type MeganavItemsMobileProps = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -1095,7 +1019,7 @@ export default _default;
 }
 
 declare module '@ably/ui/core/MeganavItemsSignedIn' {
-import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
 type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
@@ -1108,7 +1032,7 @@ export default MeganavItemsSignedIn;
 }
 
 declare module '@ably/ui/core/MeganavSearch' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
     dataId?: string;
@@ -1117,6 +1041,15 @@ export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavSearchAutocomplete/component' {
+function _default(apiKey: any): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavSearchAutocomplete' {
 const MeganavSearchAutocomplete: () => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearchAutocomplete;
@@ -1124,7 +1057,7 @@ export default MeganavSearchAutocomplete;
 }
 
 declare module '@ably/ui/core/MeganavSearchPanel' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 const MeganavSearchPanel: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -1132,8 +1065,17 @@ export default MeganavSearchPanel;
 //# sourceMappingURL=MeganavSearchPanel.d.ts.map
 }
 
+declare module '@ably/ui/core/MeganavSearchSuggestions/component' {
+export default MeganavSearchSuggestions;
+function MeganavSearchSuggestions(): {
+    teardown: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=component.d.ts.map
+}
+
 declare module '@ably/ui/core/MeganavSearchSuggestions' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 type MeganavSearchSuggestionsProps = {
     absUrl: AbsUrl;
     displaySupportLink: boolean;
@@ -1144,7 +1086,6 @@ export default MeganavSearchSuggestions;
 }
 
 declare module '@ably/ui/core/Notice/component' {
-export const COLLAPSE_TRIGGER_DISTANCE: 5;
 export default Notice;
 function Notice({ bannerContainer, cookieId, noticeId, options }: {
     bannerContainer: any;
@@ -1359,9 +1300,29 @@ export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }
 
+declare module '@ably/ui/core/SegmentedControl' {
+import React, { PropsWithChildren } from "react";
+import type { IconName } from "@ably/ui/core/Icon/types";
+export type SegmentedControlSize = "md" | "sm" | "xs";
+export type SegmentedControlProps = {
+    className?: string;
+    rounded?: boolean;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    active?: boolean;
+    variant?: "default" | "subtle" | "strong";
+    size?: SegmentedControlSize;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+const SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>>;
+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/LegacyMeganav";
+import { AbsUrl } from "@ably/ui/core/Meganav";
 type SignOutLinkProps = {
     token: string;
     href: string;
@@ -1575,11 +1536,6 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
-declare module '@ably/ui/core/hubspot-chat-toggle' {
-export default function toggleChatWidget(params: any): (() => void) | undefined;
-//# sourceMappingURL=hubspot-chat-toggle.d.ts.map
-}
-
 declare module '@ably/ui/core/remote-blogs-posts' {
 export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
 export namespace reducerBlogPosts {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.0.0-dev.f34cb058",
+  "version": "16.1.0-dev.d9810f04",
   "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",
@@ -34,7 +34,7 @@
     "@types/svg-sprite": "^0.0.39",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.0.2",
     "eslint": "^8.57.0",
@@ -43,8 +43,9 @@
     "eslint-plugin-storybook": "^0.11.4",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
+    "jsdom": "^26.0.0",
     "mixpanel-browser": "^2.60.0",
-    "msw": "2.7.1",
+    "msw": "2.7.3",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
     "posthog-js": "^1.217.4",
@@ -56,7 +57,8 @@
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",
     "typescript": "5.7.3",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "^3.0.8"
   },
   "scripts": {
     "build:prebuild": "rm -rf core reset && mkdir -p dist/core",
@@ -75,8 +77,10 @@
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006",
     "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
+    "test": "yarn test:storybook && yarn test:vitest run",
+    "test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
+    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\"",
+    "test:vitest": "vitest --environment=jsdom --dir=src"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",

package/core/ContactFooter/component.css

@@ -1,11 +0,0 @@
-@layer components {
-  .ui-contact-footer {
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full bg-gradient-active-orange;
-  }
-
-  .ui-contact-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
-  }
-}

package/core/ContactFooter/component.js

@@ -1,2 +0,0 @@
-import toggleChatWidget from"../hubspot-chat-toggle";export default(()=>toggleChatWidget({dataId:"contact-footer"}));
-//# sourceMappingURL=component.js.map

package/core/ContactFooter/component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/ContactFooter/component.js"],"sourcesContent":["import toggleChatWidget from \"../hubspot-chat-toggle\";\nexport default () => toggleChatWidget({ dataId: \"contact-footer\" });\n"],"names":["toggleChatWidget","dataId"],"mappings":"AAAA,OAAOA,qBAAsB,wBAAyB,AACtD,eAAe,CAAA,IAAMA,iBAAiB,CAAEC,OAAQ,gBAAiB,EAAC,CAAE"}

package/core/ContactFooter.js

@@ -1,2 +0,0 @@
-import React,{useEffect}from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import toggleChatWidget from"./hubspot-chat-toggle";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;
-//# sourceMappingURL=ContactFooter.js.map