npm - @ably/ui - Versions diffs - 16.0.0-dev.51e26db2 → 16.0.0-dev.667628d8 - Mend

@ably/ui 16.0.0-dev.51e26db2 → 16.0.0-dev.667628d8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/core/Header/HeaderLinks.js +1 -1
package/core/Header/HeaderLinks.js.map +1 -1
package/core/Header.js +1 -1
package/core/Header.js.map +1 -1
package/core/Meganav/MeganavPanel.js +1 -1
package/core/Meganav/MeganavPanel.js.map +1 -1
package/core/Meganav/MeganavProductTile.js +2 -0
package/core/Meganav/MeganavProductTile.js.map +1 -0
package/core/Meganav/data.js +1 -1
package/core/Meganav/data.js.map +1 -1
package/core/Meganav.js +1 -1
package/core/Meganav.js.map +1 -1
package/core/ProductTile/ProductDescription.js +1 -1
package/core/ProductTile/ProductDescription.js.map +1 -1
package/core/ProductTile/ProductIcon.js +1 -1
package/core/ProductTile/ProductIcon.js.map +1 -1
package/core/ProductTile/ProductLabel.js +1 -1
package/core/ProductTile/ProductLabel.js.map +1 -1
package/index.d.ts +59 -4
package/package.json +1 -1

package/core/Header/HeaderLinks.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-6 px-16 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-16 pt-16 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-16 pt-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
+import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-6 px-16 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-16 pt-16 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-12 pt-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
 //# sourceMappingURL=HeaderLinks.js.map

package/core/Header/HeaderLinks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n signedIn: false,\n logOut: {\n token: \"0000\",\n href: \"accounts/sign_out\",\n },\n accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n Pick<\n HeaderProps,\n \| \"sessionState\"\n \| \"headerLinks\"\n \| \"searchButtonVisibility\"\n \| \"searchButton\"\n \| \"className\"\n >\n> = ({\n sessionState = testSessionState,\n headerLinks,\n searchButtonVisibility,\n searchButton,\n className,\n}) => {\n const { signedIn, logOut } = sessionState;\n const formRef = useRef<HTMLFormElement>(null);\n\n const headerLinkClasses =\n \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n const dropdownMenuLinkClasses =\n \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n const onClickLogout = (e: MouseEvent) => {\n e.preventDefault();\n formRef.current?.submit();\n };\n\n const DashboardLink = ({ className }: { className: string }) => (\n <a href=\"/dashboard\" className={className}>\n Dashboard\n </a>\n );\n\n const LogoutForm = (\n <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n </form>\n );\n\n return (\n <nav\n className={cn(\n \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n className,\n )}\n >\n {signedIn && (\n <>\n {LogoutForm}\n <div className=\"block md:hidden\">\n <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n {sessionState.accountName}\n </span>\n {<DashboardLink className={headerLinkClasses} />}\n </div>\n </div>\n </>\n )}\n\n {headerLinks?.map(({ href, label, external }) => (\n <a\n key={href}\n className={cn(\n headerLinkClasses,\n \"flex items-center gap-6 px-16 md:px-0 leading-none\",\n )}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noreferrer noopener\" : undefined}\n >\n {label}\n {external && (\n <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n )}\n </a>\n ))}\n\n {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n {signedIn ? (\n <>\n <div className=\"hidden md:block relative\">\n <DropdownMenu>\n <DropdownMenu.Trigger\n description={`Account menu for ${sessionState.accountName}`}\n >\n <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n {sessionState.accountName}\n </span>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content\n anchorPosition=\"right\"\n contentClassNames=\"w-[240px] mt-[12px]\"\n >\n <div className=\"p-8\">\n {<DashboardLink className={dropdownMenuLinkClasses} />}\n <a\n onClick={onClickLogout}\n href=\"#\"\n className={dropdownMenuLinkClasses}\n >\n Logout\n </a>\n </div>\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n <div className=\"block md:hidden px-16 pt-16 pb-0\">\n <LinkButton\n onClick={onClickLogout}\n variant=\"secondary\"\n className=\"w-full md:ui-button-secondary-xs\"\n aria-label=\"Logout\"\n rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n >\n Logout\n </LinkButton>\n </div>\n </>\n ) : (\n <div className=\"flex gap-16 pt-12 md:py-0 px-16 md:px-0\">\n <LinkButton\n href=\"/login\"\n variant=\"secondary\"\n className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n >\n Login\n </LinkButton>\n <LinkButton\n href=\"/sign-up\"\n variant=\"primary\"\n className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n >\n Start free\n </LinkButton>\n </div>\n )}\n </nav>\n );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,oQAEF,MAAMC,wBACJ,6LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,mJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,sDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACd,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACC0B,QAAShC,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,oCACb,oBAACd,YACCkD,QAAShC,cACTiC,QAAQ,YACRrC,UAAU,mCACVsC,aAAW,SACXC,UAAU,iDACX,YAML,oBAAClB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL4C,QAAQ,YACRrC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL4C,QAAQ,UACRrC,UAAU,mGACX,eAOX,CAAE"}
1	+ {"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n signedIn: false,\n logOut: {\n token: \"0000\",\n href: \"accounts/sign_out\",\n },\n accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n Pick<\n HeaderProps,\n \| \"sessionState\"\n \| \"headerLinks\"\n \| \"searchButtonVisibility\"\n \| \"searchButton\"\n \| \"className\"\n >\n> = ({\n sessionState = testSessionState,\n headerLinks,\n searchButtonVisibility,\n searchButton,\n className,\n}) => {\n const { signedIn, logOut } = sessionState;\n const formRef = useRef<HTMLFormElement>(null);\n\n const headerLinkClasses =\n \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n const dropdownMenuLinkClasses =\n \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n const onClickLogout = (e: MouseEvent) => {\n e.preventDefault();\n formRef.current?.submit();\n };\n\n const DashboardLink = ({ className }: { className: string }) => (\n <a href=\"/dashboard\" className={className}>\n Dashboard\n </a>\n );\n\n const LogoutForm = (\n <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n </form>\n );\n\n return (\n <nav\n className={cn(\n \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n className,\n )}\n >\n {signedIn && (\n <>\n {LogoutForm}\n <div className=\"block md:hidden\">\n <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n {sessionState.accountName}\n </span>\n {<DashboardLink className={headerLinkClasses} />}\n </div>\n </div>\n </>\n )}\n\n {headerLinks?.map(({ href, label, external }) => (\n <a\n key={href}\n className={cn(\n headerLinkClasses,\n \"flex items-center gap-6 px-16 md:px-0 leading-none\",\n )}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noreferrer noopener\" : undefined}\n >\n {label}\n {external && (\n <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n )}\n </a>\n ))}\n\n {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n {signedIn ? (\n <>\n <div className=\"hidden md:block relative\">\n <DropdownMenu>\n <DropdownMenu.Trigger\n description={`Account menu for ${sessionState.accountName}`}\n >\n <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n {sessionState.accountName}\n </span>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content\n anchorPosition=\"right\"\n contentClassNames=\"w-[240px] mt-[12px]\"\n >\n <div className=\"p-8\">\n {<DashboardLink className={dropdownMenuLinkClasses} />}\n <a\n onClick={onClickLogout}\n href=\"#\"\n className={dropdownMenuLinkClasses}\n >\n Logout\n </a>\n </div>\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n <div className=\"block md:hidden px-16 pt-16 pb-0\">\n <LinkButton\n onClick={onClickLogout}\n variant=\"secondary\"\n className=\"w-full md:ui-button-secondary-xs\"\n aria-label=\"Logout\"\n rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n >\n Logout\n </LinkButton>\n </div>\n </>\n ) : (\n <div className=\"flex gap-12 pt-12 md:py-0 px-16 md:px-0\">\n <LinkButton\n href=\"/login\"\n variant=\"secondary\"\n className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n >\n Login\n </LinkButton>\n <LinkButton\n href=\"/sign-up\"\n variant=\"primary\"\n className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n >\n Start free\n </LinkButton>\n </div>\n )}\n </nav>\n );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,oQAEF,MAAMC,wBACJ,6LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,mJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,sDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACd,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACC0B,QAAShC,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,oCACb,oBAACd,YACCkD,QAAShC,cACTiC,QAAQ,YACRrC,UAAU,mCACVsC,aAAW,SACXC,UAAU,iDACX,YAML,oBAAClB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL4C,QAAQ,YACRrC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL4C,QAAQ,UACRrC,UAAU,mGACX,eAOX,CAAE"}

