@ably/ui 14.7.8-dev.40d3bee → 14.7.9-dev.1dd8fc7

package/core/styles/colors/computed-colors.json

@@ -1 +1 @@
-["bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-orange-900","border-neutral-500","from-neutral-400"]
+["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]

package/core/styles/icons.css

@@ -0,0 +1,171 @@
+/* AUTOGENERATED BY build:sprites - DO NOT EDIT */
+
+.ui-icon-display-48hrs { background-image: url(../icons/icon-display-48hrs.svg); }
+.ui-icon-display-ably-channels { background-image: url(../icons/icon-display-ably-channels.svg); }
+.ui-icon-display-about-ably-col { background-image: url(../icons/icon-display-about-ably-col.svg); }
+.ui-icon-display-api-keys { background-image: url(../icons/icon-display-api-keys.svg); }
+.ui-icon-display-api { background-image: url(../icons/icon-display-api.svg); }
+.ui-icon-display-architectural-guidance { background-image: url(../icons/icon-display-architectural-guidance.svg); }
+.ui-icon-display-asset-tracking-col { background-image: url(../icons/icon-display-asset-tracking-col.svg); }
+.ui-icon-display-authentication { background-image: url(../icons/icon-display-authentication.svg); }
+.ui-icon-display-avatar-stack { background-image: url(../icons/icon-display-avatar-stack.svg); }
+.ui-icon-display-browser { background-image: url(../icons/icon-display-browser.svg); }
+.ui-icon-display-calendar { background-image: url(../icons/icon-display-calendar.svg); }
+.ui-icon-display-call-mobile { background-image: url(../icons/icon-display-call-mobile.svg); }
+.ui-icon-display-careers-col { background-image: url(../icons/icon-display-careers-col.svg); }
+.ui-icon-display-case-studies-col { background-image: url(../icons/icon-display-case-studies-col.svg); }
+.ui-icon-display-chat-col { background-image: url(../icons/icon-display-chat-col.svg); }
+.ui-icon-display-chat-mono { background-image: url(../icons/icon-display-chat-mono.svg); }
+.ui-icon-display-chat-stack-col { background-image: url(../icons/icon-display-chat-stack-col.svg); }
+.ui-icon-display-chat-stack { background-image: url(../icons/icon-display-chat-stack.svg); }
+.ui-icon-display-cloud-servers { background-image: url(../icons/icon-display-cloud-servers.svg); }
+.ui-icon-display-compare-tech-col { background-image: url(../icons/icon-display-compare-tech-col.svg); }
+.ui-icon-display-connection-state-recovery { background-image: url(../icons/icon-display-connection-state-recovery.svg); }
+.ui-icon-display-consumer-groups { background-image: url(../icons/icon-display-consumer-groups.svg); }
+.ui-icon-display-custom-cname { background-image: url(../icons/icon-display-custom-cname.svg); }
+.ui-icon-display-custom { background-image: url(../icons/icon-display-custom.svg); }
+.ui-icon-display-customers-col { background-image: url(../icons/icon-display-customers-col.svg); }
+.ui-icon-display-data-broadcast-col { background-image: url(../icons/icon-display-data-broadcast-col.svg); }
+.ui-icon-display-data-broadcast-mono { background-image: url(../icons/icon-display-data-broadcast-mono.svg); }
+.ui-icon-display-data-synchronization-col { background-image: url(../icons/icon-display-data-synchronization-col.svg); }
+.ui-icon-display-dedicated-cluster { background-image: url(../icons/icon-display-dedicated-cluster.svg); }
+.ui-icon-display-deltas { background-image: url(../icons/icon-display-deltas.svg); }
+.ui-icon-display-docs-col { background-image: url(../icons/icon-display-docs-col.svg); }
+.ui-icon-display-documentation { background-image: url(../icons/icon-display-documentation.svg); }
+.ui-icon-display-dynamic-channel-groups { background-image: url(../icons/icon-display-dynamic-channel-groups.svg); }
+.ui-icon-display-edge-network { background-image: url(../icons/icon-display-edge-network.svg); }
+.ui-icon-display-elasticity { background-image: url(../icons/icon-display-elasticity.svg); }
+.ui-icon-display-equalisers-mono { background-image: url(../icons/icon-display-equalisers-mono.svg); }
+.ui-icon-display-events-col { background-image: url(../icons/icon-display-events-col.svg); }
+.ui-icon-display-exactly-once-delivery { background-image: url(../icons/icon-display-exactly-once-delivery.svg); }
+.ui-icon-display-examples-col { background-image: url(../icons/icon-display-examples-col.svg); }
+.ui-icon-display-fan-out { background-image: url(../icons/icon-display-fan-out.svg); }
+.ui-icon-display-firehose { background-image: url(../icons/icon-display-firehose.svg); }
+.ui-icon-display-gdpr { background-image: url(../icons/icon-display-gdpr.svg); }
+.ui-icon-display-general-comms { background-image: url(../icons/icon-display-general-comms.svg); }
+.ui-icon-display-granular-permissions { background-image: url(../icons/icon-display-granular-permissions.svg); }
+.ui-icon-display-hipaa-mono { background-image: url(../icons/icon-display-hipaa-mono.svg); }
+.ui-icon-display-hipaa { background-image: url(../icons/icon-display-hipaa.svg); }
+.ui-icon-display-history { background-image: url(../icons/icon-display-history.svg); }
+.ui-icon-display-integrations-col { background-image: url(../icons/icon-display-integrations-col.svg); }
+.ui-icon-display-integrations { background-image: url(../icons/icon-display-integrations.svg); }
+.ui-icon-display-it-support-access { background-image: url(../icons/icon-display-it-support-access.svg); }
+.ui-icon-display-it-support-helpdesk { background-image: url(../icons/icon-display-it-support-helpdesk.svg); }
+.ui-icon-display-kafka-at-the-edge-col { background-image: url(../icons/icon-display-kafka-at-the-edge-col.svg); }
+.ui-icon-display-laptop { background-image: url(../icons/icon-display-laptop.svg); }
+.ui-icon-display-lightbulb-col { background-image: url(../icons/icon-display-lightbulb-col.svg); }
+.ui-icon-display-live-chat { background-image: url(../icons/icon-display-live-chat.svg); }
+.ui-icon-display-live-updates-results-metrics-col { background-image: url(../icons/icon-display-live-updates-results-metrics-col.svg); }
+.ui-icon-display-map-pin { background-image: url(../icons/icon-display-map-pin.svg); }
+.ui-icon-display-message-batching { background-image: url(../icons/icon-display-message-batching.svg); }
+.ui-icon-display-message-persistence { background-image: url(../icons/icon-display-message-persistence.svg); }
+.ui-icon-display-message-queues { background-image: url(../icons/icon-display-message-queues.svg); }
+.ui-icon-display-message { background-image: url(../icons/icon-display-message.svg); }
+.ui-icon-display-multi-user-spaces-col { background-image: url(../icons/icon-display-multi-user-spaces-col.svg); }
+.ui-icon-display-observe-analytics { background-image: url(../icons/icon-display-observe-analytics.svg); }
+.ui-icon-display-padlock-closed { background-image: url(../icons/icon-display-padlock-closed.svg); }
+.ui-icon-display-platform { background-image: url(../icons/icon-display-platform.svg); }
+.ui-icon-display-play { background-image: url(../icons/icon-display-play.svg); }
+.ui-icon-display-premium-support { background-image: url(../icons/icon-display-premium-support.svg); }
+.ui-icon-display-privacy-shield-framework { background-image: url(../icons/icon-display-privacy-shield-framework.svg); }
+.ui-icon-display-private-link { background-image: url(../icons/icon-display-private-link.svg); }
+.ui-icon-display-push-notifications-col { background-image: url(../icons/icon-display-push-notifications-col.svg); }
+.ui-icon-display-push-notifications-mono { background-image: url(../icons/icon-display-push-notifications-mono.svg); }
+.ui-icon-display-push-notifications { background-image: url(../icons/icon-display-push-notifications.svg); }
+.ui-icon-display-quickstart-guides-col { background-image: url(../icons/icon-display-quickstart-guides-col.svg); }
+.ui-icon-display-resources-col { background-image: url(../icons/icon-display-resources-col.svg); }
+.ui-icon-display-rewind { background-image: url(../icons/icon-display-rewind.svg); }
+.ui-icon-display-sdks-col { background-image: url(../icons/icon-display-sdks-col.svg); }
+.ui-icon-display-send-received-messages { background-image: url(../icons/icon-display-send-received-messages.svg); }
+.ui-icon-display-servers { background-image: url(../icons/icon-display-servers.svg); }
+.ui-icon-display-shopping-cart { background-image: url(../icons/icon-display-shopping-cart.svg); }
+.ui-icon-display-sla { background-image: url(../icons/icon-display-sla.svg); }
+.ui-icon-display-soc2-type2-mono { background-image: url(../icons/icon-display-soc2-type2-mono.svg); }
+.ui-icon-display-soc2-type2 { background-image: url(../icons/icon-display-soc2-type2.svg); }
+.ui-icon-display-subscription-filters { background-image: url(../icons/icon-display-subscription-filters.svg); }
+.ui-icon-display-support-chat-mono { background-image: url(../icons/icon-display-support-chat-mono.svg); }
+.ui-icon-display-system-metadata { background-image: url(../icons/icon-display-system-metadata.svg); }
+.ui-icon-display-tech-account-comms { background-image: url(../icons/icon-display-tech-account-comms.svg); }
+.ui-icon-display-tutorials-demos-col { background-image: url(../icons/icon-display-tutorials-demos-col.svg); }
+.ui-icon-display-virtual-events-col { background-image: url(../icons/icon-display-virtual-events-col.svg); }
+.ui-icon-display-virtual-events { background-image: url(../icons/icon-display-virtual-events.svg); }
+.ui-icon-gui-ably-badge { background-image: url(../icons/icon-gui-ably-badge.svg); }
+.ui-icon-gui-arrow-bidirectional-horizontal { background-image: url(../icons/icon-gui-arrow-bidirectional-horizontal.svg); }
+.ui-icon-gui-arrow-bidirectional-vertical { background-image: url(../icons/icon-gui-arrow-bidirectional-vertical.svg); }
+.ui-icon-gui-arrow-down { background-image: url(../icons/icon-gui-arrow-down.svg); }
+.ui-icon-gui-arrow-left { background-image: url(../icons/icon-gui-arrow-left.svg); }
+.ui-icon-gui-arrow-right { background-image: url(../icons/icon-gui-arrow-right.svg); }
+.ui-icon-gui-arrow-up { background-image: url(../icons/icon-gui-arrow-up.svg); }
+.ui-icon-gui-burger-menu { background-image: url(../icons/icon-gui-burger-menu.svg); }
+.ui-icon-gui-check-circled-fill-black { background-image: url(../icons/icon-gui-check-circled-fill-black.svg); }
+.ui-icon-gui-check-circled-fill { background-image: url(../icons/icon-gui-check-circled-fill.svg); }
+.ui-icon-gui-check-circled { background-image: url(../icons/icon-gui-check-circled.svg); }
+.ui-icon-gui-checklist-checked { background-image: url(../icons/icon-gui-checklist-checked.svg); }
+.ui-icon-gui-clock { background-image: url(../icons/icon-gui-clock.svg); }
+.ui-icon-gui-close { background-image: url(../icons/icon-gui-close.svg); }
+.ui-icon-gui-copy { background-image: url(../icons/icon-gui-copy.svg); }
+.ui-icon-gui-cross-circled-fill { background-image: url(../icons/icon-gui-cross-circled-fill.svg); }
+.ui-icon-gui-cross-circled { background-image: url(../icons/icon-gui-cross-circled.svg); }
+.ui-icon-gui-dash-circled { background-image: url(../icons/icon-gui-dash-circled.svg); }
+.ui-icon-gui-disclosure-arrow { background-image: url(../icons/icon-gui-disclosure-arrow.svg); }
+.ui-icon-gui-document-generic { background-image: url(../icons/icon-gui-document-generic.svg); }
+.ui-icon-gui-enlarge { background-image: url(../icons/icon-gui-enlarge.svg); }
+.ui-icon-gui-external-link { background-image: url(../icons/icon-gui-external-link.svg); }
+.ui-icon-gui-filter-flow-step-1 { background-image: url(../icons/icon-gui-filter-flow-step-1.svg); }
+.ui-icon-gui-filter-flow-step-2 { background-image: url(../icons/icon-gui-filter-flow-step-2.svg); }
+.ui-icon-gui-filter-flow-step-3 { background-image: url(../icons/icon-gui-filter-flow-step-3.svg); }
+.ui-icon-gui-history { background-image: url(../icons/icon-gui-history.svg); }
+.ui-icon-gui-info { background-image: url(../icons/icon-gui-info.svg); }
+.ui-icon-gui-link-arrow { background-image: url(../icons/icon-gui-link-arrow.svg); }
+.ui-icon-gui-link { background-image: url(../icons/icon-gui-link.svg); }
+.ui-icon-gui-live-chat { background-image: url(../icons/icon-gui-live-chat.svg); }
+.ui-icon-gui-minus { background-image: url(../icons/icon-gui-minus.svg); }
+.ui-icon-gui-partial { background-image: url(../icons/icon-gui-partial.svg); }
+.ui-icon-gui-plus { background-image: url(../icons/icon-gui-plus.svg); }
+.ui-icon-gui-quote-marks-solid { background-image: url(../icons/icon-gui-quote-marks-solid.svg); }
+.ui-icon-gui-refresh { background-image: url(../icons/icon-gui-refresh.svg); }
+.ui-icon-gui-resources { background-image: url(../icons/icon-gui-resources.svg); }
+.ui-icon-gui-search { background-image: url(../icons/icon-gui-search.svg); }
+.ui-icon-gui-tick { background-image: url(../icons/icon-gui-tick.svg); }
+.ui-icon-gui-warning { background-image: url(../icons/icon-gui-warning.svg); }
+.ui-icon-other-quote { background-image: url(../icons/icon-other-quote.svg); }
+.ui-icon-product-asset-tracking { background-image: url(../icons/icon-product-asset-tracking.svg); }
+.ui-icon-product-chat { background-image: url(../icons/icon-product-chat.svg); }
+.ui-icon-product-liveobjects { background-image: url(../icons/icon-product-liveobjects.svg); }
+.ui-icon-product-livesync { background-image: url(../icons/icon-product-livesync.svg); }
+.ui-icon-product-pubsub { background-image: url(../icons/icon-product-pubsub.svg); }
+.ui-icon-product-spaces { background-image: url(../icons/icon-product-spaces.svg); }
+.ui-icon-social-discord { background-image: url(../icons/icon-social-discord.svg); }
+.ui-icon-social-facebook { background-image: url(../icons/icon-social-facebook.svg); }
+.ui-icon-social-github { background-image: url(../icons/icon-social-github.svg); }
+.ui-icon-social-glassdoor { background-image: url(../icons/icon-social-glassdoor.svg); }
+.ui-icon-social-google { background-image: url(../icons/icon-social-google.svg); }
+.ui-icon-social-linkedin { background-image: url(../icons/icon-social-linkedin.svg); }
+.ui-icon-social-stackoverflow { background-image: url(../icons/icon-social-stackoverflow.svg); }
+.ui-icon-social-twitter { background-image: url(../icons/icon-social-twitter.svg); }
+.ui-icon-social-x { background-image: url(../icons/icon-social-x.svg); }
+.ui-icon-social-youtube { background-image: url(../icons/icon-social-youtube.svg); }
+.ui-icon-tech-amqp10 { background-image: url(../icons/icon-tech-amqp10.svg); }
+.ui-icon-tech-apache-kafka { background-image: url(../icons/icon-tech-apache-kafka.svg); }
+.ui-icon-tech-apachepulsar { background-image: url(../icons/icon-tech-apachepulsar.svg); }
+.ui-icon-tech-awskinesis { background-image: url(../icons/icon-tech-awskinesis.svg); }
+.ui-icon-tech-awslambda { background-image: url(../icons/icon-tech-awslambda.svg); }
+.ui-icon-tech-awssqs { background-image: url(../icons/icon-tech-awssqs.svg); }
+.ui-icon-tech-azureservicebus { background-image: url(../icons/icon-tech-azureservicebus.svg); }
+.ui-icon-tech-cloudflareworkers { background-image: url(../icons/icon-tech-cloudflareworkers.svg); }
+.ui-icon-tech-csharp { background-image: url(../icons/icon-tech-csharp.svg); }
+.ui-icon-tech-flutter { background-image: url(../icons/icon-tech-flutter.svg); }
+.ui-icon-tech-gcloudfunctions { background-image: url(../icons/icon-tech-gcloudfunctions.svg); }
+.ui-icon-tech-go { background-image: url(../icons/icon-tech-go.svg); }
+.ui-icon-tech-ifttt { background-image: url(../icons/icon-tech-ifttt.svg); }
+.ui-icon-tech-java { background-image: url(../icons/icon-tech-java.svg); }
+.ui-icon-tech-javascript { background-image: url(../icons/icon-tech-javascript.svg); }
+.ui-icon-tech-net { background-image: url(../icons/icon-tech-net.svg); }
+.ui-icon-tech-objectivec { background-image: url(../icons/icon-tech-objectivec.svg); }
+.ui-icon-tech-php { background-image: url(../icons/icon-tech-php.svg); }
+.ui-icon-tech-python { background-image: url(../icons/icon-tech-python.svg); }
+.ui-icon-tech-react { background-image: url(../icons/icon-tech-react.svg); }
+.ui-icon-tech-ruby { background-image: url(../icons/icon-tech-ruby.svg); }
+.ui-icon-tech-swift { background-image: url(../icons/icon-tech-swift.svg); }
+.ui-icon-tech-terraform { background-image: url(../icons/icon-tech-terraform.svg); }
+.ui-icon-tech-zapier { background-image: url(../icons/icon-tech-zapier.svg); }

package/core/styles.components.css

@@ -4,6 +4,7 @@
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
+@import "./styles/icons.css"; /* Autogenerated at build time */
 
 @layer components {
   /* Basis for icon component */
@@ -43,4 +44,8 @@
   .ui-container-padding {
     @apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
   }
+
+  .ui-icon {
+    @apply bg-cover;
+  }
 }

package/index.d.ts

@@ -8,7 +8,7 @@ export type AccordionData = {
     name: string;
     icon?: IconName;
     content: ReactNode;
-    onClick?: () => void;
+    onClick?: (index: number) => void;
 };
 export type AccordionIcons = {
     closed: {
@@ -232,11 +232,12 @@ export default Footer;
 declare module '@ably/ui/core/Icon/EncapsulatedIcon' {
 import { IconProps } from ".@ably/ui/core/Icon";
 import { Theme } from ".@ably/ui/core/styles/colors/types";
+import { IconSize } from "@ably/ui/core/types";
 type EncapsulatedIconProps = {
     theme?: Theme;
     className?: string;
     innerClassName?: string;
-    iconSize?: string;
+    iconSize?: IconSize;
 } & IconProps;
 const EncapsulatedIcon: ({ theme, size, iconSize, className, innerClassName, ...iconProps }: EncapsulatedIconProps) => import("react/jsx-runtime").JSX.Element;
 export default EncapsulatedIcon;
@@ -245,7 +246,7 @@ export default EncapsulatedIcon;
 
 declare module '@ably/ui/core/Icon/computed-icons' {
 export const computedIcons: {
-    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "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-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "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-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
+    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "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-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "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-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
     gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
     other: readonly ["icon-other-quote"];
     product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
@@ -264,22 +265,23 @@ export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" |
 declare module '@ably/ui/core/Icon/types' {
 export const iconNames: {
     gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
-    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "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-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "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-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
+    display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "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-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "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-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
     social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-google", "icon-social-linkedin", "icon-social-stackoverflow", "icon-social-twitter", "icon-social-x", "icon-social-youtube"];
     other: readonly ["icon-other-quote"];
     tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
     product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
 };
 export type IconName = (typeof iconNames.gui)[number] | (typeof iconNames.display)[number] | (typeof iconNames.social)[number] | (typeof iconNames.other)[number] | (typeof iconNames.tech)[number] | (typeof iconNames.product)[number];
+export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
 //# sourceMappingURL=types.d.ts.map
 }
 
 declare module '@ably/ui/core/Icon' {
-import { IconName } from "@ably/ui/core/Icon/types";
+import { IconName, IconSize } from "@ably/ui/core/Icon/types";
 import { ColorClass } from "@ably/ui/core/styles/colors/types";
 export type IconProps = {
     name: IconName;
-    size?: string;
+    size?: IconSize;
     color?: ColorClass;
     secondaryColor?: ColorClass;
     additionalCSS?: string;
@@ -397,8 +399,9 @@ type MeganavProps = {
     urlBase?: string;
     addSearchApiKey: string;
     statusUrl: string;
+    searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -569,8 +572,9 @@ type MeganavItemsMobileProps = {
     loginLink: string;
     absUrl: AbsUrl;
     statusUrl: string;
+    searchDataId?: string;
 };
-const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
+const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
@@ -581,16 +585,18 @@ type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
     absUrl: AbsUrl;
+    searchDataId?: string;
 };
-const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
+const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
 export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
 declare module '@ably/ui/core/MeganavSearch' {
 import { AbsUrl } from "@ably/ui/core/Meganav";
-const MeganavSearch: ({ absUrl }: {
+const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
+    dataId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
@@ -681,6 +687,19 @@ declare module '@ably/ui/core/Pricing/PricingCards' {
 import type { PricingDataFeature } from "@ably/ui/core/types";
 import { Theme } from ".@ably/ui/core/styles/colors/types";
 import { IconName } from ".@ably/ui/core/Icon/types";
+/**
+  Pricing hack to get all the themes loaded
+
+  themeColor("text-orange-600")
+  themeColor("text-orange-1000")
+  themeColor("text-neutral-000")
+  themeColor("text-neutral-500")
+  themeColor("text-neutral-600")
+  themeColor("text-neutral-700")
+  themeColor("text-neutral-1000")
+  themeColor("text-blue-400")
+  themeColor("text-blue-800")
+ */
 export type PricingCardsProps = {
     data: PricingDataFeature[];
     theme?: Theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.8-dev.40d3bee",
+  "version": "14.7.9-dev.1dd8fc7",
   "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",
@@ -16,15 +16,15 @@
   ],
   "types": "index.d.ts",
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
     "@storybook/test-runner": "^0.19.1",
-    "@swc/cli": "^0.4.0",
+    "@swc/cli": "^0.5.0",
     "@swc/core": "^1.4.11",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/dompurify": "^3.0.5",
@@ -39,12 +39,12 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "14.1.1",
-    "msw": "2.4.2",
+    "msw": "2.6.1",
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.0",
     "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",