@ably/ui 14.6.0-dev.a118013 → 14.6.0-dev.fd4036a

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/Meganav.js

@@ -1 +1 @@
-import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl,searchDataId})=>{return sessionState.signedIn?/*#__PURE__*/React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme,searchDataId:searchDataId}):/*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>/*#__PURE__*/React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl,searchDataId})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&/*#__PURE__*/React.createElement(Notice,{...notice.props,config:notice.config}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"mr-24"},/*#__PURE__*/React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),/*#__PURE__*/React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?/*#__PURE__*/React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl,searchDataId:searchDataId}):/*#__PURE__*/React.createElement(SignInPlaceholder,null),/*#__PURE__*/React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl,searchDataId:searchDataId})))};export default Meganav;
+import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?/*#__PURE__*/React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):/*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>/*#__PURE__*/React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&/*#__PURE__*/React.createElement(Notice,{...notice.props,config:notice.config}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"mr-24"},/*#__PURE__*/React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),/*#__PURE__*/React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?/*#__PURE__*/React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):/*#__PURE__*/React.createElement(SignInPlaceholder,null),/*#__PURE__*/React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;

package/core/MeganavItemsMobile.js

@@ -1 +1 @@
-import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl,searchDataId})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return /*#__PURE__*/React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},/*#__PURE__*/React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?/*#__PURE__*/React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>/*#__PURE__*/React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavControlMobileDropdown,{theme:theme}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},/*#__PURE__*/React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},/*#__PURE__*/React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},/*#__PURE__*/React.createElement("div",{className:"relative w-full"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),/*#__PURE__*/React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),/*#__PURE__*/React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":searchDataId?searchDataId:"meganav-mobile-search-input"}),/*#__PURE__*/React.createElement(MeganavSearchAutocomplete,null))),/*#__PURE__*/React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},/*#__PURE__*/React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),/*#__PURE__*/React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return /*#__PURE__*/React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},/*#__PURE__*/React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},/*#__PURE__*/React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),/*#__PURE__*/React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),/*#__PURE__*/React.createElement("hr",{className:"ui-meganav-hr mb-20"}),/*#__PURE__*/React.createElement("div",{className:"flex justify-between items-center mb-16"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default /*#__PURE__*/React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
+import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return /*#__PURE__*/React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},/*#__PURE__*/React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?/*#__PURE__*/React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>/*#__PURE__*/React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavControlMobileDropdown,{theme:theme}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},/*#__PURE__*/React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},/*#__PURE__*/React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},/*#__PURE__*/React.createElement("div",{className:"relative w-full"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),/*#__PURE__*/React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),/*#__PURE__*/React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),/*#__PURE__*/React.createElement(MeganavSearchAutocomplete,null))),/*#__PURE__*/React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},/*#__PURE__*/React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),/*#__PURE__*/React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return /*#__PURE__*/React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},/*#__PURE__*/React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},/*#__PURE__*/React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),/*#__PURE__*/React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),/*#__PURE__*/React.createElement("hr",{className:"ui-meganav-hr mb-20"}),/*#__PURE__*/React.createElement("div",{className:"flex justify-between items-center mb-16"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default /*#__PURE__*/React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});

package/core/MeganavItemsSignedIn.js

@@ -1 +1 @@
-import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl,searchDataId})=>{const accountName=truncate(sessionState.accountName,20);return /*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item relative"},/*#__PURE__*/React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),sessionState.account&&/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
+import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return /*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item relative"},/*#__PURE__*/React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;

package/core/MeganavSearch.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl,dataId="meganav-control"})=>/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("button",{type:"button","data-id":dataId,"data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},/*#__PURE__*/React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;
+import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl})=>/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("button",{type:"button","data-id":"meganav-control","data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},/*#__PURE__*/React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;

package/core/MeganavSearchSuggestions/component.js

@@ -1 +1 @@
-import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle?.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle?.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
+import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;

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/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.components.css

@@ -39,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
 }
 
@@ -374,9 +374,8 @@ type MeganavProps = {
     urlBase?: string;
     addSearchApiKey: string;
     statusUrl: string;
-    searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -547,9 +546,8 @@ type MeganavItemsMobileProps = {
     loginLink: string;
     absUrl: AbsUrl;
     statusUrl: string;
-    searchDataId?: string;
 };
-const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
+const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
@@ -560,18 +558,16 @@ type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
     absUrl: AbsUrl;
-    searchDataId?: string;
 };
-const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
+const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
 export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
 declare module '@ably/ui/core/MeganavSearch' {
 import { AbsUrl } from "@ably/ui/core/Meganav";
-const MeganavSearch: ({ absUrl, dataId, }: {
+const MeganavSearch: ({ absUrl }: {
     absUrl: AbsUrl;
-    dataId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
@@ -658,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";
@@ -862,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"];
@@ -879,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.a118013",
+  "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,7 @@
     "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",

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)",
@@ -284,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",
@@ -349,5 +350,5 @@ module.exports = {
   corePlugins: {
     preflight: false,
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/container-queries")],
 };