@ably/ui 17.3.0-dev.a6f974a8 → 17.3.0

package/README.md

@@ -122,13 +122,13 @@ import Meganav from "@ably/ui/core/Meganav";
 
 ### Icons
 
-The icon system supports two approaches: **local custom icons** and **heroicons integration** with automatic fallback.
+We have access to two sets of icons via the `Icon` component, custom local assets hosted in the repo itself, and the third-party Heroicons library.
 
 #### Local Custom Icons
 
-Putting SVG files inside a `src/MODULE_NAME/icons` folder will:
+Putting SVG files inside a `src/core/icons` folder will:
 
-1. Add them to a per-module sprites file (e.g., `core/sprites.svg`) for backward compatibility
+1. Add them to a per-group sprites file (e.g., `core/sprites-gui.svg`) for backward compatibility
 2. Generate React components that can be imported dynamically
 
 The sprites file can be loaded with the `loadSprites` helper available in the `core` module or included in the page directly.

package/core/Icon/utils.js

@@ -1,2 +1,2 @@
-import*as OutlineIcons from"@heroicons/react/24/outline";import*as SolidIcons from"@heroicons/react/24/solid";import*as MiniIcons from"@heroicons/react/20/solid";import*as MicroIcons from"@heroicons/react/16/solid";export const defaultIconSecondaryColor=name=>{const colorLookup={"icon-gui-check-circled-fill":"text-white"};return colorLookup[name]};export const toPascalCase=str=>{return str.split("-").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join("")};export const getHeroicon=(iconName,variant)=>{const componentName=`${iconName}Icon`;try{let iconModule;switch(variant){case"outline":iconModule=OutlineIcons;break;case"solid":iconModule=SolidIcons;break;case"mini":iconModule=MiniIcons;break;case"micro":iconModule=MicroIcons;break;default:return null}const component=iconModule[componentName];return component||null}catch(error){console.error("Error getting heroicon:",error,componentName);return null}};
+import*as OutlineIcons from"@heroicons/react/24/outline";import*as SolidIcons from"@heroicons/react/24/solid";import*as MiniIcons from"@heroicons/react/20/solid";import*as MicroIcons from"@heroicons/react/16/solid";export const defaultIconSecondaryColor=name=>{const colorLookup={"icon-gui-check-circled-fill":"text-white"};return colorLookup[name]};export const toPascalCase=str=>{return str.split("-").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join("")};export const getHeroicon=(iconName,variant)=>{const componentName=`${toPascalCase(iconName)}Icon`;try{let iconModule;switch(variant){case"outline":iconModule=OutlineIcons;break;case"solid":iconModule=SolidIcons;break;case"mini":iconModule=MiniIcons;break;case"micro":iconModule=MicroIcons;break;default:return null}const component=iconModule[componentName];return component||null}catch(error){console.error("Error getting heroicon:",error,componentName);return null}};
 //# sourceMappingURL=utils.js.map

