@ably/ui 17.8.0-dev.fd2e45b6 → 17.9.0-dev.7b4c6aac

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 cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\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\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}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n  const { isCopied, copy } = useCopyToClipboard();\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  }, [apiKeys, selectedApiKey]);\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  }, [codeRef.current, 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  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: { language: string; content: string }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some(\n          (lang) =>\n            isValidElement(childrenArray[0]) &&\n            isValidElement(childrenArray[0].props.children) &&\n            childrenArray[0].props.children.props.className?.includes(lang),\n        );\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement) return;\n\n        const codeLanguage = extractLanguageFromCode(codeElement);\n\n        if (!codeLanguage) return;\n\n        if (codeLanguage.startsWith(\"realtime_\")) {\n          sdkTypes.add(\"realtime\");\n        } else if (codeLanguage.startsWith(\"rest_\")) {\n          sdkTypes.add(\"rest\");\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({ language: codeLanguage, content: codeContent });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode]);\n\n  const resolvedSdk: SDKType = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk ?? null;\n  }, [sdk, sdkTypes]);\n\n  const showSDKSelector = sdkTypes.size > 0;\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    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  }, [lang, resolvedSdk, sdkTypes, filteredLanguages]);\n\n  const requiresApiKeySubstitution = useMemo(() => {\n    const containsPlaceholder = codeData.some(\n      (code) =>\n        code?.content.includes(\"{{API_KEY}}\") &&\n        stripSdkType(code?.language) === lang,\n    );\n\n    return (\n      containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n    );\n  }, [codeData, apiKeys, selectedApiKey, lang]);\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-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    codeData,\n    hasOnlyJsonSnippet,\n    showCodeLines,\n    apiKeys,\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    [languages],\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-ably-label\">\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\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-ably-secondary-inverse 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-ably-secondary-inverse 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-ably-primary\">\n            {title}\n          </div>\n\n          {/* Empty div for balance */}\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-3 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={resolvedSdk === \"realtime\"}\n                onClick={() => handleSDKTypeChange(\"realtime\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                Realtime\n              </TooltipButton>\n            )}\n\n            {sdkTypes.has(\"rest\") && (\n              <TooltipButton\n                tooltip=\"REST SDK\"\n                active={resolvedSdk === \"rest\"}\n                onClick={() => handleSDKTypeChange(\"rest\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                REST\n              </TooltipButton>\n            )}\n          </div>\n        </div>\n      )}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n              { \"rounded-t-lg\": !headerRow },\n            )}\n          >\n            {filteredLanguages.length > 0 && (\n              <div\n                className={cn(\"inline-flex items-center\", {\n                  \"cursor-pointer\": filteredLanguages.length > 0,\n                })}\n                {...(filteredLanguages.length > 0 && {\n                  onClick: () => handleLanguageChange(filteredLanguages[0]),\n                })}\n              >\n                <Icon\n                  name={getLanguageInfo(filteredLanguages[0]).icon}\n                  size=\"16px\"\n                  additionalCSS=\"mr-2\"\n                />\n                <span className=\"ui-text-label4 font-semibold text-ably-tertiary select-none\">\n                  {getLanguageInfo(filteredLanguages[0]).label}\n                </span>\n              </div>\n            )}\n          </div>\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        tabIndex={0}\n      >\n        {renderContent}\n        {isHovering && activeLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text) copy(substituteApiKey(text, selectedApiKey, false));\n            }}\n            isCopied={isCopied}\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","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","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","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","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 cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\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\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}) => {\n  const codeRef = useRef<HTMLDivElement>(null);\n  const { isCopied, copy } = useCopyToClipboard();\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  }, [apiKeys, selectedApiKey]);\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  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: { language: string; content: string }[] = [];\n\n      const isSinglePlainCommand =\n        childrenArray.length === 1 &&\n        [\"language-shell\", \"language-text\"].some(\n          (lang) =>\n            isValidElement(childrenArray[0]) &&\n            isValidElement(childrenArray[0].props.children) &&\n            childrenArray[0].props.children.props.className?.includes(lang),\n        );\n\n      childrenArray.forEach((child) => {\n        if (!isValidElement(child)) return;\n\n        const preElement = child;\n        const codeElement = isValidElement(preElement.props.children)\n          ? preElement.props.children\n          : null;\n\n        if (!codeElement) return;\n\n        const codeLanguage = extractLanguageFromCode(codeElement);\n\n        if (!codeLanguage) return;\n\n        if (codeLanguage.startsWith(\"realtime_\")) {\n          sdkTypes.add(\"realtime\");\n        } else if (codeLanguage.startsWith(\"rest_\")) {\n          sdkTypes.add(\"rest\");\n        }\n\n        if (!languages.includes(codeLanguage)) {\n          languages.push(codeLanguage);\n        }\n\n        const codeContent = codeElement.props.children;\n        codeData.push({ language: codeLanguage, content: codeContent });\n      });\n\n      return {\n        codeData,\n        languages,\n        sdkTypes,\n        isSinglePlainCommand,\n      };\n    }, [children, extractLanguageFromCode]);\n\n  const resolvedSdk: SDKType = useMemo(() => {\n    if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n      return Array.from(sdkTypes)[0];\n    }\n    return sdk ?? null;\n  }, [sdk, sdkTypes]);\n\n  const showSDKSelector = sdkTypes.size > 0;\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    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-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n              showLines={showCodeLines}\n            />\n          );\n        }\n\n        return null;\n      });\n  }, [\n    activeLanguage,\n    hasOnlyJsonSnippet,\n    codeData,\n    requiresApiKeySubstitution,\n    showCodeLines,\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\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          {/* Empty div for balance */}\n          <div className=\"w-12\"></div>\n        </div>\n      )}\n      {showSDKSelector && (\n        <div\n          className={cn(\n            \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n            headerRow ? \"\" : \"rounded-t-lg\",\n          )}\n        >\n          <div className=\"flex gap-3 justify-start\">\n            {sdkTypes.has(\"realtime\") && (\n              <TooltipButton\n                tooltip=\"Realtime SDK\"\n                active={resolvedSdk === \"realtime\"}\n                onClick={() => handleSDKTypeChange(\"realtime\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                Realtime\n              </TooltipButton>\n            )}\n\n            {sdkTypes.has(\"rest\") && (\n              <TooltipButton\n                tooltip=\"REST SDK\"\n                active={resolvedSdk === \"rest\"}\n                onClick={() => handleSDKTypeChange(\"rest\")}\n                variant=\"segmented\"\n                size=\"sm\"\n                alwaysShowLabel={true}\n              >\n                REST\n              </TooltipButton>\n            )}\n          </div>\n        </div>\n      )}\n\n      {showLanguageSelector &&\n        (showFullSelector ? (\n          <LanguageSelector\n            languages={filteredLanguages}\n            activeLanguage={activeLanguage}\n            onLanguageChange={handleLanguageChange}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n              { \"rounded-t-lg\": !headerRow },\n            )}\n          >\n            {filteredLanguages.length > 0 && (\n              <div\n                className={cn(\"inline-flex items-center\", {\n                  \"cursor-pointer\": filteredLanguages.length > 0,\n                })}\n                {...(filteredLanguages.length > 0 && {\n                  onClick: () => handleLanguageChange(filteredLanguages[0]),\n                })}\n              >\n                <Icon\n                  name={getLanguageInfo(filteredLanguages[0]).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(filteredLanguages[0]).label}\n                </span>\n              </div>\n            )}\n          </div>\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        tabIndex={0}\n        role=\"button\"\n        aria-label=\"Focusable code snippet area\"\n      >\n        {renderContent}\n        {isHovering && activeLanguage && (\n          <CopyButton\n            onCopy={() => {\n              const text = codeData.find(\n                (code) => code.language === activeLanguage,\n              )?.content;\n              if (text) copy(substituteApiKey(text, selectedApiKey, false));\n            }}\n            isCopied={isCopied}\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","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","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","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","role","aria-label","onCopy","text","onApiKeyChange"],"mappings":"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"}

