@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.ae75f49

package/README.md

@@ -224,9 +224,10 @@ All components live in `src` and follow a directory and filename convention:
 - module directory (TitleCase)
   - module asset files: `scripts.js` for JavaScript and `styles.css` for CSS
   - component directory (TitleCase)
-    - `component.js` - this is the entry file for a component and is the only required file
-    - `components.css` - additional CSS
-    - for react, `components.tsx`
+    - `component.js` - supporting/legacy JS script
+    - `component.css` - additional CSS
+    - `[ComponentName].stories.tsx` - if React, a Storybook presentation file
+  - if React, `[ComponentName].tsx` at a sibling level to the component directory
 
 For example:
 
@@ -237,7 +238,8 @@ For example:
   - Accordion
     - component.js
     - component.css
-    - component.tsx
+    - Accordion.stories.tsx
+  - Accordion.tsx
 ```
 
 #### CSS
@@ -254,15 +256,11 @@ By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) wil
 
 #### To add a new component:
 
-1. Create a folder in `src`, in the module of your choice (i.e. `core`). The folder name should be TitleCase.
-2. Add a `component.tsx`
-
-- also add an empty `component.js` file (current legacy requirement)
-- if the component has custom CSS, add a `component.css` file as well.
+Add a `[ComponentName].tsx` file in `src`, in the module of your choice (most likely `core`). Any supporting files, i.e. stylesheets, should be placed in a directory with the same name of the component.
 
 #### To see this component in Storybook:
 
-Create a `[COMPONENT_NAME].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
+Create a `[ComponentName].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
 
 ### Publishing
 

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useState}from"react";import Icon from"../Icon/component.tsx";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;
+import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose,className})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;

package/core/Code.js

@@ -1 +1 @@
-import React from"react";import"../utils/syntax-highlighter.css";import{highlightSnippet,registerDefaultLanguages}from"../utils/syntax-highlighter";import languagesRegistry from"../utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/ConnectStateWrapper.js

@@ -1 +1 @@
-import React,{useEffect,useState}from"react";import{connectState,getRemoteDataStore}from"../remote-data-store";const ConnectStateWrapper=(Component,selectors)=>{const[state,setState]=useState({});const setStateForKey=key=>storeState=>setState(()=>({[key]:storeState}));useEffect(()=>{const store=getRemoteDataStore();const resolvedState=Object.keys(selectors).reduce((acc,key)=>({...acc,[key]:selectors[key](store)}),{});setState(resolvedState);Object.keys(selectors).forEach(key=>{connectState(selectors[key],setStateForKey(key))})},[]);const WrappedComponent=props=>React.createElement(Component,{...props,...state});return WrappedComponent};export default ConnectStateWrapper;
+import React,{useEffect,useState}from"react";import{connectState,getRemoteDataStore}from"./remote-data-store";const ConnectStateWrapper=(Component,selectors)=>{const[state,setState]=useState({});const setStateForKey=key=>storeState=>setState(()=>({[key]:storeState}));useEffect(()=>{const store=getRemoteDataStore();const resolvedState=Object.keys(selectors).reduce((acc,key)=>({...acc,[key]:selectors[key](store)}),{});setState(resolvedState);Object.keys(selectors).forEach(key=>{connectState(selectors[key],setStateForKey(key))})},[]);const WrappedComponent=props=>React.createElement(Component,{...props,...state});return WrappedComponent};export default ConnectStateWrapper;

package/core/ContactFooter/component.css

@@ -1,9 +1,11 @@
-.ui-contact-footer {
-  background-size: 100% 100%;
-  background-position: right center;
-  @apply w-full bg-gradient-active-orange;
-}
+@layer components {
+  .ui-contact-footer {
+    background-size: 100% 100%;
+    background-position: right center;
+    @apply w-full bg-gradient-active-orange;
+  }
 
-.ui-contact-footer-box {
-  @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  .ui-contact-footer-box {
+    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  }
 }

package/core/ContactFooter.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import Icon from"../Icon/component.tsx";import _absUrl from"../url-base.js";import toggleChatWidget from"../hubspot-chat-toggle";import"./component.css";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;
+import React,{useEffect}from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import toggleChatWidget from"./hubspot-chat-toggle";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;

package/core/CookieMessage/component.css

@@ -1,11 +1,13 @@
-.ui-cookie-message {
-  @apply rounded-lg bg-white font-sans;
-  @apply justify-between items-center;
-  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-  @apply p-16 mb-16 ml-16;
-  max-width: 70vw;
-  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;
+@layer components {
+  .ui-cookie-message {
+    @apply rounded-lg bg-white font-sans;
+    @apply justify-between items-center;
+    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+    @apply p-16 mb-16 ml-16;
+    max-width: 70vw;
+    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;
+  }
 }

package/core/CookieMessage.js

@@ -1 +1 @@
-import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import"./component.css";import _absUrl from"../url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{var _ref_current;Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});(_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
+import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{var _ref_current;Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});(_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;

package/core/DropdownMenu.js

@@ -1 +1 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"../Icon/component.tsx";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{var _ref_current;if((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>{document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
+import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{var _ref_current;if((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>{document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;

package/core/Expander.js

@@ -0,0 +1 @@
+import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;const contentHeight=(_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"},expanded?"View less -":"View all +"))};export default Expander;

package/core/FeaturedLink.js

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

package/core/Flash/component.css

@@ -1,23 +1,25 @@
-.ui-flash {
-  @apply w-full fixed;
-  top: 5.5rem;
-  z-index: calc(var(--stacking-context-page-meganav) - 10);
-  transition: margin-top 200ms;
-}
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
 
-.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,
-    margin-top 200ms 200ms;
-  transform: translateY(-200%) rotateX(-90deg);
-}
+  .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,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
 
-/* dynamic content inside flash, can't add classes */
-.ui-flash-text a {
-  @apply underline;
-}
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
 
-.ui-flash-message-enter {
-  @apply opacity-100;
-  transform: translateY(0) rotateX(0);
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
 }

package/core/Flash.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{nanoid}from"nanoid/non-secure";import{getRemoteDataStore}from"../remote-data-store.js";import ConnectStateWrapper from"../ConnectStateWrapper/component.tsx";import Icon from"../Icon/component.tsx";import"./component.css";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"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},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===null||flashes===void 0?void 0:flashes.items).map(flash=>({...flash,id:nanoid(),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>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 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{nanoid}from"nanoid/non-secure";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"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},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===null||flashes===void 0?void 0:flashes.items).map(flash=>({...flash,id:nanoid(),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>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 React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/Footer/component.css

@@ -1,31 +1,33 @@
-.ui-footer-col-title {
-  @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-}
+@layer components {
+  .ui-footer-col-title {
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+  }
 
-.ui-footer-menu-row-link {
-  @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
-}
+  .ui-footer-menu-row-link {
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+  }
 
-.ui-footer-link {
-  @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-}
+  .ui-footer-link {
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+  }
 
-.ui-footer-compliance-text {
-  font-size: 12px;
-}
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
 
-.ui-footer-tick-icon {
-  min-width: 1.5rem;
-}
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
 
-@media (max-width: 1040px) {
-  .ui-footer-bottom-links {
-    @apply pb-40;
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
   }
-}
 
-@media screen {
-  .ui-footer-glassdoor {
-    display: none;
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }

package/core/Footer.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";import _absUrl from"../url-base.js";import"./component.css";const Footer=({paths,urlBase})=>{const absUrl=path=>_absUrl(path,urlBase);return React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},React.createElement("div",{className:"col-span-full md:col-span-2"},React.createElement("div",{className:"flex flex-row p-menu-row-snug"},React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),React.createElement("ul",{className:"grid grid-cols-1"},React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/channels"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),React.createElement("li",{className:"p-menu-row-snug flex items-center -mt-4"},React.createElement("a",{className:"pr-8 ui-footer-menu-row-link",href:"https://status.ably.com/"},"System status"),React.createElement("iframe",{className:"w-20 h-20 mb-2",src:"https://status.ably.com/embed/icon",style:{backgroundColor:"transparent"},frameBorder:"0",scrolling:"no",title:"System Status"})))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},React.createElement("div",{className:"md:flex md:items-center"},React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},React.createElement("div",{className:""},React.createElement("div",{className:"flex pb-24"},React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},React.createElement(Icon,{name:"linkedin",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},React.createElement(Icon,{name:"github",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},React.createElement(Icon,{name:"discord",size:"1.5rem"})))),React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"glassdoor",size:"1.5rem"})),React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"xs:block sm:hidden"},React.createElement("div",{className:"border-t border-mid-grey w-full"}),React.createElement("div",{className:"flex py-24"},React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"glassdoor",size:"1.5rem"})),React.createElement("div",{className:"text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},React.createElement("img",{className:"mr-24 h-80",src:paths.highestUserAdoption,alt:"Highest User Adoption 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.fastestImplementation,alt:"Fastest Implementation 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.highestPerformer,alt:"High Performer 2023"}))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},React.createElement("div",{className:"flex"},React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},React.createElement("div",{className:"flex mr-24"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-2"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),React.createElement("div",{className:"flex mr-24 md:col-start-3"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-4"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;
+import React from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";const Footer=({paths,urlBase})=>{const absUrl=path=>_absUrl(path,urlBase);return React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},React.createElement("div",{className:"col-span-full md:col-span-2"},React.createElement("div",{className:"flex flex-row p-menu-row-snug"},React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),React.createElement("ul",{className:"grid grid-cols-1"},React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/channels"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),React.createElement("li",{className:"p-menu-row-snug flex items-center -mt-4"},React.createElement("a",{className:"pr-8 ui-footer-menu-row-link",href:"https://status.ably.com/"},"System status"),React.createElement("iframe",{className:"w-20 h-20 mb-2",src:"https://status.ably.com/embed/icon",style:{backgroundColor:"transparent"},frameBorder:"0",scrolling:"no",title:"System Status"})))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},React.createElement("div",{className:"md:flex md:items-center"},React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},React.createElement("div",{className:""},React.createElement("div",{className:"flex pb-24"},React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},React.createElement(Icon,{name:"linkedin",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},React.createElement(Icon,{name:"github",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},React.createElement(Icon,{name:"discord",size:"1.5rem"})))),React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"glassdoor",size:"1.5rem"})),React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"xs:block sm:hidden"},React.createElement("div",{className:"border-t border-mid-grey w-full"}),React.createElement("div",{className:"flex py-24"},React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"glassdoor",size:"1.5rem"})),React.createElement("div",{className:"text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},React.createElement("img",{className:"mr-24 h-80",src:paths.highestUserAdoption,alt:"Highest User Adoption 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.fastestImplementation,alt:"Fastest Implementation 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.highestPerformer,alt:"High Performer 2023"}))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},React.createElement("div",{className:"flex"},React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},React.createElement("div",{className:"flex mr-24"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-2"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),React.createElement("div",{className:"flex mr-24 md:col-start-3"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-4"},React.createElement(Icon,{name:"icon-gui-tick",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;

package/core/Meganav/component.css

@@ -1,112 +1,114 @@
-.ui-meganav-wrapper {
-  /* Define values for new stacking context defined by position: fixed */
-  --stacking-context-meganav-dropdown: 10;
-  --stacking-context-meganav-mobile-panel: 20;
-
-  z-index: var(--stacking-context-page-meganav);
-
-  @apply fixed top-0 w-full;
-  @apply antialiased font-sans transition-colors;
-}
-
-.ui-meganav {
-  height: var(--ui-meganav-height);
-
-  @apply flex justify-between items-center max-w-screen-xl mx-auto;
-}
-
-.ui-meganav-panel,
-.ui-meganav-mobile-dropdown,
-.ui-meganav-panel-account {
-  z-index: var(--stacking-context-meganav-dropdown);
-
-  @apply absolute left-0 right-0;
-  @apply border-mid-grey border-t shadow-container;
-}
-
-.ui-meganav-panel {
-  @apply bg-white;
-}
-
-.ui-meganav-panel-mobile {
-  z-index: var(--stacking-context-meganav-mobile-panel);
-
-  /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
-  -webkit-overflow-scrolling: auto;
-
-  @apply bg-white pt-16 border-0;
-  @apply border-mid-grey border-t shadow-container;
-  @apply fixed top-64 left-0 right-0 overflow-y-auto;
-}
-
-.ui-meganav-panel-account {
-  left: auto;
-  min-width: 20rem;
-  @apply bg-white rounded-t-none;
-}
-
-.ui-meganav-panel-split-bg {
-  background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
-}
-
-.ui-meganav-link {
-  @apply text-menu2 font-bold font-sans;
-  @apply mr-12 lg:mr-24 px-0 py-20;
-  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
-  @apply transition-colors;
-}
-
-.ui-meganav-item {
-  flex: 1 0 auto;
-}
-
-.ui-meganav-mobile-link {
-  @apply p-menu-row relative -left-8 w-extend-8;
-  @apply text-menu2 font-mono font-medium block text-cool-black text-left;
-  @apply flex items-center;
-  @apply focus:text-gui-focus focus:outline-none;
-}
-
-.ui-meganav-account-link {
-  @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
-}
-
-.ui-meganav-content {
-  @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
-  @apply grid grid-cols-1;
-  @apply px-24 md:px-32 lg:px-32 xl:px-64;
-}
-
-/* This is implemented not as padding so we can change the color of just this space, while keeping the grid
+@layer components {
+  .ui-meganav-wrapper {
+    /* Define values for new stacking context defined by position: fixed */
+    --stacking-context-meganav-dropdown: 10;
+    --stacking-context-meganav-mobile-panel: 20;
+
+    z-index: var(--stacking-context-page-meganav);
+
+    @apply fixed top-0 w-full;
+    @apply antialiased font-sans transition-colors;
+  }
+
+  .ui-meganav {
+    height: var(--ui-meganav-height);
+
+    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+  }
+
+  .ui-meganav-panel,
+  .ui-meganav-mobile-dropdown,
+  .ui-meganav-panel-account {
+    z-index: var(--stacking-context-meganav-dropdown);
+
+    @apply absolute left-0 right-0;
+    @apply border-mid-grey border-t shadow-container;
+  }
+
+  .ui-meganav-panel {
+    @apply bg-white;
+  }
+
+  .ui-meganav-panel-mobile {
+    z-index: var(--stacking-context-meganav-mobile-panel);
+
+    /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
+    -webkit-overflow-scrolling: auto;
+
+    @apply bg-white pt-16 border-0;
+    @apply border-mid-grey border-t shadow-container;
+    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+  }
+
+  .ui-meganav-panel-account {
+    left: auto;
+    min-width: 20rem;
+    @apply bg-white rounded-t-none;
+  }
+
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
+  .ui-meganav-link {
+    @apply text-menu2 font-bold font-sans;
+    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
+    @apply transition-colors;
+  }
+
+  .ui-meganav-item {
+    flex: 1 0 auto;
+  }
+
+  .ui-meganav-mobile-link {
+    @apply p-menu-row relative -left-8 w-extend-8;
+    @apply text-menu2 font-mono font-medium block text-cool-black text-left;
+    @apply flex items-center;
+    @apply focus:text-gui-focus focus:outline-none;
+  }
+
+  .ui-meganav-account-link {
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
+  }
+
+  .ui-meganav-content {
+    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply grid grid-cols-1;
+    @apply px-24 md:px-32 lg:px-32 xl:px-64;
+  }
+
+  /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
      as close to the designs as possible */
-.ui-meganav-content-spacer {
-  @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
-}
+  .ui-meganav-content-spacer {
+    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+  }
 
-.ui-meganav-media {
-  @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-}
+  .ui-meganav-media {
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+  }
 
-.ui-meganav-media-with-image {
-  grid-template-columns: max-content 1fr;
-  grid-template-rows: min-content 1fr;
+  .ui-meganav-media-with-image {
+    grid-template-columns: max-content 1fr;
+    grid-template-rows: min-content 1fr;
 
-  @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-  @apply grid gap-x-16;
-}
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply grid gap-x-16;
+  }
 
-.ui-meganav-media-heading {
-  @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
-}
+  .ui-meganav-media-heading {
+    @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
+  }
 
-.ui-meganav-media-copy {
-  @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
-}
+  .ui-meganav-media-copy {
+    @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
+  }
 
-.ui-meganav-overline {
-  @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
-}
+  .ui-meganav-overline {
+    @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
+  }
 
-.ui-meganav-hr {
-  @apply my-0 text-mid-grey;
+  .ui-meganav-hr {
+    @apply my-0 text-mid-grey;
+  }
 }