@ably/ui 17.3.5 → 17.4.0-dev.1b8ec38e

package/core/Icon.js.map

@@ -1 +1 @@
-{"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"}
+{"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/core/styles/properties.css

@@ -122,28 +122,6 @@
     --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
     --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
-    /* code syntax: theme */
-    --syntax-black: var(--color-neutral-1300);
-    --syntax-dark-grey: var(--color-neutral-800);
-    --syntax-mid-grey: var(--color-neutral-500);
-    --syntax-light-grey: var(--color-neutral-200);
-    --syntax-extra-light-grey: var(--color-neutral-100);
-    --syntax-orange: #e78c45;
-    --syntax-yellow: #e7c547;
-    --syntax-blue: #3490ec;
-    --syntax-green: #b9ca4a;
-    --syntax-red: #d54e53;
-    --syntax-lilac: #bb87d3;
-
-    /* flat colors for social icons */
-    --icon-color-linkedin: #1269bf;
-    --icon-color-twitter: #2caae1;
-    --icon-color-glassdoor: #0baa41;
-    --icon-color-github: #000000;
-    --icon-color-discord: #5865f2;
-    --icon-color-stackoverflow: #f48024;
-    --icon-color-youtube: #ff0000;
-
     --gradient-active-orange: linear-gradient(
       61.2deg,
       var(--color-active-orange) 10.46%,

package/core/styles.components.css

@@ -34,25 +34,12 @@
     @apply my-20 sm:my-24 md:my-32;
   }
 
-  /* 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 {
+  .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) */
     @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/core/utils/syntax-highlighter.css

@@ -1,71 +1,131 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-}
+/* Light theme for code blocks pulled from highlight.js directly*/
+@import "highlight.js/styles/github.min.css";
 
+/* Dark theme for code blocks pulled from highlight.js and manually prefixed with ui-theme-dark */
 @layer components {
-  .hljs {
-    background: var(--syntax-black);
-    color: var(--syntax-light-grey);
+  /*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+  .ui-theme-dark .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  .ui-theme-dark .hljs-doctag,
+  .ui-theme-dark .hljs-keyword,
+  .ui-theme-dark .hljs-meta .hljs-keyword,
+  .ui-theme-dark .hljs-template-tag,
+  .ui-theme-dark .hljs-template-variable,
+  .ui-theme-dark .hljs-type,
+  .ui-theme-dark .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72;
+  }
+
+  .ui-theme-dark .hljs-title,
+  .ui-theme-dark .hljs-title.class_,
+  .ui-theme-dark .hljs-title.class_.inherited__,
+  .ui-theme-dark .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff;
+  }
+
+  .ui-theme-dark .hljs-attr,
+  .ui-theme-dark .hljs-attribute,
+  .ui-theme-dark .hljs-literal,
+  .ui-theme-dark .hljs-meta,
+  .ui-theme-dark .hljs-number,
+  .ui-theme-dark .hljs-operator,
+  .ui-theme-dark .hljs-variable,
+  .ui-theme-dark .hljs-selector-attr,
+  .ui-theme-dark .hljs-selector-class,
+  .ui-theme-dark .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff;
+  }
+
+  .ui-theme-dark .hljs-regexp,
+  .ui-theme-dark .hljs-string,
+  .ui-theme-dark .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff;
+  }
+
+  .ui-theme-dark .hljs-built_in,
+  .ui-theme-dark .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657;
   }
 
-  .hljs-emphasis {
-    @apply italic;
+  .ui-theme-dark .hljs-comment,
+  .ui-theme-dark .hljs-code,
+  .ui-theme-dark .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e;
   }
 
-  .hljs-strong {
-    @apply font-bold;
+  .ui-theme-dark .hljs-name,
+  .ui-theme-dark .hljs-quote,
+  .ui-theme-dark .hljs-selector-tag,
+  .ui-theme-dark .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787;
   }
 
-  .hljs-comment,
-  .hljs-quote {
-    color: var(--syntax-dark-grey);
+  .ui-theme-dark .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9;
   }
 
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag,
-  .hljs-name,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-regexp,
-  .hljs-deletion {
-    color: var(--syntax-red);
+  .ui-theme-dark .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold;
   }
 
-  .hljs-number,
-  .hljs-built_in,
-  .hljs-literal,
-  .hljs-type,
-  .hljs-params,
-  .hljs-meta,
-  .hljs-link {
-    color: var(--syntax-orange);
+  .ui-theme-dark .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60;
   }
 
-  .hljs-attribute {
-    color: var(--syntax-yellow);
+  .ui-theme-dark .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic;
   }
 
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition {
-    color: var(--syntax-green);
+  .ui-theme-dark .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold;
   }
 
-  .hljs-title,
-  .hljs-section {
-    color: var(--syntax-blue);
+  .ui-theme-dark .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16;
   }
 
-  .hljs-keyword,
-  .hljs-selector-tag {
-    color: var(--syntax-lilac);
+  .ui-theme-dark .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c;
   }
 
-  .hljs-subst {
-    color: var(--syntax-mid-grey);
+  .ui-theme-dark .hljs-char.escape_,
+  .ui-theme-dark .hljs-link,
+  .ui-theme-dark .hljs-params,
+  .ui-theme-dark .hljs-property,
+  .ui-theme-dark .hljs-punctuation,
+  .ui-theme-dark .hljs-tag {
+    /* purposely ignored */
   }
 }

