@ably/ui 17.5.8-dev.e2e956ae → 17.6.0

package/README.md

@@ -102,31 +102,18 @@ import Meganav from "@ably/ui/core/Meganav";
 
 ### Icons
 
-We have access to two sets of icons via the `Icon` component, custom local assets hosted in the repo itself, and the third-party Heroicons library.
+Icons are available in two formats to support different application types:
 
-#### Local Custom Icons
+1. **React Component Imports** (recommended for React apps)
+2. **SVG Spritesheets** (fallback for non-React apps)
 
-Putting SVG files inside a `src/core/icons` folder will:
-
-1. Add them to a per-group sprites file (e.g., `core/sprites-gui.svg`) for backward compatibility
-2. Generate React components that can be imported dynamically
-
-The sprites file can be loaded with the `loadSprites` helper available in the `core` module or included in the page directly.
+We provide access to both custom local assets hosted in the repo and the third-party [Heroicons](https://heroicons.com/) library.
 
-#### Heroicons Integration
+#### For React Applications (Recommended)
 
-The system automatically falls back to [Heroicons](https://heroicons.com/) when a local icon isn't found, using this naming convention:
+**Using the Icon React Component**
 
-- `icon-gui-{heroicon-name}-{variant}`
-
-Where `variant` can be:
-
-- `outline` → 24px outline icons
-- `solid` → 24px solid icons
-- `mini` → 20px solid icons
-- `micro` → 16px solid icons
-
-#### Usage with the Icon React Component
+The `Icon` component is the preferred method for React applications, providing automatic fallback and consistent sizing:
 
 ```tsx
 // Local custom icon
@@ -139,7 +126,17 @@ Where `variant` can be:
 <Icon name="icon-gui-chevron-down" variant="solid" size="1.5rem" />
 ```
 
-#### Usage without a component (sprites method)
+**How the React Component Works**
+
+1. **First**: Attempts to load a local React component generated from your custom SVGs
+2. **Fallback**: If no local component exists, dynamically imports the corresponding heroicon
+3. **Graceful degradation**: If neither exists, returns null (no icon displayed)
+
+#### For Non-React Applications
+
+**Using SVG Spritesheets**
+
+For applications that don't use React, icons are available as SVG sprites that can be referenced directly:
 
 ```html
 <!-- The width and height are required for correct sizing. The actual color class might depend on the svg and whether it uses strokes, fills etc. Note as well xlink:href, which is xlinkHref in react. -->
@@ -148,7 +145,7 @@ Where `variant` can be:
 </svg>
 ```
 
-Usage without a component, in React, with hover states. Note the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class:
+Even in React applications, you can use the sprite method for advanced use cases like hover states with the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class:
 
 ```tsx
 <a
@@ -162,11 +159,29 @@ Usage without a component, in React, with hover states. Note the [group](https:/
 </a>
 ```
 
-#### How the Fallback System Works
+The sprites file can be loaded with the `loadSprites` helper available in the `core` module or included in the page directly.
 
-1. **First**: Attempts to load a local React component generated from your custom SVGs
-2. **Fallback**: If no local component exists, dynamically imports the corresponding heroicon
-3. **Graceful degradation**: If neither exists, returns null (no icon displayed)
+#### Icon Sources
+
+**Local Custom Icons**
+
+Putting SVG files inside a `src/core/icons` folder will:
+
+1. Generate React components that can be imported dynamically
+2. Add them to a per-group sprites file (e.g., `core/sprites-gui.svg`) for non-React usage
+
+**Heroicons Integration**
+
+The system automatically falls back to [Heroicons](https://heroicons.com/) when a local icon isn't found, using this naming convention:
+
+- `icon-gui-{heroicon-name}-{variant}`
+
+Where `variant` can be:
+
+- `outline` → 24px outline icons
+- `solid` → 24px solid icons
+- `mini` → 20px solid icons
+- `micro` → 16px solid icons
 
 This hybrid approach allows you to use custom brand icons while having access to the entire heroicons library as a fallback.
 

package/core/Pricing/PricingCards.js

@@ -1,2 +1,2 @@
-import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";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[hoveredBottomCta,setHoveredBottomCta]=useState(null);const[animationBottomCtaPhase,setAnimationBottomCtaPhase]=useState("idle");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()}},[]);useEffect(()=>{if(hoveredBottomCta!==null&&animationBottomCtaPhase==="fading-out"){const timer=setTimeout(()=>{setAnimationBottomCtaPhase("fading-in")},300);return()=>clearTimeout(timer)}},[hoveredBottomCta,animationBottomCtaPhase]);const handleCtaHover=index=>{setHoveredBottomCta(index);setAnimationBottomCtaPhase("fading-out")};const handleCtaLeave=()=>{setHoveredBottomCta(null);setAnimationBottomCtaPhase("idle")};const delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":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-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border,bottomCta},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200",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-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,React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-1"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string",iconSize:"1.25rem"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-h1 text-h1-xl h-5 block",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-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},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),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-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),React.createElement("div",{className:"flex flex-col gap-4 relative z-10 flex-grow"},sections.map(({title,items,listItemColors})=>React.createElement("div",{key:title,className:"flex flex-col gap-2"},React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4"},title),React.createElement("div",{className:cn({"flex flex-col":!delimiter})},items.map((item,index)=>Array.isArray(item)?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)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex items-start"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item))))))),bottomCta&&React.createElement("div",null,React.createElement("div",{className:"border-t border-neutral-200 dark:border-neutral-1100 -mx-6"}),React.createElement("a",{href:bottomCta.url,className:cn("ui-text-label4 font-semibold block group/bottom-cta cursor-pointer ml-2 pt-4","text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus"),onMouseEnter:()=>handleCtaHover(index),onMouseLeave:handleCtaLeave},bottomCta.text,React.createElement(Icon,{name:"icon-gui-arrow-down-outline",size:"12px",color:bottomCta.iconColor,additionalCSS:cn("align-middle ml-2 relative transition-all duration-300 ease-in-out",hoveredBottomCta===index&&animationBottomCtaPhase==="fading-out"?"opacity-0 -bottom-4":hoveredBottomCta===index&&animationBottomCtaPhase==="fading-in"?"opacity-100 bottom-0":"opacity-100 bottom-0")})))),delimiterColumn(index)))))};export default PricingCards;
+import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";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-5",{"m-2":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-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border,bottomCta},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200",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-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,React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-4`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-1"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string",iconSize:"1.25rem"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-h1 text-h1-xl h-5 block",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-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},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),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-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),React.createElement("div",{className:"flex flex-col gap-4 relative z-10 flex-grow"},sections.map(({title,items,listItemColors})=>React.createElement("div",{key:title,className:"flex flex-col gap-3"},React.createElement("p",{className:"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4"},title),React.createElement("div",{className:cn({"flex flex-col":!delimiter})},items.map((item,index)=>Array.isArray(item)?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)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex items-start gap-2"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-1"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`)},item))))))),bottomCta&&React.createElement("div",null,React.createElement("div",{className:"border-t border-neutral-200 dark:border-neutral-1100 -mx-6"}),React.createElement("a",{href:bottomCta.url,className:cn("text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center","text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus")},bottomCta.text,React.createElement(Icon,{name:"icon-gui-arrow-down-outline",size:"12px",color:bottomCta.iconColor,additionalCSS:cn("align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5")})))),delimiterColumn(index)))))};export default PricingCards;
 //# sourceMappingURL=PricingCards.js.map

package/core/Pricing/PricingCards.js.map

@@ -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 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  const [hoveredBottomCta, setHoveredBottomCta] = useState<number | null>(null);\n  const [animationBottomCtaPhase, setAnimationBottomCtaPhase] = useState<\n    \"idle\" | \"fading-out\" | \"fading-in\"\n  >(\"idle\");\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  useEffect(() => {\n    if (hoveredBottomCta !== null && animationBottomCtaPhase === \"fading-out\") {\n      const timer = setTimeout(() => {\n        setAnimationBottomCtaPhase(\"fading-in\");\n      }, 300);\n      return () => clearTimeout(timer);\n    }\n  }, [hoveredBottomCta, animationBottomCtaPhase]);\n\n  const handleCtaHover = (index: number) => {\n    setHoveredBottomCta(index);\n    setAnimationBottomCtaPhase(\"fading-out\");\n  };\n\n  const handleCtaLeave = () => {\n    setHoveredBottomCta(null);\n    setAnimationBottomCtaPhase(\"idle\");\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-600 dark:border-neutral-700\",\n        bg: \"bg-neutral-600 dark:bg-neutral-700\",\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          (\n            { title, description, price, cta, sections, border, bottomCta },\n            index,\n          ) => (\n            <Fragment key={title.content}>\n              {delimiterColumn(index)}\n              <div\n                className={cn(\n                  \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\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(`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                          iconSize=\"1.25rem\"\n                        >\n                          {title.tooltip}\n                        </Tooltip>\n                      ) : null}\n                    </div>\n                    <p\n                      className={cn(\n                        \"ui-text-h1 text-h1-xl h-5 block\",\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-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 flex-grow\">\n                  {sections.map(({ title, items, listItemColors }) => (\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] h-4\">\n                        {title}\n                      </p>\n                      <div className={cn({ \"flex flex-col\": !delimiter })}>\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 leading-[1.4rem]\",\n                                    subIndex % 2 === 1 ? \"text-right\" : \"\",\n                                  )}\n                                >\n                                  {subItem}\n                                </span>\n                              ))}\n                            </div>\n                          ) : (\n                            <div key={item} className=\"flex 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                    </div>\n                  ))}\n                </div>\n\n                {bottomCta && (\n                  <div>\n                    <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n                    <a\n                      href={bottomCta.url}\n                      className={cn(\n                        \"ui-text-label4 font-semibold block group/bottom-cta cursor-pointer ml-2 pt-4\",\n                        \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n                      )}\n                      onMouseEnter={() => handleCtaHover(index)}\n                      onMouseLeave={handleCtaLeave}\n                    >\n                      {bottomCta.text}\n                      <Icon\n                        name=\"icon-gui-arrow-down-outline\"\n                        size=\"12px\"\n                        color={bottomCta.iconColor}\n                        additionalCSS={cn(\n                          \"align-middle ml-2 relative transition-all duration-300 ease-in-out\",\n                          hoveredBottomCta === index &&\n                            animationBottomCtaPhase === \"fading-out\"\n                            ? \"opacity-0 -bottom-4\"\n                            : hoveredBottomCta === index &&\n                                animationBottomCtaPhase === \"fading-in\"\n                              ? \"opacity-100 bottom-0\"\n                              : \"opacity-100 bottom-0\",\n                        )}\n                      />\n                    </a>\n                  </div>\n                )}\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","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","hoveredBottomCta","setHoveredBottomCta","animationBottomCtaPhase","setAnimationBottomCtaPhase","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","timer","setTimeout","clearTimeout","handleCtaHover","index","handleCtaLeave","delimiterColumn","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a","onMouseEnter","onMouseLeave"],"mappings":"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"}
+{"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 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-600 dark:border-neutral-700\",\n        bg: \"bg-neutral-600 dark:bg-neutral-700\",\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          (\n            { title, description, price, cta, sections, border, bottomCta },\n            index,\n          ) => (\n            <Fragment key={title.content}>\n              {delimiterColumn(index)}\n              <div\n                className={cn(\n                  \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\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(`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                          iconSize=\"1.25rem\"\n                        >\n                          {title.tooltip}\n                        </Tooltip>\n                      ) : null}\n                    </div>\n                    <p\n                      className={cn(\n                        \"ui-text-h1 text-h1-xl h-5 block\",\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-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 flex-grow\">\n                  {sections.map(({ title, items, listItemColors }) => (\n                    <div key={title} className=\"flex flex-col gap-3\">\n                      <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4\">\n                        {title}\n                      </p>\n                      <div className={cn({ \"flex flex-col\": !delimiter })}>\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 leading-[1.4rem]\",\n                                    subIndex % 2 === 1 ? \"text-right\" : \"\",\n                                  )}\n                                >\n                                  {subItem}\n                                </span>\n                              ))}\n                            </div>\n                          ) : (\n                            <div key={item} className=\"flex items-start gap-2\">\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                    </div>\n                  ))}\n                </div>\n\n                {bottomCta && (\n                  <div>\n                    <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n                    <a\n                      href={bottomCta.url}\n                      className={cn(\n                        \"text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center\",\n                        \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n                      )}\n                    >\n                      {bottomCta.text}\n                      <Icon\n                        name=\"icon-gui-arrow-down-outline\"\n                        size=\"12px\"\n                        color={bottomCta.iconColor}\n                        additionalCSS={cn(\n                          \"align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5\",\n                        )}\n                      />\n                    </a>\n                  </div>\n                )}\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","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","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a"],"mappings":"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"}

package/core/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  useRef,\n  useState,\n  MouseEvent,\n  RefObject,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  tooltipProps?: HTMLAttributes<HTMLDivElement>;\n  interactive?: boolean;\n  iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  tooltipProps,\n  interactive = false,\n  iconSize = \"1rem\",\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  const [open, setOpen] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n  const offset = 8;\n  const reference = useRef<HTMLButtonElement>(null);\n  const floating = useRef<HTMLDivElement>(null);\n  const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      const floatingRect = floating.current?.getBoundingClientRect();\n      const referenceRect = reference.current?.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      let orientation = \"top\";\n\n      if (floatingRect && referenceRect) {\n        let x =\n          referenceRect.left +\n          referenceRect.width / 2 -\n          floatingRect.width / 2 +\n          window.scrollX;\n        let y =\n          referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n        // Adjust if tooltip goes off the right edge\n        if (x + floatingRect.width > viewportWidth + window.scrollX) {\n          x = viewportWidth + window.scrollX - floatingRect.width - offset;\n          orientation = \"left\";\n        }\n\n        // Adjust if tooltip goes off the left edge\n        if (x < window.scrollX) {\n          x = window.scrollX + offset;\n          orientation = \"right\";\n        }\n\n        // Adjust if tooltip goes off the top edge\n        if (y < window.scrollY) {\n          y = referenceRect.bottom + offset + window.scrollY;\n          orientation = \"bottom\";\n        }\n\n        // Adjust if tooltip goes off the bottom edge\n        if (y + floatingRect.height > viewportHeight + window.scrollY) {\n          y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n        }\n\n        setPosition({ x, y, orientation });\n      }\n    } else {\n      setPosition({ x: 0, y: 0, orientation: \"top\" });\n    }\n\n    return () => {\n      if (fadeOutTimeoutRef.current !== null) {\n        clearTimeout(fadeOutTimeoutRef.current);\n      }\n    };\n  }, [open]);\n\n  const initiateFadeOut = () => {\n    setFadeOut(true);\n    fadeOutTimeoutRef.current = setTimeout(() => {\n      setOpen(false);\n      setFadeOut(false);\n    }, 250);\n  };\n\n  const cursorTowardsTooltip = (\n    event: MouseEvent,\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    if (!ref.current) {\n      return false;\n    }\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = ref.current.getBoundingClientRect();\n    const { orientation } = position;\n\n    switch (orientation) {\n      case \"top\":\n        return clientX >= x && clientX <= x + width && clientY < y;\n      case \"left\":\n        return clientY >= y && clientY <= y + height && clientX < x;\n      case \"right\":\n        return clientY >= y && clientY <= y + height && clientX > x + width;\n      case \"bottom\":\n        return clientX >= x && clientX <= x + width && clientY > y + height;\n      default:\n        return false;\n    }\n  };\n\n  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n    if (!reference.current) return;\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = reference.current.getBoundingClientRect();\n    const withinBounds =\n      clientX >= x &&\n      clientX <= x + width &&\n      clientY >= y &&\n      clientY <= y + height;\n\n    if (!withinBounds) {\n      initiateFadeOut();\n    }\n  };\n\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n      <button\n        onMouseEnter={() => setOpen(true)}\n        onMouseLeave={(event) => {\n          if (!interactive || !cursorTowardsTooltip(event, reference)) {\n            initiateFadeOut();\n          }\n        }}\n        type=\"button\"\n        ref={reference}\n        aria-describedby=\"tooltip\"\n        {...triggerProps}\n        className={cn(\n          \"p-0 relative focus:outline-none h-[1rem]\",\n          triggerProps?.className,\n        )}\n      >\n        {triggerElement ?? (\n          <Icon\n            name=\"icon-gui-information-circle-outline\"\n            color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n            size={iconSize as IconSize}\n          />\n        )}\n      </button>\n\n      {open\n        ? createPortal(\n            <div\n              role=\"tooltip\"\n              ref={floating}\n              onMouseLeave={(event) =>\n                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n              }\n              style={{\n                top: position.y,\n                left: position.x,\n                zIndex: 1000,\n                boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n              }}\n              {...tooltipProps}\n              className={cn(\n                \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n                { \"pointer-events-none\": !interactive },\n                \"rounded-lg absolute\",\n                tooltipProps?.className,\n                { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n                { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n              )}\n            >\n              <div className=\"max-w-60 w-auto\">{children}</div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","iconSize","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  useRef,\n  useState,\n  MouseEvent,\n  RefObject,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  tooltipProps?: HTMLAttributes<HTMLDivElement>;\n  interactive?: boolean;\n  iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  tooltipProps,\n  interactive = false,\n  iconSize = \"1rem\",\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  const [open, setOpen] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n  const offset = 8;\n  const reference = useRef<HTMLButtonElement>(null);\n  const floating = useRef<HTMLDivElement>(null);\n  const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      const floatingRect = floating.current?.getBoundingClientRect();\n      const referenceRect = reference.current?.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      let orientation = \"top\";\n\n      if (floatingRect && referenceRect) {\n        let x =\n          referenceRect.left +\n          referenceRect.width / 2 -\n          floatingRect.width / 2 +\n          window.scrollX;\n        let y =\n          referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n        // Adjust if tooltip goes off the right edge\n        if (x + floatingRect.width > viewportWidth + window.scrollX) {\n          x = viewportWidth + window.scrollX - floatingRect.width - offset;\n          orientation = \"left\";\n        }\n\n        // Adjust if tooltip goes off the left edge\n        if (x < window.scrollX) {\n          x = window.scrollX + offset;\n          orientation = \"right\";\n        }\n\n        // Adjust if tooltip goes off the top edge\n        if (y < window.scrollY) {\n          y = referenceRect.bottom + offset + window.scrollY;\n          orientation = \"bottom\";\n        }\n\n        // Adjust if tooltip goes off the bottom edge\n        if (y + floatingRect.height > viewportHeight + window.scrollY) {\n          y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n        }\n\n        setPosition({ x, y, orientation });\n      }\n    } else {\n      setPosition({ x: 0, y: 0, orientation: \"top\" });\n    }\n\n    return () => {\n      if (fadeOutTimeoutRef.current !== null) {\n        clearTimeout(fadeOutTimeoutRef.current);\n      }\n    };\n  }, [open]);\n\n  const initiateFadeOut = () => {\n    setFadeOut(true);\n    fadeOutTimeoutRef.current = setTimeout(() => {\n      setOpen(false);\n      setFadeOut(false);\n    }, 250);\n  };\n\n  const cursorTowardsTooltip = (\n    event: MouseEvent,\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    if (!ref.current) {\n      return false;\n    }\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = ref.current.getBoundingClientRect();\n    const { orientation } = position;\n\n    switch (orientation) {\n      case \"top\":\n        return clientX >= x && clientX <= x + width && clientY < y;\n      case \"left\":\n        return clientY >= y && clientY <= y + height && clientX < x;\n      case \"right\":\n        return clientY >= y && clientY <= y + height && clientX > x + width;\n      case \"bottom\":\n        return clientX >= x && clientX <= x + width && clientY > y + height;\n      default:\n        return false;\n    }\n  };\n\n  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n    if (!reference.current) return;\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = reference.current.getBoundingClientRect();\n    const withinBounds =\n      clientX >= x &&\n      clientX <= x + width &&\n      clientY >= y &&\n      clientY <= y + height;\n\n    if (!withinBounds) {\n      initiateFadeOut();\n    }\n  };\n\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n      <button\n        onMouseEnter={() => setOpen(true)}\n        onMouseLeave={(event) => {\n          if (!interactive || !cursorTowardsTooltip(event, reference)) {\n            initiateFadeOut();\n          }\n        }}\n        type=\"button\"\n        ref={reference}\n        aria-describedby=\"tooltip\"\n        {...triggerProps}\n        className={cn(\n          \"p-0 relative focus:outline-none h-[1rem]\",\n          triggerProps?.className,\n        )}\n      >\n        {triggerElement ?? (\n          <Icon\n            name=\"icon-gui-information-circle-outline\"\n            color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n            size={iconSize}\n          />\n        )}\n      </button>\n\n      {open\n        ? createPortal(\n            <div\n              role=\"tooltip\"\n              ref={floating}\n              onMouseLeave={(event) =>\n                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n              }\n              style={{\n                top: position.y,\n                left: position.x,\n                zIndex: 1000,\n                boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n              }}\n              {...tooltipProps}\n              className={cn(\n                \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n                { \"pointer-events-none\": !interactive },\n                \"rounded-lg absolute\",\n                tooltipProps?.className,\n                { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n                { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n              )}\n            >\n              <div className=\"max-w-60 w-auto\">{children}</div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","iconSize","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"AAAA,OAAOA,OAKLC,MAAM,CACNC,QAAQ,CAGRC,SAAS,KACJ,OAAQ,AACf,QAASC,YAAY,KAAQ,WAAY,AACzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,QAAU,CAAC,CACfC,QAAQ,CACRC,cAAc,CACdC,YAAY,CACZC,YAAY,CACZC,YAAc,KAAK,CACnBC,SAAW,MAAM,CACjB,GAAGC,KAC6B,IAChC,KAAM,CAACC,KAAMC,QAAQ,CAAGd,SAAS,OACjC,KAAM,CAACe,QAASC,WAAW,CAAGhB,SAAS,OACvC,KAAM,CAACiB,SAAUC,YAAY,CAAGlB,SAAS,CAAEmB,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,GAC1E,MAAMC,OAAS,EACf,MAAMC,UAAYxB,OAA0B,MAC5C,MAAMyB,SAAWzB,OAAuB,MACxC,MAAM0B,kBAAoB1B,OAA8B,MAExDE,UAAU,KACR,GAAIY,KAAM,CACR,MAAMa,aAAeF,SAASG,OAAO,EAAEC,wBACvC,MAAMC,cAAgBN,UAAUI,OAAO,EAAEC,wBACzC,MAAME,cAAgBC,OAAOC,UAAU,CACvC,MAAMC,eAAiBF,OAAOG,WAAW,CACzC,IAAIb,YAAc,MAElB,GAAIK,cAAgBG,cAAe,CACjC,IAAIV,EACFU,cAAcM,IAAI,CAClBN,cAAcO,KAAK,CAAG,EACtBV,aAAaU,KAAK,CAAG,EACrBL,OAAOM,OAAO,CAChB,IAAIjB,EACFS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,CAGnE,GAAIrB,EAAIO,aAAaU,KAAK,CAAGN,cAAgBC,OAAOM,OAAO,CAAE,CAC3DlB,EAAIW,cAAgBC,OAAOM,OAAO,CAAGX,aAAaU,KAAK,CAAGd,OAC1DD,YAAc,MAChB,CAGA,GAAIF,EAAIY,OAAOM,OAAO,CAAE,CACtBlB,EAAIY,OAAOM,OAAO,CAAGf,OACrBD,YAAc,OAChB,CAGA,GAAID,EAAIW,OAAOS,OAAO,CAAE,CACtBpB,EAAIS,cAAcY,MAAM,CAAGnB,OAASS,OAAOS,OAAO,CAClDnB,YAAc,QAChB,CAGA,GAAID,EAAIM,aAAaa,MAAM,CAAGN,eAAiBF,OAAOS,OAAO,CAAE,CAC7DpB,EAAIS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,AACvE,CAEAtB,YAAY,CAAEC,EAAGC,EAAGC,WAAY,EAClC,CACF,KAAO,CACLH,YAAY,CAAEC,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,EAC/C,CAEA,MAAO,KACL,GAAII,kBAAkBE,OAAO,GAAK,KAAM,CACtCe,aAAajB,kBAAkBE,OAAO,CACxC,CACF,CACF,EAAG,CAACd,KAAK,EAET,MAAM8B,gBAAkB,KACtB3B,WAAW,KACXS,CAAAA,kBAAkBE,OAAO,CAAGiB,WAAW,KACrC9B,QAAQ,OACRE,WAAW,MACb,EAAG,IACL,EAEA,MAAM6B,qBAAuB,CAC3BC,MACAC,OAEA,GAAI,CAACA,IAAIpB,OAAO,CAAE,CAChB,OAAO,KACT,CAEA,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGQ,IAAIpB,OAAO,CAACC,qBAAqB,GACjE,KAAM,CAAEP,WAAW,CAAE,CAAGJ,SAExB,OAAQI,aACN,IAAK,MACH,OAAO2B,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,CAC3D,KAAK,OACH,OAAO6B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,CAC5D,KAAK,QACH,OAAO8B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,EAAIiB,KAChE,KAAK,SACH,OAAOY,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,EAAImB,MAC/D,SACE,OAAO,KACX,CACF,EAEA,MAAMW,0BAA4B,AAACJ,QACjC,GAAI,CAACvB,UAAUI,OAAO,CAAE,OAExB,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGhB,UAAUI,OAAO,CAACC,qBAAqB,GACvE,MAAMuB,aACJH,SAAW7B,GACX6B,SAAW7B,EAAIiB,OACfa,SAAW7B,GACX6B,SAAW7B,EAAImB,OAEjB,GAAI,CAACY,aAAc,CACjBR,iBACF,CACF,EAEA,OACE,oBAACS,OAAK,GAAGxC,IAAI,CAAEyC,UAAWjD,GAAG,mBAAoBQ,MAAMyC,YACrD,oBAACC,UACCC,aAAc,IAAMzC,QAAQ,MAC5B0C,aAAc,AAACV,QACb,GAAI,CAACpC,aAAe,CAACmC,qBAAqBC,MAAOvB,WAAY,CAC3DoB,iBACF,CACF,EACAc,KAAK,SACLV,IAAKxB,UACLmC,mBAAiB,UAChB,GAAGlD,YAAY,CAChB6C,UAAWjD,GACT,2CACAI,cAAc6C,YAGf9C,gBACC,oBAACJ,MACCwD,KAAK,sCACLC,MAAM,6FACNC,KAAMlD,YAKXE,KACGX,aACE,oBAACkD,OACCU,KAAK,UACLf,IAAKvB,SACLgC,aAAc,AAACV,OACbF,WAAW,IAAMM,0BAA0BJ,OAAQ,KAErDiB,MAAO,CACLzB,IAAKrB,SAASG,CAAC,CACfe,KAAMlB,SAASE,CAAC,CAChB6C,OAAQ,IACRC,UAAW,iCACb,EACC,GAAGxD,YAAY,CAChB4C,UAAWjD,GACT,yGACA,CAAE,sBAAuB,CAACM,WAAY,EACtC,sBACAD,cAAc4C,UACd,CAAE,0CAA2CtC,OAAQ,EACrD,CAAE,2CAA4C,CAACA,OAAQ,IAGzD,oBAACqC,OAAIC,UAAU,mBAAmB/C,WAEpC4D,SAASC,IAAI,EAEf,KAGV,CAEA,gBAAe9D,OAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.5.8-dev.e2e956ae",
+  "version": "17.6.0",
   "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",