package/core/Icon/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Icon/utils.ts"],"sourcesContent":["import { ColorClass } from \"../styles/colors/types\";\nimport { IconName } from \"./types\";\n\n// Import entire heroicon category modules\nimport * as OutlineIcons from \"@heroicons/react/24/outline\";\nimport * as SolidIcons from \"@heroicons/react/24/solid\";\nimport * as MiniIcons from \"@heroicons/react/20/solid\";\nimport * as MicroIcons from \"@heroicons/react/16/solid\";\n\ntype HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;\n\nexport const defaultIconSecondaryColor = (name: IconName) => {\n  const colorLookup = {\n    \"icon-gui-check-circled-fill\": \"text-white\",\n  } as Record<string, ColorClass>;\n\n  return colorLookup[name];\n};\n\n// Helper function to convert kebab-case to PascalCase for heroicons\nexport const toPascalCase = (str: string): string => {\n  return str\n    .split(\"-\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\"\");\n};\n\n// Helper function to get a heroicon component by name and variant\nexport const getHeroicon = (\n  iconName: string,\n  variant: string,\n): HeroiconComponent | null => {\n  const componentName = `${iconName}Icon`;\n\n  try {\n    let iconModule: Record<string, HeroiconComponent>;\n\n    switch (variant) {\n      case \"outline\":\n        iconModule = OutlineIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"solid\":\n        iconModule = SolidIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"mini\":\n        iconModule = MiniIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"micro\":\n        iconModule = MicroIcons as Record<string, HeroiconComponent>;\n        break;\n      default:\n        return null;\n    }\n\n    // Access the component from the module\n    const component = iconModule[componentName];\n    return component || null;\n  } catch (error) {\n    console.error(\"Error getting heroicon:\", error, componentName);\n    return null;\n  }\n};\n"],"names":["OutlineIcons","SolidIcons","MiniIcons","MicroIcons","defaultIconSecondaryColor","name","colorLookup","toPascalCase","str","split","map","word","charAt","toUpperCase","slice","join","getHeroicon","iconName","variant","componentName","iconModule","component","error","console"],"mappings":"AAIA,UAAYA,iBAAkB,6BAA8B,AAC5D,WAAYC,eAAgB,2BAA4B,AACxD,WAAYC,cAAe,2BAA4B,AACvD,WAAYC,eAAgB,2BAA4B,AAIxD,QAAO,MAAMC,0BAA4B,AAACC,OACxC,MAAMC,YAAc,CAClB,8BAA+B,YACjC,EAEA,OAAOA,WAAW,CAACD,KAAK,AAC1B,CAAE,AAGF,QAAO,MAAME,aAAe,AAACC,MAC3B,OAAOA,IACJC,KAAK,CAAC,KACNC,GAAG,CAAC,AAACC,MAASA,KAAKC,MAAM,CAAC,GAAGC,WAAW,GAAKF,KAAKG,KAAK,CAAC,IACxDC,IAAI,CAAC,GACV,CAAE,AAGF,QAAO,MAAMC,YAAc,CACzBC,SACAC,WAEA,MAAMC,cAAgB,CAAC,EAAEF,SAAS,IAAI,CAAC,CAEvC,GAAI,CACF,IAAIG,WAEJ,OAAQF,SACN,IAAK,UACHE,WAAapB,aACb,KACF,KAAK,QACHoB,WAAanB,WACb,KACF,KAAK,OACHmB,WAAalB,UACb,KACF,KAAK,QACHkB,WAAajB,WACb,KACF,SACE,OAAO,IACX,CAGA,MAAMkB,UAAYD,UAAU,CAACD,cAAc,CAC3C,OAAOE,WAAa,IACtB,CAAE,MAAOC,MAAO,CACdC,QAAQD,KAAK,CAAC,0BAA2BA,MAAOH,eAChD,OAAO,IACT,CACF,CAAE"}
+{"version":3,"sources":["../../../src/core/Icon/utils.ts"],"sourcesContent":["import { ColorClass } from \"../styles/colors/types\";\nimport { IconName } from \"./types\";\n\n// Import entire heroicon category modules\nimport * as OutlineIcons from \"@heroicons/react/24/outline\";\nimport * as SolidIcons from \"@heroicons/react/24/solid\";\nimport * as MiniIcons from \"@heroicons/react/20/solid\";\nimport * as MicroIcons from \"@heroicons/react/16/solid\";\n\ntype HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;\n\nexport const defaultIconSecondaryColor = (name: IconName) => {\n  const colorLookup = {\n    \"icon-gui-check-circled-fill\": \"text-white\",\n  } as Record<string, ColorClass>;\n\n  return colorLookup[name];\n};\n\n// Helper function to convert kebab-case to PascalCase for heroicons\nexport const toPascalCase = (str: string): string => {\n  return str\n    .split(\"-\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\"\");\n};\n\n// Helper function to get a heroicon component by name and variant\nexport const getHeroicon = (\n  iconName: string,\n  variant: string,\n): HeroiconComponent | null => {\n  const componentName = `${toPascalCase(iconName)}Icon`;\n\n  try {\n    let iconModule: Record<string, HeroiconComponent>;\n\n    switch (variant) {\n      case \"outline\":\n        iconModule = OutlineIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"solid\":\n        iconModule = SolidIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"mini\":\n        iconModule = MiniIcons as Record<string, HeroiconComponent>;\n        break;\n      case \"micro\":\n        iconModule = MicroIcons as Record<string, HeroiconComponent>;\n        break;\n      default:\n        return null;\n    }\n\n    // Access the component from the module\n    const component = iconModule[componentName];\n    return component || null;\n  } catch (error) {\n    console.error(\"Error getting heroicon:\", error, componentName);\n    return null;\n  }\n};\n"],"names":["OutlineIcons","SolidIcons","MiniIcons","MicroIcons","defaultIconSecondaryColor","name","colorLookup","toPascalCase","str","split","map","word","charAt","toUpperCase","slice","join","getHeroicon","iconName","variant","componentName","iconModule","component","error","console"],"mappings":"AAIA,UAAYA,iBAAkB,6BAA8B,AAC5D,WAAYC,eAAgB,2BAA4B,AACxD,WAAYC,cAAe,2BAA4B,AACvD,WAAYC,eAAgB,2BAA4B,AAIxD,QAAO,MAAMC,0BAA4B,AAACC,OACxC,MAAMC,YAAc,CAClB,8BAA+B,YACjC,EAEA,OAAOA,WAAW,CAACD,KAAK,AAC1B,CAAE,AAGF,QAAO,MAAME,aAAe,AAACC,MAC3B,OAAOA,IACJC,KAAK,CAAC,KACNC,GAAG,CAAC,AAACC,MAASA,KAAKC,MAAM,CAAC,GAAGC,WAAW,GAAKF,KAAKG,KAAK,CAAC,IACxDC,IAAI,CAAC,GACV,CAAE,AAGF,QAAO,MAAMC,YAAc,CACzBC,SACAC,WAEA,MAAMC,cAAgB,CAAC,EAAEZ,aAAaU,UAAU,IAAI,CAAC,CAErD,GAAI,CACF,IAAIG,WAEJ,OAAQF,SACN,IAAK,UACHE,WAAapB,aACb,KACF,KAAK,QACHoB,WAAanB,WACb,KACF,KAAK,OACHmB,WAAalB,UACb,KACF,KAAK,QACHkB,WAAajB,WACb,KACF,SACE,OAAO,IACX,CAGA,MAAMkB,UAAYD,UAAU,CAACD,cAAc,CAC3C,OAAOE,WAAa,IACtB,CAAE,MAAOC,MAAO,CACdC,QAAQD,KAAK,CAAC,0BAA2BA,MAAOH,eAChD,OAAO,IACT,CACF,CAAE"}

