@ably/ui 16.0.4 → 16.1.0

package/core/styles/legacy-buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus-base;
@@ -24,7 +24,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white text-label2 font-sans font-bold inline-block rounded p-btn;
     @apply focus-base;
     @apply inline-flex items-center justify-center;
   }
@@ -40,7 +40,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus-base;
@@ -50,7 +50,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus-base;
@@ -60,7 +60,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus-base;

package/core/styles/properties.css

@@ -204,14 +204,10 @@
     --fs-sub-header-xs: 1.063rem;
     --fs-overline1: 0.875rem;
     --fs-overline2: 0.75rem;
-    --fs-btn1: 1rem;
-    --fs-btn2: 0.938rem;
-    --fs-btn3: 0.875rem;
-    --fs-btn4: 0.813rem;
-    --fs-menu1: 1rem;
-    --fs-menu2: 0.938rem;
-    --fs-menu3: 0.875rem;
-    --fs-menu4: 0.813rem;
+    --fs-label1: 1rem;
+    --fs-label2: 0.938rem;
+    --fs-label3: 0.875rem;
+    --fs-label4: 0.813rem;
     --fs-quote: 1.25rem;
     --fs-code: 0.813rem;
     --fs-code2: 0.688rem;

package/core/styles/text.css

@@ -80,45 +80,29 @@
     @apply tracking-widen-0.16;
   }
 
