@ably/ui 14.0.3 → 14.0.5

package/core/CookieMessage/component.css

@@ -8,6 +8,8 @@
     box-shadow: 0px 24px 32px 0px #0000000d;
     border: 1px solid var(--color-mid-grey);
     border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
+    transition:
+      bottom 250ms ease-out,
+      opacity 150ms ease-out;
   }
 }

package/core/Flash/component.css

@@ -8,7 +8,10 @@
 
   .ui-flash-message {
     @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+    transition:
+      opacity 200ms,
+      transform 200ms,
+      height 200ms 200ms,
       margin-top 200ms 200ms;
     transform: translateY(-200%) rotateX(-90deg);
   }

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})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden","data-id":"meganav-items-mobile"},React.createElement("li",null,(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.logOut)?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),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"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),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"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),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 React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},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===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.account)?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default 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})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.logOut)?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),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"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),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"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),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 React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},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===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.account)?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default 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/Slider/component.css

@@ -23,10 +23,10 @@
 
   @screen sm {
     .ui-icon-cta-left:hover .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right:hover .ui-icon-cta-holder {
       transform: translateX(0%);

package/core/Slider.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;

package/core/fonts/next.css

@@ -21,7 +21,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Light.eot");
-  src: url("NEXT-Book-Light.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Light.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Light.woff2") format("woff2"),
     url("NEXT-Book-Light.woff") format("woff");
   font-weight: 300;
@@ -31,7 +32,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Light-Italic.eot");
-  src: url("NEXT-Book-Light-Italic.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Light-Italic.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Light-Italic.woff2") format("woff2"),
     url("NEXT-Book-Light-Italic.woff") format("woff");
   font-weight: 300;
@@ -41,7 +43,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Medium.eot");
-  src: url("NEXT-Book-Medium.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Medium.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Medium.woff2") format("woff2"),
     url("NEXT-Book-Medium.woff") format("woff");
   font-weight: 500;
@@ -51,7 +54,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Medium-Italic.eot");
-  src: url("NEXT-Book-Medium-Italic.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Medium-Italic.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Medium-Italic.woff2") format("woff2"),
     url("NEXT-Book-Medium-Italic.woff") format("woff");
   font-weight: 500;

package/core/styles/forms.css

@@ -31,10 +31,6 @@
     @apply text-p2 font-medium text-cool-black;
   }
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
-
   .ui-checkbox-input:focus + .ui-checkbox-styled {
     border-width: 0.125rem;
     @apply border-gui-focus;
@@ -48,6 +44,10 @@
     @apply block;
   }
 
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
   .ui-textarea {
     @apply font-sans font-medium text-cool-black text-p1;
     @apply p-input mb-16;

package/core/styles/toggles.css

@@ -0,0 +1,38 @@
+@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;
+  }
+}

package/core/styles.components.css

@@ -2,6 +2,7 @@
 @import "./styles/layout.css";
 @import "./styles/text.css";
 @import "./styles/forms.css";
