@ably/ui 14.6.8 → 14.7.0-dev.1133a22

package/core/Icon/EncapsulatedIcon.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon";import{determineThemeColor}from"../styles/colors/utils";const EncapsulatedIcon=({theme="dark",size="40px",iconSize,className,innerClassName,...iconProps})=>{const t=color=>determineThemeColor("dark",theme,color);const numericalSize=parseInt(size,10);const numericalIconSize=iconSize?parseInt(iconSize,10):numericalSize-12;return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${t("from-neutral-900")} ${className??""}`,style:{width:numericalSize,height:numericalSize}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")} ${innerClassName??""}`,style:{height:numericalSize-2}},/*#__PURE__*/React.createElement(Icon,{size:`${numericalIconSize}`,...iconProps})))};export default EncapsulatedIcon;
+import React from"react";import Icon from"../Icon";import useTheming from"../hooks/useTheming";const EncapsulatedIcon=({theme="dark",size="40px",iconSize,className,innerClassName,...iconProps})=>{const{themeColor}=useTheming({baseTheme:"dark",theme});const numericalSize=parseInt(size,10);const numericalIconSize=iconSize?parseInt(iconSize,10):numericalSize-12;return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className??""}`,style:{width:numericalSize,height:numericalSize}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName??""}`,style:{height:numericalSize-2}},/*#__PURE__*/React.createElement(Icon,{size:`${numericalIconSize}`,...iconProps})))};export default EncapsulatedIcon;

package/core/MeganavContentProducts.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;
+import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;

package/core/MeganavContentUseCases.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;
+import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;

package/core/Pricing/PricingCards.js

@@ -1 +1 @@
-import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const t=color=>determineThemeColor("dark",theme,color);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:t("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-700",bg:"bg-neutral-700"},blue:{border:"border-blue-600",bg:"bg-blue-600"},orange:{border:"border-orange-600",bg:"bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${t(borderClasses(border?.color)?.border??"border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur`},border?/*#__PURE__*/React.createElement("div",{className:`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`},border.text):null,/*#__PURE__*/React.createElement("div",{className:`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${t("bg-neutral-1300")} ${!delimiter?`${t("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:`${title.className??""} ${t(title.color??"text-neutral-000")}`},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{theme:theme,interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${t(description.color??"text-neutral-000")} min-h-20`,style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`},price.amount),/*#__PURE__*/React.createElement("div",{className:`ui-text-p3 ${t("text-neutral-000")}`},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""} cursor-pointer`,url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:`${t("border-neutral-800")} w-64`}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${t("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${t("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:t(listItemColors.background),secondaryColor:t(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${t("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:`absolute sm:-translate-x-120 sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} cursor-pointer`,onClick:cta.onClick,iconColor:t(listItemColors?.foreground??"text-white")},cta.text),/*#__PURE__*/React.createElement("div",{className:`absolute sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-120 sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${t("text-neutral-800")}`},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
+import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:themeColor("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-700",bg:"bg-neutral-700"},blue:{border:"border-blue-600",bg:"bg-blue-600"},orange:{border:"border-orange-600",bg:"bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${themeColor(borderClasses(border?.color)?.border??"border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur`},border?/*#__PURE__*/React.createElement("div",{className:`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`},border.text):null,/*#__PURE__*/React.createElement("div",{className:`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${themeColor("bg-neutral-1300")} ${!delimiter?`${themeColor("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:`${title.className??""} ${themeColor(title.color??"text-neutral-000")}`},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{theme:theme,interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${themeColor(description.color??"text-neutral-000")} min-h-20`,style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${themeColor("text-neutral-000")}`},price.amount),/*#__PURE__*/React.createElement("div",{className:`ui-text-p3 ${themeColor("text-neutral-000")}`},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${themeColor("bg-neutral-000")} ${themeColor("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""} cursor-pointer`,url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:`${themeColor("border-neutral-800")} w-64`}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${themeColor("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${themeColor("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${themeColor("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:themeColor(listItemColors.background),secondaryColor:themeColor(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${themeColor("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:`absolute sm:-translate-x-120 sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${themeColor("text-neutral-500")} hover:${themeColor("text-neutral-000")} cursor-pointer`,onClick:cta.onClick,iconColor:themeColor(listItemColors?.foreground??"text-white")},cta.text),/*#__PURE__*/React.createElement("div",{className:`absolute sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-120 sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${themeColor("text-neutral-800")}`},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;

package/core/ProductTile.js

@@ -1 +1 @@
-import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import{determineThemeColor}from"./styles/colors/utils";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};const t=color=>determineThemeColor("dark",selected?"light":"dark",color);return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${t("bg-neutral-1200")} ${selected?"":"hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,theme:selected?"light":"dark"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${t("text-neutral-300")} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${t("text-neutral-000")} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-500"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block ${t("text-neutral-000")}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import useTheming from"./hooks/useTheming";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{themeColor}=useTheming({baseTheme:"dark",theme:selected?"light":"dark"});const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${themeColor("bg-neutral-1200")} ${selected?"":"hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,theme:selected?"light":"dark"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${themeColor("text-neutral-300")} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${themeColor("text-neutral-000")} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-500"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block ${themeColor("text-neutral-000")}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;

package/core/Tooltip.js

@@ -1 +1 @@
-import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import{determineThemeColor}from"./styles/colors/utils";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,theme="dark",interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);const t=color=>determineThemeColor("light",theme,color);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return /*#__PURE__*/React.createElement("div",{...rest,className:`inline-flex ml-8 ${rest?.className??""}`},/*#__PURE__*/React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-info",color:`${t("text-neutral-800")}`,size:"1rem"})),open?/*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`${t("bg-neutral-1000")} ${t("text-neutral-200")} ui-text-p3 font-medium p-16 ${interactive?"":"pointer-events-none"} rounded-lg absolute ${tooltipProps?.className??""} ${fadeOut?"animate-[tooltipExit_0.25s_ease-in-out]":"animate-[tooltipEntry_0.25s_ease-in-out]"}`},/*#__PURE__*/React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;
+import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import useTheming from"./hooks/useTheming";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,theme="dark",interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);const{themeColor}=useTheming({baseTheme:"light",theme});useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return /*#__PURE__*/React.createElement("div",{...rest,className:`inline-flex ml-8 ${rest?.className??""}`},/*#__PURE__*/React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-info",color:`${themeColor("text-neutral-800")}`,size:"1rem"})),open?/*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`${themeColor("bg-neutral-1000")} ${themeColor("text-neutral-200")} ui-text-p3 font-medium p-16 ${interactive?"":"pointer-events-none"} rounded-lg absolute ${tooltipProps?.className??""} ${fadeOut?"animate-[tooltipExit_0.25s_ease-in-out]":"animate-[tooltipEntry_0.25s_ease-in-out]"}`},/*#__PURE__*/React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;

package/core/hooks/useTheming.js

@@ -0,0 +1 @@
+import{useCallback}from"react";import{invertTailwindClassVariant}from"../styles/colors/utils";const useTheming=({baseTheme="dark",theme="dark"})=>{const themeColor=useCallback(color=>theme===baseTheme?color:invertTailwindClassVariant(color),[baseTheme,theme]);return{themeColor}};export default useTheming;

package/core/styles/colors/computed-colors.json

@@ -0,0 +1 @@
+["bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-orange-900","border-neutral-500","from-neutral-400"]

package/core/styles/colors/types.js

@@ -1 +1 @@
-export const variants=["","hover:","focus:","group-hover:","group-focus:"];export const prefixes=["text","bg","from","to","border"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const numericalColors=[neutralColors,orangeColors,yellowColors,greenColors,blueColors,violetColors,pinkColors];
+export const variants=["","hover:","focus:","group-hover:","group-focus:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};

package/core/styles/colors/utils.js

@@ -1 +1 @@
-import computedColorsDark from"./computed-colors-dark.json";import computedColorsLight from"./computed-colors-light.json";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const determineThemeColor=(baseTheme,currentTheme,color)=>{if(baseTheme===currentTheme){return color}else if(baseTheme==="light"){return computedColorsLight[color][currentTheme]||color}else if(baseTheme==="dark"){return computedColorsDark[color][currentTheme]||color}return color};
+import{colorGroupLengths}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");export const invertTailwindClassVariant=className=>{const splitMatch=className.split("-");if(splitMatch.length<3){throw new Error("Invalid TW class format")}const color=splitMatch[splitMatch.length-2];const variant=splitMatch[splitMatch.length-1];const property=splitMatch.slice(0,splitMatch.length-1).join("-");const numericalVariant=Number(variant.slice(0,-2))??0;if(isNaN(numericalVariant)){throw new Error(`Invalid variant value in TW class: ${className}`)}const flippedVariant=colorGroupLengths[color]-numericalVariant-(color==="neutral"?1:-1);const flippedMatch=`${property}-${flippedVariant}00`;return flippedMatch};