@ably/ui 16.2.9 → 17.0.0-dev.3dbbd263

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-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 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-16"},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))},[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;
 //# 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-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none\":\n            true,\n          \"px-16 mb-16 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\":\n              true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-16\">{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,oIACE,KACF,yBAA0BF,sBAAsBS,OAChD,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,8HACE,KACF,CAACK,SAASkC,YAAc,GAAG,CAAElC,SAASkC,UACxC,IAEA,oBAACC,OAAId,UAAU,SAASvB,WAKlC,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\":\n            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\":\n              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,kIACE,KACF,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,8HACE,KACF,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"}

package/core/Badge.js

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

package/core/Badge.js.map

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

package/core/Code.js

@@ -1,2 +1,2 @@
-import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";import cn from"./utils/cn";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS="",showLines,lineCSS})=>{const trimmedSnippet=snippet.trimEnd();const HTMLraw=highlightSnippet(language,trimmedSnippet)??"";const className=`language-${language} ${textSize}`;const lines=trimmedSnippet.split(/\r\n|\r|\n/);const lineCount=lines.length;return React.createElement("div",{className:cn("hljs overflow-auto flex",padding,additionalCSS),"data-id":"code"},showLines?React.createElement("div",null,[...Array(lineCount)].map((_,i)=>React.createElement("p",{className:cn("mr-24 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";import cn from"./utils/cn";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-8",additionalCSS="",showLines,lineCSS})=>{const trimmedSnippet=snippet.trimEnd();const HTMLraw=highlightSnippet(language,trimmedSnippet)??"";const className=`language-${language} ${textSize}`;const lines=trimmedSnippet.split(/\r\n|\r|\n/);const lineCount=lines.length;return React.createElement("div",{className:cn("hljs overflow-auto flex",padding,additionalCSS),"data-id":"code"},showLines?React.createElement("div",null,[...Array(lineCount)].map((_,i)=>React.createElement("p",{className:cn("mr-6 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
 //# sourceMappingURL=Code.js.map

package/core/Code.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  registerDefaultLanguages,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-32\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  return (\n    <div\n      className={cn(\"hljs overflow-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div>\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-24 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre lang={language}>\n        <code\n          className={className}\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","registerDefaultLanguages","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","div","data-id","Array","map","_","i","p","key","pre","lang","code","dangerouslySetInnerHTML","__html"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,wBAAwB,KACnB,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BF,yBAAyBC,mBAYzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,MAAM,CAChBC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACG,IAEV,MAAMC,eAAiBN,QAAQO,OAAO,GACtC,MAAMC,QAAUd,iBAAiBK,SAAUO,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEV,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMS,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,OACE,oBAACC,OACCL,UAAWZ,GAAG,0BAA2BK,QAASC,eAClDY,UAAQ,QAEPX,UACC,oBAACU,WACE,IAAIE,MAAMJ,WAAW,CAACK,GAAG,CAAC,CAACC,EAAGC,IAC7B,oBAACC,KACCX,UAAWZ,GACT,8CACAQ,SAEFgB,IAAKF,GAEJA,EAAI,KAIT,KACJ,oBAACG,OAAIC,KAAMxB,UACT,oBAACyB,QACCf,UAAWA,UACXgB,wBAAyB,CAAEC,OAAQlB,OAAQ,KAKrD,CAEA,gBAAeV,IAAK"}
+{"version":3,"sources":["../../src/core/Code.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  highlightSnippet,\n  registerDefaultLanguages,\n} from \"./utils/syntax-highlighter\";\nimport languagesRegistry from \"./utils/syntax-highlighter-registry\";\nimport cn from \"./utils/cn\";\n\nregisterDefaultLanguages(languagesRegistry);\n\ntype CodeProps = {\n  language: string;\n  snippet: string;\n  textSize?: string;\n  padding?: string;\n  additionalCSS?: string;\n  showLines?: boolean;\n  lineCSS?: string;\n};\n\nconst Code = ({\n  language,\n  snippet,\n  textSize = \"ui-text-code\",\n  padding = \"p-8\",\n  additionalCSS = \"\",\n  showLines,\n  lineCSS,\n}: CodeProps) => {\n  // Trim the snippet and remove trailing empty lines\n  const trimmedSnippet = snippet.trimEnd();\n  const HTMLraw = highlightSnippet(language, trimmedSnippet) ?? \"\";\n  const className = `language-${language} ${textSize}`;\n\n  // Calculate line count after removing trailing empty lines\n  const lines = trimmedSnippet.split(/\\r\\n|\\r|\\n/);\n  const lineCount = lines.length;\n\n  return (\n    <div\n      className={cn(\"hljs overflow-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div>\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-6 font-mono text-right text-neutral-800\",\n                lineCSS,\n              )}\n              key={i}\n            >\n              {i + 1}\n            </p>\n          ))}\n        </div>\n      ) : null}\n      <pre lang={language}>\n        <code\n          className={className}\n          dangerouslySetInnerHTML={{ __html: HTMLraw }}\n        />\n      </pre>\n    </div>\n  );\n};\n\nexport default Code;\n"],"names":["React","highlightSnippet","registerDefaultLanguages","languagesRegistry","cn","Code","language","snippet","textSize","padding","additionalCSS","showLines","lineCSS","trimmedSnippet","trimEnd","HTMLraw","className","lines","split","lineCount","length","div","data-id","Array","map","_","i","p","key","pre","lang","code","dangerouslySetInnerHTML","__html"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QACEC,gBAAgB,CAChBC,wBAAwB,KACnB,4BAA6B,AACpC,QAAOC,sBAAuB,qCAAsC,AACpE,QAAOC,OAAQ,YAAa,CAE5BF,yBAAyBC,mBAYzB,MAAME,KAAO,CAAC,CACZC,QAAQ,CACRC,OAAO,CACPC,SAAW,cAAc,CACzBC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBC,SAAS,CACTC,OAAO,CACG,IAEV,MAAMC,eAAiBN,QAAQO,OAAO,GACtC,MAAMC,QAAUd,iBAAiBK,SAAUO,iBAAmB,GAC9D,MAAMG,UAAY,CAAC,SAAS,EAAEV,SAAS,CAAC,EAAEE,SAAS,CAAC,CAGpD,MAAMS,MAAQJ,eAAeK,KAAK,CAAC,cACnC,MAAMC,UAAYF,MAAMG,MAAM,CAE9B,OACE,oBAACC,OACCL,UAAWZ,GAAG,0BAA2BK,QAASC,eAClDY,UAAQ,QAEPX,UACC,oBAACU,WACE,IAAIE,MAAMJ,WAAW,CAACK,GAAG,CAAC,CAACC,EAAGC,IAC7B,oBAACC,KACCX,UAAWZ,GACT,6CACAQ,SAEFgB,IAAKF,GAEJA,EAAI,KAIT,KACJ,oBAACG,OAAIC,KAAMxB,UACT,oBAACyB,QACCf,UAAWA,UACXgB,wBAAyB,CAAEC,OAAQlB,OAAQ,KAKrD,CAEA,gBAAeV,IAAK"}

package/core/CodeSnippet/ApiKeySelector.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO,[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 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,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 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:"inline-flex items-center justify-between rounded px-8 py-4 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-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),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"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 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-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 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,apiKeyItems,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),renderApiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO,[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,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,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},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:"inline-flex items-center justify-between rounded px-2 py-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-1 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),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"},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"},apiKeyItems),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,apiKeyItems,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, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n  apiKeys?: string[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n}\n\n// Define constants at the module level\nconst SPECIAL_API_KEYS = {\n  DEMO: \"demo\",\n} as const;\n\nconst ApiKeySelector = memo(\n  ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n    // Check if we're in demo mode - only compute this once\n    const isDemoMode = useMemo(\n      () => apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO,\n      [apiKeys],\n    );\n\n    // Memoize API key items to prevent recreating them on each render\n    const apiKeyItems = useMemo(() => {\n      if (!apiKeys?.length || isDemoMode) return null;\n\n      return apiKeys.map((key) => (\n        <Select.Item\n          key={key}\n          value={key}\n          className=\"relative flex items-center rounded px-8 py-6 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>{key}</Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [apiKeys, isDemoMode]);\n\n    // Render the demo mode UI\n    const renderDemoMode = useMemo(\n      () => (\n        <div className=\"flex items-center\">\n          <Badge className=\"ml-4 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=\"inline-flex items-center justify-between rounded px-8 py-4 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-4 focus-base\"\n            aria-label=\"API Key\"\n          >\n            <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 className=\"overflow-hidden rounded-md 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-24 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-4\">{apiKeyItems}</Select.Viewport>\n\n              <Select.ScrollDownButton className=\"flex items-center justify-center h-24 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    }, [\n      apiKeys,\n      isDemoMode,\n      selectedApiKey,\n      onApiKeyChange,\n      apiKeyItems,\n      renderDemoMode,\n    ]);\n\n    return (\n      <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n        <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n          API key:\n        </span>\n        {renderApiKeyDropdown}\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,iBAAmB,CACvBC,KAAM,MACR,EAEA,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaX,QACjB,IAAMQ,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CACnE,CAACE,QAAQ,EAIX,MAAMK,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,eAAiBvB,QACrB,IACE,oBAACwB,OAAIN,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVO,eACE,oBAACtB,MACCkB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuB3B,QAAQ,KACnC,GAAIW,WAAY,CACd,OAAOY,cACT,CAEA,GAAI,CAACf,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO2B,IAAI,EAACX,MAAOR,eAAgBoB,cAAenB,gBACjD,oBAACT,OAAO6B,OAAO,EACbZ,UAAU,kNACVa,aAAW,WAEX,oBAAC9B,OAAO+B,KAAK,OACb,oBAAC/B,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAOgC,MAAM,MACZ,oBAAChC,OAAOiC,OAAO,EAAChB,UAAU,oIACxB,oBAACjB,OAAOkC,cAAc,EAACjB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLc,cAAc,gBAIlB,oBAACnC,OAAOoC,QAAQ,EAACnB,UAAU,OAAOL,aAElC,oBAACZ,OAAOqC,gBAAgB,EAACpB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDd,QACAG,WACAF,eACAC,eACAG,YACAU,eACD,EAED,OACE,oBAACC,OAAIN,UAAU,sFACb,oBAACqB,QAAKrB,UAAU,8DAA6D,YAG5ES,qBAGP,EAIFpB,CAAAA,eAAeiC,WAAW,CAAG,gBAE7B,gBAAejC,cAAe"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n  apiKeys?: string[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n}\n\n// Define constants at the module level\nconst SPECIAL_API_KEYS = {\n  DEMO: \"demo\",\n} as const;\n\nconst ApiKeySelector = memo(\n  ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n    // Check if we're in demo mode - only compute this once\n    const isDemoMode = useMemo(\n      () => apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO,\n      [apiKeys],\n    );\n\n    // Memoize API key items to prevent recreating them on each render\n    const apiKeyItems = useMemo(() => {\n      if (!apiKeys?.length || isDemoMode) return null;\n\n      return apiKeys.map((key) => (\n        <Select.Item\n          key={key}\n          value={key}\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>{key}</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    }, [apiKeys, isDemoMode]);\n\n    // Render the demo mode UI\n    const renderDemoMode = useMemo(\n      () => (\n        <div className=\"flex items-center\">\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=\"inline-flex items-center justify-between rounded px-2 py-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-1 focus-base\"\n            aria-label=\"API Key\"\n          >\n            <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 className=\"overflow-hidden rounded-md 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=\"p-1\">{apiKeyItems}</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    }, [\n      apiKeys,\n      isDemoMode,\n      selectedApiKey,\n      onApiKeyChange,\n      apiKeyItems,\n      renderDemoMode,\n    ]);\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\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,iBAAmB,CACvBC,KAAM,MACR,EAEA,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaX,QACjB,IAAMQ,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CACnE,CAACE,QAAQ,EAIX,MAAMK,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,mRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,eAAiBvB,QACrB,IACE,oBAACwB,OAAIN,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVO,eACE,oBAACtB,MACCkB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuB3B,QAAQ,KACnC,GAAIW,WAAY,CACd,OAAOY,cACT,CAEA,GAAI,CAACf,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO2B,IAAI,EAACX,MAAOR,eAAgBoB,cAAenB,gBACjD,oBAACT,OAAO6B,OAAO,EACbZ,UAAU,kNACVa,aAAW,WAEX,oBAAC9B,OAAO+B,KAAK,OACb,oBAAC/B,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAOgC,MAAM,MACZ,oBAAChC,OAAOiC,OAAO,EAAChB,UAAU,oIACxB,oBAACjB,OAAOkC,cAAc,EAACjB,UAAU,8IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLc,cAAc,gBAIlB,oBAACnC,OAAOoC,QAAQ,EAACnB,UAAU,OAAOL,aAElC,oBAACZ,OAAOqC,gBAAgB,EAACpB,UAAU,8IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDd,QACAG,WACAF,eACAC,eACAG,YACAU,eACD,EAED,OACE,oBAACC,OAAIN,UAAU,oFACb,oBAACqB,QAAKrB,UAAU,8DAA6D,YAG5ES,qBAGP,EAIFpB,CAAAA,eAAeiC,WAAW,CAAG,gBAE7B,gBAAejC,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-8 right-8 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-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 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\ninterface 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-8 right-8 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-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 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,+JAA8J,WAG3K,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\ninterface 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";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-8 py-6 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-8"},React.createElement(Icon,{name:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages,getLanguageDisplayName,getLanguageIcon]);const mobileSelectValue=useMemo(()=>activeLanguage&&activeLanguageInfo?React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label)):null,[activeLanguage,activeLanguageInfo]);return React.createElement("div",{className:"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]"},React.createElement("div",{className:"hidden sm:flex gap-8"},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-12 py-8 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-4 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-24 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-4"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 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;
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);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:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages,getLanguageDisplayName,getLanguageIcon]);const mobileSelectValue=useMemo(()=>activeLanguage&&activeLanguageInfo?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label)):null,[activeLanguage,activeLanguageInfo]);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 { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\nimport { LanguageInfo } from \"./languages\";\n\ninterface LanguageSelectorProps {\n  languages: string[];\n  activeLanguage: string | null;\n  onLanguageChange: (language: string) => void;\n  getLanguageDisplayName: (lang: string) => string;\n  getLanguageIcon: (lang: string) => IconName;\n  activeLanguageInfo: LanguageInfo | null;\n}\n\nconst LanguageSelector = memo(\n  ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n    getLanguageDisplayName,\n    getLanguageIcon,\n    activeLanguageInfo,\n  }: LanguageSelectorProps) => {\n    // Memoize the desktop language elements to avoid recreating on each render\n    const desktopLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => {\n          const active = activeLanguage === lang;\n          const displayName = getLanguageDisplayName(lang);\n\n          return (\n            <TooltipButton\n              key={lang}\n              tooltip={displayName}\n              active={active}\n              onClick={() => onLanguageChange(lang)}\n              icon={getLanguageIcon(lang)}\n              variant=\"segmented\"\n              size=\"sm\"\n            >\n              {displayName}\n            </TooltipButton>\n          );\n        }),\n      [\n        languages,\n        activeLanguage,\n        onLanguageChange,\n        getLanguageDisplayName,\n        getLanguageIcon,\n      ],\n    );\n\n    // Memoize the mobile language elements\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-8 py-6 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-8\">\n                <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n                <span>{getLanguageDisplayName(lang)}</span>\n              </div>\n            </Select.ItemText>\n            <Select.ItemIndicator className=\"absolute right-8\">\n              <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n            </Select.ItemIndicator>\n          </Select.Item>\n        )),\n      [languages, getLanguageDisplayName, getLanguageIcon],\n    );\n\n    // Memoize the mobile Select.Value content as it's recreated on every render\n    const mobileSelectValue = useMemo(\n      () =>\n        activeLanguage && activeLanguageInfo ? (\n          <div className=\"flex items-center gap-8\">\n            <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n            <span>{activeLanguageInfo.label}</span>\n          </div>\n        ) : null,\n      [activeLanguage, activeLanguageInfo],\n    );\n\n    return (\n      <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n        {/* Desktop language selector - SegmentedControls */}\n        <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n        {/* Mobile language selector - Select dropdown */}\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-12 py-8 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-4 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-24 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-4\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-24 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","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","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,AAE3B,QAAOC,kBAAmB,iBAAkB,CAY5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,+QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,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 { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\nimport { LanguageInfo } from \"./languages\";\n\ninterface LanguageSelectorProps {\n  languages: string[];\n  activeLanguage: string | null;\n  onLanguageChange: (language: string) => void;\n  getLanguageDisplayName: (lang: string) => string;\n  getLanguageIcon: (lang: string) => IconName;\n  activeLanguageInfo: LanguageInfo | null;\n}\n\nconst LanguageSelector = memo(\n  ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n    getLanguageDisplayName,\n    getLanguageIcon,\n    activeLanguageInfo,\n  }: LanguageSelectorProps) => {\n    // Memoize the desktop language elements to avoid recreating on each render\n    const desktopLanguageElements = useMemo(\n      () =>\n        languages.map((lang) => {\n          const active = activeLanguage === lang;\n          const displayName = getLanguageDisplayName(lang);\n\n          return (\n            <TooltipButton\n              key={lang}\n              tooltip={displayName}\n              active={active}\n              onClick={() => onLanguageChange(lang)}\n              icon={getLanguageIcon(lang)}\n              variant=\"segmented\"\n              size=\"sm\"\n            >\n              {displayName}\n            </TooltipButton>\n          );\n        }),\n      [\n        languages,\n        activeLanguage,\n        onLanguageChange,\n        getLanguageDisplayName,\n        getLanguageIcon,\n      ],\n    );\n\n    // Memoize the mobile language elements\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={getLanguageIcon(lang)} size=\"20px\" />\n                <span>{getLanguageDisplayName(lang)}</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, getLanguageDisplayName, getLanguageIcon],\n    );\n\n    // Memoize the mobile Select.Value content as it's recreated on every render\n    const mobileSelectValue = useMemo(\n      () =>\n        activeLanguage && activeLanguageInfo ? (\n          <div className=\"flex items-center gap-2\">\n            <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n            <span>{activeLanguageInfo.label}</span>\n          </div>\n        ) : null,\n      [activeLanguage, activeLanguageInfo],\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        {/* Desktop language selector - SegmentedControls */}\n        <div className=\"hidden sm:flex gap-2\">{desktopLanguageElements}</div>\n\n        {/* Mobile language selector - Select dropdown */}\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","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","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,AAE3B,QAAOC,kBAAmB,iBAAkB,CAY5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,mRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,yFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,8QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,8IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,8IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}

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

package/core/CodeSnippet/ShellCommandView.js.map

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

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-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-32 h-32 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,"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,"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\ninterface 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-32 h-32 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          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,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,yKACAM,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\ninterface 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          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,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,uKACAM,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"}

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{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";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 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{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?apiKeys[0]:"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||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},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(selectedApiKey)){setSelectedApiKey(apiKeys[0])}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 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."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}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-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] 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-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] inline-flex items-center px-12",{"rounded-t-lg":!headerRow},{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";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 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{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?apiKeys[0]:"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||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},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(selectedApiKey)){setSelectedApiKey(apiKeys[0])}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;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."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}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:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3",{"rounded-t-lg":!headerRow},{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map