package/core/Icon.js

@@ -1,2 +1,2 @@
-import React,{useCallback,useMemo}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";import*as IconComponents from"./Icon/components";import{getHeroicon,toPascalCase}from"./Icon/utils";const getHeroiconComponent=iconName=>{const match=iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);if(!match){return null}const[,heroiconName,variant]=match;const componentName=toPascalCase(heroiconName);const component=getHeroicon(componentName,variant);return component};const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const LocalIconComponent=useMemo(()=>{return IconComponents[toPascalCase(iconName)]},[iconName]);const HeroiconComponent=useMemo(()=>{return LocalIconComponent?null:getHeroiconComponent(iconName)},[LocalIconComponent,iconName]);const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}const IconComponent=LocalIconComponent||HeroiconComponent;if(!IconComponent){return null}return React.createElement(IconComponent,{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes})},[LocalIconComponent,HeroiconComponent,iconName,size,color,additionalCSS,lightSecondaryColor,darkSecondaryColor,name]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
+import React,{useCallback,useMemo}from"react";import{defaultIconSecondaryColor,getHeroicon,toPascalCase}from"./Icon/utils";import*as IconComponents from"./Icon/components";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const getHeroiconComponent=iconName=>{const match=iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);if(!match){return null}const[,heroiconName,variant]=match;const component=getHeroicon(heroiconName,variant);return component};const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const LocalIconComponent=useMemo(()=>{return IconComponents[toPascalCase(iconName)]},[iconName]);const HeroiconComponent=useMemo(()=>{return LocalIconComponent?null:getHeroiconComponent(iconName)},[LocalIconComponent,iconName]);const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}const IconComponent=LocalIconComponent||HeroiconComponent;if(!IconComponent){return null}return React.createElement(IconComponent,{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes})},[LocalIconComponent,HeroiconComponent,iconName,size,color,additionalCSS,lightSecondaryColor,darkSecondaryColor,name]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
 //# sourceMappingURL=Icon.js.map

