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

package/core/Code.js

@@ -1 +1 @@
-import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS="",showLines,lineCSS})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;const lineCount=snippet.split(/\r\n|\r|\n/).length;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto flex ${padding} ${additionalCSS}`,"data-id":"code"},showLines?/*#__PURE__*/React.createElement("div",null,[...Array(lineCount)].map((_,i)=>/*#__PURE__*/React.createElement("p",{className:`mr-24 font-mono text-neutral-800 ${lineCSS??""}`,key:i},i+1))):null,/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS="",showLines,lineCSS})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;const lineCount=snippet.split(/\r\n|\r|\n/).length;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto flex ${padding} ${additionalCSS}`,"data-id":"code"},showLines?/*#__PURE__*/React.createElement("div",null,[...Array(lineCount)].map((_,i)=>/*#__PURE__*/React.createElement("p",{className:`mr-24 font-mono text-right text-neutral-800 ${lineCSS??""}`,key:i},i+1))):null,/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/FeaturedLink.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor="text-cool-black",flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return /*#__PURE__*/React.createElement("a",{href:url,className:`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${flush?"":"py-8"} ${additionalCSS}`,style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"}),children):/*#__PURE__*/React.createElement(React.Fragment,null,children,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"})))};export default FeaturedLink;
+import React from"react";import Icon from"./Icon";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return /*#__PURE__*/React.createElement("a",{href:url,className:`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${flush?"":"py-8"} ${additionalCSS}`,style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover:right-0 transform rotate-180"}),children):/*#__PURE__*/React.createElement(React.Fragment,null,children,/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"})))};export default FeaturedLink;

package/core/Icon.js

@@ -1 +1 @@
-import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";const convertTailwindClassToVar=className=>className.replace(/(text|bg)-([a-z0-9-]+)/gi,"var(--color-$2)");const Icon=({name,size="0.75rem",color,secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color??""} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;
+import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";const Icon=({name,size="0.75rem",color,secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color??""} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;

package/core/Pricing/PricingCards.js

@@ -0,0 +1 @@
+import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const PricingCards=({data,theme="dark",delimiter})=>{const t=color=>determineThemeColor("dark",theme,color);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center w-full m-8 @[920px]:w-20"},/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:t("text-neutral-500")})):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`flex flex-1 p-1 bg-gradient-to-b ${t("from-neutral-1100")} ${t("to-neutral-1100")} rounded-2xl min-w-[272px]`},/*#__PURE__*/React.createElement("div",{className:`flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl ${t("bg-neutral-1300")} bg-opacity-25 ${cta?`${t("hover:bg-neutral-1200")} hover:bg-opacity-100`:""} transition-colors group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""}`},/*#__PURE__*/React.createElement("div",{className:`flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px}:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:`mb-12 ${title.className??""} ${t(title.color??"text-neutral-000")}`},title.content),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${t(description.color??"text-neutral-000")}`},description.content)),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`},Number.isNaN(Number(price.amount))?"":"$",price.amount),/*#__PURE__*/React.createElement("div",{className:t("text-neutral-000")},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""}`,url:cta.url},cta.text)):null),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${t("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${t("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:t(listItemColors.background),secondaryColor:t(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${t("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"flex items-center h-40"},/*#__PURE__*/React.createElement("div",{className:`hidden sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`},"•••"),/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url??"#",additionalCSS:`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`},cta.text)):null))))),delimiterColumn(index)))))};export default PricingCards;

package/core/Pricing/data.js