+@import "./styles/toggles.css";
 
 @layer components {
   .ui-input {
@@ -32,4 +33,12 @@
     margin-left: 3px;
     font-size: 8px;
   }
+
+  .ui-section-spacing {
+    @apply py-80 sm:py-96 md:py-128;
+  }
+
+  .ui-divider-spacing {
+    @apply my-20 sm:my-24 md:my-32;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.3",
+  "version": "14.0.5",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -16,13 +16,13 @@
   ],
   "devDependencies": {
     "@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/test": "^7.6.4",
+    "@storybook/addon-essentials": "^8.1.7",
+    "@storybook/addon-interactions": "^8.1.7",
+    "@storybook/addon-links": "^8.1.7",
+    "@storybook/blocks": "^8.1.7",
+    "@storybook/react": "^8.1.7",
+    "@storybook/react-vite": "^8.1.7",
+    "@storybook/test": "^8.1.7",
     "@swc/cli": "^0.3.10",
     "@swc/core": "^1.4.11",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -31,18 +31,18 @@
     "autoprefixer": "^10.0.2",
     "cypress": "^13.3.1",
     "eslint": "^7.12.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^3.2.0",
     "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-storybook": "^0.6.15",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
-    "prettier": "^2.3.0",
-    "storybook": "^7.6.4",
+    "eslint-plugin-storybook": "^0.8.0",
+    "msw": "2.3.1",
+    "msw-storybook-addon": "^2.0.2",
+    "prettier": "^3.2.5",
+    "storybook": "^8.1.7",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
-    "typescript": "5.3.3",
-    "vite": "^4.5.2"
+    "typescript": "5.4.5",
+    "vite": "^5.2.12"
   },
   "scripts": {
     "build:prebuild": "rm -rf core reset",
@@ -60,16 +60,16 @@
     "pre-release": "./scripts/pre-release.sh",
     "release": "./scripts/release.sh",
     "start": "vite --port 5000",
-    "storybook": "yarn build && storybook dev -p 6006 --no-version-updates",
+    "storybook": "yarn build && storybook dev -p 6006",
     "build-storybook": "yarn build && storybook build -o preview"
   },
   "dependencies": {
-    "addsearch-js-client": "^0.7.0",
+    "addsearch-js-client": "^0.8.11",
     "array-flat-polyfill": "^1.0.1",
-    "dompurify": "^2.2.9",
-    "highlight.js": "^10.7.2",
+    "dompurify": "^3.1.4",
+    "highlight.js": "^11.9.0",
     "highlightjs-curl": "^1.3.0",
-    "js-cookie": "^2.2.1",
+    "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
     "react": "^18.2.0",

package/reset/styles/reset.css

@@ -1,9 +1,19 @@
 /* Reset based on https://unpkg.com/tailwindcss@1.9.6/dist/base.css */
 @layer base {
   html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
       "Noto Color Emoji";
     line-height: 1.5;
   }

package/src/core/Accordion.tsx

@@ -118,7 +118,7 @@ const Accordion = ({
       setActiveIndexes(
         currentIndexIsActive
           ? activeIndexes.filter((i) => i !== index)
-          : [...activeIndexes, index]
+          : [...activeIndexes, index],
       );
     }
   };

package/src/core/ConnectStateWrapper.tsx

@@ -22,7 +22,7 @@ const ConnectStateWrapper = (Component, selectors) => {
     const store = getRemoteDataStore();
     const resolvedState = Object.keys(selectors).reduce(
       (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
-      {}
+      {},
     );
 
     // Set initial state

package/src/core/CookieMessage/component.css

@@ -8,6 +8,8 @@
     box-shadow: 0px 24px 32px 0px #0000000d;
     border: 1px solid var(--color-mid-grey);
     border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
+    transition:
+      bottom 250ms ease-out,
+      opacity 150ms ease-out;
   }
 }

package/src/core/FeaturedLink.tsx

@@ -58,7 +58,7 @@ const FeaturedLink = ({
         {
           "--featured-link-icon-size": `var(${textSize.replace(
             "text",
-            "--fs"
+            "--fs",
           )})`,
         } as CSSProperties
       }

package/src/core/Flash/component.css

@@ -8,7 +8,10 @@
 
   .ui-flash-message {
     @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+    transition:
+      opacity 200ms,
+      transform 200ms,
+      height 200ms 200ms,
       margin-top 200ms 200ms;
     transform: translateY(-200%) rotateX(-90deg);
   }

package/src/core/Meganav/Meganav.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { rest } from "msw";
+import { http, HttpResponse } from "msw";
 
 import Meganav from "../Meganav";
 import loadIcons from "../icons.js";
@@ -23,13 +23,13 @@ export default {
   component: Meganav,
   parameters: {
     layout: "fullscreen",
-    msw: [
-      rest.get("/api/me", (_req, res, ctx) => {
-        return res(ctx.json({}));
-      }),
-      rest.get("/api/blog", (_req, res, ctx) => {
-        return res(
-          ctx.json([
+    msw: {
+      handlers: [
+        http.get("/api/me", () => {
+          return HttpResponse.json({});
+        }),
+        http.get("/api/blog", () => {
+          return HttpResponse.json([
             {
               title: "Achieving exactly-once delivery with Ably",
               link: "https://ably.com/blog/achieving-exactly-once-message-processing-with-ably",
@@ -46,10 +46,10 @@ export default {
               link: "https://ably.com/blog/beam-optimization-mqtt",
               pubDate: "Jul 17, 2020",
             },
-          ])
-        );
-      }),
-    ],
+          ]);
+        }),
+      ],
+    },
   },
 };
 
@@ -57,7 +57,7 @@ attachStoreToWindow(
   createRemoteDataStore({
     ...reducerBlogPosts,
     ...reducerSessionData,
-  })
+  }),
 );
 
 const Page = () => {

package/src/core/Meganav/component.js

@@ -46,10 +46,10 @@ const documentScroll = (themeName) => {
   const meganav = queryId("meganav");
   const navItems = queryIdAll("meganav-link");
   const controlMobileDropdownMenu = queryId(
-    "meganav-control-mobile-dropdown-menu"
+    "meganav-control-mobile-dropdown-menu",
   );
   const controlMobileDropdownClose = queryId(
-    "meganav-control-mobile-dropdown-close"
+    "meganav-control-mobile-dropdown-close",
   );
   const controls = queryIdAll("meganav-control");
   const signUpBtn = queryId("meganav-sign-up-btn");
@@ -90,7 +90,7 @@ const documentScroll = (themeName) => {
       invertMobleDropdownColor(true);
 
       invertTextCollection.forEach((n) =>
-        n.classList.replace("text-white", "text-cool-black")
+        n.classList.replace("text-white", "text-cool-black"),
       );
     } else {
       meganav.classList.replace("bg-white", "bg-transparent");
@@ -98,7 +98,7 @@ const documentScroll = (themeName) => {
       invertMobleDropdownColor(false);
 
       invertTextCollection.forEach((n) =>
-        n.classList.replace("text-cool-black", "text-white")
+        n.classList.replace("text-cool-black", "text-white"),
       );
     }
   }, 150);
@@ -111,7 +111,7 @@ const documentScroll = (themeName) => {
 };
 
 export default function Meganav(
-  { themeName, addSearchApiKey } = { themeName: null }
+  { themeName, addSearchApiKey } = { themeName: null },
 ) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();

package/src/core/MeganavBlogPostsList/component.js

@@ -4,7 +4,7 @@ import { connectState } from "../remote-data-store";
 
 const template = ({ link, title, pubDate }) => {
   const [li, a, heading, copy] = ["li", "a", "p", "p"].map((el) =>
-    document.createElement(el)
+    document.createElement(el),
   );
 
   a.href = link;
@@ -36,7 +36,7 @@ export default () => {
       });
 
       Array.from(sections).forEach((section) =>
-        section.classList.remove("hidden")
+        section.classList.remove("hidden"),
       );
     }
   });