package/core/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback, useMemo } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\nimport * as IconComponents from \"./Icon/components\";\nimport { getHeroicon, toPascalCase } from \"./Icon/utils\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: IconSize;\n  color?: ColorClass | ColorThemeSet;\n  secondaryColor?: ColorClass | ColorThemeSet;\n  additionalCSS?: string;\n  variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\n// Helper function to get a heroicon component from the static map\nconst getHeroiconComponent = (\n  iconName: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> | null => {\n  // Parse the icon name to extract heroicon name and variant\n  // Expected format: icon-gui-{heroicon-name}-{variant}\n  const match = iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);\n  if (!match) {\n    return null;\n  }\n\n  const [, heroiconName, variant] = match;\n  const componentName = toPascalCase(heroiconName);\n  const component = getHeroicon(componentName, variant);\n  return component;\n};\n\nconst Icon = ({\n  name,\n  size = \"0.75rem\",\n  color,\n  secondaryColor,\n  additionalCSS = \"\",\n  variant,\n  ...additionalAttributes\n}: IconProps) => {\n  const [lightSecondaryColor, darkSecondaryColor] = (\n    secondaryColor ?? \"\"\n  ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n  const iconName =\n    variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n  // Get the local icon component (memoized)\n  const LocalIconComponent = useMemo(():\n    | React.ComponentType<React.SVGProps<SVGSVGElement>>\n    | undefined => {\n    return IconComponents[\n      toPascalCase(iconName) as keyof typeof IconComponents\n    ];\n  }, [iconName]);\n\n  // Get the heroicon component only if no local component is found (memoized)\n  const HeroiconComponent = useMemo(() => {\n    return LocalIconComponent ? null : getHeroiconComponent(iconName);\n  }, [LocalIconComponent, iconName]);\n\n  const iconSvg = useCallback(\n    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n      let secondaryColorValue;\n      if (secondaryColor) {\n        secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n      } else if (defaultIconSecondaryColor(name)) {\n        secondaryColorValue = convertTailwindClassToVar(\n          defaultIconSecondaryColor(name),\n        );\n      }\n\n      // Try local component first\n      const IconComponent = LocalIconComponent || HeroiconComponent;\n\n      if (!IconComponent) {\n        return null;\n      }\n\n      return (\n        <IconComponent\n          className={cn(\n            { [`${color}`]: color },\n            { [`${additionalCSS}`]: additionalCSS },\n            {\n              \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n            },\n            {\n              \"dark:hidden\": secondaryColor && isDark && isThemed,\n            },\n          )}\n          style={\n            {\n              width: size,\n              height: size,\n              ...(secondaryColorValue && {\n                \"--ui-icon-secondary-color\": secondaryColorValue,\n              }),\n            } as CSSProperties\n          }\n          {...additionalAttributes}\n        />\n      );\n    },\n    [\n      LocalIconComponent,\n      HeroiconComponent,\n      iconName,\n      size,\n      color,\n      additionalCSS,\n      lightSecondaryColor,\n      darkSecondaryColor,\n      name,\n    ],\n  );\n\n  if (lightSecondaryColor && darkSecondaryColor) {\n    return (\n      <>\n        {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n        {iconSvg(darkSecondaryColor, true, true)}\n      </>\n    );\n  } else if (lightSecondaryColor) {\n    return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n  } else {\n    return iconSvg();\n  }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","useMemo","defaultIconSecondaryColor","convertTailwindClassToVar","cn","IconComponents","getHeroicon","toPascalCase","getHeroiconComponent","iconName","match","heroiconName","variant","componentName","component","Icon","name","size","color","secondaryColor","additionalCSS","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","endsWith","LocalIconComponent","HeroiconComponent","iconSvg","isDark","isThemed","secondaryColorValue","IconComponent","className","style","width","height"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,CAAEC,OAAO,KAAQ,OAAQ,AAEnE,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,AAC5B,WAAYC,mBAAoB,mBAAoB,AACpD,QAASC,WAAW,CAAEC,YAAY,KAAQ,cAAe,CAYzD,MAAMC,qBAAuB,AAC3BC,WAIA,MAAMC,MAAQD,SAASC,KAAK,CAAC,8CAC7B,GAAI,CAACA,MAAO,CACV,OAAO,IACT,CAEA,KAAM,EAAGC,aAAcC,QAAQ,CAAGF,MAClC,MAAMG,cAAgBN,aAAaI,cACnC,MAAMG,UAAYR,YAAYO,cAAeD,SAC7C,OAAOE,SACT,EAEA,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBR,OAAO,CACP,GAAGS,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDJ,CAAAA,gBAAkB,EAAC,EACnBK,KAAK,CAAC,UAER,MAAMf,SACJG,SAAW,CAACI,KAAKS,QAAQ,CAAC,CAAC,CAAC,EAAEb,QAAQ,CAAC,EAAI,CAAC,EAAEI,KAAK,CAAC,EAAEJ,QAAQ,CAAC,CAAGI,KAGpE,MAAMU,mBAAqBzB,QAAQ,KAGjC,OAAOI,cAAc,CACnBE,aAAaE,UACd,AACH,EAAG,CAACA,SAAS,EAGb,MAAMkB,kBAAoB1B,QAAQ,KAChC,OAAOyB,mBAAqB,KAAOlB,qBAAqBC,SAC1D,EAAG,CAACiB,mBAAoBjB,SAAS,EAEjC,MAAMmB,QAAU5B,YACd,CAACmB,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsB5B,0BAA0BgB,eAClD,MAAO,GAAIjB,0BAA0Bc,MAAO,CAC1Ce,oBAAsB5B,0BACpBD,0BAA0Bc,MAE9B,CAGA,MAAMgB,cAAgBN,oBAAsBC,kBAE5C,GAAI,CAACK,cAAe,CAClB,OAAO,IACT,CAEA,OACE,oBAACA,eACCC,UAAW7B,GACT,CAAE,CAAC,CAAC,EAAEc,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,GAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGV,oBAAoB,EAG9B,EACA,CACEK,mBACAC,kBACAlB,SACAQ,KACAC,MACAE,cACAE,oBACAC,mBACAP,KACD,EAGH,GAAIM,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGK,QAAQN,oBAAqB,MAAO,CAAC,CAACC,oBACtCK,QAAQL,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOM,QAAQN,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOK,SACT,CACF,CAEA,gBAAeb,IAAK"}
+{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback, useMemo } from \"react\";\n\nimport {\n  defaultIconSecondaryColor,\n  getHeroicon,\n  toPascalCase,\n} from \"./Icon/utils\";\nimport * as IconComponents from \"./Icon/components\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: IconSize;\n  color?: ColorClass | ColorThemeSet;\n  secondaryColor?: ColorClass | ColorThemeSet;\n  additionalCSS?: string;\n  variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\n// Helper function to get a heroicon component from the static map\nconst getHeroiconComponent = (\n  iconName: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> | null => {\n  // Parse the icon name to extract heroicon name and variant\n  // Expected format: icon-gui-{heroicon-name}-{variant}\n  const match = iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);\n  if (!match) {\n    return null;\n  }\n\n  const [, heroiconName, variant] = match;\n  const component = getHeroicon(heroiconName, variant);\n  return component;\n};\n\nconst Icon = ({\n  name,\n  size = \"0.75rem\",\n  color,\n  secondaryColor,\n  additionalCSS = \"\",\n  variant,\n  ...additionalAttributes\n}: IconProps) => {\n  const [lightSecondaryColor, darkSecondaryColor] = (\n    secondaryColor ?? \"\"\n  ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n  const iconName =\n    variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n  // Get the local icon component (memoized)\n  const LocalIconComponent = useMemo(():\n    | React.ComponentType<React.SVGProps<SVGSVGElement>>\n    | undefined => {\n    return IconComponents[\n      toPascalCase(iconName) as keyof typeof IconComponents\n    ];\n  }, [iconName]);\n\n  // Get the heroicon component only if no local component is found (memoized)\n  const HeroiconComponent = useMemo(() => {\n    return LocalIconComponent ? null : getHeroiconComponent(iconName);\n  }, [LocalIconComponent, iconName]);\n\n  const iconSvg = useCallback(\n    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n      let secondaryColorValue;\n      if (secondaryColor) {\n        secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n      } else if (defaultIconSecondaryColor(name)) {\n        secondaryColorValue = convertTailwindClassToVar(\n          defaultIconSecondaryColor(name),\n        );\n      }\n\n      // Try local component first\n      const IconComponent = LocalIconComponent || HeroiconComponent;\n\n      if (!IconComponent) {\n        return null;\n      }\n\n      return (\n        <IconComponent\n          className={cn(\n            { [`${color}`]: color },\n            { [`${additionalCSS}`]: additionalCSS },\n            {\n              \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n            },\n            {\n              \"dark:hidden\": secondaryColor && isDark && isThemed,\n            },\n          )}\n          style={\n            {\n              width: size,\n              height: size,\n              ...(secondaryColorValue && {\n                \"--ui-icon-secondary-color\": secondaryColorValue,\n              }),\n            } as CSSProperties\n          }\n          {...additionalAttributes}\n        />\n      );\n    },\n    [\n      LocalIconComponent,\n      HeroiconComponent,\n      iconName,\n      size,\n      color,\n      additionalCSS,\n      lightSecondaryColor,\n      darkSecondaryColor,\n      name,\n    ],\n  );\n\n  if (lightSecondaryColor && darkSecondaryColor) {\n    return (\n      <>\n        {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n        {iconSvg(darkSecondaryColor, true, true)}\n      </>\n    );\n  } else if (lightSecondaryColor) {\n    return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n  } else {\n    return iconSvg();\n  }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","useMemo","defaultIconSecondaryColor","getHeroicon","toPascalCase","IconComponents","convertTailwindClassToVar","cn","getHeroiconComponent","iconName","match","heroiconName","variant","component","Icon","name","size","color","secondaryColor","additionalCSS","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","endsWith","LocalIconComponent","HeroiconComponent","iconSvg","isDark","isThemed","secondaryColorValue","IconComponent","className","style","width","height"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,CAAEC,OAAO,KAAQ,OAAQ,AAEnE,QACEC,yBAAyB,CACzBC,WAAW,CACXC,YAAY,KACP,cAAe,AACtB,WAAYC,mBAAoB,mBAAoB,AAGpD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAY5B,MAAMC,qBAAuB,AAC3BC,WAIA,MAAMC,MAAQD,SAASC,KAAK,CAAC,8CAC7B,GAAI,CAACA,MAAO,CACV,OAAO,IACT,CAEA,KAAM,EAAGC,aAAcC,QAAQ,CAAGF,MAClC,MAAMG,UAAYV,YAAYQ,aAAcC,SAC5C,OAAOC,SACT,EAEA,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBP,OAAO,CACP,GAAGQ,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDJ,CAAAA,gBAAkB,EAAC,EACnBK,KAAK,CAAC,UAER,MAAMd,SACJG,SAAW,CAACG,KAAKS,QAAQ,CAAC,CAAC,CAAC,EAAEZ,QAAQ,CAAC,EAAI,CAAC,EAAEG,KAAK,CAAC,EAAEH,QAAQ,CAAC,CAAGG,KAGpE,MAAMU,mBAAqBxB,QAAQ,KAGjC,OAAOI,cAAc,CACnBD,aAAaK,UACd,AACH,EAAG,CAACA,SAAS,EAGb,MAAMiB,kBAAoBzB,QAAQ,KAChC,OAAOwB,mBAAqB,KAAOjB,qBAAqBC,SAC1D,EAAG,CAACgB,mBAAoBhB,SAAS,EAEjC,MAAMkB,QAAU3B,YACd,CAACkB,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBxB,0BAA0BY,eAClD,MAAO,GAAIhB,0BAA0Ba,MAAO,CAC1Ce,oBAAsBxB,0BACpBJ,0BAA0Ba,MAE9B,CAGA,MAAMgB,cAAgBN,oBAAsBC,kBAE5C,GAAI,CAACK,cAAe,CAClB,OAAO,IACT,CAEA,OACE,oBAACA,eACCC,UAAWzB,GACT,CAAE,CAAC,CAAC,EAAEU,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,GAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGV,oBAAoB,EAG9B,EACA,CACEK,mBACAC,kBACAjB,SACAO,KACAC,MACAE,cACAE,oBACAC,mBACAP,KACD,EAGH,GAAIM,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGK,QAAQN,oBAAqB,MAAO,CAAC,CAACC,oBACtCK,QAAQL,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOM,QAAQN,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOK,SACT,CACF,CAEA,gBAAeb,IAAK"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.3.0-dev.a6f974a8",
+  "version": "17.3.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
+    "@storybook/test-runner": "^0.23.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",