@ably/ui 16.1.4 → 16.1.5-dev.4787512a

package/core/ProductTile/ProductDescription.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true})=>{if(!description||!showDescription){return null}return React.createElement("span",{className:cn("block ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected})},description)};export default ProductDescription;
+import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true,className})=>{if(!description||!showDescription){return null}return React.createElement("span",{className:cn("block ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected},className)},description)};export default ProductDescription;
 //# sourceMappingURL=ProductDescription.js.map

package/core/ProductTile/ProductDescription.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n  description: string;\n  selected?: boolean;\n  unavailable: boolean;\n  showDescription?: boolean;\n};\n\nconst ProductDescription = ({\n  description,\n  selected,\n  unavailable,\n  showDescription = true,\n}: ProductDescriptionProps) => {\n  if (!description || !showDescription) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cn(\n        \"block ui-text-p3 font-medium leading-snug\",\n        {\n          \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n        },\n        {\n          \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n            !selected,\n        },\n      )}\n    >\n      {description}\n    </span>\n  );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","span","className"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAS7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACE,IACxB,GAAI,CAACH,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACC,QACCC,UAAWP,GACT,4CACA,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,IAGDD,YAGP,CAEA,gBAAeD,kBAAmB"}
+{"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n  description: string;\n  selected?: boolean;\n  unavailable: boolean;\n  showDescription?: boolean;\n  className?: string;\n};\n\nconst ProductDescription = ({\n  description,\n  selected,\n  unavailable,\n  showDescription = true,\n  className,\n}: ProductDescriptionProps) => {\n  if (!description || !showDescription) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cn(\n        \"block ui-text-p3 font-medium leading-snug\",\n        {\n          \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n        },\n        {\n          \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n            !selected,\n        },\n        className,\n      )}\n    >\n      {description}\n    </span>\n  );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","className","span"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,SAAS,CACe,IACxB,GAAI,CAACJ,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACE,QACCD,UAAWN,GACT,4CACA,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,EACAG,YAGDJ,YAGP,CAEA,gBAAeD,kBAAmB"}

package/core/ProductTile/ProductLabel.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable}),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
+import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel,className})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable},className),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
 //# sourceMappingURL=ProductLabel.js.map

package/core/ProductTile/ProductLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n  label: string;\n  unavailable: boolean;\n  selected?: boolean;\n  numericalSize: number;\n  showLabel?: boolean;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n  label,\n  unavailable,\n  selected,\n  numericalSize,\n  showLabel,\n}: ProductLabelProps) => {\n  if (!label || !showLabel) {\n    return null;\n  }\n\n  const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n  return (\n    <span className=\"flex flex-col justify-center\">\n      {unavailable ? (\n        <span className=\"block\">\n          <span\n            className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug\"\n            style={{\n              fontSize: dynamicFontSize * 0.6,\n              padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n            }}\n          >\n            COMING SOON\n          </span>\n        </span>\n      ) : (\n        <span\n          className={cn(\n            \"block font-bold uppercase ui-text-p2 leading-snug\",\n            { \"text-neutral-500 dark:text-neutral-700\": selected },\n            { \"text-neutral-700 dark:text-neutral-500\": !selected },\n          )}\n          style={{\n            fontSize: dynamicFontSize,\n            letterSpacing: \"0.06em\",\n          }}\n        >\n          Ably\n        </span>\n      )}\n      <span\n        className={cn(\n          \"block ui-text-p2 font-bold\",\n          {\n            \"text-neutral-000 dark:text-neutral-1300\":\n              selected === true && !unavailable,\n          },\n          {\n            \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n              selected === false && !unavailable,\n          },\n          {\n            \"text-neutral-1300 dark:text-neutral-000\":\n              selected === undefined && !unavailable,\n          },\n          {\n            \"text-neutral-700 dark:text-neutral-600\": unavailable,\n          },\n          { \"mt-[-3px]\": !unavailable },\n        )}\n        style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n      >\n        {label}\n      </span>\n    </span>\n  );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","dynamicFontSize","span","className","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACS,IAClB,GAAI,CAACJ,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMC,gBAAkBF,cAAgBN,sBAExC,OACE,oBAACS,QAAKC,UAAU,gCACbN,YACC,oBAACK,QAAKC,UAAU,SACd,oBAACD,QACCC,UAAU,wIACVC,MAAO,CACLC,SAAUJ,gBAAkB,GAC5BK,QAAS,CAAC,EAAEL,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCC,UAAWX,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUJ,gBACVM,cAAe,QACjB,GACD,QAIH,oBAACL,QACCC,UAAWX,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,GAE9BO,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}
+{"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n  label: string;\n  unavailable: boolean;\n  selected?: boolean;\n  numericalSize: number;\n  showLabel?: boolean;\n  className?: string;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n  label,\n  unavailable,\n  selected,\n  numericalSize,\n  showLabel,\n  className,\n}: ProductLabelProps) => {\n  if (!label || !showLabel) {\n    return null;\n  }\n\n  const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n  return (\n    <span className=\"flex flex-col justify-center\">\n      {unavailable ? (\n        <span className=\"block\">\n          <span\n            className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug\"\n            style={{\n              fontSize: dynamicFontSize * 0.6,\n              padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n            }}\n          >\n            COMING SOON\n          </span>\n        </span>\n      ) : (\n        <span\n          className={cn(\n            \"block font-bold uppercase ui-text-p2 leading-snug\",\n            { \"text-neutral-500 dark:text-neutral-700\": selected },\n            { \"text-neutral-700 dark:text-neutral-500\": !selected },\n          )}\n          style={{\n            fontSize: dynamicFontSize,\n            letterSpacing: \"0.06em\",\n          }}\n        >\n          Ably\n        </span>\n      )}\n      <span\n        className={cn(\n          \"block ui-text-p2 font-bold\",\n          {\n            \"text-neutral-000 dark:text-neutral-1300\":\n              selected === true && !unavailable,\n          },\n          {\n            \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n              selected === false && !unavailable,\n          },\n          {\n            \"text-neutral-1300 dark:text-neutral-000\":\n              selected === undefined && !unavailable,\n          },\n          {\n            \"text-neutral-700 dark:text-neutral-600\": unavailable,\n          },\n          { \"mt-[-3px]\": !unavailable },\n          className,\n        )}\n        style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n      >\n        {label}\n      </span>\n    </span>\n  );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,SAAS,CACS,IAClB,GAAI,CAACL,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAME,gBAAkBH,cAAgBN,sBAExC,OACE,oBAACU,QAAKF,UAAU,gCACbJ,YACC,oBAACM,QAAKF,UAAU,SACd,oBAACE,QACCF,UAAU,wIACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCF,UAAWT,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAIH,oBAACJ,QACCF,UAAWT,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BI,WAEFG,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}

package/core/ProductTile.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";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 ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-12 rounded-lg gap-8":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-8 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";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 ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-12 rounded-lg gap-8":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-8 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
 //# sourceMappingURL=ProductTile.js.map

package/core/ProductTile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n  /**\n   * The name of the product.\n   */\n  name: ProductName;\n\n  /**\n   * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n   * @default false\n   */\n  currentPage?: boolean;\n\n  /**\n   * Additional CSS class names to apply to the product tile outer container.\n   */\n  className?: string;\n\n  /**\n   * Callback function to handle click events on the product tile.\n   */\n  onClick?: () => void;\n\n  /**\n   * Indicates if the product description should be shown.\n   * @default true\n   */\n  showDescription?: boolean;\n\n  /**\n   * Indicates if the product label should be shown.\n   * @default true\n   */\n  showLabel?: boolean;\n\n  /**\n   * The size of the product icon.\n   * @default \"40px\"\n   */\n  size?: IconSize;\n\n  /**\n   * Indicates if the product icons should be animated.\n   * @default false\n   */\n  animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n  name,\n  selected,\n  currentPage,\n  className,\n  onClick,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n}: ProductTileProps) => {\n  const { icon, hoverIcon, label, description, link, unavailable } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n  const containerPresent = showDescription || showLabel;\n\n  return (\n    <div\n      className={cn(\n        \"transition-colors group/product-tile\",\n        { \"flex flex-col p-12 rounded-lg gap-8\": containerPresent },\n        { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n        {\n          \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n        },\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n            selected === false && !unavailable,\n        },\n        { \"cursor-pointer\": selected !== undefined && !unavailable },\n        { \"pointer-events-none\": unavailable },\n        { [`${className}`]: className },\n      )}\n      aria-hidden={unavailable}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          \"items-center\",\n          { flex: containerPresent },\n          { \"inline-flex\": !containerPresent },\n        )}\n        style={{\n          gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          selected={selected}\n          unavailable={!!unavailable}\n        />\n        <ProductLabel\n          label={label}\n          selected={selected}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n        />\n      </div>\n      <ProductDescription\n        description={description}\n        selected={selected}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n      />\n      {selected && link ? (\n        <LinkButton\n          variant=\"secondary\"\n          size=\"xs\"\n          className=\"mt-8 !text-neutral-000 dark:!text-neutral-1300\"\n          rightIcon=\"icon-gui-arrow-right-micro\"\n          iconColor=\"text-orange-600\"\n          href={link}\n        >\n          {currentPage ? \"View docs\" : \"Explore\"}\n        </LinkButton>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CA0DlE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACH,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DpB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMe,cAAgBC,SAAST,KAAM,IACrC,MAAMU,iBAAmBZ,iBAAmBC,UAE5C,OACE,oBAACY,OACCf,UAAWX,GACT,uCACA,CAAE,sCAAuCyB,gBAAiB,EAC1D,CAAE,sCAAuChB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACa,WAC3B,EACA,CAAE,iBAAkBb,WAAakB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEX,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCiB,cAAaN,YACbV,QAASA,SAET,oBAACc,OACCf,UAAWX,GACT,eACA,CAAE6B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBjB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMQ,cACNf,KAAMS,KACNe,UAAWhB,aAAeE,UAAYS,UACtClB,SAAUA,SACVa,YAAa,CAAC,CAACA,cAEjB,oBAAClB,cACCe,MAAOA,MACPV,SAAUA,SACVa,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfT,UAAWA,aAGf,oBAACT,oBACCe,YAAaA,YACbX,SAAUA,SACVa,YAAa,CAAC,CAACA,YACfT,gBAAiBA,kBAElBJ,UAAYY,KACX,oBAACpB,YACCgC,QAAQ,YACRlB,KAAK,KACLJ,UAAU,iDACVuB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELX,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
+{"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n  /**\n   * The name of the product.\n   */\n  name: ProductName;\n\n  /**\n   * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n   * @default false\n   */\n  currentPage?: boolean;\n\n  /**\n   * Additional CSS class names to apply to the product tile outer container.\n   */\n  className?: string;\n\n  /**\n   * Additional CSS class names to apply to the product description container.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Additional CSS class names to apply to the product name / label container.\n   */\n  labelClassName?: string;\n\n  /**\n   * Callback function to handle click events on the product tile.\n   */\n  onClick?: () => void;\n\n  /**\n   * Indicates if the product description should be shown.\n   * @default true\n   */\n  showDescription?: boolean;\n\n  /**\n   * Indicates if the product label should be shown.\n   * @default true\n   */\n  showLabel?: boolean;\n\n  /**\n   * The size of the product icon.\n   * @default \"40px\"\n   */\n  size?: IconSize;\n\n  /**\n   * Indicates if the product icons should be animated.\n   * @default false\n   */\n  animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n  name,\n  selected,\n  currentPage,\n  className,\n  onClick,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n  descriptionClassName,\n  labelClassName,\n}: ProductTileProps) => {\n  const { icon, hoverIcon, label, description, link, unavailable } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n  const containerPresent = showDescription || showLabel;\n\n  return (\n    <div\n      className={cn(\n        \"transition-colors group/product-tile\",\n        { \"flex flex-col p-12 rounded-lg gap-8\": containerPresent },\n        { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n        {\n          \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n        },\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n            selected === false && !unavailable,\n        },\n        { \"cursor-pointer\": selected !== undefined && !unavailable },\n        { \"pointer-events-none\": unavailable },\n        { [`${className}`]: className },\n      )}\n      aria-hidden={unavailable}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          \"items-center\",\n          { flex: containerPresent },\n          { \"inline-flex\": !containerPresent },\n        )}\n        style={{\n          gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          selected={selected}\n          unavailable={!!unavailable}\n        />\n        <ProductLabel\n          label={label}\n          selected={selected}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n          className={labelClassName}\n        />\n      </div>\n      <ProductDescription\n        description={description}\n        selected={selected}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n        className={descriptionClassName}\n      />\n      {selected && link ? (\n        <LinkButton\n          variant=\"secondary\"\n          size=\"xs\"\n          className=\"mt-8 !text-neutral-000 dark:!text-neutral-1300\"\n          rightIcon=\"icon-gui-arrow-right-micro\"\n          iconColor=\"text-orange-600\"\n          href={link}\n        >\n          {currentPage ? \"View docs\" : \"Explore\"}\n        </LinkButton>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,sCAAuC2B,gBAAiB,EAC1D,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,SAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}

package/core/remote-session-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
+{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GA0BiB,MA1BsB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}

package/index.d.ts

@@ -1009,8 +1009,9 @@ type ProductDescriptionProps = {
     selected?: boolean;
     unavailable: boolean;
     showDescription?: boolean;
+    className?: string;
 };
-const ProductDescription: ({ description, selected, unavailable, showDescription, }: ProductDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+const ProductDescription: ({ description, selected, unavailable, showDescription, className, }: ProductDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ProductDescription;
 //# sourceMappingURL=ProductDescription.d.ts.map
 }
@@ -1036,8 +1037,9 @@ type ProductLabelProps = {
     selected?: boolean;
     numericalSize: number;
     showLabel?: boolean;
+    className?: string;
 };
-const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, className, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ProductLabel;
 //# sourceMappingURL=ProductLabel.d.ts.map
 }
@@ -1084,6 +1086,14 @@ export type ProductTileProps = {
      * Additional CSS class names to apply to the product tile outer container.
      */
     className?: string;
+    /**
+     * Additional CSS class names to apply to the product description container.
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS class names to apply to the product name / label container.
+     */
+    labelClassName?: string;
     /**
      * Callback function to handle click events on the product tile.
      */
@@ -1109,7 +1119,7 @@ export type ProductTileProps = {
      */
     animateIcons?: boolean;
 };
-const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, descriptionClassName, labelClassName, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.1.4",
+  "version": "16.1.5-dev.4787512a",
   "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",
@@ -46,7 +46,7 @@
     "http-server": "14.1.1",
     "jsdom": "^26.0.0",
     "mixpanel-browser": "^2.60.0",
-    "msw": "2.7.3",
+    "msw": "2.7.5",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
     "posthog-js": "^1.217.4",