@ably/ui 17.5.7 → 17.5.8-dev.3d7b3b22

package/README.md

@@ -343,6 +343,19 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http://
 
 This will release the packages and update library and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. It will also deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/).
 
+### Review Apps
+
+Review apps allow you to create temporary deployments of Storybook for sharing UI changes with stakeholders without requiring local development setup.
+
+To create a review app:
+
+1. Create a pull request with your changes
+2. Add the `review-app` label to your PR
+3. A Heroku review app will be automatically created and deployed
+4. The deployment will appear in the deployments section of your PR (basic auth is enabled - ask fellow contributors for credentials if needed)
+
+Review apps are automatically cleaned up when the PR is closed or the label is removed. Only repository contributors can create review apps.
+
 ### Running tests
 
 `ably-ui` uses Storybook's `test-runner`, which on push automatically turns all stories into executable tests, underpinned by Jest and Playright. This means that we don't have to explicitly write tests for stories, though we have the ability to write [https://storybook.js.org/docs/writing-stories/play-function](play functions), which allow us to test more detailed interactions. More information on the capabilities of `test-runner` can be found [https://storybook.js.org/docs/writing-tests/test-runner](here).

package/core/Accordion/utils.js

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

package/core/Accordion/utils.js.map

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

package/core/Accordion.js

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

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-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 /*#__PURE__*/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?/*#__PURE__*/React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,/*#__PURE__*/React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass)},children),iconAfter?/*#__PURE__*/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-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,oBACE,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,wBACC,oBAACL,MAAKqB,KAAMhB,WAAYF,KAAMS,SAAUR,MAAOY,aAC7C,kBACJ,oBAACM,QAAKf,UAAWN,GAAG,sCAAuCc,aACxDP,UAEFF,uBACC,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/Button.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};export const commonButtonProps=props=>{const{variant="primary",size,leftIcon,rightIcon,className}=props;return{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className)}};export const commonButtonInterior=props=>{const{leftIcon,rightIcon,iconColor,children}=props;return /*#__PURE__*/React.createElement(React.Fragment,null,leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon,additionalCSS:iconColor}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon,additionalCSS:iconColor}):null)};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,iconColor,...rest})=>{return /*#__PURE__*/React.createElement("button",{...commonButtonProps({variant,size,leftIcon,rightIcon,className}),...rest},commonButtonInterior({leftIcon,rightIcon,iconColor,children}))};export default Button;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};export const commonButtonProps=props=>{const{variant="primary",size,leftIcon,rightIcon,className}=props;return{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className)}};export const commonButtonInterior=props=>{const{leftIcon,rightIcon,iconColor,children}=props;return React.createElement(React.Fragment,null,leftIcon?React.createElement(Icon,{name:leftIcon,additionalCSS:iconColor}):null,children,rightIcon?React.createElement(Icon,{name:rightIcon,additionalCSS:iconColor}):null)};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,iconColor,...rest})=>{return React.createElement("button",{...commonButtonProps({variant,size,leftIcon,rightIcon,className}),...rest},commonButtonInterior({leftIcon,rightIcon,iconColor,children}))};export default Button;
 //# sourceMappingURL=Button.js.map

