@ably/ui 14.0.0-dev.75dcb64 → 14.0.0-dev.968e4a2

package/core/MeganavItemsSignedIn.js

@@ -1 +1 @@
-import React from"react";import MeganavControl from"./MeganavControl";import SignOutLink from"./SignOutLink";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return(string===null||string===void 0?void 0:string.length)&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,theme,absUrl})=>{const links=sessionState.account?Object.keys(sessionState.account.links).map(key=>sessionState.account.links[key]):[];const accountName=truncate(sessionState.accountName,20);const preferredEmail=truncate(sessionState.preferredEmail,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement(MeganavControl,{ariaControls:"account-panel",ariaLabel:"Account",theme:theme,additionalCSS:"mr-0"},accountName),React.createElement("div",{className:"ui-meganav-panel-account invisible",id:"account-panel","data-id":"meganav-panel"},sessionState.account&&React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-meganav-overline mt-16 mx-16"},"Your account"),React.createElement("ul",{className:"mb-16 mx-16"},links.map(item=>React.createElement("li",{key:item.href},React.createElement("a",{className:"ui-meganav-account-link",href:absUrl(item.href)},item.text))))),React.createElement("p",{className:"ui-meganav-overline mx-16"},preferredEmail),React.createElement("ul",{className:"mb-8 mx-16"},React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.mySettings.href),className:"ui-meganav-account-link"},sessionState.mySettings.text)),sessionState.myAccessTokens&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.myAccessTokens.href),className:"ui-meganav-account-link"},sessionState.myAccessTokens.text,React.createElement("span",{className:"ui-version-tag"},"preview")))),React.createElement("hr",{className:"ui-meganav-hr mb-16"}),sessionState.logOut&&React.createElement("div",{className:"mb-16 px-16"},React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:"ui-meganav-account-link"},text))))),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
+import React from"react";import MeganavControl from"../MeganavControl/component.tsx";import SignOutLink from"../SignOutLink/component.tsx";import MeganavSearch from"../MeganavSearch/component.tsx";const truncate=(string,length)=>{return(string===null||string===void 0?void 0:string.length)&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,theme,absUrl})=>{const links=sessionState.account?Object.keys(sessionState.account.links).map(key=>sessionState.account.links[key]):[];const accountName=truncate(sessionState.accountName,20);const preferredEmail=truncate(sessionState.preferredEmail,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement(MeganavControl,{ariaControls:"account-panel",ariaLabel:"Account",theme:theme,additionalCSS:"mr-0"},accountName),React.createElement("div",{className:"ui-meganav-panel-account invisible",id:"account-panel","data-id":"meganav-panel"},sessionState.account&&React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-meganav-overline mt-16 mx-16"},"Your account"),React.createElement("ul",{className:"mb-16 mx-16"},links.map(item=>React.createElement("li",{key:item.href},React.createElement("a",{className:"ui-meganav-account-link",href:absUrl(item.href)},item.text))))),React.createElement("p",{className:"ui-meganav-overline mx-16"},preferredEmail),React.createElement("ul",{className:"mb-8 mx-16"},React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.mySettings.href),className:"ui-meganav-account-link"},sessionState.mySettings.text)),sessionState.myAccessTokens&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.myAccessTokens.href),className:"ui-meganav-account-link"},sessionState.myAccessTokens.text,React.createElement("span",{className:"ui-version-tag"},"preview")))),React.createElement("hr",{className:"ui-meganav-hr mb-16"}),sessionState.logOut&&React.createElement("div",{className:"mb-16 px-16"},React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:"ui-meganav-account-link"},text))))),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;

package/core/MeganavSearch.js

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

package/core/MeganavSearchPanel.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",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"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;
+import React from"react";import Icon from"../Icon/component.tsx";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.tsx";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.tsx";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",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"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;

package/core/MeganavSearchSuggestions.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavSearchSuggestions=({absUrl,displaySupportLink})=>React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-overline2 text-cool-black py-12"},"Popular pages"),React.createElement("div",{className:"flex justify-between items-center overflow-hidden"},React.createElement("ul",{className:"flex transition-transform"},React.createElement("li",{className:"py-12 pr-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/how-ably-works"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"How does Ably work?")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Quickstart guide")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/core-features/pubsub"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Publish/Subscribe Messaging")),React.createElement("li",{className:"py-12 pl-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/platform"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Platform"))),displaySupportLink?React.createElement(FeaturedLink,{url:absUrl("/support"),textSize:"text-p2"},"Support"):null));export default MeganavSearchSuggestions;
+import React from"react";import FeaturedLink from"../FeaturedLink/component.tsx";const MeganavSearchSuggestions=({absUrl,displaySupportLink})=>React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-overline2 text-cool-black py-12"},"Popular pages"),React.createElement("div",{className:"flex justify-between items-center overflow-hidden"},React.createElement("ul",{className:"flex transition-transform"},React.createElement("li",{className:"py-12 pr-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/how-ably-works"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"How does Ably work?")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Quickstart guide")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/core-features/pubsub"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Publish/Subscribe Messaging")),React.createElement("li",{className:"py-12 pl-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/platform"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Platform"))),displaySupportLink?React.createElement(FeaturedLink,{url:absUrl("/support"),textSize:"text-p2"},"Support"):null));export default MeganavSearchSuggestions;

package/core/Notice/component.js

@@ -1 +1 @@
-import"./component.css";import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash";const COOKIE_EXPIRY=90;const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&&noticeId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;
+import"./component.css";import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash/component.tsx";const COOKIE_EXPIRY=90;const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&&noticeId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;

package/core/Notice.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import"./Notice/component.css";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config===null||config===void 0?void 0:config.cookieId,noticeId:config===null||config===void 0?void 0:config.noticeId,options:{collapse:(config===null||config===void 0?void 0:config.collapse)||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink!==null&&buttonLink!==void 0?buttonLink:"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;
+import React,{useEffect}from"react";import NoticeScripts from"./component.js";import"./component.css";import Icon from"../Icon/component.tsx";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config===null||config===void 0?void 0:config.cookieId,noticeId:config===null||config===void 0?void 0:config.noticeId,options:{collapse:(config===null||config===void 0?void 0:config.collapse)||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink!==null&&buttonLink!==void 0?buttonLink:"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;

package/core/Slider.js

@@ -1 +1 @@
-import React,{useEffect,useRef}from"react";import Icon from"./Icon";import SliderScripts from"./Slider/component.js";import"./Slider/component.css";const Slider=({slides=[],classes="",slideClasses="",slideMinWidth="16.875rem",slideMaxWidth="1fr",mqEnableThreshold=()=>true,...props})=>{const containerRef=useRef(null);useEffect(()=>{SliderScripts({container:containerRef.current,mqEnableThreshold})},[]);if(slides.length===0)return;return React.createElement("div",{className:"w-full overflow-x-hidden","data-id":"slider",style:{"--dynamic-grid-columns-count":slides.length,"--dynamic-grid-column-min-width":slideMinWidth,"--dynamic-grid-column-max-width":slideMaxWidth},ref:containerRef},React.createElement("ol",{className:`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`,"data-id":"slider-strip",...props},slides.map((slide,i)=>React.createElement("li",{key:i,className:slideClasses,"data-id":"slider-slide"},slide))),React.createElement("div",{className:"justify-center items-center my-24 hidden","data-id":"slider-controls"},React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-previous"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black",additionalCSS:"transform rotate-180","data-id":"meganav-control-mobile-dropdown-menu"})),React.createElement("ul",{className:"flex justify-center items-center mx-32 relative h-24"},slides.map((_,i)=>React.createElement("li",{key:i},React.createElement("span",{className:"ui-slider-marker text-cool-black","data-id":"slider-marker"},"⬤")," "))),React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-next"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black","data-id":"meganav-control-mobile-dropdown-menu"}))))};export default Slider;
+import React,{useEffect,useRef}from"react";import Icon from"../Icon/component.tsx";import SliderScripts from"./component.js";import"./component.css";const Slider=({slides=[],classes="",slideClasses="",slideMinWidth="16.875rem",slideMaxWidth="1fr",mqEnableThreshold=()=>true,...props})=>{const containerRef=useRef(null);useEffect(()=>{SliderScripts({container:containerRef.current,mqEnableThreshold})},[]);if(slides.length===0)return;return React.createElement("div",{className:"w-full overflow-x-hidden","data-id":"slider",style:{"--dynamic-grid-columns-count":slides.length,"--dynamic-grid-column-min-width":slideMinWidth,"--dynamic-grid-column-max-width":slideMaxWidth},ref:containerRef},React.createElement("ol",{className:`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`,"data-id":"slider-strip",...props},slides.map((slide,i)=>React.createElement("li",{key:i,className:slideClasses,"data-id":"slider-slide"},slide))),React.createElement("div",{className:"justify-center items-center my-24 hidden","data-id":"slider-controls"},React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-previous"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black",additionalCSS:"transform rotate-180","data-id":"meganav-control-mobile-dropdown-menu"})),React.createElement("ul",{className:"flex justify-center items-center mx-32 relative h-24"},slides.map((_,i)=>React.createElement("li",{key:i},React.createElement("span",{className:"ui-slider-marker text-cool-black","data-id":"slider-marker"},"⬤")," "))),React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-next"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black","data-id":"meganav-control-mobile-dropdown-menu"}))))};export default Slider;

