@ably/ui 18.0.0-dev.dbc599e55b → 18.1.0

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 */\nexport interface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. If not provided, it will be derived from the badge size.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n\n  /**\n   * Additional CSS class names to apply to the children of the badge.\n   */\n  childClassName?: string;\n}\n\nconst defaultIconSizeByBadgeSize: Record<\n  NonNullable<BadgeProps[\"size\"]>,\n  IconSize\n> = {\n  lg: \"16px\",\n  md: \"15px\",\n  sm: \"14px\",\n  xs: \"13px\",\n};\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  childClassName,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize,\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  const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n        sizeClass,\n        colorClass,\n        { \"focus-base\": focusable },\n        {\n          \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n            hoverable,\n        },\n        {\n          \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      role={focusable ? \"button\" : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={computedIconSize} color={colorClass} />\n      ) : null}\n\n      <span\n        className={cn(\n          \"whitespace-nowrap tracking-[0.04em]\",\n          childClass,\n          childClassName,\n        )}\n      >\n        {children}\n      </span>\n\n      {iconAfter ? (\n        <Icon name={iconAfter} size={computedIconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","defaultIconSizeByBadgeSize","lg","md","sm","xs","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","computedIconSize","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,2BAGF,CACFC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,QAAQ,CACRC,SAAS,CACV,IACC,MAAMC,UAAYrB,QAAQ,KACxB,OAAQS,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAatB,QAAQ,KACzB,OAAQS,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAavB,QAAQ,KACzB,OAAQU,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,MAAMc,iBAAmBL,UAAYhB,0BAA0B,CAACM,KAAK,CAErE,OACE,oBAACgB,OACCZ,UAAWX,GACT,wIACAmB,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFa,SAAUT,UAAY,EAAIU,UAC1BC,KAAMX,UAAY,SAAWU,UAC7BE,aAAYZ,WAAaC,UAAYE,UAAYO,WAEhDhB,WACC,oBAACV,MAAK6B,KAAMnB,WAAYF,KAAMe,iBAAkBd,MAAOa,aACrD,KAEJ,oBAACQ,QACClB,UAAWX,GACT,sCACAoB,WACAR,iBAGDC,UAGFH,UACC,oBAACX,MAAK6B,KAAMlB,UAAWH,KAAMe,iBAAkBd,MAAOa,aACpD,KAGV,CAEA,gBAAef,KAAM"}
+{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. If not provided, it will be derived from the badge size.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n\n  /**\n   * Additional CSS class names to apply to the children of the badge.\n   */\n  childClassName?: string;\n}\n\nconst defaultIconSizeByBadgeSize: Record<\n  NonNullable<BadgeProps[\"size\"]>,\n  IconSize\n> = {\n  lg: \"16px\",\n  md: \"15px\",\n  sm: \"14px\",\n  xs: \"13px\",\n};\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  childClassName,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize,\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  const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];\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-disabled-light dark:disabled:text-gui-disabled-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      role={focusable ? \"button\" : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={computedIconSize} color={colorClass} />\n      ) : null}\n\n      <span\n        className={cn(\n          \"whitespace-nowrap tracking-[0.04em]\",\n          childClass,\n          childClassName,\n        )}\n      >\n        {children}\n      </span>\n\n      {iconAfter ? (\n        <Icon name={iconAfter} size={computedIconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","defaultIconSizeByBadgeSize","lg","md","sm","xs","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","computedIconSize","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,2BAGF,CACFC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,QAAQ,CACRC,SAAS,CACV,IACC,MAAMC,UAAYrB,QAAQ,KACxB,OAAQS,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAatB,QAAQ,KACzB,OAAQS,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAavB,QAAQ,KACzB,OAAQU,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,MAAMc,iBAAmBL,UAAYhB,0BAA0B,CAACM,KAAK,CAErE,OACE,oBAACgB,OACCZ,UAAWX,GACT,wIACAmB,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFa,SAAUT,UAAY,EAAIU,UAC1BC,KAAMX,UAAY,SAAWU,UAC7BE,aAAYZ,WAAaC,UAAYE,UAAYO,WAEhDhB,WACC,oBAACV,MAAK6B,KAAMnB,WAAYF,KAAMe,iBAAkBd,MAAOa,aACrD,KAEJ,oBAACQ,QACClB,UAAWX,GACT,sCACAoB,WACAR,iBAGDC,UAGFH,UACC,oBAACX,MAAK6B,KAAMlB,UAAWH,KAAMe,iBAAkBd,MAAOa,aACpD,KAGV,CAEA,gBAAef,KAAM"}

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{parseLineHighlights}from"./utils/syntax-highlighter";import Icon from"./Icon";import{getLanguageInfo,stripSdkType,SDK_PREFIXES}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import SegmentedControl from"./SegmentedControl";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,wrapCode=false})=>{const codeRef=useRef(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const findCodeElement=useCallback(preChildren=>{if(isValidElement(preChildren)){return preChildren}if(Array.isArray(preChildren)){const codeEl=preChildren.find(c=>isValidElement(c));return codeEl&&isValidElement(codeEl)?codeEl:null}return null},[]);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=>{if(!isValidElement(childrenArray[0]))return false;const codeEl=findCodeElement(childrenArray[0].props.children);return codeEl?.props.className?.includes(lang)});childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=findCodeElement(preElement.props.children);if(!codeElement)return;const rawLanguage=extractLanguageFromCode(codeElement);if(!rawLanguage)return;const meta=codeElement.props?.["data-meta"];const{lang:codeLanguage,highlights:lineHighlights}=parseLineHighlights(rawLanguage,meta);for(const prefix of SDK_PREFIXES){if(codeLanguage.startsWith(`${prefix}_`)){sdkTypes.add(prefix);break}}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent,lineHighlights})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode,findCodeElement]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.has("realtime")||sdkTypes.has("rest");const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk==="client"||resolvedSdk==="agent"){const fullLang=`${resolvedSdk}_${lang}`;if(languages.includes(fullLang)){return fullLang}const prefixMatch=languages.find(l=>l.startsWith(`${resolvedSdk}_`));if(prefixMatch)return prefixMatch}if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines,wrap:wrapCode,lineHighlights:Object.keys(code.lineHighlights).length>0?code.lineHighlights:undefined})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,wrapCode,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const noSnippetMessage=useMemo(()=>{if(!activeLanguage)return null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const showFixedLanguageLabel=fixed&&activeLanguage;const renderLanguageLabel=(langKey,onClick)=>React.createElement("div",{className:cn("border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},React.createElement("div",{className:cn("inline-flex items-center",onClick&&"cursor-pointer"),...onClick&&{onClick}},React.createElement(Icon,{name:getLanguageInfo(langKey).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(langKey).label)));const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return noSnippetMessage},[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-300 dark:border-neutral-1000",sdkTypes.size===1&&"p-1",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-1 justify-start"},["realtime","rest"].map(type=>sdkTypes.has(type)&&React.createElement(SegmentedControl,{key:type,onClick:()=>handleSDKTypeChange(type),size:"xs",active:resolvedSdk===type,className:cn("text-[11px] font-semibold px-2 py-1 h-auto",sdkTypes.size===1&&"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500",sdkTypes.size>1&&resolvedSdk!==type&&"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900",sdkTypes.size>1&&resolvedSdk===type&&"bg-neutral-000 dark:bg-neutral-1100")},type==="realtime"?"Realtime":"REST")))),showFixedLanguageLabel&&renderLanguageLabel(activeLanguage),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):renderLanguageLabel(filteredLanguages[0],()=>handleLanguageChange(filteredLanguages[0]))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false)},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)navigator.clipboard.writeText(substituteApiKey(text,selectedApiKey,false))}})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
+import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{parseLineHighlights}from"./utils/syntax-highlighter";import Icon from"./Icon";import{getLanguageInfo,stripSdkType,SDK_PREFIXES}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import SegmentedControl from"./SegmentedControl";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,wrapCode=false})=>{const codeRef=useRef(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");const[prevApiKeys,setPrevApiKeys]=useState(apiKeys);if(prevApiKeys!==apiKeys){setPrevApiKeys(apiKeys);if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key??"")}}useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const findCodeElement=useCallback(preChildren=>{if(isValidElement(preChildren)){return preChildren}if(Array.isArray(preChildren)){const codeEl=preChildren.find(c=>isValidElement(c));return codeEl&&isValidElement(codeEl)?codeEl:null}return null},[]);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=>{if(!isValidElement(childrenArray[0]))return false;const codeEl=findCodeElement(childrenArray[0].props.children);return codeEl?.props.className?.includes(lang)});childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=findCodeElement(preElement.props.children);if(!codeElement)return;const rawLanguage=extractLanguageFromCode(codeElement);if(!rawLanguage)return;const meta=codeElement.props?.["data-meta"];const{lang:codeLanguage,highlights:lineHighlights}=parseLineHighlights(rawLanguage,meta);for(const prefix of SDK_PREFIXES){if(codeLanguage.startsWith(`${prefix}_`)){sdkTypes.add(prefix);break}}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent,lineHighlights})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode,findCodeElement]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.has("realtime")||sdkTypes.has("rest");const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk==="client"||resolvedSdk==="agent"){const fullLang=`${resolvedSdk}_${lang}`;if(languages.includes(fullLang)){return fullLang}const prefixMatch=languages.find(l=>l.startsWith(`${resolvedSdk}_`));if(prefixMatch)return prefixMatch}if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines,wrap:wrapCode,lineHighlights:Object.keys(code.lineHighlights).length>0?code.lineHighlights:undefined})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,wrapCode,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const noSnippetMessage=useMemo(()=>{if(!activeLanguage)return null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const showFixedLanguageLabel=fixed&&activeLanguage;const renderLanguageLabel=(langKey,onClick)=>React.createElement("div",{className:cn("border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},React.createElement("div",{className:cn("inline-flex items-center",onClick&&"cursor-pointer"),...onClick&&{onClick}},React.createElement(Icon,{name:getLanguageInfo(langKey).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(langKey).label)));const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return noSnippetMessage},[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-300 dark:border-neutral-1000",sdkTypes.size===1&&"p-1",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-1 justify-start"},["realtime","rest"].map(type=>sdkTypes.has(type)&&React.createElement(SegmentedControl,{key:type,onClick:()=>handleSDKTypeChange(type),size:"xs",active:resolvedSdk===type,className:cn("text-[11px] font-semibold px-2 py-1 h-auto",sdkTypes.size===1&&"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500",sdkTypes.size>1&&resolvedSdk!==type&&"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900",sdkTypes.size>1&&resolvedSdk===type&&"bg-neutral-000 dark:bg-neutral-1100")},type==="realtime"?"Realtime":"REST")))),showFixedLanguageLabel&&renderLanguageLabel(activeLanguage),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):renderLanguageLabel(filteredLanguages[0],()=>handleLanguageChange(filteredLanguages[0]))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false)},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)navigator.clipboard.writeText(substituteApiKey(text,selectedApiKey,false))}})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
 //# sourceMappingURL=CodeSnippet.js.map