package/core/ConnectStateWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/ConnectStateWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { connectState, getRemoteDataStore } from \"./remote-data-store\";\n\n/*\n  Connect a react component to a global store.\n  This is similar to what react-redux does but uses our global store so\n  can share state with other React mount points or anything that uses the\n  store.\n  - selectors is an object where keys are your prop names and values are your select\n  functions that work on the store to retrieve the state you are interested in\n  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially\n*/\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ConnectStateWrapper = (Component: any, selectors: any) => {\n  const [state, setState] = useState({});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setStateForKey = (key: string) => (storeState: any) =>\n    setState(() => ({ [key]: storeState }));\n\n  useEffect(() => {\n    const store = getRemoteDataStore();\n    const resolvedState = Object.keys(selectors).reduce(\n      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),\n      {},\n    );\n\n    // Set initial state\n    setState(resolvedState);\n\n    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.\n    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.\n    Object.keys(selectors).forEach((key) => {\n      connectState(selectors[key], setStateForKey(key));\n    });\n  }, []);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const WrappedComponent = (props: any) => <Component {...props} {...state} />;\n\n  return WrappedComponent;\n};\n\nexport default ConnectStateWrapper;\n"],"names":["React","useEffect","useState","connectState","getRemoteDataStore","ConnectStateWrapper","Component","selectors","state","setState","setStateForKey","key","storeState","store","resolvedState","Object","keys","reduce","acc","forEach","WrappedComponent","props"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAEnD,QAASC,YAAY,CAAEC,kBAAkB,KAAQ,qBAAsB,CAavE,MAAMC,oBAAsB,CAACC,UAAgBC,aAC3C,KAAM,CAACC,MAAOC,SAAS,CAAGP,SAAS,CAAC,GAGpC,MAAMQ,eAAiB,AAACC,KAAgB,AAACC,YACvCH,SAAS,IAAO,CAAA,CAAE,CAACE,IAAI,CAAEC,UAAW,CAAA,GAEtCX,UAAU,KACR,MAAMY,MAAQT,qBACd,MAAMU,cAAgBC,OAAOC,IAAI,CAACT,WAAWU,MAAM,CACjD,CAACC,IAAKP,MAAS,CAAA,CAAE,GAAGO,GAAG,CAAE,CAACP,IAAI,CAAEJ,SAAS,CAACI,IAAI,CAACE,MAAO,CAAA,EACtD,CAAC,GAIHJ,SAASK,eAITC,OAAOC,IAAI,CAACT,WAAWY,OAAO,CAAC,AAACR,MAC9BR,aAAaI,SAAS,CAACI,IAAI,CAAED,eAAeC,KAC9C,EACF,EAAG,EAAE,EAGL,MAAMS,iBAAmB,AAACC,OAAe,oBAACf,WAAW,GAAGe,KAAK,CAAG,GAAGb,KAAK,GAExE,OAAOY,gBACT,CAEA,gBAAef,mBAAoB"}
+{"version":3,"sources":["../../src/core/ConnectStateWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { connectState, getRemoteDataStore } from \"./remote-data-store\";\n\n/*\n  Connect a react component to a global store.\n  This is similar to what react-redux does but uses our global store so\n  can share state with other React mount points or anything that uses the\n  store.\n  - selectors is an object where keys are your prop names and values are your select\n  functions that work on the store to retrieve the state you are interested in\n  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially\n*/\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ConnectStateWrapper = (Component: any, selectors: any) => {\n  const [state, setState] = useState({});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const setStateForKey = (key: string) => (storeState: any) =>\n    setState(() => ({ [key]: storeState }));\n\n  useEffect(() => {\n    const store = getRemoteDataStore();\n    const resolvedState = Object.keys(selectors).reduce(\n      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),\n      {},\n    );\n\n    // Set initial state\n    setState(resolvedState);\n\n    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.\n    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.\n    Object.keys(selectors).forEach((key) => {\n      connectState(selectors[key], setStateForKey(key));\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const WrappedComponent = (props: any) => <Component {...props} {...state} />;\n\n  return WrappedComponent;\n};\n\nexport default ConnectStateWrapper;\n"],"names":["React","useEffect","useState","connectState","getRemoteDataStore","ConnectStateWrapper","Component","selectors","state","setState","setStateForKey","key","storeState","store","resolvedState","Object","keys","reduce","acc","forEach","WrappedComponent","props"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAEnD,QAASC,YAAY,CAAEC,kBAAkB,KAAQ,qBAAsB,CAavE,MAAMC,oBAAsB,CAACC,UAAgBC,aAC3C,KAAM,CAACC,MAAOC,SAAS,CAAGP,SAAS,CAAC,GAGpC,MAAMQ,eAAiB,AAACC,KAAgB,AAACC,YACvCH,SAAS,IAAO,CAAA,CAAE,CAACE,IAAI,CAAEC,UAAW,CAAA,GAEtCX,UAAU,KACR,MAAMY,MAAQT,qBACd,MAAMU,cAAgBC,OAAOC,IAAI,CAACT,WAAWU,MAAM,CACjD,CAACC,IAAKP,MAAS,CAAA,CAAE,GAAGO,GAAG,CAAE,CAACP,IAAI,CAAEJ,SAAS,CAACI,IAAI,CAACE,MAAO,CAAA,EACtD,CAAC,GAIHJ,SAASK,eAITC,OAAOC,IAAI,CAACT,WAAWY,OAAO,CAAC,AAACR,MAC9BR,aAAaI,SAAS,CAACI,IAAI,CAAED,eAAeC,KAC9C,EAEF,EAAG,EAAE,EAGL,MAAMS,iBAAmB,AAACC,OAAe,oBAACf,WAAW,GAAGe,KAAK,CAAG,GAAGb,KAAK,GAExE,OAAOY,gBACT,CAEA,gBAAef,mBAAoB"}

package/core/ContentTile.js

@@ -1,2 +1,2 @@
-import React,{cloneElement,isValidElement}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Badge from"./Badge";import FeaturedLink from"./FeaturedLink";const isImageElement=image=>{return isValidElement(image)&&typeof image.props==="object"&&image.props!==null};const ContentTile=({title,className,description,cta,image,imageIcons,badges,options})=>{return React.createElement("div",{className:cn("group/content-tile",className)},image&&React.createElement("div",{className:cn("content-tile__image h-[200px] relative p-3 pb-0 flex items-end justify-center rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-ably-secondary-inverse group-hover/content-tile:border-ably-tertiary-inverse transition-colors",options?.centerImage&&"items-center pb-3")},isImageElement(image)?cloneElement(image,{className:cn(image.props.className,"h-full")}):image,imageIcons&&imageIcons.length>0&&React.createElement("div",{className:"absolute bottom-3 right-3 flex gap-1.5 bg-ably-primary-inverse rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5"},imageIcons.map((icon,idx)=>React.createElement(Icon,{key:icon+idx,name:icon,size:"18px"})))),React.createElement("div",{className:"content-tile__content pr-4"},title&&React.createElement("h2",{className:"content-tile__title mt-4 mb-2 ui-text-h4 text-ably-primary"},title),description&&React.createElement("div",{className:"content-tile__description mb-2 ui-text-p2 text-ably-tertiary"},description),badges&&badges.length>0&&React.createElement("div",{className:"content-tile__badges mb-2 flex flex-wrap gap-2"},badges.map((badge,idx)=>typeof badge==="string"?React.createElement(Badge,{key:badge+idx,className:"uppercase text-[10px]"},badge):React.createElement(Badge,{key:badge.label+idx,className:cn("uppercase text-[10px]",badge.className)},badge.label))),cta&&React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"hidden group-hover/content-tile:block items-center text-ably-primary hover:text-ably-primary",iconColor:"text-orange-600"},cta.text)))};export default ContentTile;
+import{useCallback,useMemo}from"react";import Badge from"./Badge";import FeaturedLink from"./FeaturedLink";import Icon from"./Icon";import cn from"./utils/cn";const ContentTile=({title,className,description,cta,feature,featureType="image",featureIcons,centerFeature,badges,onClick,featureClassName,titleClassName,descriptionClassName,ctaClassName})=>{const handleClick=useCallback(()=>{if(!cta)return;if(onClick){onClick(cta.url)}else{window.location.href=cta.url}},[onClick,cta]);const renderedFeature=useMemo(()=>{if(!feature)return null;if(featureType==="image"){return React.createElement("div",{className:cn("content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]",centerFeature&&"items-center pb-3",cta&&"group-hover/content-tile:border-neutral-500 dark:group-hover/content-tile:border-neutral-800",featureClassName)},React.createElement("div",{className:cn("flex justify-center max-h-[200px]",!centerFeature&&"pt-6 [&_img]:min-w-max [&_img]:h-[200px]")},feature),featureIcons&&featureIcons?.length>0&&React.createElement("div",{className:"absolute bottom-3 right-3 flex gap-1.5 bg-neutral-000 dark:bg-neutral-1300 rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5"},featureIcons.map((icon,idx)=>React.createElement(Icon,{key:icon+idx,name:icon,size:"18px"}))))}if(featureType==="icon"){return React.createElement("div",{className:cn("h-9",featureClassName)},typeof feature==="string"?React.createElement(Icon,{name:feature,size:"36px"}):feature)}return null},[centerFeature,cta,feature,featureClassName,featureIcons,featureType]);return React.createElement("div",{className:cn("group/content-tile",cta&&"cursor-pointer",className),...cta&&{onClick:handleClick,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();handleClick()}},tabIndex:0,role:"link","aria-label":title}},renderedFeature,React.createElement("div",{className:"content-tile__content pr-4"},title&&React.createElement("h2",{className:cn("content-tile__title mt-4 mb-2 ui-text-h4 text-neutral-1300 dark:text-neutral-000",titleClassName)},title),description&&React.createElement("div",{className:cn("content-tile__description mb-2 ui-text-p2 text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1000 dark:group-hover/content-tile:text-neutral-300 transition-colors",descriptionClassName)},description),badges&&badges.length>0&&React.createElement("div",{className:"content-tile__badges mb-2 flex flex-wrap gap-2"},badges.map(({label,className,...badgeProps},idx)=>React.createElement(Badge,{key:label+idx,className:cn("uppercase text-[10px]",className),...badgeProps},label))),cta&&!cta.implicit&&React.createElement(FeaturedLink,{url:"#",additionalCSS:cn("pt-0 pointer-events-none font-medium items-center text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1300 dark:group-hover/content-tile:text-neutral-000 transition-colors [&_svg]:group-hover/content-tile:left-0",ctaClassName),iconColor:"text-orange-600"},cta.text)))};export default ContentTile;
 //# sourceMappingURL=ContentTile.js.map

