@ably/ui 14.5.1 → 14.6.0-dev.5cd05dc

package/core/styles/colors/types.js

@@ -0,0 +1 @@
+const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];const secondaryColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900","pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};

package/core/styles/properties.css

@@ -2,9 +2,9 @@
   :root {
     /* Neutral colors */
     --color-neutral-000: #ffffff;
-    --color-neutral-100: #f8fafc;
-    --color-neutral-200: #f4f8fb;
-    --color-neutral-300: #edf1f7;
+    --color-neutral-100: #f6f8fa;
+    --color-neutral-200: #eef1f6;
+    --color-neutral-300: #e6eaf0;
     --color-neutral-400: #e2e7ef;
     --color-neutral-500: #c6ced9;
     --color-neutral-600: #adb6c2;

package/index.d.ts

@@ -1,21 +1,54 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-declare module '@ably/ui/core/Accordion' {
+declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
-type AccordionData = {
+import { IconName } from ".@ably/ui/core/Icon/types";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
+export type AccordionData = {
     name: string;
+    icon?: IconName;
     content: ReactNode;
 };
+export type AccordionIcons = {
+    closed: {
+        name: IconName;
+        css?: string;
+    };
+    open: {
+        name: IconName;
+        css?: string;
+    };
+};
+export const accordionThemes: readonly ["dark", "light", "transparent"];
+export type AccordionTheme = (typeof accordionThemes)[number];
+export type AccordionThemeColors = {
+    bg: ColorClass;
+    hoverBg: string;
+    text: ColorClass;
+    toggleIconColor: ColorClass;
+    selectableBg?: ColorClass;
+    selectableText?: ColorClass;
+};
+export type AccordionOptions = {
+    autoClose?: boolean;
+    selectable?: boolean;
+    sticky?: boolean;
+    defaultOpenIndexes?: number[];
+};
+//# sourceMappingURL=types.d.ts.map
+}
+
+declare module '@ably/ui/core/Accordion' {
+import type { AccordionData, AccordionIcons, AccordionOptions, AccordionTheme } from "@ably/ui/core/Accordion/types";
 export type AccordionProps = {
+    className?: string;
     data: AccordionData[];
-    arrowIcon?: boolean;
-    topBorder?: boolean;
-    bottomBorder?: boolean;
+    icons?: AccordionIcons;
     id?: string;
-    autoClose?: boolean;
-    className?: string;
+    theme?: AccordionTheme;
+    options?: AccordionOptions;
 };
-const Accordion: ({ data, id, topBorder, bottomBorder, arrowIcon, autoClose, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+const Accordion: ({ data, theme, id, className, icons, options, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map
 }
@@ -76,6 +109,7 @@ export default CustomerLogos;
 
 declare module '@ably/ui/core/DropdownMenu' {
 import { ReactNode } from "react";
+import { IconName } from "@ably/ui/core/Icon/types";
 type DropdownMenuProps = {
     children: ReactNode;
 };
@@ -92,7 +126,7 @@ type LinkProps = {
     url: string;
     title: string;
     subtitle: string;
-    iconName: string;
+    iconName: IconName;
     children: ReactNode;
 };
 const DropdownMenu: {
@@ -122,11 +156,12 @@ export default Expander;
 
 declare module '@ably/ui/core/FeaturedLink' {
 import { ReactNode } from "react";
+import { ColorClass } from "@ably/ui/core/styles/colors/types";
 type FeaturedLinkProps = {
     url: string;
     children: ReactNode;
     textSize?: string;
-    iconColor?: string;
+    iconColor?: ColorClass;
     flush?: boolean;
     reverse?: boolean;
     additionalCSS?: string;
@@ -191,16 +226,39 @@ export default Footer;
 }
 
 declare module '@ably/ui/core/Icon/secondary-colors' {
-export const defaultIconSecondaryColor: (name: string) => string | undefined;
+import { IconName } from "@ably/ui/core/types";
+export const defaultIconSecondaryColor: (name: IconName) => "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent";
 //# sourceMappingURL=secondary-colors.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/types' {
+export type IconName = (typeof coreIcons)[number] | (typeof displayIcons)[number] | (typeof socialIcons)[number] | (typeof otherIcons)[number] | (typeof techIcons)[number] | (typeof productIcons)[number];
+const coreIcons: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill", "icon-gui-check-circled-fill-black", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-copy", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-search", "icon-gui-tick", "icon-gui-warning", "icon-gui-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-resources"];
+const displayIcons: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-push-notifications-col", "icon-display-data-broadcast-col", "icon-display-data-synchronization-col", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-live-updates-results-metrics-col", "icon-multi-user-spaces-col"];
+const socialIcons: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-linkedin", "icon-social-twitter", "icon-social-google", "icon-social-stackoverflow", "icon-social-youtube", "icon-social-x"];
+const otherIcons: readonly ["quote"];
+const techIcons: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
+const productIcons: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces", "icon-product-pubsub-encapsulated", "icon-product-chat-encapsulated", "icon-product-spaces-encapsulated", "icon-product-livesync-encapsulated", "icon-product-asset-tracking-encapsulated", "icon-product-liveobjects-encapsulated"];
+export const iconNames: {
+    core: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill", "icon-gui-check-circled-fill-black", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-copy", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-search", "icon-gui-tick", "icon-gui-warning", "icon-gui-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-resources"];
+    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-push-notifications-col", "icon-display-data-broadcast-col", "icon-display-data-synchronization-col", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-live-updates-results-metrics-col", "icon-multi-user-spaces-col"];
+    social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-linkedin", "icon-social-twitter", "icon-social-google", "icon-social-stackoverflow", "icon-social-youtube", "icon-social-x"];
+    other: readonly ["quote"];
+    tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
+    product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces", "icon-product-pubsub-encapsulated", "icon-product-chat-encapsulated", "icon-product-spaces-encapsulated", "icon-product-livesync-encapsulated", "icon-product-asset-tracking-encapsulated", "icon-product-liveobjects-encapsulated"];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon' {
+import { IconName } from "@ably/ui/core/Icon/types";
+import { ColorClass } from "@ably/ui/core/styles/colors/types";
 type IconProps = {
-    name: string;
+    name: IconName;
     size?: string;
-    color?: string;
-    secondaryColor?: string;
+    color?: ColorClass;
+    secondaryColor?: ColorClass;
     additionalCSS?: string;
 };
 const Icon: ({ name, size, color, secondaryColor, additionalCSS, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -243,13 +301,14 @@ export default function Meganav({ themeName, addSearchApiKey }: {
 
 declare module '@ably/ui/core/Meganav' {
 import { ReactNode } from "react";
+import { ColorClass } from "@ably/ui/core/styles/colors/types";
 export type MeganavTheme = {
-    backgroundColor?: string;
-    textColor?: string;
-    buttonBackgroundColor?: string;
-    buttonTextColor?: string;
-    mobileMenuColor?: string;
-    logoTextColor?: string;
+    backgroundColor?: ColorClass;
+    textColor?: ColorClass;
+    buttonBackgroundColor?: ColorClass;
+    buttonTextColor?: ColorClass;
+    mobileMenuColor: ColorClass;
+    logoTextColor?: ColorClass;
     barShadow?: string;
 };
 export type AbsUrl = (path: string) => string;
@@ -596,12 +655,13 @@ export default Notice;
 }
 
 declare module '@ably/ui/core/ProductTile/data' {
+import { IconName } from ".@ably/ui/core/Icon/types";
 export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
 type Products = Record<ProductName, {
     label: string;
     description: string;
     link?: string;
-    icon?: string;
+    icon?: IconName;
     unavailable?: boolean;
 }>;
 export const products: Products;
@@ -719,9 +779,9 @@ const _default: {
     Cell: ({ children, isRowHeader, ...rest }: import("react").PropsWithChildren<{
         isRowHeader?: boolean;
     } & import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
-    LabelCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
-    HeaderCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
-    CtaCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    LabelCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    CtaCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
     RowHeader: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableRowElement>>) => import("react/jsx-runtime").JSX.Element;
     Body: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
     Header: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
@@ -796,6 +856,25 @@ 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];
+type ColorClassPrefixes = "bg" | "text";
+export type ColorClass = `${ColorClassPrefixes}-${ColorName}`;
+const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
+const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
+const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
+const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
+export const colorNames: {
+    neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
+    orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
+    secondary: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
+    gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map
+}
+
 declare module '@ably/ui/core/url-base' {
 export default absUrl;
 function absUrl(path: any, urlBase?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.5.1",
+  "version": "14.6.0-dev.5cd05dc",
   "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",
@@ -45,7 +45,7 @@
     "storybook": "^8.2.9",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
-    "typescript": "5.5.4",
+    "typescript": "5.6.2",
     "vite": "^5.2.12"
   },
   "scripts": {