@ably/ui 14.5.2 → 14.6.0-dev.a118013

package/core/Accordion/types.js

@@ -0,0 +1 @@
+export const accordionThemes=["dark","light","transparent"];

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return /*#__PURE__*/React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},/*#__PURE__*/React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},/*#__PURE__*/React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),/*#__PURE__*/React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),/*#__PURE__*/React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose,className})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;
+import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";import throttle from"lodash.throttle";const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-white",hoverBg:"hover:bg-white",text:"text-neutral-1000",toggleIconColor:"text-dark-grey"}};const isNonTransparentTheme=theme=>theme!=="transparent";const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const handleHeight=throttle(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}},250);handleHeight();window.addEventListener("resize",handleHeight);return()=>window.removeEventListener("resize",handleHeight)},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`border-mid-grey border-b last:border-none ${isNonTransparentTheme(theme)?"border-none":""}`},/*#__PURE__*/React.createElement("button",{type:"button",onClick:onClick,className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-hidden ${isNonTransparentTheme(theme)?"pt-16 px-16":"px-0"}`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:openIndexes.includes(currentIndex),onClick:()=>handleSetIndex(currentIndex),toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;

package/core/Code.js

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

package/core/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})=>{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;
+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;

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})=>{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});
+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});

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})=>{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;
+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;

package/core/MeganavSearch.js

@@ -1 +1 @@
-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;
+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;

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/styles/buttons.css

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

package/core/styles/colors/types.js

@@ -1 +1 @@
-const neutralColors=["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=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];const secondaryColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900","pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};
+const neutralColors=["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=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];const secondaryColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900","pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};

package/core/styles/dropdowns.css

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

package/core/styles/forms.css

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

package/core/styles/properties.css

@@ -6,7 +6,7 @@
     --color-neutral-200: #eef1f6;
     --color-neutral-300: #e6eaf0;
     --color-neutral-400: #e2e7ef;
-    --color-neutral-500: #ced5de;
+    --color-neutral-500: #c6ced9;
     --color-neutral-600: #adb6c2;
     --color-neutral-700: #89929f;
     --color-neutral-800: #667085;
@@ -254,10 +254,6 @@
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
-    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
-    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
-    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
-    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
     --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,

package/core/styles.components.css

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

package/index.d.ts

@@ -1,21 +1,54 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-declare module '@ably/ui/core/Accordion' {
+declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
-type AccordionData = {
+import { IconName } from ".@ably/ui/core/Icon/types";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
+export type AccordionData = {
     name: string;
+    icon?: IconName;
     content: ReactNode;
 };
+export type AccordionIcons = {
+    closed: {
+        name: IconName;
+        css?: string;
+    };
+    open: {
+        name: IconName;
+        css?: string;
+    };
+};
+export const accordionThemes: readonly ["dark", "light", "transparent"];
+export type AccordionTheme = (typeof accordionThemes)[number];
+export type AccordionThemeColors = {
+    bg: ColorClass;
+    hoverBg: string;
+    text: ColorClass;
+    toggleIconColor: ColorClass;
+    selectableBg?: ColorClass;
+    selectableText?: ColorClass;
+};
+export type AccordionOptions = {
+    autoClose?: boolean;
+    selectable?: boolean;
+    sticky?: boolean;
+    defaultOpenIndexes?: number[];
+};
+//# sourceMappingURL=types.d.ts.map
+}
+
+declare module '@ably/ui/core/Accordion' {
+import type { AccordionData, AccordionIcons, AccordionOptions, AccordionTheme } from "@ably/ui/core/Accordion/types";
 export type AccordionProps = {
+    className?: string;
     data: AccordionData[];
-    arrowIcon?: boolean;
-    topBorder?: boolean;
-    bottomBorder?: boolean;
+    icons?: AccordionIcons;
     id?: string;
-    autoClose?: boolean;
-    className?: string;
+    theme?: AccordionTheme;
+    options?: AccordionOptions;
 };
-const Accordion: ({ data, id, topBorder, bottomBorder, arrowIcon, autoClose, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+const Accordion: ({ data, theme, id, className, icons, options, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map
 }
@@ -194,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" | "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";
+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";
 //# sourceMappingURL=secondary-colors.d.ts.map
 }
 
@@ -341,8 +374,9 @@ type MeganavProps = {
     urlBase?: string;
     addSearchApiKey: string;
     statusUrl: string;
+    searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -513,8 +547,9 @@ type MeganavItemsMobileProps = {
     loginLink: string;
     absUrl: AbsUrl;
     statusUrl: string;
+    searchDataId?: string;
 };
-const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
+const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
@@ -525,16 +560,18 @@ type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
     absUrl: AbsUrl;
+    searchDataId?: string;
 };
-const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
+const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
 export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
 declare module '@ably/ui/core/MeganavSearch' {
 import { AbsUrl } from "@ably/ui/core/Meganav";
-const MeganavSearch: ({ absUrl }: {
+const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
+    dataId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
@@ -831,7 +868,7 @@ const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neu
 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"];
 const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
-const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark"];
+const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
 export const colorNames: {
     neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
     orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.5.2",
+  "version": "14.6.0-dev.a118013",
   "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",
@@ -43,6 +43,7 @@
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
     "storybook": "^8.2.9",
+    "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "typescript": "5.6.2",

package/tailwind.config.js

@@ -217,10 +217,6 @@ module.exports = {
       "btn-small": "var(--spacing-btn-small)",
       "btn-xsmall": "var(--spacing-btn-xsmall)",
       "btn-large": "var(--spacing-btn-large)",
-      chip: "var(--spacing-chip)",
-      "chip-small": "var(--spacing-chip-small)",
-      "chip-xsmall": "var(--spacing-chip-xsmall)",
-      "chip-large": "var(--spacing-chip-large)",
       "menu-row": "var(--spacing-menu-row)",
       "menu-row-snug": "var(--spacing-menu-row-snug)",
       "menu-row-title": "var(--spacing-menu-row-title)",

package/core/styles/toggles.css

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