npm - @ably/ui - Versions diffs - 17.5.7-dev.1f01eb31 → 17.5.7-dev.5c6bb9cb - Mend

@ably/ui 17.5.7-dev.1f01eb31 → 17.5.7-dev.5c6bb9cb

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

Files changed (7) hide show

package/core/Accordion/utils.js +1 -1
package/core/Accordion/utils.js.map +1 -1
package/core/Pricing/PricingCards.js +1 -1
package/core/Pricing/PricingCards.js.map +1 -1
package/core/Pricing/data.js +1 -1
package/core/Pricing/data.js.map +1 -1
package/package.json +1 -1

package/core/Accordion/utils.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export const themeClasses={default:{bg:"bg-neutral-200 dark:bg-neutral-1100",hoverBg:"hover:bg-neutral-300 dark:hover:bg-neutral-1100",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-1000 dark:text-orange-600",selectableBg:"bg-neutral-1200 dark:bg-neutral-300",selectableText:"text-neutral-000 dark:text-neutral-1300"},transparent:{bg:"bg-transparent dark:bg-transparent",hoverBg:"hover:bg-transparent dark:hover:bg-transparent",text:"text-neutral-1000 dark:text-neutral-000",toggleIconColor:"text-dark-grey dark:text-orange-600",border:"border-neutral-500 border-b last:border-none dark:border-neutral-900"},static:{bg:"bg-neutral-200 dark:bg-neutral-1200",hoverBg:"hover:bg-neutral-200 dark:hover:bg-neutral-1200",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-200 dark:text-neutral-1200",selectableBg:"bg-neutral-1200 dark:bg-neutral-1200",selectableText:"text-white dark:text-neutral-1300"}};export const isNonTransparentTheme=theme=>theme!=="transparent";export const isStaticTheme=theme=>theme==="static";
+export const themeClasses={default:{bg:"bg-neutral-200 dark:bg-neutral-1100",hoverBg:"hover:bg-neutral-300 dark:hover:bg-neutral-1100",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-1000 dark:text-orange-600",selectableBg:"bg-neutral-1200 dark:bg-neutral-300",selectableText:"text-neutral-000 dark:text-neutral-1300"},transparent:{bg:"bg-transparent dark:bg-transparent",hoverBg:"hover:bg-transparent dark:hover:bg-transparent",text:"text-neutral-1000 dark:text-neutral-000",toggleIconColor:"text-dark-grey dark:text-orange-600",border:"border-neutral-500 border-b last:border-none dark:border-neutral-1000"},static:{bg:"bg-neutral-200 dark:bg-neutral-1200",hoverBg:"hover:bg-neutral-200 dark:hover:bg-neutral-1200",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-200 dark:text-neutral-1200",selectableBg:"bg-neutral-1200 dark:bg-neutral-1200",selectableText:"text-white dark:text-neutral-1300"}};export const isNonTransparentTheme=theme=>theme!=="transparent";export const isStaticTheme=theme=>theme==="static";
 //# sourceMappingURL=utils.js.map

