@ably/ui 17.11.5-dev.e08ca624 → 17.11.8-dev.a815340d

package/core/Meganav/MeganavBlog.js

@@ -1,2 +1,2 @@
-import React from"react";import{PanelTitle}from"./PanelTitle";import Badge from"../Badge";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const getCategoryColor=category=>{const upperCategory=category.toUpperCase();if(["NEW RELEASE","ABLY ENGINEERING","ABLY NEWS","NEW FEATURE","REALTIME EXPERIENCES"].includes(upperCategory))return"orange";if(["CHAT","SPACES"].includes(upperCategory))return"blue";if(["LIVEOBJECTS","LIVESYNC"].includes(upperCategory))return"green";if(upperCategory==="PUBSUB")return"pink";if(upperCategory==="AI TRANSPORT")return"violet";return"neutral"};const MeganavBlog=({title,link,icon,posts})=>{return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),posts.map(post=>React.createElement("a",{href:post.link,className:"flex flex-col gap-1 p-3   transition-colors group/blog-post rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200  active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base",key:post.link},React.createElement("span",{className:"flex gap-2"},post.categories.map(category=>React.createElement(Badge,{color:getCategoryColor(category),key:category,size:"xs",className:"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300"},category.toUpperCase()))),React.createElement("span",{className:"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000"},post.title),React.createElement("span",{className:"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600"},post.pubDate)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavBlog;
+import React from"react";import{PanelTitle}from"./PanelTitle";import Badge from"../Badge";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const getCategoryColor=category=>{const upperCategory=category.toUpperCase();if(["NEW RELEASE","ABLY ENGINEERING","ABLY NEWS","NEW FEATURE","REALTIME EXPERIENCES"].includes(upperCategory))return"orange";if(["CHAT","SPACES"].includes(upperCategory))return"blue";if(["LIVEOBJECTS","LIVESYNC"].includes(upperCategory))return"green";if(upperCategory==="PUBSUB")return"pink";if(upperCategory==="AI TRANSPORT")return"violet";return"neutral"};const MeganavBlog=({title,link,icon,posts})=>{return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),posts.map(post=>React.createElement("a",{href:post.link,className:"flex flex-col gap-1 p-3   transition-colors group/blog-post rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200  active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base",key:post.link},React.createElement("span",{className:"flex flex-wrap gap-2"},post.categories.map(category=>React.createElement(Badge,{color:getCategoryColor(category),key:category,size:"xs",className:"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300"},category.toUpperCase()))),React.createElement("span",{className:"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000"},post.title),React.createElement("span",{className:"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600"},post.pubDate)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavBlog;
 //# sourceMappingURL=MeganavBlog.js.map

package/core/Meganav/MeganavBlog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavBlog.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport Badge from \"../Badge\";\n\nimport { ColorClassColorGroups } from \"../styles/colors/types\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type BlogPost = {\n  title: string;\n  link: string;\n  categories: string[];\n  pubDate: string;\n};\n\nexport type MeganavBlogProps = {\n  title: string;\n  link: string;\n  icon?: IconName;\n  posts: BlogPost[];\n};\n\nconst getCategoryColor = (category: string): ColorClassColorGroups => {\n  const upperCategory = category.toUpperCase();\n  if (\n    [\n      \"NEW RELEASE\",\n      \"ABLY ENGINEERING\",\n      \"ABLY NEWS\",\n      \"NEW FEATURE\",\n      \"REALTIME EXPERIENCES\",\n    ].includes(upperCategory)\n  )\n    return \"orange\";\n  if ([\"CHAT\", \"SPACES\"].includes(upperCategory)) return \"blue\";\n  if ([\"LIVEOBJECTS\", \"LIVESYNC\"].includes(upperCategory)) return \"green\";\n  if (upperCategory === \"PUBSUB\") return \"pink\";\n  if (upperCategory === \"AI TRANSPORT\") return \"violet\";\n  return \"neutral\";\n};\n\nconst MeganavBlog = ({ title, link, icon, posts }: MeganavBlogProps) => {\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        {posts.map((post) => (\n          <a\n            href={post.link}\n            className=\"flex flex-col gap-1 p-3  \n          transition-colors group/blog-post rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 \n      active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base\"\n            key={post.link}\n          >\n            <span className=\"flex gap-2\">\n              {post.categories.map((category: string) => (\n                <Badge\n                  color={getCategoryColor(category)}\n                  key={category}\n                  size=\"xs\"\n                  className=\"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300\"\n                >\n                  {category.toUpperCase()}\n                </Badge>\n              ))}\n            </span>\n            <span\n              className=\"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300\n          group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000\"\n            >\n              {post.title}\n            </span>\n\n            <span className=\"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600\">\n              {post.pubDate}\n            </span>\n          </a>\n        ))}\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavBlog;\n"],"names":["React","PanelTitle","Badge","MeganavPanelItemLinks","getCategoryColor","category","upperCategory","toUpperCase","includes","MeganavBlog","title","link","icon","posts","div","className","map","post","a","href","key","span","categories","color","size","pubDate","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,UAAW,UAAW,AAG7B,QAAOC,0BAA2B,yBAA0B,CAiB5D,MAAMC,iBAAmB,AAACC,WACxB,MAAMC,cAAgBD,SAASE,WAAW,GAC1C,GACE,CACE,cACA,mBACA,YACA,cACA,uBACD,CAACC,QAAQ,CAACF,eAEX,MAAO,SACT,GAAI,CAAC,OAAQ,SAAS,CAACE,QAAQ,CAACF,eAAgB,MAAO,OACvD,GAAI,CAAC,cAAe,WAAW,CAACE,QAAQ,CAACF,eAAgB,MAAO,QAChE,GAAIA,gBAAkB,SAAU,MAAO,OACvC,GAAIA,gBAAkB,eAAgB,MAAO,SAC7C,MAAO,SACT,EAEA,MAAMG,YAAc,CAAC,CAAEC,KAAK,CAAEC,IAAI,CAAEC,IAAI,CAAEC,KAAK,CAAoB,IACjE,OACE,wCACE,oBAACC,OAAIC,UAAU,wBACb,oBAACd,YAAWS,MAAOA,MAAOC,KAAMA,OAC/BE,MAAMG,GAAG,CAAC,AAACC,MACV,oBAACC,KACCC,KAAMF,KAAKN,IAAI,CACfI,UAAU,uLAIVK,IAAKH,KAAKN,IAAI,EAEd,oBAACU,QAAKN,UAAU,cACbE,KAAKK,UAAU,CAACN,GAAG,CAAC,AAACX,UACpB,oBAACH,OACCqB,MAAOnB,iBAAiBC,UACxBe,IAAKf,SACLmB,KAAK,KACLT,UAAU,mFAETV,SAASE,WAAW,MAI3B,oBAACc,QACCN,UAAU,4JAGTE,KAAKP,KAAK,EAGb,oBAACW,QAAKN,UAAU,gFACbE,KAAKQ,OAAO,KAKrB,oBAACX,OAAIC,UAAU,mBACb,oBAACZ,uBACCuB,UAAW,CACT,CACEC,MAAOjB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeH,WAAY"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavBlog.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport Badge from \"../Badge\";\n\nimport { ColorClassColorGroups } from \"../styles/colors/types\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type BlogPost = {\n  title: string;\n  link: string;\n  categories: string[];\n  pubDate: string;\n};\n\nexport type MeganavBlogProps = {\n  title: string;\n  link: string;\n  icon?: IconName;\n  posts: BlogPost[];\n};\n\nconst getCategoryColor = (category: string): ColorClassColorGroups => {\n  const upperCategory = category.toUpperCase();\n  if (\n    [\n      \"NEW RELEASE\",\n      \"ABLY ENGINEERING\",\n      \"ABLY NEWS\",\n      \"NEW FEATURE\",\n      \"REALTIME EXPERIENCES\",\n    ].includes(upperCategory)\n  )\n    return \"orange\";\n  if ([\"CHAT\", \"SPACES\"].includes(upperCategory)) return \"blue\";\n  if ([\"LIVEOBJECTS\", \"LIVESYNC\"].includes(upperCategory)) return \"green\";\n  if (upperCategory === \"PUBSUB\") return \"pink\";\n  if (upperCategory === \"AI TRANSPORT\") return \"violet\";\n  return \"neutral\";\n};\n\nconst MeganavBlog = ({ title, link, icon, posts }: MeganavBlogProps) => {\n  return (\n    <>\n      <div className=\"mt-3 hidden md:block\">\n        <PanelTitle title={title} link={link} />\n        {posts.map((post) => (\n          <a\n            href={post.link}\n            className=\"flex flex-col gap-1 p-3  \n          transition-colors group/blog-post rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 \n      active:bg-neutral-200 dark:active:bg-neutral-1100 focus-base\"\n            key={post.link}\n          >\n            <span className=\"flex flex-wrap gap-2\">\n              {post.categories.map((category: string) => (\n                <Badge\n                  color={getCategoryColor(category)}\n                  key={category}\n                  size=\"xs\"\n                  className=\"group-hover/blog-post:bg-neutral-000 dark:group-hover/blog-post:bg-neutral-1300\"\n                >\n                  {category.toUpperCase()}\n                </Badge>\n              ))}\n            </span>\n            <span\n              className=\"ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300\n          group-hover/blog-post:text-neutral-1300 dark:group-hover/blog-post:text-neutral-000\"\n            >\n              {post.title}\n            </span>\n\n            <span className=\"text-[11px] font-medium leading-[1.4] text-neutral-700 dark:text-neutral-600\">\n              {post.pubDate}\n            </span>\n          </a>\n        ))}\n      </div>\n      <div className=\"block md:hidden\">\n        <MeganavPanelItemLinks\n          listItems={[\n            {\n              label: title,\n              link: link,\n              icon: icon,\n            },\n          ]}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default MeganavBlog;\n"],"names":["React","PanelTitle","Badge","MeganavPanelItemLinks","getCategoryColor","category","upperCategory","toUpperCase","includes","MeganavBlog","title","link","icon","posts","div","className","map","post","a","href","key","span","categories","color","size","pubDate","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,UAAW,UAAW,AAG7B,QAAOC,0BAA2B,yBAA0B,CAiB5D,MAAMC,iBAAmB,AAACC,WACxB,MAAMC,cAAgBD,SAASE,WAAW,GAC1C,GACE,CACE,cACA,mBACA,YACA,cACA,uBACD,CAACC,QAAQ,CAACF,eAEX,MAAO,SACT,GAAI,CAAC,OAAQ,SAAS,CAACE,QAAQ,CAACF,eAAgB,MAAO,OACvD,GAAI,CAAC,cAAe,WAAW,CAACE,QAAQ,CAACF,eAAgB,MAAO,QAChE,GAAIA,gBAAkB,SAAU,MAAO,OACvC,GAAIA,gBAAkB,eAAgB,MAAO,SAC7C,MAAO,SACT,EAEA,MAAMG,YAAc,CAAC,CAAEC,KAAK,CAAEC,IAAI,CAAEC,IAAI,CAAEC,KAAK,CAAoB,IACjE,OACE,wCACE,oBAACC,OAAIC,UAAU,wBACb,oBAACd,YAAWS,MAAOA,MAAOC,KAAMA,OAC/BE,MAAMG,GAAG,CAAC,AAACC,MACV,oBAACC,KACCC,KAAMF,KAAKN,IAAI,CACfI,UAAU,uLAIVK,IAAKH,KAAKN,IAAI,EAEd,oBAACU,QAAKN,UAAU,wBACbE,KAAKK,UAAU,CAACN,GAAG,CAAC,AAACX,UACpB,oBAACH,OACCqB,MAAOnB,iBAAiBC,UACxBe,IAAKf,SACLmB,KAAK,KACLT,UAAU,mFAETV,SAASE,WAAW,MAI3B,oBAACc,QACCN,UAAU,4JAGTE,KAAKP,KAAK,EAGb,oBAACW,QAAKN,UAAU,gFACbE,KAAKQ,OAAO,KAKrB,oBAACX,OAAIC,UAAU,mBACb,oBAACZ,uBACCuB,UAAW,CACT,CACEC,MAAOjB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeH,WAAY"}

package/core/Meganav/data.js

@@ -1,2 +1,2 @@
-import React from"react";import G2BestMeetsRequirementsSpring2025 from"../images/badges/g2-best-meets-requirements-spring-2025.svg";import G2BestResultsSpring2025 from"../images/badges/g2-best-results-spring-2025.svg";import G2BestSupportSpring2025 from"../images/badges/g2-best-support-spring-2025.svg";import{products}from"../ProductTile/data";import DoxyMeLogo from"../Meganav/images/cust-logo-doxy-light.png";import DoxyMeLogoDark from"../Meganav/images/cust-logo-doxy-dark.png";export const productsMenu=[{label:"Architecture",icon:"icon-gui-squares-2-x-2-outline",link:"/platform"},{label:"Integrations",icon:"icon-gui-puzzle-piece-outline",link:"/docs/platform/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"}];export const compareMenu=[{label:"Ably vs Pusher",link:"/compare/ably-vs-pusher"},{label:"Ably vs PubNub",link:"/compare/ably-vs-pubnub"},{label:"Ably vs Socket.io",link:"/compare/ably-vs-socketio"}];export const solutionsMenu=[{label:"Fan Engagement",icon:"icon-gui-hand-thumb-up-outline",link:"/fan-engagement",description:"Enhance every moment with live, interactive fan experiences."},{label:"FinTech",icon:"icon-gui-currency-dollar-outline",link:"/fin-tech",description:"Speed, reliability, and confidence in every user interaction."},{label:"EdTech",icon:"icon-gui-academic-cap-outline",link:"/ed-tech",description:"Power collaborative, interactive learning environments."},{label:"CXTech",icon:"icon-gui-face-smile-outline",link:"/cx-tech",description:"Deliver fast support, strong relationships, and high retention."},{label:"HealthTech",icon:"icon-gui-heartbeat-outline",link:"/health-tech",description:"Reliable tools with full data privacy and compliance."}];export const customerStoriesHighlight={companyLogo:DoxyMeLogo,companyLogoDark:DoxyMeLogoDark,companyLink:"/case-studies/doxyme",companyName:"Doxy.me",companyDesc:"built their realtime stack in under six months, cutting costs by 65%, eliminating errors, and transforming a once-feared system into a core strength."};export const companyMenu=[{label:"Our story",icon:"icon-gui-ably-badge",link:"/case-studies"},{label:"Careers",icon:"icon-gui-briefcase-outline",link:"/careers",badge:"WE'RE HIRING"}];export const ablyAwards=[{image:G2BestSupportSpring2025,desc:"G2 Best Support Spring 2025"},{image:G2BestMeetsRequirementsSpring2025,desc:"G2 Best Meets Requirements Spring 2025"},{image:G2BestResultsSpring2025,desc:"G2 Best Results Spring 2025"}];export const menuItemLinks=[{name:"Pricing",link:"/pricing",isHiddenMobile:true},{name:"Docs",link:"/docs",isHiddenMobile:true}];export const defaultBlogPosts=[{title:"Ably AI Transport: keep your agents connected and stateful across devices",link:"/blog/ably-ai-transport",categories:["New Release","AI Transport"],pubDate:"Dec 9, 2025"},{title:"Live chat at unlimited scale: What it takes to support stadium-sized audiences",link:"/blog/live-chat-at-unlimited-scale",categories:["Chat"],pubDate:"Nov 18, 2025"}];export const productsForNav={...products,pubsub:{...products.pubsub,link:"/pubsub"},liveSync:{...products.liveSync,link:"/livesync"},chat:{...products.chat,link:"/chat"},spaces:{...products.spaces,link:"/spaces"},aiTransport:{...products.aiTransport,link:"/ai-transport"},liveObjects:{...products.liveObjects,link:"/liveobjects"}};
+import React from"react";import G2BestMeetsRequirementsSpring2025 from"../images/badges/g2-best-meets-requirements-spring-2025.svg";import G2BestResultsSpring2025 from"../images/badges/g2-best-results-spring-2025.svg";import G2BestSupportSpring2025 from"../images/badges/g2-best-support-spring-2025.svg";import{products}from"../ProductTile/data";import DoxyMeLogo from"../Meganav/images/cust-logo-doxy-light.png";import DoxyMeLogoDark from"../Meganav/images/cust-logo-doxy-dark.png";export const productsMenu=[{label:"Architecture",icon:"icon-gui-squares-2-x-2-outline",link:"/platform"},{label:"Integrations",icon:"icon-gui-puzzle-piece-outline",link:"/docs/platform/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"}];export const compareMenu=[{label:"Ably vs Pusher",link:"/compare/ably-vs-pusher"},{label:"Ably vs PubNub",link:"/compare/ably-vs-pubnub"},{label:"Ably vs Socket.io",link:"/compare/ably-vs-socketio"}];export const solutionsMenu=[{label:"Fan Engagement",icon:"icon-gui-hand-thumb-up-outline",link:"/fan-engagement",description:"Enhance every moment with live, interactive fan experiences."},{label:"FinTech",icon:"icon-gui-currency-dollar-outline",link:"/fin-tech",description:"Speed, reliability, and confidence in every user interaction."},{label:"EdTech",icon:"icon-gui-academic-cap-outline",link:"/ed-tech",description:"Power collaborative, interactive learning environments."},{label:"CXTech",icon:"icon-gui-face-smile-outline",link:"/cx-tech",description:"Deliver fast support, strong relationships, and high retention."},{label:"HealthTech",icon:"icon-gui-heartbeat-outline",link:"/health-tech",description:"Reliable tools with full data privacy and compliance."}];export const customerStoriesHighlight={companyLogo:DoxyMeLogo,companyLogoDark:DoxyMeLogoDark,companyLink:"/case-studies/doxyme",companyName:"Doxy.me",companyDesc:"built their realtime stack in under six months, cutting costs by 65%, eliminating errors, and transforming a once-feared system into a core strength."};export const companyMenu=[{label:"Our story",icon:"icon-gui-ably-badge",link:"/case-studies"},{label:"Careers",icon:"icon-gui-briefcase-outline",link:"/careers",badge:"WE'RE HIRING"}];export const ablyAwards=[{image:G2BestSupportSpring2025,desc:"G2 Best Support Spring 2025"},{image:G2BestMeetsRequirementsSpring2025,desc:"G2 Best Meets Requirements Spring 2025"},{image:G2BestResultsSpring2025,desc:"G2 Best Results Spring 2025"}];export const menuItemLinks=[{name:"Pricing",link:"/pricing",isHiddenMobile:true},{name:"Docs",link:"/docs",isHiddenMobile:true}];export const defaultBlogPosts=[{title:"Ably AI Transport: keep your agents connected and stateful across devices",link:"/blog/ably-ai-transport",categories:["New Release","AI Transport","New Feature","RealTime Experiences","Engineering","Ably News"],pubDate:"Dec 9, 2025"},{title:"Live chat at unlimited scale: What it takes to support stadium-sized audiences",link:"/blog/live-chat-at-unlimited-scale",categories:["Chat"],pubDate:"Nov 18, 2025"}];export const productsForNav={...products,pubsub:{...products.pubsub,link:"/pubsub"},liveSync:{...products.liveSync,link:"/livesync"},chat:{...products.chat,link:"/chat"},spaces:{...products.spaces,link:"/spaces"},aiTransport:{...products.aiTransport,link:"/ai-transport"},liveObjects:{...products.liveObjects,link:"/liveobjects"}};
 //# sourceMappingURL=data.js.map

package/core/Meganav/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { CustomerStoryHighlight } from \"./MeganavCustomerStories\";\nimport { BlogPost } from \"./MeganavBlog\";\nimport G2BestMeetsRequirementsSpring2025 from \"../images/badges/g2-best-meets-requirements-spring-2025.svg\";\nimport G2BestResultsSpring2025 from \"../images/badges/g2-best-results-spring-2025.svg\";\nimport G2BestSupportSpring2025 from \"../images/badges/g2-best-support-spring-2025.svg\";\nimport { products } from \"../ProductTile/data\";\nimport DoxyMeLogo from \"../Meganav/images/cust-logo-doxy-light.png\";\nimport DoxyMeLogoDark from \"../Meganav/images/cust-logo-doxy-dark.png\";\n\nexport type FlyoutPanelList = {\n  label: string;\n  icon?: IconName;\n  link: string;\n  isMobile?: boolean;\n  description?: string;\n  badge?: string;\n};\n\nexport type MenuItem = {\n  name: string;\n  link?: string;\n  isHiddenMobile?: boolean;\n  content?: React.ReactNode;\n  panelClassName?: string;\n};\n\nexport const productsMenu: FlyoutPanelList[] = [\n  {\n    label: \"Architecture\",\n    icon: \"icon-gui-squares-2-x-2-outline\",\n    link: \"/platform\",\n  },\n  {\n    label: \"Integrations\",\n    icon: \"icon-gui-puzzle-piece-outline\",\n    link: \"/docs/platform/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\nexport const compareMenu: FlyoutPanelList[] = [\n  {\n    label: \"Ably vs Pusher\",\n    link: \"/compare/ably-vs-pusher\",\n  },\n  {\n    label: \"Ably vs PubNub\",\n    link: \"/compare/ably-vs-pubnub\",\n  },\n  {\n    label: \"Ably vs Socket.io\",\n    link: \"/compare/ably-vs-socketio\",\n  },\n];\n\nexport const solutionsMenu: FlyoutPanelList[] = [\n  {\n    label: \"Fan Engagement\",\n    icon: \"icon-gui-hand-thumb-up-outline\",\n    link: \"/fan-engagement\",\n    description: \"Enhance every moment with live, interactive fan experiences.\",\n  },\n  {\n    label: \"FinTech\",\n    icon: \"icon-gui-currency-dollar-outline\",\n    link: \"/fin-tech\",\n    description:\n      \"Speed, reliability, and confidence in every user interaction.\",\n  },\n  {\n    label: \"EdTech\",\n    icon: \"icon-gui-academic-cap-outline\",\n    link: \"/ed-tech\",\n    description: \"Power collaborative, interactive learning environments.\",\n  },\n  {\n    label: \"CXTech\",\n    icon: \"icon-gui-face-smile-outline\",\n    link: \"/cx-tech\",\n    description:\n      \"Deliver fast support, strong relationships, and high retention.\",\n  },\n\n  {\n    label: \"HealthTech\",\n    icon: \"icon-gui-heartbeat-outline\",\n    link: \"/health-tech\",\n    description: \"Reliable tools with full data privacy and compliance.\",\n  },\n];\n\nexport const customerStoriesHighlight: CustomerStoryHighlight = {\n  companyLogo: DoxyMeLogo,\n  companyLogoDark: DoxyMeLogoDark,\n  companyLink: \"/case-studies/doxyme\",\n  companyName: \"Doxy.me\",\n  companyDesc:\n    \"built their realtime stack in under six months, cutting costs by 65%, eliminating errors, and transforming a once-feared system into a core strength.\",\n};\n\nexport const companyMenu: FlyoutPanelList[] = [\n  {\n    label: \"Our story\",\n    icon: \"icon-gui-ably-badge\",\n    link: \"/case-studies\",\n  },\n  {\n    label: \"Careers\",\n    icon: \"icon-gui-briefcase-outline\",\n    link: \"/careers\",\n    badge: \"WE'RE HIRING\",\n  },\n];\n\nexport const ablyAwards = [\n  {\n    image: G2BestSupportSpring2025,\n    desc: \"G2 Best Support Spring 2025\",\n  },\n  {\n    image: G2BestMeetsRequirementsSpring2025,\n    desc: \"G2 Best Meets Requirements Spring 2025\",\n  },\n  {\n    image: G2BestResultsSpring2025,\n    desc: \"G2 Best Results Spring 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 defaultBlogPosts: BlogPost[] = [\n  {\n    title:\n      \"Ably AI Transport: keep your agents connected and stateful across devices\",\n    link: \"/blog/ably-ai-transport\",\n    categories: [\"New Release\", \"AI Transport\"],\n    pubDate: \"Dec 9, 2025\",\n  },\n  {\n    title:\n      \"Live chat at unlimited scale: What it takes to support stadium-sized audiences\",\n    link: \"/blog/live-chat-at-unlimited-scale\",\n    categories: [\"Chat\"],\n    pubDate: \"Nov 18, 2025\",\n  },\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  aiTransport: {\n    ...products.aiTransport,\n    link: \"/ai-transport\",\n  },\n  liveObjects: { ...products.liveObjects, link: \"/liveobjects\" },\n};\n"],"names":["React","G2BestMeetsRequirementsSpring2025","G2BestResultsSpring2025","G2BestSupportSpring2025","products","DoxyMeLogo","DoxyMeLogoDark","productsMenu","label","icon","link","compareMenu","solutionsMenu","description","customerStoriesHighlight","companyLogo","companyLogoDark","companyLink","companyName","companyDesc","companyMenu","badge","ablyAwards","image","desc","menuItemLinks","name","isHiddenMobile","defaultBlogPosts","title","categories","pubDate","productsForNav","pubsub","liveSync","chat","spaces","aiTransport","liveObjects"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAI1B,QAAOC,sCAAuC,6DAA8D,AAC5G,QAAOC,4BAA6B,kDAAmD,AACvF,QAAOC,4BAA6B,kDAAmD,AACvF,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,eAAgB,4CAA6C,AACpE,QAAOC,mBAAoB,2CAA4C,AAmBvE,QAAO,MAAMC,aAAkC,CAC7C,CACEC,MAAO,eACPC,KAAM,iCACNC,KAAM,WACR,EACA,CACEF,MAAO,eACPC,KAAM,gCACNC,KAAM,6BACR,EACA,CACEF,MAAO,OACPC,KAAM,oCACNC,KAAM,YACR,EACA,CACEF,MAAO,wBACPC,KAAM,gCACNC,KAAM,0BACR,EACD,AAAC,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEH,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,oBACPE,KAAM,2BACR,EACD,AAAC,AAEF,QAAO,MAAME,cAAmC,CAC9C,CACEJ,MAAO,iBACPC,KAAM,iCACNC,KAAM,kBACNG,YAAa,8DACf,EACA,CACEL,MAAO,UACPC,KAAM,mCACNC,KAAM,YACNG,YACE,+DACJ,EACA,CACEL,MAAO,SACPC,KAAM,gCACNC,KAAM,WACNG,YAAa,yDACf,EACA,CACEL,MAAO,SACPC,KAAM,8BACNC,KAAM,WACNG,YACE,iEACJ,EAEA,CACEL,MAAO,aACPC,KAAM,6BACNC,KAAM,eACNG,YAAa,uDACf,EACD,AAAC,AAEF,QAAO,MAAMC,yBAAmD,CAC9DC,YAAaV,WACbW,gBAAiBV,eACjBW,YAAa,uBACbC,YAAa,UACbC,YACE,uJACJ,CAAE,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEZ,MAAO,YACPC,KAAM,sBACNC,KAAM,eACR,EACA,CACEF,MAAO,UACPC,KAAM,6BACNC,KAAM,WACNW,MAAO,cACT,EACD,AAAC,AAEF,QAAO,MAAMC,WAAa,CACxB,CACEC,MAAOpB,wBACPqB,KAAM,6BACR,EACA,CACED,MAAOtB,kCACPuB,KAAM,wCACR,EACA,CACED,MAAOrB,wBACPsB,KAAM,6BACR,EACD,AAAC,AAEF,QAAO,MAAMC,cAAgB,CAC3B,CAAEC,KAAM,UAAWhB,KAAM,WAAYiB,eAAgB,IAAK,EAC1D,CAAED,KAAM,OAAQhB,KAAM,QAASiB,eAAgB,IAAK,EACrD,AAAC,AAEF,QAAO,MAAMC,iBAA+B,CAC1C,CACEC,MACE,4EACFnB,KAAM,0BACNoB,WAAY,CAAC,cAAe,eAAe,CAC3CC,QAAS,aACX,EACA,CACEF,MACE,iFACFnB,KAAM,qCACNoB,WAAY,CAAC,OAAO,CACpBC,QAAS,cACX,EACD,AAAC,AAEF,QAAO,MAAMC,eAAiB,CAC5B,GAAG5B,QAAQ,CACX6B,OAAQ,CAAE,GAAG7B,SAAS6B,MAAM,CAAEvB,KAAM,SAAU,EAC9CwB,SAAU,CAAE,GAAG9B,SAAS8B,QAAQ,CAAExB,KAAM,WAAY,EACpDyB,KAAM,CAAE,GAAG/B,SAAS+B,IAAI,CAAEzB,KAAM,OAAQ,EACxC0B,OAAQ,CAAE,GAAGhC,SAASgC,MAAM,CAAE1B,KAAM,SAAU,EAC9C2B,YAAa,CACX,GAAGjC,SAASiC,WAAW,CACvB3B,KAAM,eACR,EACA4B,YAAa,CAAE,GAAGlC,SAASkC,WAAW,CAAE5B,KAAM,cAAe,CAC/D,CAAE"}
+{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { CustomerStoryHighlight } from \"./MeganavCustomerStories\";\nimport { BlogPost } from \"./MeganavBlog\";\nimport G2BestMeetsRequirementsSpring2025 from \"../images/badges/g2-best-meets-requirements-spring-2025.svg\";\nimport G2BestResultsSpring2025 from \"../images/badges/g2-best-results-spring-2025.svg\";\nimport G2BestSupportSpring2025 from \"../images/badges/g2-best-support-spring-2025.svg\";\nimport { products } from \"../ProductTile/data\";\nimport DoxyMeLogo from \"../Meganav/images/cust-logo-doxy-light.png\";\nimport DoxyMeLogoDark from \"../Meganav/images/cust-logo-doxy-dark.png\";\n\nexport type FlyoutPanelList = {\n  label: string;\n  icon?: IconName;\n  link: string;\n  isMobile?: boolean;\n  description?: string;\n  badge?: string;\n};\n\nexport type MenuItem = {\n  name: string;\n  link?: string;\n  isHiddenMobile?: boolean;\n  content?: React.ReactNode;\n  panelClassName?: string;\n};\n\nexport const productsMenu: FlyoutPanelList[] = [\n  {\n    label: \"Architecture\",\n    icon: \"icon-gui-squares-2-x-2-outline\",\n    link: \"/platform\",\n  },\n  {\n    label: \"Integrations\",\n    icon: \"icon-gui-puzzle-piece-outline\",\n    link: \"/docs/platform/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\nexport const compareMenu: FlyoutPanelList[] = [\n  {\n    label: \"Ably vs Pusher\",\n    link: \"/compare/ably-vs-pusher\",\n  },\n  {\n    label: \"Ably vs PubNub\",\n    link: \"/compare/ably-vs-pubnub\",\n  },\n  {\n    label: \"Ably vs Socket.io\",\n    link: \"/compare/ably-vs-socketio\",\n  },\n];\n\nexport const solutionsMenu: FlyoutPanelList[] = [\n  {\n    label: \"Fan Engagement\",\n    icon: \"icon-gui-hand-thumb-up-outline\",\n    link: \"/fan-engagement\",\n    description: \"Enhance every moment with live, interactive fan experiences.\",\n  },\n  {\n    label: \"FinTech\",\n    icon: \"icon-gui-currency-dollar-outline\",\n    link: \"/fin-tech\",\n    description:\n      \"Speed, reliability, and confidence in every user interaction.\",\n  },\n  {\n    label: \"EdTech\",\n    icon: \"icon-gui-academic-cap-outline\",\n    link: \"/ed-tech\",\n    description: \"Power collaborative, interactive learning environments.\",\n  },\n  {\n    label: \"CXTech\",\n    icon: \"icon-gui-face-smile-outline\",\n    link: \"/cx-tech\",\n    description:\n      \"Deliver fast support, strong relationships, and high retention.\",\n  },\n\n  {\n    label: \"HealthTech\",\n    icon: \"icon-gui-heartbeat-outline\",\n    link: \"/health-tech\",\n    description: \"Reliable tools with full data privacy and compliance.\",\n  },\n];\n\nexport const customerStoriesHighlight: CustomerStoryHighlight = {\n  companyLogo: DoxyMeLogo,\n  companyLogoDark: DoxyMeLogoDark,\n  companyLink: \"/case-studies/doxyme\",\n  companyName: \"Doxy.me\",\n  companyDesc:\n    \"built their realtime stack in under six months, cutting costs by 65%, eliminating errors, and transforming a once-feared system into a core strength.\",\n};\n\nexport const companyMenu: FlyoutPanelList[] = [\n  {\n    label: \"Our story\",\n    icon: \"icon-gui-ably-badge\",\n    link: \"/case-studies\",\n  },\n  {\n    label: \"Careers\",\n    icon: \"icon-gui-briefcase-outline\",\n    link: \"/careers\",\n    badge: \"WE'RE HIRING\",\n  },\n];\n\nexport const ablyAwards = [\n  {\n    image: G2BestSupportSpring2025,\n    desc: \"G2 Best Support Spring 2025\",\n  },\n  {\n    image: G2BestMeetsRequirementsSpring2025,\n    desc: \"G2 Best Meets Requirements Spring 2025\",\n  },\n  {\n    image: G2BestResultsSpring2025,\n    desc: \"G2 Best Results Spring 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 defaultBlogPosts: BlogPost[] = [\n  {\n    title:\n      \"Ably AI Transport: keep your agents connected and stateful across devices\",\n    link: \"/blog/ably-ai-transport\",\n    categories: [\n      \"New Release\",\n      \"AI Transport\",\n      \"New Feature\",\n      \"RealTime Experiences\",\n      \"Engineering\",\n      \"Ably News\",\n    ],\n    pubDate: \"Dec 9, 2025\",\n  },\n  {\n    title:\n      \"Live chat at unlimited scale: What it takes to support stadium-sized audiences\",\n    link: \"/blog/live-chat-at-unlimited-scale\",\n    categories: [\"Chat\"],\n    pubDate: \"Nov 18, 2025\",\n  },\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  aiTransport: {\n    ...products.aiTransport,\n    link: \"/ai-transport\",\n  },\n  liveObjects: { ...products.liveObjects, link: \"/liveobjects\" },\n};\n"],"names":["React","G2BestMeetsRequirementsSpring2025","G2BestResultsSpring2025","G2BestSupportSpring2025","products","DoxyMeLogo","DoxyMeLogoDark","productsMenu","label","icon","link","compareMenu","solutionsMenu","description","customerStoriesHighlight","companyLogo","companyLogoDark","companyLink","companyName","companyDesc","companyMenu","badge","ablyAwards","image","desc","menuItemLinks","name","isHiddenMobile","defaultBlogPosts","title","categories","pubDate","productsForNav","pubsub","liveSync","chat","spaces","aiTransport","liveObjects"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAI1B,QAAOC,sCAAuC,6DAA8D,AAC5G,QAAOC,4BAA6B,kDAAmD,AACvF,QAAOC,4BAA6B,kDAAmD,AACvF,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,eAAgB,4CAA6C,AACpE,QAAOC,mBAAoB,2CAA4C,AAmBvE,QAAO,MAAMC,aAAkC,CAC7C,CACEC,MAAO,eACPC,KAAM,iCACNC,KAAM,WACR,EACA,CACEF,MAAO,eACPC,KAAM,gCACNC,KAAM,6BACR,EACA,CACEF,MAAO,OACPC,KAAM,oCACNC,KAAM,YACR,EACA,CACEF,MAAO,wBACPC,KAAM,gCACNC,KAAM,0BACR,EACD,AAAC,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEH,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,oBACPE,KAAM,2BACR,EACD,AAAC,AAEF,QAAO,MAAME,cAAmC,CAC9C,CACEJ,MAAO,iBACPC,KAAM,iCACNC,KAAM,kBACNG,YAAa,8DACf,EACA,CACEL,MAAO,UACPC,KAAM,mCACNC,KAAM,YACNG,YACE,+DACJ,EACA,CACEL,MAAO,SACPC,KAAM,gCACNC,KAAM,WACNG,YAAa,yDACf,EACA,CACEL,MAAO,SACPC,KAAM,8BACNC,KAAM,WACNG,YACE,iEACJ,EAEA,CACEL,MAAO,aACPC,KAAM,6BACNC,KAAM,eACNG,YAAa,uDACf,EACD,AAAC,AAEF,QAAO,MAAMC,yBAAmD,CAC9DC,YAAaV,WACbW,gBAAiBV,eACjBW,YAAa,uBACbC,YAAa,UACbC,YACE,uJACJ,CAAE,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEZ,MAAO,YACPC,KAAM,sBACNC,KAAM,eACR,EACA,CACEF,MAAO,UACPC,KAAM,6BACNC,KAAM,WACNW,MAAO,cACT,EACD,AAAC,AAEF,QAAO,MAAMC,WAAa,CACxB,CACEC,MAAOpB,wBACPqB,KAAM,6BACR,EACA,CACED,MAAOtB,kCACPuB,KAAM,wCACR,EACA,CACED,MAAOrB,wBACPsB,KAAM,6BACR,EACD,AAAC,AAEF,QAAO,MAAMC,cAAgB,CAC3B,CAAEC,KAAM,UAAWhB,KAAM,WAAYiB,eAAgB,IAAK,EAC1D,CAAED,KAAM,OAAQhB,KAAM,QAASiB,eAAgB,IAAK,EACrD,AAAC,AAEF,QAAO,MAAMC,iBAA+B,CAC1C,CACEC,MACE,4EACFnB,KAAM,0BACNoB,WAAY,CACV,cACA,eACA,cACA,uBACA,cACA,YACD,CACDC,QAAS,aACX,EACA,CACEF,MACE,iFACFnB,KAAM,qCACNoB,WAAY,CAAC,OAAO,CACpBC,QAAS,cACX,EACD,AAAC,AAEF,QAAO,MAAMC,eAAiB,CAC5B,GAAG5B,QAAQ,CACX6B,OAAQ,CAAE,GAAG7B,SAAS6B,MAAM,CAAEvB,KAAM,SAAU,EAC9CwB,SAAU,CAAE,GAAG9B,SAAS8B,QAAQ,CAAExB,KAAM,WAAY,EACpDyB,KAAM,CAAE,GAAG/B,SAAS+B,IAAI,CAAEzB,KAAM,OAAQ,EACxC0B,OAAQ,CAAE,GAAGhC,SAASgC,MAAM,CAAE1B,KAAM,SAAU,EAC9C2B,YAAa,CACX,GAAGjC,SAASiC,WAAW,CACvB3B,KAAM,eACR,EACA4B,YAAa,CAAE,GAAGlC,SAASkC,WAAW,CAAE5B,KAAM,cAAe,CAC/D,CAAE"}

package/core/Meganav.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{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"}];useEffect(()=>{if(!notice){if(noticeHeight!==0){setNoticeHeight(0)}return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement)return;const updateNoticeHeight=()=>{setNoticeHeight(noticeElement.getBoundingClientRect().height)};const observer=new ResizeObserver(updateNoticeHeight);observer.observe(noticeElement);const timeoutId=setTimeout(updateNoticeHeight,0);window.addEventListener("resize",updateNoticeHeight);return()=>{clearTimeout(timeoutId);observer.disconnect();window.removeEventListener("resize",updateNoticeHeight)}},[notice]);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+finalNoticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config,onClose:onNoticeClose}),React.createElement(Header,{className:"max-w-screen-xl mx-auto",isNoticeBannerEnabled:!!notice,noticeHeight:finalNoticeHeight,nav:React.createElement(Flyout,{menuItems:headerMenuItems,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-1 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-6 ",sessionState:sessionState,themedScrollpoints:themedScrollpoints??defaultThemedScrollpoints})))};export default Meganav;
+import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{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"}];useEffect(()=>{if(!notice){if(noticeHeight!==0){setNoticeHeight(0)}return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement)return;const updateNoticeHeight=()=>{setNoticeHeight(noticeElement.getBoundingClientRect().height)};const observer=new ResizeObserver(updateNoticeHeight);observer.observe(noticeElement);const timeoutId=setTimeout(updateNoticeHeight,0);window.addEventListener("resize",updateNoticeHeight);return()=>{clearTimeout(timeoutId);observer.disconnect();window.removeEventListener("resize",updateNoticeHeight)}},[notice]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute top-0 left-0 right-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+finalNoticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config,onClose:onNoticeClose}),React.createElement(Header,{className:"max-w-screen-xl mx-auto",isNoticeBannerEnabled:!!notice,noticeHeight:finalNoticeHeight,nav:React.createElement(Flyout,{menuItems:headerMenuItems,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-1 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-6 ",sessionState:sessionState,themedScrollpoints:themedScrollpoints??defaultThemedScrollpoints})))};export default Meganav;
 //# sourceMappingURL=Meganav.js.map