@@ -0,0 +1 @@
+import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:0},cta:{text:"Start for free",url:"#"},sections:[{title:"Capacity",items:["200 concurrent channels","200 concurrent connections"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-600",background:"text-neutral-1000"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:29,content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"#"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages/second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:399,content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"#"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages/second"]},{title:"Includes",items:["4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"#",className:"ui-btn-alt text-white"},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited concurrent connections","Unlimited messages/second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600",background:"text-orange-1000"},cta:{text:"See all features",url:"#"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:2.5,content:"per million"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Clients publish and receive messages on channels (also know as topics). We only charge for active channels.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:1,content:"per million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 10 million msgs","$1.00"],["Next 90 million msgs","$0.95"],["Next 900 million msgs","$0.85"],["Next 4 billion msgs","$0.75"],["Next 10 billion msgs","$0.65"],["Over 15 billion msgs","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.  We only charge for active connections.",className:"ui-text-p3",color:"text-neutral-700"},price:{amount:1,content:"per million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$/million msgs"],["First 10 million msgs","$1.00"],["Next 90 million msgs","$0.95"],["Next 900 million msgs","$0.85"],["Next 4 billion msgs","$0.75"],["Next 10 billion msgs","$0.65"],["Over 15 billion msgs","$0.60"]]}]}];

package/core/Pricing/types.js

@@ -0,0 +1 @@
+export{};

package/core/styles/buttons.css

@@ -80,52 +80,8 @@
   .ui-btn-icon-xsmall {
     @apply w-16 h-16 mr-8;
   }
-
-  .ui-chip {
-    @apply text-btn3 p-chip rounded text-cool-black;
-    @apply hover:bg-mid-grey;
-    @apply active:bg-red-orange active:text-white;
-    @apply focus:bg-red-orange focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip[data-selected] {
-    @apply bg-active-orange text-white;
-  }
-
-  .ui-chip[data-selected]:hover {
-    @apply bg-mid-grey text-cool-black;
-  }
-
-  .ui-chip[data-selected]:focus {
-    @apply bg-red-orange text-white;
-  }
-
-  .ui-chip-alt {
-    @apply text-btn3 p-chip rounded text-white;
-    @apply hover:bg-gui-hover;
-    @apply active:bg-gui-active active:text-white;
-    @apply focus:bg-gui-active focus:text-white focus:outline-none;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-  }
-
-  .ui-chip-alt[data-selected] {
-    @apply bg-dark-grey text-white;
-  }
-  .ui-chip-alt[data-selected]:hover {
-    @apply bg-gui-hover text-white;
-  }
-
-  .ui-chip-alt[data-selected]:focus {
-    @apply bg-gui-active text-white;
-  }
-
   .ui-btn.ui-btn-disabled,
-  .ui-btn-invert.ui-btn-disabled,
-  .ui-chip.ui-btn-disabled,
-  .ui-chip-alt.ui-btn-disabled {
+  .ui-btn-invert.ui-btn-disabled {
     @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
   }
 

package/core/styles/colors/utils.js

@@ -0,0 +1 @@
+import{colorNames}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");const calculatePaletteRange=(acc,color)=>{const splitColor=color.split("-");const numericalColor=Number(splitColor[splitColor.length-1]);return{min:acc.min===-1||numericalColor<acc.min?numericalColor:acc.min,max:acc.max===-1||numericalColor>acc.max?numericalColor:acc.max}};export const determineThemeColor=(baseTheme,currentTheme,color)=>{if(baseTheme===currentTheme){return color}else{const splitColor=color.split("-");if(splitColor.length===3){const[property,palette,variant]=splitColor;const paletteColors=Object.keys(colorNames).includes(palette)?colorNames[palette]:colorNames.secondary;const{min,max}=paletteColors.reduce((acc,color)=>calculatePaletteRange(acc,color),{min:-1,max:-1});return`${property}-${palette}-${(max+min-Number(variant)).toString().padStart(3,"0")}`}else{return color}}};

package/core/styles/dropdowns.css

@@ -40,6 +40,6 @@
   }
 
   .ui-dropdown-dark {
-    @apply text-white;
+    @apply text-neutral-300 bg-neutral-1200 border-neutral-800;
   }
 }

package/core/styles/forms.css

@@ -61,4 +61,63 @@
     /* color: var(--text-dark-grey); */
     color: #76767c;
   }
+
+  .ui-toggle {
+    @apply h-32 w-[56px] rounded-full relative inline-block;
+  }
+
+  .ui-toggle:has(:disabled) {
+    @apply pointer-events-none;
+  }
+
+  .ui-toggle input {
+    @apply w-0 h-0 opacity-0;
+  }
+
+  .ui-toggle-slider {
+    @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
+  }
+
+  .ui-toggle-slider:before {
+    @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
+    content: "";
+  }
+
+  .ui-toggle input:checked + .ui-toggle-slider {
+    @apply bg-orange-600;
+  }
+
+  .ui-toggle input:disabled + .ui-toggle-slider {
+    @apply bg-gui-unavailable;
+  }
+
+  .ui-toggle input:checked + .ui-toggle-slider:before {
+    @apply translate-x-24;
+  }
+
+  .ui-toggle input:disabled + .ui-toggle-slider:before {
+    @apply bg-neutral-500;
+  }
+
+  .ui-input {
+    @apply ui-text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-colors placeholder-neutral-800;
+    @apply hover:border-neutral-800 focus:bg-white focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  .ui-input-dark {
+    @apply bg-neutral-1200 hover:bg-neutral-1200 focus:bg-neutral-1000 text-neutral-300;
+  }
+
+  .ui-input:disabled {
+    @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
+  }
+
+  .ui-input-dark:disabled {
+    @apply text-neutral-800 placeholder-neutral-800;
+  }
+
+  .ui-input {
+    @apply invalid:border-gui-error-red;
+  }
 }

package/core/styles/properties.css

@@ -254,10 +254,6 @@
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
-    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
-    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
-    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
-    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
     --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,

package/core/styles.components.css

@@ -4,16 +4,8 @@
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
-@import "./styles/toggles.css";
 
 @layer components {
-  .ui-input {
-    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
-    @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-    @apply max-w-screen-sm;
-  }
-
   /* Basis for icon component */
   .ui-icon-cool-black {
     stroke: var(--color-cool-black);
@@ -47,4 +39,8 @@
   .ui-divider-spacing {
     @apply my-20 sm:my-24 md:my-32;
   }
+
+  .ui-container-padding {
+    @apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
+  }
 }

package/index.d.ts

@@ -227,7 +227,7 @@ export default Footer;
 
 declare module '@ably/ui/core/Icon/secondary-colors' {
 import { IconName } from "@ably/ui/core/types";
-export const defaultIconSecondaryColor: (name: IconName) => "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent";
+export const defaultIconSecondaryColor: (name: IconName) => "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent" | "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" | "hover:bg-neutral-000" | "hover:bg-neutral-100" | "hover:bg-neutral-200" | "hover:bg-neutral-300" | "hover:bg-neutral-400" | "hover:bg-neutral-500" | "hover:bg-neutral-600" | "hover:bg-neutral-700" | "hover:bg-neutral-800" | "hover:bg-neutral-900" | "hover:bg-neutral-1000" | "hover:bg-neutral-1100" | "hover:bg-neutral-1200" | "hover:bg-neutral-1300" | "hover:bg-orange-100" | "hover:bg-orange-200" | "hover:bg-orange-300" | "hover:bg-orange-400" | "hover:bg-orange-500" | "hover:bg-orange-600" | "hover:bg-orange-700" | "hover:bg-orange-800" | "hover:bg-orange-900" | "hover:bg-orange-1000" | "hover:bg-orange-1100" | "hover:bg-yellow-100" | "hover:bg-yellow-200" | "hover:bg-yellow-300" | "hover:bg-yellow-400" | "hover:bg-yellow-500" | "hover:bg-yellow-600" | "hover:bg-yellow-700" | "hover:bg-yellow-800" | "hover:bg-yellow-900" | "hover:bg-green-100" | "hover:bg-green-200" | "hover:bg-green-300" | "hover:bg-green-400" | "hover:bg-green-500" | "hover:bg-green-600" | "hover:bg-green-700" | "hover:bg-green-800" | "hover:bg-green-900" | "hover:bg-blue-100" | "hover:bg-blue-200" | "hover:bg-blue-300" | "hover:bg-blue-400" | "hover:bg-blue-500" | "hover:bg-blue-600" | "hover:bg-blue-700" | "hover:bg-blue-800" | "hover:bg-blue-900" | "hover:bg-violet-100" | "hover:bg-violet-200" | "hover:bg-violet-300" | "hover:bg-violet-400" | "hover:bg-violet-500" | "hover:bg-violet-600" | "hover:bg-violet-700" | "hover:bg-violet-800" | "hover:bg-violet-900" | "hover:bg-pink-100" | "hover:bg-pink-200" | "hover:bg-pink-300" | "hover:bg-pink-400" | "hover:bg-pink-500" | "hover:bg-pink-600" | "hover:bg-pink-700" | "hover:bg-pink-800" | "hover:bg-pink-900" | "hover:bg-gui-blue-default-light" | "hover:bg-gui-blue-hover-light" | "hover:bg-gui-blue-active-light" | "hover:bg-gui-blue-default-dark" | "hover:bg-gui-blue-hover-dark" | "hover:bg-gui-blue-active-dark" | "hover:bg-gui-blue-focus" | "hover:bg-gui-unavailable" | "hover:bg-gui-success-green" | "hover:bg-gui-error-red" | "hover:bg-gui-focus" | "hover:bg-gui-focus-outline" | "hover:bg-gui-visited" | "hover:bg-white" | "hover:bg-extra-light-grey" | "hover:bg-light-grey" | "hover:bg-mid-grey" | "hover:bg-dark-grey" | "hover:bg-charcoal-grey" | "hover:bg-cool-black" | "hover:bg-active-orange" | "hover:bg-bright-red" | "hover:bg-red-orange" | "hover:bg-electric-cyan" | "hover:bg-zingy-green" | "hover:bg-jazzy-pink" | "hover:bg-gui-default" | "hover:bg-gui-hover" | "hover:bg-gui-active" | "hover:bg-gui-error" | "hover:bg-gui-success" | "hover:bg-gui-default-dark" | "hover:bg-gui-hover-dark" | "hover:bg-gui-active-dark" | "hover:bg-transparent" | "hover:text-neutral-000" | "hover:text-neutral-100" | "hover:text-neutral-200" | "hover:text-neutral-300" | "hover:text-neutral-400" | "hover:text-neutral-500" | "hover:text-neutral-600" | "hover:text-neutral-700" | "hover:text-neutral-800" | "hover:text-neutral-900" | "hover:text-neutral-1000" | "hover:text-neutral-1100" | "hover:text-neutral-1200" | "hover:text-neutral-1300" | "hover:text-orange-100" | "hover:text-orange-200" | "hover:text-orange-300" | "hover:text-orange-400" | "hover:text-orange-500" | "hover:text-orange-600" | "hover:text-orange-700" | "hover:text-orange-800" | "hover:text-orange-900" | "hover:text-orange-1000" | "hover:text-orange-1100" | "hover:text-yellow-100" | "hover:text-yellow-200" | "hover:text-yellow-300" | "hover:text-yellow-400" | "hover:text-yellow-500" | "hover:text-yellow-600" | "hover:text-yellow-700" | "hover:text-yellow-800" | "hover:text-yellow-900" | "hover:text-green-100" | "hover:text-green-200" | "hover:text-green-300" | "hover:text-green-400" | "hover:text-green-500" | "hover:text-green-600" | "hover:text-green-700" | "hover:text-green-800" | "hover:text-green-900" | "hover:text-blue-100" | "hover:text-blue-200" | "hover:text-blue-300" | "hover:text-blue-400" | "hover:text-blue-500" | "hover:text-blue-600" | "hover:text-blue-700" | "hover:text-blue-800" | "hover:text-blue-900" | "hover:text-violet-100" | "hover:text-violet-200" | "hover:text-violet-300" | "hover:text-violet-400" | "hover:text-violet-500" | "hover:text-violet-600" | "hover:text-violet-700" | "hover:text-violet-800" | "hover:text-violet-900" | "hover:text-pink-100" | "hover:text-pink-200" | "hover:text-pink-300" | "hover:text-pink-400" | "hover:text-pink-500" | "hover:text-pink-600" | "hover:text-pink-700" | "hover:text-pink-800" | "hover:text-pink-900" | "hover:text-gui-blue-default-light" | "hover:text-gui-blue-hover-light" | "hover:text-gui-blue-active-light" | "hover:text-gui-blue-default-dark" | "hover:text-gui-blue-hover-dark" | "hover:text-gui-blue-active-dark" | "hover:text-gui-blue-focus" | "hover:text-gui-unavailable" | "hover:text-gui-success-green" | "hover:text-gui-error-red" | "hover:text-gui-focus" | "hover:text-gui-focus-outline" | "hover:text-gui-visited" | "hover:text-white" | "hover:text-extra-light-grey" | "hover:text-light-grey" | "hover:text-mid-grey" | "hover:text-dark-grey" | "hover:text-charcoal-grey" | "hover:text-cool-black" | "hover:text-active-orange" | "hover:text-bright-red" | "hover:text-red-orange" | "hover:text-electric-cyan" | "hover:text-zingy-green" | "hover:text-jazzy-pink" | "hover:text-gui-default" | "hover:text-gui-hover" | "hover:text-gui-active" | "hover:text-gui-error" | "hover:text-gui-success" | "hover:text-gui-default-dark" | "hover:text-gui-hover-dark" | "hover:text-gui-active-dark" | "hover:text-transparent" | "hover:from-neutral-000" | "hover:from-neutral-100" | "hover:from-neutral-200" | "hover:from-neutral-300" | "hover:from-neutral-400" | "hover:from-neutral-500" | "hover:from-neutral-600" | "hover:from-neutral-700" | "hover:from-neutral-800" | "hover:from-neutral-900" | "hover:from-neutral-1000" | "hover:from-neutral-1100" | "hover:from-neutral-1200" | "hover:from-neutral-1300" | "hover:from-orange-100" | "hover:from-orange-200" | "hover:from-orange-300" | "hover:from-orange-400" | "hover:from-orange-500" | "hover:from-orange-600" | "hover:from-orange-700" | "hover:from-orange-800" | "hover:from-orange-900" | "hover:from-orange-1000" | "hover:from-orange-1100" | "hover:from-yellow-100" | "hover:from-yellow-200" | "hover:from-yellow-300" | "hover:from-yellow-400" | "hover:from-yellow-500" | "hover:from-yellow-600" | "hover:from-yellow-700" | "hover:from-yellow-800" | "hover:from-yellow-900" | "hover:from-green-100" | "hover:from-green-200" | "hover:from-green-300" | "hover:from-green-400" | "hover:from-green-500" | "hover:from-green-600" | "hover:from-green-700" | "hover:from-green-800" | "hover:from-green-900" | "hover:from-blue-100" | "hover:from-blue-200" | "hover:from-blue-300" | "hover:from-blue-400" | "hover:from-blue-500" | "hover:from-blue-600" | "hover:from-blue-700" | "hover:from-blue-800" | "hover:from-blue-900" | "hover:from-violet-100" | "hover:from-violet-200" | "hover:from-violet-300" | "hover:from-violet-400" | "hover:from-violet-500" | "hover:from-violet-600" | "hover:from-violet-700" | "hover:from-violet-800" | "hover:from-violet-900" | "hover:from-pink-100" | "hover:from-pink-200" | "hover:from-pink-300" | "hover:from-pink-400" | "hover:from-pink-500" | "hover:from-pink-600" | "hover:from-pink-700" | "hover:from-pink-800" | "hover:from-pink-900" | "hover:from-gui-blue-default-light" | "hover:from-gui-blue-hover-light" | "hover:from-gui-blue-active-light" | "hover:from-gui-blue-default-dark" | "hover:from-gui-blue-hover-dark" | "hover:from-gui-blue-active-dark" | "hover:from-gui-blue-focus" | "hover:from-gui-unavailable" | "hover:from-gui-success-green" | "hover:from-gui-error-red" | "hover:from-gui-focus" | "hover:from-gui-focus-outline" | "hover:from-gui-visited" | "hover:from-white" | "hover:from-extra-light-grey" | "hover:from-light-grey" | "hover:from-mid-grey" | "hover:from-dark-grey" | "hover:from-charcoal-grey" | "hover:from-cool-black" | "hover:from-active-orange" | "hover:from-bright-red" | "hover:from-red-orange" | "hover:from-electric-cyan" | "hover:from-zingy-green" | "hover:from-jazzy-pink" | "hover:from-gui-default" | "hover:from-gui-hover" | "hover:from-gui-active" | "hover:from-gui-error" | "hover:from-gui-success" | "hover:from-gui-default-dark" | "hover:from-gui-hover-dark" | "hover:from-gui-active-dark" | "hover:from-transparent" | "hover:to-neutral-000" | "hover:to-neutral-100" | "hover:to-neutral-200" | "hover:to-neutral-300" | "hover:to-neutral-400" | "hover:to-neutral-500" | "hover:to-neutral-600" | "hover:to-neutral-700" | "hover:to-neutral-800" | "hover:to-neutral-900" | "hover:to-neutral-1000" | "hover:to-neutral-1100" | "hover:to-neutral-1200" | "hover:to-neutral-1300" | "hover:to-orange-100" | "hover:to-orange-200" | "hover:to-orange-300" | "hover:to-orange-400" | "hover:to-orange-500" | "hover:to-orange-600" | "hover:to-orange-700" | "hover:to-orange-800" | "hover:to-orange-900" | "hover:to-orange-1000" | "hover:to-orange-1100" | "hover:to-yellow-100" | "hover:to-yellow-200" | "hover:to-yellow-300" | "hover:to-yellow-400" | "hover:to-yellow-500" | "hover:to-yellow-600" | "hover:to-yellow-700" | "hover:to-yellow-800" | "hover:to-yellow-900" | "hover:to-green-100" | "hover:to-green-200" | "hover:to-green-300" | "hover:to-green-400" | "hover:to-green-500" | "hover:to-green-600" | "hover:to-green-700" | "hover:to-green-800" | "hover:to-green-900" | "hover:to-blue-100" | "hover:to-blue-200" | "hover:to-blue-300" | "hover:to-blue-400" | "hover:to-blue-500" | "hover:to-blue-600" | "hover:to-blue-700" | "hover:to-blue-800" | "hover:to-blue-900" | "hover:to-violet-100" | "hover:to-violet-200" | "hover:to-violet-300" | "hover:to-violet-400" | "hover:to-violet-500" | "hover:to-violet-600" | "hover:to-violet-700" | "hover:to-violet-800" | "hover:to-violet-900" | "hover:to-pink-100" | "hover:to-pink-200" | "hover:to-pink-300" | "hover:to-pink-400" | "hover:to-pink-500" | "hover:to-pink-600" | "hover:to-pink-700" | "hover:to-pink-800" | "hover:to-pink-900" | "hover:to-gui-blue-default-light" | "hover:to-gui-blue-hover-light" | "hover:to-gui-blue-active-light" | "hover:to-gui-blue-default-dark" | "hover:to-gui-blue-hover-dark" | "hover:to-gui-blue-active-dark" | "hover:to-gui-blue-focus" | "hover:to-gui-unavailable" | "hover:to-gui-success-green" | "hover:to-gui-error-red" | "hover:to-gui-focus" | "hover:to-gui-focus-outline" | "hover:to-gui-visited" | "hover:to-white" | "hover:to-extra-light-grey" | "hover:to-light-grey" | "hover:to-mid-grey" | "hover:to-dark-grey" | "hover:to-charcoal-grey" | "hover:to-cool-black" | "hover:to-active-orange" | "hover:to-bright-red" | "hover:to-red-orange" | "hover:to-electric-cyan" | "hover:to-zingy-green" | "hover:to-jazzy-pink" | "hover:to-gui-default" | "hover:to-gui-hover" | "hover:to-gui-active" | "hover:to-gui-error" | "hover:to-gui-success" | "hover:to-gui-default-dark" | "hover:to-gui-hover-dark" | "hover:to-gui-active-dark" | "hover:to-transparent" | "focus:bg-neutral-000" | "focus:bg-neutral-100" | "focus:bg-neutral-200" | "focus:bg-neutral-300" | "focus:bg-neutral-400" | "focus:bg-neutral-500" | "focus:bg-neutral-600" | "focus:bg-neutral-700" | "focus:bg-neutral-800" | "focus:bg-neutral-900" | "focus:bg-neutral-1000" | "focus:bg-neutral-1100" | "focus:bg-neutral-1200" | "focus:bg-neutral-1300" | "focus:bg-orange-100" | "focus:bg-orange-200" | "focus:bg-orange-300" | "focus:bg-orange-400" | "focus:bg-orange-500" | "focus:bg-orange-600" | "focus:bg-orange-700" | "focus:bg-orange-800" | "focus:bg-orange-900" | "focus:bg-orange-1000" | "focus:bg-orange-1100" | "focus:bg-yellow-100" | "focus:bg-yellow-200" | "focus:bg-yellow-300" | "focus:bg-yellow-400" | "focus:bg-yellow-500" | "focus:bg-yellow-600" | "focus:bg-yellow-700" | "focus:bg-yellow-800" | "focus:bg-yellow-900" | "focus:bg-green-100" | "focus:bg-green-200" | "focus:bg-green-300" | "focus:bg-green-400" | "focus:bg-green-500" | "focus:bg-green-600" | "focus:bg-green-700" | "focus:bg-green-800" | "focus:bg-green-900" | "focus:bg-blue-100" | "focus:bg-blue-200" | "focus:bg-blue-300" | "focus:bg-blue-400" | "focus:bg-blue-500" | "focus:bg-blue-600" | "focus:bg-blue-700" | "focus:bg-blue-800" | "focus:bg-blue-900" | "focus:bg-violet-100" | "focus:bg-violet-200" | "focus:bg-violet-300" | "focus:bg-violet-400" | "focus:bg-violet-500" | "focus:bg-violet-600" | "focus:bg-violet-700" | "focus:bg-violet-800" | "focus:bg-violet-900" | "focus:bg-pink-100" | "focus:bg-pink-200" | "focus:bg-pink-300" | "focus:bg-pink-400" | "focus:bg-pink-500" | "focus:bg-pink-600" | "focus:bg-pink-700" | "focus:bg-pink-800" | "focus:bg-pink-900" | "focus:bg-gui-blue-default-light" | "focus:bg-gui-blue-hover-light" | "focus:bg-gui-blue-active-light" | "focus:bg-gui-blue-default-dark" | "focus:bg-gui-blue-hover-dark" | "focus:bg-gui-blue-active-dark" | "focus:bg-gui-blue-focus" | "focus:bg-gui-unavailable" | "focus:bg-gui-success-green" | "focus:bg-gui-error-red" | "focus:bg-gui-focus" | "focus:bg-gui-focus-outline" | "focus:bg-gui-visited" | "focus:bg-white" | "focus:bg-extra-light-grey" | "focus:bg-light-grey" | "focus:bg-mid-grey" | "focus:bg-dark-grey" | "focus:bg-charcoal-grey" | "focus:bg-cool-black" | "focus:bg-active-orange" | "focus:bg-bright-red" | "focus:bg-red-orange" | "focus:bg-electric-cyan" | "focus:bg-zingy-green" | "focus:bg-jazzy-pink" | "focus:bg-gui-default" | "focus:bg-gui-hover" | "focus:bg-gui-active" | "focus:bg-gui-error" | "focus:bg-gui-success" | "focus:bg-gui-default-dark" | "focus:bg-gui-hover-dark" | "focus:bg-gui-active-dark" | "focus:bg-transparent" | "focus:text-neutral-000" | "focus:text-neutral-100" | "focus:text-neutral-200" | "focus:text-neutral-300" | "focus:text-neutral-400" | "focus:text-neutral-500" | "focus:text-neutral-600" | "focus:text-neutral-700" | "focus:text-neutral-800" | "focus:text-neutral-900" | "focus:text-neutral-1000" | "focus:text-neutral-1100" | "focus:text-neutral-1200" | "focus:text-neutral-1300" | "focus:text-orange-100" | "focus:text-orange-200" | "focus:text-orange-300" | "focus:text-orange-400" | "focus:text-orange-500" | "focus:text-orange-600" | "focus:text-orange-700" | "focus:text-orange-800" | "focus:text-orange-900" | "focus:text-orange-1000" | "focus:text-orange-1100" | "focus:text-yellow-100" | "focus:text-yellow-200" | "focus:text-yellow-300" | "focus:text-yellow-400" | "focus:text-yellow-500" | "focus:text-yellow-600" | "focus:text-yellow-700" | "focus:text-yellow-800" | "focus:text-yellow-900" | "focus:text-green-100" | "focus:text-green-200" | "focus:text-green-300" | "focus:text-green-400" | "focus:text-green-500" | "focus:text-green-600" | "focus:text-green-700" | "focus:text-green-800" | "focus:text-green-900" | "focus:text-blue-100" | "focus:text-blue-200" | "focus:text-blue-300" | "focus:text-blue-400" | "focus:text-blue-500" | "focus:text-blue-600" | "focus:text-blue-700" | "focus:text-blue-800" | "focus:text-blue-900" | "focus:text-violet-100" | "focus:text-violet-200" | "focus:text-violet-300" | "focus:text-violet-400" | "focus:text-violet-500" | "focus:text-violet-600" | "focus:text-violet-700" | "focus:text-violet-800" | "focus:text-violet-900" | "focus:text-pink-100" | "focus:text-pink-200" | "focus:text-pink-300" | "focus:text-pink-400" | "focus:text-pink-500" | "focus:text-pink-600" | "focus:text-pink-700" | "focus:text-pink-800" | "focus:text-pink-900" | "focus:text-gui-blue-default-light" | "focus:text-gui-blue-hover-light" | "focus:text-gui-blue-active-light" | "focus:text-gui-blue-default-dark" | "focus:text-gui-blue-hover-dark" | "focus:text-gui-blue-active-dark" | "focus:text-gui-blue-focus" | "focus:text-gui-unavailable" | "focus:text-gui-success-green" | "focus:text-gui-error-red" | "focus:text-gui-focus" | "focus:text-gui-focus-outline" | "focus:text-gui-visited" | "focus:text-white" | "focus:text-extra-light-grey" | "focus:text-light-grey" | "focus:text-mid-grey" | "focus:text-dark-grey" | "focus:text-charcoal-grey" | "focus:text-cool-black" | "focus:text-active-orange" | "focus:text-bright-red" | "focus:text-red-orange" | "focus:text-electric-cyan" | "focus:text-zingy-green" | "focus:text-jazzy-pink" | "focus:text-gui-default" | "focus:text-gui-hover" | "focus:text-gui-active" | "focus:text-gui-error" | "focus:text-gui-success" | "focus:text-gui-default-dark" | "focus:text-gui-hover-dark" | "focus:text-gui-active-dark" | "focus:text-transparent" | "focus:from-neutral-000" | "focus:from-neutral-100" | "focus:from-neutral-200" | "focus:from-neutral-300" | "focus:from-neutral-400" | "focus:from-neutral-500" | "focus:from-neutral-600" | "focus:from-neutral-700" | "focus:from-neutral-800" | "focus:from-neutral-900" | "focus:from-neutral-1000" | "focus:from-neutral-1100" | "focus:from-neutral-1200" | "focus:from-neutral-1300" | "focus:from-orange-100" | "focus:from-orange-200" | "focus:from-orange-300" | "focus:from-orange-400" | "focus:from-orange-500" | "focus:from-orange-600" | "focus:from-orange-700" | "focus:from-orange-800" | "focus:from-orange-900" | "focus:from-orange-1000" | "focus:from-orange-1100" | "focus:from-yellow-100" | "focus:from-yellow-200" | "focus:from-yellow-300" | "focus:from-yellow-400" | "focus:from-yellow-500" | "focus:from-yellow-600" | "focus:from-yellow-700" | "focus:from-yellow-800" | "focus:from-yellow-900" | "focus:from-green-100" | "focus:from-green-200" | "focus:from-green-300" | "focus:from-green-400" | "focus:from-green-500" | "focus:from-green-600" | "focus:from-green-700" | "focus:from-green-800" | "focus:from-green-900" | "focus:from-blue-100" | "focus:from-blue-200" | "focus:from-blue-300" | "focus:from-blue-400" | "focus:from-blue-500" | "focus:from-blue-600" | "focus:from-blue-700" | "focus:from-blue-800" | "focus:from-blue-900" | "focus:from-violet-100" | "focus:from-violet-200" | "focus:from-violet-300" | "focus:from-violet-400" | "focus:from-violet-500" | "focus:from-violet-600" | "focus:from-violet-700" | "focus:from-violet-800" | "focus:from-violet-900" | "focus:from-pink-100" | "focus:from-pink-200" | "focus:from-pink-300" | "focus:from-pink-400" | "focus:from-pink-500" | "focus:from-pink-600" | "focus:from-pink-700" | "focus:from-pink-800" | "focus:from-pink-900" | "focus:from-gui-blue-default-light" | "focus:from-gui-blue-hover-light" | "focus:from-gui-blue-active-light" | "focus:from-gui-blue-default-dark" | "focus:from-gui-blue-hover-dark" | "focus:from-gui-blue-active-dark" | "focus:from-gui-blue-focus" | "focus:from-gui-unavailable" | "focus:from-gui-success-green" | "focus:from-gui-error-red" | "focus:from-gui-focus" | "focus:from-gui-focus-outline" | "focus:from-gui-visited" | "focus:from-white" | "focus:from-extra-light-grey" | "focus:from-light-grey" | "focus:from-mid-grey" | "focus:from-dark-grey" | "focus:from-charcoal-grey" | "focus:from-cool-black" | "focus:from-active-orange" | "focus:from-bright-red" | "focus:from-red-orange" | "focus:from-electric-cyan" | "focus:from-zingy-green" | "focus:from-jazzy-pink" | "focus:from-gui-default" | "focus:from-gui-hover" | "focus:from-gui-active" | "focus:from-gui-error" | "focus:from-gui-success" | "focus:from-gui-default-dark" | "focus:from-gui-hover-dark" | "focus:from-gui-active-dark" | "focus:from-transparent" | "focus:to-neutral-000" | "focus:to-neutral-100" | "focus:to-neutral-200" | "focus:to-neutral-300" | "focus:to-neutral-400" | "focus:to-neutral-500" | "focus:to-neutral-600" | "focus:to-neutral-700" | "focus:to-neutral-800" | "focus:to-neutral-900" | "focus:to-neutral-1000" | "focus:to-neutral-1100" | "focus:to-neutral-1200" | "focus:to-neutral-1300" | "focus:to-orange-100" | "focus:to-orange-200" | "focus:to-orange-300" | "focus:to-orange-400" | "focus:to-orange-500" | "focus:to-orange-600" | "focus:to-orange-700" | "focus:to-orange-800" | "focus:to-orange-900" | "focus:to-orange-1000" | "focus:to-orange-1100" | "focus:to-yellow-100" | "focus:to-yellow-200" | "focus:to-yellow-300" | "focus:to-yellow-400" | "focus:to-yellow-500" | "focus:to-yellow-600" | "focus:to-yellow-700" | "focus:to-yellow-800" | "focus:to-yellow-900" | "focus:to-green-100" | "focus:to-green-200" | "focus:to-green-300" | "focus:to-green-400" | "focus:to-green-500" | "focus:to-green-600" | "focus:to-green-700" | "focus:to-green-800" | "focus:to-green-900" | "focus:to-blue-100" | "focus:to-blue-200" | "focus:to-blue-300" | "focus:to-blue-400" | "focus:to-blue-500" | "focus:to-blue-600" | "focus:to-blue-700" | "focus:to-blue-800" | "focus:to-blue-900" | "focus:to-violet-100" | "focus:to-violet-200" | "focus:to-violet-300" | "focus:to-violet-400" | "focus:to-violet-500" | "focus:to-violet-600" | "focus:to-violet-700" | "focus:to-violet-800" | "focus:to-violet-900" | "focus:to-pink-100" | "focus:to-pink-200" | "focus:to-pink-300" | "focus:to-pink-400" | "focus:to-pink-500" | "focus:to-pink-600" | "focus:to-pink-700" | "focus:to-pink-800" | "focus:to-pink-900" | "focus:to-gui-blue-default-light" | "focus:to-gui-blue-hover-light" | "focus:to-gui-blue-active-light" | "focus:to-gui-blue-default-dark" | "focus:to-gui-blue-hover-dark" | "focus:to-gui-blue-active-dark" | "focus:to-gui-blue-focus" | "focus:to-gui-unavailable" | "focus:to-gui-success-green" | "focus:to-gui-error-red" | "focus:to-gui-focus" | "focus:to-gui-focus-outline" | "focus:to-gui-visited" | "focus:to-white" | "focus:to-extra-light-grey" | "focus:to-light-grey" | "focus:to-mid-grey" | "focus:to-dark-grey" | "focus:to-charcoal-grey" | "focus:to-cool-black" | "focus:to-active-orange" | "focus:to-bright-red" | "focus:to-red-orange" | "focus:to-electric-cyan" | "focus:to-zingy-green" | "focus:to-jazzy-pink" | "focus:to-gui-default" | "focus:to-gui-hover" | "focus:to-gui-active" | "focus:to-gui-error" | "focus:to-gui-success" | "focus:to-gui-default-dark" | "focus:to-gui-hover-dark" | "focus:to-gui-active-dark" | "focus:to-transparent" | "group-hover:bg-neutral-000" | "group-hover:bg-neutral-100" | "group-hover:bg-neutral-200" | "group-hover:bg-neutral-300" | "group-hover:bg-neutral-400" | "group-hover:bg-neutral-500" | "group-hover:bg-neutral-600" | "group-hover:bg-neutral-700" | "group-hover:bg-neutral-800" | "group-hover:bg-neutral-900" | "group-hover:bg-neutral-1000" | "group-hover:bg-neutral-1100" | "group-hover:bg-neutral-1200" | "group-hover:bg-neutral-1300" | "group-hover:bg-orange-100" | "group-hover:bg-orange-200" | "group-hover:bg-orange-300" | "group-hover:bg-orange-400" | "group-hover:bg-orange-500" | "group-hover:bg-orange-600" | "group-hover:bg-orange-700" | "group-hover:bg-orange-800" | "group-hover:bg-orange-900" | "group-hover:bg-orange-1000" | "group-hover:bg-orange-1100" | "group-hover:bg-yellow-100" | "group-hover:bg-yellow-200" | "group-hover:bg-yellow-300" | "group-hover:bg-yellow-400" | "group-hover:bg-yellow-500" | "group-hover:bg-yellow-600" | "group-hover:bg-yellow-700" | "group-hover:bg-yellow-800" | "group-hover:bg-yellow-900" | "group-hover:bg-green-100" | "group-hover:bg-green-200" | "group-hover:bg-green-300" | "group-hover:bg-green-400" | "group-hover:bg-green-500" | "group-hover:bg-green-600" | "group-hover:bg-green-700" | "group-hover:bg-green-800" | "group-hover:bg-green-900" | "group-hover:bg-blue-100" | "group-hover:bg-blue-200" | "group-hover:bg-blue-300" | "group-hover:bg-blue-400" | "group-hover:bg-blue-500" | "group-hover:bg-blue-600" | "group-hover:bg-blue-700" | "group-hover:bg-blue-800" | "group-hover:bg-blue-900" | "group-hover:bg-violet-100" | "group-hover:bg-violet-200" | "group-hover:bg-violet-300" | "group-hover:bg-violet-400" | "group-hover:bg-violet-500" | "group-hover:bg-violet-600" | "group-hover:bg-violet-700" | "group-hover:bg-violet-800" | "group-hover:bg-violet-900" | "group-hover:bg-pink-100" | "group-hover:bg-pink-200" | "group-hover:bg-pink-300" | "group-hover:bg-pink-400" | "group-hover:bg-pink-500" | "group-hover:bg-pink-600" | "group-hover:bg-pink-700" | "group-hover:bg-pink-800" | "group-hover:bg-pink-900" | "group-hover:bg-gui-blue-default-light" | "group-hover:bg-gui-blue-hover-light" | "group-hover:bg-gui-blue-active-light" | "group-hover:bg-gui-blue-default-dark" | "group-hover:bg-gui-blue-hover-dark" | "group-hover:bg-gui-blue-active-dark" | "group-hover:bg-gui-blue-focus" | "group-hover:bg-gui-unavailable" | "group-hover:bg-gui-success-green" | "group-hover:bg-gui-error-red" | "group-hover:bg-gui-focus" | "group-hover:bg-gui-focus-outline" | "group-hover:bg-gui-visited" | "group-hover:bg-white" | "group-hover:bg-extra-light-grey" | "group-hover:bg-light-grey" | "group-hover:bg-mid-grey" | "group-hover:bg-dark-grey" | "group-hover:bg-charcoal-grey" | "group-hover:bg-cool-black" | "group-hover:bg-active-orange" | "group-hover:bg-bright-red" | "group-hover:bg-red-orange" | "group-hover:bg-electric-cyan" | "group-hover:bg-zingy-green" | "group-hover:bg-jazzy-pink" | "group-hover:bg-gui-default" | "group-hover:bg-gui-hover" | "group-hover:bg-gui-active" | "group-hover:bg-gui-error" | "group-hover:bg-gui-success" | "group-hover:bg-gui-default-dark" | "group-hover:bg-gui-hover-dark" | "group-hover:bg-gui-active-dark" | "group-hover:bg-transparent" | "group-hover:text-neutral-000" | "group-hover:text-neutral-100" | "group-hover:text-neutral-200" | "group-hover:text-neutral-300" | "group-hover:text-neutral-400" | "group-hover:text-neutral-500" | "group-hover:text-neutral-600" | "group-hover:text-neutral-700" | "group-hover:text-neutral-800" | "group-hover:text-neutral-900" | "group-hover:text-neutral-1000" | "group-hover:text-neutral-1100" | "group-hover:text-neutral-1200" | "group-hover:text-neutral-1300" | "group-hover:text-orange-100" | "group-hover:text-orange-200" | "group-hover:text-orange-300" | "group-hover:text-orange-400" | "group-hover:text-orange-500" | "group-hover:text-orange-600" | "group-hover:text-orange-700" | "group-hover:text-orange-800" | "group-hover:text-orange-900" | "group-hover:text-orange-1000" | "group-hover:text-orange-1100" | "group-hover:text-yellow-100" | "group-hover:text-yellow-200" | "group-hover:text-yellow-300" | "group-hover:text-yellow-400" | "group-hover:text-yellow-500" | "group-hover:text-yellow-600" | "group-hover:text-yellow-700" | "group-hover:text-yellow-800" | "group-hover:text-yellow-900" | "group-hover:text-green-100" | "group-hover:text-green-200" | "group-hover:text-green-300" | "group-hover:text-green-400" | "group-hover:text-green-500" | "group-hover:text-green-600" | "group-hover:text-green-700" | "group-hover:text-green-800" | "group-hover:text-green-900" | "group-hover:text-blue-100" | "group-hover:text-blue-200" | "group-hover:text-blue-300" | "group-hover:text-blue-400" | "group-hover:text-blue-500" | "group-hover:text-blue-600" | "group-hover:text-blue-700" | "group-hover:text-blue-800" | "group-hover:text-blue-900" | "group-hover:text-violet-100" | "group-hover:text-violet-200" | "group-hover:text-violet-300" | "group-hover:text-violet-400" | "group-hover:text-violet-500" | "group-hover:text-violet-600" | "group-hover:text-violet-700" | "group-hover:text-violet-800" | "group-hover:text-violet-900" | "group-hover:text-pink-100" | "group-hover:text-pink-200" | "group-hover:text-pink-300" | "group-hover:text-pink-400" | "group-hover:text-pink-500" | "group-hover:text-pink-600" | "group-hover:text-pink-700" | "group-hover:text-pink-800" | "group-hover:text-pink-900" | "group-hover:text-gui-blue-default-light" | "group-hover:text-gui-blue-hover-light" | "group-hover:text-gui-blue-active-light" | "group-hover:text-gui-blue-default-dark" | "group-hover:text-gui-blue-hover-dark" | "group-hover:text-gui-blue-active-dark" | "group-hover:text-gui-blue-focus" | "group-hover:text-gui-unavailable" | "group-hover:text-gui-success-green" | "group-hover:text-gui-error-red" | "group-hover:text-gui-focus" | "group-hover:text-gui-focus-outline" | "group-hover:text-gui-visited" | "group-hover:text-white" | "group-hover:text-extra-light-grey" | "group-hover:text-light-grey" | "group-hover:text-mid-grey" | "group-hover:text-dark-grey" | "group-hover:text-charcoal-grey" | "group-hover:text-cool-black" | "group-hover:text-active-orange" | "group-hover:text-bright-red" | "group-hover:text-red-orange" | "group-hover:text-electric-cyan" | "group-hover:text-zingy-green" | "group-hover:text-jazzy-pink" | "group-hover:text-gui-default" | "group-hover:text-gui-hover" | "group-hover:text-gui-active" | "group-hover:text-gui-error" | "group-hover:text-gui-success" | "group-hover:text-gui-default-dark" | "group-hover:text-gui-hover-dark" | "group-hover:text-gui-active-dark" | "group-hover:text-transparent" | "group-hover:from-neutral-000" | "group-hover:from-neutral-100" | "group-hover:from-neutral-200" | "group-hover:from-neutral-300" | "group-hover:from-neutral-400" | "group-hover:from-neutral-500" | "group-hover:from-neutral-600" | "group-hover:from-neutral-700" | "group-hover:from-neutral-800" | "group-hover:from-neutral-900" | "group-hover:from-neutral-1000" | "group-hover:from-neutral-1100" | "group-hover:from-neutral-1200" | "group-hover:from-neutral-1300" | "group-hover:from-orange-100" | "group-hover:from-orange-200" | "group-hover:from-orange-300" | "group-hover:from-orange-400" | "group-hover:from-orange-500" | "group-hover:from-orange-600" | "group-hover:from-orange-700" | "group-hover:from-orange-800" | "group-hover:from-orange-900" | "group-hover:from-orange-1000" | "group-hover:from-orange-1100" | "group-hover:from-yellow-100" | "group-hover:from-yellow-200" | "group-hover:from-yellow-300" | "group-hover:from-yellow-400" | "group-hover:from-yellow-500" | "group-hover:from-yellow-600" | "group-hover:from-yellow-700" | "group-hover:from-yellow-800" | "group-hover:from-yellow-900" | "group-hover:from-green-100" | "group-hover:from-green-200" | "group-hover:from-green-300" | "group-hover:from-green-400" | "group-hover:from-green-500" | "group-hover:from-green-600" | "group-hover:from-green-700" | "group-hover:from-green-800" | "group-hover:from-green-900" | "group-hover:from-blue-100" | "group-hover:from-blue-200" | "group-hover:from-blue-300" | "group-hover:from-blue-400" | "group-hover:from-blue-500" | "group-hover:from-blue-600" | "group-hover:from-blue-700" | "group-hover:from-blue-800" | "group-hover:from-blue-900" | "group-hover:from-violet-100" | "group-hover:from-violet-200" | "group-hover:from-violet-300" | "group-hover:from-violet-400" | "group-hover:from-violet-500" | "group-hover:from-violet-600" | "group-hover:from-violet-700" | "group-hover:from-violet-800" | "group-hover:from-violet-900" | "group-hover:from-pink-100" | "group-hover:from-pink-200" | "group-hover:from-pink-300" | "group-hover:from-pink-400" | "group-hover:from-pink-500" | "group-hover:from-pink-600" | "group-hover:from-pink-700" | "group-hover:from-pink-800" | "group-hover:from-pink-900" | "group-hover:from-gui-blue-default-light" | "group-hover:from-gui-blue-hover-light" | "group-hover:from-gui-blue-active-light" | "group-hover:from-gui-blue-default-dark" | "group-hover:from-gui-blue-hover-dark" | "group-hover:from-gui-blue-active-dark" | "group-hover:from-gui-blue-focus" | "group-hover:from-gui-unavailable" | "group-hover:from-gui-success-green" | "group-hover:from-gui-error-red" | "group-hover:from-gui-focus" | "group-hover:from-gui-focus-outline" | "group-hover:from-gui-visited" | "group-hover:from-white" | "group-hover:from-extra-light-grey" | "group-hover:from-light-grey" | "group-hover:from-mid-grey" | "group-hover:from-dark-grey" | "group-hover:from-charcoal-grey" | "group-hover:from-cool-black" | "group-hover:from-active-orange" | "group-hover:from-bright-red" | "group-hover:from-red-orange" | "group-hover:from-electric-cyan" | "group-hover:from-zingy-green" | "group-hover:from-jazzy-pink" | "group-hover:from-gui-default" | "group-hover:from-gui-hover" | "group-hover:from-gui-active" | "group-hover:from-gui-error" | "group-hover:from-gui-success" | "group-hover:from-gui-default-dark" | "group-hover:from-gui-hover-dark" | "group-hover:from-gui-active-dark" | "group-hover:from-transparent" | "group-hover:to-neutral-000" | "group-hover:to-neutral-100" | "group-hover:to-neutral-200" | "group-hover:to-neutral-300" | "group-hover:to-neutral-400" | "group-hover:to-neutral-500" | "group-hover:to-neutral-600" | "group-hover:to-neutral-700" | "group-hover:to-neutral-800" | "group-hover:to-neutral-900" | "group-hover:to-neutral-1000" | "group-hover:to-neutral-1100" | "group-hover:to-neutral-1200" | "group-hover:to-neutral-1300" | "group-hover:to-orange-100" | "group-hover:to-orange-200" | "group-hover:to-orange-300" | "group-hover:to-orange-400" | "group-hover:to-orange-500" | "group-hover:to-orange-600" | "group-hover:to-orange-700" | "group-hover:to-orange-800" | "group-hover:to-orange-900" | "group-hover:to-orange-1000" | "group-hover:to-orange-1100" | "group-hover:to-yellow-100" | "group-hover:to-yellow-200" | "group-hover:to-yellow-300" | "group-hover:to-yellow-400" | "group-hover:to-yellow-500" | "group-hover:to-yellow-600" | "group-hover:to-yellow-700" | "group-hover:to-yellow-800" | "group-hover:to-yellow-900" | "group-hover:to-green-100" | "group-hover:to-green-200" | "group-hover:to-green-300" | "group-hover:to-green-400" | "group-hover:to-green-500" | "group-hover:to-green-600" | "group-hover:to-green-700" | "group-hover:to-green-800" | "group-hover:to-green-900" | "group-hover:to-blue-100" | "group-hover:to-blue-200" | "group-hover:to-blue-300" | "group-hover:to-blue-400" | "group-hover:to-blue-500" | "group-hover:to-blue-600" | "group-hover:to-blue-700" | "group-hover:to-blue-800" | "group-hover:to-blue-900" | "group-hover:to-violet-100" | "group-hover:to-violet-200" | "group-hover:to-violet-300" | "group-hover:to-violet-400" | "group-hover:to-violet-500" | "group-hover:to-violet-600" | "group-hover:to-violet-700" | "group-hover:to-violet-800" | "group-hover:to-violet-900" | "group-hover:to-pink-100" | "group-hover:to-pink-200" | "group-hover:to-pink-300" | "group-hover:to-pink-400" | "group-hover:to-pink-500" | "group-hover:to-pink-600" | "group-hover:to-pink-700" | "group-hover:to-pink-800" | "group-hover:to-pink-900" | "group-hover:to-gui-blue-default-light" | "group-hover:to-gui-blue-hover-light" | "group-hover:to-gui-blue-active-light" | "group-hover:to-gui-blue-default-dark" | "group-hover:to-gui-blue-hover-dark" | "group-hover:to-gui-blue-active-dark" | "group-hover:to-gui-blue-focus" | "group-hover:to-gui-unavailable" | "group-hover:to-gui-success-green" | "group-hover:to-gui-error-red" | "group-hover:to-gui-focus" | "group-hover:to-gui-focus-outline" | "group-hover:to-gui-visited" | "group-hover:to-white" | "group-hover:to-extra-light-grey" | "group-hover:to-light-grey" | "group-hover:to-mid-grey" | "group-hover:to-dark-grey" | "group-hover:to-charcoal-grey" | "group-hover:to-cool-black" | "group-hover:to-active-orange" | "group-hover:to-bright-red" | "group-hover:to-red-orange" | "group-hover:to-electric-cyan" | "group-hover:to-zingy-green" | "group-hover:to-jazzy-pink" | "group-hover:to-gui-default" | "group-hover:to-gui-hover" | "group-hover:to-gui-active" | "group-hover:to-gui-error" | "group-hover:to-gui-success" | "group-hover:to-gui-default-dark" | "group-hover:to-gui-hover-dark" | "group-hover:to-gui-active-dark" | "group-hover:to-transparent" | "group-focus:bg-neutral-000" | "group-focus:bg-neutral-100" | "group-focus:bg-neutral-200" | "group-focus:bg-neutral-300" | "group-focus:bg-neutral-400" | "group-focus:bg-neutral-500" | "group-focus:bg-neutral-600" | "group-focus:bg-neutral-700" | "group-focus:bg-neutral-800" | "group-focus:bg-neutral-900" | "group-focus:bg-neutral-1000" | "group-focus:bg-neutral-1100" | "group-focus:bg-neutral-1200" | "group-focus:bg-neutral-1300" | "group-focus:bg-orange-100" | "group-focus:bg-orange-200" | "group-focus:bg-orange-300" | "group-focus:bg-orange-400" | "group-focus:bg-orange-500" | "group-focus:bg-orange-600" | "group-focus:bg-orange-700" | "group-focus:bg-orange-800" | "group-focus:bg-orange-900" | "group-focus:bg-orange-1000" | "group-focus:bg-orange-1100" | "group-focus:bg-yellow-100" | "group-focus:bg-yellow-200" | "group-focus:bg-yellow-300" | "group-focus:bg-yellow-400" | "group-focus:bg-yellow-500" | "group-focus:bg-yellow-600" | "group-focus:bg-yellow-700" | "group-focus:bg-yellow-800" | "group-focus:bg-yellow-900" | "group-focus:bg-green-100" | "group-focus:bg-green-200" | "group-focus:bg-green-300" | "group-focus:bg-green-400" | "group-focus:bg-green-500" | "group-focus:bg-green-600" | "group-focus:bg-green-700" | "group-focus:bg-green-800" | "group-focus:bg-green-900" | "group-focus:bg-blue-100" | "group-focus:bg-blue-200" | "group-focus:bg-blue-300" | "group-focus:bg-blue-400" | "group-focus:bg-blue-500" | "group-focus:bg-blue-600" | "group-focus:bg-blue-700" | "group-focus:bg-blue-800" | "group-focus:bg-blue-900" | "group-focus:bg-violet-100" | "group-focus:bg-violet-200" | "group-focus:bg-violet-300" | "group-focus:bg-violet-400" | "group-focus:bg-violet-500" | "group-focus:bg-violet-600" | "group-focus:bg-violet-700" | "group-focus:bg-violet-800" | "group-focus:bg-violet-900" | "group-focus:bg-pink-100" | "group-focus:bg-pink-200" | "group-focus:bg-pink-300" | "group-focus:bg-pink-400" | "group-focus:bg-pink-500" | "group-focus:bg-pink-600" | "group-focus:bg-pink-700" | "group-focus:bg-pink-800" | "group-focus:bg-pink-900" | "group-focus:bg-gui-blue-default-light" | "group-focus:bg-gui-blue-hover-light" | "group-focus:bg-gui-blue-active-light" | "group-focus:bg-gui-blue-default-dark" | "group-focus:bg-gui-blue-hover-dark" | "group-focus:bg-gui-blue-active-dark" | "group-focus:bg-gui-blue-focus" | "group-focus:bg-gui-unavailable" | "group-focus:bg-gui-success-green" | "group-focus:bg-gui-error-red" | "group-focus:bg-gui-focus" | "group-focus:bg-gui-focus-outline" | "group-focus:bg-gui-visited" | "group-focus:bg-white" | "group-focus:bg-extra-light-grey" | "group-focus:bg-light-grey" | "group-focus:bg-mid-grey" | "group-focus:bg-dark-grey" | "group-focus:bg-charcoal-grey" | "group-focus:bg-cool-black" | "group-focus:bg-active-orange" | "group-focus:bg-bright-red" | "group-focus:bg-red-orange" | "group-focus:bg-electric-cyan" | "group-focus:bg-zingy-green" | "group-focus:bg-jazzy-pink" | "group-focus:bg-gui-default" | "group-focus:bg-gui-hover" | "group-focus:bg-gui-active" | "group-focus:bg-gui-error" | "group-focus:bg-gui-success" | "group-focus:bg-gui-default-dark" | "group-focus:bg-gui-hover-dark" | "group-focus:bg-gui-active-dark" | "group-focus:bg-transparent" | "group-focus:text-neutral-000" | "group-focus:text-neutral-100" | "group-focus:text-neutral-200" | "group-focus:text-neutral-300" | "group-focus:text-neutral-400" | "group-focus:text-neutral-500" | "group-focus:text-neutral-600" | "group-focus:text-neutral-700" | "group-focus:text-neutral-800" | "group-focus:text-neutral-900" | "group-focus:text-neutral-1000" | "group-focus:text-neutral-1100" | "group-focus:text-neutral-1200" | "group-focus:text-neutral-1300" | "group-focus:text-orange-100" | "group-focus:text-orange-200" | "group-focus:text-orange-300" | "group-focus:text-orange-400" | "group-focus:text-orange-500" | "group-focus:text-orange-600" | "group-focus:text-orange-700" | "group-focus:text-orange-800" | "group-focus:text-orange-900" | "group-focus:text-orange-1000" | "group-focus:text-orange-1100" | "group-focus:text-yellow-100" | "group-focus:text-yellow-200" | "group-focus:text-yellow-300" | "group-focus:text-yellow-400" | "group-focus:text-yellow-500" | "group-focus:text-yellow-600" | "group-focus:text-yellow-700" | "group-focus:text-yellow-800" | "group-focus:text-yellow-900" | "group-focus:text-green-100" | "group-focus:text-green-200" | "group-focus:text-green-300" | "group-focus:text-green-400" | "group-focus:text-green-500" | "group-focus:text-green-600" | "group-focus:text-green-700" | "group-focus:text-green-800" | "group-focus:text-green-900" | "group-focus:text-blue-100" | "group-focus:text-blue-200" | "group-focus:text-blue-300" | "group-focus:text-blue-400" | "group-focus:text-blue-500" | "group-focus:text-blue-600" | "group-focus:text-blue-700" | "group-focus:text-blue-800" | "group-focus:text-blue-900" | "group-focus:text-violet-100" | "group-focus:text-violet-200" | "group-focus:text-violet-300" | "group-focus:text-violet-400" | "group-focus:text-violet-500" | "group-focus:text-violet-600" | "group-focus:text-violet-700" | "group-focus:text-violet-800" | "group-focus:text-violet-900" | "group-focus:text-pink-100" | "group-focus:text-pink-200" | "group-focus:text-pink-300" | "group-focus:text-pink-400" | "group-focus:text-pink-500" | "group-focus:text-pink-600" | "group-focus:text-pink-700" | "group-focus:text-pink-800" | "group-focus:text-pink-900" | "group-focus:text-gui-blue-default-light" | "group-focus:text-gui-blue-hover-light" | "group-focus:text-gui-blue-active-light" | "group-focus:text-gui-blue-default-dark" | "group-focus:text-gui-blue-hover-dark" | "group-focus:text-gui-blue-active-dark" | "group-focus:text-gui-blue-focus" | "group-focus:text-gui-unavailable" | "group-focus:text-gui-success-green" | "group-focus:text-gui-error-red" | "group-focus:text-gui-focus" | "group-focus:text-gui-focus-outline" | "group-focus:text-gui-visited" | "group-focus:text-white" | "group-focus:text-extra-light-grey" | "group-focus:text-light-grey" | "group-focus:text-mid-grey" | "group-focus:text-dark-grey" | "group-focus:text-charcoal-grey" | "group-focus:text-cool-black" | "group-focus:text-active-orange" | "group-focus:text-bright-red" | "group-focus:text-red-orange" | "group-focus:text-electric-cyan" | "group-focus:text-zingy-green" | "group-focus:text-jazzy-pink" | "group-focus:text-gui-default" | "group-focus:text-gui-hover" | "group-focus:text-gui-active" | "group-focus:text-gui-error" | "group-focus:text-gui-success" | "group-focus:text-gui-default-dark" | "group-focus:text-gui-hover-dark" | "group-focus:text-gui-active-dark" | "group-focus:text-transparent" | "group-focus:from-neutral-000" | "group-focus:from-neutral-100" | "group-focus:from-neutral-200" | "group-focus:from-neutral-300" | "group-focus:from-neutral-400" | "group-focus:from-neutral-500" | "group-focus:from-neutral-600" | "group-focus:from-neutral-700" | "group-focus:from-neutral-800" | "group-focus:from-neutral-900" | "group-focus:from-neutral-1000" | "group-focus:from-neutral-1100" | "group-focus:from-neutral-1200" | "group-focus:from-neutral-1300" | "group-focus:from-orange-100" | "group-focus:from-orange-200" | "group-focus:from-orange-300" | "group-focus:from-orange-400" | "group-focus:from-orange-500" | "group-focus:from-orange-600" | "group-focus:from-orange-700" | "group-focus:from-orange-800" | "group-focus:from-orange-900" | "group-focus:from-orange-1000" | "group-focus:from-orange-1100" | "group-focus:from-yellow-100" | "group-focus:from-yellow-200" | "group-focus:from-yellow-300" | "group-focus:from-yellow-400" | "group-focus:from-yellow-500" | "group-focus:from-yellow-600" | "group-focus:from-yellow-700" | "group-focus:from-yellow-800" | "group-focus:from-yellow-900" | "group-focus:from-green-100" | "group-focus:from-green-200" | "group-focus:from-green-300" | "group-focus:from-green-400" | "group-focus:from-green-500" | "group-focus:from-green-600" | "group-focus:from-green-700" | "group-focus:from-green-800" | "group-focus:from-green-900" | "group-focus:from-blue-100" | "group-focus:from-blue-200" | "group-focus:from-blue-300" | "group-focus:from-blue-400" | "group-focus:from-blue-500" | "group-focus:from-blue-600" | "group-focus:from-blue-700" | "group-focus:from-blue-800" | "group-focus:from-blue-900" | "group-focus:from-violet-100" | "group-focus:from-violet-200" | "group-focus:from-violet-300" | "group-focus:from-violet-400" | "group-focus:from-violet-500" | "group-focus:from-violet-600" | "group-focus:from-violet-700" | "group-focus:from-violet-800" | "group-focus:from-violet-900" | "group-focus:from-pink-100" | "group-focus:from-pink-200" | "group-focus:from-pink-300" | "group-focus:from-pink-400" | "group-focus:from-pink-500" | "group-focus:from-pink-600" | "group-focus:from-pink-700" | "group-focus:from-pink-800" | "group-focus:from-pink-900" | "group-focus:from-gui-blue-default-light" | "group-focus:from-gui-blue-hover-light" | "group-focus:from-gui-blue-active-light" | "group-focus:from-gui-blue-default-dark" | "group-focus:from-gui-blue-hover-dark" | "group-focus:from-gui-blue-active-dark" | "group-focus:from-gui-blue-focus" | "group-focus:from-gui-unavailable" | "group-focus:from-gui-success-green" | "group-focus:from-gui-error-red" | "group-focus:from-gui-focus" | "group-focus:from-gui-focus-outline" | "group-focus:from-gui-visited" | "group-focus:from-white" | "group-focus:from-extra-light-grey" | "group-focus:from-light-grey" | "group-focus:from-mid-grey" | "group-focus:from-dark-grey" | "group-focus:from-charcoal-grey" | "group-focus:from-cool-black" | "group-focus:from-active-orange" | "group-focus:from-bright-red" | "group-focus:from-red-orange" | "group-focus:from-electric-cyan" | "group-focus:from-zingy-green" | "group-focus:from-jazzy-pink" | "group-focus:from-gui-default" | "group-focus:from-gui-hover" | "group-focus:from-gui-active" | "group-focus:from-gui-error" | "group-focus:from-gui-success" | "group-focus:from-gui-default-dark" | "group-focus:from-gui-hover-dark" | "group-focus:from-gui-active-dark" | "group-focus:from-transparent" | "group-focus:to-neutral-000" | "group-focus:to-neutral-100" | "group-focus:to-neutral-200" | "group-focus:to-neutral-300" | "group-focus:to-neutral-400" | "group-focus:to-neutral-500" | "group-focus:to-neutral-600" | "group-focus:to-neutral-700" | "group-focus:to-neutral-800" | "group-focus:to-neutral-900" | "group-focus:to-neutral-1000" | "group-focus:to-neutral-1100" | "group-focus:to-neutral-1200" | "group-focus:to-neutral-1300" | "group-focus:to-orange-100" | "group-focus:to-orange-200" | "group-focus:to-orange-300" | "group-focus:to-orange-400" | "group-focus:to-orange-500" | "group-focus:to-orange-600" | "group-focus:to-orange-700" | "group-focus:to-orange-800" | "group-focus:to-orange-900" | "group-focus:to-orange-1000" | "group-focus:to-orange-1100" | "group-focus:to-yellow-100" | "group-focus:to-yellow-200" | "group-focus:to-yellow-300" | "group-focus:to-yellow-400" | "group-focus:to-yellow-500" | "group-focus:to-yellow-600" | "group-focus:to-yellow-700" | "group-focus:to-yellow-800" | "group-focus:to-yellow-900" | "group-focus:to-green-100" | "group-focus:to-green-200" | "group-focus:to-green-300" | "group-focus:to-green-400" | "group-focus:to-green-500" | "group-focus:to-green-600" | "group-focus:to-green-700" | "group-focus:to-green-800" | "group-focus:to-green-900" | "group-focus:to-blue-100" | "group-focus:to-blue-200" | "group-focus:to-blue-300" | "group-focus:to-blue-400" | "group-focus:to-blue-500" | "group-focus:to-blue-600" | "group-focus:to-blue-700" | "group-focus:to-blue-800" | "group-focus:to-blue-900" | "group-focus:to-violet-100" | "group-focus:to-violet-200" | "group-focus:to-violet-300" | "group-focus:to-violet-400" | "group-focus:to-violet-500" | "group-focus:to-violet-600" | "group-focus:to-violet-700" | "group-focus:to-violet-800" | "group-focus:to-violet-900" | "group-focus:to-pink-100" | "group-focus:to-pink-200" | "group-focus:to-pink-300" | "group-focus:to-pink-400" | "group-focus:to-pink-500" | "group-focus:to-pink-600" | "group-focus:to-pink-700" | "group-focus:to-pink-800" | "group-focus:to-pink-900" | "group-focus:to-gui-blue-default-light" | "group-focus:to-gui-blue-hover-light" | "group-focus:to-gui-blue-active-light" | "group-focus:to-gui-blue-default-dark" | "group-focus:to-gui-blue-hover-dark" | "group-focus:to-gui-blue-active-dark" | "group-focus:to-gui-blue-focus" | "group-focus:to-gui-unavailable" | "group-focus:to-gui-success-green" | "group-focus:to-gui-error-red" | "group-focus:to-gui-focus" | "group-focus:to-gui-focus-outline" | "group-focus:to-gui-visited" | "group-focus:to-white" | "group-focus:to-extra-light-grey" | "group-focus:to-light-grey" | "group-focus:to-mid-grey" | "group-focus:to-dark-grey" | "group-focus:to-charcoal-grey" | "group-focus:to-cool-black" | "group-focus:to-active-orange" | "group-focus:to-bright-red" | "group-focus:to-red-orange" | "group-focus:to-electric-cyan" | "group-focus:to-zingy-green" | "group-focus:to-jazzy-pink" | "group-focus:to-gui-default" | "group-focus:to-gui-hover" | "group-focus:to-gui-active" | "group-focus:to-gui-error" | "group-focus:to-gui-success" | "group-focus:to-gui-default-dark" | "group-focus:to-gui-hover-dark" | "group-focus:to-gui-active-dark" | "group-focus:to-transparent";
 //# sourceMappingURL=secondary-colors.d.ts.map
 }
 
@@ -654,6 +654,62 @@ export default Notice;
 //# sourceMappingURL=Notice.d.ts.map
 }
 
+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";
+export type PricingCardsProps = {
+    data: PricingDataFeature[];
+    theme?: Theme;
+    delimiter?: IconName;
+};
+const PricingCards: ({ data, theme, delimiter, }: PricingCardsProps) => import("react/jsx-runtime").JSX.Element;
+export default PricingCards;
+//# sourceMappingURL=PricingCards.d.ts.map
+}
+
+declare module '@ably/ui/core/Pricing/data' {
+import { PricingDataFeature } from "@ably/ui/core/types";
+export const planData: PricingDataFeature[];
+export const consumptionData: PricingDataFeature[];
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Pricing/types' {
+import { ReactNode } from "react";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
+type PricingDataHeader = {
+    content: string;
+    className?: string;
+    color?: ColorClass;
+};
+type PricingDataFeatureCta = {
+    text: string;
+    url: string;
+    className?: string;
+};
+export type PricingDataFeature = {
+    title: PricingDataHeader;
+    description: PricingDataHeader;
+    price: {
+        amount: number | string;
+        content?: ReactNode;
+    };
+    cta?: PricingDataFeatureCta;
+    sections: {
+        title: string;
+        items: string[] | string[][];
+        listItemColors?: {
+            foreground: ColorClass;
+            background: ColorClass;
+        };
+        cta?: PricingDataFeatureCta;
+    }[];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map
+}
+
 declare module '@ably/ui/core/ProductTile/data' {
 import { IconName } from ".@ably/ui/core/Icon/types";
 export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
@@ -858,8 +914,10 @@ export function selectSessionData(store: any): any;
 
 declare module '@ably/ui/core/styles/colors/types' {
 export type ColorName = (typeof neutralColors)[number] | (typeof orangeColors)[number] | (typeof secondaryColors)[number] | (typeof guiColors)[number] | (typeof aliasedColors)[number];
-type ColorClassPrefixes = "bg" | "text";
-export type ColorClass = `${ColorClassPrefixes}-${ColorName}`;
+type ColorClassVariants = "" | "hover:" | "focus:" | "group-hover:" | "group-focus:";
+type ColorClassPrefixes = "bg" | "text" | "from" | "to";
+export type Theme = "light" | "dark";
+export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
 const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
 const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
 const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
@@ -875,6 +933,13 @@ export {};
 //# sourceMappingURL=types.d.ts.map
 }
 
+declare module '@ably/ui/core/styles/colors/utils' {
+import { ColorClass, Theme } from "@ably/ui/core/types";
+export const convertTailwindClassToVar: (className: string) => string;
+export const determineThemeColor: (baseTheme: Theme, currentTheme: Theme, color: ColorClass) => "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent" | "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" | "hover:bg-neutral-000" | "hover:bg-neutral-100" | "hover:bg-neutral-200" | "hover:bg-neutral-300" | "hover:bg-neutral-400" | "hover:bg-neutral-500" | "hover:bg-neutral-600" | "hover:bg-neutral-700" | "hover:bg-neutral-800" | "hover:bg-neutral-900" | "hover:bg-neutral-1000" | "hover:bg-neutral-1100" | "hover:bg-neutral-1200" | "hover:bg-neutral-1300" | "hover:bg-orange-100" | "hover:bg-orange-200" | "hover:bg-orange-300" | "hover:bg-orange-400" | "hover:bg-orange-500" | "hover:bg-orange-600" | "hover:bg-orange-700" | "hover:bg-orange-800" | "hover:bg-orange-900" | "hover:bg-orange-1000" | "hover:bg-orange-1100" | "hover:bg-yellow-100" | "hover:bg-yellow-200" | "hover:bg-yellow-300" | "hover:bg-yellow-400" | "hover:bg-yellow-500" | "hover:bg-yellow-600" | "hover:bg-yellow-700" | "hover:bg-yellow-800" | "hover:bg-yellow-900" | "hover:bg-green-100" | "hover:bg-green-200" | "hover:bg-green-300" | "hover:bg-green-400" | "hover:bg-green-500" | "hover:bg-green-600" | "hover:bg-green-700" | "hover:bg-green-800" | "hover:bg-green-900" | "hover:bg-blue-100" | "hover:bg-blue-200" | "hover:bg-blue-300" | "hover:bg-blue-400" | "hover:bg-blue-500" | "hover:bg-blue-600" | "hover:bg-blue-700" | "hover:bg-blue-800" | "hover:bg-blue-900" | "hover:bg-violet-100" | "hover:bg-violet-200" | "hover:bg-violet-300" | "hover:bg-violet-400" | "hover:bg-violet-500" | "hover:bg-violet-600" | "hover:bg-violet-700" | "hover:bg-violet-800" | "hover:bg-violet-900" | "hover:bg-pink-100" | "hover:bg-pink-200" | "hover:bg-pink-300" | "hover:bg-pink-400" | "hover:bg-pink-500" | "hover:bg-pink-600" | "hover:bg-pink-700" | "hover:bg-pink-800" | "hover:bg-pink-900" | "hover:bg-gui-blue-default-light" | "hover:bg-gui-blue-hover-light" | "hover:bg-gui-blue-active-light" | "hover:bg-gui-blue-default-dark" | "hover:bg-gui-blue-hover-dark" | "hover:bg-gui-blue-active-dark" | "hover:bg-gui-blue-focus" | "hover:bg-gui-unavailable" | "hover:bg-gui-success-green" | "hover:bg-gui-error-red" | "hover:bg-gui-focus" | "hover:bg-gui-focus-outline" | "hover:bg-gui-visited" | "hover:bg-white" | "hover:bg-extra-light-grey" | "hover:bg-light-grey" | "hover:bg-mid-grey" | "hover:bg-dark-grey" | "hover:bg-charcoal-grey" | "hover:bg-cool-black" | "hover:bg-active-orange" | "hover:bg-bright-red" | "hover:bg-red-orange" | "hover:bg-electric-cyan" | "hover:bg-zingy-green" | "hover:bg-jazzy-pink" | "hover:bg-gui-default" | "hover:bg-gui-hover" | "hover:bg-gui-active" | "hover:bg-gui-error" | "hover:bg-gui-success" | "hover:bg-gui-default-dark" | "hover:bg-gui-hover-dark" | "hover:bg-gui-active-dark" | "hover:bg-transparent" | "hover:text-neutral-000" | "hover:text-neutral-100" | "hover:text-neutral-200" | "hover:text-neutral-300" | "hover:text-neutral-400" | "hover:text-neutral-500" | "hover:text-neutral-600" | "hover:text-neutral-700" | "hover:text-neutral-800" | "hover:text-neutral-900" | "hover:text-neutral-1000" | "hover:text-neutral-1100" | "hover:text-neutral-1200" | "hover:text-neutral-1300" | "hover:text-orange-100" | "hover:text-orange-200" | "hover:text-orange-300" | "hover:text-orange-400" | "hover:text-orange-500" | "hover:text-orange-600" | "hover:text-orange-700" | "hover:text-orange-800" | "hover:text-orange-900" | "hover:text-orange-1000" | "hover:text-orange-1100" | "hover:text-yellow-100" | "hover:text-yellow-200" | "hover:text-yellow-300" | "hover:text-yellow-400" | "hover:text-yellow-500" | "hover:text-yellow-600" | "hover:text-yellow-700" | "hover:text-yellow-800" | "hover:text-yellow-900" | "hover:text-green-100" | "hover:text-green-200" | "hover:text-green-300" | "hover:text-green-400" | "hover:text-green-500" | "hover:text-green-600" | "hover:text-green-700" | "hover:text-green-800" | "hover:text-green-900" | "hover:text-blue-100" | "hover:text-blue-200" | "hover:text-blue-300" | "hover:text-blue-400" | "hover:text-blue-500" | "hover:text-blue-600" | "hover:text-blue-700" | "hover:text-blue-800" | "hover:text-blue-900" | "hover:text-violet-100" | "hover:text-violet-200" | "hover:text-violet-300" | "hover:text-violet-400" | "hover:text-violet-500" | "hover:text-violet-600" | "hover:text-violet-700" | "hover:text-violet-800" | "hover:text-violet-900" | "hover:text-pink-100" | "hover:text-pink-200" | "hover:text-pink-300" | "hover:text-pink-400" | "hover:text-pink-500" | "hover:text-pink-600" | "hover:text-pink-700" | "hover:text-pink-800" | "hover:text-pink-900" | "hover:text-gui-blue-default-light" | "hover:text-gui-blue-hover-light" | "hover:text-gui-blue-active-light" | "hover:text-gui-blue-default-dark" | "hover:text-gui-blue-hover-dark" | "hover:text-gui-blue-active-dark" | "hover:text-gui-blue-focus" | "hover:text-gui-unavailable" | "hover:text-gui-success-green" | "hover:text-gui-error-red" | "hover:text-gui-focus" | "hover:text-gui-focus-outline" | "hover:text-gui-visited" | "hover:text-white" | "hover:text-extra-light-grey" | "hover:text-light-grey" | "hover:text-mid-grey" | "hover:text-dark-grey" | "hover:text-charcoal-grey" | "hover:text-cool-black" | "hover:text-active-orange" | "hover:text-bright-red" | "hover:text-red-orange" | "hover:text-electric-cyan" | "hover:text-zingy-green" | "hover:text-jazzy-pink" | "hover:text-gui-default" | "hover:text-gui-hover" | "hover:text-gui-active" | "hover:text-gui-error" | "hover:text-gui-success" | "hover:text-gui-default-dark" | "hover:text-gui-hover-dark" | "hover:text-gui-active-dark" | "hover:text-transparent" | "hover:from-neutral-000" | "hover:from-neutral-100" | "hover:from-neutral-200" | "hover:from-neutral-300" | "hover:from-neutral-400" | "hover:from-neutral-500" | "hover:from-neutral-600" | "hover:from-neutral-700" | "hover:from-neutral-800" | "hover:from-neutral-900" | "hover:from-neutral-1000" | "hover:from-neutral-1100" | "hover:from-neutral-1200" | "hover:from-neutral-1300" | "hover:from-orange-100" | "hover:from-orange-200" | "hover:from-orange-300" | "hover:from-orange-400" | "hover:from-orange-500" | "hover:from-orange-600" | "hover:from-orange-700" | "hover:from-orange-800" | "hover:from-orange-900" | "hover:from-orange-1000" | "hover:from-orange-1100" | "hover:from-yellow-100" | "hover:from-yellow-200" | "hover:from-yellow-300" | "hover:from-yellow-400" | "hover:from-yellow-500" | "hover:from-yellow-600" | "hover:from-yellow-700" | "hover:from-yellow-800" | "hover:from-yellow-900" | "hover:from-green-100" | "hover:from-green-200" | "hover:from-green-300" | "hover:from-green-400" | "hover:from-green-500" | "hover:from-green-600" | "hover:from-green-700" | "hover:from-green-800" | "hover:from-green-900" | "hover:from-blue-100" | "hover:from-blue-200" | "hover:from-blue-300" | "hover:from-blue-400" | "hover:from-blue-500" | "hover:from-blue-600" | "hover:from-blue-700" | "hover:from-blue-800" | "hover:from-blue-900" | "hover:from-violet-100" | "hover:from-violet-200" | "hover:from-violet-300" | "hover:from-violet-400" | "hover:from-violet-500" | "hover:from-violet-600" | "hover:from-violet-700" | "hover:from-violet-800" | "hover:from-violet-900" | "hover:from-pink-100" | "hover:from-pink-200" | "hover:from-pink-300" | "hover:from-pink-400" | "hover:from-pink-500" | "hover:from-pink-600" | "hover:from-pink-700" | "hover:from-pink-800" | "hover:from-pink-900" | "hover:from-gui-blue-default-light" | "hover:from-gui-blue-hover-light" | "hover:from-gui-blue-active-light" | "hover:from-gui-blue-default-dark" | "hover:from-gui-blue-hover-dark" | "hover:from-gui-blue-active-dark" | "hover:from-gui-blue-focus" | "hover:from-gui-unavailable" | "hover:from-gui-success-green" | "hover:from-gui-error-red" | "hover:from-gui-focus" | "hover:from-gui-focus-outline" | "hover:from-gui-visited" | "hover:from-white" | "hover:from-extra-light-grey" | "hover:from-light-grey" | "hover:from-mid-grey" | "hover:from-dark-grey" | "hover:from-charcoal-grey" | "hover:from-cool-black" | "hover:from-active-orange" | "hover:from-bright-red" | "hover:from-red-orange" | "hover:from-electric-cyan" | "hover:from-zingy-green" | "hover:from-jazzy-pink" | "hover:from-gui-default" | "hover:from-gui-hover" | "hover:from-gui-active" | "hover:from-gui-error" | "hover:from-gui-success" | "hover:from-gui-default-dark" | "hover:from-gui-hover-dark" | "hover:from-gui-active-dark" | "hover:from-transparent" | "hover:to-neutral-000" | "hover:to-neutral-100" | "hover:to-neutral-200" | "hover:to-neutral-300" | "hover:to-neutral-400" | "hover:to-neutral-500" | "hover:to-neutral-600" | "hover:to-neutral-700" | "hover:to-neutral-800" | "hover:to-neutral-900" | "hover:to-neutral-1000" | "hover:to-neutral-1100" | "hover:to-neutral-1200" | "hover:to-neutral-1300" | "hover:to-orange-100" | "hover:to-orange-200" | "hover:to-orange-300" | "hover:to-orange-400" | "hover:to-orange-500" | "hover:to-orange-600" | "hover:to-orange-700" | "hover:to-orange-800" | "hover:to-orange-900" | "hover:to-orange-1000" | "hover:to-orange-1100" | "hover:to-yellow-100" | "hover:to-yellow-200" | "hover:to-yellow-300" | "hover:to-yellow-400" | "hover:to-yellow-500" | "hover:to-yellow-600" | "hover:to-yellow-700" | "hover:to-yellow-800" | "hover:to-yellow-900" | "hover:to-green-100" | "hover:to-green-200" | "hover:to-green-300" | "hover:to-green-400" | "hover:to-green-500" | "hover:to-green-600" | "hover:to-green-700" | "hover:to-green-800" | "hover:to-green-900" | "hover:to-blue-100" | "hover:to-blue-200" | "hover:to-blue-300" | "hover:to-blue-400" | "hover:to-blue-500" | "hover:to-blue-600" | "hover:to-blue-700" | "hover:to-blue-800" | "hover:to-blue-900" | "hover:to-violet-100" | "hover:to-violet-200" | "hover:to-violet-300" | "hover:to-violet-400" | "hover:to-violet-500" | "hover:to-violet-600" | "hover:to-violet-700" | "hover:to-violet-800" | "hover:to-violet-900" | "hover:to-pink-100" | "hover:to-pink-200" | "hover:to-pink-300" | "hover:to-pink-400" | "hover:to-pink-500" | "hover:to-pink-600" | "hover:to-pink-700" | "hover:to-pink-800" | "hover:to-pink-900" | "hover:to-gui-blue-default-light" | "hover:to-gui-blue-hover-light" | "hover:to-gui-blue-active-light" | "hover:to-gui-blue-default-dark" | "hover:to-gui-blue-hover-dark" | "hover:to-gui-blue-active-dark" | "hover:to-gui-blue-focus" | "hover:to-gui-unavailable" | "hover:to-gui-success-green" | "hover:to-gui-error-red" | "hover:to-gui-focus" | "hover:to-gui-focus-outline" | "hover:to-gui-visited" | "hover:to-white" | "hover:to-extra-light-grey" | "hover:to-light-grey" | "hover:to-mid-grey" | "hover:to-dark-grey" | "hover:to-charcoal-grey" | "hover:to-cool-black" | "hover:to-active-orange" | "hover:to-bright-red" | "hover:to-red-orange" | "hover:to-electric-cyan" | "hover:to-zingy-green" | "hover:to-jazzy-pink" | "hover:to-gui-default" | "hover:to-gui-hover" | "hover:to-gui-active" | "hover:to-gui-error" | "hover:to-gui-success" | "hover:to-gui-default-dark" | "hover:to-gui-hover-dark" | "hover:to-gui-active-dark" | "hover:to-transparent" | "focus:bg-neutral-000" | "focus:bg-neutral-100" | "focus:bg-neutral-200" | "focus:bg-neutral-300" | "focus:bg-neutral-400" | "focus:bg-neutral-500" | "focus:bg-neutral-600" | "focus:bg-neutral-700" | "focus:bg-neutral-800" | "focus:bg-neutral-900" | "focus:bg-neutral-1000" | "focus:bg-neutral-1100" | "focus:bg-neutral-1200" | "focus:bg-neutral-1300" | "focus:bg-orange-100" | "focus:bg-orange-200" | "focus:bg-orange-300" | "focus:bg-orange-400" | "focus:bg-orange-500" | "focus:bg-orange-600" | "focus:bg-orange-700" | "focus:bg-orange-800" | "focus:bg-orange-900" | "focus:bg-orange-1000" | "focus:bg-orange-1100" | "focus:bg-yellow-100" | "focus:bg-yellow-200" | "focus:bg-yellow-300" | "focus:bg-yellow-400" | "focus:bg-yellow-500" | "focus:bg-yellow-600" | "focus:bg-yellow-700" | "focus:bg-yellow-800" | "focus:bg-yellow-900" | "focus:bg-green-100" | "focus:bg-green-200" | "focus:bg-green-300" | "focus:bg-green-400" | "focus:bg-green-500" | "focus:bg-green-600" | "focus:bg-green-700" | "focus:bg-green-800" | "focus:bg-green-900" | "focus:bg-blue-100" | "focus:bg-blue-200" | "focus:bg-blue-300" | "focus:bg-blue-400" | "focus:bg-blue-500" | "focus:bg-blue-600" | "focus:bg-blue-700" | "focus:bg-blue-800" | "focus:bg-blue-900" | "focus:bg-violet-100" | "focus:bg-violet-200" | "focus:bg-violet-300" | "focus:bg-violet-400" | "focus:bg-violet-500" | "focus:bg-violet-600" | "focus:bg-violet-700" | "focus:bg-violet-800" | "focus:bg-violet-900" | "focus:bg-pink-100" | "focus:bg-pink-200" | "focus:bg-pink-300" | "focus:bg-pink-400" | "focus:bg-pink-500" | "focus:bg-pink-600" | "focus:bg-pink-700" | "focus:bg-pink-800" | "focus:bg-pink-900" | "focus:bg-gui-blue-default-light" | "focus:bg-gui-blue-hover-light" | "focus:bg-gui-blue-active-light" | "focus:bg-gui-blue-default-dark" | "focus:bg-gui-blue-hover-dark" | "focus:bg-gui-blue-active-dark" | "focus:bg-gui-blue-focus" | "focus:bg-gui-unavailable" | "focus:bg-gui-success-green" | "focus:bg-gui-error-red" | "focus:bg-gui-focus" | "focus:bg-gui-focus-outline" | "focus:bg-gui-visited" | "focus:bg-white" | "focus:bg-extra-light-grey" | "focus:bg-light-grey" | "focus:bg-mid-grey" | "focus:bg-dark-grey" | "focus:bg-charcoal-grey" | "focus:bg-cool-black" | "focus:bg-active-orange" | "focus:bg-bright-red" | "focus:bg-red-orange" | "focus:bg-electric-cyan" | "focus:bg-zingy-green" | "focus:bg-jazzy-pink" | "focus:bg-gui-default" | "focus:bg-gui-hover" | "focus:bg-gui-active" | "focus:bg-gui-error" | "focus:bg-gui-success" | "focus:bg-gui-default-dark" | "focus:bg-gui-hover-dark" | "focus:bg-gui-active-dark" | "focus:bg-transparent" | "focus:text-neutral-000" | "focus:text-neutral-100" | "focus:text-neutral-200" | "focus:text-neutral-300" | "focus:text-neutral-400" | "focus:text-neutral-500" | "focus:text-neutral-600" | "focus:text-neutral-700" | "focus:text-neutral-800" | "focus:text-neutral-900" | "focus:text-neutral-1000" | "focus:text-neutral-1100" | "focus:text-neutral-1200" | "focus:text-neutral-1300" | "focus:text-orange-100" | "focus:text-orange-200" | "focus:text-orange-300" | "focus:text-orange-400" | "focus:text-orange-500" | "focus:text-orange-600" | "focus:text-orange-700" | "focus:text-orange-800" | "focus:text-orange-900" | "focus:text-orange-1000" | "focus:text-orange-1100" | "focus:text-yellow-100" | "focus:text-yellow-200" | "focus:text-yellow-300" | "focus:text-yellow-400" | "focus:text-yellow-500" | "focus:text-yellow-600" | "focus:text-yellow-700" | "focus:text-yellow-800" | "focus:text-yellow-900" | "focus:text-green-100" | "focus:text-green-200" | "focus:text-green-300" | "focus:text-green-400" | "focus:text-green-500" | "focus:text-green-600" | "focus:text-green-700" | "focus:text-green-800" | "focus:text-green-900" | "focus:text-blue-100" | "focus:text-blue-200" | "focus:text-blue-300" | "focus:text-blue-400" | "focus:text-blue-500" | "focus:text-blue-600" | "focus:text-blue-700" | "focus:text-blue-800" | "focus:text-blue-900" | "focus:text-violet-100" | "focus:text-violet-200" | "focus:text-violet-300" | "focus:text-violet-400" | "focus:text-violet-500" | "focus:text-violet-600" | "focus:text-violet-700" | "focus:text-violet-800" | "focus:text-violet-900" | "focus:text-pink-100" | "focus:text-pink-200" | "focus:text-pink-300" | "focus:text-pink-400" | "focus:text-pink-500" | "focus:text-pink-600" | "focus:text-pink-700" | "focus:text-pink-800" | "focus:text-pink-900" | "focus:text-gui-blue-default-light" | "focus:text-gui-blue-hover-light" | "focus:text-gui-blue-active-light" | "focus:text-gui-blue-default-dark" | "focus:text-gui-blue-hover-dark" | "focus:text-gui-blue-active-dark" | "focus:text-gui-blue-focus" | "focus:text-gui-unavailable" | "focus:text-gui-success-green" | "focus:text-gui-error-red" | "focus:text-gui-focus" | "focus:text-gui-focus-outline" | "focus:text-gui-visited" | "focus:text-white" | "focus:text-extra-light-grey" | "focus:text-light-grey" | "focus:text-mid-grey" | "focus:text-dark-grey" | "focus:text-charcoal-grey" | "focus:text-cool-black" | "focus:text-active-orange" | "focus:text-bright-red" | "focus:text-red-orange" | "focus:text-electric-cyan" | "focus:text-zingy-green" | "focus:text-jazzy-pink" | "focus:text-gui-default" | "focus:text-gui-hover" | "focus:text-gui-active" | "focus:text-gui-error" | "focus:text-gui-success" | "focus:text-gui-default-dark" | "focus:text-gui-hover-dark" | "focus:text-gui-active-dark" | "focus:text-transparent" | "focus:from-neutral-000" | "focus:from-neutral-100" | "focus:from-neutral-200" | "focus:from-neutral-300" | "focus:from-neutral-400" | "focus:from-neutral-500" | "focus:from-neutral-600" | "focus:from-neutral-700" | "focus:from-neutral-800" | "focus:from-neutral-900" | "focus:from-neutral-1000" | "focus:from-neutral-1100" | "focus:from-neutral-1200" | "focus:from-neutral-1300" | "focus:from-orange-100" | "focus:from-orange-200" | "focus:from-orange-300" | "focus:from-orange-400" | "focus:from-orange-500" | "focus:from-orange-600" | "focus:from-orange-700" | "focus:from-orange-800" | "focus:from-orange-900" | "focus:from-orange-1000" | "focus:from-orange-1100" | "focus:from-yellow-100" | "focus:from-yellow-200" | "focus:from-yellow-300" | "focus:from-yellow-400" | "focus:from-yellow-500" | "focus:from-yellow-600" | "focus:from-yellow-700" | "focus:from-yellow-800" | "focus:from-yellow-900" | "focus:from-green-100" | "focus:from-green-200" | "focus:from-green-300" | "focus:from-green-400" | "focus:from-green-500" | "focus:from-green-600" | "focus:from-green-700" | "focus:from-green-800" | "focus:from-green-900" | "focus:from-blue-100" | "focus:from-blue-200" | "focus:from-blue-300" | "focus:from-blue-400" | "focus:from-blue-500" | "focus:from-blue-600" | "focus:from-blue-700" | "focus:from-blue-800" | "focus:from-blue-900" | "focus:from-violet-100" | "focus:from-violet-200" | "focus:from-violet-300" | "focus:from-violet-400" | "focus:from-violet-500" | "focus:from-violet-600" | "focus:from-violet-700" | "focus:from-violet-800" | "focus:from-violet-900" | "focus:from-pink-100" | "focus:from-pink-200" | "focus:from-pink-300" | "focus:from-pink-400" | "focus:from-pink-500" | "focus:from-pink-600" | "focus:from-pink-700" | "focus:from-pink-800" | "focus:from-pink-900" | "focus:from-gui-blue-default-light" | "focus:from-gui-blue-hover-light" | "focus:from-gui-blue-active-light" | "focus:from-gui-blue-default-dark" | "focus:from-gui-blue-hover-dark" | "focus:from-gui-blue-active-dark" | "focus:from-gui-blue-focus" | "focus:from-gui-unavailable" | "focus:from-gui-success-green" | "focus:from-gui-error-red" | "focus:from-gui-focus" | "focus:from-gui-focus-outline" | "focus:from-gui-visited" | "focus:from-white" | "focus:from-extra-light-grey" | "focus:from-light-grey" | "focus:from-mid-grey" | "focus:from-dark-grey" | "focus:from-charcoal-grey" | "focus:from-cool-black" | "focus:from-active-orange" | "focus:from-bright-red" | "focus:from-red-orange" | "focus:from-electric-cyan" | "focus:from-zingy-green" | "focus:from-jazzy-pink" | "focus:from-gui-default" | "focus:from-gui-hover" | "focus:from-gui-active" | "focus:from-gui-error" | "focus:from-gui-success" | "focus:from-gui-default-dark" | "focus:from-gui-hover-dark" | "focus:from-gui-active-dark" | "focus:from-transparent" | "focus:to-neutral-000" | "focus:to-neutral-100" | "focus:to-neutral-200" | "focus:to-neutral-300" | "focus:to-neutral-400" | "focus:to-neutral-500" | "focus:to-neutral-600" | "focus:to-neutral-700" | "focus:to-neutral-800" | "focus:to-neutral-900" | "focus:to-neutral-1000" | "focus:to-neutral-1100" | "focus:to-neutral-1200" | "focus:to-neutral-1300" | "focus:to-orange-100" | "focus:to-orange-200" | "focus:to-orange-300" | "focus:to-orange-400" | "focus:to-orange-500" | "focus:to-orange-600" | "focus:to-orange-700" | "focus:to-orange-800" | "focus:to-orange-900" | "focus:to-orange-1000" | "focus:to-orange-1100" | "focus:to-yellow-100" | "focus:to-yellow-200" | "focus:to-yellow-300" | "focus:to-yellow-400" | "focus:to-yellow-500" | "focus:to-yellow-600" | "focus:to-yellow-700" | "focus:to-yellow-800" | "focus:to-yellow-900" | "focus:to-green-100" | "focus:to-green-200" | "focus:to-green-300" | "focus:to-green-400" | "focus:to-green-500" | "focus:to-green-600" | "focus:to-green-700" | "focus:to-green-800" | "focus:to-green-900" | "focus:to-blue-100" | "focus:to-blue-200" | "focus:to-blue-300" | "focus:to-blue-400" | "focus:to-blue-500" | "focus:to-blue-600" | "focus:to-blue-700" | "focus:to-blue-800" | "focus:to-blue-900" | "focus:to-violet-100" | "focus:to-violet-200" | "focus:to-violet-300" | "focus:to-violet-400" | "focus:to-violet-500" | "focus:to-violet-600" | "focus:to-violet-700" | "focus:to-violet-800" | "focus:to-violet-900" | "focus:to-pink-100" | "focus:to-pink-200" | "focus:to-pink-300" | "focus:to-pink-400" | "focus:to-pink-500" | "focus:to-pink-600" | "focus:to-pink-700" | "focus:to-pink-800" | "focus:to-pink-900" | "focus:to-gui-blue-default-light" | "focus:to-gui-blue-hover-light" | "focus:to-gui-blue-active-light" | "focus:to-gui-blue-default-dark" | "focus:to-gui-blue-hover-dark" | "focus:to-gui-blue-active-dark" | "focus:to-gui-blue-focus" | "focus:to-gui-unavailable" | "focus:to-gui-success-green" | "focus:to-gui-error-red" | "focus:to-gui-focus" | "focus:to-gui-focus-outline" | "focus:to-gui-visited" | "focus:to-white" | "focus:to-extra-light-grey" | "focus:to-light-grey" | "focus:to-mid-grey" | "focus:to-dark-grey" | "focus:to-charcoal-grey" | "focus:to-cool-black" | "focus:to-active-orange" | "focus:to-bright-red" | "focus:to-red-orange" | "focus:to-electric-cyan" | "focus:to-zingy-green" | "focus:to-jazzy-pink" | "focus:to-gui-default" | "focus:to-gui-hover" | "focus:to-gui-active" | "focus:to-gui-error" | "focus:to-gui-success" | "focus:to-gui-default-dark" | "focus:to-gui-hover-dark" | "focus:to-gui-active-dark" | "focus:to-transparent" | "group-hover:bg-neutral-000" | "group-hover:bg-neutral-100" | "group-hover:bg-neutral-200" | "group-hover:bg-neutral-300" | "group-hover:bg-neutral-400" | "group-hover:bg-neutral-500" | "group-hover:bg-neutral-600" | "group-hover:bg-neutral-700" | "group-hover:bg-neutral-800" | "group-hover:bg-neutral-900" | "group-hover:bg-neutral-1000" | "group-hover:bg-neutral-1100" | "group-hover:bg-neutral-1200" | "group-hover:bg-neutral-1300" | "group-hover:bg-orange-100" | "group-hover:bg-orange-200" | "group-hover:bg-orange-300" | "group-hover:bg-orange-400" | "group-hover:bg-orange-500" | "group-hover:bg-orange-600" | "group-hover:bg-orange-700" | "group-hover:bg-orange-800" | "group-hover:bg-orange-900" | "group-hover:bg-orange-1000" | "group-hover:bg-orange-1100" | "group-hover:bg-yellow-100" | "group-hover:bg-yellow-200" | "group-hover:bg-yellow-300" | "group-hover:bg-yellow-400" | "group-hover:bg-yellow-500" | "group-hover:bg-yellow-600" | "group-hover:bg-yellow-700" | "group-hover:bg-yellow-800" | "group-hover:bg-yellow-900" | "group-hover:bg-green-100" | "group-hover:bg-green-200" | "group-hover:bg-green-300" | "group-hover:bg-green-400" | "group-hover:bg-green-500" | "group-hover:bg-green-600" | "group-hover:bg-green-700" | "group-hover:bg-green-800" | "group-hover:bg-green-900" | "group-hover:bg-blue-100" | "group-hover:bg-blue-200" | "group-hover:bg-blue-300" | "group-hover:bg-blue-400" | "group-hover:bg-blue-500" | "group-hover:bg-blue-600" | "group-hover:bg-blue-700" | "group-hover:bg-blue-800" | "group-hover:bg-blue-900" | "group-hover:bg-violet-100" | "group-hover:bg-violet-200" | "group-hover:bg-violet-300" | "group-hover:bg-violet-400" | "group-hover:bg-violet-500" | "group-hover:bg-violet-600" | "group-hover:bg-violet-700" | "group-hover:bg-violet-800" | "group-hover:bg-violet-900" | "group-hover:bg-pink-100" | "group-hover:bg-pink-200" | "group-hover:bg-pink-300" | "group-hover:bg-pink-400" | "group-hover:bg-pink-500" | "group-hover:bg-pink-600" | "group-hover:bg-pink-700" | "group-hover:bg-pink-800" | "group-hover:bg-pink-900" | "group-hover:bg-gui-blue-default-light" | "group-hover:bg-gui-blue-hover-light" | "group-hover:bg-gui-blue-active-light" | "group-hover:bg-gui-blue-default-dark" | "group-hover:bg-gui-blue-hover-dark" | "group-hover:bg-gui-blue-active-dark" | "group-hover:bg-gui-blue-focus" | "group-hover:bg-gui-unavailable" | "group-hover:bg-gui-success-green" | "group-hover:bg-gui-error-red" | "group-hover:bg-gui-focus" | "group-hover:bg-gui-focus-outline" | "group-hover:bg-gui-visited" | "group-hover:bg-white" | "group-hover:bg-extra-light-grey" | "group-hover:bg-light-grey" | "group-hover:bg-mid-grey" | "group-hover:bg-dark-grey" | "group-hover:bg-charcoal-grey" | "group-hover:bg-cool-black" | "group-hover:bg-active-orange" | "group-hover:bg-bright-red" | "group-hover:bg-red-orange" | "group-hover:bg-electric-cyan" | "group-hover:bg-zingy-green" | "group-hover:bg-jazzy-pink" | "group-hover:bg-gui-default" | "group-hover:bg-gui-hover" | "group-hover:bg-gui-active" | "group-hover:bg-gui-error" | "group-hover:bg-gui-success" | "group-hover:bg-gui-default-dark" | "group-hover:bg-gui-hover-dark" | "group-hover:bg-gui-active-dark" | "group-hover:bg-transparent" | "group-hover:text-neutral-000" | "group-hover:text-neutral-100" | "group-hover:text-neutral-200" | "group-hover:text-neutral-300" | "group-hover:text-neutral-400" | "group-hover:text-neutral-500" | "group-hover:text-neutral-600" | "group-hover:text-neutral-700" | "group-hover:text-neutral-800" | "group-hover:text-neutral-900" | "group-hover:text-neutral-1000" | "group-hover:text-neutral-1100" | "group-hover:text-neutral-1200" | "group-hover:text-neutral-1300" | "group-hover:text-orange-100" | "group-hover:text-orange-200" | "group-hover:text-orange-300" | "group-hover:text-orange-400" | "group-hover:text-orange-500" | "group-hover:text-orange-600" | "group-hover:text-orange-700" | "group-hover:text-orange-800" | "group-hover:text-orange-900" | "group-hover:text-orange-1000" | "group-hover:text-orange-1100" | "group-hover:text-yellow-100" | "group-hover:text-yellow-200" | "group-hover:text-yellow-300" | "group-hover:text-yellow-400" | "group-hover:text-yellow-500" | "group-hover:text-yellow-600" | "group-hover:text-yellow-700" | "group-hover:text-yellow-800" | "group-hover:text-yellow-900" | "group-hover:text-green-100" | "group-hover:text-green-200" | "group-hover:text-green-300" | "group-hover:text-green-400" | "group-hover:text-green-500" | "group-hover:text-green-600" | "group-hover:text-green-700" | "group-hover:text-green-800" | "group-hover:text-green-900" | "group-hover:text-blue-100" | "group-hover:text-blue-200" | "group-hover:text-blue-300" | "group-hover:text-blue-400" | "group-hover:text-blue-500" | "group-hover:text-blue-600" | "group-hover:text-blue-700" | "group-hover:text-blue-800" | "group-hover:text-blue-900" | "group-hover:text-violet-100" | "group-hover:text-violet-200" | "group-hover:text-violet-300" | "group-hover:text-violet-400" | "group-hover:text-violet-500" | "group-hover:text-violet-600" | "group-hover:text-violet-700" | "group-hover:text-violet-800" | "group-hover:text-violet-900" | "group-hover:text-pink-100" | "group-hover:text-pink-200" | "group-hover:text-pink-300" | "group-hover:text-pink-400" | "group-hover:text-pink-500" | "group-hover:text-pink-600" | "group-hover:text-pink-700" | "group-hover:text-pink-800" | "group-hover:text-pink-900" | "group-hover:text-gui-blue-default-light" | "group-hover:text-gui-blue-hover-light" | "group-hover:text-gui-blue-active-light" | "group-hover:text-gui-blue-default-dark" | "group-hover:text-gui-blue-hover-dark" | "group-hover:text-gui-blue-active-dark" | "group-hover:text-gui-blue-focus" | "group-hover:text-gui-unavailable" | "group-hover:text-gui-success-green" | "group-hover:text-gui-error-red" | "group-hover:text-gui-focus" | "group-hover:text-gui-focus-outline" | "group-hover:text-gui-visited" | "group-hover:text-white" | "group-hover:text-extra-light-grey" | "group-hover:text-light-grey" | "group-hover:text-mid-grey" | "group-hover:text-dark-grey" | "group-hover:text-charcoal-grey" | "group-hover:text-cool-black" | "group-hover:text-active-orange" | "group-hover:text-bright-red" | "group-hover:text-red-orange" | "group-hover:text-electric-cyan" | "group-hover:text-zingy-green" | "group-hover:text-jazzy-pink" | "group-hover:text-gui-default" | "group-hover:text-gui-hover" | "group-hover:text-gui-active" | "group-hover:text-gui-error" | "group-hover:text-gui-success" | "group-hover:text-gui-default-dark" | "group-hover:text-gui-hover-dark" | "group-hover:text-gui-active-dark" | "group-hover:text-transparent" | "group-hover:from-neutral-000" | "group-hover:from-neutral-100" | "group-hover:from-neutral-200" | "group-hover:from-neutral-300" | "group-hover:from-neutral-400" | "group-hover:from-neutral-500" | "group-hover:from-neutral-600" | "group-hover:from-neutral-700" | "group-hover:from-neutral-800" | "group-hover:from-neutral-900" | "group-hover:from-neutral-1000" | "group-hover:from-neutral-1100" | "group-hover:from-neutral-1200" | "group-hover:from-neutral-1300" | "group-hover:from-orange-100" | "group-hover:from-orange-200" | "group-hover:from-orange-300" | "group-hover:from-orange-400" | "group-hover:from-orange-500" | "group-hover:from-orange-600" | "group-hover:from-orange-700" | "group-hover:from-orange-800" | "group-hover:from-orange-900" | "group-hover:from-orange-1000" | "group-hover:from-orange-1100" | "group-hover:from-yellow-100" | "group-hover:from-yellow-200" | "group-hover:from-yellow-300" | "group-hover:from-yellow-400" | "group-hover:from-yellow-500" | "group-hover:from-yellow-600" | "group-hover:from-yellow-700" | "group-hover:from-yellow-800" | "group-hover:from-yellow-900" | "group-hover:from-green-100" | "group-hover:from-green-200" | "group-hover:from-green-300" | "group-hover:from-green-400" | "group-hover:from-green-500" | "group-hover:from-green-600" | "group-hover:from-green-700" | "group-hover:from-green-800" | "group-hover:from-green-900" | "group-hover:from-blue-100" | "group-hover:from-blue-200" | "group-hover:from-blue-300" | "group-hover:from-blue-400" | "group-hover:from-blue-500" | "group-hover:from-blue-600" | "group-hover:from-blue-700" | "group-hover:from-blue-800" | "group-hover:from-blue-900" | "group-hover:from-violet-100" | "group-hover:from-violet-200" | "group-hover:from-violet-300" | "group-hover:from-violet-400" | "group-hover:from-violet-500" | "group-hover:from-violet-600" | "group-hover:from-violet-700" | "group-hover:from-violet-800" | "group-hover:from-violet-900" | "group-hover:from-pink-100" | "group-hover:from-pink-200" | "group-hover:from-pink-300" | "group-hover:from-pink-400" | "group-hover:from-pink-500" | "group-hover:from-pink-600" | "group-hover:from-pink-700" | "group-hover:from-pink-800" | "group-hover:from-pink-900" | "group-hover:from-gui-blue-default-light" | "group-hover:from-gui-blue-hover-light" | "group-hover:from-gui-blue-active-light" | "group-hover:from-gui-blue-default-dark" | "group-hover:from-gui-blue-hover-dark" | "group-hover:from-gui-blue-active-dark" | "group-hover:from-gui-blue-focus" | "group-hover:from-gui-unavailable" | "group-hover:from-gui-success-green" | "group-hover:from-gui-error-red" | "group-hover:from-gui-focus" | "group-hover:from-gui-focus-outline" | "group-hover:from-gui-visited" | "group-hover:from-white" | "group-hover:from-extra-light-grey" | "group-hover:from-light-grey" | "group-hover:from-mid-grey" | "group-hover:from-dark-grey" | "group-hover:from-charcoal-grey" | "group-hover:from-cool-black" | "group-hover:from-active-orange" | "group-hover:from-bright-red" | "group-hover:from-red-orange" | "group-hover:from-electric-cyan" | "group-hover:from-zingy-green" | "group-hover:from-jazzy-pink" | "group-hover:from-gui-default" | "group-hover:from-gui-hover" | "group-hover:from-gui-active" | "group-hover:from-gui-error" | "group-hover:from-gui-success" | "group-hover:from-gui-default-dark" | "group-hover:from-gui-hover-dark" | "group-hover:from-gui-active-dark" | "group-hover:from-transparent" | "group-hover:to-neutral-000" | "group-hover:to-neutral-100" | "group-hover:to-neutral-200" | "group-hover:to-neutral-300" | "group-hover:to-neutral-400" | "group-hover:to-neutral-500" | "group-hover:to-neutral-600" | "group-hover:to-neutral-700" | "group-hover:to-neutral-800" | "group-hover:to-neutral-900" | "group-hover:to-neutral-1000" | "group-hover:to-neutral-1100" | "group-hover:to-neutral-1200" | "group-hover:to-neutral-1300" | "group-hover:to-orange-100" | "group-hover:to-orange-200" | "group-hover:to-orange-300" | "group-hover:to-orange-400" | "group-hover:to-orange-500" | "group-hover:to-orange-600" | "group-hover:to-orange-700" | "group-hover:to-orange-800" | "group-hover:to-orange-900" | "group-hover:to-orange-1000" | "group-hover:to-orange-1100" | "group-hover:to-yellow-100" | "group-hover:to-yellow-200" | "group-hover:to-yellow-300" | "group-hover:to-yellow-400" | "group-hover:to-yellow-500" | "group-hover:to-yellow-600" | "group-hover:to-yellow-700" | "group-hover:to-yellow-800" | "group-hover:to-yellow-900" | "group-hover:to-green-100" | "group-hover:to-green-200" | "group-hover:to-green-300" | "group-hover:to-green-400" | "group-hover:to-green-500" | "group-hover:to-green-600" | "group-hover:to-green-700" | "group-hover:to-green-800" | "group-hover:to-green-900" | "group-hover:to-blue-100" | "group-hover:to-blue-200" | "group-hover:to-blue-300" | "group-hover:to-blue-400" | "group-hover:to-blue-500" | "group-hover:to-blue-600" | "group-hover:to-blue-700" | "group-hover:to-blue-800" | "group-hover:to-blue-900" | "group-hover:to-violet-100" | "group-hover:to-violet-200" | "group-hover:to-violet-300" | "group-hover:to-violet-400" | "group-hover:to-violet-500" | "group-hover:to-violet-600" | "group-hover:to-violet-700" | "group-hover:to-violet-800" | "group-hover:to-violet-900" | "group-hover:to-pink-100" | "group-hover:to-pink-200" | "group-hover:to-pink-300" | "group-hover:to-pink-400" | "group-hover:to-pink-500" | "group-hover:to-pink-600" | "group-hover:to-pink-700" | "group-hover:to-pink-800" | "group-hover:to-pink-900" | "group-hover:to-gui-blue-default-light" | "group-hover:to-gui-blue-hover-light" | "group-hover:to-gui-blue-active-light" | "group-hover:to-gui-blue-default-dark" | "group-hover:to-gui-blue-hover-dark" | "group-hover:to-gui-blue-active-dark" | "group-hover:to-gui-blue-focus" | "group-hover:to-gui-unavailable" | "group-hover:to-gui-success-green" | "group-hover:to-gui-error-red" | "group-hover:to-gui-focus" | "group-hover:to-gui-focus-outline" | "group-hover:to-gui-visited" | "group-hover:to-white" | "group-hover:to-extra-light-grey" | "group-hover:to-light-grey" | "group-hover:to-mid-grey" | "group-hover:to-dark-grey" | "group-hover:to-charcoal-grey" | "group-hover:to-cool-black" | "group-hover:to-active-orange" | "group-hover:to-bright-red" | "group-hover:to-red-orange" | "group-hover:to-electric-cyan" | "group-hover:to-zingy-green" | "group-hover:to-jazzy-pink" | "group-hover:to-gui-default" | "group-hover:to-gui-hover" | "group-hover:to-gui-active" | "group-hover:to-gui-error" | "group-hover:to-gui-success" | "group-hover:to-gui-default-dark" | "group-hover:to-gui-hover-dark" | "group-hover:to-gui-active-dark" | "group-hover:to-transparent" | "group-focus:bg-neutral-000" | "group-focus:bg-neutral-100" | "group-focus:bg-neutral-200" | "group-focus:bg-neutral-300" | "group-focus:bg-neutral-400" | "group-focus:bg-neutral-500" | "group-focus:bg-neutral-600" | "group-focus:bg-neutral-700" | "group-focus:bg-neutral-800" | "group-focus:bg-neutral-900" | "group-focus:bg-neutral-1000" | "group-focus:bg-neutral-1100" | "group-focus:bg-neutral-1200" | "group-focus:bg-neutral-1300" | "group-focus:bg-orange-100" | "group-focus:bg-orange-200" | "group-focus:bg-orange-300" | "group-focus:bg-orange-400" | "group-focus:bg-orange-500" | "group-focus:bg-orange-600" | "group-focus:bg-orange-700" | "group-focus:bg-orange-800" | "group-focus:bg-orange-900" | "group-focus:bg-orange-1000" | "group-focus:bg-orange-1100" | "group-focus:bg-yellow-100" | "group-focus:bg-yellow-200" | "group-focus:bg-yellow-300" | "group-focus:bg-yellow-400" | "group-focus:bg-yellow-500" | "group-focus:bg-yellow-600" | "group-focus:bg-yellow-700" | "group-focus:bg-yellow-800" | "group-focus:bg-yellow-900" | "group-focus:bg-green-100" | "group-focus:bg-green-200" | "group-focus:bg-green-300" | "group-focus:bg-green-400" | "group-focus:bg-green-500" | "group-focus:bg-green-600" | "group-focus:bg-green-700" | "group-focus:bg-green-800" | "group-focus:bg-green-900" | "group-focus:bg-blue-100" | "group-focus:bg-blue-200" | "group-focus:bg-blue-300" | "group-focus:bg-blue-400" | "group-focus:bg-blue-500" | "group-focus:bg-blue-600" | "group-focus:bg-blue-700" | "group-focus:bg-blue-800" | "group-focus:bg-blue-900" | "group-focus:bg-violet-100" | "group-focus:bg-violet-200" | "group-focus:bg-violet-300" | "group-focus:bg-violet-400" | "group-focus:bg-violet-500" | "group-focus:bg-violet-600" | "group-focus:bg-violet-700" | "group-focus:bg-violet-800" | "group-focus:bg-violet-900" | "group-focus:bg-pink-100" | "group-focus:bg-pink-200" | "group-focus:bg-pink-300" | "group-focus:bg-pink-400" | "group-focus:bg-pink-500" | "group-focus:bg-pink-600" | "group-focus:bg-pink-700" | "group-focus:bg-pink-800" | "group-focus:bg-pink-900" | "group-focus:bg-gui-blue-default-light" | "group-focus:bg-gui-blue-hover-light" | "group-focus:bg-gui-blue-active-light" | "group-focus:bg-gui-blue-default-dark" | "group-focus:bg-gui-blue-hover-dark" | "group-focus:bg-gui-blue-active-dark" | "group-focus:bg-gui-blue-focus" | "group-focus:bg-gui-unavailable" | "group-focus:bg-gui-success-green" | "group-focus:bg-gui-error-red" | "group-focus:bg-gui-focus" | "group-focus:bg-gui-focus-outline" | "group-focus:bg-gui-visited" | "group-focus:bg-white" | "group-focus:bg-extra-light-grey" | "group-focus:bg-light-grey" | "group-focus:bg-mid-grey" | "group-focus:bg-dark-grey" | "group-focus:bg-charcoal-grey" | "group-focus:bg-cool-black" | "group-focus:bg-active-orange" | "group-focus:bg-bright-red" | "group-focus:bg-red-orange" | "group-focus:bg-electric-cyan" | "group-focus:bg-zingy-green" | "group-focus:bg-jazzy-pink" | "group-focus:bg-gui-default" | "group-focus:bg-gui-hover" | "group-focus:bg-gui-active" | "group-focus:bg-gui-error" | "group-focus:bg-gui-success" | "group-focus:bg-gui-default-dark" | "group-focus:bg-gui-hover-dark" | "group-focus:bg-gui-active-dark" | "group-focus:bg-transparent" | "group-focus:text-neutral-000" | "group-focus:text-neutral-100" | "group-focus:text-neutral-200" | "group-focus:text-neutral-300" | "group-focus:text-neutral-400" | "group-focus:text-neutral-500" | "group-focus:text-neutral-600" | "group-focus:text-neutral-700" | "group-focus:text-neutral-800" | "group-focus:text-neutral-900" | "group-focus:text-neutral-1000" | "group-focus:text-neutral-1100" | "group-focus:text-neutral-1200" | "group-focus:text-neutral-1300" | "group-focus:text-orange-100" | "group-focus:text-orange-200" | "group-focus:text-orange-300" | "group-focus:text-orange-400" | "group-focus:text-orange-500" | "group-focus:text-orange-600" | "group-focus:text-orange-700" | "group-focus:text-orange-800" | "group-focus:text-orange-900" | "group-focus:text-orange-1000" | "group-focus:text-orange-1100" | "group-focus:text-yellow-100" | "group-focus:text-yellow-200" | "group-focus:text-yellow-300" | "group-focus:text-yellow-400" | "group-focus:text-yellow-500" | "group-focus:text-yellow-600" | "group-focus:text-yellow-700" | "group-focus:text-yellow-800" | "group-focus:text-yellow-900" | "group-focus:text-green-100" | "group-focus:text-green-200" | "group-focus:text-green-300" | "group-focus:text-green-400" | "group-focus:text-green-500" | "group-focus:text-green-600" | "group-focus:text-green-700" | "group-focus:text-green-800" | "group-focus:text-green-900" | "group-focus:text-blue-100" | "group-focus:text-blue-200" | "group-focus:text-blue-300" | "group-focus:text-blue-400" | "group-focus:text-blue-500" | "group-focus:text-blue-600" | "group-focus:text-blue-700" | "group-focus:text-blue-800" | "group-focus:text-blue-900" | "group-focus:text-violet-100" | "group-focus:text-violet-200" | "group-focus:text-violet-300" | "group-focus:text-violet-400" | "group-focus:text-violet-500" | "group-focus:text-violet-600" | "group-focus:text-violet-700" | "group-focus:text-violet-800" | "group-focus:text-violet-900" | "group-focus:text-pink-100" | "group-focus:text-pink-200" | "group-focus:text-pink-300" | "group-focus:text-pink-400" | "group-focus:text-pink-500" | "group-focus:text-pink-600" | "group-focus:text-pink-700" | "group-focus:text-pink-800" | "group-focus:text-pink-900" | "group-focus:text-gui-blue-default-light" | "group-focus:text-gui-blue-hover-light" | "group-focus:text-gui-blue-active-light" | "group-focus:text-gui-blue-default-dark" | "group-focus:text-gui-blue-hover-dark" | "group-focus:text-gui-blue-active-dark" | "group-focus:text-gui-blue-focus" | "group-focus:text-gui-unavailable" | "group-focus:text-gui-success-green" | "group-focus:text-gui-error-red" | "group-focus:text-gui-focus" | "group-focus:text-gui-focus-outline" | "group-focus:text-gui-visited" | "group-focus:text-white" | "group-focus:text-extra-light-grey" | "group-focus:text-light-grey" | "group-focus:text-mid-grey" | "group-focus:text-dark-grey" | "group-focus:text-charcoal-grey" | "group-focus:text-cool-black" | "group-focus:text-active-orange" | "group-focus:text-bright-red" | "group-focus:text-red-orange" | "group-focus:text-electric-cyan" | "group-focus:text-zingy-green" | "group-focus:text-jazzy-pink" | "group-focus:text-gui-default" | "group-focus:text-gui-hover" | "group-focus:text-gui-active" | "group-focus:text-gui-error" | "group-focus:text-gui-success" | "group-focus:text-gui-default-dark" | "group-focus:text-gui-hover-dark" | "group-focus:text-gui-active-dark" | "group-focus:text-transparent" | "group-focus:from-neutral-000" | "group-focus:from-neutral-100" | "group-focus:from-neutral-200" | "group-focus:from-neutral-300" | "group-focus:from-neutral-400" | "group-focus:from-neutral-500" | "group-focus:from-neutral-600" | "group-focus:from-neutral-700" | "group-focus:from-neutral-800" | "group-focus:from-neutral-900" | "group-focus:from-neutral-1000" | "group-focus:from-neutral-1100" | "group-focus:from-neutral-1200" | "group-focus:from-neutral-1300" | "group-focus:from-orange-100" | "group-focus:from-orange-200" | "group-focus:from-orange-300" | "group-focus:from-orange-400" | "group-focus:from-orange-500" | "group-focus:from-orange-600" | "group-focus:from-orange-700" | "group-focus:from-orange-800" | "group-focus:from-orange-900" | "group-focus:from-orange-1000" | "group-focus:from-orange-1100" | "group-focus:from-yellow-100" | "group-focus:from-yellow-200" | "group-focus:from-yellow-300" | "group-focus:from-yellow-400" | "group-focus:from-yellow-500" | "group-focus:from-yellow-600" | "group-focus:from-yellow-700" | "group-focus:from-yellow-800" | "group-focus:from-yellow-900" | "group-focus:from-green-100" | "group-focus:from-green-200" | "group-focus:from-green-300" | "group-focus:from-green-400" | "group-focus:from-green-500" | "group-focus:from-green-600" | "group-focus:from-green-700" | "group-focus:from-green-800" | "group-focus:from-green-900" | "group-focus:from-blue-100" | "group-focus:from-blue-200" | "group-focus:from-blue-300" | "group-focus:from-blue-400" | "group-focus:from-blue-500" | "group-focus:from-blue-600" | "group-focus:from-blue-700" | "group-focus:from-blue-800" | "group-focus:from-blue-900" | "group-focus:from-violet-100" | "group-focus:from-violet-200" | "group-focus:from-violet-300" | "group-focus:from-violet-400" | "group-focus:from-violet-500" | "group-focus:from-violet-600" | "group-focus:from-violet-700" | "group-focus:from-violet-800" | "group-focus:from-violet-900" | "group-focus:from-pink-100" | "group-focus:from-pink-200" | "group-focus:from-pink-300" | "group-focus:from-pink-400" | "group-focus:from-pink-500" | "group-focus:from-pink-600" | "group-focus:from-pink-700" | "group-focus:from-pink-800" | "group-focus:from-pink-900" | "group-focus:from-gui-blue-default-light" | "group-focus:from-gui-blue-hover-light" | "group-focus:from-gui-blue-active-light" | "group-focus:from-gui-blue-default-dark" | "group-focus:from-gui-blue-hover-dark" | "group-focus:from-gui-blue-active-dark" | "group-focus:from-gui-blue-focus" | "group-focus:from-gui-unavailable" | "group-focus:from-gui-success-green" | "group-focus:from-gui-error-red" | "group-focus:from-gui-focus" | "group-focus:from-gui-focus-outline" | "group-focus:from-gui-visited" | "group-focus:from-white" | "group-focus:from-extra-light-grey" | "group-focus:from-light-grey" | "group-focus:from-mid-grey" | "group-focus:from-dark-grey" | "group-focus:from-charcoal-grey" | "group-focus:from-cool-black" | "group-focus:from-active-orange" | "group-focus:from-bright-red" | "group-focus:from-red-orange" | "group-focus:from-electric-cyan" | "group-focus:from-zingy-green" | "group-focus:from-jazzy-pink" | "group-focus:from-gui-default" | "group-focus:from-gui-hover" | "group-focus:from-gui-active" | "group-focus:from-gui-error" | "group-focus:from-gui-success" | "group-focus:from-gui-default-dark" | "group-focus:from-gui-hover-dark" | "group-focus:from-gui-active-dark" | "group-focus:from-transparent" | "group-focus:to-neutral-000" | "group-focus:to-neutral-100" | "group-focus:to-neutral-200" | "group-focus:to-neutral-300" | "group-focus:to-neutral-400" | "group-focus:to-neutral-500" | "group-focus:to-neutral-600" | "group-focus:to-neutral-700" | "group-focus:to-neutral-800" | "group-focus:to-neutral-900" | "group-focus:to-neutral-1000" | "group-focus:to-neutral-1100" | "group-focus:to-neutral-1200" | "group-focus:to-neutral-1300" | "group-focus:to-orange-100" | "group-focus:to-orange-200" | "group-focus:to-orange-300" | "group-focus:to-orange-400" | "group-focus:to-orange-500" | "group-focus:to-orange-600" | "group-focus:to-orange-700" | "group-focus:to-orange-800" | "group-focus:to-orange-900" | "group-focus:to-orange-1000" | "group-focus:to-orange-1100" | "group-focus:to-yellow-100" | "group-focus:to-yellow-200" | "group-focus:to-yellow-300" | "group-focus:to-yellow-400" | "group-focus:to-yellow-500" | "group-focus:to-yellow-600" | "group-focus:to-yellow-700" | "group-focus:to-yellow-800" | "group-focus:to-yellow-900" | "group-focus:to-green-100" | "group-focus:to-green-200" | "group-focus:to-green-300" | "group-focus:to-green-400" | "group-focus:to-green-500" | "group-focus:to-green-600" | "group-focus:to-green-700" | "group-focus:to-green-800" | "group-focus:to-green-900" | "group-focus:to-blue-100" | "group-focus:to-blue-200" | "group-focus:to-blue-300" | "group-focus:to-blue-400" | "group-focus:to-blue-500" | "group-focus:to-blue-600" | "group-focus:to-blue-700" | "group-focus:to-blue-800" | "group-focus:to-blue-900" | "group-focus:to-violet-100" | "group-focus:to-violet-200" | "group-focus:to-violet-300" | "group-focus:to-violet-400" | "group-focus:to-violet-500" | "group-focus:to-violet-600" | "group-focus:to-violet-700" | "group-focus:to-violet-800" | "group-focus:to-violet-900" | "group-focus:to-pink-100" | "group-focus:to-pink-200" | "group-focus:to-pink-300" | "group-focus:to-pink-400" | "group-focus:to-pink-500" | "group-focus:to-pink-600" | "group-focus:to-pink-700" | "group-focus:to-pink-800" | "group-focus:to-pink-900" | "group-focus:to-gui-blue-default-light" | "group-focus:to-gui-blue-hover-light" | "group-focus:to-gui-blue-active-light" | "group-focus:to-gui-blue-default-dark" | "group-focus:to-gui-blue-hover-dark" | "group-focus:to-gui-blue-active-dark" | "group-focus:to-gui-blue-focus" | "group-focus:to-gui-unavailable" | "group-focus:to-gui-success-green" | "group-focus:to-gui-error-red" | "group-focus:to-gui-focus" | "group-focus:to-gui-focus-outline" | "group-focus:to-gui-visited" | "group-focus:to-white" | "group-focus:to-extra-light-grey" | "group-focus:to-light-grey" | "group-focus:to-mid-grey" | "group-focus:to-dark-grey" | "group-focus:to-charcoal-grey" | "group-focus:to-cool-black" | "group-focus:to-active-orange" | "group-focus:to-bright-red" | "group-focus:to-red-orange" | "group-focus:to-electric-cyan" | "group-focus:to-zingy-green" | "group-focus:to-jazzy-pink" | "group-focus:to-gui-default" | "group-focus:to-gui-hover" | "group-focus:to-gui-active" | "group-focus:to-gui-error" | "group-focus:to-gui-success" | "group-focus:to-gui-default-dark" | "group-focus:to-gui-hover-dark" | "group-focus:to-gui-active-dark" | "group-focus:to-transparent";
+//# sourceMappingURL=utils.d.ts.map
+}
+
 declare module '@ably/ui/core/url-base' {
 export default absUrl;
 function absUrl(path: any, urlBase?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.0-dev.5cd05dc",
+  "version": "14.6.0-dev.fd4036a",
   "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,17 +16,18 @@
   ],
   "types": "index.d.ts",
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-vite": "^8.3.1",
+    "@storybook/test": "^8.3.1",
     "@storybook/test-runner": "^0.19.1",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
@@ -42,7 +43,8 @@
     "msw": "2.4.2",
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.1",
+    "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "typescript": "5.6.2",

package/tailwind.config.js

@@ -8,6 +8,11 @@ module.exports = {
     "w-1/6",
     { pattern: /^hljs.*/ },
     { pattern: /^ui-.*/ },
+    {
+      pattern:
+        /^(text|bg|from|to)-(neutral|orange|yellow|green|blue|violet|pink)-[\d]{1,2}00.*/,
+      variants: ["hover", "focus"],
+    },
   ],
   theme: {
     screens: {
@@ -52,6 +57,7 @@ module.exports = {
       code2: ["var(--fs-code2)", "var(--lh-dense)"],
     },
     colors: {
+      "neutral-000": "var(--color-neutral-000)",
       "neutral-100": "var(--color-neutral-100)",
       "neutral-200": "var(--color-neutral-200)",
       "neutral-300": "var(--color-neutral-300)",
@@ -217,10 +223,6 @@ module.exports = {
       "btn-small": "var(--spacing-btn-small)",
       "btn-xsmall": "var(--spacing-btn-xsmall)",
       "btn-large": "var(--spacing-btn-large)",
-      chip: "var(--spacing-chip)",
-      "chip-small": "var(--spacing-chip-small)",
-      "chip-xsmall": "var(--spacing-chip-xsmall)",
-      "chip-large": "var(--spacing-chip-large)",
       "menu-row": "var(--spacing-menu-row)",
       "menu-row-snug": "var(--spacing-menu-row-snug)",
       "menu-row-title": "var(--spacing-menu-row-title)",
@@ -288,20 +290,15 @@ module.exports = {
       "widen-0.15": "var(--ls-widen-0_15)",
       "widen-0.16": "var(--ls-widen-0_16)",
     },
-    borderRadius: {
-      none: "0",
-      sm: "0.125rem",
-      md: "0.1875rem",
-      lg: "0.5rem",
-      xl: "0.75rem",
-      full: "9999px",
-      DEFAULT: "0.375rem",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
         "gradient-hot-pink": "var(--gradient-hot-pink)",
       },
+      borderRadius: {
+        md: "0.1875rem",
+        DEFAULT: "0.375rem",
+      },
       transitionProperty: {
         input: "background-color, box-shadow",
         filter: "filter",
@@ -353,5 +350,5 @@ module.exports = {
   corePlugins: {
     preflight: false,
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/container-queries")],
 };

package/core/styles/toggles.css

@@ -1,38 +0,0 @@
-@layer components {
-  .ui-toggle {
-    @apply h-32 w-[56px] rounded-full relative inline-block;
-  }
-
-  .ui-toggle:has(:disabled) {
-    @apply pointer-events-none;
-  }
-
-  .ui-toggle input {
-    @apply w-0 h-0 opacity-0;
-  }
-
-  .ui-toggle-slider {
-    @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
-  }
-
-  .ui-toggle-slider:before {
-    @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
-    content: "";
-  }
-
-  .ui-toggle input:checked + .ui-toggle-slider {
-    @apply bg-orange-600;
-  }
-
-  .ui-toggle input:disabled + .ui-toggle-slider {
-    @apply bg-gui-unavailable;
-  }
-
-  .ui-toggle input:checked + .ui-toggle-slider:before {
-    @apply translate-x-24;
-  }
-
-  .ui-toggle input:disabled + .ui-toggle-slider:before {
-    @apply bg-neutral-500;
-  }
-}