@ably/ui 17.3.3 → 17.3.5-dev.b9905dcf

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=`${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}};
+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}};export const setUniqueIds=(el,uniqueId)=>{if(el){const defsElements=el.querySelectorAll("defs [id]");const elementsWithUrls=el.querySelectorAll('[fill*="url("], [stroke*="url("], [filter*="url("], [clip-path*="url("], [mask*="url("]');defsElements.forEach(def=>{const oldId=def.id;if(oldId.includes(uniqueId)){return}const newId=`${oldId}-${uniqueId}`;def.id=newId;const regex=new RegExp(`url\\(#${oldId}\\)`,"g");elementsWithUrls.forEach(element=>{["fill","stroke","filter","clip-path","mask"].forEach(attr=>{const value=element.getAttribute(attr);if(value&&value.includes(`url(#${oldId})`)){element.setAttribute(attr,value.replace(regex,`url(#${newId})`))}})})})}};
 //# 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 = `${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"}
+{"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\nexport const setUniqueIds = (el: SVGSVGElement | null, uniqueId: string) => {\n  if (el) {\n    // Find all elements with IDs in defs and their URL references\n    const defsElements = el.querySelectorAll(\"defs [id]\");\n    const elementsWithUrls = el.querySelectorAll(\n      '[fill*=\"url(\"], [stroke*=\"url(\"], [filter*=\"url(\"], [clip-path*=\"url(\"], [mask*=\"url(\"]',\n    );\n\n    defsElements.forEach((def) => {\n      const oldId = def.id;\n\n      // Prevent re-aliasing of processed ids\n      if (oldId.includes(uniqueId)) {\n        return;\n      }\n\n      const newId = `${oldId}-${uniqueId}`;\n\n      def.id = newId;\n\n      // Update all URL references to this ID\n      const regex = new RegExp(`url\\\\(#${oldId}\\\\)`, \"g\");\n      elementsWithUrls.forEach((element) => {\n        [\"fill\", \"stroke\", \"filter\", \"clip-path\", \"mask\"].forEach((attr) => {\n          const value = element.getAttribute(attr);\n          if (value && value.includes(`url(#${oldId})`)) {\n            element.setAttribute(attr, value.replace(regex, `url(#${newId})`));\n          }\n        });\n      });\n    });\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","setUniqueIds","el","uniqueId","defsElements","querySelectorAll","elementsWithUrls","forEach","def","oldId","id","includes","newId","regex","RegExp","element","attr","value","getAttribute","setAttribute","replace"],"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,AAEF,QAAO,MAAMK,aAAe,CAACC,GAA0BC,YACrD,GAAID,GAAI,CAEN,MAAME,aAAeF,GAAGG,gBAAgB,CAAC,aACzC,MAAMC,iBAAmBJ,GAAGG,gBAAgB,CAC1C,2FAGFD,aAAaG,OAAO,CAAC,AAACC,MACpB,MAAMC,MAAQD,IAAIE,EAAE,CAGpB,GAAID,MAAME,QAAQ,CAACR,UAAW,CAC5B,MACF,CAEA,MAAMS,MAAQ,CAAC,EAAEH,MAAM,CAAC,EAAEN,SAAS,CAAC,AAEpCK,CAAAA,IAAIE,EAAE,CAAGE,MAGT,MAAMC,MAAQ,IAAIC,OAAO,CAAC,OAAO,EAAEL,MAAM,GAAG,CAAC,CAAE,KAC/CH,iBAAiBC,OAAO,CAAC,AAACQ,UACxB,CAAC,OAAQ,SAAU,SAAU,YAAa,OAAO,CAACR,OAAO,CAAC,AAACS,OACzD,MAAMC,MAAQF,QAAQG,YAAY,CAACF,MACnC,GAAIC,OAASA,MAAMN,QAAQ,CAAC,CAAC,KAAK,EAAEF,MAAM,CAAC,CAAC,EAAG,CAC7CM,QAAQI,YAAY,CAACH,KAAMC,MAAMG,OAAO,CAACP,MAAO,CAAC,KAAK,EAAED,MAAM,CAAC,CAAC,EAClE,CACF,EACF,EACF,EACF,CACF,CAAE"}

package/core/Icon.js