package/core/CodeSnippet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  Children,\n  isValidElement,\n  useRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport type { LineHighlightType } from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { parseLineHighlights } from \"./utils/syntax-highlighter\";\nimport Icon from \"./Icon\";\nimport {\n  getLanguageInfo,\n  stripSdkType,\n  SDK_PREFIXES,\n  SDKType,\n} from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport SegmentedControl from \"./SegmentedControl\";\n\n// Re-export SDKType for consumers\nexport type { SDKType };\n\n// Define API key types\nexport type ApiKeysItem = {\n  app: string;\n  keys: { name: string; key: string }[];\n};\n\nexport type CodeSnippetProps = {\n  /**\n   * If true, hides the language selector row completely\n   */\n  fixed?: boolean;\n  /**\n   * If true, renders a macOS-style window header with buttons and title\n   */\n  headerRow?: boolean;\n  /**\n   * Title to display in the header row (when headerRow is true)\n   */\n  title?: string;\n  /**\n   * Children elements with lang attribute\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Default language to display. If not found in available languages, first available is used.\n   * If found in languages but no matching snippet exists, a message is displayed.\n   */\n  lang: string | null;\n  /**\n   * Callback fired when the active language changes\n   */\n  onChange?: (language: string, sdk?: SDKType) => void;\n  /**\n   * List of API keys to display in a dropdown\n   */\n  apiKeys?: ApiKeysItem[];\n  /**\n   * Default SDK type to use for the code snippet\n   */\n  sdk?: SDKType;\n  /**\n   * Whether to show line numbers in code snippets\n   */\n  showCodeLines?: boolean;\n  /**\n   * Defines the order in which languages should be displayed.\n   * Languages not in this array will be shown after those that are included.\n   */\n  languageOrdering?: string[];\n  /**\n   * Whether to wrap code content instead of scrolling\n   */\n  wrapCode?: boolean;\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n  content: string,\n  apiKey: string,\n  mask = true,\n): string => {\n  return content.replace(\n    /\\{\\{API_KEY\\}\\}/g,\n    mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n  );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n  fixed = false,\n  headerRow = false,\n  title = \"Code\",\n  children,\n  className,\n  lang,\n  onChange,\n  apiKeys,\n  sdk,\n  showCodeLines = true,\n  languageOrdering,\n  wrapCode = false,\n}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n\n  const [selectedApiKey, setSelectedApiKey] = useState<string>(\n    () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n  );\n\n  useEffect(() => {\n    if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n      setSelectedApiKey(apiKeys[0].keys?.[0]?.key);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [apiKeys]);\n\n  useEffect(() => {\n    const element = codeRef.current;\n    if (!element) return;\n\n    // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n    const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n      return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n    };\n\n    const handleCopy = (event: ClipboardEvent) => {\n      const selection = window.getSelection();\n      if (!selection || selection.rangeCount === 0) return;\n\n      const selectedText = selection.toString();\n      if (!selectedText) return;\n\n      // Check if the selection is within our element\n      const range = selection.getRangeAt(0);\n      if (!element.contains(range.commonAncestorContainer)) return;\n\n      const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n      event.clipboardData?.setData(\"text/plain\", modifiedText);\n      event.preventDefault();\n    };\n\n    document.addEventListener(\"copy\", handleCopy);\n\n    return () => {\n      document.removeEventListener(\"copy\", handleCopy);\n    };\n  }, [selectedApiKey]);\n\n  const extractLanguageFromCode = useCallback(\n    (codeElement: React.ReactElement | null): string | null => {\n      if (!codeElement || !codeElement.props.className) return null;\n\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return null;\n\n      return langClass.substring(9); // Remove \"language-\" prefix\n    },\n    [],\n  );\n\n  // Helper to find the code element within pre's children (handles both single element and array)\n  const findCodeElement = useCallback(\n    (preChildren: React.ReactNode): React.ReactElement | null => {\n      if (isValidElement(preChildren)) {\n        return preChildren;\n      }\n      if (Array.isArray(preChildren)) {\n        const codeEl = preChildren.find((c) => isValidElement(c));\n        return codeEl && isValidElement(codeEl) ? codeEl : null;\n      }\n      return null;\n    },\n    [],\n  );\n\n  const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n    useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      const languages: string[] = [];\n      const sdkTypes = new Set<SDKType>();\n      const codeData: {\n        language: string;\n        content: string;\n        lineHighlights: Record<number, LineHighlightType>;\n      }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some((lang) => {\n          if (!isValidElement(childrenArray[0])) return false;\n          const codeEl = findCodeElement(childrenArray[0].props.children);\n          return codeEl?.props.className?.includes(lang);\n        });\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = findCodeElement(preElement.props.children);\n\n        if (!codeElement) return;\n\n        const rawLanguage = extractLanguageFromCode(codeElement);\n\n        if (!rawLanguage) return;\n\n        const meta: string | undefined = codeElement.props?.[\"data-meta\"];\n        const { lang: codeLanguage, highlights: lineHighlights } =\n          parseLineHighlights(rawLanguage, meta);\n\n        for (const prefix of SDK_PREFIXES) {\n          if (codeLanguage.startsWith(`${prefix}_`)) {\n            sdkTypes.add(prefix);\n            break;\n          }\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({\n          language: codeLanguage,\n          content: codeContent,\n          lineHighlights,\n        });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode, findCodeElement]);\n\n  // Resolve which SDK type to filter by. If the snippet only contains one SDK type\n  // and it doesn't match the current selector, fall back to the only available type.\n  // Returns undefined when no SDK prop is provided (e.g. plain code blocks without SDK prefixes).\n  const resolvedSdk: SDKType | undefined = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk;\n  }, [sdk, sdkTypes]);\n\n  // Only show SDK selector for realtime/rest types, not for client/agent (which are controlled by page-level selector)\n  const showSDKSelector = sdkTypes.has(\"realtime\") || sdkTypes.has(\"rest\");\n\n  const filteredLanguages = useMemo(() => {\n    const filtered =\n      !resolvedSdk || !showSDKSelector\n        ? [...languages]\n        : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n    // Apply custom ordering if provided\n    if (languageOrdering && languageOrdering.length > 0) {\n      filtered.sort((a, b) => {\n        const aBase = stripSdkType(a);\n        const bBase = stripSdkType(b);\n\n        const aIndex = languageOrdering.indexOf(aBase);\n        const bIndex = languageOrdering.indexOf(bBase);\n\n        if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n        if (aIndex !== -1) return -1;\n        if (bIndex !== -1) return 1;\n        return 0;\n      });\n    }\n\n    return filtered;\n  }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n  const activeLanguage = useMemo(() => {\n    // For client/agent SDK types (controlled by page-level selector), construct the full language\n    if (resolvedSdk === \"client\" || resolvedSdk === \"agent\") {\n      const fullLang = `${resolvedSdk}_${lang}`;\n      // Verify this language exists in available languages\n      if (languages.includes(fullLang)) {\n        return fullLang;\n      }\n      // Fall back to first language with this prefix\n      const prefixMatch = languages.find((l) =>\n        l.startsWith(`${resolvedSdk}_`),\n      );\n      if (prefixMatch) return prefixMatch;\n    }\n\n    // For realtime/rest SDK types\n    if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n      return `${resolvedSdk}_${lang}`;\n    }\n\n    if (lang) return lang;\n\n    if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n    return languages[0];\n  }, [resolvedSdk, sdkTypes, lang, filteredLanguages, languages]);\n\n  const requiresApiKeySubstitution = useMemo(() => {\n    const containsPlaceholder = codeData.some((code) =>\n      code?.content.includes(\"{{API_KEY}}\"),\n    );\n\n    return (\n      containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n    );\n  }, [codeData, apiKeys, selectedApiKey]);\n\n  const [isHovering, setIsHovering] = useState(false);\n\n  const hasOnlyJsonSnippet = useMemo(\n    () => languages.length === 1 && languages[0] === \"json\",\n    [languages],\n  );\n\n  const processedChildren = useMemo(() => {\n    if (!activeLanguage) return [];\n\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n    return codeData\n      .filter((code) => {\n        return code?.language === targetLanguage;\n      })\n      .map((code) => {\n        if (!code) return null;\n\n        const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n        const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n        if (\n          typeof code.content === \"string\" ||\n          typeof code.content === \"number\" ||\n          typeof code.content === \"boolean\"\n        ) {\n          // Apply API key substitution if apiKeys are provided\n          let processedContent = String(code.content);\n          if (requiresApiKeySubstitution) {\n            processedContent = substituteApiKey(\n              processedContent,\n              selectedApiKey,\n            );\n          }\n\n          if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n          return (\n            <Code\n              key={code.language}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={processedContent}\n              additionalCSS=\"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n              wrap={wrapCode}\n              lineHighlights={\n                Object.keys(code.lineHighlights).length > 0\n                  ? code.lineHighlights\n                  : undefined\n              }\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    hasOnlyJsonSnippet,\n    codeData,\n    requiresApiKeySubstitution,\n    showCodeLines,\n    wrapCode,\n    selectedApiKey,\n  ]);\n\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!activeLanguage) return false;\n    if (hasOnlyJsonSnippet) return true;\n\n    return codeData.some((code) => {\n      return code?.language === activeLanguage;\n    });\n  }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      const nextLang = stripSdkType(\n        languages.find(\n          (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n        ) ??\n          languages.find((l) => l.startsWith(`${type}_`)) ??\n          activeLanguage,\n      );\n\n      if (onChange && nextLang) {\n        onChange(stripSdkType(activeLanguage), type);\n      }\n    },\n    [activeLanguage, languages, onChange],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      if (onChange) {\n        onChange(stripSdkType(language), resolvedSdk);\n      }\n    },\n    [onChange, resolvedSdk],\n  );\n\n  const noSnippetMessage = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n    return (\n      <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\">\n        <Icon\n          name=\"icon-gui-exclamation-triangle-outline\"\n          color=\"text-yellow-600 dark:text-yellow-400\"\n          size=\"24px\"\n        />\n        <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n          You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n          There either isn&apos;t a {activeLanguageInfo.label} code sample for\n          this example, or this feature isn&apos;t supported in{\" \"}\n          {activeLanguageInfo.label}. Switch language to view this example in a\n          different language, or check which SDKs support this feature.\n        </p>\n      </div>\n    );\n  }, [activeLanguage]);\n\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n  const showFullSelector = filteredLanguages.length > 1;\n  // Show a read-only language label when fixed (controlled by external selector)\n  const showFixedLanguageLabel = fixed && activeLanguage;\n\n  const renderLanguageLabel = (langKey: string, onClick?: () => void) => (\n    <div\n      className={cn(\n        \"border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full\",\n        { \"rounded-t-lg\": !headerRow },\n      )}\n    >\n      <div\n        className={cn(\"inline-flex items-center\", onClick && \"cursor-pointer\")}\n        {...(onClick && { onClick })}\n      >\n        <Icon\n          name={getLanguageInfo(langKey).icon}\n          size=\"16px\"\n          additionalCSS=\"mr-2\"\n        />\n        <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n          {getLanguageInfo(langKey).label}\n        </span>\n      </div>\n    </div>\n  );\n\n  const renderContent = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    return noSnippetMessage;\n  }, [\n    activeLanguage,\n    hasSnippetForActiveLanguage,\n    processedChildren,\n    noSnippetMessage,\n  ]);\n\n  // Render special case for plain commands (shell or text)\n  if (isSinglePlainCommand) {\n    const plainChild = codeData[0];\n    if (plainChild) {\n      const codeContent = plainChild.content;\n      const language = plainChild.language;\n\n      if (!language || !codeContent) return null;\n\n      // Apply API key substitution if apiKeys are provided\n      let processedContent = String(codeContent);\n      if (requiresApiKeySubstitution) {\n        processedContent = substituteApiKey(processedContent, selectedApiKey);\n      }\n\n      return (\n        <PlainCodeView\n          content={processedContent}\n          className={className}\n          language={language}\n          icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n        />\n      );\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <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\">\n          <div className=\"flex space-x-1.5\">\n            <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n          </div>\n\n          <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n            {title}\n          </div>\n\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-300 dark:border-neutral-1000\",\n            sdkTypes.size === 1 && \"p-1\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-1 justify-start\">\n            {[\"realtime\", \"rest\"].map(\n              (type) =>\n                sdkTypes.has(type as SDKType) && (\n                  <SegmentedControl\n                    key={type}\n                    onClick={() => handleSDKTypeChange(type as SDKType)}\n                    size=\"xs\"\n                    active={resolvedSdk === type}\n                    className={cn(\n                      \"text-[11px] font-semibold px-2 py-1 h-auto\",\n                      sdkTypes.size === 1 &&\n                        \"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500\",\n                      sdkTypes.size > 1 &&\n                        resolvedSdk !== type &&\n                        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900\",\n                      sdkTypes.size > 1 &&\n                        resolvedSdk === type &&\n                        \"bg-neutral-000 dark:bg-neutral-1100\",\n                    )}\n                  >\n                    {type === \"realtime\" ? \"Realtime\" : \"REST\"}\n                  </SegmentedControl>\n                ),\n            )}\n          </div>\n        </div>\n      )}\n\n      {showFixedLanguageLabel && renderLanguageLabel(activeLanguage)}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          renderLanguageLabel(filteredLanguages[0], () =>\n            handleLanguageChange(filteredLanguages[0]),\n          )\n        ))}\n      <div\n        ref={codeRef}\n        className=\"relative\"\n        onMouseEnter={() => setIsHovering(true)}\n        onMouseLeave={() => setIsHovering(false)}\n        onFocus={() => setIsHovering(true)}\n        onBlur={() => setIsHovering(false)}\n      >\n        {renderContent}\n        {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text)\n                navigator.clipboard.writeText(\n                  substituteApiKey(text, selectedApiKey, false),\n                );\n            }}\n          />\n        )}\n      </div>\n      {requiresApiKeySubstitution && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={selectedApiKey}\n          onApiKeyChange={setSelectedApiKey}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","parseLineHighlights","Icon","getLanguageInfo","stripSdkType","SDK_PREFIXES","LanguageSelector","ApiKeySelector","PlainCodeView","CopyButton","SegmentedControl","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","wrapCode","codeRef","selectedApiKey","setSelectedApiKey","keys","key","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","findCodeElement","preChildren","Array","isArray","codeEl","c","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","rawLanguage","meta","codeLanguage","highlights","lineHighlights","prefix","add","push","codeContent","language","resolvedSdk","size","has","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","fullLang","prefixMatch","l","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","wrap","Object","undefined","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","handleLanguageChange","noSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","showFixedLanguageLabel","renderLanguageLabel","langKey","onClick","icon","span","renderContent","plainChild","active","onLanguageChange","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","onCopy","text","navigator","clipboard","writeText","onApiKeyChange"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  Children,\n  isValidElement,\n  useRef,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport type { LineHighlightType } from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { parseLineHighlights } from \"./utils/syntax-highlighter\";\nimport Icon from \"./Icon\";\nimport {\n  getLanguageInfo,\n  stripSdkType,\n  SDK_PREFIXES,\n  SDKType,\n} from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport SegmentedControl from \"./SegmentedControl\";\n\n// Re-export SDKType for consumers\nexport type { SDKType };\n\n// Define API key types\nexport type ApiKeysItem = {\n  app: string;\n  keys: { name: string; key: string }[];\n};\n\nexport type CodeSnippetProps = {\n  /**\n   * If true, hides the language selector row completely\n   */\n  fixed?: boolean;\n  /**\n   * If true, renders a macOS-style window header with buttons and title\n   */\n  headerRow?: boolean;\n  /**\n   * Title to display in the header row (when headerRow is true)\n   */\n  title?: string;\n  /**\n   * Children elements with lang attribute\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Default language to display. If not found in available languages, first available is used.\n   * If found in languages but no matching snippet exists, a message is displayed.\n   */\n  lang: string | null;\n  /**\n   * Callback fired when the active language changes\n   */\n  onChange?: (language: string, sdk?: SDKType) => void;\n  /**\n   * List of API keys to display in a dropdown\n   */\n  apiKeys?: ApiKeysItem[];\n  /**\n   * Default SDK type to use for the code snippet\n   */\n  sdk?: SDKType;\n  /**\n   * Whether to show line numbers in code snippets\n   */\n  showCodeLines?: boolean;\n  /**\n   * Defines the order in which languages should be displayed.\n   * Languages not in this array will be shown after those that are included.\n   */\n  languageOrdering?: string[];\n  /**\n   * Whether to wrap code content instead of scrolling\n   */\n  wrapCode?: boolean;\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n  content: string,\n  apiKey: string,\n  mask = true,\n): string => {\n  return content.replace(\n    /\\{\\{API_KEY\\}\\}/g,\n    mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n  );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n  fixed = false,\n  headerRow = false,\n  title = \"Code\",\n  children,\n  className,\n  lang,\n  onChange,\n  apiKeys,\n  sdk,\n  showCodeLines = true,\n  languageOrdering,\n  wrapCode = false,\n}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n\n  const [selectedApiKey, setSelectedApiKey] = useState<string>(\n    () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n  );\n  const [prevApiKeys, setPrevApiKeys] = useState(apiKeys);\n  if (prevApiKeys !== apiKeys) {\n    setPrevApiKeys(apiKeys);\n    if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n      setSelectedApiKey(apiKeys[0].keys?.[0]?.key ?? \"\");\n    }\n  }\n\n  useEffect(() => {\n    const element = codeRef.current;\n    if (!element) return;\n\n    // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n    const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n      return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n    };\n\n    const handleCopy = (event: ClipboardEvent) => {\n      const selection = window.getSelection();\n      if (!selection || selection.rangeCount === 0) return;\n\n      const selectedText = selection.toString();\n      if (!selectedText) return;\n\n      // Check if the selection is within our element\n      const range = selection.getRangeAt(0);\n      if (!element.contains(range.commonAncestorContainer)) return;\n\n      const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n      event.clipboardData?.setData(\"text/plain\", modifiedText);\n      event.preventDefault();\n    };\n\n    document.addEventListener(\"copy\", handleCopy);\n\n    return () => {\n      document.removeEventListener(\"copy\", handleCopy);\n    };\n  }, [selectedApiKey]);\n\n  const extractLanguageFromCode = useCallback(\n    (codeElement: React.ReactElement | null): string | null => {\n      if (!codeElement || !codeElement.props.className) return null;\n\n      const classNames = codeElement.props.className.split(\" \");\n      const langClass = classNames.find((cls: string) =>\n        cls.startsWith(\"language-\"),\n      );\n      if (!langClass) return null;\n\n      return langClass.substring(9); // Remove \"language-\" prefix\n    },\n    [],\n  );\n\n  // Helper to find the code element within pre's children (handles both single element and array)\n  const findCodeElement = useCallback(\n    (preChildren: React.ReactNode): React.ReactElement | null => {\n      if (isValidElement(preChildren)) {\n        return preChildren;\n      }\n      if (Array.isArray(preChildren)) {\n        const codeEl = preChildren.find((c) => isValidElement(c));\n        return codeEl && isValidElement(codeEl) ? codeEl : null;\n      }\n      return null;\n    },\n    [],\n  );\n\n  const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n    useMemo(() => {\n      const childrenArray = Children.toArray(children);\n      const languages: string[] = [];\n      const sdkTypes = new Set<SDKType>();\n      const codeData: {\n        language: string;\n        content: string;\n        lineHighlights: Record<number, LineHighlightType>;\n      }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some((lang) => {\n          if (!isValidElement(childrenArray[0])) return false;\n          const codeEl = findCodeElement(childrenArray[0].props.children);\n          return codeEl?.props.className?.includes(lang);\n        });\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = findCodeElement(preElement.props.children);\n\n        if (!codeElement) return;\n\n        const rawLanguage = extractLanguageFromCode(codeElement);\n\n        if (!rawLanguage) return;\n\n        const meta: string | undefined = codeElement.props?.[\"data-meta\"];\n        const { lang: codeLanguage, highlights: lineHighlights } =\n          parseLineHighlights(rawLanguage, meta);\n\n        for (const prefix of SDK_PREFIXES) {\n          if (codeLanguage.startsWith(`${prefix}_`)) {\n            sdkTypes.add(prefix);\n            break;\n          }\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({\n          language: codeLanguage,\n          content: codeContent,\n          lineHighlights,\n        });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode, findCodeElement]);\n\n  // Resolve which SDK type to filter by. If the snippet only contains one SDK type\n  // and it doesn't match the current selector, fall back to the only available type.\n  // Returns undefined when no SDK prop is provided (e.g. plain code blocks without SDK prefixes).\n  const resolvedSdk: SDKType | undefined = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk;\n  }, [sdk, sdkTypes]);\n\n  // Only show SDK selector for realtime/rest types, not for client/agent (which are controlled by page-level selector)\n  const showSDKSelector = sdkTypes.has(\"realtime\") || sdkTypes.has(\"rest\");\n\n  const filteredLanguages = useMemo(() => {\n    const filtered =\n      !resolvedSdk || !showSDKSelector\n        ? [...languages]\n        : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n    // Apply custom ordering if provided\n    if (languageOrdering && languageOrdering.length > 0) {\n      filtered.sort((a, b) => {\n        const aBase = stripSdkType(a);\n        const bBase = stripSdkType(b);\n\n        const aIndex = languageOrdering.indexOf(aBase);\n        const bIndex = languageOrdering.indexOf(bBase);\n\n        if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n        if (aIndex !== -1) return -1;\n        if (bIndex !== -1) return 1;\n        return 0;\n      });\n    }\n\n    return filtered;\n  }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n  const activeLanguage = useMemo(() => {\n    // For client/agent SDK types (controlled by page-level selector), construct the full language\n    if (resolvedSdk === \"client\" || resolvedSdk === \"agent\") {\n      const fullLang = `${resolvedSdk}_${lang}`;\n      // Verify this language exists in available languages\n      if (languages.includes(fullLang)) {\n        return fullLang;\n      }\n      // Fall back to first language with this prefix\n      const prefixMatch = languages.find((l) =>\n        l.startsWith(`${resolvedSdk}_`),\n      );\n      if (prefixMatch) return prefixMatch;\n    }\n\n    // For realtime/rest SDK types\n    if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n      return `${resolvedSdk}_${lang}`;\n    }\n\n    if (lang) return lang;\n\n    if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n    return languages[0];\n  }, [resolvedSdk, sdkTypes, lang, filteredLanguages, languages]);\n\n  const requiresApiKeySubstitution = useMemo(() => {\n    const containsPlaceholder = codeData.some((code) =>\n      code?.content.includes(\"{{API_KEY}}\"),\n    );\n\n    return (\n      containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n    );\n  }, [codeData, apiKeys, selectedApiKey]);\n\n  const [isHovering, setIsHovering] = useState(false);\n\n  const hasOnlyJsonSnippet = useMemo(\n    () => languages.length === 1 && languages[0] === \"json\",\n    [languages],\n  );\n\n  const processedChildren = useMemo(() => {\n    if (!activeLanguage) return [];\n\n    const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n    return codeData\n      .filter((code) => {\n        return code?.language === targetLanguage;\n      })\n      .map((code) => {\n        if (!code) return null;\n\n        const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n        const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n        if (\n          typeof code.content === \"string\" ||\n          typeof code.content === \"number\" ||\n          typeof code.content === \"boolean\"\n        ) {\n          // Apply API key substitution if apiKeys are provided\n          let processedContent = String(code.content);\n          if (requiresApiKeySubstitution) {\n            processedContent = substituteApiKey(\n              processedContent,\n              selectedApiKey,\n            );\n          }\n\n          if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n          return (\n            <Code\n              key={code.language}\n              language={langInfo.syntaxHighlighterKey || cleanLang}\n              snippet={processedContent}\n              additionalCSS=\"!bg-neutral-000 text-neutral-1300 dark:!bg-neutral-1300 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n              wrap={wrapCode}\n              lineHighlights={\n                Object.keys(code.lineHighlights).length > 0\n                  ? code.lineHighlights\n                  : undefined\n              }\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    hasOnlyJsonSnippet,\n    codeData,\n    requiresApiKeySubstitution,\n    showCodeLines,\n    wrapCode,\n    selectedApiKey,\n  ]);\n\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!activeLanguage) return false;\n    if (hasOnlyJsonSnippet) return true;\n\n    return codeData.some((code) => {\n      return code?.language === activeLanguage;\n    });\n  }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n  const handleSDKTypeChange = useCallback(\n    (type: SDKType) => {\n      const nextLang = stripSdkType(\n        languages.find(\n          (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n        ) ??\n          languages.find((l) => l.startsWith(`${type}_`)) ??\n          activeLanguage,\n      );\n\n      if (onChange && nextLang) {\n        onChange(stripSdkType(activeLanguage), type);\n      }\n    },\n    [activeLanguage, languages, onChange],\n  );\n\n  const handleLanguageChange = useCallback(\n    (language: string) => {\n      if (onChange) {\n        onChange(stripSdkType(language), resolvedSdk);\n      }\n    },\n    [onChange, resolvedSdk],\n  );\n\n  const noSnippetMessage = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n    return (\n      <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\">\n        <Icon\n          name=\"icon-gui-exclamation-triangle-outline\"\n          color=\"text-yellow-600 dark:text-yellow-400\"\n          size=\"24px\"\n        />\n        <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n          You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n          There either isn&apos;t a {activeLanguageInfo.label} code sample for\n          this example, or this feature isn&apos;t supported in{\" \"}\n          {activeLanguageInfo.label}. Switch language to view this example in a\n          different language, or check which SDKs support this feature.\n        </p>\n      </div>\n    );\n  }, [activeLanguage]);\n\n  const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n  const showFullSelector = filteredLanguages.length > 1;\n  // Show a read-only language label when fixed (controlled by external selector)\n  const showFixedLanguageLabel = fixed && activeLanguage;\n\n  const renderLanguageLabel = (langKey: string, onClick?: () => void) => (\n    <div\n      className={cn(\n        \"border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full\",\n        { \"rounded-t-lg\": !headerRow },\n      )}\n    >\n      <div\n        className={cn(\"inline-flex items-center\", onClick && \"cursor-pointer\")}\n        {...(onClick && { onClick })}\n      >\n        <Icon\n          name={getLanguageInfo(langKey).icon}\n          size=\"16px\"\n          additionalCSS=\"mr-2\"\n        />\n        <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n          {getLanguageInfo(langKey).label}\n        </span>\n      </div>\n    </div>\n  );\n\n  const renderContent = useMemo(() => {\n    if (!activeLanguage) return null;\n\n    if (hasSnippetForActiveLanguage) {\n      return processedChildren;\n    }\n\n    return noSnippetMessage;\n  }, [\n    activeLanguage,\n    hasSnippetForActiveLanguage,\n    processedChildren,\n    noSnippetMessage,\n  ]);\n\n  // Render special case for plain commands (shell or text)\n  if (isSinglePlainCommand) {\n    const plainChild = codeData[0];\n    if (plainChild) {\n      const codeContent = plainChild.content;\n      const language = plainChild.language;\n\n      if (!language || !codeContent) return null;\n\n      // Apply API key substitution if apiKeys are provided\n      let processedContent = String(codeContent);\n      if (requiresApiKeySubstitution) {\n        processedContent = substituteApiKey(processedContent, selectedApiKey);\n      }\n\n      return (\n        <PlainCodeView\n          content={processedContent}\n          className={className}\n          language={language}\n          icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n        />\n      );\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n        className,\n      )}\n    >\n      {headerRow && (\n        <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\">\n          <div className=\"flex space-x-1.5\">\n            <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n            <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n          </div>\n\n          <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n            {title}\n          </div>\n\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-300 dark:border-neutral-1000\",\n            sdkTypes.size === 1 && \"p-1\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-1 justify-start\">\n            {[\"realtime\", \"rest\"].map(\n              (type) =>\n                sdkTypes.has(type as SDKType) && (\n                  <SegmentedControl\n                    key={type}\n                    onClick={() => handleSDKTypeChange(type as SDKType)}\n                    size=\"xs\"\n                    active={resolvedSdk === type}\n                    className={cn(\n                      \"text-[11px] font-semibold px-2 py-1 h-auto\",\n                      sdkTypes.size === 1 &&\n                        \"pointer-events-none bg-neutral-100 dark:bg-neutral-1200 !text-neutral-800 !dark:text-neutral-500\",\n                      sdkTypes.size > 1 &&\n                        resolvedSdk !== type &&\n                        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-400 dark:active:bg-neutral-900\",\n                      sdkTypes.size > 1 &&\n                        resolvedSdk === type &&\n                        \"bg-neutral-000 dark:bg-neutral-1100\",\n                    )}\n                  >\n                    {type === \"realtime\" ? \"Realtime\" : \"REST\"}\n                  </SegmentedControl>\n                ),\n            )}\n          </div>\n        </div>\n      )}\n\n      {showFixedLanguageLabel && renderLanguageLabel(activeLanguage)}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          renderLanguageLabel(filteredLanguages[0], () =>\n            handleLanguageChange(filteredLanguages[0]),\n          )\n        ))}\n      <div\n        ref={codeRef}\n        className=\"relative\"\n        onMouseEnter={() => setIsHovering(true)}\n        onMouseLeave={() => setIsHovering(false)}\n        onFocus={() => setIsHovering(true)}\n        onBlur={() => setIsHovering(false)}\n      >\n        {renderContent}\n        {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text)\n                navigator.clipboard.writeText(\n                  substituteApiKey(text, selectedApiKey, false),\n                );\n            }}\n          />\n        )}\n      </div>\n      {requiresApiKeySubstitution && (\n        <ApiKeySelector\n          apiKeys={apiKeys}\n          selectedApiKey={selectedApiKey}\n          onApiKeyChange={setSelectedApiKey}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","parseLineHighlights","Icon","getLanguageInfo","stripSdkType","SDK_PREFIXES","LanguageSelector","ApiKeySelector","PlainCodeView","CopyButton","SegmentedControl","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","wrapCode","codeRef","selectedApiKey","setSelectedApiKey","keys","key","prevApiKeys","setPrevApiKeys","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","findCodeElement","preChildren","Array","isArray","codeEl","c","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","rawLanguage","meta","codeLanguage","highlights","lineHighlights","prefix","add","push","codeContent","language","resolvedSdk","size","has","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","fullLang","prefixMatch","l","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","wrap","Object","undefined","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","handleLanguageChange","noSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","showFixedLanguageLabel","renderLanguageLabel","langKey","onClick","icon","span","renderContent","plainChild","active","onLanguageChange","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","onCopy","text","navigator","clipboard","writeText","onApiKeyChange"],"mappings":"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"}