package/core/Accordion/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Accordion/utils.ts"],"sourcesContent":["import { AccordionTheme, AccordionThemeColors } from \"./types\";\n\nexport const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {\n default: {\n bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n hoverBg: \"hover:bg-neutral-300 dark:hover:bg-neutral-1100\",\n text: \"text-neutral-1300 dark:text-white\",\n toggleIconColor: \"text-neutral-1000 dark:text-orange-600\",\n selectableBg: \"bg-neutral-1200 dark:bg-neutral-300\",\n selectableText: \"text-neutral-000 dark:text-neutral-1300\",\n },\n transparent: {\n bg: \"bg-transparent dark:bg-transparent\",\n hoverBg: \"hover:bg-transparent dark:hover:bg-transparent\",\n text: \"text-neutral-1000 dark:text-neutral-000\",\n toggleIconColor: \"text-dark-grey dark:text-orange-600\",\n border:\n \"border-neutral-500 border-b last:border-none dark:border-neutral-~~900~~\",\n },\n static: {\n bg: \"bg-neutral-200 dark:bg-neutral-1200\",\n hoverBg: \"hover:bg-neutral-200 dark:hover:bg-neutral-1200\",\n text: \"text-neutral-1300 dark:text-white\",\n toggleIconColor: \"text-neutral-200 dark:text-neutral-1200\",\n selectableBg: \"bg-neutral-1200 dark:bg-neutral-1200\",\n selectableText: \"text-white dark:text-neutral-1300\",\n },\n};\n\nexport const isNonTransparentTheme = (theme: AccordionTheme) =>\n theme !== \"transparent\";\n\nexport const isStaticTheme = (theme: AccordionTheme) => theme === \"static\";\n"],"names":["themeClasses","default","bg","hoverBg","text","toggleIconColor","selectableBg","selectableText","transparent","border","static","isNonTransparentTheme","theme","isStaticTheme"],"mappings":"AAEA,OAAO,MAAMA,aAA6D,CACxEC,QAAS,CACPC,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,yCAClB,EACAC,YAAa,CACXN,GAAI,qCACJC,QAAS,iDACTC,KAAM,0CACNC,gBAAiB,sCACjBI,OACE,~~sEACJ~~,EACAC,OAAQ,CACNR,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,0CACjBC,aAAc,uCACdC,eAAgB,mCAClB,CACF,CAAE,AAEF,QAAO,MAAMI,sBAAwB,AAACC,OACpCA,QAAU,aAAc,AAE1B,QAAO,MAAMC,cAAgB,AAACD,OAA0BA,QAAU,QAAS"}
1	+ {"version":3,"sources":["../../../src/core/Accordion/utils.ts"],"sourcesContent":["import { AccordionTheme, AccordionThemeColors } from \"./types\";\n\nexport const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {\n default: {\n bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n hoverBg: \"hover:bg-neutral-300 dark:hover:bg-neutral-1100\",\n text: \"text-neutral-1300 dark:text-white\",\n toggleIconColor: \"text-neutral-1000 dark:text-orange-600\",\n selectableBg: \"bg-neutral-1200 dark:bg-neutral-300\",\n selectableText: \"text-neutral-000 dark:text-neutral-1300\",\n },\n transparent: {\n bg: \"bg-transparent dark:bg-transparent\",\n hoverBg: \"hover:bg-transparent dark:hover:bg-transparent\",\n text: \"text-neutral-1000 dark:text-neutral-000\",\n toggleIconColor: \"text-dark-grey dark:text-orange-600\",\n border:\n \"border-neutral-500 border-b last:border-none dark:border-neutral-1000\",\n },\n static: {\n bg: \"bg-neutral-200 dark:bg-neutral-1200\",\n hoverBg: \"hover:bg-neutral-200 dark:hover:bg-neutral-1200\",\n text: \"text-neutral-1300 dark:text-white\",\n toggleIconColor: \"text-neutral-200 dark:text-neutral-1200\",\n selectableBg: \"bg-neutral-1200 dark:bg-neutral-1200\",\n selectableText: \"text-white dark:text-neutral-1300\",\n },\n};\n\nexport const isNonTransparentTheme = (theme: AccordionTheme) =>\n theme !== \"transparent\";\n\nexport const isStaticTheme = (theme: AccordionTheme) => theme === \"static\";\n"],"names":["themeClasses","default","bg","hoverBg","text","toggleIconColor","selectableBg","selectableText","transparent","border","static","isNonTransparentTheme","theme","isStaticTheme"],"mappings":"AAEA,OAAO,MAAMA,aAA6D,CACxEC,QAAS,CACPC,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,yCAClB,EACAC,YAAa,CACXN,GAAI,qCACJC,QAAS,iDACTC,KAAM,0CACNC,gBAAiB,sCACjBI,OACE,uEACJ,EACAC,OAAQ,CACNR,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,0CACjBC,aAAc,uCACdC,eAAgB,mCAClB,CACF,CAAE,AAEF,QAAO,MAAMI,sBAAwB,AAACC,OACpCA,QAAU,aAAc,AAE1B,QAAO,MAAMC,cAAgB,AAACD,OAA0BA,QAAU,QAAS"}