-  .ui-text-menu1 {
-    @apply font-sans text-neutral-900 text-menu1 font-semibold leading-snug;
+  .ui-text-label1 {
+    @apply font-sans text-neutral-900 text-label1 font-semibold leading-snug;
   }
 
-  .ui-text-menu2 {
-    @apply font-sans text-neutral-900 text-menu2 font-semibold leading-snug;
+  .ui-text-label2 {
+    @apply font-sans text-neutral-900 text-label2 font-semibold leading-snug;
   }
 
-  .ui-text-menu3 {
-    @apply font-sans text-neutral-900 text-menu3 font-semibold leading-snug;
+  .ui-text-label3 {
+    @apply font-sans text-neutral-900 text-label3 font-semibold leading-snug;
   }
 
-  .ui-text-menu4 {
-    @apply font-sans text-neutral-900 text-menu4 font-semibold leading-snug;
+  .ui-text-label4 {
+    @apply font-sans text-neutral-900 text-label4 font-semibold leading-snug;
   }
 
-  .ui-theme-dark .ui-text-menu1,
-  .ui-theme-dark .ui-text-menu2,
-  .ui-theme-dark .ui-text-menu3,
-  .ui-theme-dark .ui-text-menu4 {
+  .ui-theme-dark .ui-text-label1,
+  .ui-theme-dark .ui-text-label2,
+  .ui-theme-dark .ui-text-label3,
+  .ui-theme-dark .ui-text-label4 {
     @apply text-neutral-300;
   }
 
-  .ui-text-button1 {
-    @apply font-sans text-btn1 font-bold leading-snug;
-  }
-
-  .ui-text-button2 {
-    @apply font-sans text-btn2 font-bold leading-snug;
-  }
-
-  .ui-text-button3 {
-    @apply font-sans text-btn3 font-bold leading-snug;
-  }
-
-  .ui-text-button4 {
-    @apply font-sans text-btn4 font-bold leading-snug;
-  }
-
   .ui-text-code {
     @apply font-mono font-normal text-code;
   }

package/index.d.ts

@@ -708,375 +708,6 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
-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 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/LegacyMeganav' {
-import { ReactNode } from "react";
-import { ColorClass } from ".@ably/ui/core/styles/colors/types";
-export type MeganavTheme = {
-    backgroundColor?: ColorClass;
-    textColor?: ColorClass;
-    buttonBackgroundColor?: ColorClass;
-    buttonTextColor?: ColorClass;
-    mobileMenuColor: ColorClass;
-    logoTextColor?: ColorClass;
-    barShadow?: string;
-};
-export type AbsUrl = (path: string) => string;
-export type MeganavPaths = {
-    logo?: string;
-    iconSprites: string;
-    ablyStack: string;
-    blogThumb1: string;
-    blogThumb2: string;
-    blogThumb3: string;
-    awsLogo?: string;
-};
-export type MeganavPanels = {
-    [index: string]: ({ paths, absUrl, statusUrl, }: {
-        paths?: MeganavPaths;
-        absUrl: (path: string) => string;
-        statusUrl: string;
-    }) => ReactNode;
-};
-export type MeganavSessionState = {
-    signedIn: boolean;
-    logOut: {
-        token: string;
-        href: string;
-        text: string;
-    };
-    accountName: string;
-    preferredEmail: string;
-    account: {
-        links: {
-            dashboard: {
-                href: string;
-            };
-        };
-    };
-    mySettings: {
-        text: string;
-        href: string;
-    };
-    myAccessTokens: {
-        text: string;
-        href: string;
-    };
-};
-export type MeganavNoticeProps = {
-    props: {
-        title: string;
-        bodyText: string;
-        buttonLink: string;
-        buttonLabel: string;
-        closeBtn: boolean;
-    };
-    config: {
-        cookieId: string;
-        noticeId: string | number;
-        options: {
-            collapse: boolean;
-        };
-    };
-};
-type MeganavProps = {
-    paths?: MeganavPaths;
-    themeName: "white" | "black" | "transparentToWhite";
-    notice?: MeganavNoticeProps;
-    loginLink?: string;
-    urlBase?: string;
-    addSearchApiKey: string;
-    statusUrl: string;
-    searchDataId?: string;
-};
-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/LegacyMeganav/MeganavBlogPostsList' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
-type MeganavBlogPostsListProps = {
-    recentBlogPosts: {
-        link: string;
-        title: string;
-        pubDate: string;
-    }[];
-    absUrl: AbsUrl;
-};
-const MeganavBlogPostsList: ({ recentBlogPosts, absUrl, }: MeganavBlogPostsListProps) => import("react/jsx-runtime").JSX.Element | null;
-export default MeganavBlogPostsList;
-//# sourceMappingURL=MeganavBlogPostsList.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavContentCompany' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
-type MeganavContentCompanyProps = {
-    absUrl: AbsUrl;
-    paths?: MeganavPaths;
-};
-const MeganavContentCompany: ({ paths, absUrl, }: MeganavContentCompanyProps) => import("react/jsx-runtime").JSX.Element;
-export default MeganavContentCompany;
-//# sourceMappingURL=MeganavContentCompany.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavContentDevelopers' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
-const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
-    absUrl: AbsUrl;
-    statusUrl: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MeganavContentDevelopers;
-//# sourceMappingURL=MeganavContentDevelopers.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavContentProducts' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
-type MeganavContentProductsProps = {
-    paths?: MeganavPaths;
-    absUrl: AbsUrl;
-};
-const MeganavContentProducts: ({ paths, absUrl, }: MeganavContentProductsProps) => import("react/jsx-runtime").JSX.Element;
-export default MeganavContentProducts;
-//# sourceMappingURL=MeganavContentProducts.d.ts.map
-}
-
-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;
-export default MeganavContentUseCases;
-//# sourceMappingURL=MeganavContentUseCases.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/MeganavControl' {
-import { ReactNode } from "react";
-import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
-type MeganavControlProps = {
-    ariaControls: string;
-    ariaLabel: string;
-    children: ReactNode;
-    theme: MeganavTheme;
-    additionalCSS?: string;
-};
-const MeganavControl: ({ ariaControls, ariaLabel, children, theme, additionalCSS, }: MeganavControlProps) => import("react/jsx-runtime").JSX.Element;
-export default MeganavControl;
-//# sourceMappingURL=MeganavControl.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown/component' {
-export default MeganavControlMobileDropdown;
-function MeganavControlMobileDropdown({ clearPanels }: {
-    clearPanels: any;
-}): {
-    teardown: () => void;
-    clear: () => void;
-};
-//# sourceMappingURL=component.d.ts.map
-}
-
-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;
-export default MeganavControlMobileDropdown;
-//# sourceMappingURL=MeganavControlMobileDropdown.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
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose' {
-type MeganavControlMobilePanelCloseProps = {
-    ariaControls: string;
-    displayHr?: boolean;
-};
-const MeganavControlMobilePanelClose: ({ ariaControls, displayHr, }: MeganavControlMobilePanelCloseProps) => import("react/jsx-runtime").JSX.Element;
-export default MeganavControlMobilePanelClose;
-//# sourceMappingURL=MeganavControlMobilePanelClose.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/LegacyMeganav/MeganavControlMobilePanelOpen' {
-import { ReactNode } from "react";
-type MeganavControlMobilePanelOpenProps = {
-    ariaControls: string;
-    children: ReactNode;
-};
-const MeganavControlMobilePanelOpen: ({ ariaControls, children, }: MeganavControlMobilePanelOpenProps) => import("react/jsx-runtime").JSX.Element;
-export default MeganavControlMobilePanelOpen;
-//# sourceMappingURL=MeganavControlMobilePanelOpen.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavItemsDesktop' {
-import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
-type MeganavDesktopItems = {
-    panels: MeganavPanels;
-    paths?: MeganavPaths;
-    theme: MeganavTheme;
-    absUrl: AbsUrl;
-    statusUrl: string;
-};
-const MeganavDesktopItems: ({ panels, paths, theme, absUrl, statusUrl, }: MeganavDesktopItems) => import("react/jsx-runtime").JSX.Element;
-const _default: React.MemoExoticComponent<({ panels, paths, theme, absUrl, statusUrl, }: MeganavDesktopItems) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
-//# sourceMappingURL=MeganavItemsDesktop.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavItemsMobile' {
-import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
-type MeganavItemsMobileProps = {
-    panels: MeganavPanels;
-    paths?: MeganavPaths;
-    sessionState?: MeganavSessionState;
-    theme: MeganavTheme;
-    loginLink: string;
-    absUrl: AbsUrl;
-    statusUrl: string;
-    searchDataId?: string;
-};
-const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
-//# sourceMappingURL=MeganavItemsMobile.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavItemsSignedIn' {
-import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
-type MeganavItemsSignedIn = {
-    sessionState: MeganavSessionState;
-    theme: MeganavTheme;
-    absUrl: AbsUrl;
-    searchDataId?: string;
-};
-const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
-export default MeganavItemsSignedIn;
-//# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavSearch' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
-const MeganavSearch: ({ absUrl, dataId, }: {
-    absUrl: AbsUrl;
-    dataId?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MeganavSearch;
-//# sourceMappingURL=MeganavSearch.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/LegacyMeganav/MeganavSearchAutocomplete' {
-const MeganavSearchAutocomplete: () => import("react/jsx-runtime").JSX.Element;
-export default MeganavSearchAutocomplete;
-//# sourceMappingURL=MeganavSearchAutocomplete.d.ts.map
-}
-
-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;
-export default MeganavSearchPanel;
-//# sourceMappingURL=MeganavSearchPanel.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions/component' {
-export default MeganavSearchSuggestions;
-function MeganavSearchSuggestions(): {
-    teardown: () => void;
-    clear: () => void;
-};
-//# sourceMappingURL=component.d.ts.map
-}
-
-declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions' {
-import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
-type MeganavSearchSuggestionsProps = {
-    absUrl: AbsUrl;
-    displaySupportLink: boolean;
-};
-const MeganavSearchSuggestions: ({ absUrl, displaySupportLink, }: MeganavSearchSuggestionsProps) => import("react/jsx-runtime").JSX.Element;
-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";
@@ -1689,30 +1320,12 @@ export default Tooltip;
 //# sourceMappingURL=Tooltip.d.ts.map
 }
 
-declare module '@ably/ui/core/css' {
-export function remsToPixelValue(remString: any): number;
-//# sourceMappingURL=css.d.ts.map
-}
-
 declare module '@ably/ui/core/dom-query' {
 export function queryId(val: any, root?: Document): Element | null;
 export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
-declare module '@ably/ui/core/remote-blogs-posts' {
-export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
-export namespace reducerBlogPosts {
-    function blogPosts(state: {
-        recent: null;
-    } | undefined, action: any): {
-        recent: any;
-    };
-}
-export function selectRecentBlogPosts(store: any): any;
-//# sourceMappingURL=remote-blogs-posts.d.ts.map
-}
-
 declare module '@ably/ui/core/remote-data-store' {
 export function attachStoreToWindow(store: any): void;
 export function getRemoteDataStore(): any;
@@ -1721,24 +1334,6 @@ export function createRemoteDataStore(reducers: any): any;
 //# sourceMappingURL=remote-data-store.d.ts.map
 }
 
-declare module '@ably/ui/core/remote-data-util' {
-export function isJsonResponse(contentType: any): any;
-//# sourceMappingURL=remote-data-util.d.ts.map
-}
-
-declare module '@ably/ui/core/remote-session-data' {
-export function fetchSessionData(store: any, sessionUrl: any): Promise<void>;
-export namespace reducerSessionData {
-    function session(state: {
-        data: null;
-    } | undefined, action: any): {
-        data: any;
-    };
-}
-export function selectSessionData(store: any): any;
-//# sourceMappingURL=remote-session-data.d.ts.map
-}
-
 declare module '@ably/ui/core/styles/colors/types' {
 export type ColorName = (typeof neutralColors)[number] | (typeof orangeColors)[number] | (typeof secondaryColors)[number] | (typeof guiColors)[number] | (typeof aliasedColors)[number];
 export const variants: readonly ["", "dark:"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.0.4",
+  "version": "16.1.0",
   "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",
@@ -56,7 +56,7 @@
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",
-    "typescript": "5.7.3",
+    "typescript": "5.8.3",
     "vite": "^6.2.0",
     "vitest": "^3.0.8"
   },

package/tailwind.config.js

@@ -34,14 +34,10 @@ module.exports = {
       "sub-header-xs": ["var(--fs-sub-header-xs)"],
       overline1: ["var(--fs-overline1)"],
       overline2: ["var(--fs-overline2)"],
-      btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
-      btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
-      btn3: ["var(--fs-btn3)", "var(--lh-tight)"],
-      btn4: ["var(--fs-btn4)", "var(--lh-dense)"],
-      menu1: ["var(--fs-menu1)"],
-      menu2: ["var(--fs-menu2)"],
-      menu3: ["var(--fs-menu3)"],
-      menu4: ["var(--fs-menu4)"],
+      label1: ["var(--fs-label1)"],
+      label2: ["var(--fs-label2)"],
+      label3: ["var(--fs-label3)"],
+      label4: ["var(--fs-label4)"],
       quote: ["var(--fs-quote)"],
       code: ["var(--fs-code)", "var(--lh-dense)"],
       code2: ["var(--fs-code2)", "var(--lh-dense)"],

package/core/LegacyFooter/LegacyFooter.js

@@ -1,2 +0,0 @@
-import React from"react";import Icon from"../Icon";import _absUrl from"../url-base.js";import{StatusIcon}from"../Status";const LegacyFooter=({paths,urlBase,statusUrl})=>{const absUrl=path=>_absUrl(path,urlBase);return React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},React.createElement("div",{className:"col-span-full md:col-span-2"},React.createElement("div",{className:"flex flex-row p-menu-row-snug"},React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),React.createElement("ul",{className:"grid grid-cols-1"},React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pubsub"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{className:"ui-footer-menu-row-link flex items-center gap-4",href:"https://status.ably.com/",target:"_blank",rel:"noreferrer"},"System status",React.createElement(StatusIcon,{statusUrl:statusUrl}))))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},React.createElement("div",{className:"md:flex md:items-center"},React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},React.createElement("div",{className:""},React.createElement("div",{className:"flex pb-24"},React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},React.createElement(Icon,{name:"icon-social-linkedin",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},React.createElement(Icon,{name:"icon-social-github",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},React.createElement(Icon,{name:"icon-social-discord",size:"1.5rem"})))),React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"xs:block sm:hidden"},React.createElement("div",{className:"border-t border-mid-grey w-full"}),React.createElement("div",{className:"flex py-24"},React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.highPerformer,alt:"High Performer 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.usersMostLikely,alt:"Users Most Likely To Recommend 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.bestMeetsRequirements,alt:"Best Meets Requirements 2025"}))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},React.createElement("div",{className:"flex"},React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},React.createElement("div",{className:"flex mr-24"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-2"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),React.createElement("div",{className:"flex mr-24 md:col-start-3"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-4"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default LegacyFooter;
-//# sourceMappingURL=LegacyFooter.js.map