@ably/ui 17.14.0 → 18.0.0

package/core/styles/forms.css

@@ -59,11 +59,11 @@
   }
 
   .ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-neutral-1000 border border-gui-unavailable-dark;
+    @apply bg-neutral-1000 border border-gui-disabled-dark;
   }
 
   .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-gui-unavailable-dark;
+    @apply bg-active-orange border-gui-disabled-dark;
   }
 
   .ui-textarea {
@@ -110,7 +110,7 @@
   }
 
   .ui-toggle input:disabled + .ui-toggle-slider {
-    @apply bg-gui-unavailable;
+    @apply bg-gui-disabled-light dark:bg-gui-disabled-dark;
   }
 
   .ui-toggle input:checked + .ui-toggle-slider:before {
@@ -132,11 +132,11 @@
   }
 
   .ui-input:disabled {
-    @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
+    @apply bg-gui-disabled-light placeholder-neutral-500 text-neutral-500;
   }
 
   .ui-theme-dark .ui-input:disabled {
-    @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
+    @apply bg-gui-disabled-dark text-neutral-800 placeholder-neutral-800;
   }
 
   .ui-radio {

package/core/styles/legacy-buttons.css

@@ -4,7 +4,7 @@
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus-base;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -36,7 +36,7 @@
 
   .ui-btn-alt:disabled {
     background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+    @apply bg-gui-disabled-light text-mid-grey cursor-not-allowed;
   }
 
   .ui-btn-invert {
@@ -44,7 +44,7 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus-base;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -54,7 +54,7 @@
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus-base;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -64,7 +64,7 @@
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus-base;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -82,14 +82,14 @@
   }
   .ui-btn.ui-btn-disabled,
   .ui-btn-invert.ui-btn-disabled {
-    @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+    @apply text-mid-grey bg-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
   }
 
   .ui-btn-secondary.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none;
+    @apply text-gui-disabled-light border-gui-disabled-light bg-white cursor-not-allowed pointer-events-none select-none;
   }
 
   .ui-btn-secondary-invert.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+    @apply text-gui-disabled-light border-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
   }
 }

package/core/styles/properties.css

@@ -85,8 +85,8 @@
     --color-gui-blue-hover-dark: #2894ff;
     --color-gui-blue-active-dark: #0080ff;
     --color-gui-blue-focus: #80b9f2;
-    --color-gui-unavailable: #AFB9C5;
-    --color-gui-unavailable-dark: #676B7A;
+    --color-gui-disabled-light: #afb9c5;
+    --color-gui-disabled-dark: #676b7a;
     --color-gui-success-green: #11cb24;
     --color-gui-error-red: #fb0c0c;
     --color-gui-focus: #80b9f2;

package/core/styles/text.css

@@ -159,13 +159,13 @@
 
   .ui-link {
     @apply text-gui-default;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
     @apply focus:text-gui-default focus-base;
     @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
     @apply focus:text-charcoal-grey focus-base;
     @apply underline;
   }

package/index.d.ts

@@ -506,12 +506,6 @@ export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.d.ts.map
 }
 
