@mintlify/msft-sdk 1.1.9 → 1.1.10

package/dist/components/content-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0 }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className=\"mint:my-6\">\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className=\"mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700\"\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => (tabRefs.current[index] = el)}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => setActiveTab(index)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={cn(\n                  \"mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2\",\n                  isActive\n                    ? \"mint:border-b-[#0078d4] mint:text-[#0078d4] mint:dark:border-b-[#75b6e7] mint:dark:text-[#75b6e7]\"\n                    : \"mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600\"\n                )}\n              >\n                <span className=\"mint:flex mint:items-center mint:gap-2\">\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  {title}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={cn(\n                \"mint:outline-none\",\n                activeTab !== index && \"mint:hidden\"\n              )}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","activeTab","setActiveTab","useState","tabRefs","useRef","tabs","useEffect","handleKeyDown","event","currentIndex","newIndex","_a","jsx","jsxs","tab","index","title","icon","isActive","el","e","cn"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n  defaultTabIndex?: number;\n  className?: string;\n  onClickTab?: (index: number) => void;\n  onChange?: (index: number) => void;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0, defaultTabIndex, className, onClickTab, onChange }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTabIndex ?? defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className={cn(\"mint:my-6\", className)}>\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className=\"mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700\"\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => {tabRefs.current[index] = el}}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => {\n                  setActiveTab(index);\n                  onClickTab?.(index);\n                  onChange?.(index);\n                }}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={cn(\n                  \"mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2\",\n                  isActive\n                    ? \"mint:border-b-[#0078d4] mint:text-[#0078d4] mint:dark:border-b-[#75b6e7] mint:dark:text-[#75b6e7]\"\n                    : \"mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600\"\n                )}\n              >\n                <span className=\"mint:flex mint:items-center mint:gap-2\">\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  {title}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={cn(\n                \"mint:outline-none\",\n                activeTab !== index && \"mint:hidden\"\n              )}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","defaultTabIndex","className","onClickTab","onChange","activeTab","setActiveTab","useState","tabRefs","useRef","tabs","useEffect","handleKeyDown","event","currentIndex","newIndex","_a","jsx","cn","tab","index","title","icon","isActive","el","e","jsxs"],"mappings":"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"}

package/dist/components/nav-tree/dropdown-menu.js

@@ -27,7 +27,7 @@ function _({
             /* @__PURE__ */ t("div", { className: "mint:text-sm mint:font-medium mint:text-[#111827] mint:dark:text-white", children: i.title }),
             /* @__PURE__ */ t("div", { className: "mint:text-xs mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:line-clamp-2", children: i.description })
           ] }),
