@ably/ui 16.0.1 → 16.0.2-dev.6ebc59a3
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.
- package/core/.DS_Store +0 -0
- package/core/Meganav/.DS_Store +0 -0
- package/core/Meganav/MeganavPanel.js +1 -1
- package/core/Meganav/MeganavPanel.js.map +1 -1
- package/core/Meganav/MeganavProductTile.js +1 -1
- package/core/Meganav/MeganavProductTile.js.map +1 -1
- package/core/Tooltip.js +1 -1
- package/core/Tooltip.js.map +1 -1
- package/package.json +1 -1
package/core/.DS_Store
ADDED
|
Binary file
|
|
Binary file
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import{productsForNav}from"./data";import{productNames}from"../ProductTile/data";import MeganavProductTile from"./MeganavProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 group",{"grid-cols-1 xs:grid-cols-2":displayProductTile},panelLeftClassName)},displayProductTile?productNames.map(product=>React.createElement(MeganavProductTile,{name:product,key:product,productLink:productsForNav[product].link??"#",animateIcons:true})):panelLeft&&React.createElement("a",{className:"grid grid-cols-1 xs:grid-cols-2",href:panelLeft.url},React.createElement("span",{className:"block w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("span",{className:"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement("span",{className:"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000"},panelLeft.labelLink,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"18px",color:"text-orange-600",additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]","group-hover/featured-link:left-0 group-hover/meganav-panel:left-0")}))),React.createElement("span",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
|
|
1
|
+
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import{productsForNav}from"./data";import{productNames}from"../ProductTile/data";import MeganavProductTile from"./MeganavProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 group",{"grid-cols-1 xs:grid-cols-2":displayProductTile},panelLeftClassName)},displayProductTile?productNames.map(product=>React.createElement(MeganavProductTile,{name:product,key:product,productLink:productsForNav[product].link??"#",animateIcons:true})):panelLeft&&React.createElement("a",{className:"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto",href:panelLeft.url},React.createElement("span",{className:"block w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("span",{className:"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement("span",{className:"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000"},panelLeft.labelLink,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"18px",color:"text-orange-600",additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]","group-hover/featured-link:left-0 group-hover/meganav-panel:left-0")}))),React.createElement("span",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"pointer-events-auto ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
|
|
2
2
|
//# sourceMappingURL=MeganavPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList, productsForNav } from \"./data\";\nimport { ProductName, productNames } from \"../ProductTile/data\";\nimport MeganavProductTile from \"./MeganavProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 group\",\n { \"grid-cols-1 xs:grid-cols-2\": displayProductTile },\n panelLeftClassName,\n )}\n >\n {displayProductTile\n ? productNames.map((product) => (\n <MeganavProductTile\n name={product as ProductName}\n key={product}\n productLink={productsForNav[product].link ?? \"#\"}\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <a\n className=\"grid grid-cols-1 xs:grid-cols-2\"\n href={panelLeft.url}\n >\n <span className=\"block w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <span className=\"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </span>\n <span className=\"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\">\n {panelLeft.labelLink}\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size=\"18px\"\n color=\"text-orange-600\"\n additionalCSS={cn(\n \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n \"group-hover/featured-link:left-0 group-hover/meganav-panel:left-0\",\n )}\n />\n </span>\n </span>\n <span className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </span>\n </a>\n )}\n </div>\n <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n {panelRightHeading}\n </p>\n )}\n\n {panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","productsForNav","productNames","MeganavProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","map","product","name","key","productLink","link","animateIcons","a","href","url","span","h4","heading","content","labelLink","size","color","additionalCSS","img","src","image","alt","ul","p","item","li","isMobile","label","icon"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAgDC,cAAc,KAAQ,QAAS,AAC/E,QAAsBC,YAAY,KAAQ,qBAAsB,AAChE,QAAOC,uBAAwB,sBAAuB,AAEtD,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,+BACA,CAAE,6BAA8BM,kBAAmB,EACnDE,qBAGDF,mBACGH,aAAaW,GAAG,CAAC,AAACC,SAChB,oBAACX,oBACCY,KAAMD,QACNE,IAAKF,QACLG,YAAahB,cAAc,CAACa,QAAQ,CAACI,IAAI,EAAI,IAC7CC,aAAc,QAGlBb,WACE,oBAACc,KACCR,UAAU,
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList, productsForNav } from \"./data\";\nimport { ProductName, productNames } from \"../ProductTile/data\";\nimport MeganavProductTile from \"./MeganavProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 group\",\n { \"grid-cols-1 xs:grid-cols-2\": displayProductTile },\n panelLeftClassName,\n )}\n >\n {displayProductTile\n ? productNames.map((product) => (\n <MeganavProductTile\n name={product as ProductName}\n key={product}\n productLink={productsForNav[product].link ?? \"#\"}\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <a\n className=\"grid grid-cols-1 xs:grid-cols-2 pointer-events-auto\"\n href={panelLeft.url}\n >\n <span className=\"block w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <span className=\"block ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </span>\n <span className=\"py-8 font-sans font-bold block group/featured-link text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\">\n {panelLeft.labelLink}\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size=\"18px\"\n color=\"text-orange-600\"\n additionalCSS={cn(\n \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n \"group-hover/featured-link:left-0 group-hover/meganav-panel:left-0\",\n )}\n />\n </span>\n </span>\n <span className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </span>\n </a>\n )}\n </div>\n <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n {panelRightHeading}\n </p>\n )}\n\n {panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"pointer-events-auto ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","productsForNav","productNames","MeganavProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","map","product","name","key","productLink","link","animateIcons","a","href","url","span","h4","heading","content","labelLink","size","color","additionalCSS","img","src","image","alt","ul","p","item","li","isMobile","label","icon"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAgDC,cAAc,KAAQ,QAAS,AAC/E,QAAsBC,YAAY,KAAQ,qBAAsB,AAChE,QAAOC,uBAAwB,sBAAuB,AAEtD,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,+BACA,CAAE,6BAA8BM,kBAAmB,EACnDE,qBAGDF,mBACGH,aAAaW,GAAG,CAAC,AAACC,SAChB,oBAACX,oBACCY,KAAMD,QACNE,IAAKF,QACLG,YAAahB,cAAc,CAACa,QAAQ,CAACI,IAAI,EAAI,IAC7CC,aAAc,QAGlBb,WACE,oBAACc,KACCR,UAAU,sDACVS,KAAMf,UAAUgB,GAAG,EAEnB,oBAACC,QAAKX,UAAU,qBACd,oBAACY,MAAGZ,UAAU,sDACXN,UAAUmB,OAAO,EAEpB,oBAACF,QAAKX,UAAU,gEACbN,UAAUoB,OAAO,EAEpB,oBAACH,QAAKX,UAAU,mKACbN,UAAUqB,SAAS,CACpB,oBAAC3B,MACCe,KAAK,oCACLa,KAAK,OACLC,MAAM,kBACNC,cAAe/B,GACb,8DACA,yEAKR,oBAACwB,QAAKX,UAAU,oBACd,oBAACmB,OACCC,IAAK1B,UAAU2B,KAAK,CACpBC,IAAK5B,UAAUmB,OAAO,CACtBb,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,oBAACuB,UACE3B,mBACC,oBAAC4B,KAAExB,UAAU,kEACVJ,mBAIJC,gBAAgBI,GAAG,CAAC,AAACwB,MACpB,oBAACC,MACC1B,UAAWb,GACT,iFACAsC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAACxC,MACCe,KAAMsB,KAAKI,IAAI,CACfb,KAAK,UACLE,cAAc,4CAEhB,oBAACV,KACCR,UAAU,2KACVS,KAAMgB,KAAKnB,IAAI,EAEdmB,KAAKG,KAAK,KAKlB9B,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"../utils/cn";import{products}from"../ProductTile/data";import ProductIcon from"../ProductTile/ProductIcon";import ProductLabel from"../ProductTile/ProductLabel";import ProductDescription from"../ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const MeganavProductTile=({name,productLink,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,unavailable,description}=products[name]??{};const numericalSize=parseInt(size,10);return React.createElement("a",{href:productLink?productLink:"#",className:cn("transition-colors group/product-tile","flex flex-col p-12 rounded-lg gap-8","bg-neutral-000 dark:bg-neutral-1300",{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":!unavailable},{"
|
|
1
|
+
import React from"react";import cn from"../utils/cn";import{products}from"../ProductTile/data";import ProductIcon from"../ProductTile/ProductIcon";import ProductLabel from"../ProductTile/ProductLabel";import ProductDescription from"../ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const MeganavProductTile=({name,productLink,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,unavailable,description}=products[name]??{};const numericalSize=parseInt(size,10);return React.createElement("a",{href:productLink?productLink:"#",className:cn("transition-colors group/product-tile","flex flex-col p-12 rounded-lg gap-8","bg-neutral-000 dark:bg-neutral-1300",{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":!unavailable},{"pointer-events-auto":!unavailable},{"pointer-events-none":unavailable}),"aria-hidden":unavailable},React.createElement("span",{className:cn("items-center flex"),style:{gap:numericalSize/CONTAINER_GAP_RATIO}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,unavailable:!!unavailable,selected:false}),React.createElement(ProductLabel,{label:label,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,selected:false})),React.createElement(ProductDescription,{description:description,unavailable:!!unavailable,showDescription:showDescription,selected:false}))};export default MeganavProductTile;
|
|
2
2
|
//# sourceMappingURL=MeganavProductTile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport { products } from \"../ProductTile/data\";\nimport ProductIcon from \"../ProductTile/ProductIcon\";\nimport ProductLabel from \"../ProductTile/ProductLabel\";\nimport ProductDescription from \"../ProductTile/ProductDescription\";\nimport { ProductTileProps } from \"../ProductTile\";\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst MeganavProductTile = ({\n name,\n productLink,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n}: ProductTileProps & { productLink?: string }) => {\n const { icon, hoverIcon, label, unavailable, description } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n\n return (\n <a\n href={productLink ? productLink : \"#\"}\n className={cn(\n \"transition-colors group/product-tile\",\n \"flex flex-col p-12 rounded-lg gap-8\",\n \"bg-neutral-000 dark:bg-neutral-1300\",\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\": !unavailable,\n },\n { \"
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport { products } from \"../ProductTile/data\";\nimport ProductIcon from \"../ProductTile/ProductIcon\";\nimport ProductLabel from \"../ProductTile/ProductLabel\";\nimport ProductDescription from \"../ProductTile/ProductDescription\";\nimport { ProductTileProps } from \"../ProductTile\";\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst MeganavProductTile = ({\n name,\n productLink,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n}: ProductTileProps & { productLink?: string }) => {\n const { icon, hoverIcon, label, unavailable, description } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n\n return (\n <a\n href={productLink ? productLink : \"#\"}\n className={cn(\n \"transition-colors group/product-tile\",\n \"flex flex-col p-12 rounded-lg gap-8\",\n \"bg-neutral-000 dark:bg-neutral-1300\",\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\": !unavailable,\n },\n { \"pointer-events-auto\": !unavailable },\n { \"pointer-events-none\": unavailable },\n )}\n aria-hidden={unavailable}\n >\n <span\n className={cn(\"items-center flex\")}\n style={{\n gap: numericalSize / CONTAINER_GAP_RATIO,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n unavailable={!!unavailable}\n selected={false}\n />\n <ProductLabel\n label={label}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n selected={false}\n />\n </span>\n <ProductDescription\n description={description}\n unavailable={!!unavailable}\n showDescription={showDescription}\n selected={false}\n />\n </a>\n );\n};\n\nexport default MeganavProductTile;\n"],"names":["React","cn","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","MeganavProductTile","name","productLink","showDescription","showLabel","size","animateIcons","icon","hoverIcon","label","unavailable","description","numericalSize","parseInt","a","href","className","aria-hidden","span","style","gap","hoverName","undefined","selected"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,gBAAiB,4BAA6B,AACrD,QAAOC,iBAAkB,6BAA8B,AACvD,QAAOC,uBAAwB,mCAAoC,CAGnE,MAAMC,oBAAsB,EAE5B,MAAMC,mBAAqB,CAAC,CAC1BC,IAAI,CACJC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACwB,IAC5C,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,WAAW,CAAE,CACxDhB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMW,cAAgBC,SAASR,KAAM,IAErC,OACE,oBAACS,KACCC,KAAMb,YAAcA,YAAc,IAClCc,UAAWtB,GACT,uCACA,sCACA,sCACA,CACE,kDAAmD,CAACgB,WACtD,EACA,CAAE,sBAAuB,CAACA,WAAY,EACtC,CAAE,sBAAuBA,WAAY,GAEvCO,cAAaP,aAEb,oBAACQ,QACCF,UAAWtB,GAAG,qBACdyB,MAAO,CACLC,IAAKR,cAAgBb,mBACvB,GAEA,oBAACH,aACCS,KAAMO,cACNX,KAAMM,KACNc,UAAWf,aAAeE,UAAYc,UACtCZ,YAAa,CAAC,CAACA,YACfa,SAAU,QAEZ,oBAAC1B,cACCY,MAAOA,MACPC,YAAa,CAAC,CAACA,YACfE,cAAeA,cACfR,UAAWA,UACXmB,SAAU,SAGd,oBAACzB,oBACCa,YAAaA,YACbD,YAAa,CAAC,CAACA,YACfP,gBAAiBA,gBACjBoB,SAAU,QAIlB,CAEA,gBAAevB,kBAAmB"}
|
package/core/Tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return React.createElement("div",{...rest,className
|
|
1
|
+
import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import cn from"./utils/cn";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return React.createElement("div",{...rest,className:cn("inline-flex ml-8",rest?.className??"")},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??React.createElement(Icon,{name:"icon-gui-information-circle-micro",color:"text-neutral-800 dark:text-neutral-500",size:"1rem"})),open?createPortal(React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:cn("bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16",{"pointer-events-none":!interactive},"rounded-lg absolute",tooltipProps?.className,{"animate-[tooltipExit_0.25s_ease-in-out]":fadeOut},{"animate-[tooltipEntry_0.25s_ease-in-out]":!fadeOut})},React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
package/core/Tooltip.js.map
CHANGED
|
@@ -1 +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\";\n\ntype TooltipProps = {\n triggerElement?: ReactNode;\n triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n tooltipProps?: HTMLAttributes<HTMLDivElement>;\n interactive?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n children,\n triggerElement,\n triggerProps,\n tooltipProps,\n interactive = false,\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={`inline-flex ml-8 ${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={`p-0 relative focus:outline-none h-[1rem] ${\n triggerProps?.className ?? \"\"\n }`}\n >\n {triggerElement ?? (\n <Icon\n name=\"icon-gui-information-circle-micro\"\n color=\"text-neutral-800 dark:text-neutral-500\"\n size=\"1rem\"\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={`bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16 ${interactive ? \"\" : \"pointer-events-none\"} rounded-lg absolute ${\n tooltipProps?.className ?? \"\"\n } ${fadeOut ? \"animate-[tooltipExit_0.25s_ease-in-out]\" : \"animate-[tooltipEntry_0.25s_ease-in-out]\"}`}\n >\n <div className=\"max-w-[240px] 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","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","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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"}
|
|
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\";\n\ntype TooltipProps = {\n triggerElement?: ReactNode;\n triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n tooltipProps?: HTMLAttributes<HTMLDivElement>;\n interactive?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n children,\n triggerElement,\n triggerProps,\n tooltipProps,\n interactive = false,\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-8\", 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={`p-0 relative focus:outline-none h-[1rem] ${\n triggerProps?.className ?? \"\"\n }`}\n >\n {triggerElement ?? (\n <Icon\n name=\"icon-gui-information-circle-micro\"\n color=\"text-neutral-800 dark:text-neutral-500\"\n size=\"1rem\"\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-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16\",\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-[240px] 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","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,CAS5B,MAAMC,QAAU,CAAC,CACfC,QAAQ,CACRC,cAAc,CACdC,YAAY,CACZC,YAAY,CACZC,YAAc,KAAK,CACnB,GAAGC,KAC6B,IAChC,KAAM,CAACC,KAAMC,QAAQ,CAAGb,SAAS,OACjC,KAAM,CAACc,QAASC,WAAW,CAAGf,SAAS,OACvC,KAAM,CAACgB,SAAUC,YAAY,CAAGjB,SAAS,CAAEkB,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,GAC1E,MAAMC,OAAS,EACf,MAAMC,UAAYvB,OAA0B,MAC5C,MAAMwB,SAAWxB,OAAuB,MACxC,MAAMyB,kBAAoBzB,OAA8B,MAExDE,UAAU,KACR,GAAIW,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,UAAWhD,GAAG,mBAAoBO,MAAMyC,WAAa,KAClE,oBAACC,UACCC,aAAc,IAAMzC,QAAQ,MAC5B0C,aAAc,AAACV,QACb,GAAI,CAACnC,aAAe,CAACkC,qBAAqBC,MAAOvB,WAAY,CAC3DoB,iBACF,CACF,EACAc,KAAK,SACLV,IAAKxB,UACLmC,mBAAiB,UAChB,GAAGjD,YAAY,CAChB4C,UAAW,CAAC,yCAAyC,EACnD5C,cAAc4C,WAAa,GAC5B,CAAC,EAED7C,gBACC,oBAACJ,MACCuD,KAAK,oCACLC,MAAM,yCACNC,KAAK,UAKVhD,KACGV,aACE,oBAACiD,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,GAAGvD,YAAY,CAChB2C,UAAWhD,GACT,0GACA,CAAE,sBAAuB,CAACM,WAAY,EACtC,sBACAD,cAAc2C,UACd,CAAE,0CAA2CtC,OAAQ,EACrD,CAAE,2CAA4C,CAACA,OAAQ,IAGzD,oBAACqC,OAAIC,UAAU,wBAAwB9C,WAEzC2D,SAASC,IAAI,EAEf,KAGV,CAEA,gBAAe7D,OAAQ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.2-dev.6ebc59a3",
|
|
4
4
|
"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.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|