@ably/ui 15.0.2 → 15.1.0-dev.44b727ac

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import clsx from"clsx";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:clsx({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:clsx({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus:outline-none":isStaticTheme(theme),"focus:outline-gui-blue-focus":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:clsx({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
+import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus:outline-none":isStaticTheme(theme),"focus:outline-gui-blue-focus":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;

package/core/Button.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import clsx from"clsx";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{className:clsx(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className),...rest},leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};export default Button;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className),...rest},leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};export default Button;

package/core/Flash.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/Icon.js

@@ -1 +1 @@
-import React,{useCallback}from"react";import clsx from"clsx";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:clsx({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
+import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;

package/core/Pricing/PricingCards.js

@@ -1 +1 @@
-import React,{Fragment,useEffect,useRef,useState}from"react";import clsx from"clsx";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:clsx("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"border-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:clsx("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:clsx("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:clsx("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:clsx("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:clsx(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:clsx(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:clsx("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:clsx("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:clsx("text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",cta.className??"ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300"),url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),/*#__PURE__*/React.createElement("div",{className:clsx({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:clsx("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:clsx("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark: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:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:clsx(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
+import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"border-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:cn("text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",cta.className??"ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300"),url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark: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:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;

package/core/ProductTile.js

@@ -1 +1 @@
-import React from"react";import clsx from"clsx";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:clsx("rounded-lg p-12 flex flex-col gap-8 transition-colors",{"bg-neutral-1200 dark:bg-neutral-100":selected},{"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100":!selected},{[`${className}`]:className}),onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,className:selected?"from-neutral-900 dark:from-neutral-400":"from-neutral-400 dark:from-neutral-900",innerClassName:selected?"bg-neutral-1100 dark:bg-neutral-200":"bg-neutral-200 dark:bg-neutral-1100"}):null,/*#__PURE__*/React.createElement("div",{className:clsx("flex",{"flex-row items-center gap-4":unavailable},{"flex-col justify-center":!unavailable})},/*#__PURE__*/React.createElement("p",{className:clsx("font-medium",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-1000 dark:text-neutral-300":!selected},{"ui-text-p2":unavailable},{"ui-text-p3":!unavailable})},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:clsx("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected},{"text-neutral-1300 dark:text-neutral-000":!selected},{"mt-[-3px]":!unavailable})},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:clsx("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-800 dark:text-neutral-500":!selected})},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:"ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300",iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import cn from"./utils/cn";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:cn("rounded-lg p-12 flex flex-col gap-8 transition-colors",{"bg-neutral-1200 dark:bg-neutral-100":selected},{"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100":!selected},{[`${className}`]:className}),onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,className:selected?"from-neutral-900 dark:from-neutral-400":"from-neutral-400 dark:from-neutral-900",innerClassName:selected?"bg-neutral-1100 dark:bg-neutral-200":"bg-neutral-200 dark:bg-neutral-1100"}):null,/*#__PURE__*/React.createElement("div",{className:cn("flex",{"flex-row items-center gap-4":unavailable},{"flex-col justify-center":!unavailable})},/*#__PURE__*/React.createElement("p",{className:cn("font-medium",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-1000 dark:text-neutral-300":!selected},{"ui-text-p2":unavailable},{"ui-text-p3":!unavailable})},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected},{"text-neutral-1300 dark:text-neutral-000":!selected},{"mt-[-3px]":!unavailable})},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-800 dark:text-neutral-500":!selected})},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:"ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300",iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;

package/core/Status.js

@@ -1 +1 @@
-import React from"react";import useSWR from"swr";import clsx from"clsx";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return /*#__PURE__*/React.createElement("span",{className:clsx("inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl,additionalCSS,refreshInterval=1e3*60})=>{return /*#__PURE__*/React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}))};export default Status;
+import React from"react";import useSWR from"swr";import cn from"./utils/cn";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return /*#__PURE__*/React.createElement("span",{className:cn("inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl,additionalCSS,refreshInterval=1e3*60})=>{return /*#__PURE__*/React.createElement("a",{href:"https://status.ably.com",className:`inline-block ${additionalCSS}`,target:"_blank",rel:"noreferrer"},/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}))};export default Status;

package/core/TabMenu.js

@@ -0,0 +1 @@
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,options})=>{const{defaultTabIndex=0,underline=true,animated=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight})},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`},content)))};export default TabMenu;

package/core/Toggle.js

@@ -0,0 +1 @@
+import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,label,className,...props})=>{return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus",className),id:id,...props},/*#__PURE__*/React.createElement(Switch.Thumb,{className:"block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"})),label?/*#__PURE__*/React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;

package/core/styles/buttons.css

@@ -4,19 +4,19 @@
   }
 
   .ui-button-lg-base {
-    @apply ui-button-base ui-gui-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
   }
 
   .ui-button-md-base {
-    @apply ui-button-base ui-gui-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
   }
 
   .ui-button-sm-base {
-    @apply ui-button-base ui-gui-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
+    @apply ui-button-base ui-text-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
   }
 
   .ui-button-xs-base {
-    @apply ui-button-base ui-gui-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
+    @apply ui-button-base ui-text-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
   }
 
   .ui-button-disabled-base {
@@ -36,19 +36,19 @@
   }
 
   .ui-button-primary-base {
-    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1200 active:bg-neutral-1100 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-primary-base {
-    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-100 active:bg-neutral-200 ui-button-disabled-base-dark;
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {
-    @apply text-neutral-1300 border border-neutral-600 hover:border-neutral-700 active:border-neutral-400 active:text-neutral-1000 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+    @apply text-neutral-1300 hover:text-neutral-1100 active:text-neutral-1200 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
   }
 
   .ui-theme-dark .ui-button-secondary-base {
-    @apply text-neutral-000 border-neutral-700 hover:border-neutral-600 active:border-neutral-800 active:text-neutral-300 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+    @apply text-neutral-000 hover:text-neutral-200 active:text-neutral-100 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
   }
 
   .ui-button-priority-lg {

package/core/styles/colors/types.js

@@ -1 +1 @@
-export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export 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"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];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 colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
+export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export 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"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];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"];export 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 colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};

package/core/styles/dropdowns.css

@@ -1,11 +1,15 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex font-medium bg-transparent;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
+    @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
-    background-repeat: no-repeat;
     background-position: center right 16px;
   }
 
+  .ui-theme-dark .ui-dropdown-base {
+    @apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
+  }
+
   .ui-dropdown-base option:disabled {
     @apply text-neutral-800;
   }

package/core/styles/forms/story-components.js

@@ -0,0 +1 @@
+import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>/*#__PURE__*/React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},/*#__PURE__*/React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),/*#__PURE__*/React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-tick",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),/*#__PURE__*/React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>/*#__PURE__*/React.createElement("div",{className:"flex items-center gap-8"},/*#__PURE__*/React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),/*#__PURE__*/React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));

package/core/styles/forms.css

@@ -14,7 +14,12 @@
   .ui-checkbox-styled {
     @apply w-20 h-20 mr-16;
     @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+    @apply border border-neutral-500 rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-theme-dark .ui-checkbox-styled,
+  .ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled {
+    @apply bg-neutral-1300 border-neutral-900;
   }
 
   .ui-checkbox-styled-tick {
@@ -23,12 +28,17 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-medium text-neutral-1300;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
+    @apply text-p2 font-medium text-neutral-1300;
+  }
+
+  .ui-theme-dark .ui-checkbox-label-p1,
+  .ui-theme-dark .ui-checkbox-label-p2 {
+    @apply text-neutral-000;
   }
 
   .ui-checkbox-input:focus + .ui-checkbox-styled {
@@ -45,7 +55,15 @@
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-neutral-1000 border border-gui-unavailable-dark;
+  }
+
+  .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-gui-unavailable-dark;
   }
 
   .ui-textarea {
@@ -78,6 +96,10 @@
     @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
   }
 
+  .ui-theme-dark .ui-toggle-slider {
+    @apply bg-neutral-700;
+  }
+
   .ui-toggle-slider:before {
     @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
     content: "";
@@ -100,24 +122,40 @@
   }
 
   .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;
+    @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
+    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
+    @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
-  .ui-input-dark {
-    @apply bg-neutral-1200 hover:bg-neutral-1200 focus:bg-neutral-1000 text-neutral-300;
+  .ui-theme-dark .ui-input {
+    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
   }
 
   .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-theme-dark .ui-input:disabled {
+    @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
   }
 
-  .ui-input {
-    @apply invalid:border-gui-error-red;
+  .ui-radio {
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
+  }
+
+  .ui-radio:checked {
+    @apply bg-orange-600 border-orange-600 border;
+  }
+
+  .ui-radio:checked::after {
+    @apply content-[''] mt-[5px] w-8 h-8 block bg-white rounded-full m-auto;
+  }
+
+  .ui-radio:disabled {
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-radio:disabled {
+    @apply bg-neutral-1000;
   }
 }

package/core/styles/legacy-buttons.css

@@ -1,8 +1,8 @@
 @layer components {
   .ui-btn {
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
+    @apply hover:text-white hover:bg-neutral-1100;
+    @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;

package/core/styles/properties.css

@@ -196,9 +196,11 @@
     --fs-btn1: 1rem;
     --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;
+    --fs-btn4: 0.813rem;
     --fs-menu1: 1rem;
     --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
+    --fs-menu4: 0.813rem;
     --fs-quote: 1.25rem;
     --fs-code: 0.813rem;
     --fs-code2: 0.688rem;
@@ -256,7 +258,6 @@
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
-    --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.

package/core/styles/text.css

@@ -36,18 +36,19 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p1;
+    @apply font-sans font-medium text-charcoal-grey text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p2;
+    @apply font-sans font-medium text-charcoal-grey text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-medium text-charcoal-grey;
-    @apply text-p3;
+    @apply font-sans font-medium text-charcoal-grey text-p3;
+  }
+
+  .ui-text-p4 {
+    @apply font-sans font-medium text-charcoal-grey text-p4;
   }
 
   .ui-text-standfirst {
@@ -80,18 +81,42 @@
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
+    @apply font-sans text-neutral-900 text-menu1 font-semibold leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
+    @apply font-sans text-neutral-900 text-menu2 font-semibold leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
+    @apply font-sans text-neutral-900 text-menu3 font-semibold leading-snug;
+  }
+
+  .ui-text-menu4 {
+    @apply font-sans text-neutral-900 text-menu4 font-semibold leading-snug;
+  }
+
+  .ui-theme-dark .ui-text-menu1,
+  .ui-theme-dark .ui-text-menu2,
+  .ui-theme-dark .ui-text-menu3,
+  .ui-theme-dark .ui-text-menu4 {
+    @apply text-neutral-300;
+  }
+
+  .ui-text-button1 {
+    @apply font-sans text-btn1 font-bold leading-snug;
+  }
+
+  .ui-text-button2 {
+    @apply font-sans text-btn2 font-bold leading-snug;
+  }
+
+  .ui-text-button3 {
+    @apply font-sans text-btn3 font-bold leading-snug;
+  }
+
+  .ui-text-button4 {
+    @apply font-sans text-btn4 font-bold leading-snug;
   }
 
   .ui-text-code {
@@ -103,7 +128,11 @@
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply inline-flex font-mono px-[3px] py-4 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
+  }
+
+  .dark .ui-text-code-inline {
+    @apply text-neutral-300 bg-neutral-1000 border-neutral-900;
   }
 
   .ui-unordered-list {

package/core/styles.components.css

@@ -5,7 +5,6 @@
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
-@import "./styles/gui.css";
 
 @layer components {
   /* Basis for icon component */

package/core/utils/cn.js

@@ -0,0 +1 @@
+import{twMerge}from"tailwind-merge";import clsx from"clsx";const cn=(...inputs)=>{return twMerge(clsx(inputs))};export default cn;

package/index.d.ts

@@ -970,6 +970,62 @@ export default Status;
 //# sourceMappingURL=Status.d.ts.map
 }
 
+declare module '@ably/ui/core/TabMenu' {
+import React, { ReactNode } from "react";
+/**
+ * Props for the TabMenu component.
+ */
+export type TabMenuProps = {
+    /**
+     * An array of tabs, which can be either a string or an object with a label and an optional disabled state.
+     */
+    tabs: (string | {
+        label: string;
+        disabled?: boolean;
+    })[];
+    /**
+     * An optional array of React nodes representing the content for each tab.
+     */
+    contents?: ReactNode[];
+    /**
+     * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.
+     */
+    tabOnClick?: (index: number) => void;
+    /**
+     * An optional class name to apply to each tab.
+     */
+    tabClassName?: string;
+    /**
+     * Optional configuration options for the TabMenu.
+     */
+    options?: {
+        /**
+         * The index of the tab that should be selected by default.
+         */
+        defaultTabIndex?: number;
+        /**
+         * Whether to show an underline below the selected tab.
+         */
+        underline?: boolean;
+        /**
+         * Whether to animate the transition between tabs.
+         */
+        animated?: boolean;
+        /**
+         * Whether the tab width should be flexible.
+         */
+        flexibleTabWidth?: boolean;
+        /**
+         * Whether the tab height should be flexible.
+         */
+        flexibleTabHeight?: boolean;
+    };
+};
+const TabMenu: React.FC<TabMenuProps>;
+export default TabMenu;
+//# sourceMappingURL=TabMenu.d.ts.map
+}
+
 declare module '@ably/ui/core/Table/Table' {
 import { PropsWithChildren, TableHTMLAttributes } from "react";
 type TableProps = {
@@ -1034,6 +1090,18 @@ export default _default;
 //# sourceMappingURL=Table.d.ts.map
 }
 
+declare module '@ably/ui/core/Toggle' {
+import React from "react";
+type ToggleProps = {
+    id: string;
+    label?: string;
+    className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+const Toggle: React.FC<ToggleProps>;
+export default Toggle;
+//# sourceMappingURL=Toggle.d.ts.map
+}
+
 declare module '@ably/ui/core/Tooltip' {
 import { ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 type TooltipProps = {
@@ -1122,7 +1190,7 @@ export const violetColors: readonly ["violet-100", "violet-200", "violet-300", "
 export const pinkColors: readonly ["pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
 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", "transparent"];
+export const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
 export const colorRoles: {
     neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
     orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
@@ -1149,12 +1217,30 @@ export const invertTailwindClassVariant: (className: string) => ColorClass;
 //# sourceMappingURL=utils.d.ts.map
 }
 
+declare module '@ably/ui/core/styles/forms/story-components' {
+type FormElementProps = {
+    index: number;
+    disabled?: boolean;
+};
+export const Checkbox: ({ index, disabled }: FormElementProps) => import("react/jsx-runtime").JSX.Element;
+export const RadioButton: ({ index, disabled }: FormElementProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=story-components.d.ts.map
+}
+
 declare module '@ably/ui/core/url-base' {
 export default absUrl;
 function absUrl(path: any, urlBase?: string): string;
 //# sourceMappingURL=url-base.d.ts.map
 }
 
+declare module '@ably/ui/core/utils/cn' {
+import { ClassValue } from "clsx";
+const cn: (...inputs: ClassValue[]) => string;
+export default cn;
+//# sourceMappingURL=cn.d.ts.map
+}
+
 declare module '@ably/ui/core/utils/syntax-highlighter-registry' {
 export default registry;
 const registry: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.0.2",
+  "version": "15.1.0-dev.44b727ac",
   "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",
@@ -26,7 +26,7 @@
     "@storybook/blocks": "^8.4.0",
     "@storybook/react-vite": "^8.4.0",
     "@storybook/test": "^8.4.0",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/test-runner": "^0.20.0",
     "@swc/cli": "^0.5.0",
     "@swc/core": "^1.4.11",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -35,8 +35,8 @@
     "@types/lodash.throttle": "^4.1.9",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.0.2",
@@ -54,7 +54,7 @@
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.2",
-    "typescript": "5.6.3",
+    "typescript": "5.7.2",
     "vite": "^5.2.12"
   },
   "scripts": {
@@ -79,6 +79,8 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "addsearch-js-client": "^0.8.11",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
@@ -91,7 +93,8 @@
     "react-dom": "^18.3.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "tailwind-merge": "^2.5.5"
   },
   "bugs": {
     "url": "https://github.com/ably/ably-ui/issues"

package/tailwind.config.js

@@ -36,11 +36,12 @@ module.exports = {
       overline2: ["var(--fs-overline2)"],
       btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
       btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
-      btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
-      btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
+      btn3: ["var(--fs-btn3)", "var(--lh-tight)"],
+      btn4: ["var(--fs-btn4)", "var(--lh-dense)"],
       menu1: ["var(--fs-menu1)"],
       menu2: ["var(--fs-menu2)"],
       menu3: ["var(--fs-menu3)"],
+      menu4: ["var(--fs-menu4)"],
       quote: ["var(--fs-quote)"],
       code: ["var(--fs-code)", "var(--lh-dense)"],
       code2: ["var(--fs-code2)", "var(--lh-dense)"],
@@ -219,7 +220,6 @@ module.exports = {
       media: "var(--spacing-media)",
       input: "var(--spacing-input)",
       overline: "var(--spacing-overline)",
-      "inline-code": "var(--spacing-inline-code)",
       ...theme("spacing"),
     }),
     spacing: {

package/core/styles/gui.css

@@ -1,33 +0,0 @@
-@layer components {
-  .ui-gui-menu1 {
-    @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
-  }
-
-  .ui-gui-menu2 {
-    @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
-  }
-
-  .ui-gui-menu3 {
-    @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
-  }
-
-  .ui-gui-menu4 {
-    @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
-  }
-
-  .ui-gui-button1 {
-    @apply font-sans text-p1 font-bold leading-snug;
-  }
-
-  .ui-gui-button2 {
-    @apply font-sans text-p2 font-bold leading-snug;
-  }
-
-  .ui-gui-button3 {
-    @apply font-sans text-p3 font-bold leading-snug;
-  }
-
-  .ui-gui-button4 {
-    @apply font-sans text-p4 font-bold leading-snug;
-  }
-}