package/core/FeaturedLink.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick&&!url?"button":undefined},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-2 relative -top-px -left-1 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-disabled-light dark:text-gui-disabled-dark pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick&&!url?"button":undefined},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-2 relative -top-px -left-1 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.js.map

package/core/FeaturedLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for the icon.\n   */\n  iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  iconClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-2\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      role={onClick && !url ? \"button\" : undefined}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              iconClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-2 relative -top-px -left-1 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","onKeyDown","e","key","preventDefault","role","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,QACTW,UACEX,QACI,AAACY,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBd,SACF,CACF,EACAC,UAENc,KAAMf,SAAW,CAACZ,IAAM,SAAWa,WAElCH,QACC,wCACE,oBAACb,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,+DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}
+{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for the icon.\n   */\n  iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  iconClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        {\n          \"text-gui-disabled-light dark:text-gui-disabled-dark pointer-events-none\":\n            disabled,\n        },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-2\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      role={onClick && !url ? \"button\" : undefined}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              iconClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-2 relative -top-px -left-1 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","onKeyDown","e","key","preventDefault","role","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CACE,0EACEiB,QACJ,EACA,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,QACTW,UACEX,QACI,AAACY,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBd,SACF,CACF,EACAC,UAENc,KAAMf,SAAW,CAACZ,IAAM,SAAWa,WAElCH,QACC,wCACE,oBAACb,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,+DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}

package/core/Header/HeaderLinks.js

@@ -1,2 +1,2 @@
-import React,{useRef,useMemo}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="font-sans !text-label2 md:!text-label3 font-bold py-4 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-2 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>useMemo(()=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard"),[className]);const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-4 pt-3 pb-4 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-4 pb-3 mb-3"},React.createElement("span",{className:"py-3 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-1.5 px-4 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[9.375rem] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-60 mt-3"},React.createElement("div",{className:"p-2"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("button",{onClick:onClickLogout,className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-4 pt-4 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-3 pt-3 md:py-0 px-4 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
+import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="font-sans !text-label2 md:!text-label3 font-bold py-4 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-2 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-4 pt-3 pb-4 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-4 pb-3 mb-3"},React.createElement("span",{className:"py-3 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-1.5 px-4 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[9.375rem] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-60 mt-3"},React.createElement("div",{className:"p-2"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("button",{onClick:onClickLogout,className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-4 pt-4 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-3 pt-3 md:py-0 px-4 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
 //# sourceMappingURL=HeaderLinks.js.map

package/core/Header/HeaderLinks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef, useMemo } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n  signedIn: false,\n  logOut: {\n    token: \"0000\",\n    href: \"accounts/sign_out\",\n  },\n  accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    | \"sessionState\"\n    | \"headerLinks\"\n    | \"searchButtonVisibility\"\n    | \"searchButton\"\n    | \"className\"\n  >\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const { signedIn, logOut } = sessionState;\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const headerLinkClasses =\n    \"font-sans !text-label2 md:!text-label3 font-bold py-4 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  const dropdownMenuLinkClasses =\n    \"block p-2 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n  const onClickLogout = (e: MouseEvent) => {\n    e.preventDefault();\n    formRef.current?.submit();\n  };\n\n  const DashboardLink = ({ className }: { className: string }) =>\n    useMemo(\n      () => (\n        <a href=\"/dashboard\" className={className}>\n          Dashboard\n        </a>\n      ),\n      [className],\n    );\n\n  const LogoutForm = (\n    <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n      <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n      <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n    </form>\n  );\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-4 pt-3 pb-4 md:py-0\",\n        className,\n      )}\n    >\n      {signedIn && (\n        <>\n          {LogoutForm}\n          <div className=\"block md:hidden\">\n            <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-4 pb-3 mb-3\">\n              <span className=\"py-3 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n                {sessionState.accountName}\n              </span>\n              {<DashboardLink className={headerLinkClasses} />}\n            </div>\n          </div>\n        </>\n      )}\n\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-1.5 px-4 md:px-0 leading-none\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n          )}\n        </a>\n      ))}\n\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn ? (\n        <>\n          <div className=\"hidden md:block relative\">\n            <DropdownMenu>\n              <DropdownMenu.Trigger\n                description={`Account menu for ${sessionState.accountName}`}\n              >\n                <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[9.375rem] leading-normal\">\n                  {sessionState.accountName}\n                </span>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Content\n                anchorPosition=\"right\"\n                contentClassNames=\"w-60 mt-3\"\n              >\n                <div className=\"p-2\">\n                  <DashboardLink className={dropdownMenuLinkClasses} />\n                  <button\n                    onClick={onClickLogout}\n                    className={dropdownMenuLinkClasses}\n                  >\n                    Logout\n                  </button>\n                </div>\n              </DropdownMenu.Content>\n            </DropdownMenu>\n          </div>\n          <div className=\"block md:hidden px-4 pt-4 pb-0\">\n            <LinkButton\n              onClick={onClickLogout}\n              variant=\"secondary\"\n              className=\"w-full md:ui-button-secondary-xs\"\n              aria-label=\"Logout\"\n              rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n            >\n              Logout\n            </LinkButton>\n          </div>\n        </>\n      ) : (\n        <div className=\"flex gap-3 pt-3 md:py-0 px-4 md:px-0\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","useRef","useMemo","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","button","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,CAAEC,OAAO,KAAQ,OAAQ,AAE3D,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUlB,OAAwB,MAExC,MAAMmB,kBACJ,0QAEF,MAAMC,wBACJ,8LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzDhB,QACE,IACE,oBAAC0B,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAI7C,CAACA,UAAU,EAGf,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,gJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,kEACb,oBAACsB,QAAKtB,UAAU,wFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,uDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,gGACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,aAElB,oBAACd,OAAIrB,UAAU,OACb,oBAACS,eAAcT,UAAWG,0BAC1B,oBAACiC,UACCC,QAASjC,cACTJ,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,kCACb,oBAACd,YACCmD,QAASjC,cACTkC,QAAQ,YACRtC,UAAU,mCACVuC,aAAW,SACXC,UAAU,iDACX,YAML,oBAACnB,OAAIrB,UAAU,wCACb,oBAACd,YACCO,KAAK,SACL6C,QAAQ,YACRtC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL6C,QAAQ,UACRtC,UAAU,mGACX,eAOX,CAAE"}
+{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n  signedIn: false,\n  logOut: {\n    token: \"0000\",\n    href: \"accounts/sign_out\",\n  },\n  accountName: \"Ably\",\n};\n\nconst DashboardLink = ({ className }: { className: string }) => (\n  <a href=\"/dashboard\" className={className}>\n    Dashboard\n  </a>\n);\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    | \"sessionState\"\n    | \"headerLinks\"\n    | \"searchButtonVisibility\"\n    | \"searchButton\"\n    | \"className\"\n  >\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const { signedIn, logOut } = sessionState;\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const headerLinkClasses =\n    \"font-sans !text-label2 md:!text-label3 font-bold py-4 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  const dropdownMenuLinkClasses =\n    \"block p-2 ui-text-label3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n  const onClickLogout = (e: MouseEvent) => {\n    e.preventDefault();\n    formRef.current?.submit();\n  };\n\n  const LogoutForm = (\n    <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n      <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n      <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n    </form>\n  );\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-4 pt-3 pb-4 md:py-0\",\n        className,\n      )}\n    >\n      {signedIn && (\n        <>\n          {LogoutForm}\n          <div className=\"block md:hidden\">\n            <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-4 pb-3 mb-3\">\n              <span className=\"py-3 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n                {sessionState.accountName}\n              </span>\n              <DashboardLink className={headerLinkClasses} />\n            </div>\n          </div>\n        </>\n      )}\n\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-1.5 px-4 md:px-0 leading-none\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n          )}\n        </a>\n      ))}\n\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn ? (\n        <>\n          <div className=\"hidden md:block relative\">\n            <DropdownMenu>\n              <DropdownMenu.Trigger\n                description={`Account menu for ${sessionState.accountName}`}\n              >\n                <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[9.375rem] leading-normal\">\n                  {sessionState.accountName}\n                </span>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Content\n                anchorPosition=\"right\"\n                contentClassNames=\"w-60 mt-3\"\n              >\n                <div className=\"p-2\">\n                  <DashboardLink className={dropdownMenuLinkClasses} />\n                  <button\n                    onClick={onClickLogout}\n                    className={dropdownMenuLinkClasses}\n                  >\n                    Logout\n                  </button>\n                </div>\n              </DropdownMenu.Content>\n            </DropdownMenu>\n          </div>\n          <div className=\"block md:hidden px-4 pt-4 pb-0\">\n            <LinkButton\n              onClick={onClickLogout}\n              variant=\"secondary\"\n              className=\"w-full md:ui-button-secondary-xs\"\n              aria-label=\"Logout\"\n              rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n            >\n              Logout\n            </LinkButton>\n          </div>\n        </>\n      ) : (\n        <div className=\"flex gap-3 pt-3 md:py-0 px-4 md:px-0\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","DashboardLink","className","a","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","button","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,EAEA,MAAMC,cAAgB,CAAC,CAAEC,SAAS,CAAyB,GACzD,oBAACC,KAAEJ,KAAK,aAAaG,UAAWA,WAAW,YAK7C,QAAO,MAAME,YAST,CAAC,CACHC,aAAeV,gBAAgB,CAC/BW,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZN,SAAS,CACV,IACC,KAAM,CAAEN,QAAQ,CAAEC,MAAM,CAAE,CAAGQ,aAC7B,MAAMI,QAAUnB,OAAwB,MAExC,MAAMoB,kBACJ,0QAEF,MAAMC,wBACJ,8LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,WACJ,oBAACC,QAAKC,IAAKV,QAASW,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEG,UAAU,UAC/D,oBAACoB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCxB,UAAWT,GACT,gJACAS,YAGDN,UACC,wCACGqB,WACD,oBAACU,OAAIzB,UAAU,mBACb,oBAACyB,OAAIzB,UAAU,kEACb,oBAAC0B,QAAK1B,UAAU,wFACbG,aAAaL,WAAW,EAE3B,oBAACC,eAAcC,UAAWQ,uBAMjCJ,aAAauB,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAAC5B,KACC6B,IAAKjC,KACLG,UAAWT,GACTiB,kBACA,uDAEFX,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/D7B,yBAA2B,SAAWC,aAAe,KACrDZ,SACC,wCACE,oBAAC+B,OAAIzB,UAAU,4BACb,oBAACR,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEjC,aAAaL,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAK1B,UAAU,gGACbG,aAAaL,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,aAElB,oBAACd,OAAIzB,UAAU,OACb,oBAACD,eAAcC,UAAWS,0BAC1B,oBAAC+B,UACCC,QAAS/B,cACTV,UAAWS,yBACZ,cAOT,oBAACgB,OAAIzB,UAAU,kCACb,oBAACV,YACCmD,QAAS/B,cACTgC,QAAQ,YACR1C,UAAU,mCACV2C,aAAW,SACXC,UAAU,iDACX,YAML,oBAACnB,OAAIzB,UAAU,wCACb,oBAACV,YACCO,KAAK,SACL6C,QAAQ,YACR1C,UAAU,qGACX,SAGD,oBAACV,YACCO,KAAK,WACL6C,QAAQ,UACR1C,UAAU,mGACX,eAOX,CAAE"}

package/core/Header.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";import{useThemedScrollpoints}from"./hooks/use-themed-scrollpoints";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const scrollpointClasses=useThemedScrollpoints(themedScrollpoints);const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{if(!isNoticeBannerEnabled){return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement){console.warn("Header: Notice element not found");return}let previousVisibility=noticeBannerVisible;const handleScroll=()=>{const scrollY=window.scrollY;const isNoticeHidden=noticeElement.classList.contains("ui-announcement-hidden");const shouldBeVisible=scrollY<=COLLAPSE_TRIGGER_DISTANCE&&!isNoticeHidden;if(shouldBeVisible!==previousVisibility){previousVisibility=shouldBeVisible;setNoticeBannerVisible(shouldBeVisible)}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll,{passive:true});return()=>{window.removeEventListener("scroll",throttledHandleScroll)}},[isNoticeBannerEnabled,noticeBannerVisible]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";import{useThemedScrollpoints}from"./hooks/use-themed-scrollpoints";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const scrollpointClasses=useThemedScrollpoints(themedScrollpoints);const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true)};useEffect(()=>{if(!fadingOut)return;const id=setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150);return()=>clearTimeout(id)},[fadingOut]);const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{if(!isNoticeBannerEnabled){return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement){console.warn("Header: Notice element not found");return}let previousVisibility=noticeBannerVisible;const handleScroll=()=>{const scrollY=window.scrollY;const isNoticeHidden=noticeElement.classList.contains("ui-announcement-hidden");const shouldBeVisible=scrollY<=COLLAPSE_TRIGGER_DISTANCE&&!isNoticeHidden;if(shouldBeVisible!==previousVisibility){previousVisibility=shouldBeVisible;setNoticeBannerVisible(shouldBeVisible)}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll,{passive:true});return()=>{window.removeEventListener("scroll",throttledHandleScroll)}},[isNoticeBannerEnabled,noticeBannerVisible]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);const[prevLocation,setPrevLocation]=useState(location);if(prevLocation!==location){setPrevLocation(location);if(location&&showMenu){closeMenu()}}const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map

package/core/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\nimport { useThemedScrollpoints } from \"./hooks/use-themed-scrollpoints\";\nimport { ThemedScrollpoint } from \"./Header/types\";\n\nexport type { ThemedScrollpoint };\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const scrollpointClasses = useThemedScrollpoints(themedScrollpoints);\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    if (!isNoticeBannerEnabled) {\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n\n    if (!noticeElement) {\n      console.warn(\"Header: Notice element not found\");\n      return;\n    }\n\n    let previousVisibility = noticeBannerVisible;\n\n    const handleScroll = () => {\n      const scrollY = window.scrollY;\n      const isNoticeHidden = noticeElement.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n\n      const shouldBeVisible =\n        scrollY <= COLLAPSE_TRIGGER_DISTANCE && !isNoticeHidden;\n\n      if (shouldBeVisible !== previousVisibility) {\n        previousVisibility = shouldBeVisible;\n        setNoticeBannerVisible(shouldBeVisible);\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n    };\n  }, [isNoticeBannerEnabled, noticeBannerVisible]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  useEffect(() => {\n    if (location && showMenu) {\n      closeMenu();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","useThemedScrollpoints","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","headerStyle","height","top","headerClassName","closeMenu","setTimeout","handleNoticeClose","document","addEventListener","removeEventListener","noticeElement","querySelector","console","warn","previousVisibility","handleScroll","scrollY","window","isNoticeHidden","classList","contains","shouldBeVisible","throttledHandleScroll","passive","handleResize","innerWidth","body","add","remove","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","id","maxWidth","maxHeight","ref"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\nimport { useThemedScrollpoints } from \"./hooks/use-themed-scrollpoints\";\nimport { ThemedScrollpoint } from \"./Header/types\";\n\nexport type { ThemedScrollpoint };\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const scrollpointClasses = useThemedScrollpoints(themedScrollpoints);\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n  };\n\n  useEffect(() => {\n    if (!fadingOut) return;\n    const id = setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n    return () => clearTimeout(id);\n  }, [fadingOut]);\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    if (!isNoticeBannerEnabled) {\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n\n    if (!noticeElement) {\n      console.warn(\"Header: Notice element not found\");\n      return;\n    }\n\n    let previousVisibility = noticeBannerVisible;\n\n    const handleScroll = () => {\n      const scrollY = window.scrollY;\n      const isNoticeHidden = noticeElement.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n\n      const shouldBeVisible =\n        scrollY <= COLLAPSE_TRIGGER_DISTANCE && !isNoticeHidden;\n\n      if (shouldBeVisible !== previousVisibility) {\n        previousVisibility = shouldBeVisible;\n        setNoticeBannerVisible(shouldBeVisible);\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n    };\n  }, [isNoticeBannerEnabled, noticeBannerVisible]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  const [prevLocation, setPrevLocation] = useState(location);\n  if (prevLocation !== location) {\n    setPrevLocation(location);\n    if (location && showMenu) {\n      closeMenu();\n    }\n  }\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","useThemedScrollpoints","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","headerStyle","height","top","headerClassName","closeMenu","id","setTimeout","clearTimeout","handleNoticeClose","document","addEventListener","removeEventListener","noticeElement","querySelector","console","warn","previousVisibility","handleScroll","scrollY","window","isNoticeHidden","classList","contains","shouldBeVisible","throttledHandleScroll","passive","handleResize","innerWidth","body","add","remove","prevLocation","setPrevLocation","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}

package/core/Icon/components/icon-tech-perplexity-mono.js

@@ -0,0 +1,2 @@
+import*as React from"react";import{forwardRef}from"react";const IconTechPerplexityMono=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:48,height:48,fill:"none",viewBox:"0 0 48 48",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"m8.963 0 13.668 12.593V.03h2.661v12.62L39.022 0v14.358h5.636v20.71h-5.62v12.785L25.293 35.776v12.216h-2.66V35.975L8.978 48V35.068H3.342v-20.71h5.621zm11.663 16.986H6.001V32.44h2.973v-4.875zm-8.987 11.746v13.404l10.992-9.682V18.747zm13.73 3.594V18.735l10.995 9.984v6.35h.014v6.93zm13.67.114h2.959V16.986H27.483l11.556 10.47zM36.36 14.358V6.045l-9.023 8.313zm-15.715 0h-9.022V6.045z",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconTechPerplexityMono);export default ForwardRef;
+//# sourceMappingURL=icon-tech-perplexity-mono.js.map

