@ably/ui 17.6.3 → 17.6.4

package/core/Badge.js

@@ -1,2 +1,2 @@
-import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,children,disabled=false,focusable=false,hoverable=false,iconSize="12px",ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:iconSize,color:colorClass}):null)};export default Badge;
+import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize="12px",ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:iconSize,color:colorClass}):null)};export default Badge;
 //# sourceMappingURL=Badge.js.map

package/core/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\ninterface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. Defaults to 12px.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n}\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize = \"12px\",\n  ariaLabel,\n}) => {\n  const sizeClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n        return \"px-2 py-0 text-[10px] leading-tight\";\n      case \"sm\":\n        return \"px-2 py-0.5 text-[10px] leading-tight\";\n      case \"md\":\n        return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n      case \"lg\":\n        return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n    }\n  }, [size]);\n\n  const childClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n      case \"sm\":\n        return \"leading-[18px]\";\n      case \"md\":\n      case \"lg\":\n        return \"leading-[20px]\";\n    }\n  }, [size]);\n\n  const colorClass = useMemo(() => {\n    switch (color) {\n      case \"neutral\":\n        return \"text-neutral-900 dark:text-neutral-400\";\n      case \"violet\":\n        return \"text-violet-400\";\n      case \"orange\":\n        return \"text-orange-600\";\n      case \"yellow\":\n        return \"text-yellow-600\";\n      case \"green\":\n        return \"text-green-600\";\n      case \"blue\":\n        return \"text-blue-600\";\n      case \"pink\":\n        return \"text-pink-600\";\n      case \"red\":\n        return \"text-orange-700\";\n    }\n  }, [color]);\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n        sizeClass,\n        colorClass,\n        { \"focus-base\": focusable },\n        {\n          \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n            hoverable,\n        },\n        {\n          \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={iconSize} color={colorClass} />\n      ) : null}\n      <span className={cn(\"whitespace-nowrap tracking-[0.04em]\", childClass)}>\n        {children}\n      </span>\n      {iconAfter ? (\n        <Icon name={iconAfter} size={iconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","Badge","size","color","iconBefore","iconAfter","className","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","div","tabIndex","undefined","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA0D5B,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,SAAW,MAAM,CACjBC,SAAS,CACV,IACC,MAAMC,UAAYf,QAAQ,KACxB,OAAQI,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMY,WAAahB,QAAQ,KACzB,OAAQI,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAajB,QAAQ,KACzB,OAAQK,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,OACE,oBAACa,OACCV,UAAWN,GACT,wIACAa,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAF,WAEFW,SAAUR,UAAY,EAAIS,UAC1BC,aAAYV,WAAaC,UAAYE,UAAYM,WAEhDd,WACC,oBAACL,MAAKqB,KAAMhB,WAAYF,KAAMS,SAAUR,MAAOY,aAC7C,KACJ,oBAACM,QAAKf,UAAWN,GAAG,sCAAuCc,aACxDP,UAEFF,UACC,oBAACN,MAAKqB,KAAMf,UAAWH,KAAMS,SAAUR,MAAOY,aAC5C,KAGV,CAEA,gBAAed,KAAM"}
+{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\ninterface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. Defaults to 12px.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n\n  /**\n   * Additional CSS class names to apply to the children of the badge.\n   */\n  childClassName?: string;\n}\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  childClassName,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize = \"12px\",\n  ariaLabel,\n}) => {\n  const sizeClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n        return \"px-2 py-0 text-[10px] leading-tight\";\n      case \"sm\":\n        return \"px-2 py-0.5 text-[10px] leading-tight\";\n      case \"md\":\n        return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n      case \"lg\":\n        return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n    }\n  }, [size]);\n\n  const childClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n      case \"sm\":\n        return \"leading-[18px]\";\n      case \"md\":\n      case \"lg\":\n        return \"leading-[20px]\";\n    }\n  }, [size]);\n\n  const colorClass = useMemo(() => {\n    switch (color) {\n      case \"neutral\":\n        return \"text-neutral-900 dark:text-neutral-400\";\n      case \"violet\":\n        return \"text-violet-400\";\n      case \"orange\":\n        return \"text-orange-600\";\n      case \"yellow\":\n        return \"text-yellow-600\";\n      case \"green\":\n        return \"text-green-600\";\n      case \"blue\":\n        return \"text-blue-600\";\n      case \"pink\":\n        return \"text-pink-600\";\n      case \"red\":\n        return \"text-orange-700\";\n    }\n  }, [color]);\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n        sizeClass,\n        colorClass,\n        { \"focus-base\": focusable },\n        {\n          \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n            hoverable,\n        },\n        {\n          \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={iconSize} color={colorClass} />\n      ) : null}\n      <span\n        className={cn(\n          \"whitespace-nowrap tracking-[0.04em]\",\n          childClass,\n          childClassName,\n        )}\n      >\n        {children}\n      </span>\n      {iconAfter ? (\n        <Icon name={iconAfter} size={iconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","div","tabIndex","undefined","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,SAAW,MAAM,CACjBC,SAAS,CACV,IACC,MAAMC,UAAYhB,QAAQ,KACxB,OAAQI,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAajB,QAAQ,KACzB,OAAQI,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAalB,QAAQ,KACzB,OAAQK,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,OACE,oBAACc,OACCX,UAAWN,GACT,wIACAc,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFY,SAAUR,UAAY,EAAIS,UAC1BC,aAAYV,WAAaC,UAAYE,UAAYM,WAEhDf,WACC,oBAACL,MAAKsB,KAAMjB,WAAYF,KAAMU,SAAUT,MAAOa,aAC7C,KACJ,oBAACM,QACChB,UAAWN,GACT,sCACAe,WACAR,iBAGDC,UAEFH,UACC,oBAACN,MAAKsB,KAAMhB,UAAWH,KAAMU,SAAUT,MAAOa,aAC5C,KAGV,CAEA,gBAAef,KAAM"}

