@ably/ui 17.8.0-dev.fd2e45b6 → 17.8.0

package/README.md

@@ -373,8 +373,14 @@ Review apps are automatically cleaned up when the PR is closed or the label is r
 
 ### Running tests
 
-`ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).
+`ably-ui` uses [vitest](https://vitest.dev/) with the [Storybook addon for vitest](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) to automatically turn all stories into executable tests. This means that we don't have to explicitly write tests for stories, though we have the ability to write [play functions](https://storybook.js.org/docs/writing-stories/play-function), which allow us to test more detailed interactions.
 
-Snapshots are also assessed via `test-runner`. To generate new snapshots, run `pnpm test:update-snapshots`.
+The tests run in a browser environment using Playwright, providing comprehensive visual regression testing and interaction testing capabilities.
 
-You can run the tests by either running a dev instance of Storybook locally and then running `pnpm test`, or by pushing a branch to GitHub.
+You can run the tests locally using:
+
+```bash
+pnpm test
+```
+
+This will run all story tests using vitest in a headless browser environment.

package/core/Accordion/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorClass | ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorClass | ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorClass | ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorClass | ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorClass | ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorClass | ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AA+CA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
+{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AA+CA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}

package/core/Accordion/utils.js

@@ -1,2 +1,2 @@
-export const themeClasses={default:{bg:"bg-neutral-200 dark:bg-neutral-1100",hoverBg:"hover:bg-neutral-300 dark:hover:bg-neutral-1100",text:"text-ably-primary",toggleIconColor:"text-neutral-1000 dark:text-orange-600",selectableBg:"bg-neutral-1200 dark:bg-neutral-300",selectableText:"text-ably-primary-inverse"},transparent:{bg:"bg-transparent dark:bg-transparent",hoverBg:"hover:bg-transparent dark:hover:bg-transparent",text:"text-neutral-1000 dark:text-neutral-000",toggleIconColor:"text-dark-grey dark:text-orange-600",border:"border-neutral-500 border-b last:border-none dark:border-neutral-1000"},static:{bg:"bg-neutral-200 dark:bg-neutral-1200",hoverBg:"hover:bg-neutral-200 dark:hover:bg-neutral-1200",text:"text-ably-primary",toggleIconColor:"text-neutral-200 dark:text-neutral-1200",selectableBg:"bg-neutral-1200 dark:bg-neutral-1200",selectableText:"text-ably-primary-inverse"}};export const isNonTransparentTheme=theme=>theme!=="transparent";export const isStaticTheme=theme=>theme==="static";
+export const themeClasses={default:{bg:"bg-neutral-200 dark:bg-neutral-1100",hoverBg:"hover:bg-neutral-300 dark:hover:bg-neutral-1100",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-1000 dark:text-orange-600",selectableBg:"bg-neutral-1200 dark:bg-neutral-300",selectableText:"text-neutral-000 dark:text-neutral-1300"},transparent:{bg:"bg-transparent dark:bg-transparent",hoverBg:"hover:bg-transparent dark:hover:bg-transparent",text:"text-neutral-1000 dark:text-neutral-000",toggleIconColor:"text-dark-grey dark:text-orange-600",border:"border-neutral-500 border-b last:border-none dark:border-neutral-1000"},static:{bg:"bg-neutral-200 dark:bg-neutral-1200",hoverBg:"hover:bg-neutral-200 dark:hover:bg-neutral-1200",text:"text-neutral-1300 dark:text-white",toggleIconColor:"text-neutral-200 dark:text-neutral-1200",selectableBg:"bg-neutral-1200 dark:bg-neutral-1200",selectableText:"text-white dark:text-neutral-1300"}};export const isNonTransparentTheme=theme=>theme!=="transparent";export const isStaticTheme=theme=>theme==="static";
 //# sourceMappingURL=utils.js.map

package/core/Accordion/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Accordion/utils.ts"],"sourcesContent":["import { AccordionTheme, AccordionThemeColors } from \"./types\";\n\nexport const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {\n  default: {\n    bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n    hoverBg: \"hover:bg-neutral-300 dark:hover:bg-neutral-1100\",\n    text: \"text-ably-primary\",\n    toggleIconColor: \"text-neutral-1000 dark:text-orange-600\",\n    selectableBg: \"bg-neutral-1200 dark:bg-neutral-300\",\n    selectableText: \"text-ably-primary-inverse\",\n  },\n  transparent: {\n    bg: \"bg-transparent dark:bg-transparent\",\n    hoverBg: \"hover:bg-transparent dark:hover:bg-transparent\",\n    text: \"text-neutral-1000 dark:text-neutral-000\",\n    toggleIconColor: \"text-dark-grey dark:text-orange-600\",\n    border:\n      \"border-neutral-500 border-b last:border-none dark:border-neutral-1000\",\n  },\n  static: {\n    bg: \"bg-neutral-200 dark:bg-neutral-1200\",\n    hoverBg: \"hover:bg-neutral-200 dark:hover:bg-neutral-1200\",\n    text: \"text-ably-primary\",\n    toggleIconColor: \"text-neutral-200 dark:text-neutral-1200\",\n    selectableBg: \"bg-neutral-1200 dark:bg-neutral-1200\",\n    selectableText: \"text-ably-primary-inverse\",\n  },\n};\n\nexport const isNonTransparentTheme = (theme: AccordionTheme) =>\n  theme !== \"transparent\";\n\nexport const isStaticTheme = (theme: AccordionTheme) => theme === \"static\";\n"],"names":["themeClasses","default","bg","hoverBg","text","toggleIconColor","selectableBg","selectableText","transparent","border","static","isNonTransparentTheme","theme","isStaticTheme"],"mappings":"AAEA,OAAO,MAAMA,aAA6D,CACxEC,QAAS,CACPC,GAAI,sCACJC,QAAS,kDACTC,KAAM,oBACNC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,2BAClB,EACAC,YAAa,CACXN,GAAI,qCACJC,QAAS,iDACTC,KAAM,0CACNC,gBAAiB,sCACjBI,OACE,uEACJ,EACAC,OAAQ,CACNR,GAAI,sCACJC,QAAS,kDACTC,KAAM,oBACNC,gBAAiB,0CACjBC,aAAc,uCACdC,eAAgB,2BAClB,CACF,CAAE,AAEF,QAAO,MAAMI,sBAAwB,AAACC,OACpCA,QAAU,aAAc,AAE1B,QAAO,MAAMC,cAAgB,AAACD,OAA0BA,QAAU,QAAS"}
+{"version":3,"sources":["../../../src/core/Accordion/utils.ts"],"sourcesContent":["import { AccordionTheme, AccordionThemeColors } from \"./types\";\n\nexport const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {\n  default: {\n    bg: \"bg-neutral-200 dark:bg-neutral-1100\",\n    hoverBg: \"hover:bg-neutral-300 dark:hover:bg-neutral-1100\",\n    text: \"text-neutral-1300 dark:text-white\",\n    toggleIconColor: \"text-neutral-1000 dark:text-orange-600\",\n    selectableBg: \"bg-neutral-1200 dark:bg-neutral-300\",\n    selectableText: \"text-neutral-000 dark:text-neutral-1300\",\n  },\n  transparent: {\n    bg: \"bg-transparent dark:bg-transparent\",\n    hoverBg: \"hover:bg-transparent dark:hover:bg-transparent\",\n    text: \"text-neutral-1000 dark:text-neutral-000\",\n    toggleIconColor: \"text-dark-grey dark:text-orange-600\",\n    border:\n      \"border-neutral-500 border-b last:border-none dark:border-neutral-1000\",\n  },\n  static: {\n    bg: \"bg-neutral-200 dark:bg-neutral-1200\",\n    hoverBg: \"hover:bg-neutral-200 dark:hover:bg-neutral-1200\",\n    text: \"text-neutral-1300 dark:text-white\",\n    toggleIconColor: \"text-neutral-200 dark:text-neutral-1200\",\n    selectableBg: \"bg-neutral-1200 dark:bg-neutral-1200\",\n    selectableText: \"text-white dark:text-neutral-1300\",\n  },\n};\n\nexport const isNonTransparentTheme = (theme: AccordionTheme) =>\n  theme !== \"transparent\";\n\nexport const isStaticTheme = (theme: AccordionTheme) => theme === \"static\";\n"],"names":["themeClasses","default","bg","hoverBg","text","toggleIconColor","selectableBg","selectableText","transparent","border","static","isNonTransparentTheme","theme","isStaticTheme"],"mappings":"AAEA,OAAO,MAAMA,aAA6D,CACxEC,QAAS,CACPC,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,yCAClB,EACAC,YAAa,CACXN,GAAI,qCACJC,QAAS,iDACTC,KAAM,0CACNC,gBAAiB,sCACjBI,OACE,uEACJ,EACAC,OAAQ,CACNR,GAAI,sCACJC,QAAS,kDACTC,KAAM,oCACNC,gBAAiB,0CACjBC,aAAc,uCACdC,eAAgB,mCAClB,CACF,CAAE,AAEF,QAAO,MAAMI,sBAAwB,AAACC,OACpCA,QAAU,aAAc,AAE1B,QAAO,MAAMC,cAAgB,AAACD,OAA0BA,QAAU,QAAS"}

package/core/Accordion.js

@@ -1,2 +1,2 @@
-import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
+import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/core/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"AAAA,OAAOA,OAELC,OAAO,CACPC,QAAQ,CACRC,UAAU,CACVC,SAAS,KACJ,OAAQ,AACf,QACEC,gBAAgB,CAChBC,aAAa,CACbC,gBAAgB,CAChBC,aAAaC,cAAc,KACtB,2BAA4B,AAEnC,QAAOC,SAAU,QAAS,AAS1B,QACEC,YAAY,CACZC,qBAAqB,CACrBC,aAAa,KACR,mBAAoB,AAC3B,QAAOC,OAAQ,YAAa,CAqC5B,MAAMC,aAAe,CAAC,CACpBC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,OAAO,CACPC,WAAW,CACXC,KAAK,CACLC,KAAK,CACLC,OAAO,CACPC,aAAa,CACbC,eAAiB,IAAI,CACH,IAClB,KAAM,CAAEC,UAAU,CAAEC,MAAM,CAAE,CAAGR,SAAW,CAAC,EAC3C,MAAMS,OAAS,CAAC,eAAe,EAAEN,MAAM,CAAC,CACxC,MAAMO,OAASL,cAAcM,QAAQ,CAACF,QAEtC,KAAM,CACJG,IAAI,CACJC,EAAE,CACFC,OAAO,CACPC,YAAY,CACZC,cAAc,CACdC,MAAM,CACNC,eAAe,CAChB,CAAG1B,YAAY,CAACU,MAAM,CAEvB,MAAMiB,UAAY,AAACZ,YAAcG,QAAUM,gBAAmBJ,KAE9D,OACE,oBAACzB,eACCiC,MAAOX,OACPY,UAAW1B,GAAG,CACZ,CAAC,CAAC,EAAEsB,OAAO,CAAC,CAAC,CAAEA,QAAU,CAACjB,SAASsB,WACrC,IAEA,oBAAClC,kBACCgB,QAASA,QACTiB,UAAW1B,GAAG,CACZ,kIAAmI,KACnI,uBAAwBF,sBAAsBS,OAC9C,oBAAqB,CAACT,sBAAsBS,OAC5C,iDACER,cAAcQ,OAChB,aAAc,CAACR,cAAcQ,OAC7B,eAAgBM,OAChB,CAAC,CAAC,EAAEK,GAAG,CAAC,EAAEC,QAAQ,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAE,CAAEL,CAAAA,YAAcG,MAAK,EACnD,CAAC,CAAC,EAAEK,aAAa,CAAC,EAAEC,eAAe,CAAC,CAAC,CAAET,YAAcG,OACrD,CAACV,SAASuB,WAAa,GAAG,CAAEvB,SAASuB,UACrC,CAACvB,SAASwB,mBAAqB,GAAG,CAChCxB,SAASwB,mBAAqBd,MAClC,IAECX,QACC,oBAACR,MACCM,KAAM,OAAOE,UAAY,SAAWA,QAAQF,IAAI,CAAGE,QACnD0B,MAAON,UACPO,cACE,OAAO3B,UAAY,UAAYA,QAAQ4B,GAAG,CAAG5B,QAAQ4B,GAAG,CAAG,GAE7DC,KAAM5B,SAAS6B,aAAe,SAE9B,KACJ,oBAACC,YAAMjC,MACN,CAACU,YAAc,CAACb,cAAcQ,QAAUI,eACvC,oBAACwB,QAAKT,UAAU,wCACd,oBAAC9B,MACCM,KAAMa,OAAST,YAAY8B,IAAI,CAAClC,IAAI,CAAGI,YAAY+B,MAAM,CAACnC,IAAI,CAC9D4B,MAAOP,gBACPU,KAAM5B,SAASiC,UAAY,UAG7B,MAEL3B,gBACC,oBAACpB,kBACCmC,UAAW1B,GAAG,CACZ,8HAA+H,KAC/H,CAACK,SAASkC,YAAc,GAAG,CAAElC,SAASkC,UACxC,IAEA,oBAACC,OAAId,UAAU,QAAQvB,WAKjC,EAEA,MAAMT,UAAYL,WAChB,CACE,CACEoD,IAAI,CACJlC,MAAQ,aAAa,CACrBmC,MAAQ,CACNL,OAAQ,CAAEnC,KAAM,uBAAwB,EACxCkC,KAAM,CAAElC,KAAM,wBAAyB,CACzC,CAAC,CACDG,OAAO,CACP,GAAGsC,MACJ,CACDC,OAEA,MAAMC,YAAc1D,QAAQ,KAC1B,MAAM2D,YAAcL,KAAKM,GAAG,CAAC,CAACC,EAAGC,IAAM,CAAC,eAAe,EAAEA,EAAE,CAAC,EAC5D,OAAO5C,SAAS6C,UACZJ,YACAA,YAAYK,MAAM,CAAC,CAACH,EAAGxC,QACrBH,SAAS+C,oBAAoBpC,SAASR,OAE9C,EAAG,CAACH,SAAS+C,mBAAoB/C,SAAS6C,UAAWT,KAAKY,MAAM,CAAC,EAEjE,KAAM,CAAC3C,cAAe4C,iBAAiB,CAAGlE,SAAmByD,aAE7DvD,UAAU,KACRgE,iBAAiBT,YACnB,EAAG,CAACA,YAAY,EAEhB,MAAMU,eAAiBd,KAAKM,GAAG,CAAC,CAACS,KAAMhD,QACrC,oBAACP,cACCwD,IAAKD,KAAKtD,IAAI,CACdA,KAAMsD,KAAKtD,IAAI,CACfE,QAASoD,KAAKE,IAAI,CAClBpD,YAAaoC,MACbnC,MAAOA,MACPF,QAASA,QACTG,MAAOA,MACPC,QAAS,KACP+C,KAAK/C,OAAO,GAAGD,MACjB,EACAE,cAAeA,cACfC,eAAgB6C,KAAKG,WAAW,EAE/BH,KAAKI,OAAO,GAIjB,OACE,oBAACpB,OAAII,IAAKA,IAAM,GAAGD,KAAK,EACrBtC,SAASwD,UACR,oBAAClE,gBACCmE,KAAK,SACLC,YAAAA,KACAtC,MAAOf,aAAa,CAAC,EAAE,CACvBsD,cAAe,AAACC,QAAWX,iBAAiB,CAACW,OAAO,GAEnDV,gBAGH,oBAAC5D,gBACCmE,KAAK,WACLrC,MAAOf,cACPsD,cAAe,AAACC,QAAWX,iBAAiBW,SAE3CV,gBAKX,EAGF7D,CAAAA,UAAUwE,WAAW,CAAG,WAExB,gBAAexE,SAAU"}
+{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"AAAA,OAAOA,OAELC,OAAO,CACPC,QAAQ,CACRC,UAAU,CACVC,SAAS,KACJ,OAAQ,AACf,QACEC,gBAAgB,CAChBC,aAAa,CACbC,gBAAgB,CAChBC,aAAaC,cAAc,KACtB,2BAA4B,AAEnC,QAAOC,SAAU,QAAS,AAS1B,QACEC,YAAY,CACZC,qBAAqB,CACrBC,aAAa,KACR,mBAAoB,AAC3B,QAAOC,OAAQ,YAAa,CAqC5B,MAAMC,aAAe,CAAC,CACpBC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,OAAO,CACPC,WAAW,CACXC,KAAK,CACLC,KAAK,CACLC,OAAO,CACPC,aAAa,CACbC,eAAiB,IAAI,CACH,IAClB,KAAM,CAAEC,UAAU,CAAEC,MAAM,CAAE,CAAGR,SAAW,CAAC,EAC3C,MAAMS,OAAS,CAAC,eAAe,EAAEN,MAAM,CAAC,CACxC,MAAMO,OAASL,cAAcM,QAAQ,CAACF,QAEtC,KAAM,CACJG,IAAI,CACJC,EAAE,CACFC,OAAO,CACPC,YAAY,CACZC,cAAc,CACdC,MAAM,CACNC,eAAe,CAChB,CAAG1B,YAAY,CAACU,MAAM,CAEvB,MAAMiB,UAAY,AAACZ,YAAcG,QAAUM,gBAAmBJ,KAE9D,OACE,oBAACzB,eACCiC,MAAOX,OACPY,UAAW1B,GAAG,CACZ,CAAC,CAAC,EAAEsB,OAAO,CAAC,CAAC,CAAEA,QAAU,CAACjB,SAASsB,WACrC,IAEA,oBAAClC,kBACCgB,QAASA,QACTiB,UAAW1B,GAAG,CACZ,kIAAmI,KACnI,uBAAwBF,sBAAsBS,OAC9C,oBAAqB,CAACT,sBAAsBS,OAC5C,iDACER,cAAcQ,OAChB,aAAc,CAACR,cAAcQ,OAC7B,eAAgBM,OAChB,CAAC,CAAC,EAAEK,GAAG,CAAC,EAAEC,QAAQ,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAE,CAAEL,CAAAA,YAAcG,MAAK,EACnD,CAAC,CAAC,EAAEK,aAAa,CAAC,EAAEC,eAAe,CAAC,CAAC,CAAET,YAAcG,OACrD,CAACV,SAASuB,WAAa,GAAG,CAAEvB,SAASuB,UACrC,CAACvB,SAASwB,mBAAqB,GAAG,CAChCxB,SAASwB,mBAAqBd,MAClC,IAECX,QACC,oBAACR,MACCM,KAAM,OAAOE,UAAY,SAAWA,QAAQF,IAAI,CAAGE,QACnD0B,MAAON,UACPO,cACE,OAAO3B,UAAY,UAAYA,QAAQ4B,GAAG,CAAG5B,QAAQ4B,GAAG,CAAG,GAE7DC,KAAM5B,SAAS6B,aAAe,SAE9B,KACJ,oBAACC,YAAMjC,MACN,CAACU,YAAc,CAACb,cAAcQ,QAAUI,eACvC,oBAACwB,QAAKT,UAAU,wCACd,oBAAC9B,MACCM,KAAMa,OAAST,YAAY8B,IAAI,CAAClC,IAAI,CAAGI,YAAY+B,MAAM,CAACnC,IAAI,CAC9D4B,MAAOP,gBACPU,KAAM5B,SAASiC,UAAY,UAG7B,MAEL3B,gBACC,oBAACpB,kBACCmC,UAAW1B,GAAG,CACZ,8HAA+H,KAC/H,CAACK,SAASkC,YAAc,GAAG,CAAElC,SAASkC,UACxC,IAEA,oBAACC,OAAId,UAAU,QAAQvB,WAKjC,EAEA,MAAMT,UAAYL,WAChB,CACE,CACEoD,IAAI,CACJlC,MAAQ,aAAa,CACrBmC,MAAQ,CACNL,OAAQ,CAAEnC,KAAM,uBAAwB,EACxCkC,KAAM,CAAElC,KAAM,wBAAyB,CACzC,CAAC,CACDG,OAAO,CACP,GAAGsC,MACJ,CACDC,OAEA,MAAMC,YAAc1D,QAAQ,KAC1B,MAAM2D,YAAcL,KAAKM,GAAG,CAAC,CAACC,EAAGC,IAAM,CAAC,eAAe,EAAEA,EAAE,CAAC,EAC5D,OAAO5C,SAAS6C,UACZJ,YACAA,YAAYK,MAAM,CAAC,CAACH,EAAGxC,QACrBH,SAAS+C,oBAAoBpC,SAASR,OAE9C,EAAG,CAACiC,KAAMpC,SAAS6C,UAAW7C,SAAS+C,mBAAmB,EAE1D,KAAM,CAAC1C,cAAe2C,iBAAiB,CAAGjE,SAAmByD,aAE7DvD,UAAU,KACR+D,iBAAiBR,YACnB,EAAG,CAACA,YAAY,EAEhB,MAAMS,eAAiBb,KAAKM,GAAG,CAAC,CAACQ,KAAM/C,QACrC,oBAACP,cACCuD,IAAKD,KAAKrD,IAAI,CACdA,KAAMqD,KAAKrD,IAAI,CACfE,QAASmD,KAAKE,IAAI,CAClBnD,YAAaoC,MACbnC,MAAOA,MACPF,QAASA,QACTG,MAAOA,MACPC,QAAS,KACP8C,KAAK9C,OAAO,GAAGD,MACjB,EACAE,cAAeA,cACfC,eAAgB4C,KAAKG,WAAW,EAE/BH,KAAKI,OAAO,GAIjB,OACE,oBAACnB,OAAII,IAAKA,IAAM,GAAGD,KAAK,EACrBtC,SAASuD,UACR,oBAACjE,gBACCkE,KAAK,SACLC,YAAAA,KACArC,MAAOf,aAAa,CAAC,EAAE,CACvBqD,cAAe,AAACC,QAAWX,iBAAiB,CAACW,OAAO,GAEnDV,gBAGH,oBAAC3D,gBACCkE,KAAK,WACLpC,MAAOf,cACPqD,cAAe,AAACC,QAAWX,iBAAiBW,SAE3CV,gBAKX,EAGF5D,CAAAA,UAAUuE,WAAW,CAAG,WAExB,gBAAevE,SAAU"}

package/core/Badge.js

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

package/core/Badge.js.map

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

package/core/CodeSnippet/ApiKeySelector.js

@@ -1,2 +1,2 @@
-import React,{useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const ApiKeySelector=({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0].app==="demo",[apiKeys]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Badge,{className:"ml-1 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-ably-label"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead.")),[]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"font-sans inline-flex items-center justify-between rounded px-3 py-2 ml-1 text-14 text-ably-primary bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse gap-2 focus-base border","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,{className:"size-4"},React.createElement(Icon,{name:"icon-gui-chevron-down-micro",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-lg bg-ably-primary-inverse border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"rounded-lg font-sans"},apiKeys.map(apiKeyItem=>React.createElement(Select.Group,{key:apiKeyItem.app},apiKeys.length>1&&React.createElement(Select.Label,{className:"text-ably-label rounded-none p-1 bg-neutral-200 dark:bg-neutral-1100"},apiKeyItem.app),apiKeyItem.keys.map(({name,key})=>React.createElement(Select.Item,{key:`${apiKeyItem.app}-${name}-${key}`,value:key,className:"relative flex items-center justify-between m-2 p-2 rounded-lg text-14 text-ably-primary select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base min-w-64"},React.createElement(Select.ItemText,null,key.length>10?`${key.substring(0,10)}...`:key,React.createElement("span",{className:"font-light"},name&&` - ${name}`)),React.createElement(Select.ItemIndicator,{className:"size-4"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"16px"}))))))),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3"},React.createElement("span",{className:"ui-text-label4 text-ably-label mr-1"},"API key:"),renderApiKeyDropdown)};ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
+import React,{useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const ApiKeySelector=({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0].app==="demo",[apiKeys]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Badge,{className:"ml-1 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead.")),[]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"font-sans inline-flex items-center justify-between rounded px-3 py-2 ml-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-2 focus-base border","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,{className:"size-4"},React.createElement(Icon,{name:"icon-gui-chevron-down-micro",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-lg bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"rounded-lg font-sans"},apiKeys.map(apiKeyItem=>React.createElement(Select.Group,{key:apiKeyItem.app},apiKeys.length>1&&React.createElement(Select.Label,{className:"text-neutral-700 rounded-none dark:text-neutral-600 p-1 bg-neutral-200 dark:bg-neutral-1100"},apiKeyItem.app),apiKeyItem.keys.map(({name,key})=>React.createElement(Select.Item,{key:`${apiKeyItem.app}-${name}-${key}`,value:key,className:"relative flex items-center justify-between m-2 p-2 rounded-lg text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base min-w-64"},React.createElement(Select.ItemText,null,key.length>10?`${key.substring(0,10)}...`:key,React.createElement("span",{className:"font-light"},name&&` - ${name}`)),React.createElement(Select.ItemIndicator,{className:"size-4"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"16px"}))))))),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1"},"API key:"),renderApiKeyDropdown)};ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.js.map

package/core/CodeSnippet/ApiKeySelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\nimport type { ApiKeysItem } from \"../CodeSnippet\";\n\ntype ApiKeySelectorProps = {\n  apiKeys?: ApiKeysItem[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n};\n\nconst ApiKeySelector = ({\n  apiKeys,\n  selectedApiKey,\n  onApiKeyChange,\n}: ApiKeySelectorProps) => {\n  const isDemoMode = useMemo(\n    () => apiKeys?.length === 1 && apiKeys[0].app === \"demo\",\n    [apiKeys],\n  );\n\n  // Render the demo mode UI\n  const renderDemoMode = useMemo(\n    () => (\n      <div className=\"flex items-center gap-2\">\n        <Badge className=\"ml-1 bg-neutral-200 dark:bg-neutral-1100\">\n          DEMO ONLY\n        </Badge>\n        <Tooltip\n          className=\"ml-0\"\n          triggerElement={\n            <Icon\n              name=\"icon-gui-information-circle-outline\"\n              size=\"16px\"\n              color=\"text-ably-label\"\n            />\n          }\n        >\n          This code example uses a temporary key that is rate limited and\n          expires in 4 hrs. Sign in to Ably to use your API keys instead.\n        </Tooltip>\n      </div>\n    ),\n    [],\n  );\n\n  // Render the dropdown only if we have API keys\n  const renderApiKeyDropdown = useMemo(() => {\n    if (isDemoMode) {\n      return renderDemoMode;\n    }\n\n    if (!apiKeys?.length) {\n      return null;\n    }\n\n    return (\n      <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n        <Select.Trigger\n          className=\"font-sans inline-flex items-center justify-between rounded px-3 py-2 ml-1 text-14 text-ably-primary bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse gap-2 focus-base border\"\n          aria-label=\"API Key\"\n        >\n          <Select.Value />\n          <Select.Icon className=\"size-4\">\n            <Icon name=\"icon-gui-chevron-down-micro\" size=\"16px\" />\n          </Select.Icon>\n        </Select.Trigger>\n\n        <Select.Portal>\n          <Select.Content className=\"overflow-hidden rounded-lg bg-ably-primary-inverse border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n            <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base\">\n              <Icon\n                name=\"icon-gui-chevron-down-outline\"\n                size=\"16px\"\n                additionalCSS=\"rotate-180\"\n              />\n            </Select.ScrollUpButton>\n\n            <Select.Viewport className=\"rounded-lg font-sans\">\n              {apiKeys.map((apiKeyItem) => (\n                <Select.Group key={apiKeyItem.app}>\n                  {apiKeys.length > 1 && (\n                    <Select.Label className=\"text-ably-label rounded-none p-1 bg-neutral-200 dark:bg-neutral-1100\">\n                      {apiKeyItem.app}\n                    </Select.Label>\n                  )}\n                  {apiKeyItem.keys.map(({ name, key }) => (\n                    <Select.Item\n                      key={`${apiKeyItem.app}-${name}-${key}`}\n                      value={key}\n                      className=\"relative flex items-center justify-between m-2 p-2 rounded-lg text-14 text-ably-primary select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base min-w-64\"\n                    >\n                      <Select.ItemText>\n                        {key.length > 10 ? `${key.substring(0, 10)}...` : key}\n                        <span className=\"font-light\">\n                          {name && ` - ${name}`}\n                        </span>\n                      </Select.ItemText>\n                      <Select.ItemIndicator className=\"size-4\">\n                        <Icon name=\"icon-gui-check-micro\" size=\"16px\" />\n                      </Select.ItemIndicator>\n                    </Select.Item>\n                  ))}\n                </Select.Group>\n              ))}\n            </Select.Viewport>\n\n            <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base\">\n              <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n            </Select.ScrollDownButton>\n          </Select.Content>\n        </Select.Portal>\n      </Select.Root>\n    );\n  }, [apiKeys, isDemoMode, selectedApiKey, onApiKeyChange, renderDemoMode]);\n\n  return (\n    <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3\">\n      <span className=\"ui-text-label4 text-ably-label mr-1\">API key:</span>\n      {renderApiKeyDropdown}\n    </div>\n  );\n};\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","useMemo","Select","Badge","Icon","Tooltip","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","app","renderDemoMode","div","className","triggerElement","name","size","color","renderApiKeyDropdown","Root","value","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","map","apiKeyItem","Group","key","Label","keys","Item","ItemText","substring","span","ItemIndicator","ScrollDownButton","displayName"],"mappings":"AAAA,OAAOA,OAASC,OAAO,KAAQ,OAAQ,AACvC,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,eAAiB,CAAC,CACtBC,OAAO,CACPC,cAAc,CACdC,cAAc,CACM,IACpB,MAAMC,WAAaT,QACjB,IAAMM,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,CAACK,GAAG,GAAK,OAClD,CAACL,QAAQ,EAIX,MAAMM,eAAiBZ,QACrB,IACE,oBAACa,OAAIC,UAAU,2BACb,oBAACZ,OAAMY,UAAU,4CAA2C,aAG5D,oBAACV,SACCU,UAAU,OACVC,eACE,oBAACZ,MACCa,KAAK,sCACLC,KAAK,OACLC,MAAM,qBAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuBnB,QAAQ,KACnC,GAAIS,WAAY,CACd,OAAOG,cACT,CAEA,GAAI,CAACN,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACT,OAAOmB,IAAI,EAACC,MAAOd,eAAgBe,cAAed,gBACjD,oBAACP,OAAOsB,OAAO,EACbT,UAAU,kMACVU,aAAW,WAEX,oBAACvB,OAAOwB,KAAK,OACb,oBAACxB,OAAOE,IAAI,EAACW,UAAU,UACrB,oBAACX,MAAKa,KAAK,8BAA8BC,KAAK,WAIlD,oBAAChB,OAAOyB,MAAM,MACZ,oBAACzB,OAAO0B,OAAO,EAACb,UAAU,wHACxB,oBAACb,OAAO2B,cAAc,EAACd,UAAU,4GAC/B,oBAACX,MACCa,KAAK,gCACLC,KAAK,OACLY,cAAc,gBAIlB,oBAAC5B,OAAO6B,QAAQ,EAAChB,UAAU,wBACxBR,QAAQyB,GAAG,CAAC,AAACC,YACZ,oBAAC/B,OAAOgC,KAAK,EAACC,IAAKF,WAAWrB,GAAG,EAC9BL,QAAQI,MAAM,CAAG,GAChB,oBAACT,OAAOkC,KAAK,EAACrB,UAAU,wEACrBkB,WAAWrB,GAAG,EAGlBqB,WAAWI,IAAI,CAACL,GAAG,CAAC,CAAC,CAAEf,IAAI,CAAEkB,GAAG,CAAE,GACjC,oBAACjC,OAAOoC,IAAI,EACVH,IAAK,CAAC,EAAEF,WAAWrB,GAAG,CAAC,CAAC,EAAEK,KAAK,CAAC,EAAEkB,IAAI,CAAC,CACvCb,MAAOa,IACPpB,UAAU,qRAEV,oBAACb,OAAOqC,QAAQ,MACbJ,IAAIxB,MAAM,CAAG,GAAK,CAAC,EAAEwB,IAAIK,SAAS,CAAC,EAAG,IAAI,GAAG,CAAC,CAAGL,IAClD,oBAACM,QAAK1B,UAAU,cACbE,MAAQ,CAAC,GAAG,EAAEA,KAAK,CAAC,GAGzB,oBAACf,OAAOwC,aAAa,EAAC3B,UAAU,UAC9B,oBAACX,MAAKa,KAAK,uBAAuBC,KAAK,eAQnD,oBAAChB,OAAOyC,gBAAgB,EAAC5B,UAAU,4GACjC,oBAACX,MAAKa,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CAACX,QAASG,WAAYF,eAAgBC,eAAgBI,eAAe,EAExE,OACE,oBAACC,OAAIC,UAAU,oFACb,oBAAC0B,QAAK1B,UAAU,uCAAsC,YACrDK,qBAGP,CAGAd,CAAAA,eAAesC,WAAW,CAAG,gBAE7B,gBAAetC,cAAe"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\nimport type { ApiKeysItem } from \"../CodeSnippet\";\n\ntype ApiKeySelectorProps = {\n  apiKeys?: ApiKeysItem[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n};\n\nconst ApiKeySelector = ({\n  apiKeys,\n  selectedApiKey,\n  onApiKeyChange,\n}: ApiKeySelectorProps) => {\n  const isDemoMode = useMemo(\n    () => apiKeys?.length === 1 && apiKeys[0].app === \"demo\",\n    [apiKeys],\n  );\n\n  // Render the demo mode UI\n  const renderDemoMode = useMemo(\n    () => (\n      <div className=\"flex items-center gap-2\">\n        <Badge className=\"ml-1 bg-neutral-200 dark:bg-neutral-1100\">\n          DEMO ONLY\n        </Badge>\n        <Tooltip\n          className=\"ml-0\"\n          triggerElement={\n            <Icon\n              name=\"icon-gui-information-circle-outline\"\n              size=\"16px\"\n              color=\"text-neutral-700 dark:text-neutral-600\"\n            />\n          }\n        >\n          This code example uses a temporary key that is rate limited and\n          expires in 4 hrs. Sign in to Ably to use your API keys instead.\n        </Tooltip>\n      </div>\n    ),\n    [],\n  );\n\n  // Render the dropdown only if we have API keys\n  const renderApiKeyDropdown = useMemo(() => {\n    if (isDemoMode) {\n      return renderDemoMode;\n    }\n\n    if (!apiKeys?.length) {\n      return null;\n    }\n\n    return (\n      <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n        <Select.Trigger\n          className=\"font-sans inline-flex items-center justify-between rounded px-3 py-2 ml-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-2 focus-base border\"\n          aria-label=\"API Key\"\n        >\n          <Select.Value />\n          <Select.Icon className=\"size-4\">\n            <Icon name=\"icon-gui-chevron-down-micro\" size=\"16px\" />\n          </Select.Icon>\n        </Select.Trigger>\n\n        <Select.Portal>\n          <Select.Content className=\"overflow-hidden rounded-lg bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n            <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n              <Icon\n                name=\"icon-gui-chevron-down-outline\"\n                size=\"16px\"\n                additionalCSS=\"rotate-180\"\n              />\n            </Select.ScrollUpButton>\n\n            <Select.Viewport className=\"rounded-lg font-sans\">\n              {apiKeys.map((apiKeyItem) => (\n                <Select.Group key={apiKeyItem.app}>\n                  {apiKeys.length > 1 && (\n                    <Select.Label className=\"text-neutral-700 rounded-none dark:text-neutral-600 p-1 bg-neutral-200 dark:bg-neutral-1100\">\n                      {apiKeyItem.app}\n                    </Select.Label>\n                  )}\n                  {apiKeyItem.keys.map(({ name, key }) => (\n                    <Select.Item\n                      key={`${apiKeyItem.app}-${name}-${key}`}\n                      value={key}\n                      className=\"relative flex items-center justify-between m-2 p-2 rounded-lg text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base min-w-64\"\n                    >\n                      <Select.ItemText>\n                        {key.length > 10 ? `${key.substring(0, 10)}...` : key}\n                        <span className=\"font-light\">\n                          {name && ` - ${name}`}\n                        </span>\n                      </Select.ItemText>\n                      <Select.ItemIndicator className=\"size-4\">\n                        <Icon name=\"icon-gui-check-micro\" size=\"16px\" />\n                      </Select.ItemIndicator>\n                    </Select.Item>\n                  ))}\n                </Select.Group>\n              ))}\n            </Select.Viewport>\n\n            <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n              <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n            </Select.ScrollDownButton>\n          </Select.Content>\n        </Select.Portal>\n      </Select.Root>\n    );\n  }, [apiKeys, isDemoMode, selectedApiKey, onApiKeyChange, renderDemoMode]);\n\n  return (\n    <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3\">\n      <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1\">\n        API key:\n      </span>\n      {renderApiKeyDropdown}\n    </div>\n  );\n};\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","useMemo","Select","Badge","Icon","Tooltip","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","app","renderDemoMode","div","className","triggerElement","name","size","color","renderApiKeyDropdown","Root","value","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","map","apiKeyItem","Group","key","Label","keys","Item","ItemText","substring","span","ItemIndicator","ScrollDownButton","displayName"],"mappings":"AAAA,OAAOA,OAASC,OAAO,KAAQ,OAAQ,AACvC,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,eAAiB,CAAC,CACtBC,OAAO,CACPC,cAAc,CACdC,cAAc,CACM,IACpB,MAAMC,WAAaT,QACjB,IAAMM,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,CAACK,GAAG,GAAK,OAClD,CAACL,QAAQ,EAIX,MAAMM,eAAiBZ,QACrB,IACE,oBAACa,OAAIC,UAAU,2BACb,oBAACZ,OAAMY,UAAU,4CAA2C,aAG5D,oBAACV,SACCU,UAAU,OACVC,eACE,oBAACZ,MACCa,KAAK,sCACLC,KAAK,OACLC,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuBnB,QAAQ,KACnC,GAAIS,WAAY,CACd,OAAOG,cACT,CAEA,GAAI,CAACN,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACT,OAAOmB,IAAI,EAACC,MAAOd,eAAgBe,cAAed,gBACjD,oBAACP,OAAOsB,OAAO,EACbT,UAAU,wOACVU,aAAW,WAEX,oBAACvB,OAAOwB,KAAK,OACb,oBAACxB,OAAOE,IAAI,EAACW,UAAU,UACrB,oBAACX,MAAKa,KAAK,8BAA8BC,KAAK,WAIlD,oBAAChB,OAAOyB,MAAM,MACZ,oBAACzB,OAAO0B,OAAO,EAACb,UAAU,oIACxB,oBAACb,OAAO2B,cAAc,EAACd,UAAU,8IAC/B,oBAACX,MACCa,KAAK,gCACLC,KAAK,OACLY,cAAc,gBAIlB,oBAAC5B,OAAO6B,QAAQ,EAAChB,UAAU,wBACxBR,QAAQyB,GAAG,CAAC,AAACC,YACZ,oBAAC/B,OAAOgC,KAAK,EAACC,IAAKF,WAAWrB,GAAG,EAC9BL,QAAQI,MAAM,CAAG,GAChB,oBAACT,OAAOkC,KAAK,EAACrB,UAAU,+FACrBkB,WAAWrB,GAAG,EAGlBqB,WAAWI,IAAI,CAACL,GAAG,CAAC,CAAC,CAAEf,IAAI,CAAEkB,GAAG,CAAE,GACjC,oBAACjC,OAAOoC,IAAI,EACVH,IAAK,CAAC,EAAEF,WAAWrB,GAAG,CAAC,CAAC,EAAEK,KAAK,CAAC,EAAEkB,IAAI,CAAC,CACvCb,MAAOa,IACPpB,UAAU,2SAEV,oBAACb,OAAOqC,QAAQ,MACbJ,IAAIxB,MAAM,CAAG,GAAK,CAAC,EAAEwB,IAAIK,SAAS,CAAC,EAAG,IAAI,GAAG,CAAC,CAAGL,IAClD,oBAACM,QAAK1B,UAAU,cACbE,MAAQ,CAAC,GAAG,EAAEA,KAAK,CAAC,GAGzB,oBAACf,OAAOwC,aAAa,EAAC3B,UAAU,UAC9B,oBAACX,MAAKa,KAAK,uBAAuBC,KAAK,eAQnD,oBAAChB,OAAOyC,gBAAgB,EAAC5B,UAAU,8IACjC,oBAACX,MAAKa,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CAACX,QAASG,WAAYF,eAAgBC,eAAgBI,eAAe,EAExE,OACE,oBAACC,OAAIC,UAAU,oFACb,oBAAC0B,QAAK1B,UAAU,8DAA6D,YAG5EK,qBAGP,CAGAd,CAAAA,eAAesC,WAAW,CAAG,gBAE7B,gBAAetC,cAAe"}

package/core/CodeSnippet/CopyButton.js

@@ -1,2 +1,2 @@
-import React,{memo}from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=memo(({onCopy,isCopied,tooltip="Copy"})=>{return React.createElement("div",{className:"absolute top-2 right-2 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-ably-primary"})),isCopied?React.createElement("div",{className:"absolute right-10 top-0 bg-ably-primary text-ably-primary-inverse py-1.5 px-3 rounded ui-text-label4 whitespace-nowrap"},"Copied!"):null)});CopyButton.displayName="CopyButton";export default CopyButton;
+import React,{memo}from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=memo(({onCopy,isCopied,tooltip="Copy"})=>{return React.createElement("div",{className:"absolute top-2 right-2 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),isCopied?React.createElement("div",{className:"absolute right-10 top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-1.5 px-3 rounded ui-text-label4 whitespace-nowrap"},"Copied!"):null)});CopyButton.displayName="CopyButton";export default CopyButton;
 //# sourceMappingURL=CopyButton.js.map

package/core/CodeSnippet/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ntype CopyButtonProps = {\n  onCopy: () => void;\n  isCopied: boolean;\n  tooltip?: string;\n};\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton = memo(\n  ({ onCopy, isCopied, tooltip = \"Copy\" }: CopyButtonProps) => {\n    return (\n      <div className=\"absolute top-2 right-2 z-10\">\n        <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n          <Icon\n            name=\"icon-gui-document-duplicate-outline\"\n            size=\"20px\"\n            color=\"text-ably-primary\"\n          />\n        </TooltipButton>\n\n        {isCopied ? (\n          <div className=\"absolute right-10 top-0 bg-ably-primary text-ably-primary-inverse py-1.5 px-3 rounded ui-text-label4 whitespace-nowrap\">\n            Copied!\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\n// Add displayName for better debugging\nCopyButton.displayName = \"CopyButton\";\n\nexport default CopyButton;\n"],"names":["React","memo","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","div","className","onClick","variant","name","size","color","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,KAAQ,OAAQ,AACpC,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAaH,KACjB,CAAC,CAAEI,MAAM,CAAEC,QAAQ,CAAEC,QAAU,MAAM,CAAmB,IACtD,OACE,oBAACC,OAAIC,UAAU,+BACb,oBAACN,eAAcI,QAASA,QAASG,QAASL,OAAQM,QAAQ,eACxD,oBAACT,MACCU,KAAK,sCACLC,KAAK,OACLC,MAAM,uBAITR,SACC,oBAACE,OAAIC,UAAU,0HAAyH,WAGtI,KAGV,EAIFL,CAAAA,WAAWW,WAAW,CAAG,YAEzB,gBAAeX,UAAW"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ntype CopyButtonProps = {\n  onCopy: () => void;\n  isCopied: boolean;\n  tooltip?: string;\n};\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton = memo(\n  ({ onCopy, isCopied, tooltip = \"Copy\" }: CopyButtonProps) => {\n    return (\n      <div className=\"absolute top-2 right-2 z-10\">\n        <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n          <Icon\n            name=\"icon-gui-document-duplicate-outline\"\n            size=\"20px\"\n            color=\"text-neutral-1300 dark:text-neutral-000\"\n          />\n        </TooltipButton>\n\n        {isCopied ? (\n          <div className=\"absolute right-10 top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-1.5 px-3 rounded ui-text-label4 whitespace-nowrap\">\n            Copied!\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\n// Add displayName for better debugging\nCopyButton.displayName = \"CopyButton\";\n\nexport default CopyButton;\n"],"names":["React","memo","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","div","className","onClick","variant","name","size","color","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,KAAQ,OAAQ,AACpC,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAaH,KACjB,CAAC,CAAEI,MAAM,CAAEC,QAAQ,CAAEC,QAAU,MAAM,CAAmB,IACtD,OACE,oBAACC,OAAIC,UAAU,+BACb,oBAACN,eAAcI,QAASA,QAASG,QAASL,OAAQM,QAAQ,eACxD,oBAACT,MACCU,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITR,SACC,oBAACE,OAAIC,UAAU,4JAA2J,WAGxK,KAGV,EAIFL,CAAAA,WAAWW,WAAW,CAAG,YAEzB,gBAAeX,UAAW"}

package/core/CodeSnippet/LanguageSelector.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";import{getLanguageInfo}from"./languages";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageInfo(lang).label;return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageInfo(lang).icon,variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-ably-primary select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(lang).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(lang).label))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages]);const mobileSelectValue=useMemo(()=>activeLanguage?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(activeLanguage).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(activeLanguage).label)):null,[activeLanguage]);return React.createElement("div",{className:"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]"},React.createElement("div",{className:"hidden sm:flex gap-2"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-ably-primary bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse gap-1 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-ably-primary-inverse border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";import{getLanguageInfo}from"./languages";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageInfo(lang).label;return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageInfo(lang).icon,variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(lang).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(lang).label))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages]);const mobileSelectValue=useMemo(()=>activeLanguage?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(activeLanguage).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(activeLanguage).label)):null,[activeLanguage]);return React.createElement("div",{className:"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]"},React.createElement("div",{className:"hidden sm:flex gap-2"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
 //# sourceMappingURL=LanguageSelector.js.map

package/core/CodeSnippet/LanguageSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\nimport { getLanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n  languages: string[];\n  activeLanguage: string;\n  onLanguageChange: (language: string) => void;\n};\n\nconst LanguageSelector = memo(\n  ({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => {\n    const desktopLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => {\n          const active = activeLanguage === lang;\n          const displayName = getLanguageInfo(lang).label;\n\n          return (\n            <TooltipButton\n              key={lang}\n              tooltip={displayName}\n              active={active}\n              onClick={() => onLanguageChange(lang)}\n              icon={getLanguageInfo(lang).icon}\n              variant=\"segmented\"\n              size=\"sm\"\n            >\n              {displayName}\n            </TooltipButton>\n          );\n        }),\n      [languages, activeLanguage, onLanguageChange],\n    );\n\n    const mobileLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => (\n          <Select.Item\n            key={lang}\n            value={lang}\n            className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-ably-primary select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n          >\n            <Select.ItemText asChild>\n              <div className=\"flex items-center gap-2\">\n                <Icon name={getLanguageInfo(lang).icon} size=\"20px\" />\n                <span>{getLanguageInfo(lang).label}</span>\n              </div>\n            </Select.ItemText>\n            <Select.ItemIndicator className=\"absolute right-2\">\n              <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n            </Select.ItemIndicator>\n          </Select.Item>\n        )),\n      [languages],\n    );\n\n    const mobileSelectValue = useMemo(\n      () =>\n        activeLanguage ? (\n          <div className=\"flex items-center gap-2\">\n            <Icon name={getLanguageInfo(activeLanguage).icon} size=\"20px\" />\n            <span>{getLanguageInfo(activeLanguage).label}</span>\n          </div>\n        ) : null,\n      [activeLanguage],\n    );\n\n    return (\n      <div className=\"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]\">\n        <div className=\"hidden sm:flex gap-2\">{desktopLanguageElements}</div>\n\n        <div className=\"sm:hidden w-full\">\n          <Select.Root\n            value={activeLanguage || undefined}\n            onValueChange={onLanguageChange}\n          >\n            <Select.Trigger\n              className=\"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-ably-primary bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse gap-1 border border-neutral-300 dark:border-neutral-900 focus-base\"\n              aria-label=\"Select language\"\n            >\n              <Select.Value asChild>{mobileSelectValue}</Select.Value>\n              <Select.Icon>\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.Icon>\n            </Select.Trigger>\n\n            <Select.Portal>\n              <Select.Content\n                className=\"overflow-hidden rounded-md bg-ably-primary-inverse border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n                position=\"popper\"\n              >\n                <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base\">\n                  <Icon\n                    name=\"icon-gui-chevron-down-outline\"\n                    size=\"16px\"\n                    additionalCSS=\"rotate-180\"\n                  />\n                </Select.ScrollUpButton>\n\n                <Select.Viewport className=\"p-1\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-ably-primary-inverse text-ably-primary cursor-default focus-base\">\n                  <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n                </Select.ScrollDownButton>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </div>\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","getLanguageInfo","LanguageSelector","languages","activeLanguage","onLanguageChange","desktopLanguageElements","map","lang","active","displayName","label","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,AAC5C,QAASC,eAAe,KAAQ,aAAc,CAQ9C,MAAMC,iBAAmBN,KACvB,CAAC,CAAEO,SAAS,CAAEC,cAAc,CAAEC,gBAAgB,CAAyB,IACrE,MAAMC,wBAA0BT,QAC9B,IACEM,UAAUI,GAAG,CAAC,AAACC,OACb,MAAMC,OAASL,iBAAmBI,KAClC,MAAME,YAAcT,gBAAgBO,MAAMG,KAAK,CAE/C,OACE,oBAACX,eACCY,IAAKJ,KACLK,QAASH,YACTD,OAAQA,OACRK,QAAS,IAAMT,iBAAiBG,MAChCO,KAAMd,gBAAgBO,MAAMO,IAAI,CAChCC,QAAQ,YACRC,KAAK,MAEJP,YAGP,GACF,CAACP,UAAWC,eAAgBC,iBAAiB,EAG/C,MAAMa,uBAAyBrB,QAC7B,IACEM,UAAUI,GAAG,CAAC,AAACC,MACb,oBAACV,OAAOqB,IAAI,EACVP,IAAKJ,KACLY,MAAOZ,KACPa,UAAU,6PAEV,oBAACvB,OAAOwB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBO,MAAMO,IAAI,CAAEE,KAAK,SAC7C,oBAACS,YAAMzB,gBAAgBO,MAAMG,KAAK,IAGtC,oBAACb,OAAO6B,aAAa,EAACN,UAAU,oBAC9B,oBAACtB,MAAK0B,KAAK,yBAAyBR,KAAK,YAIjD,CAACd,UAAU,EAGb,MAAMyB,kBAAoB/B,QACxB,IACEO,eACE,oBAACoB,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBG,gBAAgBW,IAAI,CAAEE,KAAK,SACvD,oBAACS,YAAMzB,gBAAgBG,gBAAgBO,KAAK,GAE5C,KACN,CAACP,eAAe,EAGlB,OACE,oBAACoB,OAAIH,UAAU,yFACb,oBAACG,OAAIH,UAAU,wBAAwBf,yBAEvC,oBAACkB,OAAIH,UAAU,oBACb,oBAACvB,OAAO+B,IAAI,EACVT,MAAOhB,gBAAkB0B,UACzBC,cAAe1B,kBAEf,oBAACP,OAAOkC,OAAO,EACbX,UAAU,wOACVY,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACX,QAAAA,MAASK,mBACvB,oBAAC9B,OAAOC,IAAI,MACV,oBAACA,MAAK0B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACnB,OAAOqC,MAAM,MACZ,oBAACrC,OAAOsC,OAAO,EACbf,UAAU,6JACVgB,SAAS,UAET,oBAACvC,OAAOwC,cAAc,EAACjB,UAAU,4GAC/B,oBAACtB,MACC0B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAACzC,OAAO0C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACpB,OAAO2C,gBAAgB,EAACpB,UAAU,4GACjC,oBAACtB,MAAK0B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFf,CAAAA,iBAAiBQ,WAAW,CAAG,kBAE/B,gBAAeR,gBAAiB"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\nimport { getLanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n  languages: string[];\n  activeLanguage: string;\n  onLanguageChange: (language: string) => void;\n};\n\nconst LanguageSelector = memo(\n  ({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => {\n    const desktopLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => {\n          const active = activeLanguage === lang;\n          const displayName = getLanguageInfo(lang).label;\n\n          return (\n            <TooltipButton\n              key={lang}\n              tooltip={displayName}\n              active={active}\n              onClick={() => onLanguageChange(lang)}\n              icon={getLanguageInfo(lang).icon}\n              variant=\"segmented\"\n              size=\"sm\"\n            >\n              {displayName}\n            </TooltipButton>\n          );\n        }),\n      [languages, activeLanguage, onLanguageChange],\n    );\n\n    const mobileLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => (\n          <Select.Item\n            key={lang}\n            value={lang}\n            className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n          >\n            <Select.ItemText asChild>\n              <div className=\"flex items-center gap-2\">\n                <Icon name={getLanguageInfo(lang).icon} size=\"20px\" />\n                <span>{getLanguageInfo(lang).label}</span>\n              </div>\n            </Select.ItemText>\n            <Select.ItemIndicator className=\"absolute right-2\">\n              <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n            </Select.ItemIndicator>\n          </Select.Item>\n        )),\n      [languages],\n    );\n\n    const mobileSelectValue = useMemo(\n      () =>\n        activeLanguage ? (\n          <div className=\"flex items-center gap-2\">\n            <Icon name={getLanguageInfo(activeLanguage).icon} size=\"20px\" />\n            <span>{getLanguageInfo(activeLanguage).label}</span>\n          </div>\n        ) : null,\n      [activeLanguage],\n    );\n\n    return (\n      <div className=\"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]\">\n        <div className=\"hidden sm:flex gap-2\">{desktopLanguageElements}</div>\n\n        <div className=\"sm:hidden w-full\">\n          <Select.Root\n            value={activeLanguage || undefined}\n            onValueChange={onLanguageChange}\n          >\n            <Select.Trigger\n              className=\"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base\"\n              aria-label=\"Select language\"\n            >\n              <Select.Value asChild>{mobileSelectValue}</Select.Value>\n              <Select.Icon>\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.Icon>\n            </Select.Trigger>\n\n            <Select.Portal>\n              <Select.Content\n                className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n                position=\"popper\"\n              >\n                <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon\n                    name=\"icon-gui-chevron-down-outline\"\n                    size=\"16px\"\n                    additionalCSS=\"rotate-180\"\n                  />\n                </Select.ScrollUpButton>\n\n                <Select.Viewport className=\"p-1\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n                </Select.ScrollDownButton>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </div>\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","getLanguageInfo","LanguageSelector","languages","activeLanguage","onLanguageChange","desktopLanguageElements","map","lang","active","displayName","label","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,AAC5C,QAASC,eAAe,KAAQ,aAAc,CAQ9C,MAAMC,iBAAmBN,KACvB,CAAC,CAAEO,SAAS,CAAEC,cAAc,CAAEC,gBAAgB,CAAyB,IACrE,MAAMC,wBAA0BT,QAC9B,IACEM,UAAUI,GAAG,CAAC,AAACC,OACb,MAAMC,OAASL,iBAAmBI,KAClC,MAAME,YAAcT,gBAAgBO,MAAMG,KAAK,CAE/C,OACE,oBAACX,eACCY,IAAKJ,KACLK,QAASH,YACTD,OAAQA,OACRK,QAAS,IAAMT,iBAAiBG,MAChCO,KAAMd,gBAAgBO,MAAMO,IAAI,CAChCC,QAAQ,YACRC,KAAK,MAEJP,YAGP,GACF,CAACP,UAAWC,eAAgBC,iBAAiB,EAG/C,MAAMa,uBAAyBrB,QAC7B,IACEM,UAAUI,GAAG,CAAC,AAACC,MACb,oBAACV,OAAOqB,IAAI,EACVP,IAAKJ,KACLY,MAAOZ,KACPa,UAAU,mRAEV,oBAACvB,OAAOwB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBO,MAAMO,IAAI,CAAEE,KAAK,SAC7C,oBAACS,YAAMzB,gBAAgBO,MAAMG,KAAK,IAGtC,oBAACb,OAAO6B,aAAa,EAACN,UAAU,oBAC9B,oBAACtB,MAAK0B,KAAK,yBAAyBR,KAAK,YAIjD,CAACd,UAAU,EAGb,MAAMyB,kBAAoB/B,QACxB,IACEO,eACE,oBAACoB,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBG,gBAAgBW,IAAI,CAAEE,KAAK,SACvD,oBAACS,YAAMzB,gBAAgBG,gBAAgBO,KAAK,GAE5C,KACN,CAACP,eAAe,EAGlB,OACE,oBAACoB,OAAIH,UAAU,yFACb,oBAACG,OAAIH,UAAU,wBAAwBf,yBAEvC,oBAACkB,OAAIH,UAAU,oBACb,oBAACvB,OAAO+B,IAAI,EACVT,MAAOhB,gBAAkB0B,UACzBC,cAAe1B,kBAEf,oBAACP,OAAOkC,OAAO,EACbX,UAAU,8QACVY,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACX,QAAAA,MAASK,mBACvB,oBAAC9B,OAAOC,IAAI,MACV,oBAACA,MAAK0B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACnB,OAAOqC,MAAM,MACZ,oBAACrC,OAAOsC,OAAO,EACbf,UAAU,yKACVgB,SAAS,UAET,oBAACvC,OAAOwC,cAAc,EAACjB,UAAU,8IAC/B,oBAACtB,MACC0B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAACzC,OAAO0C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACpB,OAAO2C,gBAAgB,EAACpB,UAAU,8IACjC,oBAACtB,MAAK0B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFf,CAAAA,iBAAiBQ,WAAW,CAAG,kBAE/B,gBAAeR,gBAAiB"}

package/core/CodeSnippet/PlainCodeView.js

@@ -1,2 +1,2 @@
-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 PlainCodeView=({content,className,language,icon})=>{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-ably-primary-inverse border border-ably-secondary-inverse relative flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},icon&&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,size:"20px",color:"text-ably-primary"}))),React.createElement(Code,{language:language,snippet:content,additionalCSS:cn("w-full bg-ably-primary-inverse text-neutral-1300 dark:text-neutral-200 px-4 py-2",icon&&"pl-14"),showLines:false}),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
+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 PlainCodeView=({content,className,language,icon})=>{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 flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,role:"button","aria-label":"Focusable code view area",ref:codeRef},icon&&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,size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement(Code,{language:language,snippet:content,additionalCSS:cn("w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2",icon&&"pl-14"),showLines:false}),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
 //# sourceMappingURL=PlainCodeView.js.map

package/core/CodeSnippet/PlainCodeView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.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\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n  content: string;\n  language: string;\n  icon: IconName | null;\n  className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n  content,\n  className,\n  language,\n  icon,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the 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-ably-primary-inverse border border-ably-secondary-inverse relative flex items-center\",\n        language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\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      {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 name={icon} size=\"20px\" color=\"text-ably-primary\" />\n          </div>\n        </div>\n      )}\n\n      <Code\n        language={language}\n        snippet={content}\n        additionalCSS={cn(\n          \"w-full bg-ably-primary-inverse text-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n          icon && \"pl-14\",\n        )}\n        showLines={false}\n      />\n\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","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,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,qHACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MAAKuB,KAAMd,KAAMe,KAAK,OAAOC,MAAM,wBAK1C,oBAACxB,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAezB,GACb,mFACAO,MAAQ,SAEVmB,UAAW,QAGZf,YAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,gBAAe/B,KAAKM,cAAe"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.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\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n  content: string;\n  language: string;\n  icon: IconName | null;\n  className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n  content,\n  className,\n  language,\n  icon,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the 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 flex items-center\",\n        language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n        className,\n      )}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onFocus={() => setIsHovering(true)}\n      onBlur={() => setIsHovering(false)}\n      tabIndex={0}\n      role=\"button\"\n      aria-label=\"Focusable code view area\"\n      ref={codeRef}\n    >\n      {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}\n              size=\"20px\"\n              color=\"text-neutral-1300 dark:text-neutral-000\"\n            />\n          </div>\n        </div>\n      )}\n\n      <Code\n        language={language}\n        snippet={content}\n        additionalCSS={cn(\n          \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n          icon && \"pl-14\",\n        )}\n        showLines={false}\n      />\n\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","role","aria-label","ref","name","size","color","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,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,KAAK,SACLC,aAAW,2BACXC,IAAKZ,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCyB,KAAMhB,KACNiB,KAAK,OACLC,MAAM,8CAMd,oBAAC1B,MACCO,SAAUA,SACVoB,QAAStB,QACTuB,cAAe3B,GACb,+FACAO,MAAQ,SAEVqB,UAAW,QAGZjB,YAAc,oBAACT,YAAW2B,OAAQhB,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAc2B,WAAW,CAAG,eAE5B,gBAAejC,KAAKM,cAAe"}

package/core/CodeSnippet/TooltipButton.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=memo(({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";const showChildren=active||alwaysShowLabel;const buttonElement=useMemo(()=>{if(variant==="segmented"){return React.createElement(SegmentedControl,{size:size,active:active,onClick:onClick,leftIcon:icon,className:cn("focus-base",active?"bg-ably-primary-inverse":"bg-neutral-100 dark:bg-neutral-1200",className)},showChildren?children:null)}return React.createElement("div",{role:"button",className:cn("w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse transition-colors focus-base",className),onClick:onClick,"aria-label":tooltip},children)},[variant,size,active,onClick,icon,className,showChildren,children,tooltip]);if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement});TooltipButton.displayName="TooltipButton";export default TooltipButton;
+import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=memo(({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";const showChildren=active||alwaysShowLabel;const buttonElement=useMemo(()=>{if(variant==="segmented"){return React.createElement(SegmentedControl,{size:size,active:active,onClick:onClick,leftIcon:icon,className:cn("focus-base",active?"bg-neutral-000 dark:bg-neutral-1300":"bg-neutral-100 dark:bg-neutral-1200",className)},showChildren?children:null)}return React.createElement("div",{role:"button",className:cn("w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base",className),onClick:onClick,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick?.()}},tabIndex:0,"aria-label":tooltip},children)},[variant,size,active,onClick,icon,className,showChildren,children,tooltip]);if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement});TooltipButton.displayName="TooltipButton";export default TooltipButton;
 //# sourceMappingURL=TooltipButton.js.map

package/core/CodeSnippet/TooltipButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ntype TooltipButtonProps = {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n};\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton = memo(\n  ({\n    tooltip,\n    active = false,\n    onClick,\n    icon,\n    className,\n    children,\n    variant = \"segmented\",\n    size = \"sm\",\n    alwaysShowLabel = false,\n  }: TooltipButtonProps) => {\n    // Only show tooltip for inactive segmented controls or all icon buttons\n    const showTooltip =\n      (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n    // Determine whether to show children based on active state and alwaysShowLabel\n    const showChildren = active || alwaysShowLabel;\n\n    // Create the button element based on variant\n    const buttonElement = useMemo(() => {\n      if (variant === \"segmented\") {\n        return (\n          <SegmentedControl\n            size={size}\n            active={active}\n            onClick={onClick}\n            leftIcon={icon}\n            className={cn(\n              \"focus-base\",\n              active\n                ? \"bg-ably-primary-inverse\"\n                : \"bg-neutral-100 dark:bg-neutral-1200\",\n              className,\n            )}\n          >\n            {showChildren ? children : null}\n          </SegmentedControl>\n        );\n      }\n\n      return (\n        <div\n          role=\"button\"\n          className={cn(\n            \"w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-ably-secondary-inverse transition-colors focus-base\",\n            className,\n          )}\n          onClick={onClick}\n          aria-label={tooltip}\n        >\n          {children}\n        </div>\n      );\n    }, [\n      variant,\n      size,\n      active,\n      onClick,\n      icon,\n      className,\n      showChildren,\n      children,\n      tooltip,\n    ]);\n\n    // Render with tooltip if needed\n    if (showTooltip) {\n      return (\n        <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n          {tooltip}\n        </Tooltip>\n      );\n    }\n\n    return buttonElement;\n  },\n);\n\n// Add displayName for better debugging\nTooltipButton.displayName = \"TooltipButton\";\n\nexport default TooltipButton;\n"],"names":["React","memo","useMemo","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","showChildren","buttonElement","leftIcon","div","role","aria-label","triggerElement","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAAgBL,KACpB,CAAC,CACCM,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACJ,IAEnB,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,MAAMI,aAAeT,QAAUO,gBAG/B,MAAMG,cAAgBhB,QAAQ,KAC5B,GAAIW,UAAY,YAAa,CAC3B,OACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,0BACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,uJACAM,WAEFF,QAASA,QACTa,aAAYf,SAEXK,SAGP,EAAG,CACDC,QACAC,KACAN,OACAC,QACAC,KACAC,UACAM,aACAL,SACAL,QACD,EAGD,GAAIS,YAAa,CACf,OACE,oBAACb,SAAQoB,eAAgBL,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAckB,WAAW,CAAG,eAE5B,gBAAelB,aAAc"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ntype TooltipButtonProps = {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n};\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton = memo(\n  ({\n    tooltip,\n    active = false,\n    onClick,\n    icon,\n    className,\n    children,\n    variant = \"segmented\",\n    size = \"sm\",\n    alwaysShowLabel = false,\n  }: TooltipButtonProps) => {\n    // Only show tooltip for inactive segmented controls or all icon buttons\n    const showTooltip =\n      (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n    // Determine whether to show children based on active state and alwaysShowLabel\n    const showChildren = active || alwaysShowLabel;\n\n    // Create the button element based on variant\n    const buttonElement = useMemo(() => {\n      if (variant === \"segmented\") {\n        return (\n          <SegmentedControl\n            size={size}\n            active={active}\n            onClick={onClick}\n            leftIcon={icon}\n            className={cn(\n              \"focus-base\",\n              active\n                ? \"bg-neutral-000 dark:bg-neutral-1300\"\n                : \"bg-neutral-100 dark:bg-neutral-1200\",\n              className,\n            )}\n          >\n            {showChildren ? children : null}\n          </SegmentedControl>\n        );\n      }\n\n      return (\n        <div\n          role=\"button\"\n          className={cn(\n            \"w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n            className,\n          )}\n          onClick={onClick}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              onClick?.();\n            }\n          }}\n          tabIndex={0}\n          aria-label={tooltip}\n        >\n          {children}\n        </div>\n      );\n    }, [\n      variant,\n      size,\n      active,\n      onClick,\n      icon,\n      className,\n      showChildren,\n      children,\n      tooltip,\n    ]);\n\n    // Render with tooltip if needed\n    if (showTooltip) {\n      return (\n        <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n          {tooltip}\n        </Tooltip>\n      );\n    }\n\n    return buttonElement;\n  },\n);\n\n// Add displayName for better debugging\nTooltipButton.displayName = \"TooltipButton\";\n\nexport default TooltipButton;\n"],"names":["React","memo","useMemo","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","showChildren","buttonElement","leftIcon","div","role","onKeyDown","e","key","preventDefault","tabIndex","aria-label","triggerElement","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAAgBL,KACpB,CAAC,CACCM,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACJ,IAEnB,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,MAAMI,aAAeT,QAAUO,gBAG/B,MAAMG,cAAgBhB,QAAQ,KAC5B,GAAIW,UAAY,YAAa,CAC3B,OACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,uKACAM,WAEFF,QAASA,QACTa,UAAW,AAACC,IACV,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBhB,WACF,CACF,EACAiB,SAAU,EACVC,aAAYpB,SAEXK,SAGP,EAAG,CACDC,QACAC,KACAN,OACAC,QACAC,KACAC,UACAM,aACAL,SACAL,QACD,EAGD,GAAIS,YAAa,CACf,OACE,oBAACb,SAAQyB,eAAgBV,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAcuB,WAAW,CAAG,eAE5B,gBAAevB,aAAc"}

package/core/CodeSnippet/languages.js

@@ -1,2 +1,2 @@
-const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
+const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
 //# sourceMappingURL=languages.js.map

package/core/CodeSnippet/languages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-head\",\n    syntaxHighlighterKey: \"java\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n    return lang.split(\"_\").slice(1).join(\"_\");\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,IAAK,CACHhB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAgB,MAAO,CACLlB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAiB,IAAK,CACHnB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAkB,KAAM,CACJpB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAmB,KAAM,CACJrB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAoB,QAAS,CACPtB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMsB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAInC,SAAS,CAACkC,IAAI,CAAE,CAClB,OAAOlC,SAAS,CAACkC,IAAI,AACvB,CAGA,MAAO,CACLhC,MAAO+B,QACP9B,KAAM,gBACNC,qBAAsB6B,OACxB,CACF,CAAE,AAEF,gBAAejC,SAAU"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  laravel: {\n    label: \"Laravel\",\n    icon: \"icon-tech-laravel-broadcast\",\n    syntaxHighlighterKey: \"php\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-head\",\n    syntaxHighlighterKey: \"java\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n    return lang.split(\"_\").slice(1).join(\"_\");\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMuB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAIpC,SAAS,CAACmC,IAAI,CAAE,CAClB,OAAOnC,SAAS,CAACmC,IAAI,AACvB,CAGA,MAAO,CACLjC,MAAOgC,QACP/B,KAAM,gBACNC,qBAAsB8B,OACxB,CACF,CAAE,AAEF,gBAAelC,SAAU"}

package/core/CodeSnippet.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[codeRef.current,selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk??null},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[lang,resolvedSdk,sdkTypes,filteredLanguages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}")&&stripSdkType(code?.language)===lang);return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey,lang]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[languages]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-ably-label"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-ably-secondary-inverse min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-ably-secondary-inverse flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-ably-primary"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-ably-tertiary select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk??null},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,role:"button","aria-label":"Focusable code snippet area"},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map