@ably/ui 17.8.0-dev.8c49cde1 → 17.8.0-dev.becb7c12

package/index.d.ts

@@ -3,7 +3,7 @@
 declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
 import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
-import { ColorClass, ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
+import { ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
 /**
  * Represents the data structure for an Accordion component.
  */
@@ -49,27 +49,27 @@ export type AccordionThemeColors = {
     /**
      * Background color class for the accordion.
      */
-    bg: ColorClass | ColorThemeSet;
+    bg: ColorThemeSet;
     /**
      * Background color when the accordion item is hovered.
      */
-    hoverBg: ColorClass | ColorThemeSet;
+    hoverBg: ColorThemeSet;
     /**
      * Text color class for the accordion.
      */
-    text: ColorClass | ColorThemeSet;
+    text: ColorThemeSet;
     /**
      * Color class for the toggle icon of the accordion.
      */
-    toggleIconColor: ColorClass | ColorThemeSet;
+    toggleIconColor: ColorThemeSet;
     /**
      * Optional background color class for selectable accordion items.
      */
-    selectableBg?: ColorClass | ColorThemeSet;
+    selectableBg?: ColorThemeSet;
     /**
      * Optional text color class for selectable accordion items.
      */
-    selectableText?: ColorClass | ColorThemeSet;
+    selectableText?: ColorThemeSet;
     /**
      * Optional border color for the accordion.
      */
@@ -479,34 +479,6 @@ export default ConnectStateWrapper;
 //# sourceMappingURL=ConnectStateWrapper.d.ts.map
 }
 
-declare module '@ably/ui/core/ContentTile' {
-import React from "react";
-import type { IconName } from "@ably/ui/core/Icon/types";
-type ContentTileBadge = string | {
-    label: string;
-    className?: string;
-};
-type CTA = {
-    text: string;
-    url: string;
-};
-type ContentTileProps = {
-    title?: string;
-    className?: string;
-    description?: string;
-    cta?: CTA;
-    image?: React.ReactNode;
-    imageIcons?: IconName[];
-    badges?: ContentTileBadge[];
-    options?: {
-        centerImage?: boolean;
-    };
-};
-const ContentTile: React.FC<ContentTileProps>;
-export default ContentTile;
-//# sourceMappingURL=ContentTile.d.ts.map
-}
-
 declare module '@ably/ui/core/CookieMessage' {
 type CookieMessageProps = {
     cookieId: string;
@@ -788,9 +760,13 @@ export type HeaderProps = {
      */
     className?: string;
     /**
-     * Indicates if the notice banner is visible.
+     * Indicates if the notice banner is enabled.
+     */
+    isNoticeBannerEnabled?: boolean;
+    /**
+     * Height of the notice banner in pixels.
      */
-    isNoticeVisible?: boolean;
+    noticeHeight?: number;
     /**
      * Optional search bar element.
      */
@@ -1877,6 +1853,28 @@ export default ForwardRef;
 //# sourceMappingURL=icon-display-tutorials-demos-col.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/components/icon-display-ui-mono' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-display-ui-mono.d.ts.map
+}
+
+declare module '@ably/ui/core/Icon/components/icon-display-ui' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-display-ui.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/components/icon-display-virtual-events-col' {
 import * as React from "react";
 interface SVGRProps {
@@ -4885,9 +4883,11 @@ import IconDisplaySupportChatMono from "@ably/ui/core/icon-display-support-chat-
 import IconDisplaySystemMetadata from "@ably/ui/core/icon-display-system-metadata";
 import IconDisplayTechAccountComms from "@ably/ui/core/icon-display-tech-account-comms";
 import IconDisplayTutorialsDemosCol from "@ably/ui/core/icon-display-tutorials-demos-col";
+import IconDisplayUiMono from "@ably/ui/core/icon-display-ui-mono";
+import IconDisplayUi from "@ably/ui/core/icon-display-ui";
 import IconDisplayVirtualEventsCol from "@ably/ui/core/icon-display-virtual-events-col";
 import IconDisplayVirtualEvents from "@ably/ui/core/icon-display-virtual-events";
-export { IconDisplay48hrs, IconDisplayAblyChannels, IconDisplayAboutAblyCol, IconDisplayApiKeys, IconDisplayApi, IconDisplayArchitecturalGuidance, IconDisplayAssetTrackingCol, IconDisplayAuthentication, IconDisplayAvatarStack, IconDisplayBrowser, IconDisplayCalendar, IconDisplayCallMobile, IconDisplayCareersCol, IconDisplayCaseStudiesCol, IconDisplayChatCol, IconDisplayChatMono, IconDisplayChatStackCol, IconDisplayChatStack, IconDisplayCloudServers, IconDisplayCompareTechCol, IconDisplayConnectionStateRecovery, IconDisplayConsumerGroups, IconDisplayCustomCname, IconDisplayCustom, IconDisplayCustomersCol, IconDisplayDataBroadcastCol, IconDisplayDataBroadcastMono, IconDisplayDataSynchronizationCol, IconDisplayDedicatedCluster, IconDisplayDeltas, IconDisplayDocsCol, IconDisplayDocumentation, IconDisplayDynamicChannelGroups, IconDisplayEdgeNetwork, IconDisplayElasticity, IconDisplayEqualisersMono, IconDisplayEventsCol, IconDisplayExactlyOnceDelivery, IconDisplayExamplesCol, IconDisplayFanOut, IconDisplayFirehose, IconDisplayGdpr, IconDisplayGeneralComms, IconDisplayGranularPermissions, IconDisplayHipaaMono, IconDisplayHipaa, IconDisplayHistory, IconDisplayIntegrationsCol, IconDisplayIntegrations, IconDisplayItSupportAccess, IconDisplayItSupportHelpdesk, IconDisplayKafkaAtTheEdgeCol, IconDisplayLaptop, IconDisplayLastSeen, IconDisplayLightbulbCol, IconDisplayLiveChat, IconDisplayLiveUpdatesResultsMetricsCol, IconDisplayMapPin, IconDisplayMessageBatching, IconDisplayMessagePersistence, IconDisplayMessageQueues, IconDisplayMessage, IconDisplayMultiUserSpacesCol, IconDisplayObserveAnalytics, IconDisplayPadlockClosed, IconDisplayPlatform, IconDisplayPlay, IconDisplayPremiumSupport, IconDisplayPrivacyShieldFramework, IconDisplayPrivateLink, IconDisplayPushNotificationsCol, IconDisplayPushNotificationsMono, IconDisplayPushNotifications, IconDisplayQuickstartGuidesCol, IconDisplayReactions, IconDisplayReadReceipts, IconDisplayResourcesCol, IconDisplayRewind, IconDisplaySdksCol, IconDisplaySendReceivedMessages, IconDisplayServers, IconDisplayShoppingCart, IconDisplaySla, IconDisplaySoc2Type2Mono, IconDisplaySoc2Type2, IconDisplaySomethingElseMono, IconDisplaySomethingElse, IconDisplaySubscriptionFilters, IconDisplaySupportChatMono, IconDisplaySystemMetadata, IconDisplayTechAccountComms, IconDisplayTutorialsDemosCol, IconDisplayVirtualEventsCol, IconDisplayVirtualEvents, };
+export { IconDisplay48hrs, IconDisplayAblyChannels, IconDisplayAboutAblyCol, IconDisplayApiKeys, IconDisplayApi, IconDisplayArchitecturalGuidance, IconDisplayAssetTrackingCol, IconDisplayAuthentication, IconDisplayAvatarStack, IconDisplayBrowser, IconDisplayCalendar, IconDisplayCallMobile, IconDisplayCareersCol, IconDisplayCaseStudiesCol, IconDisplayChatCol, IconDisplayChatMono, IconDisplayChatStackCol, IconDisplayChatStack, IconDisplayCloudServers, IconDisplayCompareTechCol, IconDisplayConnectionStateRecovery, IconDisplayConsumerGroups, IconDisplayCustomCname, IconDisplayCustom, IconDisplayCustomersCol, IconDisplayDataBroadcastCol, IconDisplayDataBroadcastMono, IconDisplayDataSynchronizationCol, IconDisplayDedicatedCluster, IconDisplayDeltas, IconDisplayDocsCol, IconDisplayDocumentation, IconDisplayDynamicChannelGroups, IconDisplayEdgeNetwork, IconDisplayElasticity, IconDisplayEqualisersMono, IconDisplayEventsCol, IconDisplayExactlyOnceDelivery, IconDisplayExamplesCol, IconDisplayFanOut, IconDisplayFirehose, IconDisplayGdpr, IconDisplayGeneralComms, IconDisplayGranularPermissions, IconDisplayHipaaMono, IconDisplayHipaa, IconDisplayHistory, IconDisplayIntegrationsCol, IconDisplayIntegrations, IconDisplayItSupportAccess, IconDisplayItSupportHelpdesk, IconDisplayKafkaAtTheEdgeCol, IconDisplayLaptop, IconDisplayLastSeen, IconDisplayLightbulbCol, IconDisplayLiveChat, IconDisplayLiveUpdatesResultsMetricsCol, IconDisplayMapPin, IconDisplayMessageBatching, IconDisplayMessagePersistence, IconDisplayMessageQueues, IconDisplayMessage, IconDisplayMultiUserSpacesCol, IconDisplayObserveAnalytics, IconDisplayPadlockClosed, IconDisplayPlatform, IconDisplayPlay, IconDisplayPremiumSupport, IconDisplayPrivacyShieldFramework, IconDisplayPrivateLink, IconDisplayPushNotificationsCol, IconDisplayPushNotificationsMono, IconDisplayPushNotifications, IconDisplayQuickstartGuidesCol, IconDisplayReactions, IconDisplayReadReceipts, IconDisplayResourcesCol, IconDisplayRewind, IconDisplaySdksCol, IconDisplaySendReceivedMessages, IconDisplayServers, IconDisplayShoppingCart, IconDisplaySla, IconDisplaySoc2Type2Mono, IconDisplaySoc2Type2, IconDisplaySomethingElseMono, IconDisplaySomethingElse, IconDisplaySubscriptionFilters, IconDisplaySupportChatMono, IconDisplaySystemMetadata, IconDisplayTechAccountComms, IconDisplayTutorialsDemosCol, IconDisplayUiMono, IconDisplayUi, IconDisplayVirtualEventsCol, IconDisplayVirtualEvents, };
 import IconGuiAblyBadge from "@ably/ui/core/icon-gui-ably-badge";
 import IconGuiCheckCircledFill from "@ably/ui/core/icon-gui-check-circled-fill";
 import IconGuiCheckLotusCircled from "@ably/ui/core/icon-gui-check-lotus-circled";
@@ -5159,7 +5159,7 @@ export { IconTechAblyApiStreamer, IconTechAblyFirehose, IconTechAblyNative, Icon
 }
 
 declare module '@ably/ui/core/Icon/computed-icons/display-icons' {
-export const displayIcons: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "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-mono", "icon-display-chat-stack", "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-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-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-equalisers-mono", "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-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-last-seen", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "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-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-reactions", "icon-display-read-receipts", "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", "icon-display-soc2-type2-mono", "icon-display-something-else", "icon-display-something-else-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events", "icon-display-virtual-events-col"];
+export const displayIcons: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "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-mono", "icon-display-chat-stack", "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-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-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-equalisers-mono", "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-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-last-seen", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "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-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-reactions", "icon-display-read-receipts", "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", "icon-display-soc2-type2-mono", "icon-display-something-else", "icon-display-something-else-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-ui", "icon-display-ui-mono", "icon-display-virtual-events", "icon-display-virtual-events-col"];
 //# sourceMappingURL=display-icons.d.ts.map
 }
 
@@ -5186,7 +5186,7 @@ export const techIcons: readonly ["icon-tech-ably", "icon-tech-ably-api-streamer
 declare module '@ably/ui/core/Icon/types' {
 export const iconNames: {
     gui: readonly ["icon-gui-ably-badge", "icon-gui-check-circled-fill", "icon-gui-check-lotus-circled", "icon-gui-checklist-checked", "icon-gui-code-doc", "icon-gui-cursor", "icon-gui-expand", "icon-gui-filter-flow-step-0", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-flower-growth", "icon-gui-further-reading", "icon-gui-glasses", "icon-gui-history", "icon-gui-live-chat", "icon-gui-mouse", "icon-gui-partial", "icon-gui-pitfall", "icon-gui-prod-asset-tracking-outline", "icon-gui-prod-asset-tracking-solid", "icon-gui-prod-chat-outline", "icon-gui-prod-chat-solid", "icon-gui-prod-liveobjects-outline", "icon-gui-prod-liveobjects-solid", "icon-gui-prod-livesync-outline", "icon-gui-prod-livesync-solid", "icon-gui-prod-pubsub-outline", "icon-gui-prod-pubsub-solid", "icon-gui-prod-spaces-outline", "icon-gui-prod-spaces-solid", "icon-gui-quote-marks-fill", "icon-gui-refresh", "icon-gui-resources", "icon-gui-spinner-dark", "icon-gui-spinner-light"];
-    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "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-mono", "icon-display-chat-stack", "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-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-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-equalisers-mono", "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-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-last-seen", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "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-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-reactions", "icon-display-read-receipts", "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", "icon-display-soc2-type2-mono", "icon-display-something-else", "icon-display-something-else-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events", "icon-display-virtual-events-col"];
+    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "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-mono", "icon-display-chat-stack", "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-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-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-equalisers-mono", "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-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-last-seen", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "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-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-reactions", "icon-display-read-receipts", "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", "icon-display-soc2-type2-mono", "icon-display-something-else", "icon-display-something-else-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-ui", "icon-display-ui-mono", "icon-display-virtual-events", "icon-display-virtual-events-col"];
     social: readonly ["icon-social-discord", "icon-social-discord-mono", "icon-social-facebook", "icon-social-facebook-mono", "icon-social-github", "icon-social-github-mono", "icon-social-glassdoor", "icon-social-glassdoor-mono", "icon-social-google", "icon-social-google-mono", "icon-social-linkedin", "icon-social-linkedin-mono", "icon-social-slack", "icon-social-slack-mono", "icon-social-stackoverflow", "icon-social-stackoverflow-mono", "icon-social-twitter", "icon-social-twitter-mono", "icon-social-x", "icon-social-x-mono", "icon-social-youtube", "icon-social-youtube-mono"];
     tech: readonly ["icon-tech-ably", "icon-tech-ably-api-streamer", "icon-tech-ably-firehose", "icon-tech-ably-native", "icon-tech-activemq", "icon-tech-activitypub", "icon-tech-aerospike", "icon-tech-akka", "icon-tech-amazon-ec2", "icon-tech-amazon-event-bridge", "icon-tech-amqp091", "icon-tech-amqp10", "icon-tech-android-full", "icon-tech-android-head", "icon-tech-angular", "icon-tech-anycable", "icon-tech-apache-cassandra", "icon-tech-apache-cordova", "icon-tech-apache-kafka", "icon-tech-apache-spark", "icon-tech-apachepulsar", "icon-tech-apachestorm", "icon-tech-apns", "icon-tech-assemblyai", "icon-tech-atmosphere", "icon-tech-aws", "icon-tech-aws-app-sync", "icon-tech-aws-aurora", "icon-tech-aws-gateway-websockets", "icon-tech-aws-sns", "icon-tech-aws-sqs", "icon-tech-awsiot", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azure-api", "icon-tech-azure-archive-api", "icon-tech-azure-bus", "icon-tech-azure-cosmos", "icon-tech-azure-event-hub", "icon-tech-azure-functions", "icon-tech-azure-search", "icon-tech-azure-static-web-app", "icon-tech-azure-static-web-apps", "icon-tech-azure-storage", "icon-tech-azure-web-pubsub", "icon-tech-azurefunctions", "icon-tech-azureservicebus", "icon-tech-azuresignalR", "icon-tech-bayeux", "icon-tech-c++", "icon-tech-centrifugo", "icon-tech-claude", "icon-tech-claude-mono", "icon-tech-client-side-frameworks", "icon-tech-clojure", "icon-tech-cloudflare-durable-objects", "icon-tech-cloudflareworkers", "icon-tech-cocoa", "icon-tech-confluent", "icon-tech-cord", "icon-tech-csharp", "icon-tech-curl", "icon-tech-customwebhooks", "icon-tech-datadog", "icon-tech-design-patterns", "icon-tech-devplatforms", "icon-tech-diffusion-data", "icon-tech-django", "icon-tech-engineio", "icon-tech-event-driven-servers", "icon-tech-fanout-io", "icon-tech-fast-api", "icon-tech-fauna", "icon-tech-featherjs", "icon-tech-firebase", "icon-tech-firebase-cloud-messaging", "icon-tech-flutter", "icon-tech-gcloudbigquery", "icon-tech-gclouddataflow", "icon-tech-gcloudfunctions", "icon-tech-gcloudpubsub", "icon-tech-go", "icon-tech-grpc", "icon-tech-hivemq", "icon-tech-http2", "icon-tech-http3", "icon-tech-httprest", "icon-tech-idempotency", "icon-tech-ifttt", "icon-tech-integrations", "icon-tech-ios", "icon-tech-ios-generic", "icon-tech-ipados", "icon-tech-ipfs", "icon-tech-ironmq", "icon-tech-java", "icon-tech-javascript", "icon-tech-jms", "icon-tech-json", "icon-tech-json-web-tokens", "icon-tech-kaazing", "icon-tech-kotlin", "icon-tech-ksql-db", "icon-tech-kubernetes", "icon-tech-laravel-broadcast", "icon-tech-laravel-echo", "icon-tech-lightstreamer", "icon-tech-liveblocks", "icon-tech-longpolling", "icon-tech-macos", "icon-tech-matrix", "icon-tech-meteor", "icon-tech-mongo-db", "icon-tech-mono", "icon-tech-mqtt", "icon-tech-mysql", "icon-tech-native-script", "icon-tech-net", "icon-tech-netlify", "icon-tech-nextjs", "icon-tech-nkn", "icon-tech-nodejs", "icon-tech-objectivec", "icon-tech-openai", "icon-tech-parse-server", "icon-tech-php", "icon-tech-planetscale", "icon-tech-postgres", "icon-tech-prisma", "icon-tech-programminglanguages", "icon-tech-protcol-adaptors", "icon-tech-protocols", "icon-tech-pub-sub", "icon-tech-pubnub", "icon-tech-push-technology", "icon-tech-pusher", "icon-tech-python", "icon-tech-quic", "icon-tech-rabbitMQ", "icon-tech-railsactioncable", "icon-tech-react", "icon-tech-react-app", "icon-tech-reactnative", "icon-tech-redis", "icon-tech-redpanda", "icon-tech-replicache", "icon-tech-rethinkdb", "icon-tech-rocketmq", "icon-tech-ruby", "icon-tech-scala", "icon-tech-scaledrone", "icon-tech-serversentevents", "icon-tech-serversideframeworks", "icon-tech-signalR", "icon-tech-snowflake", "icon-tech-socketio", "icon-tech-sockjs", "icon-tech-solace", "icon-tech-spring", "icon-tech-stomp", "icon-tech-streamdata-io", "icon-tech-streamr", "icon-tech-swift", "icon-tech-symfony", "icon-tech-symfony-mercure", "icon-tech-tcp-ip", "icon-tech-tenefit", "icon-tech-terraform", "icon-tech-tvos", "icon-tech-twilio", "icon-tech-typescript", "icon-tech-udp-protocol", "icon-tech-unity", "icon-tech-vercel", "icon-tech-vscode", "icon-tech-vuejs", "icon-tech-wamp", "icon-tech-watchos", "icon-tech-web", "icon-tech-web-push", "icon-tech-webhooks", "icon-tech-webrtc", "icon-tech-websockets", "icon-tech-websub", "icon-tech-xamarin", "icon-tech-xhr-streaming", "icon-tech-xmpp", "icon-tech-zapier", "icon-tech-zeromq"];
     product: readonly ["icon-product-asset-tracking", "icon-product-asset-tracking-mono", "icon-product-chat", "icon-product-chat-mono", "icon-product-liveobjects", "icon-product-liveobjects-dark", "icon-product-liveobjects-mono", "icon-product-livesync", "icon-product-livesync-mono", "icon-product-platform", "icon-product-platform-mono", "icon-product-pubsub", "icon-product-pubsub-mono", "icon-product-spaces", "icon-product-spaces-mono"];
@@ -5202,7 +5202,7 @@ export {};
 declare module '@ably/ui/core/Icon/utils' {
 import { IconName } from "@ably/ui/core/types";
 type HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-export const defaultIconSecondaryColor: (name: IconName) => "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" | "text-ably-primary" | "text-ably-primary-inverse" | "text-ably-primary-accent" | "text-ably-primary-inverse-accent" | "text-ably-primary-active" | "text-ably-primary-inverse-active" | "text-ably-secondary" | "text-ably-secondary-inverse" | "text-ably-tertiary" | "text-ably-tertiary-inverse" | "text-ably-label" | "text-ably-label-inverse" | "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" | "bg-ably-primary" | "bg-ably-primary-inverse" | "bg-ably-primary-accent" | "bg-ably-primary-inverse-accent" | "bg-ably-primary-active" | "bg-ably-primary-inverse-active" | "bg-ably-secondary" | "bg-ably-secondary-inverse" | "bg-ably-tertiary" | "bg-ably-tertiary-inverse" | "bg-ably-label" | "bg-ably-label-inverse" | "from-neutral-000" | "from-neutral-100" | "from-neutral-200" | "from-neutral-300" | "from-neutral-400" | "from-neutral-500" | "from-neutral-600" | "from-neutral-700" | "from-neutral-800" | "from-neutral-900" | "from-neutral-1000" | "from-neutral-1100" | "from-neutral-1200" | "from-neutral-1300" | "from-orange-100" | "from-orange-200" | "from-orange-300" | "from-orange-400" | "from-orange-500" | "from-orange-600" | "from-orange-700" | "from-orange-800" | "from-orange-900" | "from-orange-1000" | "from-orange-1100" | "from-yellow-100" | "from-yellow-200" | "from-yellow-300" | "from-yellow-400" | "from-yellow-500" | "from-yellow-600" | "from-yellow-700" | "from-yellow-800" | "from-yellow-900" | "from-green-100" | "from-green-200" | "from-green-300" | "from-green-400" | "from-green-500" | "from-green-600" | "from-green-700" | "from-green-800" | "from-green-900" | "from-blue-100" | "from-blue-200" | "from-blue-300" | "from-blue-400" | "from-blue-500" | "from-blue-600" | "from-blue-700" | "from-blue-800" | "from-blue-900" | "from-violet-100" | "from-violet-200" | "from-violet-300" | "from-violet-400" | "from-violet-500" | "from-violet-600" | "from-violet-700" | "from-violet-800" | "from-violet-900" | "from-pink-100" | "from-pink-200" | "from-pink-300" | "from-pink-400" | "from-pink-500" | "from-pink-600" | "from-pink-700" | "from-pink-800" | "from-pink-900" | "from-gui-blue-default-light" | "from-gui-blue-hover-light" | "from-gui-blue-active-light" | "from-gui-blue-default-dark" | "from-gui-blue-hover-dark" | "from-gui-blue-active-dark" | "from-gui-blue-focus" | "from-gui-unavailable" | "from-gui-success-green" | "from-gui-error-red" | "from-gui-focus" | "from-gui-focus-outline" | "from-gui-visited" | "from-white" | "from-extra-light-grey" | "from-light-grey" | "from-mid-grey" | "from-dark-grey" | "from-charcoal-grey" | "from-cool-black" | "from-active-orange" | "from-bright-red" | "from-red-orange" | "from-electric-cyan" | "from-zingy-green" | "from-jazzy-pink" | "from-gui-default" | "from-gui-hover" | "from-gui-active" | "from-gui-error" | "from-gui-success" | "from-gui-default-dark" | "from-gui-hover-dark" | "from-gui-active-dark" | "from-transparent" | "from-ably-primary" | "from-ably-primary-inverse" | "from-ably-primary-accent" | "from-ably-primary-inverse-accent" | "from-ably-primary-active" | "from-ably-primary-inverse-active" | "from-ably-secondary" | "from-ably-secondary-inverse" | "from-ably-tertiary" | "from-ably-tertiary-inverse" | "from-ably-label" | "from-ably-label-inverse" | "to-neutral-000" | "to-neutral-100" | "to-neutral-200" | "to-neutral-300" | "to-neutral-400" | "to-neutral-500" | "to-neutral-600" | "to-neutral-700" | "to-neutral-800" | "to-neutral-900" | "to-neutral-1000" | "to-neutral-1100" | "to-neutral-1200" | "to-neutral-1300" | "to-orange-100" | "to-orange-200" | "to-orange-300" | "to-orange-400" | "to-orange-500" | "to-orange-600" | "to-orange-700" | "to-orange-800" | "to-orange-900" | "to-orange-1000" | "to-orange-1100" | "to-yellow-100" | "to-yellow-200" | "to-yellow-300" | "to-yellow-400" | "to-yellow-500" | "to-yellow-600" | "to-yellow-700" | "to-yellow-800" | "to-yellow-900" | "to-green-100" | "to-green-200" | "to-green-300" | "to-green-400" | "to-green-500" | "to-green-600" | "to-green-700" | "to-green-800" | "to-green-900" | "to-blue-100" | "to-blue-200" | "to-blue-300" | "to-blue-400" | "to-blue-500" | "to-blue-600" | "to-blue-700" | "to-blue-800" | "to-blue-900" | "to-violet-100" | "to-violet-200" | "to-violet-300" | "to-violet-400" | "to-violet-500" | "to-violet-600" | "to-violet-700" | "to-violet-800" | "to-violet-900" | "to-pink-100" | "to-pink-200" | "to-pink-300" | "to-pink-400" | "to-pink-500" | "to-pink-600" | "to-pink-700" | "to-pink-800" | "to-pink-900" | "to-gui-blue-default-light" | "to-gui-blue-hover-light" | "to-gui-blue-active-light" | "to-gui-blue-default-dark" | "to-gui-blue-hover-dark" | "to-gui-blue-active-dark" | "to-gui-blue-focus" | "to-gui-unavailable" | "to-gui-success-green" | "to-gui-error-red" | "to-gui-focus" | "to-gui-focus-outline" | "to-gui-visited" | "to-white" | "to-extra-light-grey" | "to-light-grey" | "to-mid-grey" | "to-dark-grey" | "to-charcoal-grey" | "to-cool-black" | "to-active-orange" | "to-bright-red" | "to-red-orange" | "to-electric-cyan" | "to-zingy-green" | "to-jazzy-pink" | "to-gui-default" | "to-gui-hover" | "to-gui-active" | "to-gui-error" | "to-gui-success" | "to-gui-default-dark" | "to-gui-hover-dark" | "to-gui-active-dark" | "to-transparent" | "to-ably-primary" | "to-ably-primary-inverse" | "to-ably-primary-accent" | "to-ably-primary-inverse-accent" | "to-ably-primary-active" | "to-ably-primary-inverse-active" | "to-ably-secondary" | "to-ably-secondary-inverse" | "to-ably-tertiary" | "to-ably-tertiary-inverse" | "to-ably-label" | "to-ably-label-inverse" | "border-neutral-000" | "border-neutral-100" | "border-neutral-200" | "border-neutral-300" | "border-neutral-400" | "border-neutral-500" | "border-neutral-600" | "border-neutral-700" | "border-neutral-800" | "border-neutral-900" | "border-neutral-1000" | "border-neutral-1100" | "border-neutral-1200" | "border-neutral-1300" | "border-orange-100" | "border-orange-200" | "border-orange-300" | "border-orange-400" | "border-orange-500" | "border-orange-600" | "border-orange-700" | "border-orange-800" | "border-orange-900" | "border-orange-1000" | "border-orange-1100" | "border-yellow-100" | "border-yellow-200" | "border-yellow-300" | "border-yellow-400" | "border-yellow-500" | "border-yellow-600" | "border-yellow-700" | "border-yellow-800" | "border-yellow-900" | "border-green-100" | "border-green-200" | "border-green-300" | "border-green-400" | "border-green-500" | "border-green-600" | "border-green-700" | "border-green-800" | "border-green-900" | "border-blue-100" | "border-blue-200" | "border-blue-300" | "border-blue-400" | "border-blue-500" | "border-blue-600" | "border-blue-700" | "border-blue-800" | "border-blue-900" | "border-violet-100" | "border-violet-200" | "border-violet-300" | "border-violet-400" | "border-violet-500" | "border-violet-600" | "border-violet-700" | "border-violet-800" | "border-violet-900" | "border-pink-100" | "border-pink-200" | "border-pink-300" | "border-pink-400" | "border-pink-500" | "border-pink-600" | "border-pink-700" | "border-pink-800" | "border-pink-900" | "border-gui-blue-default-light" | "border-gui-blue-hover-light" | "border-gui-blue-active-light" | "border-gui-blue-default-dark" | "border-gui-blue-hover-dark" | "border-gui-blue-active-dark" | "border-gui-blue-focus" | "border-gui-unavailable" | "border-gui-success-green" | "border-gui-error-red" | "border-gui-focus" | "border-gui-focus-outline" | "border-gui-visited" | "border-white" | "border-extra-light-grey" | "border-light-grey" | "border-mid-grey" | "border-dark-grey" | "border-charcoal-grey" | "border-cool-black" | "border-active-orange" | "border-bright-red" | "border-red-orange" | "border-electric-cyan" | "border-zingy-green" | "border-jazzy-pink" | "border-gui-default" | "border-gui-hover" | "border-gui-active" | "border-gui-error" | "border-gui-success" | "border-gui-default-dark" | "border-gui-hover-dark" | "border-gui-active-dark" | "border-transparent" | "border-ably-primary" | "border-ably-primary-inverse" | "border-ably-primary-accent" | "border-ably-primary-inverse-accent" | "border-ably-primary-active" | "border-ably-primary-inverse-active" | "border-ably-secondary" | "border-ably-secondary-inverse" | "border-ably-tertiary" | "border-ably-tertiary-inverse" | "border-ably-label" | "border-ably-label-inverse" | "dark:text-neutral-000" | "dark:text-neutral-100" | "dark:text-neutral-200" | "dark:text-neutral-300" | "dark:text-neutral-400" | "dark:text-neutral-500" | "dark:text-neutral-600" | "dark:text-neutral-700" | "dark:text-neutral-800" | "dark:text-neutral-900" | "dark:text-neutral-1000" | "dark:text-neutral-1100" | "dark:text-neutral-1200" | "dark:text-neutral-1300" | "dark:text-orange-100" | "dark:text-orange-200" | "dark:text-orange-300" | "dark:text-orange-400" | "dark:text-orange-500" | "dark:text-orange-600" | "dark:text-orange-700" | "dark:text-orange-800" | "dark:text-orange-900" | "dark:text-orange-1000" | "dark:text-orange-1100" | "dark:text-yellow-100" | "dark:text-yellow-200" | "dark:text-yellow-300" | "dark:text-yellow-400" | "dark:text-yellow-500" | "dark:text-yellow-600" | "dark:text-yellow-700" | "dark:text-yellow-800" | "dark:text-yellow-900" | "dark:text-green-100" | "dark:text-green-200" | "dark:text-green-300" | "dark:text-green-400" | "dark:text-green-500" | "dark:text-green-600" | "dark:text-green-700" | "dark:text-green-800" | "dark:text-green-900" | "dark:text-blue-100" | "dark:text-blue-200" | "dark:text-blue-300" | "dark:text-blue-400" | "dark:text-blue-500" | "dark:text-blue-600" | "dark:text-blue-700" | "dark:text-blue-800" | "dark:text-blue-900" | "dark:text-violet-100" | "dark:text-violet-200" | "dark:text-violet-300" | "dark:text-violet-400" | "dark:text-violet-500" | "dark:text-violet-600" | "dark:text-violet-700" | "dark:text-violet-800" | "dark:text-violet-900" | "dark:text-pink-100" | "dark:text-pink-200" | "dark:text-pink-300" | "dark:text-pink-400" | "dark:text-pink-500" | "dark:text-pink-600" | "dark:text-pink-700" | "dark:text-pink-800" | "dark:text-pink-900" | "dark:text-gui-blue-default-light" | "dark:text-gui-blue-hover-light" | "dark:text-gui-blue-active-light" | "dark:text-gui-blue-default-dark" | "dark:text-gui-blue-hover-dark" | "dark:text-gui-blue-active-dark" | "dark:text-gui-blue-focus" | "dark:text-gui-unavailable" | "dark:text-gui-success-green" | "dark:text-gui-error-red" | "dark:text-gui-focus" | "dark:text-gui-focus-outline" | "dark:text-gui-visited" | "dark:text-white" | "dark:text-extra-light-grey" | "dark:text-light-grey" | "dark:text-mid-grey" | "dark:text-dark-grey" | "dark:text-charcoal-grey" | "dark:text-cool-black" | "dark:text-active-orange" | "dark:text-bright-red" | "dark:text-red-orange" | "dark:text-electric-cyan" | "dark:text-zingy-green" | "dark:text-jazzy-pink" | "dark:text-gui-default" | "dark:text-gui-hover" | "dark:text-gui-active" | "dark:text-gui-error" | "dark:text-gui-success" | "dark:text-gui-default-dark" | "dark:text-gui-hover-dark" | "dark:text-gui-active-dark" | "dark:text-transparent" | "dark:text-ably-primary" | "dark:text-ably-primary-inverse" | "dark:text-ably-primary-accent" | "dark:text-ably-primary-inverse-accent" | "dark:text-ably-primary-active" | "dark:text-ably-primary-inverse-active" | "dark:text-ably-secondary" | "dark:text-ably-secondary-inverse" | "dark:text-ably-tertiary" | "dark:text-ably-tertiary-inverse" | "dark:text-ably-label" | "dark:text-ably-label-inverse" | "dark:bg-neutral-000" | "dark:bg-neutral-100" | "dark:bg-neutral-200" | "dark:bg-neutral-300" | "dark:bg-neutral-400" | "dark:bg-neutral-500" | "dark:bg-neutral-600" | "dark:bg-neutral-700" | "dark:bg-neutral-800" | "dark:bg-neutral-900" | "dark:bg-neutral-1000" | "dark:bg-neutral-1100" | "dark:bg-neutral-1200" | "dark:bg-neutral-1300" | "dark:bg-orange-100" | "dark:bg-orange-200" | "dark:bg-orange-300" | "dark:bg-orange-400" | "dark:bg-orange-500" | "dark:bg-orange-600" | "dark:bg-orange-700" | "dark:bg-orange-800" | "dark:bg-orange-900" | "dark:bg-orange-1000" | "dark:bg-orange-1100" | "dark:bg-yellow-100" | "dark:bg-yellow-200" | "dark:bg-yellow-300" | "dark:bg-yellow-400" | "dark:bg-yellow-500" | "dark:bg-yellow-600" | "dark:bg-yellow-700" | "dark:bg-yellow-800" | "dark:bg-yellow-900" | "dark:bg-green-100" | "dark:bg-green-200" | "dark:bg-green-300" | "dark:bg-green-400" | "dark:bg-green-500" | "dark:bg-green-600" | "dark:bg-green-700" | "dark:bg-green-800" | "dark:bg-green-900" | "dark:bg-blue-100" | "dark:bg-blue-200" | "dark:bg-blue-300" | "dark:bg-blue-400" | "dark:bg-blue-500" | "dark:bg-blue-600" | "dark:bg-blue-700" | "dark:bg-blue-800" | "dark:bg-blue-900" | "dark:bg-violet-100" | "dark:bg-violet-200" | "dark:bg-violet-300" | "dark:bg-violet-400" | "dark:bg-violet-500" | "dark:bg-violet-600" | "dark:bg-violet-700" | "dark:bg-violet-800" | "dark:bg-violet-900" | "dark:bg-pink-100" | "dark:bg-pink-200" | "dark:bg-pink-300" | "dark:bg-pink-400" | "dark:bg-pink-500" | "dark:bg-pink-600" | "dark:bg-pink-700" | "dark:bg-pink-800" | "dark:bg-pink-900" | "dark:bg-gui-blue-default-light" | "dark:bg-gui-blue-hover-light" | "dark:bg-gui-blue-active-light" | "dark:bg-gui-blue-default-dark" | "dark:bg-gui-blue-hover-dark" | "dark:bg-gui-blue-active-dark" | "dark:bg-gui-blue-focus" | "dark:bg-gui-unavailable" | "dark:bg-gui-success-green" | "dark:bg-gui-error-red" | "dark:bg-gui-focus" | "dark:bg-gui-focus-outline" | "dark:bg-gui-visited" | "dark:bg-white" | "dark:bg-extra-light-grey" | "dark:bg-light-grey" | "dark:bg-mid-grey" | "dark:bg-dark-grey" | "dark:bg-charcoal-grey" | "dark:bg-cool-black" | "dark:bg-active-orange" | "dark:bg-bright-red" | "dark:bg-red-orange" | "dark:bg-electric-cyan" | "dark:bg-zingy-green" | "dark:bg-jazzy-pink" | "dark:bg-gui-default" | "dark:bg-gui-hover" | "dark:bg-gui-active" | "dark:bg-gui-error" | "dark:bg-gui-success" | "dark:bg-gui-default-dark" | "dark:bg-gui-hover-dark" | "dark:bg-gui-active-dark" | "dark:bg-transparent" | "dark:bg-ably-primary" | "dark:bg-ably-primary-inverse" | "dark:bg-ably-primary-accent" | "dark:bg-ably-primary-inverse-accent" | "dark:bg-ably-primary-active" | "dark:bg-ably-primary-inverse-active" | "dark:bg-ably-secondary" | "dark:bg-ably-secondary-inverse" | "dark:bg-ably-tertiary" | "dark:bg-ably-tertiary-inverse" | "dark:bg-ably-label" | "dark:bg-ably-label-inverse" | "dark:from-neutral-000" | "dark:from-neutral-100" | "dark:from-neutral-200" | "dark:from-neutral-300" | "dark:from-neutral-400" | "dark:from-neutral-500" | "dark:from-neutral-600" | "dark:from-neutral-700" | "dark:from-neutral-800" | "dark:from-neutral-900" | "dark:from-neutral-1000" | "dark:from-neutral-1100" | "dark:from-neutral-1200" | "dark:from-neutral-1300" | "dark:from-orange-100" | "dark:from-orange-200" | "dark:from-orange-300" | "dark:from-orange-400" | "dark:from-orange-500" | "dark:from-orange-600" | "dark:from-orange-700" | "dark:from-orange-800" | "dark:from-orange-900" | "dark:from-orange-1000" | "dark:from-orange-1100" | "dark:from-yellow-100" | "dark:from-yellow-200" | "dark:from-yellow-300" | "dark:from-yellow-400" | "dark:from-yellow-500" | "dark:from-yellow-600" | "dark:from-yellow-700" | "dark:from-yellow-800" | "dark:from-yellow-900" | "dark:from-green-100" | "dark:from-green-200" | "dark:from-green-300" | "dark:from-green-400" | "dark:from-green-500" | "dark:from-green-600" | "dark:from-green-700" | "dark:from-green-800" | "dark:from-green-900" | "dark:from-blue-100" | "dark:from-blue-200" | "dark:from-blue-300" | "dark:from-blue-400" | "dark:from-blue-500" | "dark:from-blue-600" | "dark:from-blue-700" | "dark:from-blue-800" | "dark:from-blue-900" | "dark:from-violet-100" | "dark:from-violet-200" | "dark:from-violet-300" | "dark:from-violet-400" | "dark:from-violet-500" | "dark:from-violet-600" | "dark:from-violet-700" | "dark:from-violet-800" | "dark:from-violet-900" | "dark:from-pink-100" | "dark:from-pink-200" | "dark:from-pink-300" | "dark:from-pink-400" | "dark:from-pink-500" | "dark:from-pink-600" | "dark:from-pink-700" | "dark:from-pink-800" | "dark:from-pink-900" | "dark:from-gui-blue-default-light" | "dark:from-gui-blue-hover-light" | "dark:from-gui-blue-active-light" | "dark:from-gui-blue-default-dark" | "dark:from-gui-blue-hover-dark" | "dark:from-gui-blue-active-dark" | "dark:from-gui-blue-focus" | "dark:from-gui-unavailable" | "dark:from-gui-success-green" | "dark:from-gui-error-red" | "dark:from-gui-focus" | "dark:from-gui-focus-outline" | "dark:from-gui-visited" | "dark:from-white" | "dark:from-extra-light-grey" | "dark:from-light-grey" | "dark:from-mid-grey" | "dark:from-dark-grey" | "dark:from-charcoal-grey" | "dark:from-cool-black" | "dark:from-active-orange" | "dark:from-bright-red" | "dark:from-red-orange" | "dark:from-electric-cyan" | "dark:from-zingy-green" | "dark:from-jazzy-pink" | "dark:from-gui-default" | "dark:from-gui-hover" | "dark:from-gui-active" | "dark:from-gui-error" | "dark:from-gui-success" | "dark:from-gui-default-dark" | "dark:from-gui-hover-dark" | "dark:from-gui-active-dark" | "dark:from-transparent" | "dark:from-ably-primary" | "dark:from-ably-primary-inverse" | "dark:from-ably-primary-accent" | "dark:from-ably-primary-inverse-accent" | "dark:from-ably-primary-active" | "dark:from-ably-primary-inverse-active" | "dark:from-ably-secondary" | "dark:from-ably-secondary-inverse" | "dark:from-ably-tertiary" | "dark:from-ably-tertiary-inverse" | "dark:from-ably-label" | "dark:from-ably-label-inverse" | "dark:to-neutral-000" | "dark:to-neutral-100" | "dark:to-neutral-200" | "dark:to-neutral-300" | "dark:to-neutral-400" | "dark:to-neutral-500" | "dark:to-neutral-600" | "dark:to-neutral-700" | "dark:to-neutral-800" | "dark:to-neutral-900" | "dark:to-neutral-1000" | "dark:to-neutral-1100" | "dark:to-neutral-1200" | "dark:to-neutral-1300" | "dark:to-orange-100" | "dark:to-orange-200" | "dark:to-orange-300" | "dark:to-orange-400" | "dark:to-orange-500" | "dark:to-orange-600" | "dark:to-orange-700" | "dark:to-orange-800" | "dark:to-orange-900" | "dark:to-orange-1000" | "dark:to-orange-1100" | "dark:to-yellow-100" | "dark:to-yellow-200" | "dark:to-yellow-300" | "dark:to-yellow-400" | "dark:to-yellow-500" | "dark:to-yellow-600" | "dark:to-yellow-700" | "dark:to-yellow-800" | "dark:to-yellow-900" | "dark:to-green-100" | "dark:to-green-200" | "dark:to-green-300" | "dark:to-green-400" | "dark:to-green-500" | "dark:to-green-600" | "dark:to-green-700" | "dark:to-green-800" | "dark:to-green-900" | "dark:to-blue-100" | "dark:to-blue-200" | "dark:to-blue-300" | "dark:to-blue-400" | "dark:to-blue-500" | "dark:to-blue-600" | "dark:to-blue-700" | "dark:to-blue-800" | "dark:to-blue-900" | "dark:to-violet-100" | "dark:to-violet-200" | "dark:to-violet-300" | "dark:to-violet-400" | "dark:to-violet-500" | "dark:to-violet-600" | "dark:to-violet-700" | "dark:to-violet-800" | "dark:to-violet-900" | "dark:to-pink-100" | "dark:to-pink-200" | "dark:to-pink-300" | "dark:to-pink-400" | "dark:to-pink-500" | "dark:to-pink-600" | "dark:to-pink-700" | "dark:to-pink-800" | "dark:to-pink-900" | "dark:to-gui-blue-default-light" | "dark:to-gui-blue-hover-light" | "dark:to-gui-blue-active-light" | "dark:to-gui-blue-default-dark" | "dark:to-gui-blue-hover-dark" | "dark:to-gui-blue-active-dark" | "dark:to-gui-blue-focus" | "dark:to-gui-unavailable" | "dark:to-gui-success-green" | "dark:to-gui-error-red" | "dark:to-gui-focus" | "dark:to-gui-focus-outline" | "dark:to-gui-visited" | "dark:to-white" | "dark:to-extra-light-grey" | "dark:to-light-grey" | "dark:to-mid-grey" | "dark:to-dark-grey" | "dark:to-charcoal-grey" | "dark:to-cool-black" | "dark:to-active-orange" | "dark:to-bright-red" | "dark:to-red-orange" | "dark:to-electric-cyan" | "dark:to-zingy-green" | "dark:to-jazzy-pink" | "dark:to-gui-default" | "dark:to-gui-hover" | "dark:to-gui-active" | "dark:to-gui-error" | "dark:to-gui-success" | "dark:to-gui-default-dark" | "dark:to-gui-hover-dark" | "dark:to-gui-active-dark" | "dark:to-transparent" | "dark:to-ably-primary" | "dark:to-ably-primary-inverse" | "dark:to-ably-primary-accent" | "dark:to-ably-primary-inverse-accent" | "dark:to-ably-primary-active" | "dark:to-ably-primary-inverse-active" | "dark:to-ably-secondary" | "dark:to-ably-secondary-inverse" | "dark:to-ably-tertiary" | "dark:to-ably-tertiary-inverse" | "dark:to-ably-label" | "dark:to-ably-label-inverse" | "dark:border-neutral-000" | "dark:border-neutral-100" | "dark:border-neutral-200" | "dark:border-neutral-300" | "dark:border-neutral-400" | "dark:border-neutral-500" | "dark:border-neutral-600" | "dark:border-neutral-700" | "dark:border-neutral-800" | "dark:border-neutral-900" | "dark:border-neutral-1000" | "dark:border-neutral-1100" | "dark:border-neutral-1200" | "dark:border-neutral-1300" | "dark:border-orange-100" | "dark:border-orange-200" | "dark:border-orange-300" | "dark:border-orange-400" | "dark:border-orange-500" | "dark:border-orange-600" | "dark:border-orange-700" | "dark:border-orange-800" | "dark:border-orange-900" | "dark:border-orange-1000" | "dark:border-orange-1100" | "dark:border-yellow-100" | "dark:border-yellow-200" | "dark:border-yellow-300" | "dark:border-yellow-400" | "dark:border-yellow-500" | "dark:border-yellow-600" | "dark:border-yellow-700" | "dark:border-yellow-800" | "dark:border-yellow-900" | "dark:border-green-100" | "dark:border-green-200" | "dark:border-green-300" | "dark:border-green-400" | "dark:border-green-500" | "dark:border-green-600" | "dark:border-green-700" | "dark:border-green-800" | "dark:border-green-900" | "dark:border-blue-100" | "dark:border-blue-200" | "dark:border-blue-300" | "dark:border-blue-400" | "dark:border-blue-500" | "dark:border-blue-600" | "dark:border-blue-700" | "dark:border-blue-800" | "dark:border-blue-900" | "dark:border-violet-100" | "dark:border-violet-200" | "dark:border-violet-300" | "dark:border-violet-400" | "dark:border-violet-500" | "dark:border-violet-600" | "dark:border-violet-700" | "dark:border-violet-800" | "dark:border-violet-900" | "dark:border-pink-100" | "dark:border-pink-200" | "dark:border-pink-300" | "dark:border-pink-400" | "dark:border-pink-500" | "dark:border-pink-600" | "dark:border-pink-700" | "dark:border-pink-800" | "dark:border-pink-900" | "dark:border-gui-blue-default-light" | "dark:border-gui-blue-hover-light" | "dark:border-gui-blue-active-light" | "dark:border-gui-blue-default-dark" | "dark:border-gui-blue-hover-dark" | "dark:border-gui-blue-active-dark" | "dark:border-gui-blue-focus" | "dark:border-gui-unavailable" | "dark:border-gui-success-green" | "dark:border-gui-error-red" | "dark:border-gui-focus" | "dark:border-gui-focus-outline" | "dark:border-gui-visited" | "dark:border-white" | "dark:border-extra-light-grey" | "dark:border-light-grey" | "dark:border-mid-grey" | "dark:border-dark-grey" | "dark:border-charcoal-grey" | "dark:border-cool-black" | "dark:border-active-orange" | "dark:border-bright-red" | "dark:border-red-orange" | "dark:border-electric-cyan" | "dark:border-zingy-green" | "dark:border-jazzy-pink" | "dark:border-gui-default" | "dark:border-gui-hover" | "dark:border-gui-active" | "dark:border-gui-error" | "dark:border-gui-success" | "dark:border-gui-default-dark" | "dark:border-gui-hover-dark" | "dark:border-gui-active-dark" | "dark:border-transparent" | "dark:border-ably-primary" | "dark:border-ably-primary-inverse" | "dark:border-ably-primary-accent" | "dark:border-ably-primary-inverse-accent" | "dark:border-ably-primary-active" | "dark:border-ably-primary-inverse-active" | "dark:border-ably-secondary" | "dark:border-ably-secondary-inverse" | "dark:border-ably-tertiary" | "dark:border-ably-tertiary-inverse" | "dark:border-ably-label" | "dark:border-ably-label-inverse";
+export const defaultIconSecondaryColor: (name: IconName) => "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" | "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" | "from-neutral-000" | "from-neutral-100" | "from-neutral-200" | "from-neutral-300" | "from-neutral-400" | "from-neutral-500" | "from-neutral-600" | "from-neutral-700" | "from-neutral-800" | "from-neutral-900" | "from-neutral-1000" | "from-neutral-1100" | "from-neutral-1200" | "from-neutral-1300" | "from-orange-100" | "from-orange-200" | "from-orange-300" | "from-orange-400" | "from-orange-500" | "from-orange-600" | "from-orange-700" | "from-orange-800" | "from-orange-900" | "from-orange-1000" | "from-orange-1100" | "from-yellow-100" | "from-yellow-200" | "from-yellow-300" | "from-yellow-400" | "from-yellow-500" | "from-yellow-600" | "from-yellow-700" | "from-yellow-800" | "from-yellow-900" | "from-green-100" | "from-green-200" | "from-green-300" | "from-green-400" | "from-green-500" | "from-green-600" | "from-green-700" | "from-green-800" | "from-green-900" | "from-blue-100" | "from-blue-200" | "from-blue-300" | "from-blue-400" | "from-blue-500" | "from-blue-600" | "from-blue-700" | "from-blue-800" | "from-blue-900" | "from-violet-100" | "from-violet-200" | "from-violet-300" | "from-violet-400" | "from-violet-500" | "from-violet-600" | "from-violet-700" | "from-violet-800" | "from-violet-900" | "from-pink-100" | "from-pink-200" | "from-pink-300" | "from-pink-400" | "from-pink-500" | "from-pink-600" | "from-pink-700" | "from-pink-800" | "from-pink-900" | "from-gui-blue-default-light" | "from-gui-blue-hover-light" | "from-gui-blue-active-light" | "from-gui-blue-default-dark" | "from-gui-blue-hover-dark" | "from-gui-blue-active-dark" | "from-gui-blue-focus" | "from-gui-unavailable" | "from-gui-success-green" | "from-gui-error-red" | "from-gui-focus" | "from-gui-focus-outline" | "from-gui-visited" | "from-white" | "from-extra-light-grey" | "from-light-grey" | "from-mid-grey" | "from-dark-grey" | "from-charcoal-grey" | "from-cool-black" | "from-active-orange" | "from-bright-red" | "from-red-orange" | "from-electric-cyan" | "from-zingy-green" | "from-jazzy-pink" | "from-gui-default" | "from-gui-hover" | "from-gui-active" | "from-gui-error" | "from-gui-success" | "from-gui-default-dark" | "from-gui-hover-dark" | "from-gui-active-dark" | "from-transparent" | "to-neutral-000" | "to-neutral-100" | "to-neutral-200" | "to-neutral-300" | "to-neutral-400" | "to-neutral-500" | "to-neutral-600" | "to-neutral-700" | "to-neutral-800" | "to-neutral-900" | "to-neutral-1000" | "to-neutral-1100" | "to-neutral-1200" | "to-neutral-1300" | "to-orange-100" | "to-orange-200" | "to-orange-300" | "to-orange-400" | "to-orange-500" | "to-orange-600" | "to-orange-700" | "to-orange-800" | "to-orange-900" | "to-orange-1000" | "to-orange-1100" | "to-yellow-100" | "to-yellow-200" | "to-yellow-300" | "to-yellow-400" | "to-yellow-500" | "to-yellow-600" | "to-yellow-700" | "to-yellow-800" | "to-yellow-900" | "to-green-100" | "to-green-200" | "to-green-300" | "to-green-400" | "to-green-500" | "to-green-600" | "to-green-700" | "to-green-800" | "to-green-900" | "to-blue-100" | "to-blue-200" | "to-blue-300" | "to-blue-400" | "to-blue-500" | "to-blue-600" | "to-blue-700" | "to-blue-800" | "to-blue-900" | "to-violet-100" | "to-violet-200" | "to-violet-300" | "to-violet-400" | "to-violet-500" | "to-violet-600" | "to-violet-700" | "to-violet-800" | "to-violet-900" | "to-pink-100" | "to-pink-200" | "to-pink-300" | "to-pink-400" | "to-pink-500" | "to-pink-600" | "to-pink-700" | "to-pink-800" | "to-pink-900" | "to-gui-blue-default-light" | "to-gui-blue-hover-light" | "to-gui-blue-active-light" | "to-gui-blue-default-dark" | "to-gui-blue-hover-dark" | "to-gui-blue-active-dark" | "to-gui-blue-focus" | "to-gui-unavailable" | "to-gui-success-green" | "to-gui-error-red" | "to-gui-focus" | "to-gui-focus-outline" | "to-gui-visited" | "to-white" | "to-extra-light-grey" | "to-light-grey" | "to-mid-grey" | "to-dark-grey" | "to-charcoal-grey" | "to-cool-black" | "to-active-orange" | "to-bright-red" | "to-red-orange" | "to-electric-cyan" | "to-zingy-green" | "to-jazzy-pink" | "to-gui-default" | "to-gui-hover" | "to-gui-active" | "to-gui-error" | "to-gui-success" | "to-gui-default-dark" | "to-gui-hover-dark" | "to-gui-active-dark" | "to-transparent" | "border-neutral-000" | "border-neutral-100" | "border-neutral-200" | "border-neutral-300" | "border-neutral-400" | "border-neutral-500" | "border-neutral-600" | "border-neutral-700" | "border-neutral-800" | "border-neutral-900" | "border-neutral-1000" | "border-neutral-1100" | "border-neutral-1200" | "border-neutral-1300" | "border-orange-100" | "border-orange-200" | "border-orange-300" | "border-orange-400" | "border-orange-500" | "border-orange-600" | "border-orange-700" | "border-orange-800" | "border-orange-900" | "border-orange-1000" | "border-orange-1100" | "border-yellow-100" | "border-yellow-200" | "border-yellow-300" | "border-yellow-400" | "border-yellow-500" | "border-yellow-600" | "border-yellow-700" | "border-yellow-800" | "border-yellow-900" | "border-green-100" | "border-green-200" | "border-green-300" | "border-green-400" | "border-green-500" | "border-green-600" | "border-green-700" | "border-green-800" | "border-green-900" | "border-blue-100" | "border-blue-200" | "border-blue-300" | "border-blue-400" | "border-blue-500" | "border-blue-600" | "border-blue-700" | "border-blue-800" | "border-blue-900" | "border-violet-100" | "border-violet-200" | "border-violet-300" | "border-violet-400" | "border-violet-500" | "border-violet-600" | "border-violet-700" | "border-violet-800" | "border-violet-900" | "border-pink-100" | "border-pink-200" | "border-pink-300" | "border-pink-400" | "border-pink-500" | "border-pink-600" | "border-pink-700" | "border-pink-800" | "border-pink-900" | "border-gui-blue-default-light" | "border-gui-blue-hover-light" | "border-gui-blue-active-light" | "border-gui-blue-default-dark" | "border-gui-blue-hover-dark" | "border-gui-blue-active-dark" | "border-gui-blue-focus" | "border-gui-unavailable" | "border-gui-success-green" | "border-gui-error-red" | "border-gui-focus" | "border-gui-focus-outline" | "border-gui-visited" | "border-white" | "border-extra-light-grey" | "border-light-grey" | "border-mid-grey" | "border-dark-grey" | "border-charcoal-grey" | "border-cool-black" | "border-active-orange" | "border-bright-red" | "border-red-orange" | "border-electric-cyan" | "border-zingy-green" | "border-jazzy-pink" | "border-gui-default" | "border-gui-hover" | "border-gui-active" | "border-gui-error" | "border-gui-success" | "border-gui-default-dark" | "border-gui-hover-dark" | "border-gui-active-dark" | "border-transparent" | "dark:text-neutral-000" | "dark:text-neutral-100" | "dark:text-neutral-200" | "dark:text-neutral-300" | "dark:text-neutral-400" | "dark:text-neutral-500" | "dark:text-neutral-600" | "dark:text-neutral-700" | "dark:text-neutral-800" | "dark:text-neutral-900" | "dark:text-neutral-1000" | "dark:text-neutral-1100" | "dark:text-neutral-1200" | "dark:text-neutral-1300" | "dark:text-orange-100" | "dark:text-orange-200" | "dark:text-orange-300" | "dark:text-orange-400" | "dark:text-orange-500" | "dark:text-orange-600" | "dark:text-orange-700" | "dark:text-orange-800" | "dark:text-orange-900" | "dark:text-orange-1000" | "dark:text-orange-1100" | "dark:text-yellow-100" | "dark:text-yellow-200" | "dark:text-yellow-300" | "dark:text-yellow-400" | "dark:text-yellow-500" | "dark:text-yellow-600" | "dark:text-yellow-700" | "dark:text-yellow-800" | "dark:text-yellow-900" | "dark:text-green-100" | "dark:text-green-200" | "dark:text-green-300" | "dark:text-green-400" | "dark:text-green-500" | "dark:text-green-600" | "dark:text-green-700" | "dark:text-green-800" | "dark:text-green-900" | "dark:text-blue-100" | "dark:text-blue-200" | "dark:text-blue-300" | "dark:text-blue-400" | "dark:text-blue-500" | "dark:text-blue-600" | "dark:text-blue-700" | "dark:text-blue-800" | "dark:text-blue-900" | "dark:text-violet-100" | "dark:text-violet-200" | "dark:text-violet-300" | "dark:text-violet-400" | "dark:text-violet-500" | "dark:text-violet-600" | "dark:text-violet-700" | "dark:text-violet-800" | "dark:text-violet-900" | "dark:text-pink-100" | "dark:text-pink-200" | "dark:text-pink-300" | "dark:text-pink-400" | "dark:text-pink-500" | "dark:text-pink-600" | "dark:text-pink-700" | "dark:text-pink-800" | "dark:text-pink-900" | "dark:text-gui-blue-default-light" | "dark:text-gui-blue-hover-light" | "dark:text-gui-blue-active-light" | "dark:text-gui-blue-default-dark" | "dark:text-gui-blue-hover-dark" | "dark:text-gui-blue-active-dark" | "dark:text-gui-blue-focus" | "dark:text-gui-unavailable" | "dark:text-gui-success-green" | "dark:text-gui-error-red" | "dark:text-gui-focus" | "dark:text-gui-focus-outline" | "dark:text-gui-visited" | "dark:text-white" | "dark:text-extra-light-grey" | "dark:text-light-grey" | "dark:text-mid-grey" | "dark:text-dark-grey" | "dark:text-charcoal-grey" | "dark:text-cool-black" | "dark:text-active-orange" | "dark:text-bright-red" | "dark:text-red-orange" | "dark:text-electric-cyan" | "dark:text-zingy-green" | "dark:text-jazzy-pink" | "dark:text-gui-default" | "dark:text-gui-hover" | "dark:text-gui-active" | "dark:text-gui-error" | "dark:text-gui-success" | "dark:text-gui-default-dark" | "dark:text-gui-hover-dark" | "dark:text-gui-active-dark" | "dark:text-transparent" | "dark:bg-neutral-000" | "dark:bg-neutral-100" | "dark:bg-neutral-200" | "dark:bg-neutral-300" | "dark:bg-neutral-400" | "dark:bg-neutral-500" | "dark:bg-neutral-600" | "dark:bg-neutral-700" | "dark:bg-neutral-800" | "dark:bg-neutral-900" | "dark:bg-neutral-1000" | "dark:bg-neutral-1100" | "dark:bg-neutral-1200" | "dark:bg-neutral-1300" | "dark:bg-orange-100" | "dark:bg-orange-200" | "dark:bg-orange-300" | "dark:bg-orange-400" | "dark:bg-orange-500" | "dark:bg-orange-600" | "dark:bg-orange-700" | "dark:bg-orange-800" | "dark:bg-orange-900" | "dark:bg-orange-1000" | "dark:bg-orange-1100" | "dark:bg-yellow-100" | "dark:bg-yellow-200" | "dark:bg-yellow-300" | "dark:bg-yellow-400" | "dark:bg-yellow-500" | "dark:bg-yellow-600" | "dark:bg-yellow-700" | "dark:bg-yellow-800" | "dark:bg-yellow-900" | "dark:bg-green-100" | "dark:bg-green-200" | "dark:bg-green-300" | "dark:bg-green-400" | "dark:bg-green-500" | "dark:bg-green-600" | "dark:bg-green-700" | "dark:bg-green-800" | "dark:bg-green-900" | "dark:bg-blue-100" | "dark:bg-blue-200" | "dark:bg-blue-300" | "dark:bg-blue-400" | "dark:bg-blue-500" | "dark:bg-blue-600" | "dark:bg-blue-700" | "dark:bg-blue-800" | "dark:bg-blue-900" | "dark:bg-violet-100" | "dark:bg-violet-200" | "dark:bg-violet-300" | "dark:bg-violet-400" | "dark:bg-violet-500" | "dark:bg-violet-600" | "dark:bg-violet-700" | "dark:bg-violet-800" | "dark:bg-violet-900" | "dark:bg-pink-100" | "dark:bg-pink-200" | "dark:bg-pink-300" | "dark:bg-pink-400" | "dark:bg-pink-500" | "dark:bg-pink-600" | "dark:bg-pink-700" | "dark:bg-pink-800" | "dark:bg-pink-900" | "dark:bg-gui-blue-default-light" | "dark:bg-gui-blue-hover-light" | "dark:bg-gui-blue-active-light" | "dark:bg-gui-blue-default-dark" | "dark:bg-gui-blue-hover-dark" | "dark:bg-gui-blue-active-dark" | "dark:bg-gui-blue-focus" | "dark:bg-gui-unavailable" | "dark:bg-gui-success-green" | "dark:bg-gui-error-red" | "dark:bg-gui-focus" | "dark:bg-gui-focus-outline" | "dark:bg-gui-visited" | "dark:bg-white" | "dark:bg-extra-light-grey" | "dark:bg-light-grey" | "dark:bg-mid-grey" | "dark:bg-dark-grey" | "dark:bg-charcoal-grey" | "dark:bg-cool-black" | "dark:bg-active-orange" | "dark:bg-bright-red" | "dark:bg-red-orange" | "dark:bg-electric-cyan" | "dark:bg-zingy-green" | "dark:bg-jazzy-pink" | "dark:bg-gui-default" | "dark:bg-gui-hover" | "dark:bg-gui-active" | "dark:bg-gui-error" | "dark:bg-gui-success" | "dark:bg-gui-default-dark" | "dark:bg-gui-hover-dark" | "dark:bg-gui-active-dark" | "dark:bg-transparent" | "dark:from-neutral-000" | "dark:from-neutral-100" | "dark:from-neutral-200" | "dark:from-neutral-300" | "dark:from-neutral-400" | "dark:from-neutral-500" | "dark:from-neutral-600" | "dark:from-neutral-700" | "dark:from-neutral-800" | "dark:from-neutral-900" | "dark:from-neutral-1000" | "dark:from-neutral-1100" | "dark:from-neutral-1200" | "dark:from-neutral-1300" | "dark:from-orange-100" | "dark:from-orange-200" | "dark:from-orange-300" | "dark:from-orange-400" | "dark:from-orange-500" | "dark:from-orange-600" | "dark:from-orange-700" | "dark:from-orange-800" | "dark:from-orange-900" | "dark:from-orange-1000" | "dark:from-orange-1100" | "dark:from-yellow-100" | "dark:from-yellow-200" | "dark:from-yellow-300" | "dark:from-yellow-400" | "dark:from-yellow-500" | "dark:from-yellow-600" | "dark:from-yellow-700" | "dark:from-yellow-800" | "dark:from-yellow-900" | "dark:from-green-100" | "dark:from-green-200" | "dark:from-green-300" | "dark:from-green-400" | "dark:from-green-500" | "dark:from-green-600" | "dark:from-green-700" | "dark:from-green-800" | "dark:from-green-900" | "dark:from-blue-100" | "dark:from-blue-200" | "dark:from-blue-300" | "dark:from-blue-400" | "dark:from-blue-500" | "dark:from-blue-600" | "dark:from-blue-700" | "dark:from-blue-800" | "dark:from-blue-900" | "dark:from-violet-100" | "dark:from-violet-200" | "dark:from-violet-300" | "dark:from-violet-400" | "dark:from-violet-500" | "dark:from-violet-600" | "dark:from-violet-700" | "dark:from-violet-800" | "dark:from-violet-900" | "dark:from-pink-100" | "dark:from-pink-200" | "dark:from-pink-300" | "dark:from-pink-400" | "dark:from-pink-500" | "dark:from-pink-600" | "dark:from-pink-700" | "dark:from-pink-800" | "dark:from-pink-900" | "dark:from-gui-blue-default-light" | "dark:from-gui-blue-hover-light" | "dark:from-gui-blue-active-light" | "dark:from-gui-blue-default-dark" | "dark:from-gui-blue-hover-dark" | "dark:from-gui-blue-active-dark" | "dark:from-gui-blue-focus" | "dark:from-gui-unavailable" | "dark:from-gui-success-green" | "dark:from-gui-error-red" | "dark:from-gui-focus" | "dark:from-gui-focus-outline" | "dark:from-gui-visited" | "dark:from-white" | "dark:from-extra-light-grey" | "dark:from-light-grey" | "dark:from-mid-grey" | "dark:from-dark-grey" | "dark:from-charcoal-grey" | "dark:from-cool-black" | "dark:from-active-orange" | "dark:from-bright-red" | "dark:from-red-orange" | "dark:from-electric-cyan" | "dark:from-zingy-green" | "dark:from-jazzy-pink" | "dark:from-gui-default" | "dark:from-gui-hover" | "dark:from-gui-active" | "dark:from-gui-error" | "dark:from-gui-success" | "dark:from-gui-default-dark" | "dark:from-gui-hover-dark" | "dark:from-gui-active-dark" | "dark:from-transparent" | "dark:to-neutral-000" | "dark:to-neutral-100" | "dark:to-neutral-200" | "dark:to-neutral-300" | "dark:to-neutral-400" | "dark:to-neutral-500" | "dark:to-neutral-600" | "dark:to-neutral-700" | "dark:to-neutral-800" | "dark:to-neutral-900" | "dark:to-neutral-1000" | "dark:to-neutral-1100" | "dark:to-neutral-1200" | "dark:to-neutral-1300" | "dark:to-orange-100" | "dark:to-orange-200" | "dark:to-orange-300" | "dark:to-orange-400" | "dark:to-orange-500" | "dark:to-orange-600" | "dark:to-orange-700" | "dark:to-orange-800" | "dark:to-orange-900" | "dark:to-orange-1000" | "dark:to-orange-1100" | "dark:to-yellow-100" | "dark:to-yellow-200" | "dark:to-yellow-300" | "dark:to-yellow-400" | "dark:to-yellow-500" | "dark:to-yellow-600" | "dark:to-yellow-700" | "dark:to-yellow-800" | "dark:to-yellow-900" | "dark:to-green-100" | "dark:to-green-200" | "dark:to-green-300" | "dark:to-green-400" | "dark:to-green-500" | "dark:to-green-600" | "dark:to-green-700" | "dark:to-green-800" | "dark:to-green-900" | "dark:to-blue-100" | "dark:to-blue-200" | "dark:to-blue-300" | "dark:to-blue-400" | "dark:to-blue-500" | "dark:to-blue-600" | "dark:to-blue-700" | "dark:to-blue-800" | "dark:to-blue-900" | "dark:to-violet-100" | "dark:to-violet-200" | "dark:to-violet-300" | "dark:to-violet-400" | "dark:to-violet-500" | "dark:to-violet-600" | "dark:to-violet-700" | "dark:to-violet-800" | "dark:to-violet-900" | "dark:to-pink-100" | "dark:to-pink-200" | "dark:to-pink-300" | "dark:to-pink-400" | "dark:to-pink-500" | "dark:to-pink-600" | "dark:to-pink-700" | "dark:to-pink-800" | "dark:to-pink-900" | "dark:to-gui-blue-default-light" | "dark:to-gui-blue-hover-light" | "dark:to-gui-blue-active-light" | "dark:to-gui-blue-default-dark" | "dark:to-gui-blue-hover-dark" | "dark:to-gui-blue-active-dark" | "dark:to-gui-blue-focus" | "dark:to-gui-unavailable" | "dark:to-gui-success-green" | "dark:to-gui-error-red" | "dark:to-gui-focus" | "dark:to-gui-focus-outline" | "dark:to-gui-visited" | "dark:to-white" | "dark:to-extra-light-grey" | "dark:to-light-grey" | "dark:to-mid-grey" | "dark:to-dark-grey" | "dark:to-charcoal-grey" | "dark:to-cool-black" | "dark:to-active-orange" | "dark:to-bright-red" | "dark:to-red-orange" | "dark:to-electric-cyan" | "dark:to-zingy-green" | "dark:to-jazzy-pink" | "dark:to-gui-default" | "dark:to-gui-hover" | "dark:to-gui-active" | "dark:to-gui-error" | "dark:to-gui-success" | "dark:to-gui-default-dark" | "dark:to-gui-hover-dark" | "dark:to-gui-active-dark" | "dark:to-transparent" | "dark:border-neutral-000" | "dark:border-neutral-100" | "dark:border-neutral-200" | "dark:border-neutral-300" | "dark:border-neutral-400" | "dark:border-neutral-500" | "dark:border-neutral-600" | "dark:border-neutral-700" | "dark:border-neutral-800" | "dark:border-neutral-900" | "dark:border-neutral-1000" | "dark:border-neutral-1100" | "dark:border-neutral-1200" | "dark:border-neutral-1300" | "dark:border-orange-100" | "dark:border-orange-200" | "dark:border-orange-300" | "dark:border-orange-400" | "dark:border-orange-500" | "dark:border-orange-600" | "dark:border-orange-700" | "dark:border-orange-800" | "dark:border-orange-900" | "dark:border-orange-1000" | "dark:border-orange-1100" | "dark:border-yellow-100" | "dark:border-yellow-200" | "dark:border-yellow-300" | "dark:border-yellow-400" | "dark:border-yellow-500" | "dark:border-yellow-600" | "dark:border-yellow-700" | "dark:border-yellow-800" | "dark:border-yellow-900" | "dark:border-green-100" | "dark:border-green-200" | "dark:border-green-300" | "dark:border-green-400" | "dark:border-green-500" | "dark:border-green-600" | "dark:border-green-700" | "dark:border-green-800" | "dark:border-green-900" | "dark:border-blue-100" | "dark:border-blue-200" | "dark:border-blue-300" | "dark:border-blue-400" | "dark:border-blue-500" | "dark:border-blue-600" | "dark:border-blue-700" | "dark:border-blue-800" | "dark:border-blue-900" | "dark:border-violet-100" | "dark:border-violet-200" | "dark:border-violet-300" | "dark:border-violet-400" | "dark:border-violet-500" | "dark:border-violet-600" | "dark:border-violet-700" | "dark:border-violet-800" | "dark:border-violet-900" | "dark:border-pink-100" | "dark:border-pink-200" | "dark:border-pink-300" | "dark:border-pink-400" | "dark:border-pink-500" | "dark:border-pink-600" | "dark:border-pink-700" | "dark:border-pink-800" | "dark:border-pink-900" | "dark:border-gui-blue-default-light" | "dark:border-gui-blue-hover-light" | "dark:border-gui-blue-active-light" | "dark:border-gui-blue-default-dark" | "dark:border-gui-blue-hover-dark" | "dark:border-gui-blue-active-dark" | "dark:border-gui-blue-focus" | "dark:border-gui-unavailable" | "dark:border-gui-success-green" | "dark:border-gui-error-red" | "dark:border-gui-focus" | "dark:border-gui-focus-outline" | "dark:border-gui-visited" | "dark:border-white" | "dark:border-extra-light-grey" | "dark:border-light-grey" | "dark:border-mid-grey" | "dark:border-dark-grey" | "dark:border-charcoal-grey" | "dark:border-cool-black" | "dark:border-active-orange" | "dark:border-bright-red" | "dark:border-red-orange" | "dark:border-electric-cyan" | "dark:border-zingy-green" | "dark:border-jazzy-pink" | "dark:border-gui-default" | "dark:border-gui-hover" | "dark:border-gui-active" | "dark:border-gui-error" | "dark:border-gui-success" | "dark:border-gui-default-dark" | "dark:border-gui-hover-dark" | "dark:border-gui-active-dark" | "dark:border-transparent";
 export const toPascalCase: (str: string) => string;
 export const getHeroicon: (iconName: string, variant: string) => HeroiconComponent | null;
 export const setUniqueIds: (el: SVGSVGElement | null, uniqueId: string) => void;
@@ -5410,8 +5410,9 @@ export type MeganavProps = {
     notice?: MeganavNoticeBannerProps;
     theme?: string;
     themedScrollpoints?: ThemedScrollpoint[];
+    onNoticeClose?: () => void;
 };
-const Meganav: ({ sessionState, notice, theme, themedScrollpoints, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ sessionState, notice, theme, themedScrollpoints, onNoticeClose, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -5445,6 +5446,7 @@ export type NoticeProps = {
     };
     bgColor?: string;
     textColor?: ColorClass | ColorThemeSet;
+    onClose?: () => void;
     bannerContainer?: Element | null;
     cookieId?: string;
     noticeId?: string;
@@ -5452,7 +5454,7 @@ export type NoticeProps = {
         collapse: boolean;
     };
 };
-const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
+const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, onClose, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
 export default Notice;
 //# sourceMappingURL=Notice.d.ts.map
 }
@@ -5498,8 +5500,8 @@ export type PricingDataFeatureSection = {
     title: string;
     items: string[] | string[][];
     listItemColors?: {
-        foreground: ColorClass | ColorThemeSet;
-        background: ColorClass | ColorThemeSet;
+        foreground: ColorThemeSet;
+        background: ColorThemeSet;
     };
 };
 export type PricingDataFeatureBorder = {
@@ -6090,7 +6092,7 @@ export { default as reactRenderer, renderComponent } from "@ably/ui/core/react-r
 }
 
 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] | "ably-primary" | "ably-primary-inverse" | "ably-primary-accent" | "ably-primary-inverse-accent" | "ably-primary-active" | "ably-primary-inverse-active" | "ably-secondary" | "ably-secondary-inverse" | "ably-tertiary" | "ably-tertiary-inverse" | "ably-label" | "ably-label-inverse";
+export type ColorName = (typeof neutralColors)[number] | (typeof orangeColors)[number] | (typeof secondaryColors)[number] | (typeof guiColors)[number] | (typeof aliasedColors)[number];
 export const variants: readonly ["", "dark:"];
 type ColorClassVariants = (typeof variants)[number];
 export const prefixes: readonly ["text", "bg", "from", "to", "border"];
@@ -6107,8 +6109,8 @@ export const greenColors: readonly ["green-100", "green-200", "green-300", "gree
 export const blueColors: readonly ["blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900"];
 export const violetColors: readonly ["violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900"];
 export const pinkColors: readonly ["pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-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"];
+export 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"];
+export 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"];
 export 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 colorRoles: {
     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"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.8.0-dev.8c49cde1",
+  "version": "17.8.0-dev.becb7c12",
   "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",
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-vitest": "^9.1.5",
     "@storybook/react-vite": "^9.1.4",
-    "@storybook/test-runner": "^0.23.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
@@ -36,15 +36,20 @@
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "@vueless/storybook-dark-mode": "^9.0.8",
     "autoprefixer": "^10.0.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-perf": "^3.3.3",
     "eslint-plugin-storybook": "^9.1.4",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
-    "jsdom": "^26.0.0",
+    "jsdom": "^27.0.0",
     "mixpanel-browser": "^2.60.0",
     "msw": "2.11.1",
     "msw-storybook-addon": "^2.0.5",
@@ -57,8 +62,7 @@
     "ts-node": "^10.9.2",
     "typescript": "5.9.2",
     "vite": "^7.1.4",
-    "vitest": "^3.0.8",
-    "wait-on": "^8.0.3"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -104,9 +108,9 @@
     "build:icons": "ts-node scripts/generate-icons.ts",
     "build": "pnpm build:prebuild && pnpm build:icons && pnpm build:swc && pnpm build:tsc && pnpm build:cleanup",
     "watch": "pnpm build:swc -w",
-    "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
-    "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
-    "lint": "eslint *.{js,ts} src/**/*.{js,ts,tsx,stories.tsx}",
+    "format:check": "prettier -c \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
+    "format:write": "prettier -w \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
+    "lint": "eslint \"*.{js,ts}\" \".storybook/*.{js,ts,tsx}\" \"src/**/*.{js,ts,tsx}\"",
     "update:all": "./scripts/update-dependents.sh",
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
@@ -114,9 +118,7 @@
     "storybook": "pnpm build && storybook dev -p 6006",
     "build-storybook": "pnpm build && storybook build --quiet -o preview",
     "heroku-postbuild": "pnpm build-storybook && ./scripts/setup-auth.sh",
-    "test": "pnpm test:storybook && pnpm test:vitest run",
-    "test:storybook": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && pnpm test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build-storybook && pnpm http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && pnpm test-storybook -u --url http://127.0.0.1:6007\"",
-    "test:vitest": "vitest --environment=jsdom --dir=src"
+    "test": "vitest --run",
+    "test:ci": "pnpm build:icons && pnpm test"
   }
 }

package/tailwind.config.js

@@ -52,20 +52,6 @@ module.exports = {
     },
     extend: {
       colors: {
-        "ably-primary": "var(--color-ably-primary)",
-        "ably-primary-inverse": "var(--color-ably-primary-inverse)",
-        "ably-primary-accent": "var(--color-ably-primary-accent)",
-        "ably-primary-inverse-accent":
-          "var(--color-ably-primary-inverse-accent)",
-        "ably-primary-active": "var(--color-ably-primary-active)",
-        "ably-primary-inverse-active":
-          "var(--color-ably-primary-inverse-active)",
-        "ably-secondary": "var(--color-ably-secondary)",
-        "ably-secondary-inverse": "var(--color-ably-secondary-inverse)",
-        "ably-tertiary": "var(--color-ably-tertiary)",
-        "ably-tertiary-inverse": "var(--color-ably-tertiary-inverse)",
-        "ably-label": "var(--color-ably-label)",
-        "ably-label-inverse": "var(--color-ably-label-inverse)",
         "neutral-000": "var(--color-neutral-000)",
         "neutral-100": "var(--color-neutral-100)",
         "neutral-200": "var(--color-neutral-200)",

package/core/ContentTile.js

@@ -1,2 +0,0 @@
-import React,{cloneElement,isValidElement}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Badge from"./Badge";import FeaturedLink from"./FeaturedLink";const isImageElement=image=>{return isValidElement(image)&&typeof image.props==="object"&&image.props!==null};const ContentTile=({title,className,description,cta,image,imageIcons,badges,options})=>{return React.createElement("div",{className:cn("group/content-tile",className)},image&&React.createElement("div",{className:cn("content-tile__image h-[200px] relative p-3 pb-0 flex items-end justify-center rounded-lg bg-ably-primary-inverse-accent border border-ably-secondary-inverse group-hover/content-tile:border-ably-tertiary-inverse transition-colors",options?.centerImage&&"items-center pb-3")},isImageElement(image)?cloneElement(image,{className:cn(image.props.className,"h-full")}):image,imageIcons&&imageIcons.length>0&&React.createElement("div",{className:"absolute bottom-3 right-3 flex gap-1.5 bg-ably-primary-inverse rounded border border-ably-primary-inverse-active px-2 py-1.5"},imageIcons.map((icon,idx)=>React.createElement(Icon,{key:icon+idx,name:icon,size:"18px"})))),React.createElement("div",{className:"content-tile__content pr-4"},title&&React.createElement("h2",{className:"content-tile__title mt-4 mb-2 ui-text-h4 text-ably-primary"},title),description&&React.createElement("div",{className:"content-tile__description mb-2 ui-text-p2 text-ably-tertiary"},description),badges&&badges.length>0&&React.createElement("div",{className:"content-tile__badges mb-2 flex flex-wrap gap-2"},badges.map((badge,idx)=>typeof badge==="string"?React.createElement(Badge,{key:badge+idx,className:"uppercase text-[10px]"},badge):React.createElement(Badge,{key:badge.label+idx,className:cn("uppercase text-[10px]",badge.className)},badge.label))),cta&&React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"hidden group-hover/content-tile:block items-center text-ably-primary hover:text-ably-primary",iconColor:"text-orange-600"},cta.text)))};export default ContentTile;
-//# sourceMappingURL=ContentTile.js.map

package/core/ContentTile.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/ContentTile.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement, ReactElement } from \"react\";\nimport type { IconName } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Badge from \"./Badge\";\nimport FeaturedLink from \"./FeaturedLink\";\n\ntype ContentTileBadge =\n  | string\n  | {\n      label: string;\n      className?: string;\n    };\n\ntype CTA = {\n  text: string;\n  url: string;\n};\n\ntype ContentTileProps = {\n  title?: string;\n  className?: string;\n  description?: string;\n  cta?: CTA;\n  image?: React.ReactNode;\n  imageIcons?: IconName[];\n  badges?: ContentTileBadge[];\n  options?: {\n    centerImage?: boolean;\n  };\n};\n\n// Type guard to check if image is a ReactElement with className prop\nconst isImageElement = (\n  image: React.ReactNode,\n): image is ReactElement<{ className?: string }> => {\n  return (\n    isValidElement(image) &&\n    typeof image.props === \"object\" &&\n    image.props !== null\n  );\n};\n\nconst ContentTile: React.FC<ContentTileProps> = ({\n  title,\n  className,\n  description,\n  cta,\n  image,\n  imageIcons,\n  badges,\n  options,\n}) => {\n  return (\n    <div className={cn(\"group/content-tile\", className)}>\n      {image && (\n        <div\n          className={cn(\n            \"content-tile__image h-[200px] relative p-3 pb-0 flex items-end justify-center rounded-lg bg-ably-primary-inverse-accent border border-ably-secondary-inverse group-hover/content-tile:border-ably-tertiary-inverse transition-colors\",\n            options?.centerImage && \"items-center pb-3\",\n          )}\n        >\n          {isImageElement(image)\n            ? cloneElement(image, {\n                className: cn(image.props.className, \"h-full\"),\n              })\n            : image}\n          {imageIcons && imageIcons.length > 0 && (\n            <div className=\"absolute bottom-3 right-3 flex gap-1.5 bg-ably-primary-inverse rounded border border-ably-primary-inverse-active px-2 py-1.5\">\n              {imageIcons.map((icon, idx) => (\n                <Icon key={icon + idx} name={icon} size=\"18px\" />\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n      <div className=\"content-tile__content pr-4\">\n        {title && (\n          <h2 className=\"content-tile__title mt-4 mb-2 ui-text-h4 text-ably-primary\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <div className=\"content-tile__description mb-2 ui-text-p2 text-ably-tertiary\">\n            {description}\n          </div>\n        )}\n        {badges && badges.length > 0 && (\n          <div className=\"content-tile__badges mb-2 flex flex-wrap gap-2\">\n            {badges.map((badge, idx) =>\n              typeof badge === \"string\" ? (\n                <Badge key={badge + idx} className=\"uppercase text-[10px]\">\n                  {badge}\n                </Badge>\n              ) : (\n                <Badge\n                  key={badge.label + idx}\n                  className={cn(\"uppercase text-[10px]\", badge.className)}\n                >\n                  {badge.label}\n                </Badge>\n              ),\n            )}\n          </div>\n        )}\n        {cta && (\n          <FeaturedLink\n            url={cta.url}\n            additionalCSS=\"hidden group-hover/content-tile:block items-center text-ably-primary hover:text-ably-primary\"\n            iconColor=\"text-orange-600\"\n          >\n            {cta.text}\n          </FeaturedLink>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ContentTile;\n"],"names":["React","cloneElement","isValidElement","Icon","cn","Badge","FeaturedLink","isImageElement","image","props","ContentTile","title","className","description","cta","imageIcons","badges","options","div","centerImage","length","map","icon","idx","key","name","size","h2","badge","label","url","additionalCSS","iconColor","text"],"mappings":"AAAA,OAAOA,OAASC,YAAY,CAAEC,cAAc,KAAsB,OAAQ,AAE1E,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,UAAW,SAAU,AAC5B,QAAOC,iBAAkB,gBAAiB,CA4B1C,MAAMC,eAAiB,AACrBC,QAEA,OACEN,eAAeM,QACf,OAAOA,MAAMC,KAAK,GAAK,UACvBD,MAAMC,KAAK,GAAK,IAEpB,EAEA,MAAMC,YAA0C,CAAC,CAC/CC,KAAK,CACLC,SAAS,CACTC,WAAW,CACXC,GAAG,CACHN,KAAK,CACLO,UAAU,CACVC,MAAM,CACNC,OAAO,CACR,IACC,OACE,oBAACC,OAAIN,UAAWR,GAAG,qBAAsBQ,YACtCJ,OACC,oBAACU,OACCN,UAAWR,GACT,uOACAa,SAASE,aAAe,sBAGzBZ,eAAeC,OACZP,aAAaO,MAAO,CAClBI,UAAWR,GAAGI,MAAMC,KAAK,CAACG,SAAS,CAAE,SACvC,GACAJ,MACHO,YAAcA,WAAWK,MAAM,CAAG,GACjC,oBAACF,OAAIN,UAAU,gIACZG,WAAWM,GAAG,CAAC,CAACC,KAAMC,MACrB,oBAACpB,MAAKqB,IAAKF,KAAOC,IAAKE,KAAMH,KAAMI,KAAK,YAMlD,oBAACR,OAAIN,UAAU,8BACZD,OACC,oBAACgB,MAAGf,UAAU,8DACXD,OAGJE,aACC,oBAACK,OAAIN,UAAU,gEACZC,aAGJG,QAAUA,OAAOI,MAAM,CAAG,GACzB,oBAACF,OAAIN,UAAU,kDACZI,OAAOK,GAAG,CAAC,CAACO,MAAOL,MAClB,OAAOK,QAAU,SACf,oBAACvB,OAAMmB,IAAKI,MAAQL,IAAKX,UAAU,yBAChCgB,OAGH,oBAACvB,OACCmB,IAAKI,MAAMC,KAAK,CAAGN,IACnBX,UAAWR,GAAG,wBAAyBwB,MAAMhB,SAAS,GAErDgB,MAAMC,KAAK,IAMrBf,KACC,oBAACR,cACCwB,IAAKhB,IAAIgB,GAAG,CACZC,cAAc,+FACdC,UAAU,mBAETlB,IAAImB,IAAI,GAMrB,CAEA,gBAAevB,WAAY"}