package/core/Pricing/PricingCards.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/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-200 dark:border-neutral-1100",bg:"bg-neutral-200 dark:bg-neutral-1100"},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 /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:cn("gap-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-6 py-6 flex flex-col gap-6 rounded-2xl group min-w-[17rem] 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?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-100 dark:bg-neutral-1200",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-1"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-h1 text-h1-xl min-h-5",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/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:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),/*#__PURE__*/React.createElement("div",{className:"flex flex-col gap-4 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-2"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-1":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-4 px-2 -mx-2",index===0?"py-2":"py-1",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/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))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-2 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-6 flex items-center h-10 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 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),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] 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?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/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-200 dark:border-neutral-1100",bg:"bg-neutral-200 dark:bg-neutral-1100"},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 /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:cn("gap-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-6 py-6 flex flex-col gap-6 rounded-2xl group min-w-[17rem] 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?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-100 dark:bg-neutral-1200",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-1"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-h1 text-h1-xl min-h-5",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/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:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),/*#__PURE__*/React.createElement("div",{className:"flex flex-col gap-4 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-2"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-1":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-4 px-2 -mx-2",index===0?"py-2":"py-1",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/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))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-2 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-6 flex items-center h-10 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 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),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
 //# sourceMappingURL=PricingCards.js.map

package/core/Pricing/PricingCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName \| \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement \| null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" \| \"blue\" \| \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-200 dark:border-neutral-1100\",\n bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n ({ title, description, price, cta, sections, border }, index) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 py-6 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(\n \"absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-100 dark:bg-neutral-1200\",\n {\n \"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100\":\n !delimiter,\n },\n )}\n ></div>\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl min-h-5\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-long-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10\">\n {sections.map(({ title, items, listItemColors, cta }) => (\n <div key={title} className=\"flex flex-col gap-2\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em]\">\n {title}\n </p>\n <div\n className={cn({ \"flex flex-col gap-1\": !delimiter })}\n >\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex gap-2 items-start\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n {cta ? (\n <div className=\"relative -mx-6 flex items-center h-10 overflow-x-hidden\">\n <FeaturedLink\n url={cta.url}\n additionalCSS=\"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 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\"\n onClick={cta.onClick}\n iconColor={listItemColors?.foreground}\n >\n {cta.text}\n </FeaturedLink>\n <div className=\"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800\">\n •••\n </div>\n </div>\n ) : null}\n </div>\n ))}\n </div>\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","FeaturedLink","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","key","content","style","text","p","tooltip","interactive","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName \| \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement \| null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" \| \"blue\" \| \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-200 dark:border-neutral-1100\",\n bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n ({ title, description, price, cta, sections, border }, index) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 py-6 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(\n \"absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-100 dark:bg-neutral-1200\",\n {\n \"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100\":\n !delimiter,\n },\n )}\n ></div>\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl min-h-5\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-long-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10\">\n {sections.map(({ title, items, listItemColors, cta }) => (\n <div key={title} className=\"flex flex-col gap-2\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em]\">\n {title}\n </p>\n <div\n className={cn({ \"flex flex-col gap-1\": !delimiter })}\n >\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex gap-2 items-start\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n {cta ? (\n <div className=\"relative -mx-6 flex items-center h-10 overflow-x-hidden\">\n <FeaturedLink\n url={cta.url}\n additionalCSS=\"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 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\"\n onClick={cta.onClick}\n iconColor={listItemColors?.foreground}\n >\n {cta.text}\n </FeaturedLink>\n <div className=\"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800\">\n •••\n </div>\n </div>\n ) : null}\n </div>\n ))}\n </div>\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","FeaturedLink","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","key","content","style","text","p","tooltip","interactive","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground"],"mappings":"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"}