package/src/core/MeganavControl/component.js

@@ -4,19 +4,19 @@ const MeganavControl = () => {
   const controls = Array.from(queryIdAll("meganav-control"));
   const panels = Array.from(queryIdAll("meganav-panel"));
   const mdBreakpoint = getComputedStyle(
-    document.documentElement
+    document.documentElement,
   ).getPropertyValue("--bp-md");
 
   const hoverEnabled = () =>
     window.matchMedia(
-      `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`
+      `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`,
     ).matches;
 
   const isSearchControl = (node) => node.dataset.control === "search";
 
   const isSearchPanelOpen = () => {
     const searchPanel = document.querySelector(
-      '[data-id="meganav-panel"]#panel-search'
+      '[data-id="meganav-panel"]#panel-search',
     );
     if (!searchPanel) return;
     return !searchPanel.classList.contains("invisible");
@@ -42,11 +42,12 @@ const MeganavControl = () => {
 
   const clickHandler = (control, panel) => () => {
     controls.forEach(
-      (node) => node !== control && node.setAttribute("aria-expanded", false)
+      (node) => node !== control && node.setAttribute("aria-expanded", false),
     );
 
     panels.forEach(
-      (node) => node !== panel && node.classList.replace("visible", "invisible")
+      (node) =>
+        node !== panel && node.classList.replace("visible", "invisible"),
     );
 
     const ariaExpanded = control.getAttribute("aria-expanded");
@@ -79,7 +80,7 @@ const MeganavControl = () => {
     .map((control) => {
       const item = control.parentNode;
       const panel = document.querySelector(
-        `#${control.getAttribute("aria-controls")}`
+        `#${control.getAttribute("aria-controls")}`,
       );
       const click = clickHandler(control, panel);
       control.addEventListener("click", click);

package/src/core/MeganavControlMobilePanelClose/component.js

@@ -2,10 +2,10 @@ import { queryIdAll } from "../dom-query";
 
 export default () => {
   const closeControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-close")
+    queryIdAll("meganav-control-mobile-panel-close"),
   );
   const openControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-open")
+    queryIdAll("meganav-control-mobile-panel-open"),
   );
 
   const clickHandler = (btn, openBtn, panel) => () => {
@@ -18,10 +18,11 @@ export default () => {
   return closeControls.map((btn) => {
     const openBtn = openControls.find(
       (open) =>
-        open.getAttribute("aria-controls") === btn.getAttribute("aria-controls")
+        open.getAttribute("aria-controls") ===
+        btn.getAttribute("aria-controls"),
     );
     const panel = document.querySelector(
-      `#${btn.getAttribute("aria-controls")}`
+      `#${btn.getAttribute("aria-controls")}`,
     );
     const handler = clickHandler(btn, openBtn, panel);
 

package/src/core/MeganavControlMobilePanelOpen/component.js

@@ -3,18 +3,18 @@ import { remsToPixelValue } from "../css";
 
 export default () => {
   const closeControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-close")
+    queryIdAll("meganav-control-mobile-panel-close"),
   );
   const openControls = Array.from(
-    queryIdAll("meganav-control-mobile-panel-open")
+    queryIdAll("meganav-control-mobile-panel-open"),
   );
   const dropdown = queryId("meganav-mobile-dropdown");
 
   // Height is defined in rem's so to get the pixel value we need to find the fontSize on root
   const meganavHeight = remsToPixelValue(
     getComputedStyle(document.documentElement).getPropertyValue(
-      "--ui-meganav-height"
-    )
+      "--ui-meganav-height",
+    ),
   );
 
   const clickHandler = (btn, closeBtn, panel) => () => {
@@ -36,10 +36,11 @@ export default () => {
   return openControls.map((btn) => {
     const closeBtn = closeControls.find(
       (node) =>
-        node.getAttribute("aria-controls") === btn.getAttribute("aria-controls")
+        node.getAttribute("aria-controls") ===
+        btn.getAttribute("aria-controls"),
     );
     const panel = document.querySelector(
-      `#${btn.getAttribute("aria-controls")}`
+      `#${btn.getAttribute("aria-controls")}`,
     );
     const handler = clickHandler(btn, closeBtn, panel);
 

package/src/core/MeganavItemsMobile.tsx

@@ -37,7 +37,7 @@ const MeganavItemsMobile = ({
   const classNames = `ui-meganav-link ${theme.textColor}`;
 
   return (
-    <ul className="flex md:hidden" data-id="meganav-items-mobile">
+    <ul className="flex md:hidden items-center" data-id="meganav-items-mobile">
       <li>
         {sessionState?.signedIn && sessionState?.logOut ? (
           <SignOutLink absUrl={absUrl} {...sessionState.logOut}>

package/src/core/MeganavItemsSignedIn.tsx

@@ -24,7 +24,7 @@ const MeganavItemsSignedIn = ({
 }: MeganavItemsSignedIn) => {
   const links = sessionState.account
     ? Object.keys(sessionState.account.links).map(
-        (key) => sessionState.account.links[key]
+        (key) => sessionState.account.links[key],
       )
     : [];
   const accountName = truncate(sessionState.accountName, 20);

package/src/core/MeganavSearchAutocomplete/component.js

@@ -21,7 +21,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
   const markQueryInSuggestion = (suggestionValue, query) => {
     return suggestionValue.replace(
       query.toLowerCase(),
-      `<span class="font-light">${query}</span>`
+      `<span class="font-light">${query}</span>`,
     );
   };
 
@@ -29,7 +29,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
 
   const focusNext = (index) => {
     const nextSuggestion = listContainer.querySelector(
-      `[data-suggestion-index="${index + 1}"]`
+      `[data-suggestion-index="${index + 1}"]`,
     );
     if (!nextSuggestion) return;
     nextSuggestion.focus();
@@ -39,7 +39,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
     const previousIndex = index - 1;
 
     const previousSuggestion = listContainer.querySelector(
-      `[data-suggestion-index="${previousIndex}"]`
+      `[data-suggestion-index="${previousIndex}"]`,
     );
     if (!previousSuggestion) return;
     previousSuggestion.focus();
@@ -76,7 +76,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
           "rounded",
           "hover:text-gui-hover",
           "focus:outline-gui-focus",
-          "hover:bg-light-grey"
+          "hover:bg-light-grey",
         );
 
         button.innerHTML = markQueryInSuggestion(suggestion.value, query);
@@ -167,7 +167,7 @@ export default (apiKey) => {
       const parent = input.parentNode;
       const container = queryId(
         "meganav-search-autocomplete-container",
-        parent
+        parent,
       );
       const listContainer = queryId("meganav-search-autocomplete-list", parent);
       const clear = queryId("meganav-search-input-clear", parent);

package/src/core/Notice/component.js

@@ -84,7 +84,7 @@ const setupCloseBtn = (
   bannerContainer,
   cookieId,
   noticeId,
-  collapseUnmountListeners
+  collapseUnmountListeners,
 ) => {
   const closeBtn = bannerContainer.querySelector("button");
 
@@ -117,7 +117,7 @@ const Notice = ({ bannerContainer, cookieId, noticeId, options }) => {
 
   if (!bannerContainer) {
     console.warn(
-      "A Notice component was initited but no notice container was found."
+      "A Notice component was initited but no notice container was found.",
     );
     return () => {};
   }
@@ -137,7 +137,7 @@ const Notice = ({ bannerContainer, cookieId, noticeId, options }) => {
     bannerContainer,
     cookieId,
     noticeId,
-    collapseUnmountListeners
+    collapseUnmountListeners,
   );
 
   const resizeUnmountListener = resizeHandler(bannerContainer);

package/src/core/Slider/component.css

@@ -23,10 +23,10 @@
 
   @screen sm {
     .ui-icon-cta-left:hover .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right:hover .ui-icon-cta-holder {
       transform: translateX(0%);

package/src/core/Slider/component.js

@@ -31,12 +31,12 @@ const init = (slidesContainer) => {
 
   const updateSlide = (index) =>
     (transformContainer.style.transform = `translateX(${calculateTransform(
-      index
+      index,
     )}px)`);
 
   const updateMarkers = (index) => {
     slideMarkers.forEach((marker) =>
-      marker.classList.remove("text-active-orange")
+      marker.classList.remove("text-active-orange"),
     );
     slideMarkers[index].classList.remove("text-cool-black");
     slideMarkers[index].classList.add("text-active-orange");
@@ -98,7 +98,7 @@ const Slider = ({ container, mqEnableThreshold }) => {
       } else {
         unmount();
       }
-    }, 100)
+    }, 100),
   );
 };
 

package/src/core/Slider.tsx

@@ -59,7 +59,7 @@ const SlideIndicator = ({
               ⬤
             </span>
           </li>
-        )
+        ),
       )}
     </ul>
   );
@@ -76,7 +76,7 @@ const Slider = ({ children, options }: SliderProps) => {
   const [touchStartX, setTouchStartX] = useState(0);
   const [touchEndX, setTouchEndX] = useState(0);
   const [slides, setSlides] = useState<ReactNode[]>(
-    setupSlides(children, activeIndex)
+    setupSlides(children, activeIndex),
   );
   const [translationCoefficient, setTranslationCoefficient] = useState(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -96,7 +96,7 @@ const Slider = ({ children, options }: SliderProps) => {
   const prev = () => {
     if (!slideLock) {
       setActiveIndex((prevIndex) =>
-        prevIndex > 0 ? prevIndex - 1 : children.length - 1
+        prevIndex > 0 ? prevIndex - 1 : children.length - 1,
       );
       setTranslationCoefficient(-1);
       resetInterval();
@@ -183,7 +183,7 @@ const Slider = ({ children, options }: SliderProps) => {
           } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
           onClick={prev}
         >
-          <div className="ui-icon-cta-holder flex gap-4">
+          <div className="ui-icon-cta-holder flex w-48">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-left" size="1.5rem" />
             </div>
@@ -207,7 +207,7 @@ const Slider = ({ children, options }: SliderProps) => {
           } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
           onClick={next}
         >
-          <div className="ui-icon-cta-holder flex gap-4">
+          <div className="ui-icon-cta-holder flex w-48">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-right" size="1.5rem" />
             </div>

package/src/core/fonts/next.css

@@ -21,7 +21,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Light.eot");
-  src: url("NEXT-Book-Light.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Light.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Light.woff2") format("woff2"),
     url("NEXT-Book-Light.woff") format("woff");
   font-weight: 300;
@@ -31,7 +32,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Light-Italic.eot");
-  src: url("NEXT-Book-Light-Italic.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Light-Italic.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Light-Italic.woff2") format("woff2"),
     url("NEXT-Book-Light-Italic.woff") format("woff");
   font-weight: 300;
@@ -41,7 +43,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Medium.eot");
-  src: url("NEXT-Book-Medium.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Medium.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Medium.woff2") format("woff2"),
     url("NEXT-Book-Medium.woff") format("woff");
   font-weight: 500;
@@ -51,7 +54,8 @@
 @font-face {
   font-family: "NEXT Book";
   src: url("NEXT-Book-Medium-Italic.eot");
-  src: url("NEXT-Book-Medium-Italic.eot?#iefix") format("embedded-opentype"),
+  src:
+    url("NEXT-Book-Medium-Italic.eot?#iefix") format("embedded-opentype"),
     url("NEXT-Book-Medium-Italic.woff2") format("woff2"),
     url("NEXT-Book-Medium-Italic.woff") format("woff");
   font-weight: 500;

package/src/core/remote-blogs-posts.js

@@ -4,7 +4,7 @@ const fetchBlogPosts = async (store, blogUrl) => {
   try {
     if (!blogUrl) {
       console.log(
-        `Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`
+        `Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`,
       );
       return;
     }

package/src/core/remote-session-data.js

@@ -12,7 +12,7 @@ const fetchSessionData = async (store, sessionUrl) => {
   try {
     if (!sessionUrl) {
       console.log(
-        `Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`
+        `Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`,
       );
       sessionLoaded();
       return;

package/src/core/styles/forms.css

@@ -31,10 +31,6 @@
     @apply text-p2 font-medium text-cool-black;
   }
 
-  .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
-  }
-
   .ui-checkbox-input:focus + .ui-checkbox-styled {
     border-width: 0.125rem;
     @apply border-gui-focus;
@@ -48,6 +44,10 @@
     @apply block;
   }
 
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
   .ui-textarea {
     @apply font-sans font-medium text-cool-black text-p1;
     @apply p-input mb-16;

package/src/core/styles/toggles.css

@@ -0,0 +1,38 @@
+@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;
+  }
+}

package/src/core/styles.components.css

@@ -2,6 +2,7 @@
 @import "./styles/layout.css";
 @import "./styles/text.css";
 @import "./styles/forms.css";
+@import "./styles/toggles.css";
 
 @layer components {
   .ui-input {
@@ -32,4 +33,12 @@
     margin-left: 3px;
     font-size: 8px;
   }
+
+  .ui-section-spacing {
+    @apply py-80 sm:py-96 md:py-128;
+  }
+
+  .ui-divider-spacing {
+    @apply my-20 sm:my-24 md:my-32;
+  }
 }

package/src/pages/Forms.mdx

@@ -82,7 +82,7 @@ import Icon from "../core/Icon";
     <h4 className="ui-text-h3 mb-16">
       Checkboxes with P2 size text and tighter spacing
     </h4>
-    <div className="flex items-start mb-12">
+    <div className="ui-checkbox-p2">
       <input
         data-ui-checkbox-native=""
         type="checkbox"
@@ -108,7 +108,7 @@ import Icon from "../core/Icon";
         this privacy policy.
       </label>
     </div>
-    <div className="flex items-start mb-12">
+    <div className="ui-checkbox-p2">
       <input
         data-ui-checkbox-native=""
         type="checkbox"
@@ -150,6 +150,52 @@ import Icon from "../core/Icon";
       </label>
     </div>
   </div>
+  <div className="mb-40">
+    <h4 className="ui-text-h3 mb-16">Disabled checkboxes</h4>
+    <div className="ui-checkbox-p2">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-7"
+        name="checkbox-example-7"
+        value="yes"
+        className="ui-checkbox-input"
+        disabled
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-7" className="ui-checkbox-label-p2">
+        Disabled checkbox
+      </label>
+    </div>
+    <div className="ui-checkbox-p2">
+      <input
+        data-ui-checkbox-native=""
+        type="checkbox"
+        id="checkbox-example-8"
+        name="checkbox-example-8"
+        value="yes"
+        className="ui-checkbox-input"
+        checked
+        disabled
+      />
+      <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+        <Icon
+          name="icon-gui-tick"
+          size="1rem"
+          additionalCSS="ui-checkbox-styled-tick"
+        />
+      </div>
+      <label htmlFor="checkbox-example-8" className="ui-checkbox-label-p2">
+        Disabled checkbox with a checked state
+      </label>
+    </div>
+  </div>
   <h3 className="ui-text-h2 mb-24">Textarea</h3>
   <div className="mb-40">
     <label className="ui-text-p1 block mb-24" htmlFor="example-text-area">

package/src/pages/Toggles.mdx

@@ -0,0 +1,42 @@
+import { Meta, Unstyled } from "@storybook/blocks";
+import { togglesHtml } from "./utils.ts";
+import Code from "../core/Code";
+
+<Meta title="Brand/Toggles" />
+
+<Unstyled>
+  <h1 className="ui-text-h1 mb-32">Toggles</h1>
+
+  <div className="flex items-center gap-24 mb-24">
+    <label className="ui-toggle">
+      <input type="checkbox" />
+      <span className="ui-toggle-slider"></span>
+    </label>
+    Default
+  </div>
+  <div className="flex items-center gap-24 mb-24">
+    <label className="ui-toggle">
+      <input type="checkbox" checked />
+      <span className="ui-toggle-slider"></span>
+    </label>
+    Toggled
+  </div>
+  <div className="flex items-center gap-24 mb-24">
+    <label className="ui-toggle">
+      <input type="checkbox" disabled />
+      <span className="ui-toggle-slider"></span>
+    </label>
+    Disabled
+  </div>
+  <div className="flex items-center gap-24 mb-24">
+    <label className="ui-toggle">
+      <input type="checkbox" />
+      <span className="ui-toggle-slider bg-neutral-800"></span>
+    </label>
+    Customised slider colour
+  </div>
+  <div className="ui-divider-spacing">
+    <h4 className="ui-text-h3 mb-16">Example HTML</h4>
+    <Code language="html" snippet={togglesHtml} />
+  </div>
+</Unstyled>

package/src/pages/utils.ts

@@ -68,3 +68,13 @@ export const formsHtml = `
   <label for="checkbox-example" class="ui-checkbox-label-p1">Yes</label>
 </div>
 `;
+
+export const togglesHtml = `
+<div className="flex items-center gap-24 mb-16">
+  <label className="ui-toggle">
+    <input type="checkbox" />
+    <span className="ui-toggle-slider"></span>
+  </label>
+  Default
+</div>
+`;

package/src/reset/styles/reset.css

@@ -1,9 +1,19 @@
 /* Reset based on https://unpkg.com/tailwindcss@1.9.6/dist/base.css */
 @layer base {
   html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
       "Noto Color Emoji";
     line-height: 1.5;
   }

package/tailwind.config.js

@@ -271,6 +271,9 @@ module.exports = {
       quote: "0rem 1.5rem 2rem 0rem #0000000d",
       // opacity
     },
+    dropShadow: {
+      toggle: ["0 4px 4px rgba(0,0,0,0.25)", "0 4px 8px rgba(0,0,0,0.15)"],
+    },
     letterSpacing: {
       "tighten-0.025": "var(--ls-tighten-0_025)",
       "tighten-0.02": "var(--ls-tighten-0_02)",

package/tailwind.extend.js

@@ -7,7 +7,7 @@ const ablyUItailwindConfig = (extend) => {
   // Create absolute paths to templates in AblyUI
   const addPurgeContentPaths = () => {
     const paths = ["*.html.erb", "*", "*.js", "*.json"].map((fileGlob) =>
-      path.join(ablyUiConfigPath, "src", "**", fileGlob)
+      path.join(ablyUiConfigPath, "src", "**", fileGlob),
     );
 
     return paths;