package/core/Header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({headerClassName,className,isNoticeVisible=false,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const[bannerVisible,setBannerVisible]=useState(isNoticeVisible);const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleScroll=()=>{setBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeVisible);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",headerClassName,scrollpointClasses,{"md:top-auto":bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[96px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeVisible=false,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[bannerVisible,setBannerVisible]=useState(isNoticeVisible);const menuRef=useRef(null);const[scrollpointClasses,setScrollpointClasses]=useState(themedScrollpoints.length>0?themedScrollpoints[0].className:"");const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleScroll=()=>{setBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeVisible);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses,{"md:top-auto":bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[96px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map

package/core/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/*\n Represents the state of the user session in the header.\n /\nexport type HeaderSessionState = {\n /\n Indicates if the user is signed in.\n /\n signedIn: boolean;\n\n /\n Information required to log out the user.\n /\n logOut: {\n /\n Token used for logging out.\n /\n token: string;\n\n /\n URL to log out the user.\n /\n href: string;\n };\n\n /\n Name of the user's account.\n /\n accountName: string;\n};\n\n/\n Props for the Header component.\n /\nexport type HeaderProps = {\n /\n Optional classname for styling the header.\n /\n headerClassName?: string;\n /\n Optional classnames to add to the header\n /\n className?: string;\n /\n Indicates if the notice banner is visible.\n /\n isNoticeVisible?: boolean;\n /\n Optional search bar element.\n /\n searchBar?: ReactNode;\n\n /\n Optional search button element.\n /\n searchButton?: ReactNode;\n\n /\n URL for the logo link.\n /\n logoHref?: string;\n\n /\n Array of header links.\n /\n headerLinks?: {\n /\n URL for the link.\n /\n href: string;\n\n /\n Label for the link.\n /\n label: string;\n\n /\n Indicates if the link should open in a new tab.\n /\n external?: boolean;\n }[];\n\n /\n Optional classname for styling the header links container.\n /\n headerLinksClassName?: string;\n\n /\n Optional desktop navigation element.\n /\n nav?: ReactNode;\n\n /\n Optional mobile navigation element.\n /\n mobileNav?: ReactNode;\n\n /\n State of the user session.\n /\n sessionState?: HeaderSessionState;\n\n /\n Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n /\n themedScrollpoints?: ThemedScrollpoint[];\n\n /\n Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n /\n searchButtonVisibility?: \"all\" \| \"desktop\" \| \"mobile\";\n\n /\n Optional location object to detect location changes.\n /\n location?: Location;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/\n Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n headerClassName,\n className,\n isNoticeVisible = false,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n headerLinksClassName,\n nav,\n mobileNav,\n sessionState,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n location,\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n const [bannerVisible, setBannerVisible] = useState(isNoticeVisible);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleScroll = () => {\n setBannerVisible(\n window.scrollY <= COLLAPSE_TRIGGER_DISTANCE && isNoticeVisible,\n );\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n // Close menu when location changes\n useEffect(() => {\n if (location && showMenu) {\n closeMenu();\n }\n }, [location]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n headerClassName,\n scrollpointClasses,\n {\n \"md:top-auto\": bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", className)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[96px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","headerClassName","className","isNoticeVisible","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleScroll","window","scrollY","scrollpoint","element","document","getElementById","id","rect","getBoundingClientRect","top","bottom","throttledHandleScroll","addEventListener","removeEventListener","handleResize","innerWidth","body","classList","add","remove","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/*\n Represents the state of the user session in the header.\n /\nexport type HeaderSessionState = {\n /\n Indicates if the user is signed in.\n /\n signedIn: boolean;\n\n /\n Information required to log out the user.\n /\n logOut: {\n /\n Token used for logging out.\n /\n token: string;\n\n /\n URL to log out the user.\n /\n href: string;\n };\n\n /\n Name of the user's account.\n /\n accountName: string;\n};\n\n/\n Props for the Header component.\n /\nexport type HeaderProps = {\n /\n Optional classnames to add to the header\n /\n className?: string;\n /\n Indicates if the notice banner is visible.\n /\n isNoticeVisible?: boolean;\n /\n Optional search bar element.\n /\n searchBar?: ReactNode;\n\n /\n Optional search button element.\n /\n searchButton?: ReactNode;\n\n /\n URL for the logo link.\n /\n logoHref?: string;\n\n /\n Array of header links.\n /\n headerLinks?: {\n /\n URL for the link.\n /\n href: string;\n\n /\n Label for the link.\n /\n label: string;\n\n /\n Indicates if the link should open in a new tab.\n /\n external?: boolean;\n }[];\n\n /\n Optional classname for styling the header links container.\n /\n headerLinksClassName?: string;\n\n /\n Optional desktop navigation element.\n /\n nav?: ReactNode;\n\n /\n Optional mobile navigation element.\n /\n mobileNav?: ReactNode;\n\n /\n State of the user session.\n /\n sessionState?: HeaderSessionState;\n\n /\n Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n /\n themedScrollpoints?: ThemedScrollpoint[];\n\n /\n Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n /\n searchButtonVisibility?: \"all\" \| \"desktop\" \| \"mobile\";\n\n /\n Optional location object to detect location changes.\n /\n location?: Location;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/\n Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n className,\n isNoticeVisible = false,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n headerLinksClassName,\n nav,\n mobileNav,\n sessionState,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n location,\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [bannerVisible, setBannerVisible] = useState(isNoticeVisible);\n const menuRef = useRef<HTMLDivElement>(null);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\n themedScrollpoints.length > 0 ? themedScrollpoints[0].className : \"\",\n );\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleScroll = () => {\n setBannerVisible(\n window.scrollY <= COLLAPSE_TRIGGER_DISTANCE && isNoticeVisible,\n );\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n // Close menu when location changes\n useEffect(() => {\n if (location && showMenu) {\n closeMenu();\n }\n }, [location]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n scrollpointClasses,\n {\n \"md:top-auto\": bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", className)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[96px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeVisible","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","showMenu","setShowMenu","fadingOut","setFadingOut","bannerVisible","setBannerVisible","menuRef","scrollpointClasses","setScrollpointClasses","length","closeMenu","setTimeout","handleScroll","window","scrollY","scrollpoint","element","document","getElementById","id","rect","getBoundingClientRect","top","bottom","throttledHandleScroll","addEventListener","removeEventListener","handleResize","innerWidth","body","classList","add","remove","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}

package/core/Meganav/MeganavPanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{productNames,products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2 group",panelLeftClassName),onClick:panelLeft&&!displayProductTile?()=>window.location.href=panelLeft.url:undefined},displayProductTile?productNames.map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>{const productLink=products[product].link;if(productLink)window.location.href=productLink},animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000",iconColor:"text-orange-600",iconClassName:"group-hover/meganav-panel:left-0"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
+import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import{productsForNav}from"./data";import{productNames}from"../ProductTile/data";import MeganavProductTile from"./MeganavProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 group",{"grid-cols-1 xs:grid-cols-2":displayProductTile},panelLeftClassName)},displayProductTile?productNames.map(product=>React.createElement(MeganavProductTile,{name:product,key:product,productLink:productsForNav[product].link??"#",animateIcons:true})):panelLeft&&React.createElement("a",{className:"grid grid-cols-1 xs:grid-cols-2",href:panelLeft.url},React.createElement("span",{className:"block w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("span",{className:"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement("span",{className:"font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000"},panelLeft.labelLink,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"14px",color:"text-orange-600",additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]","group-hover/featured-link:left-0 group-hover/meganav-panel:left-0")}))),React.createElement("span",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8  my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
 //# sourceMappingURL=MeganavPanel.js.map

package/core/Meganav/MeganavPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport ~~FeaturedLink from \"../FeaturedLink\";\nimport~~ { ProductName, productNames, ~~products~~ } from \"../ProductTile/data\";\nimport ~~ProductTile~~ from \"~~../ProductTile~~\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2 ~~group~~\",\n panelLeftClassName,\n )}\n ~~onClick={\n panelLeft && !displayProductTile\n ? () => (window.location.href = panelLeft.url)\n : undefined\n }\n~~ >\n {displayProductTile\n ? productNames.map((product) => (\n <~~ProductTile~~\n name={product as ProductName}\n key={product}\n ~~selected~~={~~false}\n onClick={() => {\n const productLink = products~~[product].link~~;\n if~~ ~~(productLink)~~ ~~window.location.href = productLink;\n~~ }}\n animateIcons={true}\n />\n ))\n : panelLeft && (\n ~~<>\~~n <~~div~~ className=\"w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </p>\n <~~FeaturedLink\n url={panelLeft.url}\n additionalCSS~~=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\"\n ~~iconColor~~=\"text-orange-600\"\n ~~iconClassName=\~~"group-hover/meganav-panel:left-0\"\n ~~>\n {panelLeft.labelLink~~}\n </~~FeaturedLink~~>\n </~~div~~>\n <~~div~~ className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </~~div~~>\n ~~</>\~~n )}\n </div>\n <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n {panelRightHeading}\n </p>\n )}\n\n {panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","~~FeaturedLink~~","productNames","~~products~~","~~ProductTile","~~MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","~~onClick~~","~~window~~","~~location~~","~~href~~","~~url~~","~~undefined~~","~~map~~","~~product~~","~~name~~","~~key~~","~~selected~~","~~productLink","link","animateIcons","~~h4","heading","~~p","~~content","~~additionalCSS~~","~~iconColor~~","~~iconClassName~~","~~labelLink~~","img","src","image","alt","ul","item","li","isMobile","label","icon"~~,"size","a"~~],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,~~AAE3B~~,~~QAAOC~~,~~iBAAkB~~,~~iBAAkB~~,~~AAC3C~~,QAAsBC,YAAY,~~CAAEC,QAAQ,~~KAAQ,qBAAsB,~~AAC1E~~,QAAOC,~~gBAAiB~~,~~gBAAiB~~,~~AAEzC~~,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,~~UAAWd~~,GACT,~~0DACAS~~,~~oBAEFM~~,~~QACEP~~,~~WAAa~~,~~CAACD~~,~~mBACV~~,~~IAAOS~~,~~OAAOC,QAAQ,CAACC,IAAI,CAAGV,UAAUW,~~GAAG,~~CAC3CC,WAGLb,mBACGJ,aAAakB,GAAG,~~CAAC,AAACC,SAChB,~~oBAACjB~~,~~aACCkB~~,KAAMD,QACNE,IAAKF,QACLG,~~SAAU~~,~~MACVV~~,~~QAAS~~,~~KACP,MAAMW,YAActB,~~QAAQ,~~CAACkB~~,~~QAAQ,CAACK,~~IAAI,~~CAC1C~~,~~GAAID~~,~~YAAaV~~,~~OAAOC~~,~~QAAQ~~,~~CAACC~~,~~IAAI~~,~~CAAGQ~~,~~WAC1C~~,~~EACAE~~,~~aAAc~~,~~QAGlBpB~~,~~WACE~~,~~wCACE~~,~~oBAACK~~,~~OAAIC,~~UAAU,~~eACb~~,~~oBAACe~~,~~MAAGf~~,UAAU,sDACXN,~~UAAUsB~~,OAAO,EAEpB,~~oBAACC~~,~~KAAEjB~~,UAAU,~~0DACVN~~,~~UAAUwB~~,OAAO,EAEpB,~~oBAAC9B~~,~~cACCiB~~,~~IAAKX~~,~~UAAUW~~,~~GAAG~~,~~CAClBc~~,~~cAAc,+GACdC~~,~~UAAU~~,~~kBACVC~~,~~cAAc~~,~~oCAEb3B~~,~~UAAU4B~~,~~SAAS~~,~~GAGxB~~,~~oBAACvB~~,~~OAAIC~~,UAAU,~~oBACb~~,~~oBAACuB~~,OACCC,~~IAAK9B~~,~~UAAU+B~~,KAAK,CACpBC,~~IAAKhC~~,~~UAAUsB~~,OAAO,~~CACtBhB~~,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,~~oBAAC2B~~,~~UACE/B~~,mBACC,~~oBAACqB~~,~~KAAEjB~~,UAAU,kEACVJ,mBAIJC,~~gBAAgBU~~,GAAG,CAAC,~~AAACqB~~,MACpB,oBAACC,~~MACC7B~~,~~UAAWd~~,GACT,~~iFACA0C~~,KAAKE,QAAQ,CAAG,YAAc,~~WAEhCpB~~,~~IAAKkB~~,KAAKG,KAAK,EAEf,~~oBAAC5C~~,~~MACCsB~~,~~KAAMmB~~,KAAKI,IAAI,~~CACfC~~,KAAK,~~UACLd~~,cAAc,4CAEhB,~~oBAACe~~,~~KACClC~~,UAAU,~~uJACVI~~,~~KAAMwB~~,~~KAAKf~~,IAAI,~~EAEde~~,KAAKG,KAAK,~~KAKlBjC~~,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
1	+ {"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList, productsForNav } from \"./data\";\nimport { ProductName, productNames } from \"../ProductTile/data\";\nimport MeganavProductTile from \"./MeganavProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 group\",\n { \"grid-cols-1 xs:grid-cols-2\": displayProductTile },\n panelLeftClassName,\n )}\n >\n {displayProductTile\n ? productNames.map((product) => (\n <MeganavProductTile\n name={product as ProductName}\n key={product}\n productLink={productsForNav[product].link ?? \"#\"}\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <a\n className=\"grid grid-cols-1 xs:grid-cols-2\"\n href={panelLeft.url}\n >\n <span className=\"block w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <span className=\"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </span>\n <span className=\"font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\">\n {panelLeft.labelLink}\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size=\"14px\"\n color=\"text-orange-600\"\n additionalCSS={cn(\n \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n \"group-hover/featured-link:left-0 group-hover/meganav-panel:left-0\",\n )}\n />\n </span>\n </span>\n <span className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </span>\n </a>\n )}\n </div>\n <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n {panelRightHeading}\n </p>\n )}\n\n {panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","productsForNav","productNames","MeganavProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","map","product","name","key","productLink","link","animateIcons","a","href","url","span","h4","heading","content","labelLink","size","color","additionalCSS","img","src","image","alt","ul","p","item","li","isMobile","label","icon"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAgDC,cAAc,KAAQ,QAAS,AAC/E,QAAsBC,YAAY,KAAQ,qBAAsB,AAChE,QAAOC,uBAAwB,sBAAuB,AAEtD,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,+BACA,CAAE,6BAA8BM,kBAAmB,EACnDE,qBAGDF,mBACGH,aAAaW,GAAG,CAAC,AAACC,SAChB,oBAACX,oBACCY,KAAMD,QACNE,IAAKF,QACLG,YAAahB,cAAc,CAACa,QAAQ,CAACI,IAAI,EAAI,IAC7CC,aAAc,QAGlBb,WACE,oBAACc,KACCR,UAAU,kCACVS,KAAMf,UAAUgB,GAAG,EAEnB,oBAACC,QAAKX,UAAU,qBACd,oBAACY,MAAGZ,UAAU,sDACXN,UAAUmB,OAAO,EAEpB,oBAACF,QAAKX,UAAU,gEACbN,UAAUoB,OAAO,EAEpB,oBAACH,QAAKX,UAAU,8JACbN,UAAUqB,SAAS,CACpB,oBAAC3B,MACCe,KAAK,oCACLa,KAAK,OACLC,MAAM,kBACNC,cAAe/B,GACb,8DACA,yEAKR,oBAACwB,QAAKX,UAAU,oBACd,oBAACmB,OACCC,IAAK1B,UAAU2B,KAAK,CACpBC,IAAK5B,UAAUmB,OAAO,CACtBb,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,oBAACuB,UACE3B,mBACC,oBAAC4B,KAAExB,UAAU,kEACVJ,mBAIJC,gBAAgBI,GAAG,CAAC,AAACwB,MACpB,oBAACC,MACC1B,UAAWb,GACT,iFACAsC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAACxC,MACCe,KAAMsB,KAAKI,IAAI,CACfb,KAAK,UACLE,cAAc,4CAEhB,oBAACV,KACCR,UAAU,uJACVS,KAAMgB,KAAKnB,IAAI,EAEdmB,KAAKG,KAAK,KAKlB9B,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}

package/core/Meganav/MeganavProductTile.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from"react";import cn from"../utils/cn";import{products}from"../ProductTile/data";import ProductIcon from"../ProductTile/ProductIcon";import ProductLabel from"../ProductTile/ProductLabel";import ProductDescription from"../ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const MeganavProductTile=({name,productLink,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,unavailable,description}=products[name]??{};const numericalSize=parseInt(size,10);return React.createElement("a",{href:productLink?productLink:"#",className:cn("transition-colors group/product-tile","flex flex-col p-12 rounded-lg gap-8","bg-neutral-000 dark:bg-neutral-1300",{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":!unavailable},{"cursor-pointer":!unavailable},{"pointer-events-none":unavailable}),"aria-hidden":unavailable},React.createElement("span",{className:cn("items-center flex"),style:{gap:numericalSize/CONTAINER_GAP_RATIO}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,unavailable:!!unavailable,selected:false}),React.createElement(ProductLabel,{label:label,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,selected:false})),React.createElement(ProductDescription,{description:description,unavailable:!!unavailable,showDescription:showDescription,selected:false}))};export default MeganavProductTile;
2	+ //# sourceMappingURL=MeganavProductTile.js.map

package/core/Meganav/MeganavProductTile.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/core/Meganav/MeganavProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport { products } from \"../ProductTile/data\";\nimport ProductIcon from \"../ProductTile/ProductIcon\";\nimport ProductLabel from \"../ProductTile/ProductLabel\";\nimport ProductDescription from \"../ProductTile/ProductDescription\";\nimport { ProductTileProps } from \"../ProductTile\";\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst MeganavProductTile = ({\n name,\n productLink,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n}: ProductTileProps & { productLink?: string }) => {\n const { icon, hoverIcon, label, unavailable, description } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n\n return (\n <a\n href={productLink ? productLink : \"#\"}\n className={cn(\n \"transition-colors group/product-tile\",\n \"flex flex-col p-12 rounded-lg gap-8\",\n \"bg-neutral-000 dark:bg-neutral-1300\",\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\": !unavailable,\n },\n { \"cursor-pointer\": !unavailable },\n { \"pointer-events-none\": unavailable },\n )}\n aria-hidden={unavailable}\n >\n <span\n className={cn(\"items-center flex\")}\n style={{\n gap: numericalSize / CONTAINER_GAP_RATIO,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n unavailable={!!unavailable}\n selected={false}\n />\n <ProductLabel\n label={label}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n selected={false}\n />\n </span>\n <ProductDescription\n description={description}\n unavailable={!!unavailable}\n showDescription={showDescription}\n selected={false}\n />\n </a>\n );\n};\n\nexport default MeganavProductTile;\n"],"names":["React","cn","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","MeganavProductTile","name","productLink","showDescription","showLabel","size","animateIcons","icon","hoverIcon","label","unavailable","description","numericalSize","parseInt","a","href","className","aria-hidden","span","style","gap","hoverName","undefined","selected"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,gBAAiB,4BAA6B,AACrD,QAAOC,iBAAkB,6BAA8B,AACvD,QAAOC,uBAAwB,mCAAoC,CAGnE,MAAMC,oBAAsB,EAE5B,MAAMC,mBAAqB,CAAC,CAC1BC,IAAI,CACJC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACwB,IAC5C,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,WAAW,CAAE,CACxDhB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMW,cAAgBC,SAASR,KAAM,IAErC,OACE,oBAACS,KACCC,KAAMb,YAAcA,YAAc,IAClCc,UAAWtB,GACT,uCACA,sCACA,sCACA,CACE,kDAAmD,CAACgB,WACtD,EACA,CAAE,iBAAkB,CAACA,WAAY,EACjC,CAAE,sBAAuBA,WAAY,GAEvCO,cAAaP,aAEb,oBAACQ,QACCF,UAAWtB,GAAG,qBACdyB,MAAO,CACLC,IAAKR,cAAgBb,mBACvB,GAEA,oBAACH,aACCS,KAAMO,cACNX,KAAMM,KACNc,UAAWf,aAAeE,UAAYc,UACtCZ,YAAa,CAAC,CAACA,YACfa,SAAU,QAEZ,oBAAC1B,cACCY,MAAOA,MACPC,YAAa,CAAC,CAACA,YACfE,cAAeA,cACfR,UAAWA,UACXmB,SAAU,SAGd,oBAACzB,oBACCa,YAAaA,YACbD,YAAa,CAAC,CAACA,YACfP,gBAAiBA,gBACjBoB,SAAU,QAIlB,CAEA,gBAAevB,kBAAmB"}

package/core/Meganav/data.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import{MeganavPanel}from"./MeganavPanel";import Status,{StatusUrl}from"../Status";import FanEngagementNavImage from"./images/fan-engagement-nav-image.png";import CompanyNavImage from"./images/founders-nav-image.png";import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";import UsersMostLikelyToRecommend from"../images/g2-users-most-likely-to-recommend-2025.svg";const panelClassName="w-full sm:w-[815px]";const panelLeftFeatureClassName="bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel";const productsMenu=[{label:"Infrastructure",icon:"icon-gui-globe-alt-outline",link:"/four-pillars-of-dependability"},{label:"Integrations",icon:"icon-gui-puzzle-piece-outline",link:"/integrations"},{label:"SDKs",icon:"icon-gui-cube-transparent-outline",link:"/docs/sdks"},{label:"Security & Compliance",icon:"icon-gui-shield-check-outline",link:"/security-and-compliance"}];const solutionsHighlight={heading:"Fan Engagement",content:"Capture the attention of millions of fans during live events.",labelLink:"Learn more",url:"/fan-engagement",image:FanEngagementNavImage};const solutionsMenu=[{label:"Fan Engagement",icon:"icon-gui-hand-thumb-up-outline",link:"/fan-engagement",isMobile:true},{label:"BizTech",icon:"icon-gui-building-office-outline",link:"/solutions/ecommerce-and-retail"},{label:"FinTech",icon:"icon-gui-currency-dollar-outline",link:"/solutions/fintech"},{label:"HealthTech",icon:"icon-gui-heart-outline",link:"/solutions/healthcare"},{label:"EdTech",icon:"icon-gui-academic-cap-outline",link:"/solutions/edtech"}];const companyHighlight={heading:"Leading the realtime revolution",content:"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.",labelLink:"About Ably",url:"/about",image:CompanyNavImage};const companyMenu=[{label:"About Ably",icon:"icon-gui-ably-badge",link:"/about",isMobile:true},{label:"Customer stories",icon:"icon-gui-star-outline",link:"/case-studies"},{label:"Careers",icon:"icon-gui-briefcase-outline",link:"/careers"},{label:"Blog",icon:"icon-gui-light-bulb-outline",link:"/blog"}];export const ablyAwards=[{image:BestRequirementsWinter2025,desc:"G2 Best Requirements Winter 2025"},{image:BestSupportWinter2025,desc:"G2 Best Support Winter 2025"},{image:HighPerformerWinter2025,desc:"G2 High Performer Winter 2025"},{image:UsersMostLikelyToRecommend,desc:"G2 Users Most Likely to Recommend Winter 2025"}];export const menuItemLinks=[{name:"Pricing",link:"/pricing",isHiddenMobile:true},{name:"Docs",link:"/docs",isHiddenMobile:true}];export const menuItemsForHeader=[{name:"Products",content:React.createElement(MeganavPanel,{displayProductTile:true,panelLeftClassName:"grid",panelRightItems:productsMenu,panelRightHeading:"platform",panelRightBottom:React.createElement(Status,{statusUrl:StatusUrl,showDescription:true})}),panelClassName},{name:"Solutions",content:React.createElement(MeganavPanel,{panelLeft:solutionsHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:solutionsMenu}),panelClassName},{name:"Company",content:React.createElement(MeganavPanel,{panelLeft:companyHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:companyMenu,panelRightBottom:React.createElement("div",{className:"flex-1 gap-x-8 hidden md:flex"},ablyAwards.slice(0,3).map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))}),panelClassName},...menuItemLinks];
+import React from"react";import{MeganavPanel}from"./MeganavPanel";import Status,{StatusUrl}from"../Status";import FanEngagementNavImage from"./images/fan-engagement-nav-image.png";import CompanyNavImage from"./images/founders-nav-image.png";import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";import UsersMostLikelyToRecommend from"../images/g2-users-most-likely-to-recommend-2025.svg";import{products}from"../ProductTile/data";const panelClassName="w-full sm:w-[815px]";const panelLeftFeatureClassName="bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel";const productsMenu=[{label:"Infrastructure",icon:"icon-gui-globe-alt-outline",link:"/four-pillars-of-dependability"},{label:"Integrations",icon:"icon-gui-puzzle-piece-outline",link:"/integrations"},{label:"SDKs",icon:"icon-gui-cube-transparent-outline",link:"/docs/sdks"},{label:"Security & Compliance",icon:"icon-gui-shield-check-outline",link:"/security-and-compliance"}];const solutionsHighlight={heading:"Fan Engagement",content:"Capture the attention of millions of fans during live events.",labelLink:"Learn more",url:"/fan-engagement",image:FanEngagementNavImage};const solutionsMenu=[{label:"Fan Engagement",icon:"icon-gui-hand-thumb-up-outline",link:"/fan-engagement",isMobile:true},{label:"BizTech",icon:"icon-gui-building-office-outline",link:"/solutions/ecommerce-and-retail"},{label:"FinTech",icon:"icon-gui-currency-dollar-outline",link:"/solutions/fintech"},{label:"HealthTech",icon:"icon-gui-heart-outline",link:"/solutions/healthcare"},{label:"EdTech",icon:"icon-gui-academic-cap-outline",link:"/solutions/edtech"}];const companyHighlight={heading:"Leading the realtime revolution",content:"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.",labelLink:"About Ably",url:"/about",image:CompanyNavImage};const companyMenu=[{label:"About Ably",icon:"icon-gui-ably-badge",link:"/about",isMobile:true},{label:"Customer stories",icon:"icon-gui-star-outline",link:"/case-studies"},{label:"Careers",icon:"icon-gui-briefcase-outline",link:"/careers"},{label:"Blog",icon:"icon-gui-light-bulb-outline",link:"/blog"}];export const ablyAwards=[{image:BestRequirementsWinter2025,desc:"G2 Best Requirements Winter 2025"},{image:BestSupportWinter2025,desc:"G2 Best Support Winter 2025"},{image:HighPerformerWinter2025,desc:"G2 High Performer Winter 2025"},{image:UsersMostLikelyToRecommend,desc:"G2 Users Most Likely to Recommend Winter 2025"}];export const menuItemLinks=[{name:"Pricing",link:"/pricing",isHiddenMobile:true},{name:"Docs",link:"/docs",isHiddenMobile:true}];export const menuItemsForHeader=[{name:"Products",content:React.createElement(MeganavPanel,{displayProductTile:true,panelLeftClassName:"grid",panelRightItems:productsMenu,panelRightHeading:"platform",panelRightBottom:React.createElement(Status,{statusUrl:StatusUrl,showDescription:true})}),panelClassName},{name:"Solutions",content:React.createElement(MeganavPanel,{panelLeft:solutionsHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:solutionsMenu}),panelClassName},{name:"Company",content:React.createElement(MeganavPanel,{panelLeft:companyHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:companyMenu,panelRightBottom:React.createElement("div",{className:"flex-1 gap-x-8 hidden md:flex"},ablyAwards.slice(0,3).map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))}),panelClassName},...menuItemLinks];export const productsForNav={...products,pubsub:{...products.pubsub,link:"/pubsub"},liveSync:{...products.liveSync,link:"/livesync"},chat:{...products.chat,link:"/chat"},spaces:{...products.spaces,link:"/spaces"}};
 //# sourceMappingURL=data.js.map

package/core/Meganav/data.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { MeganavPanel } from \"./MeganavPanel\";\nimport Status, { StatusUrl } from \"../Status\";\nimport FanEngagementNavImage from \"./images/fan-engagement-nav-image.png\";\nimport CompanyNavImage from \"./images/founders-nav-image.png\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\nimport UsersMostLikelyToRecommend from \"../images/g2-users-most-likely-to-recommend-2025.svg\";\n\nexport type FlyoutPanelList = {\n label: string;\n icon: IconName;\n link: string;\n isMobile?: boolean;\n};\n\nexport type FlyoutPanelHighlight = {\n heading: string;\n content: string;\n labelLink: string;\n url: string;\n image: string;\n};\n\nexport type MenuItem = {\n name: string;\n link?: string;\n isHiddenMobile?: boolean;\n content?: React.ReactNode;\n panelClassName?: string;\n};\n\nconst panelClassName = \"w-full sm:w-[815px]\";\n\nconst panelLeftFeatureClassName =\n \"bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel\";\n\nconst productsMenu: FlyoutPanelList[] = [\n {\n label: \"Infrastructure\",\n icon: \"icon-gui-globe-alt-outline\",\n link: \"/four-pillars-of-dependability\",\n },\n {\n label: \"Integrations\",\n icon: \"icon-gui-puzzle-piece-outline\",\n link: \"/integrations\",\n },\n {\n label: \"SDKs\",\n icon: \"icon-gui-cube-transparent-outline\",\n link: \"/docs/sdks\",\n },\n {\n label: \"Security & Compliance\",\n icon: \"icon-gui-shield-check-outline\",\n link: \"/security-and-compliance\",\n },\n];\n\nconst solutionsHighlight: FlyoutPanelHighlight = {\n heading: \"Fan Engagement\",\n content: \"Capture the attention of millions of fans during live events.\",\n labelLink: \"Learn more\",\n url: \"/fan-engagement\",\n image: FanEngagementNavImage,\n};\n\nconst solutionsMenu: FlyoutPanelList[] = [\n {\n label: \"Fan Engagement\",\n icon: \"icon-gui-hand-thumb-up-outline\",\n link: \"/fan-engagement\",\n isMobile: true,\n },\n {\n label: \"BizTech\",\n icon: \"icon-gui-building-office-outline\",\n link: \"/solutions/ecommerce-and-retail\",\n },\n {\n label: \"FinTech\",\n icon: \"icon-gui-currency-dollar-outline\",\n link: \"/solutions/fintech\",\n },\n {\n label: \"HealthTech\",\n icon: \"icon-gui-heart-outline\",\n link: \"/solutions/healthcare\",\n },\n {\n label: \"EdTech\",\n icon: \"icon-gui-academic-cap-outline\",\n link: \"/solutions/edtech\",\n },\n];\n\nconst companyHighlight: FlyoutPanelHighlight = {\n heading: \"Leading the realtime revolution\",\n content:\n \"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.\",\n labelLink: \"About Ably\",\n url: \"/about\",\n image: CompanyNavImage,\n};\n\nconst companyMenu: FlyoutPanelList[] = [\n {\n label: \"About Ably\",\n icon: \"icon-gui-ably-badge\",\n link: \"/about\",\n isMobile: true,\n },\n {\n label: \"Customer stories\",\n icon: \"icon-gui-star-outline\",\n link: \"/case-studies\",\n },\n {\n label: \"Careers\",\n icon: \"icon-gui-briefcase-outline\",\n link: \"/careers\",\n },\n {\n label: \"Blog\",\n icon: \"icon-gui-light-bulb-outline\",\n link: \"/blog\",\n },\n];\n\nexport const ablyAwards = [\n {\n image: BestRequirementsWinter2025,\n desc: \"G2 Best Requirements Winter 2025\",\n },\n {\n image: BestSupportWinter2025,\n desc: \"G2 Best Support Winter 2025\",\n },\n {\n image: HighPerformerWinter2025,\n desc: \"G2 High Performer Winter 2025\",\n },\n {\n image: UsersMostLikelyToRecommend,\n desc: \"G2 Users Most Likely to Recommend Winter 2025\",\n },\n];\n\nexport const menuItemLinks = [\n { name: \"Pricing\", link: \"/pricing\", isHiddenMobile: true },\n { name: \"Docs\", link: \"/docs\", isHiddenMobile: true },\n];\n\nexport const menuItemsForHeader: MenuItem[] = [\n {\n name: \"Products\",\n content: (\n <MeganavPanel\n displayProductTile={true}\n panelLeftClassName=\"grid\"\n panelRightItems={productsMenu}\n panelRightHeading=\"platform\"\n panelRightBottom={<Status statusUrl={StatusUrl} showDescription />}\n />\n ),\n panelClassName,\n },\n {\n name: \"Solutions\",\n content: (\n <MeganavPanel\n panelLeft={solutionsHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={solutionsMenu}\n />\n ),\n panelClassName,\n },\n {\n name: \"Company\",\n content: (\n <MeganavPanel\n panelLeft={companyHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={companyMenu}\n panelRightBottom={\n <div className=\"flex-1 gap-x-8 hidden md:flex\">\n {ablyAwards.slice(0, 3).map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n }\n />\n ),\n panelClassName,\n },\n ...menuItemLinks,\n];\n"],"names":["React","MeganavPanel","Status","StatusUrl","FanEngagementNavImage","CompanyNavImage","BestRequirementsWinter2025","BestSupportWinter2025","HighPerformerWinter2025","UsersMostLikelyToRecommend","panelClassName","panelLeftFeatureClassName","productsMenu","label","icon","link","solutionsHighlight","heading","content","labelLink","url","image","solutionsMenu","isMobile","companyHighlight","companyMenu","ablyAwards","desc","menuItemLinks","name","isHiddenMobile","menuItemsForHeader","displayProductTile","panelLeftClassName","panelRightItems","panelRightHeading","panelRightBottom","statusUrl","showDescription","panelLeft","div","className","slice","map","award","img","key","src","alt","width","height"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAASC,YAAY,KAAQ,gBAAiB,AAC9C,QAAOC,QAAUC,SAAS,KAAQ,WAAY,AAC9C,QAAOC,0BAA2B,uCAAwC,AAC1E,QAAOC,oBAAqB,iCAAkC,AAC9D,QAAOC,+BAAgC,+CAAgD,AACvF,QAAOC,0BAA2B,oCAAqC,AACvE,QAAOC,4BAA6B,sCAAuC,AAC3E,QAAOC,+BAAgC,sDAAuD,~~CAyB9F~~,MAAMC,eAAiB,sBAEvB,MAAMC,0BACJ,6MAEF,MAAMC,aAAkC,CACtC,CACEC,MAAO,iBACPC,KAAM,6BACNC,KAAM,gCACR,EACA,CACEF,MAAO,eACPC,KAAM,gCACNC,KAAM,eACR,EACA,CACEF,MAAO,OACPC,KAAM,oCACNC,KAAM,YACR,EACA,CACEF,MAAO,wBACPC,KAAM,gCACNC,KAAM,0BACR,EACD,CAED,MAAMC,mBAA2C,CAC/CC,QAAS,iBACTC,QAAS,gEACTC,UAAW,aACXC,IAAK,kBACLC,~~MAAOjB~~,qBACT,EAEA,~~MAAMkB~~,cAAmC,CACvC,CACET,MAAO,iBACPC,KAAM,iCACNC,KAAM,kBACNQ,SAAU,IACZ,EACA,CACEV,MAAO,UACPC,KAAM,mCACNC,KAAM,iCACR,EACA,CACEF,MAAO,UACPC,KAAM,mCACNC,KAAM,oBACR,EACA,CACEF,MAAO,aACPC,KAAM,yBACNC,KAAM,uBACR,EACA,CACEF,MAAO,SACPC,KAAM,gCACNC,KAAM,mBACR,EACD,CAED,MAAMS,iBAAyC,CAC7CP,QAAS,kCACTC,QACE,0GACFC,UAAW,aACXC,IAAK,SACLC,~~MAAOhB~~,eACT,EAEA,~~MAAMoB~~,YAAiC,CACrC,CACEZ,MAAO,aACPC,KAAM,sBACNC,KAAM,SACNQ,SAAU,IACZ,EACA,CACEV,MAAO,mBACPC,KAAM,wBACNC,KAAM,eACR,EACA,CACEF,MAAO,UACPC,KAAM,6BACNC,KAAM,UACR,EACA,CACEF,MAAO,OACPC,KAAM,8BACNC,KAAM,OACR,EACD,AAED,QAAO,MAAMW,WAAa,CACxB,CACEL,~~MAAOf~~,~~2BACPqB~~,KAAM,kCACR,EACA,CACEN,~~MAAOd~~,~~sBACPoB~~,KAAM,6BACR,EACA,CACEN,~~MAAOb~~,~~wBACPmB~~,KAAM,+BACR,EACA,CACEN,~~MAAOZ~~,~~2BACPkB~~,KAAM,+CACR,EACD,AAAC,AAEF,QAAO,MAAMC,cAAgB,CAC3B,CAAEC,KAAM,UAAWd,KAAM,WAAYe,eAAgB,IAAK,EAC1D,CAAED,KAAM,OAAQd,KAAM,QAASe,eAAgB,IAAK,EACrD,AAAC,AAEF,QAAO,MAAMC,mBAAiC,CAC5C,CACEF,KAAM,WACNX,QACE,~~oBAACjB~~,~~cACC+B~~,mBAAoB,KACpBC,mBAAmB,OACnBC,gBAAiBtB,aACjBuB,kBAAkB,WAClBC,iBAAkB,~~oBAAClC~~,~~QAAOmC~~,~~UAAWlC~~,~~UAAWmC~~,gBAAAA,SAGpD5B,cACF,EACA,CACEmB,KAAM,YACNX,QACE,~~oBAACjB~~,~~cACCsC~~,UAAWvB,mBACXiB,mBAAoBtB,0BACpBuB,gBAAiBZ,gBAGrBZ,cACF,EACA,CACEmB,KAAM,UACNX,QACE,~~oBAACjB~~,~~cACCsC~~,UAAWf,iBACXS,mBAAoBtB,0BACpBuB,gBAAiBT,YACjBW,iBACE,oBAACI,OAAIC,UAAU,iCACZf,WAAWgB,KAAK,CAAC,EAAG,GAAGC,GAAG,CAAC,AAACC,OAC3B,oBAACC,OACCC,IAAKF,MAAMjB,IAAI,CACfoB,IAAKH,MAAMvB,KAAK,CAChB2B,IAAKJ,MAAMjB,IAAI,CACfsB,MAAM,KACNC,OAAO,WAOnBxC,cACF,KACGkB,cACJ,AAAC"}
1	+ {"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { MeganavPanel } from \"./MeganavPanel\";\nimport Status, { StatusUrl } from \"../Status\";\nimport FanEngagementNavImage from \"./images/fan-engagement-nav-image.png\";\nimport CompanyNavImage from \"./images/founders-nav-image.png\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\nimport UsersMostLikelyToRecommend from \"../images/g2-users-most-likely-to-recommend-2025.svg\";\nimport { products } from \"../ProductTile/data\";\n\nexport type FlyoutPanelList = {\n label: string;\n icon: IconName;\n link: string;\n isMobile?: boolean;\n};\n\nexport type FlyoutPanelHighlight = {\n heading: string;\n content: string;\n labelLink: string;\n url: string;\n image: string;\n};\n\nexport type MenuItem = {\n name: string;\n link?: string;\n isHiddenMobile?: boolean;\n content?: React.ReactNode;\n panelClassName?: string;\n};\n\nconst panelClassName = \"w-full sm:w-[815px]\";\n\nconst panelLeftFeatureClassName =\n \"bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel\";\n\nconst productsMenu: FlyoutPanelList[] = [\n {\n label: \"Infrastructure\",\n icon: \"icon-gui-globe-alt-outline\",\n link: \"/four-pillars-of-dependability\",\n },\n {\n label: \"Integrations\",\n icon: \"icon-gui-puzzle-piece-outline\",\n link: \"/integrations\",\n },\n {\n label: \"SDKs\",\n icon: \"icon-gui-cube-transparent-outline\",\n link: \"/docs/sdks\",\n },\n {\n label: \"Security & Compliance\",\n icon: \"icon-gui-shield-check-outline\",\n link: \"/security-and-compliance\",\n },\n];\n\nconst solutionsHighlight: FlyoutPanelHighlight = {\n heading: \"Fan Engagement\",\n content: \"Capture the attention of millions of fans during live events.\",\n labelLink: \"Learn more\",\n url: \"/fan-engagement\",\n image: FanEngagementNavImage,\n};\n\nconst solutionsMenu: FlyoutPanelList[] = [\n {\n label: \"Fan Engagement\",\n icon: \"icon-gui-hand-thumb-up-outline\",\n link: \"/fan-engagement\",\n isMobile: true,\n },\n {\n label: \"BizTech\",\n icon: \"icon-gui-building-office-outline\",\n link: \"/solutions/ecommerce-and-retail\",\n },\n {\n label: \"FinTech\",\n icon: \"icon-gui-currency-dollar-outline\",\n link: \"/solutions/fintech\",\n },\n {\n label: \"HealthTech\",\n icon: \"icon-gui-heart-outline\",\n link: \"/solutions/healthcare\",\n },\n {\n label: \"EdTech\",\n icon: \"icon-gui-academic-cap-outline\",\n link: \"/solutions/edtech\",\n },\n];\n\nconst companyHighlight: FlyoutPanelHighlight = {\n heading: \"Leading the realtime revolution\",\n content:\n \"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.\",\n labelLink: \"About Ably\",\n url: \"/about\",\n image: CompanyNavImage,\n};\n\nconst companyMenu: FlyoutPanelList[] = [\n {\n label: \"About Ably\",\n icon: \"icon-gui-ably-badge\",\n link: \"/about\",\n isMobile: true,\n },\n {\n label: \"Customer stories\",\n icon: \"icon-gui-star-outline\",\n link: \"/case-studies\",\n },\n {\n label: \"Careers\",\n icon: \"icon-gui-briefcase-outline\",\n link: \"/careers\",\n },\n {\n label: \"Blog\",\n icon: \"icon-gui-light-bulb-outline\",\n link: \"/blog\",\n },\n];\n\nexport const ablyAwards = [\n {\n image: BestRequirementsWinter2025,\n desc: \"G2 Best Requirements Winter 2025\",\n },\n {\n image: BestSupportWinter2025,\n desc: \"G2 Best Support Winter 2025\",\n },\n {\n image: HighPerformerWinter2025,\n desc: \"G2 High Performer Winter 2025\",\n },\n {\n image: UsersMostLikelyToRecommend,\n desc: \"G2 Users Most Likely to Recommend Winter 2025\",\n },\n];\n\nexport const menuItemLinks = [\n { name: \"Pricing\", link: \"/pricing\", isHiddenMobile: true },\n { name: \"Docs\", link: \"/docs\", isHiddenMobile: true },\n];\n\nexport const menuItemsForHeader: MenuItem[] = [\n {\n name: \"Products\",\n content: (\n <MeganavPanel\n displayProductTile={true}\n panelLeftClassName=\"grid\"\n panelRightItems={productsMenu}\n panelRightHeading=\"platform\"\n panelRightBottom={<Status statusUrl={StatusUrl} showDescription />}\n />\n ),\n panelClassName,\n },\n {\n name: \"Solutions\",\n content: (\n <MeganavPanel\n panelLeft={solutionsHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={solutionsMenu}\n />\n ),\n panelClassName,\n },\n {\n name: \"Company\",\n content: (\n <MeganavPanel\n panelLeft={companyHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={companyMenu}\n panelRightBottom={\n <div className=\"flex-1 gap-x-8 hidden md:flex\">\n {ablyAwards.slice(0, 3).map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n }\n />\n ),\n panelClassName,\n },\n ...menuItemLinks,\n];\n\nexport const productsForNav = {\n ...products,\n pubsub: { ...products.pubsub, link: \"/pubsub\" },\n liveSync: { ...products.liveSync, link: \"/livesync\" },\n chat: { ...products.chat, link: \"/chat\" },\n spaces: { ...products.spaces, link: \"/spaces\" },\n};\n"],"names":["React","MeganavPanel","Status","StatusUrl","FanEngagementNavImage","CompanyNavImage","BestRequirementsWinter2025","BestSupportWinter2025","HighPerformerWinter2025","UsersMostLikelyToRecommend","products","panelClassName","panelLeftFeatureClassName","productsMenu","label","icon","link","solutionsHighlight","heading","content","labelLink","url","image","solutionsMenu","isMobile","companyHighlight","companyMenu","ablyAwards","desc","menuItemLinks","name","isHiddenMobile","menuItemsForHeader","displayProductTile","panelLeftClassName","panelRightItems","panelRightHeading","panelRightBottom","statusUrl","showDescription","panelLeft","div","className","slice","map","award","img","key","src","alt","width","height","productsForNav","pubsub","liveSync","chat","spaces"],"mappings":"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"}

package/core/Meganav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{menuItemsForHeader}from"./Meganav/data";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";const Meganav=({sessionState,notice,theme})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const mobileNavItems=useMemo(()=>menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[]);useEffect(()=>{const observeNoticeResize=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');if(noticeElement){setNoticeHeight(noticeElement.getBoundingClientRect().height)}};observeNoticeResize();window.addEventListener("resize",observeNoticeResize);return()=>window.removeEventListener("resize",observeNoticeResize)},[]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute inset-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+noticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{className:"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64",isNoticeVisible:!!notice,nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-24 ",sessionState:sessionState,headerClassName:"bg-transparent border-b-0",themedScrollpoints:[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}]})))};export default Meganav;
+import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{menuItemsForHeader}from"./Meganav/data";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";const Meganav=({sessionState,notice,theme})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const mobileNavItems=useMemo(()=>menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[]);useEffect(()=>{const observeNoticeResize=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');if(noticeElement){setNoticeHeight(noticeElement.getBoundingClientRect().height)}};observeNoticeResize();window.addEventListener("resize",observeNoticeResize);return()=>window.removeEventListener("resize",observeNoticeResize)},[]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute inset-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+noticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{className:"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64",isNoticeVisible:!!notice,nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-4 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-24 ",sessionState:sessionState,themedScrollpoints:[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}]})))};export default Meganav;
 //# sourceMappingURL=Meganav.js.map

package/core/Meganav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { menuItemsForHeader } from \"./Meganav/data\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string \| number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n};\n\nconst Meganav = ({ sessionState, notice, theme }: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n const mobileNavItems = useMemo(\n () =>\n menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [],\n );\n\n useEffect(() => {\n const observeNoticeResize = () => {\n const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n if (noticeElement) {\n setNoticeHeight(noticeElement.getBoundingClientRect().height);\n }\n };\n observeNoticeResize();\n window.addEventListener(\"resize\", observeNoticeResize);\n return () => window.removeEventListener(\"resize\", observeNoticeResize);\n }, []);\n\n return (\n <>\n <div\n className=\"absolute inset-0 w-full z-50\"\n id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n data-testid=\"meganav\"\n style={{ height: HEADER_HEIGHT + noticeHeight }}\n >\n {notice && <Notice {...notice.props} config={notice.config} />}\n <Header\n className=\"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64\"\n isNoticeVisible={!!notice}\n nav={\n <Flyout\n menuItems={menuItemsForHeader}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-~~000~~ dark:border-neutral-~~1300~~ rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300\"\n />\n }\n mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n headerLinksClassName=\"md:gap-x-24 \"\n sessionState={sessionState}\n ~~headerClassName=\"bg-transparent border-b-0\"\n~~ themedScrollpoints={[\n {\n id: \"meganav\",\n className: \"ui-theme-light !bg-transparent !border-none\",\n },\n {\n id: \"meganav-theme-dark\",\n className: \"ui-theme-dark !bg-transparent !border-none\",\n },\n {\n id: \"main\",\n className:\n \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n {\n id: \"main-theme-dark\",\n className:\n \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","menuItemsForHeader","MeganavMobile","Notice","HEADER_HEIGHT","Meganav","sessionState","notice","theme","noticeHeight","setNoticeHeight","useState","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","observeNoticeResize","noticeElement","document","querySelector","getBoundingClientRect","height","window","addEventListener","removeEventListener","div","className","id","data-testid","style","props","config","isNoticeVisible","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName","~~headerClassName","~~themedScrollpoints"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAoC,UAAW,AACtD,QAAOC,WAAY,UAAW,AAC9B,QAASC,kBAAkB,KAAQ,gBAAiB,AACpD,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,CAyBhD,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,MAAM,CAAEC,KAAK,CAAgB,IAC5D,KAAM,CAACC,aAAcC,gBAAgB,CAAGd,MAAMe,QAAQ,CAAC,GACvD,MAAMC,eAAiBd,QACrB,IACEG,mBACGY,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAC7D,EAAE,EAGJtB,UAAU,KACR,MAAMuB,oBAAsB,KAC1B,MAAMC,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAIF,cAAe,CACjBX,gBAAgBW,cAAcG,qBAAqB,GAAGC,MAAM,CAC9D,CACF,EACAL,sBACAM,OAAOC,gBAAgB,CAAC,SAAUP,qBAClC,MAAO,IAAMM,OAAOE,mBAAmB,CAAC,SAAUR,oBACpD,EAAG,EAAE,EAEL,OACE,wCACE,oBAACS,OACCC,UAAU,+BACVC,GAAIvB,QAAU,OAAS,qBAAuB,UAC9CwB,cAAY,UACZC,MAAO,CAAER,OAAQrB,cAAgBK,YAAa,GAE7CF,QAAU,oBAACJ,QAAQ,GAAGI,OAAO2B,KAAK,CAAEC,OAAQ5B,OAAO4B,MAAM,GAC1D,oBAACpC,QACC+B,UAAU,0DACVM,gBAAiB,CAAC,CAAC7B,OACnB8B,IACE,oBAACrC,QACCsC,UAAWrC,mBACX6B,UAAU,oBACVS,gBAAgB,oBAChBC,kBAAkB,~~gIAGtBC~~,UAAW,oBAACvC,eAAcwC,SAAU9B,iBACpC+B,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,eACrBxC,aAAcA,aACdyC,~~gBAAgB,4BAChBC,~~mBAAoB,CAClB,~~CACEjB~~,GAAI,UACJD,UAAW,6CACb,EACA,CACEC,GAAI,qBACJD,UAAW,4CACb,EACA,CACEC,GAAI,OACJD,UACE,6DACJ,EACA,CACEC,GAAI,kBACJD,UACE,4DACJ,EACD,IAKX,CAEA,gBAAezB,OAAQ"}
1	+ {"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { menuItemsForHeader } from \"./Meganav/data\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string \| number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n};\n\nconst Meganav = ({ sessionState, notice, theme }: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n const mobileNavItems = useMemo(\n () =>\n menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [],\n );\n\n useEffect(() => {\n const observeNoticeResize = () => {\n const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n if (noticeElement) {\n setNoticeHeight(noticeElement.getBoundingClientRect().height);\n }\n };\n observeNoticeResize();\n window.addEventListener(\"resize\", observeNoticeResize);\n return () => window.removeEventListener(\"resize\", observeNoticeResize);\n }, []);\n\n return (\n <>\n <div\n className=\"absolute inset-0 w-full z-50\"\n id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n data-testid=\"meganav\"\n style={{ height: HEADER_HEIGHT + noticeHeight }}\n >\n {notice && <Notice {...notice.props} config={notice.config} />}\n <Header\n className=\"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64\"\n isNoticeVisible={!!notice}\n nav={\n <Flyout\n menuItems={menuItemsForHeader}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-4 bg-neutral-000 dark:bg-neutral-1300\"\n />\n }\n mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n headerLinksClassName=\"md:gap-x-24 \"\n sessionState={sessionState}\n themedScrollpoints={[\n {\n id: \"meganav\",\n className: \"ui-theme-light !bg-transparent !border-none\",\n },\n {\n id: \"meganav-theme-dark\",\n className: \"ui-theme-dark !bg-transparent !border-none\",\n },\n {\n id: \"main\",\n className:\n \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n {\n id: \"main-theme-dark\",\n className:\n \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","menuItemsForHeader","MeganavMobile","Notice","HEADER_HEIGHT","Meganav","sessionState","notice","theme","noticeHeight","setNoticeHeight","useState","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","observeNoticeResize","noticeElement","document","querySelector","getBoundingClientRect","height","window","addEventListener","removeEventListener","div","className","id","data-testid","style","props","config","isNoticeVisible","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName","themedScrollpoints"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAoC,UAAW,AACtD,QAAOC,WAAY,UAAW,AAC9B,QAASC,kBAAkB,KAAQ,gBAAiB,AACpD,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,CAyBhD,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,MAAM,CAAEC,KAAK,CAAgB,IAC5D,KAAM,CAACC,aAAcC,gBAAgB,CAAGd,MAAMe,QAAQ,CAAC,GACvD,MAAMC,eAAiBd,QACrB,IACEG,mBACGY,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAC7D,EAAE,EAGJtB,UAAU,KACR,MAAMuB,oBAAsB,KAC1B,MAAMC,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAIF,cAAe,CACjBX,gBAAgBW,cAAcG,qBAAqB,GAAGC,MAAM,CAC9D,CACF,EACAL,sBACAM,OAAOC,gBAAgB,CAAC,SAAUP,qBAClC,MAAO,IAAMM,OAAOE,mBAAmB,CAAC,SAAUR,oBACpD,EAAG,EAAE,EAEL,OACE,wCACE,oBAACS,OACCC,UAAU,+BACVC,GAAIvB,QAAU,OAAS,qBAAuB,UAC9CwB,cAAY,UACZC,MAAO,CAAER,OAAQrB,cAAgBK,YAAa,GAE7CF,QAAU,oBAACJ,QAAQ,GAAGI,OAAO2B,KAAK,CAAEC,OAAQ5B,OAAO4B,MAAM,GAC1D,oBAACpC,QACC+B,UAAU,0DACVM,gBAAiB,CAAC,CAAC7B,OACnB8B,IACE,oBAACrC,QACCsC,UAAWrC,mBACX6B,UAAU,oBACVS,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACvC,eAAcwC,SAAU9B,iBACpC+B,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,eACrBxC,aAAcA,aACdyC,mBAAoB,CAClB,CACEhB,GAAI,UACJD,UAAW,6CACb,EACA,CACEC,GAAI,qBACJD,UAAW,4CACb,EACA,CACEC,GAAI,OACJD,UACE,6DACJ,EACA,CACEC,GAAI,kBACJD,UACE,4DACJ,EACD,IAKX,CAEA,gBAAezB,OAAQ"}

package/core/ProductTile/ProductDescription.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true})=>{if(!description||!showDescription){return null}return React.createElement("p",{className:cn("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected})},description)};export default ProductDescription;
+import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true})=>{if(!description||!showDescription){return null}return React.createElement("span",{className:cn("block ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected})},description)};export default ProductDescription;
 //# sourceMappingURL=ProductDescription.js.map

package/core/ProductTile/ProductDescription.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n description: string;\n selected?: boolean;\n unavailable: boolean;\n showDescription?: boolean;\n};\n\nconst ProductDescription = ({\n description,\n selected,\n unavailable,\n showDescription = true,\n}: ProductDescriptionProps) => {\n if (!description \|\| !showDescription) {\n return null;\n }\n\n return (\n <p\n className={cn(\n \"ui-text-p3 font-medium leading-snug\",\n {\n \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n !selected,\n },\n )}\n >\n {description}\n </p>\n );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","p","className"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAS7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACE,IACxB,GAAI,CAACH,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACC,~~KACCC~~,UAAWP,GACT,~~sCACA~~,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,IAGDD,YAGP,CAEA,gBAAeD,kBAAmB"}
1	+ {"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n description: string;\n selected?: boolean;\n unavailable: boolean;\n showDescription?: boolean;\n};\n\nconst ProductDescription = ({\n description,\n selected,\n unavailable,\n showDescription = true,\n}: ProductDescriptionProps) => {\n if (!description \|\| !showDescription) {\n return null;\n }\n\n return (\n <span\n className={cn(\n \"block ui-text-p3 font-medium leading-snug\",\n {\n \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n !selected,\n },\n )}\n >\n {description}\n </span>\n );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","span","className"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAS7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACE,IACxB,GAAI,CAACH,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACC,QACCC,UAAWP,GACT,4CACA,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,IAGDD,YAGP,CAEA,gBAAeD,kBAAmB"}

package/core/ProductTile/ProductIcon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const innerSize=size-2;const iconSize=size/6*4;return React.createElement("div",{className:cn("p-1 bg-gradient-to-b",{"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300":selected,"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300":!selected}),style:{width:size,height:size,borderRadius:size/4}},React.createElement("div",{className:cn("flex items-center justify-center",{"bg-neutral-1200 dark:bg-neutral-100":selected,"bg-neutral-100 dark:bg-neutral-1200":!selected,"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300":selected===false&&!unavailable}),style:{height:innerSize,borderRadius:size/4}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})})))};export default ProductIcon;
+import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const innerSize=size-2;const iconSize=size/6*4;return React.createElement("span",{className:cn("block p-1 bg-gradient-to-b",{"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300":selected,"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300":!selected}),style:{width:size,height:size,borderRadius:size/4}},React.createElement("span",{className:cn("flex items-center justify-center",{"bg-neutral-1200 dark:bg-neutral-100":selected,"bg-neutral-100 dark:bg-neutral-1200":!selected,"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300":selected===false&&!unavailable}),style:{height:innerSize,borderRadius:size/4}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})})))};export default ProductIcon;
 //# sourceMappingURL=ProductIcon.js.map

package/core/ProductTile/ProductIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n name?: IconName;\n hoverName?: IconName;\n selected?: boolean;\n size: number;\n unavailable: boolean;\n};\n\nconst ProductIcon = ({\n name,\n hoverName,\n selected,\n size,\n unavailable,\n}: ProductIconProps) => {\n if (!name) {\n return null;\n }\n\n // Inner container is 2px smaller to account for 1px padding on each side\n const innerSize = size - 2;\n\n // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n const iconSize = (size / 6) * 4;\n\n return (\n // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n <~~div~~\n className={cn(\"p-1 bg-gradient-to-b\", {\n \"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300\":\n selected,\n \"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300\":\n !selected,\n })}\n style={{ width: size, height: size, borderRadius: size / 4 }}\n >\n {/* Inner container, contains the foreground container element /}\n <~~div~~\n className={cn(\"flex items-center justify-center\", {\n \"bg-neutral-1200 dark:bg-neutral-100\": selected,\n \"bg-neutral-100 dark:bg-neutral-1200\": !selected,\n \"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300\":\n selected === false && !unavailable,\n })}\n style={{ height: innerSize, borderRadius: size / 4 }}\n >\n {/ The product icons themselves */}\n {hoverName ? (\n <Icon\n name={hoverName}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"hidden group-hover/product-tile:flex\": !selected,\n flex: selected,\n })}\n />\n ) : null}\n <Icon\n name={name}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n \"text-neutral-1300 dark:text-neutral-000\":\n !selected && !unavailable,\n \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n hidden: hoverName && selected,\n })}\n />\n </~~div~~>\n </~~div~~>\n );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","innerSize","iconSize","~~div~~","className","style","width","height","borderRadius","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACM,IACjB,GAAI,CAACJ,KAAM,CACT,OAAO,IACT,CAGA,MAAMK,UAAYF,KAAO,EAGzB,MAAMG,SAAW,AAACH,KAAO,EAAK,EAE9B,OAEE,oBAACI,~~OACCC~~,UAAWV,GAAG,~~uBAAwB~~,~~CACpC~~,8EACEI,SACF,8EACE,CAACA,QACL,GACAO,MAAO,CAAEC,MAAOP,KAAMQ,OAAQR,KAAMS,aAAcT,KAAO,CAAE,GAG3D,oBAACI,~~OACCC~~,UAAWV,GAAG,mCAAoC,CAChD,sCAAuCI,SACvC,sCAAuC,CAACA,SACxC,wFACEA,WAAa,OAAS,CAACE,WAC3B,GACAK,MAAO,CAAEE,OAAQN,UAAWO,aAAcT,KAAO,CAAE,GAGlDF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,uCAAwC,CAACI,SACzCY,KAAMZ,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CACE,CAACF,UAAY,CAACE,YAChB,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDa,OAAQd,WAAaC,QACvB,MAKV,CAEA,gBAAeH,WAAY"}
1	+ {"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n name?: IconName;\n hoverName?: IconName;\n selected?: boolean;\n size: number;\n unavailable: boolean;\n};\n\nconst ProductIcon = ({\n name,\n hoverName,\n selected,\n size,\n unavailable,\n}: ProductIconProps) => {\n if (!name) {\n return null;\n }\n\n // Inner container is 2px smaller to account for 1px padding on each side\n const innerSize = size - 2;\n\n // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n const iconSize = (size / 6) * 4;\n\n return (\n // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n <span\n className={cn(\"block p-1 bg-gradient-to-b\", {\n \"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300\":\n selected,\n \"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300\":\n !selected,\n })}\n style={{ width: size, height: size, borderRadius: size / 4 }}\n >\n {/* Inner container, contains the foreground container element /}\n <span\n className={cn(\"flex items-center justify-center\", {\n \"bg-neutral-1200 dark:bg-neutral-100\": selected,\n \"bg-neutral-100 dark:bg-neutral-1200\": !selected,\n \"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300\":\n selected === false && !unavailable,\n })}\n style={{ height: innerSize, borderRadius: size / 4 }}\n >\n {/ The product icons themselves */}\n {hoverName ? (\n <Icon\n name={hoverName}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"hidden group-hover/product-tile:flex\": !selected,\n flex: selected,\n })}\n />\n ) : null}\n <Icon\n name={name}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n \"text-neutral-1300 dark:text-neutral-000\":\n !selected && !unavailable,\n \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n hidden: hoverName && selected,\n })}\n />\n </span>\n </span>\n );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","innerSize","iconSize","span","className","style","width","height","borderRadius","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACM,IACjB,GAAI,CAACJ,KAAM,CACT,OAAO,IACT,CAGA,MAAMK,UAAYF,KAAO,EAGzB,MAAMG,SAAW,AAACH,KAAO,EAAK,EAE9B,OAEE,oBAACI,QACCC,UAAWV,GAAG,6BAA8B,CAC1C,8EACEI,SACF,8EACE,CAACA,QACL,GACAO,MAAO,CAAEC,MAAOP,KAAMQ,OAAQR,KAAMS,aAAcT,KAAO,CAAE,GAG3D,oBAACI,QACCC,UAAWV,GAAG,mCAAoC,CAChD,sCAAuCI,SACvC,sCAAuC,CAACA,SACxC,wFACEA,WAAa,OAAS,CAACE,WAC3B,GACAK,MAAO,CAAEE,OAAQN,UAAWO,aAAcT,KAAO,CAAE,GAGlDF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,uCAAwC,CAACI,SACzCY,KAAMZ,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CACE,CAACF,UAAY,CAACE,YAChB,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDa,OAAQd,WAAaC,QACvB,MAKV,CAEA,gBAAeH,WAAY"}

package/core/ProductTile/ProductLabel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("div",{className:"flex flex-col justify-center"},unavailable?React.createElement("div",null,React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("p",{className:cn("font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("p",{className:cn("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable}),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
+import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable}),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
 //# sourceMappingURL=ProductLabel.js.map

package/core/ProductTile/ProductLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n label: string;\n unavailable: boolean;\n selected?: boolean;\n numericalSize: number;\n showLabel?: boolean;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n label,\n unavailable,\n selected,\n numericalSize,\n showLabel,\n}: ProductLabelProps) => {\n if (!label \|\| !showLabel) {\n return null;\n }\n\n const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n return (\n <~~div~~ className=\"flex flex-col justify-center\">\n {unavailable ? (\n <~~div~~>\n <~~div~~\n className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug\"\n style={{\n fontSize: dynamicFontSize * 0.6,\n padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n }}\n >\n COMING SOON\n </~~div~~>\n </~~div~~>\n ) : (\n <p\n className={cn(\n \"font-bold uppercase ui-text-p2 leading-snug\",\n { \"text-neutral-500 dark:text-neutral-700\": selected },\n { \"text-neutral-700 dark:text-neutral-500\": !selected },\n )}\n style={{\n fontSize: dynamicFontSize,\n letterSpacing: \"0.06em\",\n }}\n >\n Ably\n </p>\n )}\n <p\n className={cn(\n \"ui-text-p2 font-bold\",\n {\n \"text-neutral-000 dark:text-neutral-1300\":\n selected === true && !unavailable,\n },\n {\n \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n selected === false && !unavailable,\n },\n {\n \"text-neutral-1300 dark:text-neutral-000\":\n selected === undefined && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600\": unavailable,\n },\n { \"mt-[-3px]\": !unavailable },\n )}\n style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n >\n {label}\n </p>\n </~~div~~>\n );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","dynamicFontSize","~~div~~","className","style","fontSize","padding","~~p","~~letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACS,IAClB,GAAI,CAACJ,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMC,gBAAkBF,cAAgBN,sBAExC,OACE,oBAACS,~~OAAIC~~,UAAU,~~gCACZN~~,YACC,oBAACK,~~WACC~~,~~oBAACA~~,~~OACCC~~,UAAU,wIACVC,MAAO,CACLC,SAAUJ,gBAAkB,GAC5BK,QAAS,CAAC,EAAEL,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,~~oBAACM~~,~~KACCJ~~,UAAWX,GACT,~~8CACA~~,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUJ,~~gBACVO~~,cAAe,QACjB,GACD,QAIH,~~oBAACD~~,~~KACCJ~~,UAAWX,GACT,~~uBACA~~,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,~~WAAaW~~,WAAa,~~CAACZ~~,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,GAE9BO,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}
1	+ {"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n label: string;\n unavailable: boolean;\n selected?: boolean;\n numericalSize: number;\n showLabel?: boolean;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n label,\n unavailable,\n selected,\n numericalSize,\n showLabel,\n}: ProductLabelProps) => {\n if (!label \|\| !showLabel) {\n return null;\n }\n\n const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n return (\n <span className=\"flex flex-col justify-center\">\n {unavailable ? (\n <span className=\"block\">\n <span\n className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug\"\n style={{\n fontSize: dynamicFontSize * 0.6,\n padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n }}\n >\n COMING SOON\n </span>\n </span>\n ) : (\n <span\n className={cn(\n \"block font-bold uppercase ui-text-p2 leading-snug\",\n { \"text-neutral-500 dark:text-neutral-700\": selected },\n { \"text-neutral-700 dark:text-neutral-500\": !selected },\n )}\n style={{\n fontSize: dynamicFontSize,\n letterSpacing: \"0.06em\",\n }}\n >\n Ably\n </span>\n )}\n <span\n className={cn(\n \"block ui-text-p2 font-bold\",\n {\n \"text-neutral-000 dark:text-neutral-1300\":\n selected === true && !unavailable,\n },\n {\n \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n selected === false && !unavailable,\n },\n {\n \"text-neutral-1300 dark:text-neutral-000\":\n selected === undefined && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600\": unavailable,\n },\n { \"mt-[-3px]\": !unavailable },\n )}\n style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n >\n {label}\n </span>\n </span>\n );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","dynamicFontSize","span","className","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACS,IAClB,GAAI,CAACJ,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMC,gBAAkBF,cAAgBN,sBAExC,OACE,oBAACS,QAAKC,UAAU,gCACbN,YACC,oBAACK,QAAKC,UAAU,SACd,oBAACD,QACCC,UAAU,wIACVC,MAAO,CACLC,SAAUJ,gBAAkB,GAC5BK,QAAS,CAAC,EAAEL,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCC,UAAWX,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUJ,gBACVM,cAAe,QACjB,GACD,QAIH,oBAACL,QACCC,UAAWX,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,GAE9BO,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}

package/index.d.ts CHANGED Viewed

@@ -588,10 +588,6 @@ export type HeaderSessionState = {
  * Props for the Header component.
  */
 export type HeaderProps = {
-    /**
-     * Optional classname for styling the header.
-     */
-    headerClassName?: string;
     /**
      * Optional classnames to add to the header
      */
@@ -1146,6 +1142,15 @@ export const MeganavPanel: ({ displayProductTile, panelLeft, panelLeftClassName,
 //# sourceMappingURL=MeganavPanel.d.ts.map
 }
+declare module '@ably/ui/core/Meganav/MeganavProductTile' {
+import { ProductTileProps } from ".@ably/ui/core/ProductTile";
+const MeganavProductTile: ({ name, productLink, showDescription, showLabel, size, animateIcons, }: ProductTileProps & {
+    productLink?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavProductTile;
+//# sourceMappingURL=MeganavProductTile.d.ts.map
+}
 declare module '@ably/ui/core/Meganav/data' {
 import React from "react";
 import { IconName } from ".@ably/ui/core/Icon/types";
@@ -1179,6 +1184,56 @@ export const menuItemLinks: {
     isHiddenMobile: boolean;
 }[];
 export const menuItemsForHeader: MenuItem[];
+export const productsForNav: {
+    pubsub: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    liveSync: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    chat: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    spaces: {
+        link: string;
+        label: string;
+        description: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    assetTracking: {
+        label: string;
+        description: string;
+        link?: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+    liveObjects: {
+        label: string;
+        description: string;
+        link?: string;
+        icon?: IconName;
+        hoverIcon?: IconName;
+        unavailable?: boolean;
+    };
+};
 //# sourceMappingURL=data.d.ts.map
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.0.0-dev.51e26db2",
+  "version": "16.0.0-dev.667628d8",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",