package/core/Pricing/data.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import React from"react";import Tooltip from"../Tooltip";export const planData=[{title:{content:"Free",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Build a proof of concept.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Build with any Ably product","Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),/*#__PURE__*/React.createElement(Tooltip,{interactive:true},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["Build with any Ably product","1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$399",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),/*#__PURE__*/React.createElement(Tooltip,{interactive:true},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["Build with any Ably product","4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact"},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited connections","Unlimited messages / second"]},{title:"Includes",items:["Build with any Ably product","24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-700 dark:text-orange-500",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}],subtext:"As low as $0.50/M with volume discount"},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"}];
+import React from"react";import Tooltip from"../Tooltip";export const planData=[{title:{content:"Free",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Build a proof of concept.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Build with any Ably product","Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("div",{className:"flex -mt-1"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),/*#__PURE__*/React.createElement(Tooltip,{interactive:true},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["Build with any Ably product","1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$399",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("div",{className:"flex -mt-1"},/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]"},"+ usage"),/*#__PURE__*/React.createElement(Tooltip,{interactive:true},"Usage is billed on top of your plan. You'll be charged monthly based on how many messages, channel minutes, and connection minutes you use. See rates above.")))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Capacity",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["Build with any Ably product","4 hour email support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"ui-text-h4 tracking-[-0.002rem]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact"},sections:[{title:"Capacity",items:["Unlimited concurrent channels","Unlimited connections","Unlimited messages / second"]},{title:"Includes",items:["Build with any Ably product","24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-700 dark:text-orange-500",background:"text-neutral-100 dark:text-neutral-1200"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}],subtext:"As low as $0.50/M with volume discount"},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}],subtext:"As low as $0.20/M with volume discount"}];
 //# sourceMappingURL=data.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\nimport Tooltip from \"../Tooltip\";\n\nexport const planData: PricingDataFeature[] = [\n {\n title: {\n content: \"Free\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Build a proof of concept.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$0\" },\n cta: {\n text: \"Start for free\",\n url: \"/sign-up\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"200 concurrent connections\",\n \"500 messages / second\",\n \"6M messages / month\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"Community & email support (best effort)\",\n \"No commitment\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Standard\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Roll-out into production.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: {\n amount: \"$29\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <div className=\"flex\">\n <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n + usage\n </p>\n <Tooltip interactive={true}>\n Usage is billed on top of your plan. You'll be charged\n monthly based on how many messages, channel minutes, and\n connection minutes you use. See rates above.\n </Tooltip>\n </div>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=standard\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"10k concurrent channels\",\n \"10k concurrent connections\",\n \"2.5k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"1 day email support SLA\",\n \"Uptime SLO\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Pro\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Scale with confidence.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: {\n amount: \"$399\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <div className=\"flex\">\n <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n + usage\n </p>\n <Tooltip interactive={true}>\n Usage is billed on top of your plan. You'll be charged\n monthly based on how many messages, channel minutes, and\n connection minutes you use. See rates above.\n </Tooltip>\n </div>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=pro\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"50k concurrent channels\",\n \"50k concurrent connections\",\n \"10k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"4 hour email support SLA\",\n \"Datadog (lite)\",\n \"Uptime SLO\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n\n {\n title: {\n content: \"Enterprise\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-orange-600\",\n },\n description: {\n content: \"Deliver without limits.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"Custom\" },\n cta: {\n text: \"Contact us\",\n url: \"/contact\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"Unlimited concurrent channels\",\n \"Unlimited connections\",\n \"Unlimited messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"24/7 mission critical support\",\n \"99.999% uptime SLAs\",\n \"Committed use discounts\",\n \"Datadog\",\n \"CNAME, SSO, & more\",\n ],\n listItemColors: {\n foreground: \"text-orange-700 dark:text-orange-500\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n {\n title: {\n content: \"Messages\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content:\n \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$2.50\", content: \"/ million\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million msgs\"],\n [\"First 50 million msgs\", \"$2.50\"],\n [\"Next 450 million msgs\", \"$2.25\"],\n [\"Next 4.5 billion msgs\", \"$1.95\"],\n [\"Next 15 billion msgs\", \"$1.65\"],\n [\"Next 30 billion msgs\", \"$1.40\"],\n [\"Over 50 billion msgs\", \"$1.25\"],\n ],\n },\n ],\n subtext: \"As low as $0.50/M with volume discount\",\n },\n {\n title: {\n content: \"Channels\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time a channel is active in our\n network by the minute. For example, if ten channels are in use for 45\n minutes, you will be charged a total of 450 channel minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n subtext: \"As low as $0.20/M with volume discount\",\n },\n {\n title: {\n content: \"Connections\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time devices are connected to our\n network by the minute. For example, if ten devices are each connected\n for 45 minutes, you will be charged a total of 450 connection minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n subtext: \"As low as $0.20/M with volume discount\",\n },\n];\n"],"names":["React","Tooltip","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","p","style","div","interactive","consumptionData","subtext","tooltip"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,YAAa,YAAa,AAEjC,QAAO,MAAMC,SAAiC,CAC5C,CACEC,MAAO,CACLC,QAAS,OACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,IAAK,EACtBC,IAAK,CACHC,KAAM,iBACNC,IAAK,WACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,6BACA,wBACA,sBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0CACA,gBACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EACA,CACET,MAAO,CACLC,QAAS,WACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,MACRL,qBACE,qDACE,oBAACe,KACCd,UAAU,yBACVe,MAAO,CAAEd,MAAO,cAAe,GAChC,wBAGD,oBAACe,OAAIhB,UAAU,qBACb,oBAACc,KAAEd,UAAU,oEAAmE,wBAGhF,oBAACJ,SAAQqB,YAAa,MAAM,iKAQpC,EACAZ,IAAK,CACHC,KAAM,cACNC,IAAK,uCACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,0BACA,6BACA,yBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0BACA,aACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EACA,CACET,MAAO,CACLC,QAAS,MACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,yBACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,OACRL,qBACE,qDACE,oBAACe,KACCd,UAAU,yBACVe,MAAO,CAA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"}
1	+ {"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\nimport Tooltip from \"../Tooltip\";\n\nexport const planData: PricingDataFeature[] = [\n {\n title: {\n content: \"Free\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Build a proof of concept.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$0\" },\n cta: {\n text: \"Start for free\",\n url: \"/sign-up\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"200 concurrent connections\",\n \"500 messages / second\",\n \"6M messages / month\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"Community & email support (best effort)\",\n \"No commitment\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Standard\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Roll-out into production.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: {\n amount: \"$29\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <div className=\"flex -mt-1\">\n <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n + usage\n </p>\n <Tooltip interactive={true}>\n Usage is billed on top of your plan. You'll be charged\n monthly based on how many messages, channel minutes, and\n connection minutes you use. See rates above.\n </Tooltip>\n </div>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=standard\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"10k concurrent channels\",\n \"10k concurrent connections\",\n \"2.5k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"1 day email support SLA\",\n \"Uptime SLO\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Pro\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Scale with confidence.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: {\n amount: \"$399\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <div className=\"flex -mt-1\">\n <p className=\"ui-text-p3 font-bold text-gui-blue-default-dark leading-[1.4rem]\">\n + usage\n </p>\n <Tooltip interactive={true}>\n Usage is billed on top of your plan. You'll be charged\n monthly based on how many messages, channel minutes, and\n connection minutes you use. See rates above.\n </Tooltip>\n </div>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=pro\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"50k concurrent channels\",\n \"50k concurrent connections\",\n \"10k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"4 hour email support SLA\",\n \"Datadog (lite)\",\n \"Uptime SLO\",\n ],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n\n {\n title: {\n content: \"Enterprise\",\n className: \"ui-text-h4 tracking-[-0.002rem]\",\n color: \"text-orange-600\",\n },\n description: {\n content: \"Deliver without limits.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"Custom\" },\n cta: {\n text: \"Contact us\",\n url: \"/contact\",\n },\n sections: [\n {\n title: \"Capacity\",\n items: [\n \"Unlimited concurrent channels\",\n \"Unlimited connections\",\n \"Unlimited messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"Build with any Ably product\",\n \"24/7 mission critical support\",\n \"99.999% uptime SLAs\",\n \"Committed use discounts\",\n \"Datadog\",\n \"CNAME, SSO, & more\",\n ],\n listItemColors: {\n foreground: \"text-orange-700 dark:text-orange-500\",\n background: \"text-neutral-100 dark:text-neutral-1200\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n {\n title: {\n content: \"Messages\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content:\n \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$2.50\", content: \"/ million\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million msgs\"],\n [\"First 50 million msgs\", \"$2.50\"],\n [\"Next 450 million msgs\", \"$2.25\"],\n [\"Next 4.5 billion msgs\", \"$1.95\"],\n [\"Next 15 billion msgs\", \"$1.65\"],\n [\"Next 30 billion msgs\", \"$1.40\"],\n [\"Over 50 billion msgs\", \"$1.25\"],\n ],\n },\n ],\n subtext: \"As low as $0.50/M with volume discount\",\n },\n {\n title: {\n content: \"Channels\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time a channel is active in our\n network by the minute. For example, if ten channels are in use for 45\n minutes, you will be charged a total of 450 channel minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n subtext: \"As low as $0.20/M with volume discount\",\n },\n {\n title: {\n content: \"Connections\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time devices are connected to our\n network by the minute. For example, if ten devices are each connected\n for 45 minutes, you will be charged a total of 450 connection minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n subtext: \"As low as $0.20/M with volume discount\",\n },\n];\n"],"names":["React","Tooltip","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","p","style","div","interactive","consumptionData","subtext","tooltip"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,YAAa,YAAa,AAEjC,QAAO,MAAMC,SAAiC,CAC5C,CACEC,MAAO,CACLC,QAAS,OACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,IAAK,EACtBC,IAAK,CACHC,KAAM,iBACNC,IAAK,WACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,6BACA,wBACA,sBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0CACA,gBACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EACA,CACET,MAAO,CACLC,QAAS,WACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,4BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,MACRL,qBACE,qDACE,oBAACe,KACCd,UAAU,yBACVe,MAAO,CAAEd,MAAO,cAAe,GAChC,wBAGD,oBAACe,OAAIhB,UAAU,2BACb,oBAACc,KAAEd,UAAU,oEAAmE,wBAGhF,oBAACJ,SAAQqB,YAAa,MAAM,iKAQpC,EACAZ,IAAK,CACHC,KAAM,cACNC,IAAK,uCACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,0BACA,6BACA,yBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,0BACA,aACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EACA,CACET,MAAO,CACLC,QAAS,MACTC,UAAW,kCACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QAAS,yBACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CACLC,OAAQ,OACRL,qBACE,qDACE,oBAACe,KACCd,UAAU,yBACVe,MAAO,CAAEd,MAAO,cAAe,GAChC,wBAGD,oBAACe,OAAIhB,UAAU,2BACb,oBAACc,KAAEd,UAAU,oEAAmE,wBAGhF,oBAACJ,SAAQqB,YAAa,MAAM,iKAQpC,EACAZ,IAAK,CACHC,KAAM,cACNC,IAAK,kCACLC,UAAW,wCACb,EACAC,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,0BACA,6BACA,wBACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,2BACA,iBACA,aACD,CACDC,eAAgB,CACdC,WAAY,yCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EAEA,CACET,MAAO,CACLC,QAAS,aACTC,UAAW,kCACXC,MAAO,iBACT,EACAC,YAAa,CACXH,QAAS,0BACTC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,QAAS,EAC1BC,IAAK,CACHC,KAAM,aACNC,IAAK,UACP,EACAE,SAAU,CACR,CACEX,MAAO,WACPY,MAAO,CACL,gCACA,wBACA,8BACD,AACH,EACA,CACEZ,MAAO,WACPY,MAAO,CACL,8BACA,gCACA,sBACA,0BACA,UACA,qBACD,CACDC,eAAgB,CACdC,WAAY,uCACZC,WAAY,yCACd,EACAR,IAAK,CACHC,KAAM,mBACNC,IAAK,gBACP,CACF,EACD,AACH,EACD,AAAC,AAEF,QAAO,MAAMW,gBAAwC,CACnD,CACEpB,MAAO,CACLC,QAAS,WACTC,UAAW,aACXC,MAAO,yCACT,EACAC,YAAa,CACXH,QACE,oGACFC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,QAASL,QAAS,WAAY,EAC/CU,SAAU,CACR,CACEX,MAAO,mBACPY,MAAO,CACL,CAAC,cAAe,mBAAmB,CACnC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,uBAAwB,QAAQ,CAClC,AACH,EACD,CACDS,QAAS,wCACX,EACA,CACErB,MAAO,CACLC,QAAS,WACTC,UAAW,aACXC,MAAO,0CACPmB,qBACE,oBAACN,SAAE,qMAMP,EACAZ,YAAa,CACXH,QACE,wJACFC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,QAASL,QAAS,gBAAiB,EACpDU,SAAU,CACR,CACEX,MAAO,mBACPY,MAAO,CACL,CAAC,cAAe,mBAAmB,CACnC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,sBAAuB,QAAQ,CAChC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,uBAAwB,QAAQ,CAClC,AACH,EACD,CACDS,QAAS,wCACX,EACA,CACErB,MAAO,CACLC,QAAS,cACTC,UAAW,aACXC,MAAO,0CACPmB,qBACE,oBAACN,SAAE,iNAMP,EACAZ,YAAa,CACXH,QACE,8FACFC,UAAW,aACXC,MAAO,wCACT,EACAE,MAAO,CAAEC,OAAQ,QAASL,QAAS,gBAAiB,EACpDU,SAAU,CACR,CACEX,MAAO,mBACPY,MAAO,CACL,CAAC,cAAe,mBAAmB,CACnC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,wBAAyB,QAAQ,CAClC,CAAC,sBAAuB,QAAQ,CAChC,CAAC,uBAAwB,QAAQ,CACjC,CAAC,uBAAwB,QAAQ,CAClC,AACH,EACD,CACDS,QAAS,wCACX,EACD,AAAC"}

package/package.json CHANGED Viewed

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