package/index.d.ts

@@ -305,24 +305,27 @@ export default Code;
 }
 
 declare module '@ably/ui/core/CodeSnippet/ApiKeySelector' {
-import React from "react";
-interface ApiKeySelectorProps {
-    apiKeys?: string[];
+import type { ApiKeysItem } from "@ably/ui/core/types";
+type ApiKeySelectorProps = {
+    apiKeys?: ApiKeysItem[];
     selectedApiKey: string;
     onApiKeyChange: (apiKey: string) => void;
-}
-const ApiKeySelector: React.MemoExoticComponent<({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => import("react/jsx-runtime").JSX.Element>;
+};
+const ApiKeySelector: {
+    ({ apiKeys, selectedApiKey, onApiKeyChange, }: ApiKeySelectorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.d.ts.map
 }
 
 declare module '@ably/ui/core/CodeSnippet/CopyButton' {
 import React from "react";
-interface CopyButtonProps {
+type CopyButtonProps = {
     onCopy: () => void;
     isCopied: boolean;
     tooltip?: string;
-}
+};
 /**
  * A reusable copy button component with tooltip and copied indicator
  */
@@ -333,36 +336,34 @@ export default CopyButton;
 
 declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
 import React from "react";
-import { IconName } from ".@ably/ui/core/Icon/types";
-import { LanguageInfo } from "@ably/ui/core/languages";
-interface LanguageSelectorProps {
+type LanguageSelectorProps = {
     languages: string[];
-    activeLanguage: string | null;
+    activeLanguage: string;
     onLanguageChange: (language: string) => void;
-    getLanguageDisplayName: (lang: string) => string;
-    getLanguageIcon: (lang: string) => IconName;
-    activeLanguageInfo: LanguageInfo | null;
-}
-const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange, getLanguageDisplayName, getLanguageIcon, activeLanguageInfo, }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
+};
+const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
 export default LanguageSelector;
 //# sourceMappingURL=LanguageSelector.d.ts.map
 }
 
-declare module '@ably/ui/core/CodeSnippet/ShellCommandView' {
+declare module '@ably/ui/core/CodeSnippet/PlainCodeView' {
 import React from "react";
-interface ShellCommandViewProps {
+import { IconName } from ".@ably/ui/core/Icon/types";
+type PlainCodeViewProps = {
     content: string;
+    language: string;
+    icon: IconName | null;
     className?: string;
-}
-const _default: React.NamedExoticComponent<ShellCommandViewProps>;
+};
+const _default: React.NamedExoticComponent<PlainCodeViewProps>;
 export default _default;
-//# sourceMappingURL=ShellCommandView.d.ts.map
+//# sourceMappingURL=PlainCodeView.d.ts.map
 }
 
 declare module '@ably/ui/core/CodeSnippet/TooltipButton' {
 import React from "react";
 import { IconName } from ".@ably/ui/core/Icon/types";
-interface TooltipButtonProps {
+type TooltipButtonProps = {
     tooltip: string;
     active?: boolean;
     onClick: () => void;
@@ -372,7 +373,7 @@ interface TooltipButtonProps {
     variant?: "segmented" | "icon-button";
     size?: "sm" | "md";
     alwaysShowLabel?: boolean;
-}
+};
 /**
  * A unified tooltip button component that can render either a segmented control or an icon button
  */
@@ -390,15 +391,19 @@ export interface LanguageInfo {
 }
 export type LanguageMap = Record<string, LanguageInfo>;
 const languages: LanguageMap;
+export const stripSdkType: (lang: string) => string;
 export const getLanguageInfo: (langKey: string) => LanguageInfo;
 export default languages;
 //# sourceMappingURL=languages.d.ts.map
 }
 
-declare module '@ably/ui/core/CodeSnippet' {
-import React from "react";
+declare module '@ably/ui/core/CodeSnippet/types' {
 export type SDKType = "realtime" | "rest" | null;
-export interface CodeSnippetProps {
+export type ApiKeysItem = {
+    app: string;
+    keys: string[];
+};
+export type CodeSnippetProps = {
     /**
      * If true, hides the language selector row completely
      */
@@ -423,7 +428,7 @@ export interface CodeSnippetProps {
      * Default language to display. If not found in available languages, first available is used.
      * If found in languages but no matching snippet exists, a message is displayed.
      */
-    lang?: string;
+    lang: string;
     /**
      * Callback fired when the active language changes
      */
@@ -431,7 +436,7 @@ export interface CodeSnippetProps {
     /**
      * List of API keys to display in a dropdown
      */
-    apiKeys?: string[];
+    apiKeys?: ApiKeysItem[];
     /**
      * Default SDK type to use for the code snippet
      */
@@ -445,7 +450,13 @@ export interface CodeSnippetProps {
      * Languages not in this array will be shown after those that are included.
      */
     languageOrdering?: string[];
+};
+//# sourceMappingURL=types.d.ts.map
 }
+
+declare module '@ably/ui/core/CodeSnippet' {
+import React from "react";
+import { type CodeSnippetProps } from "@ably/ui/core/CodeSnippet/types";
 /**
  * CodeSnippet component that displays code with language switching capability
  */
@@ -4744,7 +4755,6 @@ 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
 }
@@ -4760,7 +4770,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 | undefined;
+const Icon: ({ name, size, color, secondaryColor, additionalCSS, variant, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.3.5",
+  "version": "17.4.0-dev.1b8ec38e",
   "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",
@@ -95,7 +95,7 @@
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.4",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.11.1",
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",

package/core/CodeSnippet/ShellCommandView.js

@@ -1,2 +0,0 @@
-import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[3.375rem]",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},React.createElement("div",{className:"absolute top-2 left-2 z-10"},React.createElement("div",{className:"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:"pl-14"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-14 py-3",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};ShellCommandView.displayName="ShellCommandView";export default memo(ShellCommandView);
-//# sourceMappingURL=ShellCommandView.js.map

package/core/CodeSnippet/ShellCommandView.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n  content: string;\n  className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n  content,\n  className,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the shell command content\n  const handleCopy = useCallback(() => {\n    copy(content);\n  }, [copy, content]);\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[3.375rem]\",\n        className,\n      )}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onFocus={() => setIsHovering(true)}\n      onBlur={() => setIsHovering(false)}\n      tabIndex={0}\n      ref={codeRef}\n    >\n      {/* Shell Icon */}\n      <div className=\"absolute top-2 left-2 z-10\">\n        <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n          <Icon\n            name=\"icon-gui-command-line-outline\"\n            size=\"20px\"\n            color=\"text-neutral-1300 dark:text-neutral-000\"\n          />\n        </div>\n      </div>\n\n      {/* Code Content */}\n      <div className=\"pl-14\">\n        <Code\n          language=\"shell\"\n          snippet={content}\n          additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-14 py-3\"\n          showLines={false}\n        />\n      </div>\n\n      {/* Copy Button - only shown on hover */}\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nShellCommandView.displayName = \"ShellCommandView\";\n\nexport default memo(ShellCommandView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","language","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUd,OAAuB,MACvC,KAAM,CAACe,WAAYC,cAAc,CAAGf,SAAS,OAG7C,MAAMgB,WAAaf,YAAY,KAC7BW,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAElB,OACE,oBAACQ,OACCP,UAAWL,GACT,8IACAK,WAEFQ,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAGL,oBAACI,OAAIP,UAAU,8BACb,oBAACO,OAAIP,UAAU,2FACb,oBAACP,MACCqB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMZ,oBAACT,OAAIP,UAAU,SACb,oBAACN,MACCuB,SAAS,QACTC,QAASnB,QACToB,cAAc,yFACdC,UAAW,SAKdhB,YAAc,oBAACP,YAAWwB,OAAQf,WAAYL,SAAUA,WAG/D,CAEAH,CAAAA,iBAAiBwB,WAAW,CAAG,kBAE/B,gBAAe9B,KAAKM,iBAAkB"}