package/core/ContentTile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/ContentTile.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement, ReactElement } from \"react\";\nimport type { IconName } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Badge from \"./Badge\";\nimport FeaturedLink from \"./FeaturedLink\";\n\ntype ContentTileBadge =\n  | string\n  | {\n      label: string;\n      className?: string;\n    };\n\ntype CTA = {\n  text: string;\n  url: string;\n};\n\ntype ContentTileProps = {\n  title?: string;\n  className?: string;\n  description?: string;\n  cta?: CTA;\n  image?: React.ReactNode;\n  imageIcons?: IconName[];\n  badges?: ContentTileBadge[];\n  options?: {\n    centerImage?: boolean;\n  };\n};\n\n// Type guard to check if image is a ReactElement with className prop\nconst isImageElement = (\n  image: React.ReactNode,\n): image is ReactElement<{ className?: string }> => {\n  return (\n    isValidElement(image) &&\n    typeof image.props === \"object\" &&\n    image.props !== null\n  );\n};\n\nconst ContentTile: React.FC<ContentTileProps> = ({\n  title,\n  className,\n  description,\n  cta,\n  image,\n  imageIcons,\n  badges,\n  options,\n}) => {\n  return (\n    <div className={cn(\"group/content-tile\", className)}>\n      {image && (\n        <div\n          className={cn(\n            \"content-tile__image h-[200px] relative p-3 pb-0 flex items-end justify-center rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-ably-secondary-inverse group-hover/content-tile:border-ably-tertiary-inverse transition-colors\",\n            options?.centerImage && \"items-center pb-3\",\n          )}\n        >\n          {isImageElement(image)\n            ? cloneElement(image, {\n                className: cn(image.props.className, \"h-full\"),\n              })\n            : image}\n          {imageIcons && imageIcons.length > 0 && (\n            <div className=\"absolute bottom-3 right-3 flex gap-1.5 bg-ably-primary-inverse rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5\">\n              {imageIcons.map((icon, idx) => (\n                <Icon key={icon + idx} name={icon} size=\"18px\" />\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n      <div className=\"content-tile__content pr-4\">\n        {title && (\n          <h2 className=\"content-tile__title mt-4 mb-2 ui-text-h4 text-ably-primary\">\n            {title}\n          </h2>\n        )}\n        {description && (\n          <div className=\"content-tile__description mb-2 ui-text-p2 text-ably-tertiary\">\n            {description}\n          </div>\n        )}\n        {badges && badges.length > 0 && (\n          <div className=\"content-tile__badges mb-2 flex flex-wrap gap-2\">\n            {badges.map((badge, idx) =>\n              typeof badge === \"string\" ? (\n                <Badge key={badge + idx} className=\"uppercase text-[10px]\">\n                  {badge}\n                </Badge>\n              ) : (\n                <Badge\n                  key={badge.label + idx}\n                  className={cn(\"uppercase text-[10px]\", badge.className)}\n                >\n                  {badge.label}\n                </Badge>\n              ),\n            )}\n          </div>\n        )}\n        {cta && (\n          <FeaturedLink\n            url={cta.url}\n            additionalCSS=\"hidden group-hover/content-tile:block items-center text-ably-primary hover:text-ably-primary\"\n            iconColor=\"text-orange-600\"\n          >\n            {cta.text}\n          </FeaturedLink>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ContentTile;\n"],"names":["React","cloneElement","isValidElement","Icon","cn","Badge","FeaturedLink","isImageElement","image","props","ContentTile","title","className","description","cta","imageIcons","badges","options","div","centerImage","length","map","icon","idx","key","name","size","h2","badge","label","url","additionalCSS","iconColor","text"],"mappings":"AAAA,OAAOA,OAASC,YAAY,CAAEC,cAAc,KAAsB,OAAQ,AAE1E,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,UAAW,SAAU,AAC5B,QAAOC,iBAAkB,gBAAiB,CA4B1C,MAAMC,eAAiB,AACrBC,QAEA,OACEN,eAAeM,QACf,OAAOA,MAAMC,KAAK,GAAK,UACvBD,MAAMC,KAAK,GAAK,IAEpB,EAEA,MAAMC,YAA0C,CAAC,CAC/CC,KAAK,CACLC,SAAS,CACTC,WAAW,CACXC,GAAG,CACHN,KAAK,CACLO,UAAU,CACVC,MAAM,CACNC,OAAO,CACR,IACC,OACE,oBAACC,OAAIN,UAAWR,GAAG,qBAAsBQ,YACtCJ,OACC,oBAACU,OACCN,UAAWR,GACT,4OACAa,SAASE,aAAe,sBAGzBZ,eAAeC,OACZP,aAAaO,MAAO,CAClBI,UAAWR,GAAGI,MAAMC,KAAK,CAACG,SAAS,CAAE,SACvC,GACAJ,MACHO,YAAcA,WAAWK,MAAM,CAAG,GACjC,oBAACF,OAAIN,UAAU,yIACZG,WAAWM,GAAG,CAAC,CAACC,KAAMC,MACrB,oBAACpB,MAAKqB,IAAKF,KAAOC,IAAKE,KAAMH,KAAMI,KAAK,YAMlD,oBAACR,OAAIN,UAAU,8BACZD,OACC,oBAACgB,MAAGf,UAAU,8DACXD,OAGJE,aACC,oBAACK,OAAIN,UAAU,gEACZC,aAGJG,QAAUA,OAAOI,MAAM,CAAG,GACzB,oBAACF,OAAIN,UAAU,kDACZI,OAAOK,GAAG,CAAC,CAACO,MAAOL,MAClB,OAAOK,QAAU,SACf,oBAACvB,OAAMmB,IAAKI,MAAQL,IAAKX,UAAU,yBAChCgB,OAGH,oBAACvB,OACCmB,IAAKI,MAAMC,KAAK,CAAGN,IACnBX,UAAWR,GAAG,wBAAyBwB,MAAMhB,SAAS,GAErDgB,MAAMC,KAAK,IAMrBf,KACC,oBAACR,cACCwB,IAAKhB,IAAIgB,GAAG,CACZC,cAAc,+FACdC,UAAU,mBAETlB,IAAImB,IAAI,GAMrB,CAEA,gBAAevB,WAAY"}
+{"version":3,"sources":["../../src/core/ContentTile.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport Badge, { type BadgeProps } from \"./Badge\";\nimport FeaturedLink from \"./FeaturedLink\";\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype ContentTileProps = {\n  /** The title text to display */\n  title?: string;\n  /** Additional CSS classes for the root container */\n  className?: string;\n  /** The description text to display */\n  description?: string;\n  /**\n   * Call-to-action configuration.\n   * - text: The CTA button or link text.\n   * - url: The destination URL for the CTA.\n   * - implicit: If true, no explicit CTA button is shown.\n   */\n  cta?: {\n    text: string;\n    url: string;\n    implicit?: boolean;\n  };\n  /** Content to display in the feature area (image or icon) */\n  feature?: React.ReactNode | string;\n  /** Type of feature to render - either 'image' or 'icon' */\n  featureType?: \"image\" | \"icon\";\n  /** Array of icon names to display as overlays on the feature */\n  featureIcons?: IconName[];\n  /** Whether to vertically center the feature content */\n  centerFeature?: boolean;\n  /** Array of badges to display */\n  badges?: (BadgeProps & { label: string })[];\n  /** Custom click handler, receives the CTA URL if present */\n  onClick?: (url?: string) => void;\n  /** Additional CSS classes for the feature element */\n  featureClassName?: string;\n  /** Additional CSS classes for the title element */\n  titleClassName?: string;\n  /** Additional CSS classes for the description element */\n  descriptionClassName?: string;\n  /** Additional CSS classes for the CTA element */\n  ctaClassName?: string;\n};\n\nconst ContentTile: React.FC<ContentTileProps> = ({\n  title,\n  className,\n  description,\n  cta,\n  feature,\n  featureType = \"image\",\n  featureIcons,\n  centerFeature,\n  badges,\n  onClick,\n  featureClassName,\n  titleClassName,\n  descriptionClassName,\n  ctaClassName,\n}) => {\n  const handleClick = useCallback(() => {\n    if (!cta) return;\n\n    if (onClick) {\n      onClick(cta.url);\n    } else {\n      window.location.href = cta.url;\n    }\n  }, [onClick, cta]);\n\n  const renderedFeature = useMemo(() => {\n    if (!feature) return null;\n\n    if (featureType === \"image\") {\n      return (\n        <div\n          className={cn(\n            \"content-tile__feature relative p-3 h-[200px] pb-0 flex items-end justify-center overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 transition-[border-color,height]\",\n            centerFeature && \"items-center pb-3\",\n            cta &&\n              \"group-hover/content-tile:border-neutral-500 dark:group-hover/content-tile:border-neutral-800\",\n            featureClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex justify-center max-h-[200px]\",\n              !centerFeature && \"pt-6 [&_img]:min-w-max [&_img]:h-[200px]\",\n            )}\n          >\n            {feature}\n          </div>\n          {featureIcons && featureIcons?.length > 0 && (\n            <div className=\"absolute bottom-3 right-3 flex gap-1.5 bg-neutral-000 dark:bg-neutral-1300 rounded border border-neutral-200 dark:border-neutral-1100 px-2 py-1.5\">\n              {featureIcons.map((icon, idx) => (\n                <Icon key={icon + idx} name={icon} size=\"18px\" />\n              ))}\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    if (featureType === \"icon\") {\n      return (\n        <div className={cn(\"h-9\", featureClassName)}>\n          {typeof feature === \"string\" ? (\n            <Icon name={feature as IconName} size=\"36px\" />\n          ) : (\n            feature\n          )}\n        </div>\n      );\n    }\n\n    return null;\n  }, [\n    centerFeature,\n    cta,\n    feature,\n    featureClassName,\n    featureIcons,\n    featureType,\n  ]);\n\n  return (\n    <div\n      className={cn(\"group/content-tile\", cta && \"cursor-pointer\", className)}\n      {...(cta && {\n        onClick: handleClick,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            handleClick();\n          }\n        },\n        tabIndex: 0,\n        role: \"link\",\n        \"aria-label\": title,\n      })}\n    >\n      {renderedFeature}\n      <div className=\"content-tile__content pr-4\">\n        {title && (\n          <h2\n            className={cn(\n              \"content-tile__title mt-4 mb-2 ui-text-h4 text-neutral-1300 dark:text-neutral-000\",\n              titleClassName,\n            )}\n          >\n            {title}\n          </h2>\n        )}\n        {description && (\n          <div\n            className={cn(\n              \"content-tile__description mb-2 ui-text-p2 text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1000 dark:group-hover/content-tile:text-neutral-300 transition-colors\",\n              descriptionClassName,\n            )}\n          >\n            {description}\n          </div>\n        )}\n        {badges && badges.length > 0 && (\n          <div className=\"content-tile__badges mb-2 flex flex-wrap gap-2\">\n            {badges.map(({ label, className, ...badgeProps }, idx) => (\n              <Badge\n                key={label + idx}\n                className={cn(\"uppercase text-[10px]\", className)}\n                {...badgeProps}\n              >\n                {label}\n              </Badge>\n            ))}\n          </div>\n        )}\n        {cta && !cta.implicit && (\n          <FeaturedLink\n            url=\"#\"\n            additionalCSS={cn(\n              \"pt-0 pointer-events-none font-medium items-center text-neutral-800 dark:text-neutral-500 group-hover/content-tile:text-neutral-1300 dark:group-hover/content-tile:text-neutral-000 transition-colors [&_svg]:group-hover/content-tile:left-0\",\n              ctaClassName,\n            )}\n            iconColor=\"text-orange-600\"\n          >\n            {cta.text}\n          </FeaturedLink>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ContentTile;\n"],"names":["useCallback","useMemo","Badge","FeaturedLink","Icon","cn","ContentTile","title","className","description","cta","feature","featureType","featureIcons","centerFeature","badges","onClick","featureClassName","titleClassName","descriptionClassName","ctaClassName","handleClick","url","window","location","href","renderedFeature","div","length","map","icon","idx","key","name","size","onKeyDown","e","preventDefault","tabIndex","role","h2","label","badgeProps","implicit","additionalCSS","iconColor","text"],"mappings":"AACA,OAASA,WAAW,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,UAAgC,SAAU,AACjD,QAAOC,iBAAkB,gBAAiB,AAC1C,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CA0C5B,MAAMC,YAA0C,CAAC,CAC/CC,KAAK,CACLC,SAAS,CACTC,WAAW,CACXC,GAAG,CACHC,OAAO,CACPC,YAAc,OAAO,CACrBC,YAAY,CACZC,aAAa,CACbC,MAAM,CACNC,OAAO,CACPC,gBAAgB,CAChBC,cAAc,CACdC,oBAAoB,CACpBC,YAAY,CACb,IACC,MAAMC,YAAcrB,YAAY,KAC9B,GAAI,CAACU,IAAK,OAEV,GAAIM,QAAS,CACXA,QAAQN,IAAIY,GAAG,CACjB,KAAO,CACLC,OAAOC,QAAQ,CAACC,IAAI,CAAGf,IAAIY,GAAG,AAChC,CACF,EAAG,CAACN,QAASN,IAAI,EAEjB,MAAMgB,gBAAkBzB,QAAQ,KAC9B,GAAI,CAACU,QAAS,OAAO,KAErB,GAAIC,cAAgB,QAAS,CAC3B,OACE,oBAACe,OACCnB,UAAWH,GACT,qOACAS,eAAiB,oBACjBJ,KACE,+FACFO,mBAGF,oBAACU,OACCnB,UAAWH,GACT,oCACA,CAACS,eAAiB,6CAGnBH,SAEFE,cAAgBA,cAAce,OAAS,GACtC,oBAACD,OAAInB,UAAU,qJACZK,aAAagB,GAAG,CAAC,CAACC,KAAMC,MACvB,oBAAC3B,MAAK4B,IAAKF,KAAOC,IAAKE,KAAMH,KAAMI,KAAK,WAMpD,CAEA,GAAItB,cAAgB,OAAQ,CAC1B,OACE,oBAACe,OAAInB,UAAWH,GAAG,MAAOY,mBACvB,OAAON,UAAY,SAClB,oBAACP,MAAK6B,KAAMtB,QAAqBuB,KAAK,SAEtCvB,QAIR,CAEA,OAAO,IACT,EAAG,CACDG,cACAJ,IACAC,QACAM,iBACAJ,aACAD,YACD,EAED,OACE,oBAACe,OACCnB,UAAWH,GAAG,qBAAsBK,KAAO,iBAAkBF,WAC5D,GAAIE,KAAO,CACVM,QAASK,YACTc,UAAW,AAACC,IACV,GAAIA,EAAEJ,GAAG,GAAK,SAAWI,EAAEJ,GAAG,GAAK,IAAK,CACtCI,EAAEC,cAAc,GAChBhB,aACF,CACF,EACAiB,SAAU,EACVC,KAAM,OACN,aAAchC,KAChB,CAAC,EAEAmB,gBACD,oBAACC,OAAInB,UAAU,8BACZD,OACC,oBAACiC,MACChC,UAAWH,GACT,mFACAa,iBAGDX,OAGJE,aACC,oBAACkB,OACCnB,UAAWH,GACT,+LACAc,uBAGDV,aAGJM,QAAUA,OAAOa,MAAM,CAAG,GACzB,oBAACD,OAAInB,UAAU,kDACZO,OAAOc,GAAG,CAAC,CAAC,CAAEY,KAAK,CAAEjC,SAAS,CAAE,GAAGkC,WAAY,CAAEX,MAChD,oBAAC7B,OACC8B,IAAKS,MAAQV,IACbvB,UAAWH,GAAG,wBAAyBG,WACtC,GAAGkC,UAAU,EAEbD,SAKR/B,KAAO,CAACA,IAAIiC,QAAQ,EACnB,oBAACxC,cACCmB,IAAI,IACJsB,cAAevC,GACb,+OACAe,cAEFyB,UAAU,mBAETnC,IAAIoC,IAAI,GAMrB,CAEA,gBAAexC,WAAY"}