-          /* @__PURE__ */ t("div", { className: "mint:shrink-0", children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: "mint:flex-shrink-0", children: /* @__PURE__ */ t(
             "svg",
             {
               className: r(

package/dist/components/nav-tree/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/nav-tree/dropdown-menu.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { CheckmarkFilled, DocumentRegular } from \"@fluentui/react-icons\";\nimport { useComponents } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownConfig {\n  title: string;\n  description: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  color?: {\n    light?: string;\n    dark?: string;\n  };\n  items?: DropdownItem[];\n}\n\nexport interface DropdownItem {\n  title: string;\n  href?: string;\n  description?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\ninterface DropdownMenuProps {\n  dropdown: DropdownConfig;\n  isActive?: boolean;\n  activeHref?: string;\n  className?: string;\n}\n\nexport function DropdownMenu({\n  dropdown,\n  isActive = false,\n  activeHref,\n  className = \"\",\n}: DropdownMenuProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { LinkComponent } = useComponents();\n  const Icon = dropdown.icon || DocumentRegular;\n\n  return (\n    <div className={cn(\"mint:mb-2 mint:lg:mb-2\", className)}>\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        aria-expanded={isExpanded}\n        aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n          dropdown.title\n        } dropdown`}\n        className={cn(\n          \"mint:w-full mint:py-2 mint:px-3 mint:rounded-xl mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:cursor-pointer mint:hover:border-[#d1d5db] mint:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:border-[rgba(255,255,255,0.15)] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:shadow-[0_0_0_2px_rgba(100,63,178,0.2)] mint:border-[rgba(100,63,178,0.3)]\"\n        )}\n      >\n        <div className=\"mint:flex mint:items-center mint:gap-2\">\n          <div className=\"mint:shrink-0\">\n            <div className=\"mint:w-8 mint:h-8 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n              <Icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n            </div>\n          </div>\n\n          <div className=\"mint:flex-1 mint:text-left mint:min-w-0\">\n            <div className=\"mint:text-sm mint:font-medium mint:text-[#111827] mint:dark:text-white\">\n              {dropdown.title}\n            </div>\n            <div className=\"mint:text-xs mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:line-clamp-2\">\n              {dropdown.description}\n            </div>\n          </div>\n\n          <div className=\"mint:shrink-0\">\n            <svg\n              className={cn(\n                \"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:transition-transform mint:duration-200\",\n                isExpanded ? \"mint:rotate-180\" : \"mint:rotate-0\"\n              )}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </div>\n        </div>\n      </button>\n\n      {isExpanded && dropdown.items && dropdown.items.length > 0 && (\n        <div className=\"mint:relative mint:mt-2\">\n          <div className=\"mint:absolute mint:top-0 mint:left-0 mint:right-0 mint:z-10 mint:w-full mint:p-1 mint:rounded-lg mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]\">\n            <div className=\"mint:flex mint:flex-col mint:gap-1\">\n              {dropdown.items.map((item, index) => {\n                const LinkElement = LinkComponent || \"a\";\n                return (\n                  <LinkElement\n                    key={`${item.href}-${index}`}\n                    href={item.href}\n                    className=\"mint:flex mint:items-center mint:justify-between mint:py-1.5 mint:px-2 mint:text-sm mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#111827] mint:dark:text-white mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#111827] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n                  >\n                    <div className=\"mint:flex mint:items-center mint:gap-2\">\n                      {item.icon && (\n                        <div className=\"mint:w-7 mint:h-7 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n                          <item.icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                        </div>\n                      )}\n                      <span className=\"mint:font-medium\">{item.title}</span>\n                    </div>\n                    {item.href && activeHref === item.href && (\n                      <CheckmarkFilled className=\"mint:w-3 mint:h-3 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                    )}\n                  </LinkElement>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DropdownMenu","dropdown","isActive","activeHref","className","isExpanded","setIsExpanded","useState","LinkComponent","useComponents","Icon","DocumentRegular","cn","jsx","jsxs","item","index","CheckmarkFilled"],"mappings":";;;;;AA8BO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAsB;AACpB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAOT,EAAS,QAAQU;AAE9B,2BACG,OAAA,EAAI,WAAWC,EAAG,0BAA0BR,CAAS,GACpD,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,QACxC,iBAAeA;AAAA,QACf,cAAY,GAAGA,IAAa,aAAa,QAAQ,IAC/CJ,EAAS,KACX;AAAA,QACA,WAAWW;AAAA,UACT;AAAA,UACAV,KACE;AAAA,QAAA;AAAA,QAGJ,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACH,GAAA,EAAK,WAAU,iEAAA,CAAiE,EAAA,CACnF,GACF;AAAA,UAEA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0EACZ,UAAAZ,EAAS,OACZ;AAAA,YACA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+EACZ,YAAS,YAAA,CACZ;AAAA,UAAA,GACF;AAAA,UAEA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAP,IAAa,oBAAoB;AAAA,cAAA;AAAA,cAEnC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,eAAY;AAAA,cAEZ,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,aAAa;AAAA,kBACb,GAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDR,KAAcJ,EAAS,SAASA,EAAS,MAAM,SAAS,KACvD,gBAAAY,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,kTACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sCACZ,YAAS,MAAM,IAAI,CAACE,GAAMC,MAGvB,gBAAAF;AAAA,MAFkBN,KAAiB;AAAA,MAElC;AAAA,QAEC,MAAMO,EAAK;AAAA,QACX,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,YAAAC,EAAK,QACJ,gBAAAF,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACE,EAAK,MAAL,EAAU,WAAU,iEAAA,CAAiE,EAAA,CACxF;AAAA,YAEF,gBAAAF,EAAC,QAAA,EAAK,WAAU,oBAAoB,YAAK,MAAA,CAAM;AAAA,UAAA,GACjD;AAAA,UACCE,EAAK,QAAQZ,MAAeY,EAAK,QAChC,gBAAAF,EAACI,GAAA,EAAgB,WAAU,iEAAA,CAAiE;AAAA,QAAA;AAAA,MAAA;AAAA,MAbzF,GAAGF,EAAK,IAAI,IAAIC,CAAK;AAAA,IAAA,CAiB/B,EAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/nav-tree/dropdown-menu.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { CheckmarkFilled, DocumentRegular } from \"@fluentui/react-icons\";\nimport { useComponents } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface DropdownConfig {\n  title: string;\n  description: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  color?: {\n    light?: string;\n    dark?: string;\n  };\n  items?: DropdownItem[];\n}\n\nexport interface DropdownItem {\n  title: string;\n  href?: string;\n  description?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\ninterface DropdownMenuProps {\n  dropdown: DropdownConfig;\n  isActive?: boolean;\n  activeHref?: string;\n  className?: string;\n}\n\nexport function DropdownMenu({\n  dropdown,\n  isActive = false,\n  activeHref,\n  className = \"\",\n}: DropdownMenuProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { LinkComponent } = useComponents();\n  const Icon = dropdown.icon || DocumentRegular;\n\n  return (\n    <div className={cn(\"mint:mb-2 mint:lg:mb-2\", className)}>\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        aria-expanded={isExpanded}\n        aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n          dropdown.title\n        } dropdown`}\n        className={cn(\n          \"mint:w-full mint:py-2 mint:px-3 mint:rounded-xl mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:cursor-pointer mint:hover:border-[#d1d5db] mint:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:border-[rgba(255,255,255,0.15)] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:shadow-[0_0_0_2px_rgba(100,63,178,0.2)] mint:border-[rgba(100,63,178,0.3)]\"\n        )}\n      >\n        <div className=\"mint:flex mint:items-center mint:gap-2\">\n          <div className=\"mint:shrink-0\">\n            <div className=\"mint:w-8 mint:h-8 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n              <Icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n            </div>\n          </div>\n\n          <div className=\"mint:flex-1 mint:text-left mint:min-w-0\">\n            <div className=\"mint:text-sm mint:font-medium mint:text-[#111827] mint:dark:text-white\">\n              {dropdown.title}\n            </div>\n            <div className=\"mint:text-xs mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:line-clamp-2\">\n              {dropdown.description}\n            </div>\n          </div>\n\n          <div className=\"mint:flex-shrink-0\">\n            <svg\n              className={cn(\n                \"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:transition-transform mint:duration-200\",\n                isExpanded ? \"mint:rotate-180\" : \"mint:rotate-0\"\n              )}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M19 9l-7 7-7-7\"\n              />\n            </svg>\n          </div>\n        </div>\n      </button>\n\n      {isExpanded && dropdown.items && dropdown.items.length > 0 && (\n        <div className=\"mint:relative mint:mt-2\">\n          <div className=\"mint:absolute mint:top-0 mint:left-0 mint:right-0 mint:z-10 mint:w-full mint:p-1 mint:rounded-lg mint:bg-white mint:dark:bg-[#1f1f1f] mint:border mint:border-[rgba(229,231,235,0.7)] mint:dark:border-[rgba(255,255,255,0.07)] mint:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.05)]\">\n            <div className=\"mint:flex mint:flex-col mint:gap-1\">\n              {dropdown.items.map((item, index) => {\n                const LinkElement = LinkComponent || \"a\";\n                return (\n                  <LinkElement\n                    key={`${item.href}-${index}`}\n                    href={item.href}\n                    className=\"mint:flex mint:items-center mint:justify-between mint:py-1.5 mint:px-2 mint:text-sm mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#111827] mint:dark:text-white mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#111827] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n                  >\n                    <div className=\"mint:flex mint:items-center mint:gap-2\">\n                      {item.icon && (\n                        <div className=\"mint:w-7 mint:h-7 mint:rounded-lg mint:flex mint:items-center mint:justify-center mint:bg-[#e1cefc] mint:dark:bg-[#38255e] mint:border mint:border-[#643fb2] mint:dark:border-[#c9aaf9]\">\n                          <item.icon className=\"mint:w-4 mint:h-4 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                        </div>\n                      )}\n                      <span className=\"mint:font-medium\">{item.title}</span>\n                    </div>\n                    {item.href && activeHref === item.href && (\n                      <CheckmarkFilled className=\"mint:w-3 mint:h-3 mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\" />\n                    )}\n                  </LinkElement>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DropdownMenu","dropdown","isActive","activeHref","className","isExpanded","setIsExpanded","useState","LinkComponent","useComponents","Icon","DocumentRegular","cn","jsx","jsxs","item","index","CheckmarkFilled"],"mappings":";;;;;AA8BO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAsB;AACpB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAOT,EAAS,QAAQU;AAE9B,2BACG,OAAA,EAAI,WAAWC,EAAG,0BAA0BR,CAAS,GACpD,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,QACxC,iBAAeA;AAAA,QACf,cAAY,GAAGA,IAAa,aAAa,QAAQ,IAC/CJ,EAAS,KACX;AAAA,QACA,WAAWW;AAAA,UACT;AAAA,UACAV,KACE;AAAA,QAAA;AAAA,QAGJ,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACH,GAAA,EAAK,WAAU,iEAAA,CAAiE,EAAA,CACnF,GACF;AAAA,UAEA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0EACZ,UAAAZ,EAAS,OACZ;AAAA,YACA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+EACZ,YAAS,YAAA,CACZ;AAAA,UAAA,GACF;AAAA,UAEA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAP,IAAa,oBAAoB;AAAA,cAAA;AAAA,cAEnC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,eAAY;AAAA,cAEZ,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,aAAa;AAAA,kBACb,GAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA,EACF,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDR,KAAcJ,EAAS,SAASA,EAAS,MAAM,SAAS,KACvD,gBAAAY,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,kTACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sCACZ,YAAS,MAAM,IAAI,CAACE,GAAMC,MAGvB,gBAAAF;AAAA,MAFkBN,KAAiB;AAAA,MAElC;AAAA,QAEC,MAAMO,EAAK;AAAA,QACX,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,YAAAC,EAAK,QACJ,gBAAAF,EAAC,OAAA,EAAI,WAAU,2LACb,UAAA,gBAAAA,EAACE,EAAK,MAAL,EAAU,WAAU,iEAAA,CAAiE,EAAA,CACxF;AAAA,YAEF,gBAAAF,EAAC,QAAA,EAAK,WAAU,oBAAoB,YAAK,MAAA,CAAM;AAAA,UAAA,GACjD;AAAA,UACCE,EAAK,QAAQZ,MAAeY,EAAK,QAChC,gBAAAF,EAACI,GAAA,EAAgB,WAAU,iEAAA,CAAiE;AAAA,QAAA;AAAA,MAAA;AAAA,MAbzF,GAAGF,EAAK,IAAI,IAAIC,CAAK;AAAA,IAAA,CAiB/B,EAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/nav-tree/index.js

@@ -1,14 +1,15 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { useComponents as k } from "../../context/components-context.js";
-import { DropdownMenu as w } from "./dropdown-menu.js";
-import { cn as p } from "../../utils/cn.js";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useRef as k, useEffect as C, useState as w } from "react";
+import { useComponents as v } from "../../context/components-context.js";
+import { DropdownMenu as N } from "./dropdown-menu.js";
+import { cn as x } from "../../utils/cn.js";
+import { MethodPill as E } from "../Api/MethodPill.js";
 /* empty css               */
 function g({ isExpanded: t }) {
   return /* @__PURE__ */ n(
     "svg",
     {
-      className: p(
+      className: x(
         "mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]",
         t ? "mint:rotate-90" : "mint:rotate-0"
       ),
@@ -28,10 +29,50 @@ function g({ isExpanded: t }) {
     }
   );
 }
-function u({ item: t, activeId: l, level: m = 0 }) {
-  const f = m === 0 ? !0 : t.expanded ?? !1, [i, b] = v(f), { LinkComponent: c } = k(), o = t.children && t.children.length > 0, h = o && !t.href, e = t.href && l === t.href, s = t.icon;
-  if (h && m === 0)
-    return /* @__PURE__ */ r(
+function H() {
+  return /* @__PURE__ */ m("div", { className: "mint:ml-auto", children: [
+    /* @__PURE__ */ n(
+      "svg",
+      {
+        className: "mint:block mint:dark:hidden",
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M2.49999 1C1.67157 1 0.999995 1.67157 0.999995 2.5V9.5C0.999995 10.3284 1.67157 11 2.49999 11H9.49996C10.3284 11 10.9999 10.3284 10.9999 9.5V7.26923C10.9999 6.99309 11.2238 6.76923 11.4999 6.76923C11.7761 6.76923 11.9999 6.99309 11.9999 7.26923V9.5C11.9999 10.8807 10.8807 12 9.49996 12H2.49999C1.11928 12 0 10.8807 0 9.5V2.5C0 1.11929 1.11928 0 2.49999 0H4.73075C5.00689 0 5.23074 0.223858 5.23074 0.5C5.23074 0.776142 5.00689 1 4.73075 1H2.49999ZM6.76926 0.5C6.76926 0.223858 6.99311 0 7.26925 0H11.5C11.7761 0 12 0.223858 12 0.5V4.73077C12 5.00691 11.7761 5.23077 11.5 5.23077C11.2239 5.23077 11 5.00691 11 4.73077V1.70711L7.6228 5.08433C7.42754 5.27959 7.11096 5.27959 6.9157 5.08433C6.72044 4.88906 6.72044 4.57248 6.9157 4.37722L10.2929 1H7.26925C6.99311 1 6.76926 0.776142 6.76926 0.5Z",
+            fill: "#707070"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      "svg",
+      {
+        className: "mint:hidden mint:dark:block",
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M2.49999 1C1.67157 1 0.999995 1.67157 0.999995 2.5V9.5C0.999995 10.3284 1.67157 11 2.49999 11H9.49996C10.3284 11 10.9999 10.3284 10.9999 9.5V7.26923C10.9999 6.99309 11.2238 6.76923 11.4999 6.76923C11.7761 6.76923 11.9999 6.99309 11.9999 7.26923V9.5C11.9999 10.8807 10.8807 12 9.49996 12H2.49999C1.11928 12 0 10.8807 0 9.5V2.5C0 1.11929 1.11928 0 2.49999 0H4.73075C5.00689 0 5.23074 0.223858 5.23074 0.5C5.23074 0.776142 5.00689 1 4.73075 1H2.49999ZM6.76926 0.5C6.76926 0.223858 6.99311 0 7.26925 0H11.5C11.7761 0 12 0.223858 12 0.5V4.73077C12 5.00691 11.7761 5.23077 11.5 5.23077C11.2239 5.23077 11 5.00691 11 4.73077V1.70711L7.6228 5.08433C7.42754 5.27959 7.11096 5.27959 6.9157 5.08433C6.72044 4.88906 6.72044 4.57248 6.9157 4.37722L10.2929 1H7.26925C6.99311 1 6.76926 0.776142 6.76926 0.5Z",
+            fill: "#999999"
+          }
+        )
+      }
+    )
+  ] });
+}
+function p({ item: t, activeId: s, level: a = 0 }) {
+  const h = a === 0 ? !0 : t.expanded ?? !1, [r, b] = w(h), { LinkComponent: c } = v(), d = t.children && t.children.length > 0, f = !t.href, o = t.href && s === t.href, u = t.icon;
+  if (f && a === 0)
+    return /* @__PURE__ */ m(
       "div",
       {
         id: "nav-group",
@@ -39,175 +80,201 @@ function u({ item: t, activeId: l, level: m = 0 }) {
         role: "group",
         "aria-label": t.toc_title,
         children: [
-          /* @__PURE__ */ r("div", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3", children: [
-            s && /* @__PURE__ */ n(s, { className: "mint:w-5 mint:h-5", "aria-hidden": "true" }),
+          /* @__PURE__ */ m("div", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3", children: [
+            u && /* @__PURE__ */ n(u, { className: "mint:w-5 mint:h-5", "aria-hidden": "true" }),
             /* @__PURE__ */ n("span", { children: t.toc_title })
           ] }),
-          o && t.children && /* @__PURE__ */ n("ul", { className: "mint:flex mint:flex-col mint:gap-1", role: "list", children: t.children.map((a, d) => /* @__PURE__ */ n(
-            u,
+          d && t.children && /* @__PURE__ */ n("ul", { className: "mint:flex mint:flex-col mint:gap-1", role: "list", children: t.children.map((i, l) => /* @__PURE__ */ n(
+            p,
             {
-              item: a,
-              activeId: l,
-              level: m + 1
+              item: i,
+              activeId: s,
+              level: a + 1
             },
-            `${a.href}-${d}`
+            `${i.href}-${l}`
           )) })
         ]
       }
     );
-  if (h && m > 0)
-    return /* @__PURE__ */ r("li", { className: "mint:list-none", children: [
-      /* @__PURE__ */ r(
+  if (f && a > 0)
+    return /* @__PURE__ */ m("li", { className: "mint:list-none", children: [
+      /* @__PURE__ */ m(
         "button",
         {
           id: "nav-group-toggle",
-          onClick: () => b(!i),
-          "aria-expanded": i,
-          "aria-label": `${i ? "Collapse" : "Expand"} ${t.toc_title} section`,
-          className: "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
+          onClick: () => b(!r),
+          "aria-expanded": r,
+          "aria-label": `${r ? "Collapse" : "Expand"} ${t.toc_title} section`,
+          className: "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:py-2 mint:px-3 mint:text-sm mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
           children: [
             /* @__PURE__ */ n("span", { className: "mint:flex-1 mint:min-w-0", children: t.toc_title }),
-            /* @__PURE__ */ n(g, { isExpanded: i })
+            /* @__PURE__ */ n(g, { isExpanded: r })
           ]
         }
       ),
-      o && i && t.children && /* @__PURE__ */ n(
+      d && r && t.children && /* @__PURE__ */ n(
         "ul",
         {
           className: "mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3",
           role: "group",
-          children: t.children.map((a, d) => /* @__PURE__ */ n(
-            u,
+          children: t.children.map((i, l) => /* @__PURE__ */ n(
+            p,
             {
-              item: a,
-              activeId: l,
-              level: m + 1
+              item: i,
+              activeId: s,
+              level: a + 1
             },
-            `${a.href}-${d}`
+            `${i.href}-${l}`
           ))
         }
       )
     ] });
-  const x = c || "a";
-  return o ? /* @__PURE__ */ r("li", { className: "mint:list-none", children: [
-    /* @__PURE__ */ r(
+  const e = c || "a";
+  return d ? /* @__PURE__ */ m("li", { className: "mint:list-none", children: [
+    /* @__PURE__ */ m(
       "button",
       {
         id: "nav-item-toggle",
-        onClick: () => b(!i),
-        "aria-expanded": i,
-        "aria-label": `${i ? "Collapse" : "Expand"} ${t.toc_title} section`,
-        className: p(
+        onClick: () => b(!r),
+        "aria-expanded": r,
+        "aria-label": `${r ? "Collapse" : "Expand"} ${t.toc_title} section`,
+        className: x(
           "mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-          e && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
+          o && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
         ),
         children: [
           /* @__PURE__ */ n("span", { className: "mint:flex-1 mint:min-w-0", children: t.toc_title }),
-          /* @__PURE__ */ n(g, { isExpanded: i })
+          /* @__PURE__ */ n(g, { isExpanded: r })
         ]
       }
     ),
-    i && t.children && /* @__PURE__ */ n(
+    r && t.children && /* @__PURE__ */ n(
       "ul",
       {
         className: "mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3",
         role: "group",
-        children: t.children.map((a, d) => /* @__PURE__ */ n(
-          u,
+        children: t.children.map((i, l) => /* @__PURE__ */ n(
+          p,
           {
-            item: a,
-            activeId: l,
-            level: m + 1
+            item: i,
+            activeId: s,
+            level: a + 1
           },
-          `${a.href}-${d}`
+          `${i.href}-${l}`
         ))
       }
     )
-  ] }) : /* @__PURE__ */ n("li", { className: "mint:list-none", children: /* @__PURE__ */ n(
-    x,
+  ] }) : /* @__PURE__ */ n("li", { className: "mint:list-none", children: /* @__PURE__ */ m(
+    e,
     {
       id: "nav-item",
       href: t.href,
-      "aria-current": e ? "page" : void 0,
-      className: p(
-        "mint:relative mint:block mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
-        e && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
+      "aria-current": o ? "page" : void 0,
+      className: x(
+        "mint:relative mint:flex mint:items-center mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2",
+        o && "mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]"
       ),
-      children: t.toc_title
+      children: [
+        t.method && /* @__PURE__ */ n(
+          E,
+          {
+            isActive: !!o,
+            method: t.method,
+            shortMethod: !0
+          }
+        ),
+        t.toc_title
+      ]
     }
   ) });
 }
-function j({
+function y({
   navTree: t,
-  activeId: l,
-  className: m = "",
-  dropdown: f,
-  activeHref: i,
+  activeId: s,
+  className: a = "",
+  dropdown: h,
+  activeHref: r,
   theme: b,
   bottomLinks: c
 }) {
-  const { LinkComponent: o } = k();
-  if (!t || t.items.length === 0)
+  const { LinkComponent: d } = v(), f = k(null), o = "mint-nav-scroll-position";
+  if (C(() => {
+    const e = f.current;
+    if (!e) return;
+    const i = sessionStorage.getItem(o);
+    i && (e.scrollTop = parseInt(i, 10));
+    const l = () => {
+      sessionStorage.setItem(
+        o,
+        e.scrollTop.toString()
+      );
+    };
+    return e.addEventListener("scroll", l), () => {
+      e.removeEventListener("scroll", l);
+    };
+  }, []), !t || t.items.length === 0)
     return null;
-  const h = o || "a";
-  return /* @__PURE__ */ r(
+  const u = d || "a";
+  return /* @__PURE__ */ m(
     "nav",
     {
       id: "nav-tree",
-      className: p(
+      className: x(
         "mint:flex mint:flex-col mint:gap-2 mint:h-full mint:min-h-0",
-        m,
-        b === "dark" && "dark"
+        a,
+        b === "dark" && "mint:dark"
       ),
       "aria-label": "Documentation navigation",
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ m(
           "div",
           {
             id: "nav-tree-content",
-            className: "mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 [scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30",
+            ref: f,
+            className: "mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 mint:[scrollbar-gutter:stable] mint:pr-4 mint:[scrollbar-width:thin] mint:[scrollbar-color:rgba(0,0,0,0.2)_transparent] mint:dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30",
             children: [
-              f && /* @__PURE__ */ n(
-                w,
+              h && /* @__PURE__ */ n(
+                N,
                 {
-                  dropdown: f,
-                  activeHref: i,
+                  dropdown: h,
+                  activeHref: r,
                   className: "mint:mb-6"
                 }
               ),
-              t.items.map((e, s) => /* @__PURE__ */ n(
-                u,
+              t.items.map((e, i) => /* @__PURE__ */ n(
+                p,
                 {
                   item: e,
-                  activeId: l
+                  activeId: s
                 },
-                `${e.href}-${s}`
+                `${e.href}-${i}`
               ))
             ]
           }
         ),
-        c && c.length > 0 && /* @__PURE__ */ r(
+        c && c.length > 0 && /* @__PURE__ */ m(
           "div",
           {
             id: "nav-tree-bottom-links",
             className: "mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto",
             children: [
-              /* @__PURE__ */ n("div", { className: "mint:h-px mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666] mint:mb-3" }),
-              /* @__PURE__ */ n("div", { className: "mint:flex mint:flex-col mint:gap-3 mint:p-3", children: c.map((e, s) => {
-                const x = e.icon;
-                return /* @__PURE__ */ r(
-                  h,
+              /* @__PURE__ */ n("div", { className: "mint:h-[0.5px] mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666]" }),
+              /* @__PURE__ */ n("div", { className: "mint:flex mint:flex-col mint:gap-3 mint:py-4 mint:px-3", children: c.map((e, i) => {
+                const l = e.icon;
+                return /* @__PURE__ */ m(
+                  u,
                   {
                     href: e.href,
                     target: "_blank",
                     rel: "noopener noreferrer",
-                    className: "mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb]",
+                    className: "mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb] mint:px-2",
                     children: [
-                      /* @__PURE__ */ n(x, { className: "mint:w-5 mint:h-5 mint:shrink-0" }),
-                      /* @__PURE__ */ n("span", { children: e.label })
+                      /* @__PURE__ */ n(l, { className: "mint:w-5 mint:h-5 mint:shrink-0" }),
+                      /* @__PURE__ */ n("span", { children: e.label }),
+                      /* @__PURE__ */ n(H, {})
                     ]
                   },
-                  s
+                  i
                 );
               }) })
             ]
@@ -218,7 +285,7 @@ function j({
   );
 }
 export {
-  w as DropdownMenu,
-  j as NavTree
+  N as DropdownMenu,
+  y as NavTree
 };
 //# sourceMappingURL=index.js.map

package/dist/components/nav-tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nav-tree/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { NavItem, NavTreeData } from \"../../types\";\nimport { useComponents } from \"../../context/components-context\";\nimport { DropdownConfig, DropdownMenu } from \"./dropdown-menu\";\nimport { cn } from \"../../utils/cn\";\nexport { DropdownMenu } from \"./dropdown-menu\";\nexport type { DropdownConfig, DropdownItem } from \"./dropdown-menu\";\nexport { MobileNavTree } from \"./mobile-nav\";\nexport type { MobileNavTreeProps } from \"./mobile-nav\";\nimport \"../../styles.css\";\n\nexport interface BottomLinkConfig {\n  href: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n}\n\ninterface NavTreeProps {\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  bottomLinks?: BottomLinkConfig[];\n}\n\ninterface TreeItemProps {\n  item: NavItem;\n  activeId?: string;\n  level?: number;\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      className={cn(\n        \"mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]\",\n        isExpanded ? \"mint:rotate-90\" : \"mint:rotate-0\"\n      )}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M9 5l7 7-7 7\"\n      />\n    </svg>\n  );\n}\n\nfunction TreeItemComponent({ item, activeId, level = 0 }: TreeItemProps) {\n  const defaultExpanded = level === 0 ? true : item.expanded ?? false;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const { LinkComponent } = useComponents();\n  const hasChildren = item.children && item.children.length > 0;\n  const isGroup = hasChildren && !item.href;\n  const isActive = item.href && activeId === item.href;\n  const Icon = item.icon;\n\n  if (isGroup && level === 0) {\n    return (\n      <div\n        id=\"nav-group\"\n        className=\"mint:mb-6\"\n        role=\"group\"\n        aria-label={item.toc_title}\n      >\n        <div className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3\">\n          {Icon && <Icon className=\"mint:w-5 mint:h-5\" aria-hidden=\"true\" />}\n          <span>{item.toc_title}</span>\n        </div>\n        {hasChildren && item.children && (\n          <ul className=\"mint:flex mint:flex-col mint:gap-1\" role=\"list\">\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n\n  if (isGroup && level > 0) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-group-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className=\"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {hasChildren && isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  if (hasChildren) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-item-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className={cn(\n            \"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n            isActive &&\n              \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n          )}\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"mint:list-none\">\n      <LinkElement\n        id=\"nav-item\"\n        href={item.href}\n        aria-current={isActive ? \"page\" : undefined}\n        className={cn(\n          \"mint:relative mint:block mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n        )}\n      >\n        {item.toc_title}\n      </LinkElement>\n    </li>\n  );\n}\n\nexport function NavTree({\n  navTree,\n  activeId,\n  className = \"\",\n  dropdown,\n  activeHref,\n  theme,\n  bottomLinks,\n}: NavTreeProps) {\n  const { LinkComponent } = useComponents();\n\n  if (!navTree || navTree.items.length === 0) {\n    return null;\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  return (\n    <nav\n      id=\"nav-tree\"\n      className={cn(\n        \"mint:flex mint:flex-col mint:gap-2 mint:h-full mint:min-h-0\",\n        className,\n        theme === \"dark\" && \"dark\"\n      )}\n      aria-label=\"Documentation navigation\"\n    >\n      <div\n        id=\"nav-tree-content\"\n        className=\"mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 [scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30\"\n      >\n        {dropdown && (\n          <DropdownMenu\n            dropdown={dropdown}\n            activeHref={activeHref}\n            className=\"mint:mb-6\"\n          />\n        )}\n        {navTree.items.map((item, index) => (\n          <TreeItemComponent\n            key={`${item.href}-${index}`}\n            item={item}\n            activeId={activeId}\n          />\n        ))}\n      </div>\n      {bottomLinks && bottomLinks.length > 0 && (\n        <div\n          id=\"nav-tree-bottom-links\"\n          className=\"mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto\"\n        >\n          <div className=\"mint:h-px mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666] mint:mb-3\"></div>\n          <div className=\"mint:flex mint:flex-col mint:gap-3 mint:p-3\">\n            {bottomLinks.map((link, index) => {\n              const Icon = link.icon;\n              return (\n                <LinkElement\n                  key={index}\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb]\"\n                >\n                  <Icon className=\"mint:w-5 mint:h-5 mint:shrink-0\" />\n                  <span>{link.label}</span>\n                </LinkElement>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["ChevronIcon","isExpanded","jsx","cn","TreeItemComponent","item","activeId","level","defaultExpanded","setIsExpanded","useState","LinkComponent","useComponents","hasChildren","isGroup","isActive","Icon","jsxs","child","index","LinkElement","NavTree","navTree","className","dropdown","activeHref","theme","bottomLinks","DropdownMenu","link"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nav-tree/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport type { NavItem, NavTreeData } from \"../../types\";\nimport { useComponents } from \"../../context/components-context\";\nimport { DropdownConfig, DropdownMenu } from \"./dropdown-menu\";\nimport { cn } from \"../../utils/cn\";\nimport { MethodPill } from \"../Api/MethodPill\";\nexport { DropdownMenu } from \"./dropdown-menu\";\nexport type { DropdownConfig, DropdownItem } from \"./dropdown-menu\";\nexport { MobileNavTree } from \"./mobile-nav\";\nexport type { MobileNavTreeProps } from \"./mobile-nav\";\nimport \"../../styles.css\";\n\nexport interface BottomLinkConfig {\n  href: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n}\n\ninterface NavTreeProps {\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  bottomLinks?: BottomLinkConfig[];\n}\n\ninterface TreeItemProps {\n  item: NavItem;\n  activeId?: string;\n  level?: number;\n}\n\nfunction ChevronIcon({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg\n      className={cn(\n        \"mint:w-[16px] mint:h-[16px] mint:shrink-0 mint:transition-transform mint:duration-150 mint:text-[#6b7280] mint:dark:text-[#9ca3af]\",\n        isExpanded ? \"mint:rotate-90\" : \"mint:rotate-0\"\n      )}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M9 5l7 7-7 7\"\n      />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <div className=\"mint:ml-auto\">\n      <svg\n        className=\"mint:block mint:dark:hidden\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M2.49999 1C1.67157 1 0.999995 1.67157 0.999995 2.5V9.5C0.999995 10.3284 1.67157 11 2.49999 11H9.49996C10.3284 11 10.9999 10.3284 10.9999 9.5V7.26923C10.9999 6.99309 11.2238 6.76923 11.4999 6.76923C11.7761 6.76923 11.9999 6.99309 11.9999 7.26923V9.5C11.9999 10.8807 10.8807 12 9.49996 12H2.49999C1.11928 12 0 10.8807 0 9.5V2.5C0 1.11929 1.11928 0 2.49999 0H4.73075C5.00689 0 5.23074 0.223858 5.23074 0.5C5.23074 0.776142 5.00689 1 4.73075 1H2.49999ZM6.76926 0.5C6.76926 0.223858 6.99311 0 7.26925 0H11.5C11.7761 0 12 0.223858 12 0.5V4.73077C12 5.00691 11.7761 5.23077 11.5 5.23077C11.2239 5.23077 11 5.00691 11 4.73077V1.70711L7.6228 5.08433C7.42754 5.27959 7.11096 5.27959 6.9157 5.08433C6.72044 4.88906 6.72044 4.57248 6.9157 4.37722L10.2929 1H7.26925C6.99311 1 6.76926 0.776142 6.76926 0.5Z\"\n          fill=\"#707070\"\n        />\n      </svg>\n      <svg\n        className=\"mint:hidden mint:dark:block\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M2.49999 1C1.67157 1 0.999995 1.67157 0.999995 2.5V9.5C0.999995 10.3284 1.67157 11 2.49999 11H9.49996C10.3284 11 10.9999 10.3284 10.9999 9.5V7.26923C10.9999 6.99309 11.2238 6.76923 11.4999 6.76923C11.7761 6.76923 11.9999 6.99309 11.9999 7.26923V9.5C11.9999 10.8807 10.8807 12 9.49996 12H2.49999C1.11928 12 0 10.8807 0 9.5V2.5C0 1.11929 1.11928 0 2.49999 0H4.73075C5.00689 0 5.23074 0.223858 5.23074 0.5C5.23074 0.776142 5.00689 1 4.73075 1H2.49999ZM6.76926 0.5C6.76926 0.223858 6.99311 0 7.26925 0H11.5C11.7761 0 12 0.223858 12 0.5V4.73077C12 5.00691 11.7761 5.23077 11.5 5.23077C11.2239 5.23077 11 5.00691 11 4.73077V1.70711L7.6228 5.08433C7.42754 5.27959 7.11096 5.27959 6.9157 5.08433C6.72044 4.88906 6.72044 4.57248 6.9157 4.37722L10.2929 1H7.26925C6.99311 1 6.76926 0.776142 6.76926 0.5Z\"\n          fill=\"#999999\"\n        />\n      </svg>\n    </div>\n  );\n}\n\nfunction TreeItemComponent({ item, activeId, level = 0 }: TreeItemProps) {\n  const defaultExpanded = level === 0 ? true : item.expanded ?? false;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const { LinkComponent } = useComponents();\n  const hasChildren = item.children && item.children.length > 0;\n  const isGroup = !item.href; // A group is any item without an href\n  const isActive = item.href && activeId === item.href;\n  const Icon = item.icon;\n\n  if (isGroup && level === 0) {\n    return (\n      <div\n        id=\"nav-group\"\n        className=\"mint:mb-6\"\n        role=\"group\"\n        aria-label={item.toc_title}\n      >\n        <div className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white mint:mb-3 mint:flex mint:items-start mint:gap-2 mint:pl-3\">\n          {Icon && <Icon className=\"mint:w-5 mint:h-5\" aria-hidden=\"true\" />}\n          <span>{item.toc_title}</span>\n        </div>\n        {hasChildren && item.children && (\n          <ul className=\"mint:flex mint:flex-col mint:gap-1\" role=\"list\">\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n\n  if (isGroup && level > 0) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-group-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className=\"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:py-2 mint:px-3 mint:text-sm mint:rounded-lg mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#4b5563] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\"\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {hasChildren && isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  if (hasChildren) {\n    return (\n      <li className=\"mint:list-none\">\n        <button\n          id=\"nav-item-toggle\"\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-expanded={isExpanded}\n          aria-label={`${isExpanded ? \"Collapse\" : \"Expand\"} ${\n            item.toc_title\n          } section`}\n          className={cn(\n            \"mint:relative mint:text-left mint:w-full mint:flex mint:items-center mint:justify-between mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:bg-transparent mint:border-none mint:cursor-pointer mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n            isActive &&\n              \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n          )}\n        >\n          <span className=\"mint:flex-1 mint:min-w-0\">{item.toc_title}</span>\n          <ChevronIcon isExpanded={isExpanded} />\n        </button>\n        {isExpanded && item.children && (\n          <ul\n            className=\"mint:mt-1 mint:ml-2 mint:flex mint:flex-col mint:gap-1 mint:pl-3\"\n            role=\"group\"\n          >\n            {item.children.map((child, index) => (\n              <TreeItemComponent\n                key={`${child.href}-${index}`}\n                item={child}\n                activeId={activeId}\n                level={level + 1}\n              />\n            ))}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"mint:list-none\">\n      <LinkElement\n        id=\"nav-item\"\n        href={item.href}\n        aria-current={isActive ? \"page\" : undefined}\n        className={cn(\n          \"mint:relative mint:flex mint:items-center mint:gap-2 mint:py-2 mint:px-3 mint:text-[14px] mint:font-sans mint:font-normal mint:rounded-xl mint:transition-all mint:duration-150 mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:bg-[rgba(75,85,99,0.05)] mint:hover:text-[#141414] mint:dark:hover:bg-[rgba(75,85,99,0.05)] mint:dark:hover:text-[#e5e7eb] mint:focus-visible:outline-2 mint:focus-visible:outline-[#643fb2] mint:focus-visible:outline-offset-2\",\n          isActive &&\n            \"mint:bg-[#e6e6e6] mint:dark:bg-[#2e2e2e] mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\"\n        )}\n      >\n        {item.method && (\n          <MethodPill\n            isActive={!!isActive}\n            method={item.method}\n            shortMethod={true}\n          />\n        )}\n        {item.toc_title}\n      </LinkElement>\n    </li>\n  );\n}\n\nexport function NavTree({\n  navTree,\n  activeId,\n  className = \"\",\n  dropdown,\n  activeHref,\n  theme,\n  bottomLinks,\n}: NavTreeProps) {\n  const { LinkComponent } = useComponents();\n  const navContentRef = useRef<HTMLDivElement>(null);\n  const SCROLL_POSITION_KEY = \"mint-nav-scroll-position\";\n\n  useEffect(() => {\n    const navElement = navContentRef.current;\n    if (!navElement) return;\n\n    const savedScrollPosition = sessionStorage.getItem(SCROLL_POSITION_KEY);\n    if (savedScrollPosition) {\n      navElement.scrollTop = parseInt(savedScrollPosition, 10);\n    }\n\n    const handleScroll = () => {\n      sessionStorage.setItem(\n        SCROLL_POSITION_KEY,\n        navElement.scrollTop.toString()\n      );\n    };\n\n    navElement.addEventListener(\"scroll\", handleScroll);\n\n    return () => {\n      navElement.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, []);\n\n  if (!navTree || navTree.items.length === 0) {\n    return null;\n  }\n\n  const LinkElement = LinkComponent || \"a\";\n\n  return (\n    <nav\n      id=\"nav-tree\"\n      className={cn(\n        \"mint:flex mint:flex-col mint:gap-2 mint:h-full mint:min-h-0\",\n        className,\n        theme === \"dark\" && \"mint:dark\"\n      )}\n      aria-label=\"Documentation navigation\"\n    >\n      <div\n        id=\"nav-tree-content\"\n        ref={navContentRef}\n        className=\"mint:flex-1 mint:overflow-y-auto mint:overflow-x-hidden mint:min-h-0 mint:[scrollbar-gutter:stable] mint:pr-4 mint:[scrollbar-width:thin] mint:[scrollbar-color:rgba(0,0,0,0.2)_transparent] mint:dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30\"\n      >\n        {dropdown && (\n          <DropdownMenu\n            dropdown={dropdown}\n            activeHref={activeHref}\n            className=\"mint:mb-6\"\n          />\n        )}\n        {navTree.items.map((item, index) => (\n          <TreeItemComponent\n            key={`${item.href}-${index}`}\n            item={item}\n            activeId={activeId}\n          />\n        ))}\n      </div>\n      {bottomLinks && bottomLinks.length > 0 && (\n        <div\n          id=\"nav-tree-bottom-links\"\n          className=\"mint:shrink-0 mint:w-full mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:mt-auto\"\n        >\n          <div className=\"mint:h-[0.5px] mint:w-full mint:bg-[#d1d1d1] mint:dark:bg-[#666666]\"></div>\n          <div className=\"mint:flex mint:flex-col mint:gap-3 mint:py-4 mint:px-3\">\n            {bottomLinks.map((link, index) => {\n              const Icon = link.icon;\n              return (\n                <LinkElement\n                  key={index}\n                  href={link.href}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm mint:no-underline mint:text-[#424242] mint:dark:text-[#9ca3af] mint:hover:text-[#141414] mint:dark:hover:text-[#e5e7eb] mint:px-2\"\n                >\n                  <Icon className=\"mint:w-5 mint:h-5 mint:shrink-0\" />\n                  <span>{link.label}</span>\n                  <ExternalIcon />\n                </LinkElement>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["ChevronIcon","isExpanded","jsx","cn","ExternalIcon","jsxs","TreeItemComponent","item","activeId","level","defaultExpanded","setIsExpanded","useState","LinkComponent","useComponents","hasChildren","isGroup","isActive","Icon","child","index","LinkElement","MethodPill","NavTree","navTree","className","dropdown","activeHref","theme","bottomLinks","navContentRef","useRef","SCROLL_POSITION_KEY","useEffect","navElement","savedScrollPosition","handleScroll","DropdownMenu","link"],"mappings":"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"}

package/dist/components/nav-tree/mobile-nav.js

@@ -24,7 +24,7 @@ function B({
       onClose: () => m(!1),
       className: k(
         "mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden",
-        e === "dark" && "dark"
+        e === "dark" && "mint:dark"
       ),
       children: [
         /* @__PURE__ */ t(
@@ -70,7 +70,7 @@ const v = ({
     onClick: () => i(!1),
     className: "mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer",
     children: [
-      /* @__PURE__ */ t("span", { className: "mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 [clip:rect(0,0,0,0)]", children: "Close navigation" }),
+      /* @__PURE__ */ t("span", { className: "mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 mint:[clip:rect(0,0,0,0)]", children: "Close navigation" }),
       /* @__PURE__ */ t(x, { className: "mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]" })
     ]
   }

package/dist/components/nav-tree/mobile-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-nav.js","sources":["../../../src/components/nav-tree/mobile-nav.tsx"],"sourcesContent":["import { NavTreeData, LinkComponent } from \"../../types\";\nimport { Dialog, DialogBackdrop, DialogPanel } from \"@headlessui/react\";\nimport { DropdownConfig, NavTree, BottomLinkConfig } from \"./index\";\nimport { Dismiss16Regular } from \"@fluentui/react-icons\";\nimport { ComponentsProvider } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\nimport \"../../styles.css\";\n\nexport interface MobileNavTreeProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  bottomLinks?: BottomLinkConfig[];\n  LinkComponent?: LinkComponent;\n}\n\nexport function MobileNavTree({\n  isOpen,\n  setIsOpen,\n  navTree,\n  activeId,\n  className = \"\",\n  theme,\n  dropdown,\n  activeHref,\n  bottomLinks,\n  LinkComponent,\n}: MobileNavTreeProps) {\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <Dialog\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        className={cn(\n          \"mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden\",\n          theme === \"dark\" && \"dark\"\n        )}\n      >\n        <DialogBackdrop\n          transition\n          className=\"mint:fixed mint:inset-0 mint:bg-black/20 mint:dark:bg-black/80 mint:backdrop-blur mint:transition-opacity mint:duration-300 mint:ease-out mint:data-[closed]:opacity-0\"\n        />\n        <div className=\"mint:fixed mint:inset-0 mint:flex\">\n          {isOpen && <CloseButton setIsOpen={setIsOpen} />}\n          <DialogPanel\n            id=\"mobile-nav\"\n            transition\n            className=\"mint:flex mint:flex-col mint:relative mint:bg-white mint:dark:bg-[#0f0f0f] mint:w-[85vw] mint:min-w-[19rem] mint:max-w-[22rem] mint:min-h-full mint:transition-transform mint:duration-100 mint:ease-in-out mint:data-[closed]:-translate-x-full\"\n          >\n            <div className=\"mint:flex mint:flex-col mint:flex-1 mint:p-4 mint:pt-4 mint:pb-12 mint:overflow-y-auto mint:h-full\">\n              <NavTree\n                navTree={navTree}\n                activeId={activeId}\n                className={className}\n                dropdown={dropdown}\n                activeHref={activeHref}\n                theme={theme}\n                bottomLinks={bottomLinks}\n              />\n            </div>\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </ComponentsProvider>\n  );\n}\n\nconst CloseButton = ({\n  setIsOpen,\n}: {\n  setIsOpen: (isOpen: boolean) => void;\n}) => {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setIsOpen(false)}\n      className=\"mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer\"\n    >\n      <span className=\"mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 [clip:rect(0,0,0,0)]\">\n        Close navigation\n      </span>\n      <Dismiss16Regular className=\"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]\" />\n    </button>\n  );\n};\n"],"names":["MobileNavTree","isOpen","setIsOpen","navTree","activeId","className","theme","dropdown","activeHref","bottomLinks","LinkComponent","jsx","ComponentsProvider","jsxs","Dialog","cn","DialogBackdrop","CloseButton","DialogPanel","NavTree","Dismiss16Regular"],"mappings":";;;;;;;AAqBO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,GAAuB;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAmB,eAAeF,GACjC,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMb;AAAA,MACN,SAAS,MAAMC,EAAU,EAAK;AAAA,MAC9B,WAAWa;AAAA,QACT;AAAA,QACAT,MAAU,UAAU;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAAZ,KAAU,gBAAAU,EAACM,KAAY,WAAAf,EAAA,CAAsB;AAAA,UAC9C,gBAAAS;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,YAAU;AAAA,cACV,WAAU;AAAA,cAEV,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAA;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAAhB;AAAA,kBACA,UAAAC;AAAA,kBACA,WAAAC;AAAA,kBACA,UAAAE;AAAA,kBACA,YAAAC;AAAA,kBACA,OAAAF;AAAA,kBACA,aAAAG;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMQ,IAAc,CAAC;AAAA,EACnB,WAAAf;AACF,MAII,gBAAAW;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMX,EAAU,EAAK;AAAA,IAC9B,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,wIAAuI,UAAA,oBAEvJ;AAAA,MACA,gBAAAA,EAACS,GAAA,EAAiB,WAAU,0HAAA,CAA0H;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"mobile-nav.js","sources":["../../../src/components/nav-tree/mobile-nav.tsx"],"sourcesContent":["import { NavTreeData, LinkComponent } from \"../../types\";\nimport { Dialog, DialogBackdrop, DialogPanel } from \"@headlessui/react\";\nimport { DropdownConfig, NavTree, BottomLinkConfig } from \"./index\";\nimport { Dismiss16Regular } from \"@fluentui/react-icons\";\nimport { ComponentsProvider } from \"../../context/components-context\";\nimport { cn } from \"../../utils/cn\";\nimport \"../../styles.css\";\n\nexport interface MobileNavTreeProps {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  navTree: NavTreeData;\n  activeId?: string;\n  className?: string;\n  theme?: \"light\" | \"dark\" | \"system\";\n  dropdown?: DropdownConfig;\n  activeHref?: string;\n  bottomLinks?: BottomLinkConfig[];\n  LinkComponent?: LinkComponent;\n}\n\nexport function MobileNavTree({\n  isOpen,\n  setIsOpen,\n  navTree,\n  activeId,\n  className = \"\",\n  theme,\n  dropdown,\n  activeHref,\n  bottomLinks,\n  LinkComponent,\n}: MobileNavTreeProps) {\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <Dialog\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        className={cn(\n          \"mint:fixed mint:inset-0 mint:overflow-y-auto mint:z-50 mint:lg:hidden\",\n          theme === \"dark\" && \"mint:dark\"\n        )}\n      >\n        <DialogBackdrop\n          transition\n          className=\"mint:fixed mint:inset-0 mint:bg-black/20 mint:dark:bg-black/80 mint:backdrop-blur mint:transition-opacity mint:duration-300 mint:ease-out mint:data-[closed]:opacity-0\"\n        />\n        <div className=\"mint:fixed mint:inset-0 mint:flex\">\n          {isOpen && <CloseButton setIsOpen={setIsOpen} />}\n          <DialogPanel\n            id=\"mobile-nav\"\n            transition\n            className=\"mint:flex mint:flex-col mint:relative mint:bg-white mint:dark:bg-[#0f0f0f] mint:w-[85vw] mint:min-w-[19rem] mint:max-w-[22rem] mint:min-h-full mint:transition-transform mint:duration-100 mint:ease-in-out mint:data-[closed]:-translate-x-full\"\n          >\n            <div className=\"mint:flex mint:flex-col mint:flex-1 mint:p-4 mint:pt-4 mint:pb-12 mint:overflow-y-auto mint:h-full\">\n              <NavTree\n                navTree={navTree}\n                activeId={activeId}\n                className={className}\n                dropdown={dropdown}\n                activeHref={activeHref}\n                theme={theme}\n                bottomLinks={bottomLinks}\n              />\n            </div>\n          </DialogPanel>\n        </div>\n      </Dialog>\n    </ComponentsProvider>\n  );\n}\n\nconst CloseButton = ({\n  setIsOpen,\n}: {\n  setIsOpen: (isOpen: boolean) => void;\n}) => {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setIsOpen(false)}\n      className=\"mint:absolute mint:bg-white mint:dark:bg-[#0f0f0f] mint:rounded-full mint:top-4 mint:right-4 mint:w-8 mint:h-8 mint:flex mint:items-center mint:justify-center mint:border-none mint:cursor-pointer\"\n    >\n      <span className=\"mint:absolute mint:w-px mint:h-px mint:p-0 mint:-m-px mint:overflow-hidden mint:whitespace-nowrap mint:border-0 mint:[clip:rect(0,0,0,0)]\">\n        Close navigation\n      </span>\n      <Dismiss16Regular className=\"mint:w-4 mint:h-4 mint:text-[#6b7280] mint:dark:text-[#9ca3af] mint:hover:text-[#4b5563] mint:dark:hover:text-[#d1d5db]\" />\n    </button>\n  );\n};\n"],"names":["MobileNavTree","isOpen","setIsOpen","navTree","activeId","className","theme","dropdown","activeHref","bottomLinks","LinkComponent","jsx","ComponentsProvider","jsxs","Dialog","cn","DialogBackdrop","CloseButton","DialogPanel","NavTree","Dismiss16Regular"],"mappings":";;;;;;;AAqBO,SAASA,EAAc;AAAA,EAC5B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AACF,GAAuB;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAmB,eAAeF,GACjC,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMb;AAAA,MACN,SAAS,MAAMC,EAAU,EAAK;AAAA,MAC9B,WAAWa;AAAA,QACT;AAAA,QACAT,MAAU,UAAU;AAAA,MAAA;AAAA,MAGtB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAH,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,UAAAZ,KAAU,gBAAAU,EAACM,KAAY,WAAAf,EAAA,CAAsB;AAAA,UAC9C,gBAAAS;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,YAAU;AAAA,cACV,WAAU;AAAA,cAEV,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAA;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAAhB;AAAA,kBACA,UAAAC;AAAA,kBACA,WAAAC;AAAA,kBACA,UAAAE;AAAA,kBACA,YAAAC;AAAA,kBACA,OAAAF;AAAA,kBACA,aAAAG;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMQ,IAAc,CAAC;AAAA,EACnB,WAAAf;AACF,MAII,gBAAAW;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAS,MAAMX,EAAU,EAAK;AAAA,IAC9B,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,6IAA4I,UAAA,oBAE5J;AAAA,MACA,gBAAAA,EAACS,GAAA,EAAiB,WAAU,0HAAA,CAA0H;AAAA,IAAA;AAAA,EAAA;AAAA;"}