@@ -1,2 +1,2 @@
-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;
+import React,{useCallback,useId,useMemo}from"react";import{defaultIconSecondaryColor,getHeroicon,setUniqueIds,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 uniqueId=useId();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 setUniqueIdsRef=useCallback(el=>{setUniqueIds(el,uniqueId)},[uniqueId]);const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{if(LocalIconComponent){let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement(LocalIconComponent,{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,ref:setUniqueIdsRef})}if(HeroiconComponent){return React.createElement(HeroiconComponent,{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS}),style:{width:size,height:size},...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 {\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"}
+{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback, useId, useMemo } from \"react\";\n\nimport {\n  defaultIconSecondaryColor,\n  getHeroicon,\n  setUniqueIds,\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 uniqueId = useId();\n\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 setUniqueIdsRef = useCallback(\n    (el: SVGSVGElement | null) => {\n      setUniqueIds(el, uniqueId);\n    },\n    [uniqueId],\n  );\n\n  const iconSvg = useCallback(\n    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n      if (LocalIconComponent) {\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        return (\n          <LocalIconComponent\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            ref={setUniqueIdsRef}\n          />\n        );\n      }\n\n      if (HeroiconComponent) {\n        return (\n          <HeroiconComponent\n            className={cn(\n              { [`${color}`]: color },\n              { [`${additionalCSS}`]: additionalCSS },\n            )}\n            style={{\n              width: size,\n              height: size,\n            }}\n            {...additionalAttributes}\n          />\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","useId","useMemo","defaultIconSecondaryColor","getHeroicon","setUniqueIds","toPascalCase","IconComponents","convertTailwindClassToVar","cn","getHeroiconComponent","iconName","match","heroiconName","variant","component","Icon","name","size","color","secondaryColor","additionalCSS","additionalAttributes","uniqueId","lightSecondaryColor","darkSecondaryColor","split","endsWith","LocalIconComponent","HeroiconComponent","setUniqueIdsRef","el","iconSvg","isDark","isThemed","secondaryColorValue","className","style","width","height","ref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,CAAEC,KAAK,CAAEC,OAAO,KAAQ,OAAQ,AAE1E,QACEC,yBAAyB,CACzBC,WAAW,CACXC,YAAY,CACZC,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,UAAYX,YAAYS,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,MAAMC,SAAWtB,QAEjB,KAAM,CAACuB,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMf,SACJG,SAAW,CAACG,KAAKU,QAAQ,CAAC,CAAC,CAAC,EAAEb,QAAQ,CAAC,EAAI,CAAC,EAAEG,KAAK,CAAC,EAAEH,QAAQ,CAAC,CAAGG,KAGpE,MAAMW,mBAAqB1B,QAAQ,KAGjC,OAAOK,cAAc,CACnBD,aAAaK,UACd,AACH,EAAG,CAACA,SAAS,EAGb,MAAMkB,kBAAoB3B,QAAQ,KAChC,OAAO0B,mBAAqB,KAAOlB,qBAAqBC,SAC1D,EAAG,CAACiB,mBAAoBjB,SAAS,EAEjC,MAAMmB,gBAAkB9B,YACtB,AAAC+B,KACC1B,aAAa0B,GAAIR,SACnB,EACA,CAACA,SAAS,EAGZ,MAAMS,QAAUhC,YACd,CAACoB,eAA6Ba,OAAkBC,YAC9C,GAAIN,mBAAoB,CACtB,IAAIO,oBACJ,GAAIf,eAAgB,CAClBe,oBAAsB3B,0BAA0BY,eAClD,MAAO,GAAIjB,0BAA0Bc,MAAO,CAC1CkB,oBAAsB3B,0BACpBL,0BAA0Bc,MAE9B,CAEA,OACE,oBAACW,oBACCQ,UAAW3B,GACT,CAAE,CAAC,CAAC,EAAEU,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACa,QAAUC,QACpD,EACA,CACE,cAAed,gBAAkBa,QAAUC,QAC7C,GAEFG,MACE,CACEC,MAAOpB,KACPqB,OAAQrB,KACR,GAAIiB,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGb,oBAAoB,CACxBkB,IAAKV,iBAGX,CAEA,GAAID,kBAAmB,CACrB,OACE,oBAACA,mBACCO,UAAW3B,GACT,CAAE,CAAC,CAAC,EAAEU,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,GAExCgB,MAAO,CACLC,MAAOpB,KACPqB,OAAQrB,IACV,EACC,GAAGI,oBAAoB,EAG9B,CACF,EACA,CACEM,mBACAC,kBACAlB,SACAO,KACAC,MACAE,cACAG,oBACAC,mBACAR,KACD,EAGH,GAAIO,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGO,QAAQR,oBAAqB,MAAO,CAAC,CAACC,oBACtCO,QAAQP,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOQ,QAAQR,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOO,SACT,CACF,CAEA,gBAAehB,IAAK"}

package/core/styles.components.css

@@ -34,12 +34,25 @@
     @apply my-20 sm:my-24 md:my-32;
   }
 
-  .ui-section-spacing-collapse {
-    /* This removes the spacing between adjacent .ui-section-spacing classes,
-       in a way that handles margin collapsing as well (hence not an exact opposite) */
+  /* The *-collapse classes remove the spacing between adjacent .ui-section-spacing classes,
+     in a way that handles margin collapsing as well (hence not an exact opposite) */
+  .ui-section-spacing-collapse,
+  .ui-section-spacing-collapse-full {
     @apply -my-4 sm:-my-8 md:-my-16;
   }
 
+  .ui-section-spacing-collapse-half {
+    @apply -my-2 sm:-my-4 md:-my-8;
+  }
+
+  .ui-section-spacing-collapse-quarter {
+    @apply -my-1 sm:-my-2 md:-my-4;
+  }
+
+  .ui-section-spacing-collapse-eighth {
+    @apply -my-0.5 sm:-my-1 md:-my-2;
+  }
+
   .ui-content-spacing {
     @apply my-10 sm:my-12 md:my-16;
   }

package/index.d.ts

@@ -4744,6 +4744,7 @@ type HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent" | "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "from-neutral-000" | "from-neutral-100" | "from-neutral-200" | "from-neutral-300" | "from-neutral-400" | "from-neutral-500" | "from-neutral-600" | "from-neutral-700" | "from-neutral-800" | "from-neutral-900" | "from-neutral-1000" | "from-neutral-1100" | "from-neutral-1200" | "from-neutral-1300" | "from-orange-100" | "from-orange-200" | "from-orange-300" | "from-orange-400" | "from-orange-500" | "from-orange-600" | "from-orange-700" | "from-orange-800" | "from-orange-900" | "from-orange-1000" | "from-orange-1100" | "from-yellow-100" | "from-yellow-200" | "from-yellow-300" | "from-yellow-400" | "from-yellow-500" | "from-yellow-600" | "from-yellow-700" | "from-yellow-800" | "from-yellow-900" | "from-green-100" | "from-green-200" | "from-green-300" | "from-green-400" | "from-green-500" | "from-green-600" | "from-green-700" | "from-green-800" | "from-green-900" | "from-blue-100" | "from-blue-200" | "from-blue-300" | "from-blue-400" | "from-blue-500" | "from-blue-600" | "from-blue-700" | "from-blue-800" | "from-blue-900" | "from-violet-100" | "from-violet-200" | "from-violet-300" | "from-violet-400" | "from-violet-500" | "from-violet-600" | "from-violet-700" | "from-violet-800" | "from-violet-900" | "from-pink-100" | "from-pink-200" | "from-pink-300" | "from-pink-400" | "from-pink-500" | "from-pink-600" | "from-pink-700" | "from-pink-800" | "from-pink-900" | "from-gui-blue-default-light" | "from-gui-blue-hover-light" | "from-gui-blue-active-light" | "from-gui-blue-default-dark" | "from-gui-blue-hover-dark" | "from-gui-blue-active-dark" | "from-gui-blue-focus" | "from-gui-unavailable" | "from-gui-success-green" | "from-gui-error-red" | "from-gui-focus" | "from-gui-focus-outline" | "from-gui-visited" | "from-white" | "from-extra-light-grey" | "from-light-grey" | "from-mid-grey" | "from-dark-grey" | "from-charcoal-grey" | "from-cool-black" | "from-active-orange" | "from-bright-red" | "from-red-orange" | "from-electric-cyan" | "from-zingy-green" | "from-jazzy-pink" | "from-gui-default" | "from-gui-hover" | "from-gui-active" | "from-gui-error" | "from-gui-success" | "from-gui-default-dark" | "from-gui-hover-dark" | "from-gui-active-dark" | "from-transparent" | "to-neutral-000" | "to-neutral-100" | "to-neutral-200" | "to-neutral-300" | "to-neutral-400" | "to-neutral-500" | "to-neutral-600" | "to-neutral-700" | "to-neutral-800" | "to-neutral-900" | "to-neutral-1000" | "to-neutral-1100" | "to-neutral-1200" | "to-neutral-1300" | "to-orange-100" | "to-orange-200" | "to-orange-300" | "to-orange-400" | "to-orange-500" | "to-orange-600" | "to-orange-700" | "to-orange-800" | "to-orange-900" | "to-orange-1000" | "to-orange-1100" | "to-yellow-100" | "to-yellow-200" | "to-yellow-300" | "to-yellow-400" | "to-yellow-500" | "to-yellow-600" | "to-yellow-700" | "to-yellow-800" | "to-yellow-900" | "to-green-100" | "to-green-200" | "to-green-300" | "to-green-400" | "to-green-500" | "to-green-600" | "to-green-700" | "to-green-800" | "to-green-900" | "to-blue-100" | "to-blue-200" | "to-blue-300" | "to-blue-400" | "to-blue-500" | "to-blue-600" | "to-blue-700" | "to-blue-800" | "to-blue-900" | "to-violet-100" | "to-violet-200" | "to-violet-300" | "to-violet-400" | "to-violet-500" | "to-violet-600" | "to-violet-700" | "to-violet-800" | "to-violet-900" | "to-pink-100" | "to-pink-200" | "to-pink-300" | "to-pink-400" | "to-pink-500" | "to-pink-600" | "to-pink-700" | "to-pink-800" | "to-pink-900" | "to-gui-blue-default-light" | "to-gui-blue-hover-light" | "to-gui-blue-active-light" | "to-gui-blue-default-dark" | "to-gui-blue-hover-dark" | "to-gui-blue-active-dark" | "to-gui-blue-focus" | "to-gui-unavailable" | "to-gui-success-green" | "to-gui-error-red" | "to-gui-focus" | "to-gui-focus-outline" | "to-gui-visited" | "to-white" | "to-extra-light-grey" | "to-light-grey" | "to-mid-grey" | "to-dark-grey" | "to-charcoal-grey" | "to-cool-black" | "to-active-orange" | "to-bright-red" | "to-red-orange" | "to-electric-cyan" | "to-zingy-green" | "to-jazzy-pink" | "to-gui-default" | "to-gui-hover" | "to-gui-active" | "to-gui-error" | "to-gui-success" | "to-gui-default-dark" | "to-gui-hover-dark" | "to-gui-active-dark" | "to-transparent" | "border-neutral-000" | "border-neutral-100" | "border-neutral-200" | "border-neutral-300" | "border-neutral-400" | "border-neutral-500" | "border-neutral-600" | "border-neutral-700" | "border-neutral-800" | "border-neutral-900" | "border-neutral-1000" | "border-neutral-1100" | "border-neutral-1200" | "border-neutral-1300" | "border-orange-100" | "border-orange-200" | "border-orange-300" | "border-orange-400" | "border-orange-500" | "border-orange-600" | "border-orange-700" | "border-orange-800" | "border-orange-900" | "border-orange-1000" | "border-orange-1100" | "border-yellow-100" | "border-yellow-200" | "border-yellow-300" | "border-yellow-400" | "border-yellow-500" | "border-yellow-600" | "border-yellow-700" | "border-yellow-800" | "border-yellow-900" | "border-green-100" | "border-green-200" | "border-green-300" | "border-green-400" | "border-green-500" | "border-green-600" | "border-green-700" | "border-green-800" | "border-green-900" | "border-blue-100" | "border-blue-200" | "border-blue-300" | "border-blue-400" | "border-blue-500" | "border-blue-600" | "border-blue-700" | "border-blue-800" | "border-blue-900" | "border-violet-100" | "border-violet-200" | "border-violet-300" | "border-violet-400" | "border-violet-500" | "border-violet-600" | "border-violet-700" | "border-violet-800" | "border-violet-900" | "border-pink-100" | "border-pink-200" | "border-pink-300" | "border-pink-400" | "border-pink-500" | "border-pink-600" | "border-pink-700" | "border-pink-800" | "border-pink-900" | "border-gui-blue-default-light" | "border-gui-blue-hover-light" | "border-gui-blue-active-light" | "border-gui-blue-default-dark" | "border-gui-blue-hover-dark" | "border-gui-blue-active-dark" | "border-gui-blue-focus" | "border-gui-unavailable" | "border-gui-success-green" | "border-gui-error-red" | "border-gui-focus" | "border-gui-focus-outline" | "border-gui-visited" | "border-white" | "border-extra-light-grey" | "border-light-grey" | "border-mid-grey" | "border-dark-grey" | "border-charcoal-grey" | "border-cool-black" | "border-active-orange" | "border-bright-red" | "border-red-orange" | "border-electric-cyan" | "border-zingy-green" | "border-jazzy-pink" | "border-gui-default" | "border-gui-hover" | "border-gui-active" | "border-gui-error" | "border-gui-success" | "border-gui-default-dark" | "border-gui-hover-dark" | "border-gui-active-dark" | "border-transparent" | "dark:text-neutral-000" | "dark:text-neutral-100" | "dark:text-neutral-200" | "dark:text-neutral-300" | "dark:text-neutral-400" | "dark:text-neutral-500" | "dark:text-neutral-600" | "dark:text-neutral-700" | "dark:text-neutral-800" | "dark:text-neutral-900" | "dark:text-neutral-1000" | "dark:text-neutral-1100" | "dark:text-neutral-1200" | "dark:text-neutral-1300" | "dark:text-orange-100" | "dark:text-orange-200" | "dark:text-orange-300" | "dark:text-orange-400" | "dark:text-orange-500" | "dark:text-orange-600" | "dark:text-orange-700" | "dark:text-orange-800" | "dark:text-orange-900" | "dark:text-orange-1000" | "dark:text-orange-1100" | "dark:text-yellow-100" | "dark:text-yellow-200" | "dark:text-yellow-300" | "dark:text-yellow-400" | "dark:text-yellow-500" | "dark:text-yellow-600" | "dark:text-yellow-700" | "dark:text-yellow-800" | "dark:text-yellow-900" | "dark:text-green-100" | "dark:text-green-200" | "dark:text-green-300" | "dark:text-green-400" | "dark:text-green-500" | "dark:text-green-600" | "dark:text-green-700" | "dark:text-green-800" | "dark:text-green-900" | "dark:text-blue-100" | "dark:text-blue-200" | "dark:text-blue-300" | "dark:text-blue-400" | "dark:text-blue-500" | "dark:text-blue-600" | "dark:text-blue-700" | "dark:text-blue-800" | "dark:text-blue-900" | "dark:text-violet-100" | "dark:text-violet-200" | "dark:text-violet-300" | "dark:text-violet-400" | "dark:text-violet-500" | "dark:text-violet-600" | "dark:text-violet-700" | "dark:text-violet-800" | "dark:text-violet-900" | "dark:text-pink-100" | "dark:text-pink-200" | "dark:text-pink-300" | "dark:text-pink-400" | "dark:text-pink-500" | "dark:text-pink-600" | "dark:text-pink-700" | "dark:text-pink-800" | "dark:text-pink-900" | "dark:text-gui-blue-default-light" | "dark:text-gui-blue-hover-light" | "dark:text-gui-blue-active-light" | "dark:text-gui-blue-default-dark" | "dark:text-gui-blue-hover-dark" | "dark:text-gui-blue-active-dark" | "dark:text-gui-blue-focus" | "dark:text-gui-unavailable" | "dark:text-gui-success-green" | "dark:text-gui-error-red" | "dark:text-gui-focus" | "dark:text-gui-focus-outline" | "dark:text-gui-visited" | "dark:text-white" | "dark:text-extra-light-grey" | "dark:text-light-grey" | "dark:text-mid-grey" | "dark:text-dark-grey" | "dark:text-charcoal-grey" | "dark:text-cool-black" | "dark:text-active-orange" | "dark:text-bright-red" | "dark:text-red-orange" | "dark:text-electric-cyan" | "dark:text-zingy-green" | "dark:text-jazzy-pink" | "dark:text-gui-default" | "dark:text-gui-hover" | "dark:text-gui-active" | "dark:text-gui-error" | "dark:text-gui-success" | "dark:text-gui-default-dark" | "dark:text-gui-hover-dark" | "dark:text-gui-active-dark" | "dark:text-transparent" | "dark:bg-neutral-000" | "dark:bg-neutral-100" | "dark:bg-neutral-200" | "dark:bg-neutral-300" | "dark:bg-neutral-400" | "dark:bg-neutral-500" | "dark:bg-neutral-600" | "dark:bg-neutral-700" | "dark:bg-neutral-800" | "dark:bg-neutral-900" | "dark:bg-neutral-1000" | "dark:bg-neutral-1100" | "dark:bg-neutral-1200" | "dark:bg-neutral-1300" | "dark:bg-orange-100" | "dark:bg-orange-200" | "dark:bg-orange-300" | "dark:bg-orange-400" | "dark:bg-orange-500" | "dark:bg-orange-600" | "dark:bg-orange-700" | "dark:bg-orange-800" | "dark:bg-orange-900" | "dark:bg-orange-1000" | "dark:bg-orange-1100" | "dark:bg-yellow-100" | "dark:bg-yellow-200" | "dark:bg-yellow-300" | "dark:bg-yellow-400" | "dark:bg-yellow-500" | "dark:bg-yellow-600" | "dark:bg-yellow-700" | "dark:bg-yellow-800" | "dark:bg-yellow-900" | "dark:bg-green-100" | "dark:bg-green-200" | "dark:bg-green-300" | "dark:bg-green-400" | "dark:bg-green-500" | "dark:bg-green-600" | "dark:bg-green-700" | "dark:bg-green-800" | "dark:bg-green-900" | "dark:bg-blue-100" | "dark:bg-blue-200" | "dark:bg-blue-300" | "dark:bg-blue-400" | "dark:bg-blue-500" | "dark:bg-blue-600" | "dark:bg-blue-700" | "dark:bg-blue-800" | "dark:bg-blue-900" | "dark:bg-violet-100" | "dark:bg-violet-200" | "dark:bg-violet-300" | "dark:bg-violet-400" | "dark:bg-violet-500" | "dark:bg-violet-600" | "dark:bg-violet-700" | "dark:bg-violet-800" | "dark:bg-violet-900" | "dark:bg-pink-100" | "dark:bg-pink-200" | "dark:bg-pink-300" | "dark:bg-pink-400" | "dark:bg-pink-500" | "dark:bg-pink-600" | "dark:bg-pink-700" | "dark:bg-pink-800" | "dark:bg-pink-900" | "dark:bg-gui-blue-default-light" | "dark:bg-gui-blue-hover-light" | "dark:bg-gui-blue-active-light" | "dark:bg-gui-blue-default-dark" | "dark:bg-gui-blue-hover-dark" | "dark:bg-gui-blue-active-dark" | "dark:bg-gui-blue-focus" | "dark:bg-gui-unavailable" | "dark:bg-gui-success-green" | "dark:bg-gui-error-red" | "dark:bg-gui-focus" | "dark:bg-gui-focus-outline" | "dark:bg-gui-visited" | "dark:bg-white" | "dark:bg-extra-light-grey" | "dark:bg-light-grey" | "dark:bg-mid-grey" | "dark:bg-dark-grey" | "dark:bg-charcoal-grey" | "dark:bg-cool-black" | "dark:bg-active-orange" | "dark:bg-bright-red" | "dark:bg-red-orange" | "dark:bg-electric-cyan" | "dark:bg-zingy-green" | "dark:bg-jazzy-pink" | "dark:bg-gui-default" | "dark:bg-gui-hover" | "dark:bg-gui-active" | "dark:bg-gui-error" | "dark:bg-gui-success" | "dark:bg-gui-default-dark" | "dark:bg-gui-hover-dark" | "dark:bg-gui-active-dark" | "dark:bg-transparent" | "dark:from-neutral-000" | "dark:from-neutral-100" | "dark:from-neutral-200" | "dark:from-neutral-300" | "dark:from-neutral-400" | "dark:from-neutral-500" | "dark:from-neutral-600" | "dark:from-neutral-700" | "dark:from-neutral-800" | "dark:from-neutral-900" | "dark:from-neutral-1000" | "dark:from-neutral-1100" | "dark:from-neutral-1200" | "dark:from-neutral-1300" | "dark:from-orange-100" | "dark:from-orange-200" | "dark:from-orange-300" | "dark:from-orange-400" | "dark:from-orange-500" | "dark:from-orange-600" | "dark:from-orange-700" | "dark:from-orange-800" | "dark:from-orange-900" | "dark:from-orange-1000" | "dark:from-orange-1100" | "dark:from-yellow-100" | "dark:from-yellow-200" | "dark:from-yellow-300" | "dark:from-yellow-400" | "dark:from-yellow-500" | "dark:from-yellow-600" | "dark:from-yellow-700" | "dark:from-yellow-800" | "dark:from-yellow-900" | "dark:from-green-100" | "dark:from-green-200" | "dark:from-green-300" | "dark:from-green-400" | "dark:from-green-500" | "dark:from-green-600" | "dark:from-green-700" | "dark:from-green-800" | "dark:from-green-900" | "dark:from-blue-100" | "dark:from-blue-200" | "dark:from-blue-300" | "dark:from-blue-400" | "dark:from-blue-500" | "dark:from-blue-600" | "dark:from-blue-700" | "dark:from-blue-800" | "dark:from-blue-900" | "dark:from-violet-100" | "dark:from-violet-200" | "dark:from-violet-300" | "dark:from-violet-400" | "dark:from-violet-500" | "dark:from-violet-600" | "dark:from-violet-700" | "dark:from-violet-800" | "dark:from-violet-900" | "dark:from-pink-100" | "dark:from-pink-200" | "dark:from-pink-300" | "dark:from-pink-400" | "dark:from-pink-500" | "dark:from-pink-600" | "dark:from-pink-700" | "dark:from-pink-800" | "dark:from-pink-900" | "dark:from-gui-blue-default-light" | "dark:from-gui-blue-hover-light" | "dark:from-gui-blue-active-light" | "dark:from-gui-blue-default-dark" | "dark:from-gui-blue-hover-dark" | "dark:from-gui-blue-active-dark" | "dark:from-gui-blue-focus" | "dark:from-gui-unavailable" | "dark:from-gui-success-green" | "dark:from-gui-error-red" | "dark:from-gui-focus" | "dark:from-gui-focus-outline" | "dark:from-gui-visited" | "dark:from-white" | "dark:from-extra-light-grey" | "dark:from-light-grey" | "dark:from-mid-grey" | "dark:from-dark-grey" | "dark:from-charcoal-grey" | "dark:from-cool-black" | "dark:from-active-orange" | "dark:from-bright-red" | "dark:from-red-orange" | "dark:from-electric-cyan" | "dark:from-zingy-green" | "dark:from-jazzy-pink" | "dark:from-gui-default" | "dark:from-gui-hover" | "dark:from-gui-active" | "dark:from-gui-error" | "dark:from-gui-success" | "dark:from-gui-default-dark" | "dark:from-gui-hover-dark" | "dark:from-gui-active-dark" | "dark:from-transparent" | "dark:to-neutral-000" | "dark:to-neutral-100" | "dark:to-neutral-200" | "dark:to-neutral-300" | "dark:to-neutral-400" | "dark:to-neutral-500" | "dark:to-neutral-600" | "dark:to-neutral-700" | "dark:to-neutral-800" | "dark:to-neutral-900" | "dark:to-neutral-1000" | "dark:to-neutral-1100" | "dark:to-neutral-1200" | "dark:to-neutral-1300" | "dark:to-orange-100" | "dark:to-orange-200" | "dark:to-orange-300" | "dark:to-orange-400" | "dark:to-orange-500" | "dark:to-orange-600" | "dark:to-orange-700" | "dark:to-orange-800" | "dark:to-orange-900" | "dark:to-orange-1000" | "dark:to-orange-1100" | "dark:to-yellow-100" | "dark:to-yellow-200" | "dark:to-yellow-300" | "dark:to-yellow-400" | "dark:to-yellow-500" | "dark:to-yellow-600" | "dark:to-yellow-700" | "dark:to-yellow-800" | "dark:to-yellow-900" | "dark:to-green-100" | "dark:to-green-200" | "dark:to-green-300" | "dark:to-green-400" | "dark:to-green-500" | "dark:to-green-600" | "dark:to-green-700" | "dark:to-green-800" | "dark:to-green-900" | "dark:to-blue-100" | "dark:to-blue-200" | "dark:to-blue-300" | "dark:to-blue-400" | "dark:to-blue-500" | "dark:to-blue-600" | "dark:to-blue-700" | "dark:to-blue-800" | "dark:to-blue-900" | "dark:to-violet-100" | "dark:to-violet-200" | "dark:to-violet-300" | "dark:to-violet-400" | "dark:to-violet-500" | "dark:to-violet-600" | "dark:to-violet-700" | "dark:to-violet-800" | "dark:to-violet-900" | "dark:to-pink-100" | "dark:to-pink-200" | "dark:to-pink-300" | "dark:to-pink-400" | "dark:to-pink-500" | "dark:to-pink-600" | "dark:to-pink-700" | "dark:to-pink-800" | "dark:to-pink-900" | "dark:to-gui-blue-default-light" | "dark:to-gui-blue-hover-light" | "dark:to-gui-blue-active-light" | "dark:to-gui-blue-default-dark" | "dark:to-gui-blue-hover-dark" | "dark:to-gui-blue-active-dark" | "dark:to-gui-blue-focus" | "dark:to-gui-unavailable" | "dark:to-gui-success-green" | "dark:to-gui-error-red" | "dark:to-gui-focus" | "dark:to-gui-focus-outline" | "dark:to-gui-visited" | "dark:to-white" | "dark:to-extra-light-grey" | "dark:to-light-grey" | "dark:to-mid-grey" | "dark:to-dark-grey" | "dark:to-charcoal-grey" | "dark:to-cool-black" | "dark:to-active-orange" | "dark:to-bright-red" | "dark:to-red-orange" | "dark:to-electric-cyan" | "dark:to-zingy-green" | "dark:to-jazzy-pink" | "dark:to-gui-default" | "dark:to-gui-hover" | "dark:to-gui-active" | "dark:to-gui-error" | "dark:to-gui-success" | "dark:to-gui-default-dark" | "dark:to-gui-hover-dark" | "dark:to-gui-active-dark" | "dark:to-transparent" | "dark:border-neutral-000" | "dark:border-neutral-100" | "dark:border-neutral-200" | "dark:border-neutral-300" | "dark:border-neutral-400" | "dark:border-neutral-500" | "dark:border-neutral-600" | "dark:border-neutral-700" | "dark:border-neutral-800" | "dark:border-neutral-900" | "dark:border-neutral-1000" | "dark:border-neutral-1100" | "dark:border-neutral-1200" | "dark:border-neutral-1300" | "dark:border-orange-100" | "dark:border-orange-200" | "dark:border-orange-300" | "dark:border-orange-400" | "dark:border-orange-500" | "dark:border-orange-600" | "dark:border-orange-700" | "dark:border-orange-800" | "dark:border-orange-900" | "dark:border-orange-1000" | "dark:border-orange-1100" | "dark:border-yellow-100" | "dark:border-yellow-200" | "dark:border-yellow-300" | "dark:border-yellow-400" | "dark:border-yellow-500" | "dark:border-yellow-600" | "dark:border-yellow-700" | "dark:border-yellow-800" | "dark:border-yellow-900" | "dark:border-green-100" | "dark:border-green-200" | "dark:border-green-300" | "dark:border-green-400" | "dark:border-green-500" | "dark:border-green-600" | "dark:border-green-700" | "dark:border-green-800" | "dark:border-green-900" | "dark:border-blue-100" | "dark:border-blue-200" | "dark:border-blue-300" | "dark:border-blue-400" | "dark:border-blue-500" | "dark:border-blue-600" | "dark:border-blue-700" | "dark:border-blue-800" | "dark:border-blue-900" | "dark:border-violet-100" | "dark:border-violet-200" | "dark:border-violet-300" | "dark:border-violet-400" | "dark:border-violet-500" | "dark:border-violet-600" | "dark:border-violet-700" | "dark:border-violet-800" | "dark:border-violet-900" | "dark:border-pink-100" | "dark:border-pink-200" | "dark:border-pink-300" | "dark:border-pink-400" | "dark:border-pink-500" | "dark:border-pink-600" | "dark:border-pink-700" | "dark:border-pink-800" | "dark:border-pink-900" | "dark:border-gui-blue-default-light" | "dark:border-gui-blue-hover-light" | "dark:border-gui-blue-active-light" | "dark:border-gui-blue-default-dark" | "dark:border-gui-blue-hover-dark" | "dark:border-gui-blue-active-dark" | "dark:border-gui-blue-focus" | "dark:border-gui-unavailable" | "dark:border-gui-success-green" | "dark:border-gui-error-red" | "dark:border-gui-focus" | "dark:border-gui-focus-outline" | "dark:border-gui-visited" | "dark:border-white" | "dark:border-extra-light-grey" | "dark:border-light-grey" | "dark:border-mid-grey" | "dark:border-dark-grey" | "dark:border-charcoal-grey" | "dark:border-cool-black" | "dark:border-active-orange" | "dark:border-bright-red" | "dark:border-red-orange" | "dark:border-electric-cyan" | "dark:border-zingy-green" | "dark:border-jazzy-pink" | "dark:border-gui-default" | "dark:border-gui-hover" | "dark:border-gui-active" | "dark:border-gui-error" | "dark:border-gui-success" | "dark:border-gui-default-dark" | "dark:border-gui-hover-dark" | "dark:border-gui-active-dark" | "dark:border-transparent";
 export const toPascalCase: (str: string) => string;
 export const getHeroicon: (iconName: string, variant: string) => HeroiconComponent | null;
+export const setUniqueIds: (el: SVGSVGElement | null, uniqueId: string) => void;
 export {};
 //# sourceMappingURL=utils.d.ts.map
 }
@@ -4759,7 +4760,7 @@ export type IconProps = {
     additionalCSS?: string;
     variant?: "outline" | "solid" | "micro" | "mini";
 };
-const Icon: ({ name, size, color, secondaryColor, additionalCSS, variant, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+const Icon: ({ name, size, color, secondaryColor, additionalCSS, variant, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.3.3",
+  "version": "17.3.5-dev.b9905dcf",
   "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",