package/core/CookieMessage.js

@@ -1,2 +1,2 @@
-import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-px","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-8"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
+import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[cookieId]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-px","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-8"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
 //# sourceMappingURL=CookieMessage.js.map

package/core/CookieMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/CookieMessage.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport Cookie from \"js-cookie\";\n\nimport _absUrl from \"./url-base\";\n\nconst COOKIE_EXPIRY = 365;\n\ntype CookieMessageProps = {\n  cookieId: string;\n  urlBase: string;\n};\n\nconst CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [hideCookieMessage, setHideCookieMessage] = useState(true);\n\n  useEffect(() => {\n    const isCookieSet = Cookie.get(cookieId) ? true : false;\n    setHideCookieMessage(isCookieSet);\n  }, []);\n\n  const handleClose = () => {\n    Cookie.set(cookieId, \"1\", { expires: COOKIE_EXPIRY });\n\n    ref.current?.classList.add(\"bottom-px\", \"opacity-0\");\n    setTimeout(() => setHideCookieMessage(true), 500);\n  };\n\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  // Presume the message is hidden by default\n  if (hideCookieMessage) return null;\n\n  return (\n    <div className=\"ui-cookie-message\" ref={ref}>\n      <p className=\"ui-text-p2 pr-8\">\n        <a href={absUrl(\"/privacy\")} className=\"underline\">\n          How we use cookies\n        </a>{\" \"}\n        to improve your experience.\n      </p>\n      <button\n        className=\"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap\"\n        onClick={handleClose}\n      >\n        Accept and close\n      </button>\n    </div>\n  );\n};\n\nexport default CookieMessage;\n"],"names":["React","useRef","useEffect","useState","Cookie","_absUrl","COOKIE_EXPIRY","CookieMessage","cookieId","urlBase","ref","hideCookieMessage","setHideCookieMessage","isCookieSet","get","handleClose","set","expires","current","classList","add","setTimeout","absUrl","path","div","className","p","a","href","button","onClick"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,WAAY,WAAY,AAE/B,QAAOC,YAAa,YAAa,CAEjC,MAAMC,cAAgB,IAOtB,MAAMC,cAAgB,CAAC,CAAEC,QAAQ,CAAEC,OAAO,CAAsB,IAC9D,MAAMC,IAAMT,OAAuB,MACnC,KAAM,CAACU,kBAAmBC,qBAAqB,CAAGT,SAAS,MAE3DD,UAAU,KACR,MAAMW,YAAcT,OAAOU,GAAG,CAACN,UAAY,KAAO,MAClDI,qBAAqBC,YACvB,EAAG,EAAE,EAEL,MAAME,YAAc,KAClBX,OAAOY,GAAG,CAACR,SAAU,IAAK,CAAES,QAASX,aAAc,EAEnDI,CAAAA,IAAIQ,OAAO,EAAEC,UAAUC,IAAI,YAAa,aACxCC,WAAW,IAAMT,qBAAqB,MAAO,IAC/C,EAEA,MAAMU,OAAS,AAACC,MAAiBlB,QAAQkB,KAAMd,SAG/C,GAAIE,kBAAmB,OAAO,KAE9B,OACE,oBAACa,OAAIC,UAAU,oBAAoBf,IAAKA,KACtC,oBAACgB,KAAED,UAAU,mBACX,oBAACE,KAAEC,KAAMN,OAAO,YAAaG,UAAU,aAAY,sBAE9C,IAAI,+BAGX,oBAACI,UACCJ,UAAU,kDACVK,QAASf,aACV,oBAKP,CAEA,gBAAeR,aAAc"}
+{"version":3,"sources":["../../src/core/CookieMessage.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport Cookie from \"js-cookie\";\n\nimport _absUrl from \"./url-base\";\n\nconst COOKIE_EXPIRY = 365;\n\ntype CookieMessageProps = {\n  cookieId: string;\n  urlBase: string;\n};\n\nconst CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [hideCookieMessage, setHideCookieMessage] = useState(true);\n\n  useEffect(() => {\n    const isCookieSet = Cookie.get(cookieId) ? true : false;\n    setHideCookieMessage(isCookieSet);\n  }, [cookieId]);\n\n  const handleClose = () => {\n    Cookie.set(cookieId, \"1\", { expires: COOKIE_EXPIRY });\n\n    ref.current?.classList.add(\"bottom-px\", \"opacity-0\");\n    setTimeout(() => setHideCookieMessage(true), 500);\n  };\n\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  // Presume the message is hidden by default\n  if (hideCookieMessage) return null;\n\n  return (\n    <div className=\"ui-cookie-message\" ref={ref}>\n      <p className=\"ui-text-p2 pr-8\">\n        <a href={absUrl(\"/privacy\")} className=\"underline\">\n          How we use cookies\n        </a>{\" \"}\n        to improve your experience.\n      </p>\n      <button\n        className=\"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap\"\n        onClick={handleClose}\n      >\n        Accept and close\n      </button>\n    </div>\n  );\n};\n\nexport default CookieMessage;\n"],"names":["React","useRef","useEffect","useState","Cookie","_absUrl","COOKIE_EXPIRY","CookieMessage","cookieId","urlBase","ref","hideCookieMessage","setHideCookieMessage","isCookieSet","get","handleClose","set","expires","current","classList","add","setTimeout","absUrl","path","div","className","p","a","href","button","onClick"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,WAAY,WAAY,AAE/B,QAAOC,YAAa,YAAa,CAEjC,MAAMC,cAAgB,IAOtB,MAAMC,cAAgB,CAAC,CAAEC,QAAQ,CAAEC,OAAO,CAAsB,IAC9D,MAAMC,IAAMT,OAAuB,MACnC,KAAM,CAACU,kBAAmBC,qBAAqB,CAAGT,SAAS,MAE3DD,UAAU,KACR,MAAMW,YAAcT,OAAOU,GAAG,CAACN,UAAY,KAAO,MAClDI,qBAAqBC,YACvB,EAAG,CAACL,SAAS,EAEb,MAAMO,YAAc,KAClBX,OAAOY,GAAG,CAACR,SAAU,IAAK,CAAES,QAASX,aAAc,EAEnDI,CAAAA,IAAIQ,OAAO,EAAEC,UAAUC,IAAI,YAAa,aACxCC,WAAW,IAAMT,qBAAqB,MAAO,IAC/C,EAEA,MAAMU,OAAS,AAACC,MAAiBlB,QAAQkB,KAAMd,SAG/C,GAAIE,kBAAmB,OAAO,KAE9B,OACE,oBAACa,OAAIC,UAAU,oBAAoBf,IAAKA,KACtC,oBAACgB,KAAED,UAAU,mBACX,oBAACE,KAAEC,KAAMN,OAAO,YAAaG,UAAU,aAAY,sBAE9C,IAAI,+BAGX,oBAACI,UACCJ,UAAU,kDACVK,QAASf,aACV,oBAKP,CAEA,gBAAeR,aAAc"}

package/core/DropdownMenu.js

@@ -1,2 +1,2 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,role:"button",onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-bold text-ably-secondary focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-ably-primary"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-ably-primary-inverse rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-ably-secondary hover:text-ably-primary"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-ably-primary"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
+import React from"react";import*as RadixDropdownMenu from"@radix-ui/react-dropdown-menu";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenu=({children})=>{return React.createElement(RadixDropdownMenu.Root,null,children)};const Trigger=({children,triggerClassNames="",description})=>{return React.createElement(RadixDropdownMenu.Trigger,{asChild:true},React.createElement("button",{id:"menu-trigger","aria-label":description,className:cn("flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000 transition-transform data-[state=open]:rotate-180"})))};const Content=({children,anchorPosition="right",contentClassNames})=>{return React.createElement(RadixDropdownMenu.Portal,null,React.createElement(RadixDropdownMenu.Content,{id:"menu-content",align:anchorPosition==="right"?"end":"start",sideOffset:5,className:cn("flex flex-col z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft","data-[state=open]:animate-[fade-in_150ms_ease-out]","data-[state=closed]:animate-[fade-out_150ms_ease-in]",contentClassNames)},children))};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement(RadixDropdownMenu.Item,{asChild:true},React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg outline-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 focus:bg-neutral-100 dark:focus:bg-neutral-1200"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children))};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map

package/core/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"click\", clickHandler);\n    return () => document.removeEventListener(\"click\", clickHandler);\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      aria-label={description}\n      role=\"button\"\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-label3 font-bold text-ably-secondary focus:outline-none\",\n        triggerClassNames,\n      )}\n    >\n      {children}\n      <Icon\n        name={\n          isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n        }\n        size=\"1.25rem\"\n        additionalCSS=\"text-ably-primary\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id=\"menu-content\"\n      role=\"menu\"\n      className={cn(\n        \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-ably-primary-inverse rounded-lg ui-shadow-md-soft\",\n        anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n        contentClassNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-2 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-ably-secondary hover:text-ably-primary\"\n    >\n      <p className=\"mb-1\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-ably-primary\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","role","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,KAAK,SACLC,QAAS,IAAMvB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,oFACAqB,oBAGDhB,SACD,oBAACN,MACC4B,KACEzB,OAAS,2BAA6B,6BAExC0B,KAAK,UACLC,cAAc,sBAItB,EAEA,MAAMC,QAAU,CAAC,CACfzB,QAAQ,CACR0B,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE9B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHO,KAAK,OACLN,UAAWnB,GACT,qIACA+B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD3B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sLAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC4B,KAAMU,SACNT,KAAK,OACLC,cAAc,iEAEd,MAELO,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAa0B,OAAO,CAAGA,OACvB1B,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}
+{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport * as RadixDropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  return <RadixDropdownMenu.Root>{children}</RadixDropdownMenu.Root>;\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  return (\n    <RadixDropdownMenu.Trigger asChild>\n      <button\n        id=\"menu-trigger\"\n        aria-label={description}\n        className={cn(\n          \"flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n          triggerClassNames,\n        )}\n      >\n        {children}\n        <Icon\n          name=\"icon-gui-chevron-down-mini\"\n          size=\"1.25rem\"\n          additionalCSS=\"text-neutral-1300 dark:text-neutral-000 transition-transform data-[state=open]:rotate-180\"\n        />\n      </button>\n    </RadixDropdownMenu.Trigger>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  return (\n    <RadixDropdownMenu.Portal>\n      <RadixDropdownMenu.Content\n        id=\"menu-content\"\n        align={anchorPosition === \"right\" ? \"end\" : \"start\"}\n        sideOffset={5}\n        className={cn(\n          \"flex flex-col z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n          \"data-[state=open]:animate-[fade-in_150ms_ease-out]\",\n          \"data-[state=closed]:animate-[fade-out_150ms_ease-in]\",\n          contentClassNames,\n        )}\n      >\n        {children}\n      </RadixDropdownMenu.Content>\n    </RadixDropdownMenu.Portal>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <RadixDropdownMenu.Item asChild>\n      <a\n        href={url}\n        className=\"menu-link group block p-2 rounded-lg outline-none\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\n      focus:bg-neutral-100 dark:focus:bg-neutral-1200\"\n      >\n        <p className=\"mb-1\">\n          {title}\n          {iconName ? (\n            <Icon\n              name={iconName}\n              size=\"1rem\"\n              additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n            />\n          ) : null}\n        </p>\n        {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n        {children}\n      </a>\n    </RadixDropdownMenu.Item>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","RadixDropdownMenu","Icon","cn","DropdownMenu","children","Root","Trigger","triggerClassNames","description","asChild","button","id","aria-label","className","name","size","additionalCSS","Content","anchorPosition","contentClassNames","Portal","align","sideOffset","Link","url","title","subtitle","iconName","Item","a","href","p"],"mappings":"AAAA,OAAOA,UAA0B,OAAQ,AACzC,WAAYC,sBAAuB,+BAAgC,AACnE,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAgD5B,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,OAAO,oBAACJ,kBAAkBK,IAAI,MAAED,SAClC,EAEA,MAAME,QAAU,CAAC,CACfF,QAAQ,CACRG,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,OACE,oBAACR,kBAAkBM,OAAO,EAACG,QAAAA,MACzB,oBAACC,UACCC,GAAG,eACHC,aAAYJ,YACZK,UAAWX,GACT,wGACAK,oBAGDH,SACD,oBAACH,MACCa,KAAK,6BACLC,KAAK,UACLC,cAAc,+FAKxB,EAEA,MAAMC,QAAU,CAAC,CACfb,QAAQ,CACRc,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,OACE,oBAACnB,kBAAkBoB,MAAM,MACvB,oBAACpB,kBAAkBiB,OAAO,EACxBN,GAAG,eACHU,MAAOH,iBAAmB,QAAU,MAAQ,QAC5CI,WAAY,EACZT,UAAWX,GACT,wIACA,qDACA,uDACAiB,oBAGDf,UAIT,EAEA,MAAMmB,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEvB,QAAQ,CAAa,IACnE,OACE,oBAACJ,kBAAkB4B,IAAI,EAACnB,QAAAA,MACtB,oBAACoB,KACCC,KAAMN,IACNX,UAAU,mSAIV,oBAACkB,KAAElB,UAAU,QACVY,MACAE,SACC,oBAAC1B,MACCa,KAAMa,SACNZ,KAAK,OACLC,cAAc,uFAEd,MAELU,SAAW,oBAACK,KAAElB,UAAU,mBAAmBa,UAAgB,KAC3DtB,UAIT,CAEAD,CAAAA,aAAaG,OAAO,CAAGA,OACvBH,CAAAA,aAAac,OAAO,CAAGA,OACvBd,CAAAA,aAAaoB,IAAI,CAAGA,IAEpB,gBAAepB,YAAa"}

package/core/Expander.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import{throttle}from"es-toolkit/compat";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold,expanded]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},"data-testid":"expander-container",className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,"data-testid":"expander-controls",className:`${heightThreshold===0&&!expanded?"":"mt-4"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName??""}`},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +"))};export default Expander;
+import React,{useEffect,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import{throttle}from"es-toolkit/compat";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);const height=contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold;return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("div",{"data-testid":"expander-controls",className:`${heightThreshold===0&&!expanded?"":"mt-4"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName??""}`},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
 //# sourceMappingURL=Expander.js.map

package/core/Expander.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { throttle } from \"es-toolkit/compat\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [height, setHeight] = useState<number | \"auto\">(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    if (contentHeight < heightThreshold) {\n      setHeight(\"auto\");\n    } else if (expanded) {\n      setHeight(contentHeight);\n    } else {\n      setHeight(heightThreshold);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold, expanded]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={`overflow-hidden transition-all relative ${className ?? \"\"}`}\n      >\n        {showControls && !expanded && (\n          <div\n            className={`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${\n              fadeClassName ?? \"\"\n            }`}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <div\n          onClick={() => setExpanded(!expanded)}\n          onKeyDown={(e) => e.key === \"Enter\" && setExpanded(!expanded)}\n          tabIndex={0}\n          data-testid=\"expander-controls\"\n          className={`${heightThreshold === 0 && !expanded ? \"\" : \"mt-4\"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName ?? \"\"}`}\n        >\n          {expanded\n            ? (controlsOpenedLabel ?? \"View less -\")\n            : (controlsClosedLabel ?? \"View all +\")}\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","throttle","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","height","setHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","div","style","data-testid","ref","onClick","onKeyDown","e","key","tabIndex"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,QAASC,QAAQ,KAAQ,mBAAoB,CAW7C,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWX,OAAuB,MACxC,KAAM,CAACY,aAAcC,gBAAgB,CAAGZ,SAAS,OACjD,KAAM,CAACa,cAAeC,iBAAiB,CAAGd,SAAiBG,iBAC3D,KAAM,CAACY,OAAQC,UAAU,CAAGhB,SAA0BG,iBACtD,KAAM,CAACc,SAAUC,YAAY,CAAGlB,SAAS,OAEzCF,UAAU,KACR,GAAIY,SAASS,OAAO,CAAE,CACpBL,iBAAiBJ,SAASS,OAAO,CAACC,YAAY,CAChD,CAEA,GAAIP,cAAgBV,gBAAiB,CACnCa,UAAU,OACZ,MAAO,GAAIC,SAAU,CACnBD,UAAUH,cACZ,KAAO,CACLG,UAAUb,gBACZ,CAEAS,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAiBc,SAAS,EAE7CnB,UAAU,KACR,MAAMuB,SAAWpB,SAAS,KACxB,GAAIS,SAASS,OAAO,CAAE,CACpBL,iBAAiBJ,SAASS,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,OACE,wCACE,oBAACI,OACCC,MAAO,CAAEX,MAAO,EAChBY,cAAY,qBACZvB,UAAW,CAAC,wCAAwC,EAAEA,WAAa,GAAG,CAAC,EAEtEO,cAAgB,CAACM,UAChB,oBAACQ,OACCrB,UAAW,CAAC,wFAAwF,EAClGC,eAAiB,GAClB,CAAC,GAGN,oBAACoB,OAAIG,IAAKlB,UAAWD,WAEtBE,cACC,oBAACc,OACCI,QAAS,IAAMX,YAAY,CAACD,UAC5Ba,UAAW,AAACC,GAAMA,EAAEC,GAAG,GAAK,SAAWd,YAAY,CAACD,UACpDgB,SAAU,EACVN,cAAY,oBACZvB,UAAW,CAAC,EAAED,kBAAoB,GAAK,CAACc,SAAW,GAAK,OAAO,sFAAsF,EAAEX,mBAAqB,GAAG,CAAC,EAE/KW,SACIV,qBAAuB,cACvBC,qBAAuB,cAKtC,CAEA,gBAAeN,QAAS"}
+{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { throttle } from \"es-toolkit/compat\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  const height =\n    contentHeight < heightThreshold\n      ? \"auto\"\n      : expanded\n        ? contentHeight\n        : heightThreshold;\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={`overflow-hidden transition-all relative ${className ?? \"\"}`}\n      >\n        {showControls && !expanded && (\n          <div\n            className={`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${\n              fadeClassName ?? \"\"\n            }`}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <div\n            data-testid=\"expander-controls\"\n            className={`${heightThreshold === 0 && !expanded ? \"\" : \"mt-4\"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName ?? \"\"}`}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </div>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","RadixCollapsible","throttle","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAASC,QAAQ,KAAQ,mBAAoB,CAW7C,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWZ,OAAuB,MACxC,KAAM,CAACa,aAAcC,gBAAgB,CAAGb,SAAS,OACjD,KAAM,CAACc,cAAeC,iBAAiB,CAAGf,SAAiBI,iBAC3D,KAAM,CAACY,SAAUC,YAAY,CAAGjB,SAAS,OAEzCF,UAAU,KACR,GAAIa,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CAEAN,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAgB,EAEnCN,UAAU,KACR,MAAMsB,SAAWlB,SAAS,KACxB,GAAIS,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,MAAMI,OACJV,cAAgBV,gBACZ,OACAY,SACEF,cACAV,gBAER,OACE,oBAACH,iBAAiBwB,IAAI,EAACC,KAAMV,SAAUW,aAAcV,aACnD,oBAACW,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZzB,UAAW,CAAC,wCAAwC,EAAEA,WAAa,GAAG,CAAC,EAEtEO,cAAgB,CAACI,UAChB,oBAACY,OACCvB,UAAW,CAAC,wFAAwF,EAClGC,eAAiB,GAClB,CAAC,GAGN,oBAACsB,OAAIG,IAAKpB,UAAWD,WAEtBE,cACC,oBAACX,iBAAiB+B,OAAO,EAACC,QAAAA,MACxB,oBAACL,OACCE,cAAY,oBACZzB,UAAW,CAAC,EAAED,kBAAoB,GAAK,CAACY,SAAW,GAAK,OAAO,sFAAsF,EAAET,mBAAqB,GAAG,CAAC,EAE/KS,SACIR,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}

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},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-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;
 //# 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    >\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","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,SAERF,QACC,wCACE,oBAACb,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,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        { \"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"}

package/core/Flash.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash","data-testid":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-4 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false,removeFlash}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[type,closeFlash])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{if(id){removeFlash(id)}},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-check-outline",error:"icon-gui-exclamation-triangle-outline",alert:"icon-gui-exclamation-triangle-outline",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash","data-testid":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-4 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&React.createElement(Icon,{name:"icon-gui-x-mark-outline",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false,removeFlash}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[flashes]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
 //# sourceMappingURL=Flash.js.map

package/core/Flash.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { getRemoteDataStore } from \"./remote-data-store.js\";\nimport ConnectStateWrapper from \"./ConnectStateWrapper\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype FlashesProps = {\n  flashes: { items: Pick<FlashProps, \"type\" | \"content\">[] };\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst REDUCER_KEY = \"flashes\";\nconst FLASH_DATA_ID = \"ui-flashes\";\n\nconst initialState = { items: [] };\n\nconst reducerFlashes = {\n  [REDUCER_KEY]: (\n    state: {\n      items: FlashProps[];\n    } = initialState,\n    action: { type: string; payload: FlashProps | FlashProps[] },\n  ) => {\n    switch (action.type) {\n      case \"flash/push\": {\n        const flashes = Array.isArray(action.payload)\n          ? action.payload\n          : [action.payload];\n        return { items: [...state.items, ...flashes] };\n      }\n      default:\n        return state;\n    }\n  },\n};\n\n// Not cool but redux isn't a long term plan here\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst selectFlashes = (store: any): { items: FlashProps[] } =>\n  store.getState()[REDUCER_KEY];\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, []);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useEffect(() => setTriggerEntryAnimation(true), []);\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = triggerEntryAnimation && !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = ({ flashes }: FlashesProps) => {\n  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);\n\n  const removeFlash = (flashId: string) =>\n    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));\n\n  useEffect(() => {\n    setFlashesWithIds((state) => {\n      return [\n        ...state,\n        ...(flashes?.items ?? []).map((flash) => ({\n          ...flash,\n          id: Math.random().toString(36).slice(2),\n          removed: false,\n          removeFlash,\n        })),\n      ];\n    });\n  }, [flashes]);\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashesWithIds\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  useEffect(() => {\n    const transformedFlashes =\n      flashes.map((flash) => {\n        const [type, content] = flash;\n        return { type, content };\n      }) || [];\n\n    if (transformedFlashes.length > 0) {\n      const store = getRemoteDataStore();\n\n      store.dispatch({\n        type: \"flash/push\",\n        payload: transformedFlashes,\n      });\n    }\n  }, []);\n\n  const WrappedFlashes = ConnectStateWrapper(Flashes, {\n    flashes: selectFlashes,\n  });\n\n  return <WrappedFlashes />;\n};\n\nexport { reducerFlashes, FLASH_DATA_ID, Flashes };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","DOMPurify","getRemoteDataStore","ConnectStateWrapper","Icon","REDUCER_KEY","FLASH_DATA_ID","initialState","items","reducerFlashes","state","action","type","flashes","Array","isArray","payload","selectFlashes","store","getState","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","id","content","removeFlash","ref","closed","setClosed","flashHeight","setFlashHeight","triggerEntryAnimation","setTriggerEntryAnimation","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","flashesWithIds","setFlashesWithIds","flashId","filter","item","map","flash","Math","random","toString","slice","removed","key","BackendFlashes","transformedFlashes","length","dispatch","WrappedFlashes"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Flash.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport { getRemoteDataStore } from \"./remote-data-store.js\";\nimport ConnectStateWrapper from \"./ConnectStateWrapper\";\nimport Icon from \"./Icon\";\nimport { ColorClass } from \"./styles/colors/types\";\nimport { IconName } from \"./Icon/types\";\n\ntype FlashPropsType = \"error\" | \"success\" | \"notice\" | \"info\" | \"alert\";\n\ntype FlashProps = {\n  id: string;\n  removed: boolean;\n  type: FlashPropsType;\n  content: string;\n  removeFlash: (id: string) => void;\n};\n\ntype FlashesProps = {\n  flashes: { items: Pick<FlashProps, \"type\" | \"content\">[] };\n};\n\ntype BackendFlashesProps = {\n  flashes: string[][];\n};\n\nconst REDUCER_KEY = \"flashes\";\nconst FLASH_DATA_ID = \"ui-flashes\";\n\nconst initialState = { items: [] };\n\nconst reducerFlashes = {\n  [REDUCER_KEY]: (\n    state: {\n      items: FlashProps[];\n    } = initialState,\n    action: { type: string; payload: FlashProps | FlashProps[] },\n  ) => {\n    switch (action.type) {\n      case \"flash/push\": {\n        const flashes = Array.isArray(action.payload)\n          ? action.payload\n          : [action.payload];\n        return { items: [...state.items, ...flashes] };\n      }\n      default:\n        return state;\n    }\n  },\n};\n\n// Not cool but redux isn't a long term plan here\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst selectFlashes = (store: any): { items: FlashProps[] } =>\n  store.getState()[REDUCER_KEY];\n\nconst FLASH_BG_COLOR = {\n  error: \"bg-gui-error\",\n  success: \"bg-zingy-green\",\n  notice: \"bg-electric-cyan\",\n  info: \"bg-electric-cyan\",\n  alert: \"bg-active-orange\",\n};\n\nconst FLASH_TEXT_COLOR = {\n  error: \"text-white\",\n  success: \"text-cool-black\",\n  notice: \"text-cool-black\",\n  info: \"text-cool-black\",\n  alert: \"text-white\",\n};\n\nconst AUTO_HIDE = [\"success\", \"info\", \"notice\"];\nconst AUTO_HIDE_TIME = 8000;\n\nconst useAutoHide = (type: string, closeFlash: () => void) => {\n  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (AUTO_HIDE.includes(type)) {\n      timeoutId.current = setTimeout(() => {\n        closeFlash();\n      }, AUTO_HIDE_TIME);\n    }\n\n    return () => {\n      if (timeoutId.current) {\n        clearTimeout(timeoutId.current);\n      }\n    };\n  }, [type, closeFlash]);\n};\n\nconst Flash = ({ id, type, content, removeFlash }: FlashProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [closed, setClosed] = useState(false);\n  const [flashHeight, setFlashHeight] = useState(0);\n  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);\n\n  const closeFlash = () => {\n    if (ref.current) {\n      setFlashHeight(ref.current.getBoundingClientRect().height);\n    }\n\n    setClosed(true);\n\n    setTimeout(() => {\n      if (id) {\n        removeFlash(id);\n      }\n    }, 100);\n  };\n\n  useEffect(() => setTriggerEntryAnimation(true), []);\n  useAutoHide(type, closeFlash);\n\n  const animateEntry = triggerEntryAnimation && !closed;\n\n  let style;\n\n  if (flashHeight && !closed) {\n    style = { height: `${flashHeight}px` };\n  } else if (closed) {\n    style = { height: 0, marginTop: 0, zIndex: -1 };\n  } else {\n    style = {};\n  }\n\n  const safeContent = DOMPurify.sanitize(content, {\n    ALLOWED_TAGS: [\"a\"],\n    ALLOWED_ATTR: [\"href\", \"data-method\"],\n    ALLOWED_URI_REGEXP: /^\\/[^/]/,\n  });\n\n  const withIcons: Record<FlashPropsType, IconName | \"\"> = {\n    notice: \"icon-gui-ably-badge\",\n    success: \"icon-gui-check-outline\",\n    error: \"icon-gui-exclamation-triangle-outline\",\n    alert: \"icon-gui-exclamation-triangle-outline\",\n    info: \"\",\n  };\n\n  const iconColor: Record<FlashPropsType, ColorClass | \"\"> = {\n    notice: \"text-cool-black\",\n    success: \"text-cool-black\",\n    error: \"text-white\",\n    alert: \"text-white\",\n    info: \"\",\n  };\n\n  return (\n    <div\n      className={`ui-flash-message ui-grid-px ${\n        animateEntry ? \"ui-flash-message-enter\" : \"\"\n      }`}\n      style={style}\n      ref={ref}\n      data-id=\"ui-flash\"\n      data-testid=\"ui-flash\"\n    >\n      <div\n        className={`${FLASH_BG_COLOR[type]} p-8 flex align-center rounded shadow-container-subtle`}\n      >\n        {withIcons[type] && iconColor[type] && (\n          <Icon\n            name={withIcons[type]}\n            color={iconColor[type]}\n            size=\"1.5rem\"\n            additionalCSS=\"mr-4 self-baseline\"\n          />\n        )}\n        <p\n          className={`ui-text-p1 mr-4 ${FLASH_TEXT_COLOR[type]}`}\n          dangerouslySetInnerHTML={{ __html: safeContent }}\n        />\n        <button\n          type=\"button\"\n          className=\"p-0 ml-auto self-start focus:outline-none\"\n          onClick={closeFlash}\n        >\n          {iconColor[type] && (\n            <Icon\n              name=\"icon-gui-x-mark-outline\"\n              color={iconColor[type]}\n              size=\"1.5rem\"\n              additionalCSS=\"transition-colors\"\n            />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst Flashes = ({ flashes }: FlashesProps) => {\n  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);\n\n  const removeFlash = (flashId: string) =>\n    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));\n\n  useEffect(() => {\n    setFlashesWithIds((state) => {\n      return [\n        ...state,\n        ...(flashes?.items ?? []).map((flash) => ({\n          ...flash,\n          id: Math.random().toString(36).slice(2),\n          removed: false,\n          removeFlash,\n        })),\n      ];\n    });\n  }, [flashes]);\n\n  return (\n    <div className=\"ui-flash\" data-id={FLASH_DATA_ID}>\n      {flashesWithIds\n        .filter((item) => !item.removed)\n        .map((flash) => (\n          <Flash key={flash.id} {...flash} />\n        ))}\n    </div>\n  );\n};\n\nconst BackendFlashes = ({ flashes }: BackendFlashesProps) => {\n  useEffect(() => {\n    const transformedFlashes =\n      flashes.map((flash) => {\n        const [type, content] = flash;\n        return { type, content };\n      }) || [];\n\n    if (transformedFlashes.length > 0) {\n      const store = getRemoteDataStore();\n\n      store.dispatch({\n        type: \"flash/push\",\n        payload: transformedFlashes,\n      });\n    }\n  }, [flashes]);\n\n  const WrappedFlashes = ConnectStateWrapper(Flashes, {\n    flashes: selectFlashes,\n  });\n\n  return <WrappedFlashes />;\n};\n\nexport { reducerFlashes, FLASH_DATA_ID, Flashes };\nexport default BackendFlashes;\n"],"names":["React","useEffect","useState","useRef","DOMPurify","getRemoteDataStore","ConnectStateWrapper","Icon","REDUCER_KEY","FLASH_DATA_ID","initialState","items","reducerFlashes","state","action","type","flashes","Array","isArray","payload","selectFlashes","store","getState","FLASH_BG_COLOR","error","success","notice","info","alert","FLASH_TEXT_COLOR","AUTO_HIDE","AUTO_HIDE_TIME","useAutoHide","closeFlash","timeoutId","includes","current","setTimeout","clearTimeout","Flash","id","content","removeFlash","ref","closed","setClosed","flashHeight","setFlashHeight","triggerEntryAnimation","setTriggerEntryAnimation","getBoundingClientRect","height","animateEntry","style","marginTop","zIndex","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","withIcons","iconColor","div","className","data-id","data-testid","name","color","size","additionalCSS","p","dangerouslySetInnerHTML","__html","button","onClick","Flashes","flashesWithIds","setFlashesWithIds","flashId","filter","item","map","flash","Math","random","toString","slice","removed","key","BackendFlashes","transformedFlashes","length","dispatch","WrappedFlashes"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,CAAEC,MAAM,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAClC,QAASC,kBAAkB,KAAQ,wBAAyB,AAC5D,QAAOC,wBAAyB,uBAAwB,AACxD,QAAOC,SAAU,QAAS,CAsB1B,MAAMC,YAAc,UACpB,MAAMC,cAAgB,aAEtB,MAAMC,aAAe,CAAEC,MAAO,EAAE,AAAC,EAEjC,MAAMC,eAAiB,CACrB,CAACJ,YAAY,CAAE,CACbK,MAEIH,YAAY,CAChBI,UAEA,OAAQA,OAAOC,IAAI,EACjB,IAAK,aAAc,CACjB,MAAMC,QAAUC,MAAMC,OAAO,CAACJ,OAAOK,OAAO,EACxCL,OAAOK,OAAO,CACd,CAACL,OAAOK,OAAO,CAAC,CACpB,MAAO,CAAER,MAAO,IAAIE,MAAMF,KAAK,IAAKK,QAAQ,AAAC,CAC/C,CACA,QACE,OAAOH,KACX,CACF,CACF,EAIA,MAAMO,cAAgB,AAACC,OACrBA,MAAMC,QAAQ,EAAE,CAACd,YAAY,CAE/B,MAAMe,eAAiB,CACrBC,MAAO,eACPC,QAAS,iBACTC,OAAQ,mBACRC,KAAM,mBACNC,MAAO,kBACT,EAEA,MAAMC,iBAAmB,CACvBL,MAAO,aACPC,QAAS,kBACTC,OAAQ,kBACRC,KAAM,kBACNC,MAAO,YACT,EAEA,MAAME,UAAY,CAAC,UAAW,OAAQ,SAAS,CAC/C,MAAMC,eAAiB,IAEvB,MAAMC,YAAc,CAACjB,KAAckB,cACjC,MAAMC,UAAY/B,OAA6C,MAE/DF,UAAU,KACR,GAAI6B,UAAUK,QAAQ,CAACpB,MAAO,CAC5BmB,UAAUE,OAAO,CAAGC,WAAW,KAC7BJ,YACF,EAAGF,eACL,CAEA,MAAO,KACL,GAAIG,UAAUE,OAAO,CAAE,CACrBE,aAAaJ,UAAUE,OAAO,CAChC,CACF,CACF,EAAG,CAACrB,KAAMkB,WAAW,CACvB,EAEA,MAAMM,MAAQ,CAAC,CAAEC,EAAE,CAAEzB,IAAI,CAAE0B,OAAO,CAAEC,WAAW,CAAc,IAC3D,MAAMC,IAAMxC,OAAuB,MACnC,KAAM,CAACyC,OAAQC,UAAU,CAAG3C,SAAS,OACrC,KAAM,CAAC4C,YAAaC,eAAe,CAAG7C,SAAS,GAC/C,KAAM,CAAC8C,sBAAuBC,yBAAyB,CAAG/C,SAAS,OAEnE,MAAM+B,WAAa,KACjB,GAAIU,IAAIP,OAAO,CAAE,CACfW,eAAeJ,IAAIP,OAAO,CAACc,qBAAqB,GAAGC,MAAM,CAC3D,CAEAN,UAAU,MAEVR,WAAW,KACT,GAAIG,GAAI,CACNE,YAAYF,GACd,CACF,EAAG,IACL,EAEAvC,UAAU,IAAMgD,yBAAyB,MAAO,EAAE,EAClDjB,YAAYjB,KAAMkB,YAElB,MAAMmB,aAAeJ,uBAAyB,CAACJ,OAE/C,IAAIS,MAEJ,GAAIP,aAAe,CAACF,OAAQ,CAC1BS,MAAQ,CAAEF,OAAQ,CAAC,EAAEL,YAAY,EAAE,CAAC,AAAC,CACvC,MAAO,GAAIF,OAAQ,CACjBS,MAAQ,CAAEF,OAAQ,EAAGG,UAAW,EAAGC,OAAQ,CAAC,CAAE,CAChD,KAAO,CACLF,MAAQ,CAAC,CACX,CAEA,MAAMG,YAAcpD,UAAUqD,QAAQ,CAAChB,QAAS,CAC9CiB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,UAAmD,CACvDnC,OAAQ,sBACRD,QAAS,yBACTD,MAAO,wCACPI,MAAO,wCACPD,KAAM,EACR,EAEA,MAAMmC,UAAqD,CACzDpC,OAAQ,kBACRD,QAAS,kBACTD,MAAO,aACPI,MAAO,aACPD,KAAM,EACR,EAEA,OACE,oBAACoC,OACCC,UAAW,CAAC,4BAA4B,EACtCZ,aAAe,yBAA2B,GAC3C,CAAC,CACFC,MAAOA,MACPV,IAAKA,IACLsB,UAAQ,WACRC,cAAY,YAEZ,oBAACH,OACCC,UAAW,CAAC,EAAEzC,cAAc,CAACR,KAAK,CAAC,sDAAsD,CAAC,EAEzF8C,SAAS,CAAC9C,KAAK,EAAI+C,SAAS,CAAC/C,KAAK,EACjC,oBAACR,MACC4D,KAAMN,SAAS,CAAC9C,KAAK,CACrBqD,MAAON,SAAS,CAAC/C,KAAK,CACtBsD,KAAK,SACLC,cAAc,uBAGlB,oBAACC,KACCP,UAAW,CAAC,gBAAgB,EAAEnC,gBAAgB,CAACd,KAAK,CAAC,CAAC,CACtDyD,wBAAyB,CAAEC,OAAQjB,WAAY,IAEjD,oBAACkB,UACC3D,KAAK,SACLiD,UAAU,4CACVW,QAAS1C,YAER6B,SAAS,CAAC/C,KAAK,EACd,oBAACR,MACC4D,KAAK,0BACLC,MAAON,SAAS,CAAC/C,KAAK,CACtBsD,KAAK,SACLC,cAAc,wBAO5B,EAEA,MAAMM,QAAU,CAAC,CAAE5D,OAAO,CAAgB,IACxC,KAAM,CAAC6D,eAAgBC,kBAAkB,CAAG5E,SAAuB,EAAE,EAErE,MAAMwC,YAAc,AAACqC,SACnBD,kBAAkB,AAACnE,OAAUA,MAAMqE,MAAM,CAAC,AAACC,MAASA,KAAKzC,EAAE,GAAKuC,UAElE9E,UAAU,KACR6E,kBAAkB,AAACjE,QACjB,MAAO,IACFA,SACA,AAACG,CAAAA,SAASL,OAAS,EAAE,AAAD,EAAGuE,GAAG,CAAC,AAACC,OAAW,CAAA,CACxC,GAAGA,KAAK,CACR3C,GAAI4C,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,KAAK,CAAC,GACrCC,QAAS,MACT9C,WACF,CAAA,GACD,AACH,EACF,EAAG,CAAC1B,QAAQ,EAEZ,OACE,oBAAC+C,OAAIC,UAAU,WAAWC,UAASxD,eAChCoE,eACEG,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKO,OAAO,EAC9BN,GAAG,CAAC,AAACC,OACJ,oBAAC5C,OAAMkD,IAAKN,MAAM3C,EAAE,CAAG,GAAG2C,KAAK,IAIzC,EAEA,MAAMO,eAAiB,CAAC,CAAE1E,OAAO,CAAuB,IACtDf,UAAU,KACR,MAAM0F,mBACJ3E,QAAQkE,GAAG,CAAC,AAACC,QACX,KAAM,CAACpE,KAAM0B,QAAQ,CAAG0C,MACxB,MAAO,CAAEpE,KAAM0B,OAAQ,CACzB,IAAM,EAAE,CAEV,GAAIkD,mBAAmBC,MAAM,CAAG,EAAG,CACjC,MAAMvE,MAAQhB,qBAEdgB,MAAMwE,QAAQ,CAAC,CACb9E,KAAM,aACNI,QAASwE,kBACX,EACF,CACF,EAAG,CAAC3E,QAAQ,EAEZ,MAAM8E,eAAiBxF,oBAAoBsE,QAAS,CAClD5D,QAASI,aACX,GAEA,OAAO,oBAAC0E,oBACV,CAEA,QAASlF,cAAc,CAAEH,aAAa,CAAEmE,OAAO,CAAG,AAClD,gBAAec,cAAe"}

package/core/Flyout.js

@@ -1,2 +1,2 @@
-import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-label3 font-bold text-ably-secondary hover:text-ably-primary px-3 py-2 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{onClick:event=>event.preventDefault(),className:cn("group outline-none focus:outline-none select-none cursor-pointer relative","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200","[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200","[&[data-state=open]]:text-ably-primary",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-6 z-10",PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name,href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name))),React.createElement("div",{className:cn("absolute top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply",fadingOut:fadingOut}):null)};export default Flyout;
+import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-3 py-2 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{onClick:event=>event.preventDefault(),className:cn("group outline-none focus:outline-none select-none cursor-pointer relative","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200","[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200","[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-6 z-10",PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name,href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name))),React.createElement("div",{className:cn("absolute top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply",fadingOut:fadingOut}):null)};export default Flyout;
 //# sourceMappingURL=Flyout.js.map

package/core/Flyout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * Name for the menu item.\n     */\n    name: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-label3 font-bold text-ably-secondary hover:text-ably-primary px-3 py-2 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ name, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={name}>\n                <NavigationMenuTrigger\n                  onClick={(event) => event.preventDefault()}\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\n                    \"[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200\",\n                    \"[&[data-state=open]]:text-ably-primary\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {name}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute right-0 top-0 p-6 z-10\",\n                    PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink\n                key={name}\n                href={link}\n                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n              >\n                {name}\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","onClick","event","preventDefault","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CA6CpE,MAAMC,0BACJ,mHACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACL,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BO,UAAUY,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,MACvB,oBAAC/B,uBACCoC,QAAS,AAACC,OAAUA,MAAMC,cAAc,GACxC3B,UAAWP,GACT,4EACA,6DACA,gFACA,yCACAG,0BACAa,oBAGDW,MAEH,oBAAC9B,uBACCU,UAAWP,GACT,kCACAK,gBACAyB,iBAGDF,UAIL,oBAAC7B,oBACCgC,IAAKJ,KACLQ,KAAMN,KACNtB,UAAWP,GAAGG,0BAA2Ba,oBAExCW,QAMT,oBAAClB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CC,OACC,oBAACZ,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}
+{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * Name for the menu item.\n     */\n    name: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-3 py-2 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ name, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={name}>\n                <NavigationMenuTrigger\n                  onClick={(event) => event.preventDefault()}\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\n                    \"[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200\",\n                    \"[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {name}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute right-0 top-0 p-6 z-10\",\n                    PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink\n                key={name}\n                href={link}\n                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n              >\n                {name}\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","onClick","event","preventDefault","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CA6CpE,MAAMC,0BACJ,mKACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACL,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BO,UAAUY,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,MACvB,oBAAC/B,uBACCoC,QAAS,AAACC,OAAUA,MAAMC,cAAc,GACxC3B,UAAWP,GACT,4EACA,6DACA,gFACA,oFACAG,0BACAa,oBAGDW,MAEH,oBAAC9B,uBACCU,UAAWP,GACT,kCACAK,gBACAyB,iBAGDF,UAIL,oBAAC7B,oBACCgC,IAAKJ,KACLQ,KAAMN,KACNtB,UAAWP,GAAGG,0BAA2Ba,oBAExCW,QAMT,oBAAClB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CC,OACC,oBAACZ,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}