package/core/Logo.js

@@ -1,2 +1,2 @@
-import React from"react";import Badge from"./Badge";import cn from"./utils/cn";import LogoAssetMonoStacked from"./images/logo/ably-logo-mono-stacked.svg";import LogoAssetMonoWhiteStacked from"./images/logo/ably-logo-mono-white-stacked.svg";import LogoAssetMonoWhite from"./images/logo/ably-logo-mono-white.svg";import LogoAssetMono from"./images/logo/ably-logo-mono.svg";import LogoAssetStacked from"./images/logo/ably-logo-stacked.svg";import LogoAssetWhiteStacked from"./images/logo/ably-logo-white-stacked.svg";import LogoAssetWhite from"./images/logo/ably-logo-white.svg";import LogoAsset from"./images/logo/ably-logo.svg";const Logo=({dataId,href="/",additionalImgAttrs,additionalLinkAttrs,theme="light",variant="default",orientation="default",logoUrl,logoAlt="Ably logo",badge})=>{const getLogoSrc=React.useCallback(()=>{if(logoUrl)return logoUrl;if(theme==="dark"){if(variant==="mono"){return orientation==="stacked"?LogoAssetMonoWhiteStacked:LogoAssetMonoWhite}else{return orientation==="stacked"?LogoAssetWhiteStacked:LogoAssetWhite}}else{if(variant==="mono"){return orientation==="stacked"?LogoAssetMonoStacked:LogoAssetMono}else{return orientation==="stacked"?LogoAssetStacked:LogoAsset}}},[logoUrl,theme,variant,orientation]);const logoSrc=getLogoSrc();return React.createElement("a",{href:href,"data-id":dataId,...additionalLinkAttrs,className:cn("flex items-center gap-2 justify-center",additionalLinkAttrs?.className)},React.createElement("img",{src:logoSrc,width:"96px",alt:logoAlt,...additionalImgAttrs}),badge&&React.createElement(Badge,{className:"uppercase h-8 bg-transparent dark:bg-transparent rounded border border-neutral-400 dark:border-neutral-900 text-lg p-2 font-semibold text-neutral-800 dark:text-neutral-500"},badge))};export default React.memo(Logo);
+import React from"react";import Badge from"./Badge";import cn from"./utils/cn";import LogoAssetMonoStacked from"./images/logo/ably-logo-mono-stacked.svg";import LogoAssetMonoWhiteStacked from"./images/logo/ably-logo-mono-white-stacked.svg";import LogoAssetMonoWhite from"./images/logo/ably-logo-mono-white.svg";import LogoAssetMono from"./images/logo/ably-logo-mono.svg";import LogoAssetStacked from"./images/logo/ably-logo-stacked.svg";import LogoAssetWhiteStacked from"./images/logo/ably-logo-white-stacked.svg";import LogoAssetWhite from"./images/logo/ably-logo-white.svg";import LogoAsset from"./images/logo/ably-logo.svg";const Logo=({dataId,href="/",additionalImgAttrs,additionalLinkAttrs,theme="light",variant="default",orientation="default",logoUrl,logoAlt="Ably logo",badge})=>{const getLogoSrc=React.useCallback(()=>{if(logoUrl)return logoUrl;if(theme==="dark"){if(variant==="mono"){return orientation==="stacked"?LogoAssetMonoWhiteStacked:LogoAssetMonoWhite}else{return orientation==="stacked"?LogoAssetWhiteStacked:LogoAssetWhite}}else{if(variant==="mono"){return orientation==="stacked"?LogoAssetMonoStacked:LogoAssetMono}else{return orientation==="stacked"?LogoAssetStacked:LogoAsset}}},[logoUrl,theme,variant,orientation]);const logoSrc=getLogoSrc();return React.createElement("a",{href:href,"data-id":dataId,...additionalLinkAttrs,className:cn("flex items-center gap-2 justify-center",additionalLinkAttrs?.className)},React.createElement("img",{src:logoSrc,width:"96px",alt:logoAlt,...additionalImgAttrs}),badge&&React.createElement(Badge,{className:"uppercase h-[25px] px-1.5 py-[3px] bg-transparent mt-[2px] dark:bg-transparent rounded-[4px] border border-neutral-400 dark:border-neutral-900 text-sm font-semibold text-neutral-800 dark:text-neutral-500",childClassName:"tracking-[0.01em]"},badge))};export default React.memo(Logo);
 //# sourceMappingURL=Logo.js.map