package/core/Table/TableCell.js

@@ -1,4 +1,4 @@
-import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
+import React from"react";import Icon from"../Icon/component.tsx";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
     ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
   `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
         border-light-grey sm:p-24 leading-none flex sm:table-cell

package/core/Table/data.js

@@ -1 +1 @@
-import React,{Fragment}from"react";import Tooltip from"../Tooltip";import{Supported,Unsupported}from"./TableCell";import Table from"../Table";const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
+import React,{Fragment}from"react";import Tooltip from"../../Tooltip/component";import{Supported,Unsupported}from"../TableCell";import Table from"..";const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};

package/core/Table.js

@@ -1 +1 @@
-import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported};
+import{Table,TableRowHeader,TableHeader,TableBody}from"./Table";import{TableRow}from"./TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported}from"./TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported};

package/core/Tooltip.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{className:"relative inline-block align-top h-16"},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),className:"ml-8 p-0 relative top-1 focus:outline-none",type:"button",ref:reference,"aria-describedby":"tooltip"},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{className:"bg-light-grey p-12 rounded pointer-events-none absolute z-20",role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"}},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
+import React,{useEffect,useRef,useState}from"react";import Icon from"../Icon/component.tsx";const Tooltip=({children})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{className:"relative inline-block align-top h-16"},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),className:"ml-8 p-0 relative top-1 focus:outline-none",type:"button",ref:reference,"aria-describedby":"tooltip"},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{className:"bg-light-grey p-12 rounded pointer-events-none absolute z-20",role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"}},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.75dcb64",
+  "version": "14.0.0-dev.968e4a2",
   "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.",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/ably/ably-ui.git"

package/src/core/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Accordion, { AccordionProps } from "../Accordion";
+import Accordion, { AccordionProps } from "./component.tsx";
 
 export default {
   title: "Components/Accordion",

package/src/core/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactNode, JSX } from "react";
-import Icon from "./Icon";
+import Icon from "../Icon/component.tsx";
 
 type AccordionData = {
   name: string;

package/src/core/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import Code from "../Code";
+import Code from "./component.tsx";
 
 export default {
   title: "Components/Code",

package/src/core/Code.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import "./utils/syntax-highlighter.css";
+import "../utils/syntax-highlighter.css";
 import {
   highlightSnippet,
   registerDefaultLanguages,
-} from "./utils/syntax-highlighter";
-import languagesRegistry from "./utils/syntax-highlighter-registry";
+} from "../utils/syntax-highlighter";
+import languagesRegistry from "../utils/syntax-highlighter-registry";
 
 registerDefaultLanguages(languagesRegistry);
 

package/src/core/ConnectStateWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { connectState, getRemoteDataStore } from "./remote-data-store";
+import { connectState, getRemoteDataStore } from "../remote-data-store";
 
 /*
   Connect a react component to a global store.

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,4 +1,4 @@
-import ContactFooter from "../ContactFooter";
+import ContactFooter from "./component.tsx";
 
 export default {
   title: "Components/Contact Footer",

package/src/core/ContactFooter.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 
-import Icon from "./Icon";
-import _absUrl from "./url-base.js";
-import toggleChatWidget from "./hubspot-chat-toggle";
-import "./ContactFooter/component.css";
+import Icon from "../Icon/component.tsx";
+import _absUrl from "../url-base.js";
+import toggleChatWidget from "../hubspot-chat-toggle";
+import "./component.css";
 
 type ContactFooterProps = {
   urlBase: string;

package/src/core/CookieMessage/CookieMessage.stories.tsx

@@ -1,4 +1,4 @@
-import CookieMessage from "../CookieMessage";
+import CookieMessage from "./component.tsx";
 
 export default {
   title: "Components/Cookie Message",

package/src/core/CookieMessage/component.js

@@ -0,0 +1 @@
+import "./component.css";

package/src/core/CookieMessage.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
+import "./component.css";
 
-import "./CookieMessage/component.css";
-import _absUrl from "./url-base";
+import _absUrl from "../url-base";
 
 const COOKIE_EXPIRY = 365;
 

package/src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -1,4 +1,4 @@
-import CustomerLogos from "../CustomerLogos";
+import CustomerLogos from "./component.tsx";
 
 import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
 import webflow from "../images/cust-logo-webflow-col-pos.svg";

package/src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Icon from "../Icon";
-import DropdownMenu from "../DropdownMenu";
+import Icon from "../Icon/component.tsx";
+import DropdownMenu from "./component.tsx";
 
 export default {
   title: "Components/Dropdown Menu",

package/src/core/DropdownMenu.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactNode,
   Dispatch,
 } from "react";
-import Icon from "./Icon";
+import Icon from "../Icon/component.tsx";
 
 const DropdownMenuContext = createContext<{
   isOpen: boolean;

package/src/core/FeaturedLink/FeaturedLink.stories.tsx

@@ -1,4 +1,4 @@
-import FeaturedLink from "../FeaturedLink";
+import FeaturedLink from "./component.tsx";
 
 export default {
   title: "Components/Featured Link",

package/src/core/FeaturedLink.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "./Icon";
+import Icon from "../Icon/component.tsx";
 
 type FeaturedLinkProps = {
   url: string;

package/src/core/Flash/Flash.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Flash, { reducerFlashes } from "../Flash";
+import Flash, { reducerFlashes } from "./component.tsx";
 
 import {
   attachStoreToWindow,

package/src/core/Flash/component.js

@@ -0,0 +1 @@
+import "./component.css";

package/src/core/Flash.tsx

@@ -2,10 +2,10 @@ 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.tsx";
-import Icon from "./Icon";
-import "./Flash/component.css";
+import { getRemoteDataStore } from "../remote-data-store.js";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
+import Icon from "../Icon/component.tsx";
+import "./component.css";
 
 type FlashProps = {
   id: string;

package/src/core/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import Footer from "../Footer";
+import Footer from "./component.tsx";
 
 import ablyStack from "../images/ably-stack.svg";
 import highestPerformer from "../images/high-performer-2023.svg";

package/src/core/Footer/component.js

@@ -0,0 +1 @@
+import "./component.css";

package/src/core/Footer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "./Icon";
-import _absUrl from "./url-base.js";
-import "./Footer/component.css";
+import Icon from "../Icon/component.tsx";
+import _absUrl from "../url-base.js";
+import "./component.css";
 
 type FooterProps = {
   paths: {

package/src/core/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "../Icon";
+import Icon from "./component.tsx";
 
 export default {
   title: "Components/Icon",

package/src/core/Loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import Loader from "../Loader";
+import Loader from "./component.tsx";
 
 export default {
   title: "Components/Loader",

package/src/core/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import Logo from "../Logo";
+import Logo from "./component.tsx";
 import logoUrl from "../images/ably-logo.png";
 
 export default {

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { rest } from "msw";
 
-import Meganav from "../Meganav";
+import Meganav from "./component.tsx";
 import loadIcons from "../icons.js";
 import logo from "../images/ably-logo.png";
 import ablyStack from "../images/ably-stack.svg";

package/src/core/Meganav.tsx

@@ -1,22 +1,24 @@
 import React, { ReactNode, useEffect, useState } from "react";
 
-import { connectState } from "./remote-data-store.js";
-import { selectSessionData } from "./remote-session-data.js";
-
-import Logo from "./Logo";
-import "./Meganav/component.css";
-import MeganavData from "./Meganav/component.json";
-import MeganavScripts from "./Meganav/component.js";
-import MeganavItemsDesktop from "./MeganavItemsDesktop";
-import MeganavItemsSignedIn from "./MeganavItemsSignedIn";
-import MeganavItemsMobile from "./MeganavItemsMobile";
-import Notice from "./Notice";
-import _absUrl from "./url-base.js";
-import MeganavContentProducts from "./MeganavContentProducts";
-import MeganavContentUseCases from "./MeganavContentUseCases";
-import MeganavContentCompany from "./MeganavContentCompany";
-import MeganavContentDevelopers from "./MeganavContentDevelopers";
-import MeganavSearch from "./MeganavSearch";
+import { connectState } from "../remote-data-store.js";
+import { selectSessionData } from "../remote-session-data.js";
+
+import Logo from "../Logo/component.tsx";
+import "./component.css";
+
+import MeganavScripts from "./component.js";
+import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx";
+import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx";
+import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx";
+import Notice from "../Notice/component.tsx";
+import MeganavData from "./component.json";
+import _absUrl from "../url-base.js";
+
+import MeganavContentProducts from "../MeganavContentProducts/component.tsx";
+import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx";
+import MeganavContentCompany from "../MeganavContentCompany/component.tsx";
+import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx";
+import MeganavSearch from "../MeganavSearch/component.tsx";
 
 export type MeganavTheme = {
   backgroundColor?: string;

package/src/core/MeganavBlogPostsList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavBlogPostsListProps = {
   recentBlogPosts: {

package/src/core/MeganavContentCompany.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import MeganavBlogPostsList from "./MeganavBlogPostsList";
-import ConnectStateWrapper from "./ConnectStateWrapper";
-import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
+import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
+import { selectRecentBlogPosts } from "../remote-blogs-posts.js";
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavContentCompanyProps = {
   absUrl: AbsUrl;

package/src/core/MeganavContentDevelopers.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/MeganavContentProducts.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
+import FeaturedLink from "../FeaturedLink/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 type MeganavContentProductsProps = {
   paths: {

package/src/core/MeganavContentUseCases/component.js

@@ -0,0 +1 @@
+// TODO: Webpack expects a .js file for any component

package/src/core/MeganavContentUseCases.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
+import Icon from "../Icon/component.tsx";
+import { AbsUrl } from "../Meganav/component.tsx";
 
 const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
   <div className="flex max-w-screen-xl mx-auto">

package/src/core/MeganavControl.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "./Icon";
-import { MeganavTheme } from "./Meganav";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
 type MeganavControlProps = {
   ariaControls: string;

package/src/core/MeganavControlMobileDropdown.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "./Icon";
-import { MeganavTheme } from "./Meganav";
+import Icon from "../Icon/component.tsx";
+import { MeganavTheme } from "../Meganav/component.tsx";
 
 const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
   <button

package/src/core/MeganavControlMobilePanelClose.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import Icon from "./Icon";
+import Icon from "../Icon/component.tsx";
+
 type MeganavControlMobilePanelCloseProps = {
   ariaControls: string;
   displayHr?: boolean;

package/src/core/MeganavControlMobilePanelOpen.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 
-import Icon from "./Icon";
+import Icon from "../Icon/component.tsx";
+
 type MeganavControlMobilePanelOpenProps = {
   ariaControls: string;
   children: ReactNode;

package/src/core/MeganavItemsDesktop.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import MeganavData from "./Meganav/component.json";
-import MeganavControl from "./MeganavControl";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
+import MeganavData from "../Meganav/component.json";
+import MeganavControl from "../MeganavControl/component.tsx";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;