-declare module '@ably/ui/core/ConnectStateWrapper' {
-const ConnectStateWrapper: (Component: any, selectors: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
-export default ConnectStateWrapper;
-//# sourceMappingURL=ConnectStateWrapper.d.ts.map
-}
-
 declare module '@ably/ui/core/ContentTile' {
 import React from "react";
 import { type BadgeProps } from "@ably/ui/core/Badge";
@@ -675,6 +669,7 @@ export default FeaturedLink;
 }
 
 declare module '@ably/ui/core/Flash' {
+import { PropsWithChildren } from "react";
 type FlashPropsType = "error" | "success" | "notice" | "info" | "alert";
 type FlashProps = {
     id: string;
@@ -683,28 +678,43 @@ type FlashProps = {
     content: string;
     removeFlash: (id: string) => void;
 };
-type FlashesProps = {
-    flashes: {
-        items: Pick<FlashProps, "type" | "content">[];
-    };
-};
 type BackendFlashesProps = {
     flashes: string[][];
 };
 const FLASH_DATA_ID = "ui-flashes";
-const reducerFlashes: {
-    flashes: (state: {
-        items: FlashProps[];
-    } | undefined, action: {
-        type: string;
-        payload: FlashProps | FlashProps[];
-    }) => {
-        items: FlashProps[];
-    };
+type FlashContextType = {
+    flashes: FlashProps[];
+    addFlashes: (flashes: Pick<FlashProps, "type" | "content">[]) => void;
+    removeFlash: (id: string) => void;
 };
-const Flashes: ({ flashes }: FlashesProps) => import("react/jsx-runtime.js").JSX.Element;
-const BackendFlashes: ({ flashes }: BackendFlashesProps) => import("react/jsx-runtime.js").JSX.Element;
-export { reducerFlashes, FLASH_DATA_ID, Flashes };
+type FlashProviderProps = PropsWithChildren;
+/**
+ * FlashProvider - Context provider for managing flash messages throughout the application.
+ *
+ * Maintains a global list of flash messages and provides methods to add/remove them.
+ * Automatically deduplicates messages with the same type and content to prevent duplicates.
+ * Use this at the app root level and access via useFlashContext() in child components.
+ */
+const FlashProvider: ({ children }: FlashProviderProps) => import("react/jsx-runtime").JSX.Element;
+const useFlashContext: () => FlashContextType;
+/**
+ * Flashes - Container component that renders all active flash messages.
+ *
+ * Reads from FlashContext and displays each flash message in order.
+ * Use this component where you want flash messages to appear in your layout
+ * (typically near the top of the page). Filters out removed messages.
+ */
+const Flashes: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * BackendFlashes - Integration component for server-side flash messages (default export).
+ *
+ * Receives flash messages from backend as an array of [type, content] tuples and adds
+ * them to the FlashContext on mount. Primary use case is hydrating flash messages from
+ * Rails or other backend frameworks. Renders the Flashes component to display messages.
+ * Must be used within FlashProvider.
+ */
+const BackendFlashes: ({ flashes }: BackendFlashesProps) => import("react/jsx-runtime").JSX.Element | null;
+export { FLASH_DATA_ID, Flashes, FlashProvider, useFlashContext };
 export default BackendFlashes;
 //# sourceMappingURL=Flash.d.ts.map
 }
@@ -5445,7 +5455,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" | "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 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-disabled-light" | "text-gui-disabled-dark" | "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-disabled-light" | "bg-gui-disabled-dark" | "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-disabled-light" | "from-gui-disabled-dark" | "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-disabled-light" | "to-gui-disabled-dark" | "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-disabled-light" | "border-gui-disabled-dark" | "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-disabled-light" | "dark:text-gui-disabled-dark" | "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-disabled-light" | "dark:bg-gui-disabled-dark" | "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-disabled-light" | "dark:from-gui-disabled-dark" | "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-disabled-light" | "dark:to-gui-disabled-dark" | "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-disabled-light" | "dark:border-gui-disabled-dark" | "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;
@@ -6006,6 +6016,60 @@ export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map
 }
 
+declare module '@ably/ui/core/SessionData' {
+import { PropsWithChildren } from "react";
+type SessionUser = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+};
+type SessionData = {
+    user?: SessionUser;
+} | null;
+type SessionDataContextType = {
+    sessionData: SessionData;
+    isLoading: boolean;
+    error: Error | undefined;
+};
+type SessionDataProviderProps = PropsWithChildren<{
+    sessionDataUrl?: string;
+}>;
+/**
+ * SessionDataProvider - Context provider for managing user session data throughout the app.
+ *
+ * Fetches and caches session data using SWR (stale-while-revalidate) from the provided URL.
+ * Exposes session data, loading state, and errors through context. Use this at the app root
+ * level and access via useSessionData() hook in child components. Disables auto-revalidation
+ * to avoid excessive network requests - session data is fetched once on mount.
+ */
+export const SessionDataProvider: ({ children, sessionDataUrl, }: SessionDataProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * useSessionData - Hook to access session data from SessionDataProvider context.
+ *
+ * Returns the current user session data, loading state, and any errors from the provider.
+ * Must be used within a SessionDataProvider or will throw an error. Use this hook in
+ * components that need to read or display user session information.
+ */
+export const useSessionData: () => SessionDataContextType;
+/**
+ * useSessionDataDirect - Direct session data hook without requiring a provider (legacy).
+ *
+ * Fetches session data using SWR directly, bypassing the context provider pattern.
+ * Provided for backward compatibility with code that doesn't use SessionDataProvider.
+ * For new code, prefer using SessionDataProvider + useSessionData() for better
+ * performance and centralized session management.
+ */
+export const useSessionDataDirect: (sessionDataUrl?: string) => {
+    sessionData: {
+        user?: SessionUser;
+    } | null;
+    isLoading: boolean;
+    error: any;
+};
+export {};
+//# sourceMappingURL=SessionData.d.ts.map
+}
+
 declare module '@ably/ui/core/Slider/component' {
 export default Slider;
 function Slider({ container, mqEnableThreshold }: {
@@ -6429,50 +6493,14 @@ export default function reactRenderer(components: Record<string, React.FC>): voi
 //# sourceMappingURL=react-renderer.d.ts.map
 }
 
-declare module '@ably/ui/core/remote-blogs-posts' {
-export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
-export namespace reducerBlogPosts {
-    function blogPosts(state: {
-        recent: null;
-    } | undefined, action: any): {
-        recent: any;
-    };
-}
-export function selectRecentBlogPosts(store: any): any;
-//# sourceMappingURL=remote-blogs-posts.d.ts.map
-}
-
-declare module '@ably/ui/core/remote-data-store' {
-export function attachStoreToWindow(store: any): void;
-export function getRemoteDataStore(): any;
-export function connectState(selector: any, setState: any): void;
-export function createRemoteDataStore(reducers: any): any;
-//# sourceMappingURL=remote-data-store.d.ts.map
-}
-
 declare module '@ably/ui/core/remote-data-util' {
 export function isJsonResponse(contentType: any): any;
 //# sourceMappingURL=remote-data-util.d.ts.map
 }
 
-declare module '@ably/ui/core/remote-session-data' {
-export function fetchSessionData(store: any, sessionUrl: any): Promise<void>;
-export namespace reducerSessionData {
-    function session(state: {
-        data: null;
-    } | undefined, action: any): {
-        data: any;
-    };
-}
-export function selectSessionData(store: any): any;
-//# sourceMappingURL=remote-session-data.d.ts.map
-}
-
 declare module '@ably/ui/core/scripts' {
 export { default as loadSprites } from "@ably/ui/core/load-sprites";
-export * from "@ably/ui/core/remote-data-store";
-export * from "@ably/ui/core/remote-blogs-posts";
-export * from "@ably/ui/core/remote-session-data";
+export * from "@ably/ui/core/SessionData";
 export * from "@ably/ui/core/dom-query";
 export { default as reactRenderer, renderComponent } from "@ably/ui/core/react-renderer";
 //# sourceMappingURL=scripts.d.ts.map
@@ -6497,13 +6525,13 @@ export const blueColors: readonly ["blue-100", "blue-200", "blue-300", "blue-400
 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"];
 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 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-disabled-light", "gui-disabled-dark", "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"];
     orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
     secondary: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-    gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+    gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-disabled-light", "gui-disabled-dark", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
 };
 export const colorGroupLengths: {
     neutral: 14;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.14.0",
+  "version": "18.0.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -33,12 +33,12 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20",
+    "@types/node": "^25",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
@@ -51,12 +51,13 @@
     "eslint-plugin-react-perf": "^3.3.3",
     "eslint-plugin-storybook": "^10.2.0",
     "heroicons": "^2.2.0",
+    "http-server": "14.1.1",
     "jsdom": "^28.0.0",
     "mixpanel-browser": "^2.74.0",
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.58.0",
-    "posthog-js": "1.347.2",
+    "posthog-js": "1.359.0",
     "prettier": "^3.8.0",
     "storybook": "^10.2.0",
     "svg-sprite": "^2.0.4",
@@ -77,7 +78,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.2",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
@@ -87,10 +88,9 @@
     "js-cookie": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
-    "redux": "^4.0.5",
     "scroll-lock": "^2.1.4",
-    "swr": "^2.2.5",
-    "tailwind-merge": "^2.5.5"
+    "swr": "^2.4.0",
+    "tailwind-merge": "^3.4.1"
   },
   "peerDependencies": {
     "mixpanel-browser": "^2.60.0 || <3",

package/tailwind.config.js

@@ -130,8 +130,8 @@ module.exports = {
         "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
         "gui-blue-focus": "var(--color-gui-blue-focus)",
         "gui-blue-visited": "var(--color-gui-blue-focus)",
-        "gui-unavailable": "var(--color-gui-unavailable)",
-        "gui-unavailable-dark": "var(--color-gui-unavailable-dark)",
+        "gui-disabled-light": "var(--color-gui-disabled-light)",
+        "gui-disabled-dark": "var(--color-gui-disabled-dark)",
         "gui-success-green": "var(--color-gui-success-green)",
         "gui-error-red": "var(--color-gui-error-red)",
         "gui-focus": "var(--color-gui-focus)",

package/core/ConnectStateWrapper.js

@@ -1,2 +0,0 @@
-import React,{useEffect,useState}from"react";import{connectState,getRemoteDataStore}from"./remote-data-store";const ConnectStateWrapper=(Component,selectors)=>{const[state,setState]=useState({});const setStateForKey=key=>storeState=>setState(()=>({[key]:storeState}));useEffect(()=>{const store=getRemoteDataStore();const resolvedState=Object.keys(selectors).reduce((acc,key)=>({...acc,[key]:selectors[key](store)}),{});setState(resolvedState);Object.keys(selectors).forEach(key=>{connectState(selectors[key],setStateForKey(key))})},[]);const WrappedComponent=props=>React.createElement(Component,{...props,...state});return WrappedComponent};export default ConnectStateWrapper;
-//# sourceMappingURL=ConnectStateWrapper.js.map

package/core/ConnectStateWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/ConnectStateWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { connectState, getRemoteDataStore } from \"./remote-data-store\";\n\n/*\n  Connect a react component to a global store.\n  This is similar to what react-redux does but uses our global store so\n  can share state with other React mount points or anything that uses the\n  store.\n  - selectors is an object where keys are your prop names and values are your select\n  functions that work on the store to retrieve the state you are interested in\n  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially\n*/\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ConnectStateWrapper = (Component: any, selectors: any) => {\n  const [state, setState] = useState({});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setStateForKey = (key: string) => (storeState: any) =>\n    setState(() => ({ [key]: storeState }));\n\n  useEffect(() => {\n    const store = getRemoteDataStore();\n    const resolvedState = Object.keys(selectors).reduce(\n      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),\n      {},\n    );\n\n    // Set initial state\n    setState(resolvedState);\n\n    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.\n    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.\n    Object.keys(selectors).forEach((key) => {\n      connectState(selectors[key], setStateForKey(key));\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const WrappedComponent = (props: any) => <Component {...props} {...state} />;\n\n  return WrappedComponent;\n};\n\nexport default ConnectStateWrapper;\n"],"names":["React","useEffect","useState","connectState","getRemoteDataStore","ConnectStateWrapper","Component","selectors","state","setState","setStateForKey","key","storeState","store","resolvedState","Object","keys","reduce","acc","forEach","WrappedComponent","props"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAEnD,QAASC,YAAY,CAAEC,kBAAkB,KAAQ,qBAAsB,CAavE,MAAMC,oBAAsB,CAACC,UAAgBC,aAC3C,KAAM,CAACC,MAAOC,SAAS,CAAGP,SAAS,CAAC,GAGpC,MAAMQ,eAAiB,AAACC,KAAgB,AAACC,YACvCH,SAAS,IAAO,CAAA,CAAE,CAACE,IAAI,CAAEC,UAAW,CAAA,GAEtCX,UAAU,KACR,MAAMY,MAAQT,qBACd,MAAMU,cAAgBC,OAAOC,IAAI,CAACT,WAAWU,MAAM,CACjD,CAACC,IAAKP,MAAS,CAAA,CAAE,GAAGO,GAAG,CAAE,CAACP,IAAI,CAAEJ,SAAS,CAACI,IAAI,CAACE,MAAO,CAAA,EACtD,CAAC,GAIHJ,SAASK,eAITC,OAAOC,IAAI,CAACT,WAAWY,OAAO,CAAC,AAACR,MAC9BR,aAAaI,SAAS,CAACI,IAAI,CAAED,eAAeC,KAC9C,EAEF,EAAG,EAAE,EAGL,MAAMS,iBAAmB,AAACC,OAAe,oBAACf,WAAW,GAAGe,KAAK,CAAG,GAAGb,KAAK,GAExE,OAAOY,gBACT,CAEA,gBAAef,mBAAoB"}

package/core/remote-blogs-posts.js

@@ -1,2 +0,0 @@
-import{isJsonResponse}from"./remote-data-util";const fetchBlogPosts=async(store,blogUrl)=>{try{if(!blogUrl){console.log(`Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`);return}const options={headers:{accept:"application/json"},cache:"no-cache"};if(false){options.credentials="include"}const res=await fetch(blogUrl,options);if(isJsonResponse(res.headers.get("content-type"))){const payload=await res.json();store.dispatch({type:"blog/loaded",payload})}else{throw new Error("Blog posts url is not serving json")}}catch(e){console.warn("Could not fetch blog posts due to error:",e)}};const initialState={recent:null};const REDUCER_KEY="blogPosts";const reducerBlogPosts={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"blog/loaded":return{...state,recent:action.payload};default:return state}}};const selectRecentBlogPosts=store=>store.getState()[REDUCER_KEY]?.recent;export{fetchBlogPosts,reducerBlogPosts,selectRecentBlogPosts};
-//# sourceMappingURL=remote-blogs-posts.js.map

package/core/remote-blogs-posts.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n  try {\n    if (!blogUrl) {\n      console.log(\n        `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n      );\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(blogUrl, options);\n\n    if (isJsonResponse(res.headers.get(\"content-type\"))) {\n      const payload = await res.json();\n      store.dispatch({ type: \"blog/loaded\", payload });\n    } else {\n      throw new Error(\"Blog posts url is not serving json\");\n    }\n  } catch (e) {\n    console.warn(\"Could not fetch blog posts due to error:\", e);\n  }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"blog/loaded\":\n        return { ...state, recent: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMT,QAASG,SAEjC,GAAIN,eAAeW,IAAIJ,OAAO,CAACM,GAAG,CAAC,iBAAkB,CACnD,MAAMC,QAAU,MAAMH,IAAII,IAAI,GAC9Bb,MAAMc,QAAQ,CAAC,CAAEC,KAAM,cAAeH,OAAQ,EAChD,KAAO,CACL,MAAM,IAAII,MAAM,qCAClB,CACF,CAAE,MAAOC,EAAG,CACVf,QAAQgB,IAAI,CAAC,2CAA4CD,EAC3D,CACF,EAEA,MAAME,aAAe,CAAEC,OAAQ,IAAK,EAEpC,MAAMC,YAAc,YAEpB,MAAMC,iBAAmB,CACvB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOT,IAAI,EACjB,IAAK,cACH,MAAO,CAAE,GAAGQ,KAAK,CAAEH,OAAQI,OAAOZ,OAAO,AAAC,CAC5C,SACE,OAAOW,KACX,CACF,CACF,EAEA,MAAME,sBAAwB,AAACzB,OAAUA,MAAM0B,QAAQ,EAAE,CAACL,YAAY,EAAED,MAExE,QAASrB,cAAc,CAAEuB,gBAAgB,CAAEG,qBAAqB,CAAG"}

package/core/remote-data-store.js

@@ -1,2 +0,0 @@
-import{createStore,combineReducers}from"redux";export const attachStoreToWindow=store=>{window.AblyUi=window.AblyUi||{};window.AblyUi.RemoteDataStore=store};export const getRemoteDataStore=()=>{if(!window.AblyUi.RemoteDataStore){throw new Error("Remote store was called before one was created")}return window.AblyUi.RemoteDataStore};export const connectState=(selector,setState)=>{const store=getRemoteDataStore();let cachedOldState=selector(store);store.subscribe(()=>{const newState=selector(store);if(newState===cachedOldState){return}cachedOldState=newState;setState(newState)})};export const createRemoteDataStore=reducers=>createStore(combineReducers(reducers));
-//# sourceMappingURL=remote-data-store.js.map

package/core/remote-data-store.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/remote-data-store.js"],"sourcesContent":["import { createStore, combineReducers } from \"redux\";\n\nexport const attachStoreToWindow = (store) => {\n  window.AblyUi = window.AblyUi || {};\n  window.AblyUi.RemoteDataStore = store;\n};\n\nexport const getRemoteDataStore = () => {\n  if (!window.AblyUi.RemoteDataStore) {\n    throw new Error(\"Remote store was called before one was created\");\n  }\n\n  return window.AblyUi.RemoteDataStore;\n};\n\nexport const connectState = (selector, setState) => {\n  const store = getRemoteDataStore();\n  let cachedOldState = selector(store);\n\n  store.subscribe(() => {\n    const newState = selector(store);\n\n    // Do nothing, state is the same\n    if (newState === cachedOldState) {\n      return;\n    }\n\n    cachedOldState = newState;\n    setState(newState);\n  });\n};\n\nexport const createRemoteDataStore = (reducers) =>\n  createStore(combineReducers(reducers));\n"],"names":["createStore","combineReducers","attachStoreToWindow","store","window","AblyUi","RemoteDataStore","getRemoteDataStore","Error","connectState","selector","setState","cachedOldState","subscribe","newState","createRemoteDataStore","reducers"],"mappings":"AAAA,OAASA,WAAW,CAAEC,eAAe,KAAQ,OAAQ,AAErD,QAAO,MAAMC,oBAAsB,AAACC,QAClCC,OAAOC,MAAM,CAAGD,OAAOC,MAAM,EAAI,CAAC,CAClCD,CAAAA,OAAOC,MAAM,CAACC,eAAe,CAAGH,KAClC,CAAE,AAEF,QAAO,MAAMI,mBAAqB,KAChC,GAAI,CAACH,OAAOC,MAAM,CAACC,eAAe,CAAE,CAClC,MAAM,IAAIE,MAAM,iDAClB,CAEA,OAAOJ,OAAOC,MAAM,CAACC,eAAe,AACtC,CAAE,AAEF,QAAO,MAAMG,aAAe,CAACC,SAAUC,YACrC,MAAMR,MAAQI,qBACd,IAAIK,eAAiBF,SAASP,OAE9BA,MAAMU,SAAS,CAAC,KACd,MAAMC,SAAWJ,SAASP,OAG1B,GAAIW,WAAaF,eAAgB,CAC/B,MACF,CAEAA,eAAiBE,SACjBH,SAASG,SACX,EACF,CAAE,AAEF,QAAO,MAAMC,sBAAwB,AAACC,UACpChB,YAAYC,gBAAgBe,UAAW"}