package/core/Meganav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\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  blogPosts: BlogPost[];\n  notice?: MeganavNoticeBannerProps;\n  theme?: string;\n  themedScrollpoints?: ThemedScrollpoint[];\n  onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n  sessionState,\n  notice,\n  theme,\n  themedScrollpoints,\n  onNoticeClose,\n  blogPosts,\n}: MeganavProps) => {\n  const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n  const finalNoticeHeight = notice ? noticeHeight : 0;\n\n  const headerMenuItems = useMemo(\n    () => getMenuItemsForHeader(blogPosts),\n    [blogPosts],\n  );\n\n  const mobileNavItems = useMemo(\n    () =>\n      headerMenuItems\n        .filter((item) => !item.isHiddenMobile)\n        .map(({ name, link, content }) => ({ name, link, content })),\n    [headerMenuItems],\n  );\n\n  const defaultThemedScrollpoints = [\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: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n    {\n      id: \"main-theme-dark\",\n      className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n  ];\n\n  useEffect(() => {\n    if (!notice) {\n      if (noticeHeight !== 0) {\n        setNoticeHeight(0);\n      }\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n    if (!noticeElement) return;\n\n    const updateNoticeHeight = () => {\n      setNoticeHeight(noticeElement.getBoundingClientRect().height);\n    };\n\n    const observer = new ResizeObserver(updateNoticeHeight);\n    observer.observe(noticeElement);\n\n    const timeoutId = setTimeout(updateNoticeHeight, 0);\n    window.addEventListener(\"resize\", updateNoticeHeight);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observer.disconnect();\n      window.removeEventListener(\"resize\", updateNoticeHeight);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notice]);\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 + finalNoticeHeight }}\n      >\n        {notice && (\n          <Notice\n            {...notice.props}\n            config={notice.config}\n            onClose={onNoticeClose}\n          />\n        )}\n        <Header\n          className=\"max-w-screen-xl mx-auto\"\n          isNoticeBannerEnabled={!!notice}\n          noticeHeight={finalNoticeHeight}\n          nav={\n            <Flyout\n              menuItems={headerMenuItems}\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-1 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-6 \"\n          sessionState={sessionState}\n          themedScrollpoints={themedScrollpoints ?? defaultThemedScrollpoints}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","MeganavMobile","Notice","HEADER_HEIGHT","getMenuItemsForHeader","Meganav","sessionState","notice","theme","themedScrollpoints","onNoticeClose","blogPosts","noticeHeight","setNoticeHeight","useState","finalNoticeHeight","headerMenuItems","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","defaultThemedScrollpoints","id","className","noticeElement","document","querySelector","updateNoticeHeight","getBoundingClientRect","height","observer","ResizeObserver","observe","timeoutId","setTimeout","window","addEventListener","clearTimeout","disconnect","removeEventListener","div","data-testid","style","props","config","onClose","isNoticeBannerEnabled","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAuD,UAAW,AACzE,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,AAEhD,QAASC,qBAAqB,KAAQ,uCAAwC,CA4B9E,MAAMC,QAAU,CAAC,CACfC,YAAY,CACZC,MAAM,CACNC,KAAK,CACLC,kBAAkB,CAClBC,aAAa,CACbC,SAAS,CACI,IACb,KAAM,CAACC,aAAcC,gBAAgB,CAAGjB,MAAMkB,QAAQ,CAAC,GAEvD,MAAMC,kBAAoBR,OAASK,aAAe,EAElD,MAAMI,gBAAkBlB,QACtB,IAAMM,sBAAsBO,WAC5B,CAACA,UAAU,EAGb,MAAMM,eAAiBnB,QACrB,IACEkB,gBACGE,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,CAACR,gBAAgB,EAGnB,MAAMS,0BAA4B,CAChC,CACEC,GAAI,UACJC,UAAW,6CACb,EACA,CACED,GAAI,qBACJC,UAAW,4CACb,EACA,CACED,GAAI,OACJC,UAAW,6DACb,EACA,CACED,GAAI,kBACJC,UAAW,4DACb,EACD,CAED9B,UAAU,KACR,GAAI,CAACU,OAAQ,CACX,GAAIK,eAAiB,EAAG,CACtBC,gBAAgB,EAClB,CACA,MACF,CAEA,MAAMe,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAI,CAACF,cAAe,OAEpB,MAAMG,mBAAqB,KACzBlB,gBAAgBe,cAAcI,qBAAqB,GAAGC,MAAM,CAC9D,EAEA,MAAMC,SAAW,IAAIC,eAAeJ,oBACpCG,SAASE,OAAO,CAACR,eAEjB,MAAMS,UAAYC,WAAWP,mBAAoB,GACjDQ,OAAOC,gBAAgB,CAAC,SAAUT,oBAElC,MAAO,KACLU,aAAaJ,WACbH,SAASQ,UAAU,GACnBH,OAAOI,mBAAmB,CAAC,SAAUZ,mBACvC,CAEF,EAAG,CAACxB,OAAO,EAEX,OACE,wCACE,oBAACqC,OACCjB,UAAU,+BACVD,GAAIlB,QAAU,OAAS,qBAAuB,UAC9CqC,cAAY,UACZC,MAAO,CAAEb,OAAQ9B,cAAgBY,iBAAkB,GAElDR,QACC,oBAACL,QACE,GAAGK,OAAOwC,KAAK,CAChBC,OAAQzC,OAAOyC,MAAM,CACrBC,QAASvC,gBAGb,oBAACX,QACC4B,UAAU,0BACVuB,sBAAuB,CAAC,CAAC3C,OACzBK,aAAcG,kBACdoC,IACE,oBAACnD,QACCoD,UAAWpC,gBACXW,UAAU,oBACV0B,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACtD,eAAcuD,SAAUvC,iBACpCwC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,cACrBtD,aAAcA,aACdG,mBAAoBA,oBAAsBgB,6BAKpD,CAEA,gBAAepB,OAAQ"}
+{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\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  blogPosts: BlogPost[];\n  notice?: MeganavNoticeBannerProps;\n  theme?: string;\n  themedScrollpoints?: ThemedScrollpoint[];\n  onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n  sessionState,\n  notice,\n  theme,\n  themedScrollpoints,\n  onNoticeClose,\n  blogPosts,\n}: MeganavProps) => {\n  const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n  const finalNoticeHeight = notice ? noticeHeight : 0;\n\n  const headerMenuItems = useMemo(\n    () => getMenuItemsForHeader(blogPosts),\n    [blogPosts],\n  );\n\n  const mobileNavItems = useMemo(\n    () =>\n      headerMenuItems\n        .filter((item) => !item.isHiddenMobile)\n        .map(({ name, link, content }) => ({ name, link, content })),\n    [headerMenuItems],\n  );\n\n  const defaultThemedScrollpoints = [\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: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n    {\n      id: \"main-theme-dark\",\n      className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n    },\n  ];\n\n  useEffect(() => {\n    if (!notice) {\n      if (noticeHeight !== 0) {\n        setNoticeHeight(0);\n      }\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n    if (!noticeElement) return;\n\n    const updateNoticeHeight = () => {\n      setNoticeHeight(noticeElement.getBoundingClientRect().height);\n    };\n\n    const observer = new ResizeObserver(updateNoticeHeight);\n    observer.observe(noticeElement);\n\n    const timeoutId = setTimeout(updateNoticeHeight, 0);\n    window.addEventListener(\"resize\", updateNoticeHeight);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observer.disconnect();\n      window.removeEventListener(\"resize\", updateNoticeHeight);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notice]);\n\n  return (\n    <>\n      <div\n        className=\"absolute top-0 left-0 right-0 w-full z-50\"\n        id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n        data-testid=\"meganav\"\n        style={{ height: HEADER_HEIGHT + finalNoticeHeight }}\n      >\n        {notice && (\n          <Notice\n            {...notice.props}\n            config={notice.config}\n            onClose={onNoticeClose}\n          />\n        )}\n        <Header\n          className=\"max-w-screen-xl mx-auto\"\n          isNoticeBannerEnabled={!!notice}\n          noticeHeight={finalNoticeHeight}\n          nav={\n            <Flyout\n              menuItems={headerMenuItems}\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-1 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-6 \"\n          sessionState={sessionState}\n          themedScrollpoints={themedScrollpoints ?? defaultThemedScrollpoints}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","MeganavMobile","Notice","HEADER_HEIGHT","getMenuItemsForHeader","Meganav","sessionState","notice","theme","themedScrollpoints","onNoticeClose","blogPosts","noticeHeight","setNoticeHeight","useState","finalNoticeHeight","headerMenuItems","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","defaultThemedScrollpoints","id","className","noticeElement","document","querySelector","updateNoticeHeight","getBoundingClientRect","height","observer","ResizeObserver","observe","timeoutId","setTimeout","window","addEventListener","clearTimeout","disconnect","removeEventListener","div","data-testid","style","props","config","onClose","isNoticeBannerEnabled","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAuD,UAAW,AACzE,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,AAEhD,QAASC,qBAAqB,KAAQ,uCAAwC,CA4B9E,MAAMC,QAAU,CAAC,CACfC,YAAY,CACZC,MAAM,CACNC,KAAK,CACLC,kBAAkB,CAClBC,aAAa,CACbC,SAAS,CACI,IACb,KAAM,CAACC,aAAcC,gBAAgB,CAAGjB,MAAMkB,QAAQ,CAAC,GAEvD,MAAMC,kBAAoBR,OAASK,aAAe,EAElD,MAAMI,gBAAkBlB,QACtB,IAAMM,sBAAsBO,WAC5B,CAACA,UAAU,EAGb,MAAMM,eAAiBnB,QACrB,IACEkB,gBACGE,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,CAACR,gBAAgB,EAGnB,MAAMS,0BAA4B,CAChC,CACEC,GAAI,UACJC,UAAW,6CACb,EACA,CACED,GAAI,qBACJC,UAAW,4CACb,EACA,CACED,GAAI,OACJC,UAAW,6DACb,EACA,CACED,GAAI,kBACJC,UAAW,4DACb,EACD,CAED9B,UAAU,KACR,GAAI,CAACU,OAAQ,CACX,GAAIK,eAAiB,EAAG,CACtBC,gBAAgB,EAClB,CACA,MACF,CAEA,MAAMe,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAI,CAACF,cAAe,OAEpB,MAAMG,mBAAqB,KACzBlB,gBAAgBe,cAAcI,qBAAqB,GAAGC,MAAM,CAC9D,EAEA,MAAMC,SAAW,IAAIC,eAAeJ,oBACpCG,SAASE,OAAO,CAACR,eAEjB,MAAMS,UAAYC,WAAWP,mBAAoB,GACjDQ,OAAOC,gBAAgB,CAAC,SAAUT,oBAElC,MAAO,KACLU,aAAaJ,WACbH,SAASQ,UAAU,GACnBH,OAAOI,mBAAmB,CAAC,SAAUZ,mBACvC,CAEF,EAAG,CAACxB,OAAO,EAEX,OACE,wCACE,oBAACqC,OACCjB,UAAU,4CACVD,GAAIlB,QAAU,OAAS,qBAAuB,UAC9CqC,cAAY,UACZC,MAAO,CAAEb,OAAQ9B,cAAgBY,iBAAkB,GAElDR,QACC,oBAACL,QACE,GAAGK,OAAOwC,KAAK,CAChBC,OAAQzC,OAAOyC,MAAM,CACrBC,QAASvC,gBAGb,oBAACX,QACC4B,UAAU,0BACVuB,sBAAuB,CAAC,CAAC3C,OACzBK,aAAcG,kBACdoC,IACE,oBAACnD,QACCoD,UAAWpC,gBACXW,UAAU,oBACV0B,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACtD,eAAcuD,SAAUvC,iBACpCwC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,cACrBtD,aAAcA,aACdG,mBAAoBA,oBAAsBgB,6BAKpD,CAEA,gBAAepB,OAAQ"}

package/core/Notice.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);const[isClosing,setIsClosing]=useState(false);useRailsUjsLinks(contentRef);useEffect(()=>{const cleanup=NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}});return cleanup},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement relative z-[60]",isClosing?"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden":"ui-announcement-visible",bgColor,textColor),"data-id":"ui-notice"},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent",onClick:()=>{setIsClosing(true);setTimeout(()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()},300)}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
+import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:bg-orange-1100",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);const[isClosing,setIsClosing]=useState(false);useRailsUjsLinks(contentRef);useEffect(()=>{const cleanup=NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}});return cleanup},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement relative z-[60]",isClosing?"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden":"ui-announcement-visible",bgColor,textColor),"data-id":"ui-notice"},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start"},React.createElement("div",{className:cn(contentWrapperClasses,textColor)},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&(buttonLink&&buttonLink!=="#"&&buttonLink!=="/"?React.createElement("a",{href:buttonLink,className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel):React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark"},buttonLabel))),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent",onClick:()=>{setIsClosing(true);setTimeout(()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()},300)}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
 //# sourceMappingURL=Notice.js.map