package/core/Icon/components/icon-tech-perplexity-mono.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/Icon/components/icon-tech-perplexity-mono.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconTechPerplexityMono = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={48} height={48} fill=\"none\" viewBox=\"0 0 48 48\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" fillRule=\"evenodd\" d=\"m8.963 0 13.668 12.593V.03h2.661v12.62L39.022 0v14.358h5.636v20.71h-5.62v12.785L25.293 35.776v12.216h-2.66V35.975L8.978 48V35.068H3.342v-20.71h5.621zm11.663 16.986H6.001V32.44h2.973v-4.875zm-8.987 11.746v13.404l10.992-9.682V18.747zm13.73 3.594V18.735l10.995 9.984v6.35h.014v6.93zm13.67.114h2.959V16.986H27.483l11.556 10.47zM36.36 14.358V6.045l-9.023 8.313zm-15.715 0h-9.022V6.045z\" clipRule=\"evenodd\" /></svg>;\nconst ForwardRef = forwardRef(IconTechPerplexityMono);\nexport default ForwardRef;"],"names":["React","forwardRef","IconTechPerplexityMono","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,uBAAyB,CAAC,CAC9BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,SAAS,UAAUC,EAAE,+XAA+XC,SAAS,aAC7rB,MAAMC,WAAalB,WAAWC,uBAC9B,gBAAeiB,UAAW"}