package/core/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { IconName } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\n\nexport type ButtonType = \"priority\" | \"primary\" | \"secondary\";\n\ntype ButtonSize = \"lg\" | \"md\" | \"sm\" | \"xs\";\n\nexport type ButtonPropsBase = {\n  /**\n   * The type of button: priority, primary, or secondary.\n   */\n  variant?: ButtonType;\n  /**\n   * The button size: lg, sm, or xs. Leave empty for md.\n   */\n  size?: ButtonSize;\n  /**\n   * An icon to render on the left side of the button label.\n   */\n  leftIcon?: IconName;\n  /**\n   * An icon to render on the right side of the button label.\n   */\n  rightIcon?: IconName;\n  /**\n   * Optional classes to add to the button element.\n   */\n  className?: string;\n  /**\n   * Optional color to apply to the icon on either left and/or right side of the button.\n   */\n  iconColor?: ColorClass | ColorThemeSet;\n};\n\ntype ButtonProps = ButtonPropsBase &\n  React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n// got to go the long way round because of ol' mate Taily Waily\nconst buttonClasses: Record<ButtonType, Record<ButtonSize, string>> = {\n  priority: {\n    lg: \"ui-button-priority-lg\",\n    md: \"ui-button-priority\",\n    sm: \"ui-button-priority-sm\",\n    xs: \"ui-button-priority-xs\",\n  },\n  primary: {\n    lg: \"ui-button-primary-lg\",\n    md: \"ui-button-primary\",\n    sm: \"ui-button-primary-sm\",\n    xs: \"ui-button-primary-xs\",\n  },\n  secondary: {\n    lg: \"ui-button-secondary-lg\",\n    md: \"ui-button-secondary\",\n    sm: \"ui-button-secondary-sm\",\n    xs: \"ui-button-secondary-xs\",\n  },\n};\n\nexport const iconModifierClasses: Record<\n  ButtonSize,\n  { left: string; right: string }\n> = {\n  lg: { left: \"ui-button-lg-left-icon\", right: \"ui-button-lg-right-icon\" },\n  md: { left: \"ui-button-left-icon\", right: \"ui-button-right-icon\" },\n  sm: { left: \"ui-button-sm-left-icon\", right: \"ui-button-sm-right-icon\" },\n  xs: { left: \"\", right: \"\" },\n};\n\nexport const commonButtonProps = (props: ButtonPropsBase) => {\n  const { variant = \"primary\", size, leftIcon, rightIcon, className } = props;\n\n  return {\n    className: cn(\n      buttonClasses[variant][size ?? \"md\"],\n      { [iconModifierClasses[size ?? \"md\"].left]: leftIcon },\n      { [iconModifierClasses[size ?? \"md\"].right]: rightIcon },\n      className,\n    ),\n  };\n};\n\nexport const commonButtonInterior = (\n  props: PropsWithChildren<ButtonPropsBase>,\n) => {\n  const { leftIcon, rightIcon, iconColor, children } = props;\n  return (\n    <>\n      {leftIcon ? <Icon name={leftIcon} additionalCSS={iconColor} /> : null}\n      {children}\n      {rightIcon ? <Icon name={rightIcon} additionalCSS={iconColor} /> : null}\n    </>\n  );\n};\n\nconst Button: React.FC<PropsWithChildren<ButtonProps>> = ({\n  variant = \"primary\",\n  size,\n  leftIcon,\n  rightIcon,\n  children,\n  className,\n  iconColor,\n  ...rest\n}) => {\n  return (\n    <button\n      {...commonButtonProps({ variant, size, leftIcon, rightIcon, className })}\n      {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n    >\n      {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })}\n    </button>\n  );\n};\n\nexport default Button;\n"],"names":["React","Icon","cn","buttonClasses","priority","lg","md","sm","xs","primary","secondary","iconModifierClasses","left","right","commonButtonProps","props","variant","size","leftIcon","rightIcon","className","commonButtonInterior","iconColor","children","name","additionalCSS","Button","rest","button"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AAEjD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAsC5B,MAAMC,cAAgE,CACpEC,SAAU,CACRC,GAAI,wBACJC,GAAI,qBACJC,GAAI,wBACJC,GAAI,uBACN,EACAC,QAAS,CACPJ,GAAI,uBACJC,GAAI,oBACJC,GAAI,uBACJC,GAAI,sBACN,EACAE,UAAW,CACTL,GAAI,yBACJC,GAAI,sBACJC,GAAI,yBACJC,GAAI,wBACN,CACF,CAEA,QAAO,MAAMG,oBAGT,CACFN,GAAI,CAAEO,KAAM,yBAA0BC,MAAO,yBAA0B,EACvEP,GAAI,CAAEM,KAAM,sBAAuBC,MAAO,sBAAuB,EACjEN,GAAI,CAAEK,KAAM,yBAA0BC,MAAO,yBAA0B,EACvEL,GAAI,CAAEI,KAAM,GAAIC,MAAO,EAAG,CAC5B,CAAE,AAEF,QAAO,MAAMC,kBAAoB,AAACC,QAChC,KAAM,CAAEC,QAAU,SAAS,CAAEC,IAAI,CAAEC,QAAQ,CAAEC,SAAS,CAAEC,SAAS,CAAE,CAAGL,MAEtE,MAAO,CACLK,UAAWlB,GACTC,aAAa,CAACa,QAAQ,CAACC,MAAQ,KAAK,CACpC,CAAE,CAACN,mBAAmB,CAACM,MAAQ,KAAK,CAACL,IAAI,CAAC,CAAEM,QAAS,EACrD,CAAE,CAACP,mBAAmB,CAACM,MAAQ,KAAK,CAACJ,KAAK,CAAC,CAAEM,SAAU,EACvDC,UAEJ,CACF,CAAE,AAEF,QAAO,MAAMC,qBAAuB,AAClCN,QAEA,KAAM,CAAEG,QAAQ,CAAEC,SAAS,CAAEG,SAAS,CAAEC,QAAQ,CAAE,CAAGR,MACrD,oBACE,wCACGG,sBAAW,oBAACjB,MAAKuB,KAAMN,SAAUO,cAAeH,YAAgB,KAChEC,SACAJ,uBAAY,oBAAClB,MAAKuB,KAAML,UAAWM,cAAeH,YAAgB,KAGzE,CAAE,CAEF,MAAMI,OAAmD,CAAC,CACxDV,QAAU,SAAS,CACnBC,IAAI,CACJC,QAAQ,CACRC,SAAS,CACTI,QAAQ,CACRH,SAAS,CACTE,SAAS,CACT,GAAGK,KACJ,IACC,oBACE,oBAACC,UACE,GAAGd,kBAAkB,CAAEE,QAASC,KAAMC,SAAUC,UAAWC,SAAU,EAAE,CACvE,GAAIO,IAAI,EAERN,qBAAqB,CAAEH,SAAUC,UAAWG,UAAWC,QAAS,GAGvE,CAEA,gBAAeG,MAAO"}
+{"version":3,"sources":["../../src/core/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { IconName } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\n\nexport type ButtonType = \"priority\" | \"primary\" | \"secondary\";\n\ntype ButtonSize = \"lg\" | \"md\" | \"sm\" | \"xs\";\n\nexport type ButtonPropsBase = {\n  /**\n   * The type of button: priority, primary, or secondary.\n   */\n  variant?: ButtonType;\n  /**\n   * The button size: lg, sm, or xs. Leave empty for md.\n   */\n  size?: ButtonSize;\n  /**\n   * An icon to render on the left side of the button label.\n   */\n  leftIcon?: IconName;\n  /**\n   * An icon to render on the right side of the button label.\n   */\n  rightIcon?: IconName;\n  /**\n   * Optional classes to add to the button element.\n   */\n  className?: string;\n  /**\n   * Optional color to apply to the icon on either left and/or right side of the button.\n   */\n  iconColor?: ColorClass | ColorThemeSet;\n};\n\ntype ButtonProps = ButtonPropsBase &\n  React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n// got to go the long way round because of ol' mate Taily Waily\nconst buttonClasses: Record<ButtonType, Record<ButtonSize, string>> = {\n  priority: {\n    lg: \"ui-button-priority-lg\",\n    md: \"ui-button-priority\",\n    sm: \"ui-button-priority-sm\",\n    xs: \"ui-button-priority-xs\",\n  },\n  primary: {\n    lg: \"ui-button-primary-lg\",\n    md: \"ui-button-primary\",\n    sm: \"ui-button-primary-sm\",\n    xs: \"ui-button-primary-xs\",\n  },\n  secondary: {\n    lg: \"ui-button-secondary-lg\",\n    md: \"ui-button-secondary\",\n    sm: \"ui-button-secondary-sm\",\n    xs: \"ui-button-secondary-xs\",\n  },\n};\n\nexport const iconModifierClasses: Record<\n  ButtonSize,\n  { left: string; right: string }\n> = {\n  lg: { left: \"ui-button-lg-left-icon\", right: \"ui-button-lg-right-icon\" },\n  md: { left: \"ui-button-left-icon\", right: \"ui-button-right-icon\" },\n  sm: { left: \"ui-button-sm-left-icon\", right: \"ui-button-sm-right-icon\" },\n  xs: { left: \"\", right: \"\" },\n};\n\nexport const commonButtonProps = (props: ButtonPropsBase) => {\n  const { variant = \"primary\", size, leftIcon, rightIcon, className } = props;\n\n  return {\n    className: cn(\n      buttonClasses[variant][size ?? \"md\"],\n      { [iconModifierClasses[size ?? \"md\"].left]: leftIcon },\n      { [iconModifierClasses[size ?? \"md\"].right]: rightIcon },\n      className,\n    ),\n  };\n};\n\nexport const commonButtonInterior = (\n  props: PropsWithChildren<ButtonPropsBase>,\n) => {\n  const { leftIcon, rightIcon, iconColor, children } = props;\n  return (\n    <>\n      {leftIcon ? <Icon name={leftIcon} additionalCSS={iconColor} /> : null}\n      {children}\n      {rightIcon ? <Icon name={rightIcon} additionalCSS={iconColor} /> : null}\n    </>\n  );\n};\n\nconst Button: React.FC<PropsWithChildren<ButtonProps>> = ({\n  variant = \"primary\",\n  size,\n  leftIcon,\n  rightIcon,\n  children,\n  className,\n  iconColor,\n  ...rest\n}) => {\n  return (\n    <button\n      {...commonButtonProps({ variant, size, leftIcon, rightIcon, className })}\n      {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n    >\n      {commonButtonInterior({ leftIcon, rightIcon, iconColor, children })}\n    </button>\n  );\n};\n\nexport default Button;\n"],"names":["React","Icon","cn","buttonClasses","priority","lg","md","sm","xs","primary","secondary","iconModifierClasses","left","right","commonButtonProps","props","variant","size","leftIcon","rightIcon","className","commonButtonInterior","iconColor","children","name","additionalCSS","Button","rest","button"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AAEjD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAsC5B,MAAMC,cAAgE,CACpEC,SAAU,CACRC,GAAI,wBACJC,GAAI,qBACJC,GAAI,wBACJC,GAAI,uBACN,EACAC,QAAS,CACPJ,GAAI,uBACJC,GAAI,oBACJC,GAAI,uBACJC,GAAI,sBACN,EACAE,UAAW,CACTL,GAAI,yBACJC,GAAI,sBACJC,GAAI,yBACJC,GAAI,wBACN,CACF,CAEA,QAAO,MAAMG,oBAGT,CACFN,GAAI,CAAEO,KAAM,yBAA0BC,MAAO,yBAA0B,EACvEP,GAAI,CAAEM,KAAM,sBAAuBC,MAAO,sBAAuB,EACjEN,GAAI,CAAEK,KAAM,yBAA0BC,MAAO,yBAA0B,EACvEL,GAAI,CAAEI,KAAM,GAAIC,MAAO,EAAG,CAC5B,CAAE,AAEF,QAAO,MAAMC,kBAAoB,AAACC,QAChC,KAAM,CAAEC,QAAU,SAAS,CAAEC,IAAI,CAAEC,QAAQ,CAAEC,SAAS,CAAEC,SAAS,CAAE,CAAGL,MAEtE,MAAO,CACLK,UAAWlB,GACTC,aAAa,CAACa,QAAQ,CAACC,MAAQ,KAAK,CACpC,CAAE,CAACN,mBAAmB,CAACM,MAAQ,KAAK,CAACL,IAAI,CAAC,CAAEM,QAAS,EACrD,CAAE,CAACP,mBAAmB,CAACM,MAAQ,KAAK,CAACJ,KAAK,CAAC,CAAEM,SAAU,EACvDC,UAEJ,CACF,CAAE,AAEF,QAAO,MAAMC,qBAAuB,AAClCN,QAEA,KAAM,CAAEG,QAAQ,CAAEC,SAAS,CAAEG,SAAS,CAAEC,QAAQ,CAAE,CAAGR,MACrD,OACE,wCACGG,SAAW,oBAACjB,MAAKuB,KAAMN,SAAUO,cAAeH,YAAgB,KAChEC,SACAJ,UAAY,oBAAClB,MAAKuB,KAAML,UAAWM,cAAeH,YAAgB,KAGzE,CAAE,CAEF,MAAMI,OAAmD,CAAC,CACxDV,QAAU,SAAS,CACnBC,IAAI,CACJC,QAAQ,CACRC,SAAS,CACTI,QAAQ,CACRH,SAAS,CACTE,SAAS,CACT,GAAGK,KACJ,IACC,OACE,oBAACC,UACE,GAAGd,kBAAkB,CAAEE,QAASC,KAAMC,SAAUC,UAAWC,SAAU,EAAE,CACvE,GAAIO,IAAI,EAERN,qBAAqB,CAAEH,SAAUC,UAAWG,UAAWC,QAAS,GAGvE,CAEA,gBAAeG,MAAO"}

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-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 /*#__PURE__*/React.createElement("div",{className:cn("hljs overflow-y-auto flex",padding,additionalCSS),"data-id":"code"},showLines?/*#__PURE__*/React.createElement("div",{className:"text-code leading-6 pt-px"},[...Array(lineCount)].map((_,i)=>/*#__PURE__*/React.createElement("p",{className:cn("mr-4 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,/*#__PURE__*/React.createElement("pre",{lang:language,className:"overflow-x-auto h-full flex-1 leading-6"},/*#__PURE__*/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-y-auto flex",padding,additionalCSS),"data-id":"code"},showLines?React.createElement("div",{className:"text-code leading-6 pt-px"},[...Array(lineCount)].map((_,i)=>React.createElement("p",{className:cn("mr-4 font-mono text-right text-neutral-800",lineCSS),key:i},i+1))):null,React.createElement("pre",{lang:language,className:"overflow-x-auto h-full flex-1 leading-6"},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-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-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-code leading-6 pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 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} className=\"overflow-x-auto h-full flex-1 leading-6\">\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,oBACE,oBAACC,OACCL,UAAWZ,GAAG,4BAA6BK,QAASC,eACpDY,UAAQ,QAEPX,uBACC,oBAACU,OAAIL,UAAU,6BACZ,IAAIO,MAAMJ,WAAW,CAACK,GAAG,CAAC,CAACC,EAAGC,iBAC7B,oBAACC,KACCX,UAAWZ,GACT,6CACAQ,SAEFgB,IAAKF,GAEJA,EAAI,KAIT,kBACJ,oBAACG,OAAIC,KAAMxB,SAAUU,UAAU,wDAC7B,oBAACe,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-y-auto flex\", padding, additionalCSS)}\n      data-id=\"code\"\n    >\n      {showLines ? (\n        <div className=\"text-code leading-6 pt-px\">\n          {[...Array(lineCount)].map((_, i) => (\n            <p\n              className={cn(\n                \"mr-4 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} className=\"overflow-x-auto h-full flex-1 leading-6\">\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,4BAA6BK,QAASC,eACpDY,UAAQ,QAEPX,UACC,oBAACU,OAAIL,UAAU,6BACZ,IAAIO,MAAMJ,WAAW,CAACK,GAAG,CAAC,CAACC,EAAGC,IAC7B,oBAACC,KACCX,UAAWZ,GACT,6CACAQ,SAEFgB,IAAKF,GAEJA,EAAI,KAIT,KACJ,oBAACG,OAAIC,KAAMxB,SAAUU,UAAU,2CAC7B,oBAACe,QACCf,UAAWA,UACXgB,wBAAyB,CAAEC,OAAQlB,OAAQ,KAKrD,CAEA,gBAAeV,IAAK"}

package/core/CodeSnippet/ApiKeySelector.js

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

package/core/CodeSnippet/ApiKeySelector.js.map

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

package/core/CodeSnippet/CopyButton.js

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

package/core/CodeSnippet/CopyButton.js.map

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

package/core/CodeSnippet/LanguageSelector.js

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

package/core/CodeSnippet/LanguageSelector.js.map

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

package/core/CodeSnippet/PlainCodeView.js

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

package/core/CodeSnippet/PlainCodeView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n  content: string;\n  language: string;\n  icon: IconName | null;\n  className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n  content,\n  className,\n  language,\n  icon,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the content\n  const handleCopy = useCallback(() => {\n    copy(content);\n  }, [copy, content]);\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center\",\n        language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n        className,\n      )}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onFocus={() => setIsHovering(true)}\n      onBlur={() => setIsHovering(false)}\n      tabIndex={0}\n      ref={codeRef}\n    >\n      {icon && (\n        <div className=\"absolute top-2 left-2 z-10\">\n          <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n            <Icon\n              name={icon}\n              size=\"20px\"\n              color=\"text-neutral-1300 dark:text-neutral-000\"\n            />\n          </div>\n        </div>\n      )}\n\n      <Code\n        language={language}\n        snippet={content}\n        additionalCSS={cn(\n          \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n          icon && \"pl-14\",\n        )}\n        showLines={false}\n      />\n\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,oBACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,mBACC,oBAACO,OAAIT,UAAU,2CACb,oBAACS,OAAIT,UAAU,wGACb,oBAACP,MACCuB,KAAMd,KACNe,KAAK,OACLC,MAAM,2DAMd,oBAACxB,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAezB,GACb,+FACAO,MAAQ,SAEVmB,UAAW,QAGZf,yBAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,6BAAe/B,KAAKM,cAAe"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n  content: string;\n  language: string;\n  icon: IconName | null;\n  className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n  content,\n  className,\n  language,\n  icon,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard();\n  const codeRef = useRef<HTMLDivElement>(null);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Handler to copy the content\n  const handleCopy = useCallback(() => {\n    copy(content);\n  }, [copy, content]);\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center\",\n        language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n        className,\n      )}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onFocus={() => setIsHovering(true)}\n      onBlur={() => setIsHovering(false)}\n      tabIndex={0}\n      ref={codeRef}\n    >\n      {icon && (\n        <div className=\"absolute top-2 left-2 z-10\">\n          <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n            <Icon\n              name={icon}\n              size=\"20px\"\n              color=\"text-neutral-1300 dark:text-neutral-000\"\n            />\n          </div>\n        </div>\n      )}\n\n      <Code\n        language={language}\n        snippet={content}\n        additionalCSS={cn(\n          \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n          icon && \"pl-14\",\n        )}\n        showLines={false}\n      />\n\n      {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n    </div>\n  );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCuB,KAAMd,KACNe,KAAK,OACLC,MAAM,8CAMd,oBAACxB,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAezB,GACb,+FACAO,MAAQ,SAEVmB,UAAW,QAGZf,YAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,gBAAe/B,KAAKM,cAAe"}

package/core/CodeSnippet/TooltipButton.js

@@ -1,2 +1,2 @@
-import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=/*#__PURE__*/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 /*#__PURE__*/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 /*#__PURE__*/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 /*#__PURE__*/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\ntype TooltipButtonProps = {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n};\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton = memo(\n  ({\n    tooltip,\n    active = false,\n    onClick,\n    icon,\n    className,\n    children,\n    variant = \"segmented\",\n    size = \"sm\",\n    alwaysShowLabel = false,\n  }: TooltipButtonProps) => {\n    // Only show tooltip for inactive segmented controls or all icon buttons\n    const showTooltip =\n      (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n    // Determine whether to show children based on active state and alwaysShowLabel\n    const showChildren = active || alwaysShowLabel;\n\n    // Create the button element based on variant\n    const buttonElement = useMemo(() => {\n      if (variant === \"segmented\") {\n        return (\n          <SegmentedControl\n            size={size}\n            active={active}\n            onClick={onClick}\n            leftIcon={icon}\n            className={cn(\n              \"focus-base\",\n              active\n                ? \"bg-neutral-000 dark:bg-neutral-1300\"\n                : \"bg-neutral-100 dark:bg-neutral-1200\",\n              className,\n            )}\n          >\n            {showChildren ? children : null}\n          </SegmentedControl>\n        );\n      }\n\n      return (\n        <div\n          role=\"button\"\n          className={cn(\n            \"w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n            className,\n          )}\n          onClick={onClick}\n          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,2BAAgBL,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,oBACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,oBACE,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,oBACE,oBAACb,SAAQoB,eAAgBL,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAckB,WAAW,CAAG,eAE5B,gBAAelB,aAAc"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ntype TooltipButtonProps = {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n};\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton = memo(\n  ({\n    tooltip,\n    active = false,\n    onClick,\n    icon,\n    className,\n    children,\n    variant = \"segmented\",\n    size = \"sm\",\n    alwaysShowLabel = false,\n  }: TooltipButtonProps) => {\n    // Only show tooltip for inactive segmented controls or all icon buttons\n    const showTooltip =\n      (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n    // Determine whether to show children based on active state and alwaysShowLabel\n    const showChildren = active || alwaysShowLabel;\n\n    // Create the button element based on variant\n    const buttonElement = useMemo(() => {\n      if (variant === \"segmented\") {\n        return (\n          <SegmentedControl\n            size={size}\n            active={active}\n            onClick={onClick}\n            leftIcon={icon}\n            className={cn(\n              \"focus-base\",\n              active\n                ? \"bg-neutral-000 dark:bg-neutral-1300\"\n                : \"bg-neutral-100 dark:bg-neutral-1200\",\n              className,\n            )}\n          >\n            {showChildren ? children : null}\n          </SegmentedControl>\n        );\n      }\n\n      return (\n        <div\n          role=\"button\"\n          className={cn(\n            \"w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n            className,\n          )}\n          onClick={onClick}\n          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 Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[codeRef.current,selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>/*#__PURE__*/isValidElement(childrenArray[0])&&/*#__PURE__*/isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!/*#__PURE__*/isValidElement(child))return;const preElement=child;const codeElement=/*#__PURE__*/isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!sdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${sdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[sdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(sdk&&sdkTypes.has(sdk)){return`${sdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[lang,sdk,sdkTypes,filteredLanguages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}")&&code?.language===lang);return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey,lang]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return /*#__PURE__*/React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[languages]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),sdk)}},[onChange,sdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>/*#__PURE__*/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"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return /*#__PURE__*/React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return /*#__PURE__*/React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return /*#__PURE__*/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&&/*#__PURE__*/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"},/*#__PURE__*/React.createElement("div",{className:"flex space-x-1.5"},/*#__PURE__*/React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),/*#__PURE__*/React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),/*#__PURE__*/React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),/*#__PURE__*/React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),/*#__PURE__*/React.createElement("div",{className:"w-12"})),showSDKSelector&&/*#__PURE__*/React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},/*#__PURE__*/React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&/*#__PURE__*/React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:sdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&/*#__PURE__*/React.createElement(TooltipButton,{tooltip:"REST SDK",active:sdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?/*#__PURE__*/React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):/*#__PURE__*/React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&/*#__PURE__*/React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},/*#__PURE__*/React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),/*#__PURE__*/React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),/*#__PURE__*/React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&/*#__PURE__*/React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&/*#__PURE__*/React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[codeRef.current,selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!sdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${sdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[sdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(sdk&&sdkTypes.has(sdk)){return`${sdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[lang,sdk,sdkTypes,filteredLanguages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}")&&code?.language===lang);return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey,lang]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[languages]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),sdk)}},[onChange,sdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:sdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:sdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map