package/core/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Logo.tsx"],"sourcesContent":["import React, { AnchorHTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport Badge from \"./Badge\";\nimport cn from \"./utils/cn\";\nimport LogoAssetMonoStacked from \"./images/logo/ably-logo-mono-stacked.svg\";\nimport LogoAssetMonoWhiteStacked from \"./images/logo/ably-logo-mono-white-stacked.svg\";\nimport LogoAssetMonoWhite from \"./images/logo/ably-logo-mono-white.svg\";\nimport LogoAssetMono from \"./images/logo/ably-logo-mono.svg\";\nimport LogoAssetStacked from \"./images/logo/ably-logo-stacked.svg\";\nimport LogoAssetWhiteStacked from \"./images/logo/ably-logo-white-stacked.svg\";\nimport LogoAssetWhite from \"./images/logo/ably-logo-white.svg\";\nimport LogoAsset from \"./images/logo/ably-logo.svg\";\n\ntype LogoProps = {\n  dataId?: string;\n  logoUrl?: string;\n  logoAlt?: string;\n  href?: string;\n  additionalImgAttrs?: ImgHTMLAttributes<HTMLImageElement>;\n  additionalLinkAttrs?: AnchorHTMLAttributes<HTMLAnchorElement>;\n  theme?: \"light\" | \"dark\";\n  variant?: \"default\" | \"mono\";\n  orientation?: \"default\" | \"stacked\";\n  badge?: string;\n};\n\nconst Logo = ({\n  dataId,\n  href = \"/\",\n  additionalImgAttrs,\n  additionalLinkAttrs,\n  theme = \"light\",\n  variant = \"default\",\n  orientation = \"default\",\n  logoUrl,\n  logoAlt = \"Ably logo\",\n  badge,\n}: LogoProps) => {\n  const getLogoSrc = React.useCallback(() => {\n    if (logoUrl) return logoUrl;\n\n    if (theme === \"dark\") {\n      if (variant === \"mono\") {\n        return orientation === \"stacked\"\n          ? LogoAssetMonoWhiteStacked\n          : LogoAssetMonoWhite;\n      } else {\n        return orientation === \"stacked\"\n          ? LogoAssetWhiteStacked\n          : LogoAssetWhite;\n      }\n    } else {\n      if (variant === \"mono\") {\n        return orientation === \"stacked\" ? LogoAssetMonoStacked : LogoAssetMono;\n      } else {\n        return orientation === \"stacked\" ? LogoAssetStacked : LogoAsset;\n      }\n    }\n  }, [logoUrl, theme, variant, orientation]);\n\n  const logoSrc = getLogoSrc();\n\n  return (\n    <a\n      href={href}\n      data-id={dataId}\n      {...additionalLinkAttrs}\n      className={cn(\n        \"flex items-center gap-2 justify-center\",\n        additionalLinkAttrs?.className,\n      )}\n    >\n      <img src={logoSrc} width=\"96px\" alt={logoAlt} {...additionalImgAttrs} />\n      {badge && (\n        <Badge className=\"uppercase h-8 bg-transparent dark:bg-transparent rounded border border-neutral-400 dark:border-neutral-900 text-lg p-2 font-semibold text-neutral-800 dark:text-neutral-500\">\n          {badge}\n        </Badge>\n      )}\n    </a>\n  );\n};\n\nexport default React.memo(Logo);\n"],"names":["React","Badge","cn","LogoAssetMonoStacked","LogoAssetMonoWhiteStacked","LogoAssetMonoWhite","LogoAssetMono","LogoAssetStacked","LogoAssetWhiteStacked","LogoAssetWhite","LogoAsset","Logo","dataId","href","additionalImgAttrs","additionalLinkAttrs","theme","variant","orientation","logoUrl","logoAlt","badge","getLogoSrc","useCallback","logoSrc","a","data-id","className","img","src","width","alt","memo"],"mappings":"AAAA,OAAOA,UAAwD,OAAQ,AACvE,QAAOC,UAAW,SAAU,AAC5B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,yBAA0B,0CAA2C,AAC5E,QAAOC,8BAA+B,gDAAiD,AACvF,QAAOC,uBAAwB,wCAAyC,AACxE,QAAOC,kBAAmB,kCAAmC,AAC7D,QAAOC,qBAAsB,qCAAsC,AACnE,QAAOC,0BAA2B,2CAA4C,AAC9E,QAAOC,mBAAoB,mCAAoC,AAC/D,QAAOC,cAAe,6BAA8B,CAepD,MAAMC,KAAO,CAAC,CACZC,MAAM,CACNC,KAAO,GAAG,CACVC,kBAAkB,CAClBC,mBAAmB,CACnBC,MAAQ,OAAO,CACfC,QAAU,SAAS,CACnBC,YAAc,SAAS,CACvBC,OAAO,CACPC,QAAU,WAAW,CACrBC,KAAK,CACK,IACV,MAAMC,WAAatB,MAAMuB,WAAW,CAAC,KACnC,GAAIJ,QAAS,OAAOA,QAEpB,GAAIH,QAAU,OAAQ,CACpB,GAAIC,UAAY,OAAQ,CACtB,OAAOC,cAAgB,UACnBd,0BACAC,kBACN,KAAO,CACL,OAAOa,cAAgB,UACnBV,sBACAC,cACN,CACF,KAAO,CACL,GAAIQ,UAAY,OAAQ,CACtB,OAAOC,cAAgB,UAAYf,qBAAuBG,aAC5D,KAAO,CACL,OAAOY,cAAgB,UAAYX,iBAAmBG,SACxD,CACF,CACF,EAAG,CAACS,QAASH,MAAOC,QAASC,YAAY,EAEzC,MAAMM,QAAUF,aAEhB,OACE,oBAACG,KACCZ,KAAMA,KACNa,UAASd,OACR,GAAGG,mBAAmB,CACvBY,UAAWzB,GACT,yCACAa,qBAAqBY,YAGvB,oBAACC,OAAIC,IAAKL,QAASM,MAAM,OAAOC,IAAKX,QAAU,GAAGN,kBAAkB,GACnEO,OACC,oBAACpB,OAAM0B,UAAU,+KACdN,OAKX,CAEA,gBAAerB,MAAMgC,IAAI,CAACrB,KAAM"}
+{"version":3,"sources":["../../src/core/Logo.tsx"],"sourcesContent":["import React, { AnchorHTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport Badge from \"./Badge\";\nimport cn from \"./utils/cn\";\nimport LogoAssetMonoStacked from \"./images/logo/ably-logo-mono-stacked.svg\";\nimport LogoAssetMonoWhiteStacked from \"./images/logo/ably-logo-mono-white-stacked.svg\";\nimport LogoAssetMonoWhite from \"./images/logo/ably-logo-mono-white.svg\";\nimport LogoAssetMono from \"./images/logo/ably-logo-mono.svg\";\nimport LogoAssetStacked from \"./images/logo/ably-logo-stacked.svg\";\nimport LogoAssetWhiteStacked from \"./images/logo/ably-logo-white-stacked.svg\";\nimport LogoAssetWhite from \"./images/logo/ably-logo-white.svg\";\nimport LogoAsset from \"./images/logo/ably-logo.svg\";\n\ntype LogoProps = {\n  dataId?: string;\n  logoUrl?: string;\n  logoAlt?: string;\n  href?: string;\n  additionalImgAttrs?: ImgHTMLAttributes<HTMLImageElement>;\n  additionalLinkAttrs?: AnchorHTMLAttributes<HTMLAnchorElement>;\n  theme?: \"light\" | \"dark\";\n  variant?: \"default\" | \"mono\";\n  orientation?: \"default\" | \"stacked\";\n  badge?: string;\n};\n\nconst Logo = ({\n  dataId,\n  href = \"/\",\n  additionalImgAttrs,\n  additionalLinkAttrs,\n  theme = \"light\",\n  variant = \"default\",\n  orientation = \"default\",\n  logoUrl,\n  logoAlt = \"Ably logo\",\n  badge,\n}: LogoProps) => {\n  const getLogoSrc = React.useCallback(() => {\n    if (logoUrl) return logoUrl;\n\n    if (theme === \"dark\") {\n      if (variant === \"mono\") {\n        return orientation === \"stacked\"\n          ? LogoAssetMonoWhiteStacked\n          : LogoAssetMonoWhite;\n      } else {\n        return orientation === \"stacked\"\n          ? LogoAssetWhiteStacked\n          : LogoAssetWhite;\n      }\n    } else {\n      if (variant === \"mono\") {\n        return orientation === \"stacked\" ? LogoAssetMonoStacked : LogoAssetMono;\n      } else {\n        return orientation === \"stacked\" ? LogoAssetStacked : LogoAsset;\n      }\n    }\n  }, [logoUrl, theme, variant, orientation]);\n\n  const logoSrc = getLogoSrc();\n\n  return (\n    <a\n      href={href}\n      data-id={dataId}\n      {...additionalLinkAttrs}\n      className={cn(\n        \"flex items-center gap-2 justify-center\",\n        additionalLinkAttrs?.className,\n      )}\n    >\n      <img src={logoSrc} width=\"96px\" alt={logoAlt} {...additionalImgAttrs} />\n      {badge && (\n        <Badge\n          className=\"uppercase h-[25px] px-1.5 py-[3px] bg-transparent mt-[2px] dark:bg-transparent rounded-[4px] border border-neutral-400 dark:border-neutral-900 text-sm font-semibold text-neutral-800 dark:text-neutral-500\"\n          childClassName=\"tracking-[0.01em]\"\n        >\n          {badge}\n        </Badge>\n      )}\n    </a>\n  );\n};\n\nexport default React.memo(Logo);\n"],"names":["React","Badge","cn","LogoAssetMonoStacked","LogoAssetMonoWhiteStacked","LogoAssetMonoWhite","LogoAssetMono","LogoAssetStacked","LogoAssetWhiteStacked","LogoAssetWhite","LogoAsset","Logo","dataId","href","additionalImgAttrs","additionalLinkAttrs","theme","variant","orientation","logoUrl","logoAlt","badge","getLogoSrc","useCallback","logoSrc","a","data-id","className","img","src","width","alt","childClassName","memo"],"mappings":"AAAA,OAAOA,UAAwD,OAAQ,AACvE,QAAOC,UAAW,SAAU,AAC5B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,yBAA0B,0CAA2C,AAC5E,QAAOC,8BAA+B,gDAAiD,AACvF,QAAOC,uBAAwB,wCAAyC,AACxE,QAAOC,kBAAmB,kCAAmC,AAC7D,QAAOC,qBAAsB,qCAAsC,AACnE,QAAOC,0BAA2B,2CAA4C,AAC9E,QAAOC,mBAAoB,mCAAoC,AAC/D,QAAOC,cAAe,6BAA8B,CAepD,MAAMC,KAAO,CAAC,CACZC,MAAM,CACNC,KAAO,GAAG,CACVC,kBAAkB,CAClBC,mBAAmB,CACnBC,MAAQ,OAAO,CACfC,QAAU,SAAS,CACnBC,YAAc,SAAS,CACvBC,OAAO,CACPC,QAAU,WAAW,CACrBC,KAAK,CACK,IACV,MAAMC,WAAatB,MAAMuB,WAAW,CAAC,KACnC,GAAIJ,QAAS,OAAOA,QAEpB,GAAIH,QAAU,OAAQ,CACpB,GAAIC,UAAY,OAAQ,CACtB,OAAOC,cAAgB,UACnBd,0BACAC,kBACN,KAAO,CACL,OAAOa,cAAgB,UACnBV,sBACAC,cACN,CACF,KAAO,CACL,GAAIQ,UAAY,OAAQ,CACtB,OAAOC,cAAgB,UAAYf,qBAAuBG,aAC5D,KAAO,CACL,OAAOY,cAAgB,UAAYX,iBAAmBG,SACxD,CACF,CACF,EAAG,CAACS,QAASH,MAAOC,QAASC,YAAY,EAEzC,MAAMM,QAAUF,aAEhB,OACE,oBAACG,KACCZ,KAAMA,KACNa,UAASd,OACR,GAAGG,mBAAmB,CACvBY,UAAWzB,GACT,yCACAa,qBAAqBY,YAGvB,oBAACC,OAAIC,IAAKL,QAASM,MAAM,OAAOC,IAAKX,QAAU,GAAGN,kBAAkB,GACnEO,OACC,oBAACpB,OACC0B,UAAU,8MACVK,eAAe,qBAEdX,OAKX,CAEA,gBAAerB,MAAMiC,IAAI,CAACtB,KAAM"}

package/index.d.ts

@@ -237,6 +237,10 @@ interface BadgeProps {
      * Accessible label for the badge when interactive
      */
     ariaLabel?: string;
+    /**
+     * Additional CSS class names to apply to the children of the badge.
+     */
+    childClassName?: string;
 }
 const Badge: React.FC<PropsWithChildren<BadgeProps>>;
 export default Badge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.6.3",
+  "version": "17.6.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.",
   "repository": {
     "type": "git",