@ably/ui 15.3.1-dev.ba000bc → 15.3.2

package/core/MeganavItemsMobile.js

@@ -1 +1 @@
-import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl,searchDataId})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-none focus-visible:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":searchDataId??"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
+import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl,searchDataId})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-magnifying-glass-outline",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-none focus-visible:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-x-circle-solid",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":searchDataId??"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});

package/core/MeganavSearch.js

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

package/core/MeganavSearchPanel.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;
+import React from"react";import Icon from"./Icon";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-magnifying-glass-outline",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;

package/core/Notice.js

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

package/core/Pricing/PricingCards.js

@@ -1 +1 @@
-import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,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 delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark: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-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-12"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.url==="/contact"?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-right",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>React.createElement("div",{key:title,className:"flex flex-col gap-12"},React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] 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 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] 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 text-neutral-500 dark: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 LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,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 delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark: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-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-12"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.url==="/contact"?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-long-right-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>React.createElement("div",{key:title,className:"flex flex-col gap-12"},React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] 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 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] 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 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;

package/core/Slider.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;

package/core/Status.js

@@ -1 +1 @@
-import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description),React.createElement(Icon,{name:"icon-gui-external-link",size:"16px"})))};export default Status;
+import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-8 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;

package/core/Table/data.js

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

package/core/Tooltip.js

@@ -1 +1 @@
-import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,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);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 React.createElement("div",{...rest,className:`inline-flex ml-8 ${rest?.className??""}`},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??React.createElement(Icon,{name:"icon-gui-info",color:"text-neutral-800 dark:text-neutral-500",size:"1rem"})),open?createPortal(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:`bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 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]"}`},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";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,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);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 React.createElement("div",{...rest,className:`inline-flex ml-8 ${rest?.className??""}`},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??React.createElement(Icon,{name:"icon-gui-information-circle-micro",color:"text-neutral-800 dark:text-neutral-500",size:"1rem"})),open?createPortal(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:`bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 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]"}`},React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;

package/core/icons/gui/icon-gui-check-circled-fill.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8321 7.55471L11.1654 17.5547L9.55246 17.6247L6.21913 13.458L7.78087 12.2087L10.2599 15.3074L16.1679 6.44531L17.8321 7.55471Z" fill="var(--ui-icon-secondary-color)"/>
+</svg>

package/core/icons/gui/icon-gui-check-lotus-circled.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.5 6.375L5.625 7.5L7.5 4.875M10.5 6C10.5 6.634 10.185 7.195 9.7035 7.534C9.75538 7.83038 9.73507 8.13491 9.64429 8.42178C9.55351 8.70865 9.39494 8.96942 9.182 9.182C8.96942 9.39494 8.70865 9.55351 8.42178 9.64429C8.13491 9.73507 7.83038 9.75538 7.534 9.7035C7.36111 9.94974 7.13143 10.1507 6.8644 10.2893C6.59738 10.428 6.30087 10.5002 6 10.5C5.366 10.5 4.805 10.185 4.466 9.7035C4.16962 9.75533 3.86511 9.735 3.57824 9.64423C3.29138 9.55345 3.03061 9.3949 2.818 9.182C2.60506 8.96942 2.44649 8.70865 2.35571 8.42178C2.26493 8.13491 2.24462 7.83038 2.2965 7.534C2.05026 7.36111 1.84931 7.13143 1.71066 6.8644C1.57202 6.59738 1.49976 6.30087 1.5 6C1.5 5.366 1.815 4.805 2.2965 4.466C2.24462 4.16962 2.26493 3.86509 2.35571 3.57822C2.44649 3.29135 2.60506 3.03059 2.818 2.818C3.03061 2.6051 3.29138 2.44655 3.57824 2.35577C3.86511 2.265 4.16962 2.24467 4.466 2.2965C4.63892 2.05029 4.86861 1.84936 5.13563 1.71072C5.40265 1.57208 5.69913 1.4998 6 1.5C6.634 1.5 7.195 1.815 7.534 2.2965C7.83038 2.24467 8.13489 2.265 8.42176 2.35577C8.70862 2.44655 8.96939 2.6051 9.182 2.818C9.3949 3.03061 9.55345 3.29138 9.64423 3.57824C9.735 3.86511 9.75534 4.16962 9.7035 4.466C9.94974 4.63889 10.1507 4.86858 10.2893 5.1356C10.428 5.40262 10.5002 5.69913 10.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>