package/core/Notice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\ntype ContentWrapperProps = {\n  buttonLink: string;\n  children: ReactNode;\n  textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n  buttonLink,\n  textColor = defaultTextColor,\n  children,\n}: ContentWrapperProps) =>\n  buttonLink ? (\n    <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n      {children}\n    </a>\n  ) : (\n    <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n  );\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel && (\n            <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n              {buttonLabel}\n            </span>\n          )}\n        </ContentWrapper>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AACtE,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CAmC3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CZ,UAAYJ,gBAAgB,CAC5BiB,OAAO,CACK,IACZ,MAAMC,WAAazB,OAAwB,MAC3C,KAAM,CAAC0B,UAAWC,aAAa,CAAG1B,SAAS,OAC3CK,iBAAiBmB,YAEjB1B,UAAU,KACR,MAAM6B,QAAUvB,cAAc,CAC5BwB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUX,QAAQW,SAClBC,SAAUZ,QAAQY,SAClBC,QAAS,CACPC,SAAUd,QAAQa,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACP,QAAQW,SAAUX,QAAQY,SAAUZ,QAAQa,SAASC,SAAS,EAElE,MAAMC,YAAclC,UAAUmC,QAAQ,CAAClB,UAAY,GAAI,CACrDmB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAGA,OACE,oBAACxB,OACCD,UAAWX,GACT,kCACAsB,UACI,6EACA,0BACJH,QACAZ,WAEF8B,UAAQ,aAER,oBAACzB,OAAID,UAAU,4DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACgC,UAAO3B,UAAU,oCAAoCK,OACtD,oBAACuB,QACCC,IAAKnB,WACLV,UAAU,OACV8B,wBAAyB,CACvBC,OAAQV,WACV,IAEDlB,aACC,oBAACyB,QAAK5B,UAAU,gGACbG,cAKNI,UACC,oBAACyB,UACCC,KAAK,SACLjC,UAAU,0HACVkC,QAAS,KACPtB,aAAa,MACbuB,WAAW,KACTpB,SAASqB,aAAa,CAAC,IAAIC,YAAY,kBACvC5B,WACF,EAAG,IACL,GAEA,oBAACrB,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAO5C,cAOrB,CAEA,gBAAeM,MAAO"}
+{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n  buttonLink?: string;\n  buttonLabel?: string;\n  bodyText?: string;\n  title?: string;\n  closeBtn?: boolean;\n  config?: {\n    options: {\n      collapse: boolean;\n    };\n    noticeId: string | number;\n    cookieId: string;\n  };\n  bgColor?: string;\n  textColor?: ColorClass | ColorThemeSet;\n  onClose?: () => void;\n\n  bannerContainer?: Element | null;\n  cookieId?: string;\n  noticeId?: string;\n  options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst Notice = ({\n  buttonLink,\n  buttonLabel,\n  bodyText,\n  title,\n  config,\n  closeBtn,\n  bgColor = \"bg-orange-100 dark:bg-orange-1100\",\n  textColor = defaultTextColor,\n  onClose,\n}: NoticeProps) => {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const [isClosing, setIsClosing] = useState(false);\n  useRailsUjsLinks(contentRef);\n\n  useEffect(() => {\n    const cleanup = NoticeScripts({\n      bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n      cookieId: config?.cookieId,\n      noticeId: config?.noticeId,\n      options: {\n        collapse: config?.options?.collapse || false,\n      },\n    });\n\n    return cleanup;\n  }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n  const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n  return (\n    <div\n      className={cn(\n        \"ui-announcement relative z-[60]\",\n        isClosing\n          ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n          : \"ui-announcement-visible\",\n        bgColor,\n        textColor,\n      )}\n      data-id=\"ui-notice\"\n    >\n      <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n        <div className={cn(contentWrapperClasses, textColor)}>\n          <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n          <span\n            ref={contentRef}\n            className=\"pr-1\"\n            dangerouslySetInnerHTML={{\n              __html: safeContent,\n            }}\n          ></span>\n          {buttonLabel &&\n            (buttonLink && buttonLink !== \"#\" && buttonLink !== \"/\" ? (\n              <a\n                href={buttonLink}\n                className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n              >\n                {buttonLabel}\n              </a>\n            ) : (\n              <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n                {buttonLabel}\n              </span>\n            ))}\n        </div>\n\n        {closeBtn && (\n          <button\n            type=\"button\"\n            className=\"ml-auto h-5 w-5 border-none bg-none self-baseline outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n            onClick={() => {\n              setIsClosing(true);\n              setTimeout(() => {\n                document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n                onClose?.();\n              }, 300);\n            }}\n          >\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              size=\"1.25rem\"\n              color={textColor}\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAGA,OACE,oBAACC,OACCC,UAAWhC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFoB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWhC,GAAGI,sBAAuBS,YACxC,oBAACqB,UAAOF,UAAU,oCAAoCvB,OACtD,oBAAC0B,QACCC,IAAKrB,WACLiB,UAAU,OACVK,wBAAyB,CACvBC,OAAQZ,WACV,IAEDnB,aACED,CAAAA,YAAcA,aAAe,KAAOA,aAAe,IAClD,oBAACiC,KACCC,KAAMlC,WACN0B,UAAU,gGAETzB,aAGH,oBAAC4B,QAAKH,UAAU,gGACbzB,YAEL,GAGHI,UACC,oBAAC8B,UACCC,KAAK,SACLV,UAAU,0HACVW,QAAS,KACP1B,aAAa,MACb2B,WAAW,KACTxB,SAASyB,aAAa,CAAC,IAAIC,YAAY,kBACvChC,WACF,EAAG,IACL,GAEA,oBAACf,MACCgD,KAAK,0BACLC,KAAK,UACLC,MAAOpC,cAOrB,CAEA,gBAAeR,MAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.11.5-dev.e08ca624",
+  "version": "17.11.8-dev.a815340d",
   "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",
@@ -36,8 +36,8 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
@@ -56,8 +56,8 @@
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.49.1",
-    "posthog-js": "^1.315.0",
-    "prettier": "^3.2.5",
+    "posthog-js": "^1.321.0",
+    "prettier": "^3.8.0",
     "storybook": "^10.1.10",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",