@redocly/theme 0.4.15 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (553) hide show
  1. package/{REAMDE.md → README.md} +0 -0
  2. package/lib/ApiOnboarding/AppCustomAttributes.d.ts +5 -0
  3. package/lib/ApiOnboarding/AppCustomAttributes.js +8 -0
  4. package/{Button → lib/Button}/Button.d.ts +0 -0
  5. package/lib/Button/Button.js +156 -0
  6. package/{Button → lib/Button}/index.d.ts +0 -0
  7. package/{Button → lib/Button}/index.js +1 -0
  8. package/{Cards → lib/Cards}/Card.d.ts +0 -0
  9. package/lib/Cards/Card.js +36 -0
  10. package/{Cards → lib/Cards}/CardsBlock.d.ts +0 -0
  11. package/lib/Cards/CardsBlock.js +15 -0
  12. package/{CodeBlock → lib/CodeBlock}/CodeBlock.d.ts +0 -0
  13. package/lib/CodeBlock/CodeBlock.js +103 -0
  14. package/{CodeBlock → lib/CodeBlock}/index.d.ts +0 -0
  15. package/{CodeBlock → lib/CodeBlock}/index.js +1 -0
  16. package/{ColorModeSwitcher → lib/ColorModeSwitcher}/ColorModeSwitcher.d.ts +0 -0
  17. package/{ColorModeSwitcher → lib/ColorModeSwitcher}/ColorModeSwitcher.js +22 -36
  18. package/{ColorModeSwitcher → lib/ColorModeSwitcher}/index.d.ts +0 -0
  19. package/{ColorModeSwitcher → lib/ColorModeSwitcher}/index.js +1 -0
  20. package/{CopyButton → lib/CopyButton}/CopyButton.d.ts +0 -0
  21. package/lib/CopyButton/CopyButton.js +50 -0
  22. package/{CopyButton → lib/CopyButton}/CopyButtonWrapper.d.ts +0 -0
  23. package/{CopyButton → lib/CopyButton}/CopyButtonWrapper.js +14 -15
  24. package/{CopyButton → lib/CopyButton}/index.d.ts +0 -0
  25. package/{CopyButton → lib/CopyButton}/index.js +1 -0
  26. package/{EditPageButton → lib/EditPageButton}/EditPageButton.d.ts +0 -0
  27. package/lib/EditPageButton/EditPageButton.js +36 -0
  28. package/{EditPageButton → lib/EditPageButton}/index.d.ts +0 -0
  29. package/{EditPageButton → lib/EditPageButton}/index.js +1 -0
  30. package/{Footer → lib/Footer}/CustomFooter.d.ts +0 -0
  31. package/lib/Footer/CustomFooter.js +35 -0
  32. package/{Footer → lib/Footer}/CustomFooterNavItem.d.ts +0 -0
  33. package/lib/Footer/CustomFooterNavItem.js +33 -0
  34. package/{Footer → lib/Footer}/Footer.d.ts +0 -0
  35. package/lib/Footer/Footer.js +35 -0
  36. package/{Footer → lib/Footer}/FooterColumn.d.ts +0 -0
  37. package/lib/Footer/FooterColumn.js +54 -0
  38. package/{Footer → lib/Footer}/FooterColumns.d.ts +0 -0
  39. package/lib/Footer/FooterColumns.js +44 -0
  40. package/{Footer → lib/Footer}/FooterCopyright.d.ts +0 -0
  41. package/lib/Footer/FooterCopyright.js +26 -0
  42. package/{Footer → lib/Footer}/index.d.ts +0 -0
  43. package/{Footer → lib/Footer}/index.js +1 -0
  44. package/{JsonViewer → lib/JsonViewer}/JsonViewer.d.ts +0 -0
  45. package/lib/JsonViewer/JsonViewer.js +240 -0
  46. package/{JsonViewer → lib/JsonViewer}/index.d.ts +0 -0
  47. package/{JsonViewer → lib/JsonViewer}/index.js +1 -0
  48. package/lib/LastUpdated/LastUpdated.d.ts +14 -0
  49. package/lib/LastUpdated/LastUpdated.js +52 -0
  50. package/{Layout → lib/Layout}/PageLayout.d.ts +0 -0
  51. package/lib/Layout/PageLayout.js +29 -0
  52. package/{Layout → lib/Layout}/RootLayout.d.ts +0 -0
  53. package/lib/Layout/RootLayout.js +19 -0
  54. package/{Layout → lib/Layout}/index.d.ts +0 -0
  55. package/{Layout → lib/Layout}/index.js +1 -0
  56. package/{Markdown → lib/Markdown}/Admonition.d.ts +0 -0
  57. package/lib/Markdown/Admonition.js +56 -0
  58. package/{Markdown → lib/Markdown}/CodeSample/CodeSample.d.ts +0 -0
  59. package/lib/Markdown/CodeSample/CodeSample.js +219 -0
  60. package/{Markdown → lib/Markdown}/CodeSample/index.d.ts +0 -0
  61. package/{Markdown → lib/Markdown}/CodeSample/index.js +1 -0
  62. package/{Markdown → lib/Markdown}/ContainerWrapper.d.ts +0 -0
  63. package/lib/Markdown/ContainerWrapper.js +26 -0
  64. package/{Markdown → lib/Markdown}/Details.d.ts +0 -0
  65. package/lib/Markdown/Details.js +17 -0
  66. package/{Markdown → lib/Markdown}/Heading.d.ts +0 -0
  67. package/{Markdown → lib/Markdown}/Heading.js +9 -9
  68. package/{Markdown → lib/Markdown}/MarkdownLayout.d.ts +1 -0
  69. package/lib/Markdown/MarkdownLayout.js +30 -0
  70. package/{Markdown → lib/Markdown}/MarkdownWrapper.d.ts +0 -0
  71. package/lib/Markdown/MarkdownWrapper.js +391 -0
  72. package/{Markdown → lib/Markdown}/Mermaid.d.ts +0 -0
  73. package/lib/Markdown/Mermaid.js +19 -0
  74. package/{Markdown → lib/Markdown}/PageWrapper.d.ts +0 -0
  75. package/lib/Markdown/PageWrapper.js +15 -0
  76. package/{Markdown → lib/Markdown}/Sup.d.ts +0 -0
  77. package/lib/Markdown/Sup.js +14 -0
  78. package/{Markdown → lib/Markdown}/Tabs/Tab.d.ts +0 -0
  79. package/lib/Markdown/Tabs/Tab.js +28 -0
  80. package/{Markdown → lib/Markdown}/Tabs/Tabs.d.ts +0 -0
  81. package/lib/Markdown/Tabs/Tabs.js +62 -0
  82. package/{Markdown → lib/Markdown}/Tabs/index.d.ts +0 -0
  83. package/{Markdown → lib/Markdown}/Tabs/index.js +1 -0
  84. package/{Markdown → lib/Markdown}/index.d.ts +0 -0
  85. package/{Markdown → lib/Markdown}/index.js +1 -0
  86. package/{Navbar → lib/Navbar}/MobileNavbarDropdown.d.ts +0 -0
  87. package/lib/Navbar/MobileNavbarDropdown.js +30 -0
  88. package/{Navbar → lib/Navbar}/MobileNavbarItem.d.ts +1 -1
  89. package/lib/Navbar/MobileNavbarItem.js +106 -0
  90. package/{Navbar → lib/Navbar}/MobileNavbarMenu.d.ts +0 -0
  91. package/lib/Navbar/MobileNavbarMenu.js +92 -0
  92. package/{Navbar → lib/Navbar}/MobileNavbarMenuButton.d.ts +0 -0
  93. package/lib/Navbar/MobileNavbarMenuButton.js +18 -0
  94. package/{Navbar → lib/Navbar}/Navbar.d.ts +0 -0
  95. package/lib/Navbar/Navbar.js +75 -0
  96. package/{Navbar → lib/Navbar}/NavbarDropdown.d.ts +0 -0
  97. package/lib/Navbar/NavbarDropdown.js +38 -0
  98. package/{Navbar → lib/Navbar}/NavbarItem.d.ts +1 -1
  99. package/lib/Navbar/NavbarItem.js +72 -0
  100. package/{Navbar → lib/Navbar}/NavbarMenu.d.ts +0 -0
  101. package/lib/Navbar/NavbarMenu.js +34 -0
  102. package/{Navbar → lib/Navbar}/index.d.ts +0 -0
  103. package/{Navbar → lib/Navbar}/index.js +1 -0
  104. package/{NavbarLogo → lib/NavbarLogo}/NavbarLogo.d.ts +0 -0
  105. package/lib/NavbarLogo/NavbarLogo.js +24 -0
  106. package/{NavbarLogo → lib/NavbarLogo}/index.d.ts +0 -0
  107. package/{NavbarLogo → lib/NavbarLogo}/index.js +1 -0
  108. package/{OperationBadge → lib/OperationBadge}/OperationBadge.d.ts +0 -0
  109. package/lib/OperationBadge/OperationBadge.js +68 -0
  110. package/{OperationBadge → lib/OperationBadge}/index.d.ts +0 -0
  111. package/{OperationBadge → lib/OperationBadge}/index.js +1 -0
  112. package/{PageNavigation → lib/PageNavigation}/NextPageLink.d.ts +0 -0
  113. package/lib/PageNavigation/NextPageLink.js +26 -0
  114. package/{PageNavigation → lib/PageNavigation}/PageNavigation.d.ts +0 -0
  115. package/lib/PageNavigation/PageNavigation.js +31 -0
  116. package/{PageNavigation → lib/PageNavigation}/PreviousPageLink.d.ts +0 -0
  117. package/lib/PageNavigation/PreviousPageLink.js +26 -0
  118. package/{PageNavigation → lib/PageNavigation}/index.d.ts +0 -0
  119. package/{PageNavigation → lib/PageNavigation}/index.js +1 -0
  120. package/{Panel → lib/Panel}/Panel.d.ts +0 -0
  121. package/lib/Panel/Panel.js +39 -0
  122. package/{Panel → lib/Panel}/PanelBody.d.ts +0 -0
  123. package/lib/Panel/PanelBody.js +59 -0
  124. package/{Panel → lib/Panel}/PanelComponent.d.ts +1 -1
  125. package/{Panel → lib/Panel}/PanelComponent.js +21 -36
  126. package/{Panel → lib/Panel}/PanelHeader.d.ts +0 -0
  127. package/lib/Panel/PanelHeader.js +33 -0
  128. package/{Panel → lib/Panel}/PanelHeaderTitle.d.ts +0 -0
  129. package/lib/Panel/PanelHeaderTitle.js +21 -0
  130. package/{Panel → lib/Panel}/index.d.ts +0 -0
  131. package/{Panel → lib/Panel}/index.js +1 -0
  132. package/{Profile → lib/Profile}/Profile.d.ts +0 -0
  133. package/lib/Profile/Profile.js +87 -0
  134. package/{Profile → lib/Profile}/index.d.ts +0 -0
  135. package/{Profile → lib/Profile}/index.js +1 -0
  136. package/{SamplesPanelControls → lib/SamplesPanelControls}/SamplesPanelControls.d.ts +0 -0
  137. package/lib/SamplesPanelControls/SamplesPanelControls.js +74 -0
  138. package/{SamplesPanelControls → lib/SamplesPanelControls}/index.d.ts +0 -0
  139. package/{SamplesPanelControls → lib/SamplesPanelControls}/index.js +1 -0
  140. package/{Search → lib/Search}/Autocomplete.d.ts +0 -0
  141. package/lib/Search/Autocomplete.js +105 -0
  142. package/{Search → lib/Search}/ClearIcon.d.ts +0 -0
  143. package/lib/Search/ClearIcon.js +26 -0
  144. package/{Search → lib/Search}/Input.d.ts +0 -0
  145. package/lib/Search/Input.js +30 -0
  146. package/{Search → lib/Search}/Parameters.d.ts +0 -0
  147. package/lib/Search/Parameters.js +55 -0
  148. package/{Search → lib/Search}/Popover.d.ts +0 -0
  149. package/lib/Search/Popover.js +26 -0
  150. package/{Search → lib/Search}/Search.d.ts +0 -0
  151. package/lib/Search/Search.js +27 -0
  152. package/{Search → lib/Search}/SearchIcon.d.ts +0 -0
  153. package/lib/Search/SearchIcon.js +27 -0
  154. package/{Search → lib/Search}/SearchItem.d.ts +0 -0
  155. package/lib/Search/SearchItem.js +98 -0
  156. package/{Search → lib/Search}/SidebarSearch.d.ts +0 -0
  157. package/lib/Search/SidebarSearch.js +20 -0
  158. package/{Search → lib/Search}/index.d.ts +0 -0
  159. package/{Search → lib/Search}/index.js +1 -0
  160. package/{Search → lib/Search}/utils.d.ts +0 -0
  161. package/{Search → lib/Search}/utils.js +8 -26
  162. package/{Sidebar → lib/Sidebar}/ApiCallItem.d.ts +0 -0
  163. package/lib/Sidebar/ApiCallItem.js +34 -0
  164. package/{Sidebar → lib/Sidebar}/ArrowBack.d.ts +0 -0
  165. package/lib/Sidebar/ArrowBack.js +22 -0
  166. package/{Sidebar → lib/Sidebar}/BackButton.d.ts +0 -0
  167. package/lib/Sidebar/BackButton.js +39 -0
  168. package/{Sidebar → lib/Sidebar}/Drilldown.d.ts +0 -0
  169. package/lib/Sidebar/Drilldown.js +43 -0
  170. package/{Sidebar → lib/Sidebar}/DrilldownMenu.d.ts +0 -0
  171. package/lib/Sidebar/DrilldownMenu.js +71 -0
  172. package/{Sidebar → lib/Sidebar}/DrilldownMenuItem.d.ts +0 -0
  173. package/lib/Sidebar/DrilldownMenuItem.js +42 -0
  174. package/{Sidebar → lib/Sidebar}/ExternalIcon.d.ts +0 -0
  175. package/lib/Sidebar/ExternalIcon.js +21 -0
  176. package/{Sidebar → lib/Sidebar}/Menu.d.ts +0 -0
  177. package/lib/Sidebar/Menu.js +17 -0
  178. package/{Sidebar → lib/Sidebar}/MenuContainer.d.ts +0 -0
  179. package/lib/Sidebar/MenuContainer.js +16 -0
  180. package/{Sidebar → lib/Sidebar}/MenuGroup.d.ts +0 -0
  181. package/lib/Sidebar/MenuGroup.js +88 -0
  182. package/{Sidebar → lib/Sidebar}/MenuItem.d.ts +0 -0
  183. package/{Sidebar → lib/Sidebar}/MenuItem.js +9 -14
  184. package/{Sidebar → lib/Sidebar}/MenuItemLabel.d.ts +0 -0
  185. package/lib/Sidebar/MenuItemLabel.js +46 -0
  186. package/lib/Sidebar/MenuLink.d.ts +4 -0
  187. package/lib/Sidebar/MenuLink.js +15 -0
  188. package/{Sidebar → lib/Sidebar}/MenuLinkItem.d.ts +0 -0
  189. package/lib/Sidebar/MenuLinkItem.js +15 -0
  190. package/{Sidebar → lib/Sidebar}/MobileSidebarButton.d.ts +0 -0
  191. package/lib/Sidebar/MobileSidebarButton.js +46 -0
  192. package/{Sidebar → lib/Sidebar}/Separator.d.ts +0 -0
  193. package/lib/Sidebar/Separator.js +18 -0
  194. package/{Sidebar → lib/Sidebar}/SeparatorItem.d.ts +0 -0
  195. package/lib/Sidebar/SeparatorItem.js +25 -0
  196. package/{Sidebar → lib/Sidebar}/SeparatorLine.d.ts +0 -0
  197. package/lib/Sidebar/SeparatorLine.js +15 -0
  198. package/{Sidebar → lib/Sidebar}/Sidebar.d.ts +0 -0
  199. package/lib/Sidebar/Sidebar.js +55 -0
  200. package/{Sidebar → lib/Sidebar}/SidebarLayout.d.ts +0 -0
  201. package/lib/Sidebar/SidebarLayout.js +31 -0
  202. package/{Sidebar → lib/Sidebar}/index.d.ts +0 -0
  203. package/{Sidebar → lib/Sidebar}/index.js +1 -0
  204. package/{Sidebar → lib/Sidebar}/types/DrilldownMenuProps.d.ts +0 -0
  205. package/{Sidebar → lib/Sidebar}/types/DrilldownMenuProps.js +1 -0
  206. package/{Sidebar → lib/Sidebar}/types/ItemState.d.ts +0 -0
  207. package/{Sidebar → lib/Sidebar}/types/ItemState.js +1 -0
  208. package/{Sidebar → lib/Sidebar}/types/MenuItemProps.d.ts +0 -0
  209. package/{Sidebar → lib/Sidebar}/types/MenuItemProps.js +1 -0
  210. package/{Sidebar → lib/Sidebar}/types/MenuStyle.d.ts +0 -0
  211. package/{Sidebar → lib/Sidebar}/types/MenuStyle.js +1 -0
  212. package/{Sidebar → lib/Sidebar}/types/NavItem.d.ts +0 -0
  213. package/{Sidebar → lib/Sidebar}/types/NavItem.js +1 -0
  214. package/{Sidebar → lib/Sidebar}/types/index.d.ts +0 -0
  215. package/{Sidebar → lib/Sidebar}/types/index.js +1 -0
  216. package/{SidebarLogo → lib/SidebarLogo}/SidebarLogo.d.ts +0 -0
  217. package/lib/SidebarLogo/SidebarLogo.js +31 -0
  218. package/{SidebarLogo → lib/SidebarLogo}/index.d.ts +0 -0
  219. package/{SidebarLogo → lib/SidebarLogo}/index.js +1 -0
  220. package/{SourceCode → lib/SourceCode}/SourceCode.d.ts +0 -0
  221. package/{SourceCode → lib/SourceCode}/SourceCode.js +14 -34
  222. package/{SourceCode → lib/SourceCode}/index.d.ts +0 -0
  223. package/{SourceCode → lib/SourceCode}/index.js +1 -0
  224. package/{TableOfContent → lib/TableOfContent}/TableOfContent.d.ts +0 -0
  225. package/lib/TableOfContent/TableOfContent.js +116 -0
  226. package/{TableOfContent → lib/TableOfContent}/index.d.ts +0 -0
  227. package/{TableOfContent → lib/TableOfContent}/index.js +1 -0
  228. package/{TableOfContent → lib/TableOfContent}/utils.d.ts +0 -0
  229. package/lib/TableOfContent/utils.js +41 -0
  230. package/{Tooltip → lib/Tooltip}/Tooltip.d.ts +0 -0
  231. package/lib/Tooltip/Tooltip.js +173 -0
  232. package/{Tooltip → lib/Tooltip}/index.d.ts +0 -0
  233. package/{Tooltip → lib/Tooltip}/index.js +1 -0
  234. package/{Typography → lib/Typography}/CompactTypography.d.ts +0 -0
  235. package/lib/Typography/CompactTypography.js +14 -0
  236. package/{Typography → lib/Typography}/Emphasis.d.ts +0 -0
  237. package/lib/Typography/Emphasis.js +13 -0
  238. package/{Typography → lib/Typography}/H1.d.ts +0 -0
  239. package/lib/Typography/H1.js +17 -0
  240. package/{Typography → lib/Typography}/H2.d.ts +0 -0
  241. package/lib/Typography/H2.js +17 -0
  242. package/{Typography → lib/Typography}/H3.d.ts +0 -0
  243. package/lib/Typography/H3.js +17 -0
  244. package/{Typography → lib/Typography}/SectionHeader.d.ts +0 -0
  245. package/lib/Typography/SectionHeader.js +19 -0
  246. package/{Typography → lib/Typography}/Typography.d.ts +0 -0
  247. package/lib/Typography/Typography.js +22 -0
  248. package/{Typography → lib/Typography}/index.d.ts +0 -0
  249. package/{Typography → lib/Typography}/index.js +1 -0
  250. package/{globalStyle.d.ts → lib/globalStyle.d.ts} +0 -0
  251. package/lib/globalStyle.js +1924 -0
  252. package/{hooks → lib/hooks}/__tests__/mocks/MockIntersectionObserver.d.ts +0 -0
  253. package/lib/hooks/__tests__/mocks/MockIntersectionObserver.js +79 -0
  254. package/{hooks → lib/hooks}/index.d.ts +0 -0
  255. package/{hooks → lib/hooks}/index.js +1 -0
  256. package/{hooks → lib/hooks}/useActiveHeading.d.ts +0 -0
  257. package/lib/hooks/useActiveHeading.js +85 -0
  258. package/{hooks → lib/hooks}/useActiveSectionId.d.ts +0 -0
  259. package/lib/hooks/useActiveSectionId.js +47 -0
  260. package/{hooks → lib/hooks}/useControl.d.ts +0 -0
  261. package/lib/hooks/useControl.js +16 -0
  262. package/{hooks → lib/hooks}/useDefaultThemeSettings.d.ts +0 -0
  263. package/{hooks → lib/hooks}/useDefaultThemeSettings.js +3 -2
  264. package/{hooks → lib/hooks}/useFullHeight.d.ts +0 -0
  265. package/{hooks → lib/hooks}/useFullHeight.js +13 -12
  266. package/{hooks → lib/hooks}/useMobileMenu.d.ts +0 -0
  267. package/lib/hooks/useMobileMenu.js +13 -0
  268. package/{hooks → lib/hooks}/useMount.d.ts +0 -0
  269. package/{hooks → lib/hooks}/useMount.js +4 -3
  270. package/{hooks → lib/hooks}/useNavbarHeight.d.ts +0 -0
  271. package/lib/hooks/useNavbarHeight.js +21 -0
  272. package/{hooks → lib/hooks}/useOutsideClick.d.ts +0 -0
  273. package/{hooks → lib/hooks}/useOutsideClick.js +5 -4
  274. package/{hooks → lib/hooks}/useUnmount.d.ts +0 -0
  275. package/{hooks → lib/hooks}/useUnmount.js +5 -4
  276. package/{icons → lib/icons}/AlertIcon/AlertIcon.d.ts +0 -0
  277. package/{icons → lib/icons}/AlertIcon/AlertIcon.js +22 -17
  278. package/{icons → lib/icons}/AlertIcon/index.d.ts +0 -0
  279. package/{icons → lib/icons}/AlertIcon/index.js +1 -0
  280. package/{icons → lib/icons}/ArrowIcon/ArrowIcon.d.ts +0 -0
  281. package/lib/icons/ArrowIcon/ArrowIcon.js +32 -0
  282. package/{icons → lib/icons}/ArrowIcon/index.d.ts +0 -0
  283. package/{icons → lib/icons}/ArrowIcon/index.js +1 -0
  284. package/{icons → lib/icons}/ColorModeIcon/ColorModeIcon.d.ts +0 -0
  285. package/{icons → lib/icons}/ColorModeIcon/ColorModeIcon.js +10 -11
  286. package/{icons → lib/icons}/ColorModeIcon/index.d.ts +0 -0
  287. package/{icons → lib/icons}/ColorModeIcon/index.js +1 -0
  288. package/{icons → lib/icons}/ShelfIcon/ShelfIcon.d.ts +0 -0
  289. package/lib/icons/ShelfIcon/ShelfIcon.js +52 -0
  290. package/{icons → lib/icons}/ShelfIcon/index.d.ts +0 -0
  291. package/{icons → lib/icons}/ShelfIcon/index.js +1 -0
  292. package/{icons → lib/icons}/index.d.ts +0 -0
  293. package/{icons → lib/icons}/index.js +1 -0
  294. package/{index.d.ts → lib/index.d.ts} +0 -0
  295. package/{index.js → lib/index.js} +1 -0
  296. package/{mocks → lib/mocks}/Link.d.ts +0 -0
  297. package/lib/mocks/Link.js +27 -0
  298. package/{mocks → lib/mocks}/constants/index.d.ts +0 -0
  299. package/{mocks → lib/mocks}/constants/index.js +1 -0
  300. package/{mocks → lib/mocks}/hooks/index.d.ts +0 -0
  301. package/{mocks → lib/mocks}/hooks/index.js +2 -1
  302. package/{mocks → lib/mocks}/hooks/usePageData.d.ts +0 -0
  303. package/{mocks → lib/mocks}/hooks/usePageData.js +1 -0
  304. package/{mocks → lib/mocks}/search.d.ts +0 -0
  305. package/{mocks → lib/mocks}/search.js +2 -1
  306. package/{mocks → lib/mocks}/types/index.d.ts +0 -0
  307. package/{mocks → lib/mocks}/types/index.js +1 -0
  308. package/lib/mocks/types.d.ts +14 -0
  309. package/{mocks → lib/mocks}/types.js +1 -0
  310. package/{mocks → lib/mocks}/usePreloadHistory.d.ts +0 -0
  311. package/{mocks → lib/mocks}/usePreloadHistory.js +3 -2
  312. package/{mocks → lib/mocks}/utils.d.ts +0 -0
  313. package/{mocks → lib/mocks}/utils.js +3 -2
  314. package/{ui → lib/ui}/Background.d.ts +0 -0
  315. package/lib/ui/Background.js +21 -0
  316. package/{ui → lib/ui}/Box.d.ts +0 -0
  317. package/lib/ui/Box.js +21 -0
  318. package/{ui → lib/ui}/Burger.d.ts +0 -0
  319. package/lib/ui/Burger.js +31 -0
  320. package/{ui → lib/ui}/Dropdown.d.ts +0 -0
  321. package/lib/ui/Dropdown.js +115 -0
  322. package/{ui → lib/ui}/Flex.d.ts +0 -0
  323. package/lib/ui/Flex.js +21 -0
  324. package/{ui → lib/ui}/Jumbotron.d.ts +0 -0
  325. package/lib/ui/Jumbotron.js +51 -0
  326. package/{ui → lib/ui}/Tiles/ThinTile.d.ts +1 -1
  327. package/lib/ui/Tiles/ThinTile.js +124 -0
  328. package/{ui → lib/ui}/Tiles/TileHeader.d.ts +0 -0
  329. package/lib/ui/Tiles/TileHeader.js +19 -0
  330. package/{ui → lib/ui}/Tiles/TileText.d.ts +0 -0
  331. package/lib/ui/Tiles/TileText.js +18 -0
  332. package/{ui → lib/ui}/Tiles/WideTile.d.ts +0 -0
  333. package/lib/ui/Tiles/WideTile.js +114 -0
  334. package/{ui → lib/ui}/Tiles/index.d.ts +0 -0
  335. package/{ui → lib/ui}/Tiles/index.js +1 -0
  336. package/{ui → lib/ui}/darkColors.d.ts +0 -0
  337. package/lib/ui/darkColors.js +70 -0
  338. package/{ui → lib/ui}/index.d.ts +0 -1
  339. package/{ui → lib/ui}/index.js +2 -5
  340. package/{utils → lib/utils}/ClipboardService.d.ts +0 -0
  341. package/{utils → lib/utils}/ClipboardService.js +11 -13
  342. package/{utils → lib/utils}/args-typecheck.d.ts +0 -0
  343. package/{utils → lib/utils}/args-typecheck.js +1 -0
  344. package/{utils → lib/utils}/class-names.d.ts +0 -0
  345. package/lib/utils/class-names.js +12 -0
  346. package/{utils → lib/utils}/color.d.ts +0 -0
  347. package/{utils → lib/utils}/color.js +7 -6
  348. package/{utils → lib/utils}/css-variables.d.ts +0 -0
  349. package/lib/utils/css-variables.js +6 -0
  350. package/{utils → lib/utils}/getNavbarElement.d.ts +0 -0
  351. package/{utils → lib/utils}/getNavbarElement.js +3 -2
  352. package/{utils → lib/utils}/highlight.d.ts +0 -0
  353. package/{utils → lib/utils}/highlight.js +10 -11
  354. package/{utils → lib/utils}/index.d.ts +0 -0
  355. package/{utils → lib/utils}/index.js +1 -0
  356. package/{utils → lib/utils}/isUrl.d.ts +0 -0
  357. package/{utils → lib/utils}/isUrl.js +6 -5
  358. package/{utils → lib/utils}/jsonToHtml.d.ts +0 -0
  359. package/lib/utils/jsonToHtml.js +180 -0
  360. package/{utils → lib/utils}/media-css.d.ts +0 -0
  361. package/lib/utils/media-css.js +13 -0
  362. package/{utils → lib/utils}/replaceHashInColor.d.ts +0 -0
  363. package/{utils → lib/utils}/replaceHashInColor.js +1 -0
  364. package/{utils → lib/utils}/theme-helpers.d.ts +0 -0
  365. package/lib/utils/theme-helpers.js +75 -0
  366. package/package.json +104 -5
  367. package/src/ApiOnboarding/AppCustomAttributes.tsx +6 -0
  368. package/src/Button/Button.tsx +2 -1
  369. package/src/Cards/Card.tsx +1 -2
  370. package/src/CopyButton/CopyButtonWrapper.tsx +1 -2
  371. package/src/EditPageButton/EditPageButton.tsx +4 -0
  372. package/src/Footer/CustomFooter.tsx +1 -2
  373. package/src/Footer/CustomFooterNavItem.tsx +1 -2
  374. package/src/Footer/Footer.tsx +1 -2
  375. package/src/Footer/FooterColumn.tsx +8 -3
  376. package/src/Footer/FooterColumns.tsx +1 -2
  377. package/src/JsonViewer/JsonViewer.tsx +2 -1
  378. package/src/LastUpdated/LastUpdated.tsx +41 -5
  379. package/src/Markdown/Admonition.tsx +3 -0
  380. package/src/Markdown/CodeSample/CodeSample.tsx +8 -0
  381. package/src/Markdown/Heading.tsx +2 -1
  382. package/src/Markdown/MarkdownLayout.tsx +2 -1
  383. package/src/Markdown/MarkdownWrapper.tsx +2 -1
  384. package/src/Markdown/Sup.tsx +2 -1
  385. package/src/Markdown/Tabs/Tabs.tsx +2 -1
  386. package/src/Navbar/MobileNavbarDropdown.tsx +1 -2
  387. package/src/Navbar/MobileNavbarItem.tsx +3 -4
  388. package/src/Navbar/MobileNavbarMenu.tsx +1 -2
  389. package/src/Navbar/Navbar.tsx +1 -2
  390. package/src/Navbar/NavbarDropdown.tsx +1 -2
  391. package/src/Navbar/NavbarItem.tsx +4 -5
  392. package/src/Navbar/NavbarMenu.tsx +1 -2
  393. package/src/NavbarLogo/NavbarLogo.tsx +1 -2
  394. package/src/PageNavigation/NextPageLink.tsx +1 -2
  395. package/src/PageNavigation/PageNavigation.tsx +4 -0
  396. package/src/PageNavigation/PreviousPageLink.tsx +1 -2
  397. package/src/Panel/PanelComponent.tsx +2 -2
  398. package/src/Panel/PanelHeader.ts +2 -1
  399. package/src/Search/Autocomplete.tsx +2 -2
  400. package/src/Search/ClearIcon.tsx +2 -1
  401. package/src/Search/Parameters.tsx +1 -2
  402. package/src/Search/SearchIcon.tsx +2 -1
  403. package/src/Search/SearchItem.tsx +1 -2
  404. package/src/Sidebar/ApiCallItem.tsx +1 -2
  405. package/src/Sidebar/Drilldown.tsx +1 -2
  406. package/src/Sidebar/DrilldownMenu.tsx +1 -2
  407. package/src/Sidebar/MenuGroup.tsx +1 -2
  408. package/src/Sidebar/MenuItem.tsx +1 -2
  409. package/src/Sidebar/MenuLink.tsx +3 -9
  410. package/src/Sidebar/MenuLinkItem.tsx +1 -2
  411. package/src/Sidebar/Separator.tsx +1 -2
  412. package/src/TableOfContent/TableOfContent.tsx +3 -4
  413. package/src/Tooltip/Tooltip.tsx +1 -0
  414. package/src/globalStyle.ts +28 -28
  415. package/src/hooks/__tests__/mocks/MockIntersectionObserver.ts +48 -0
  416. package/src/hooks/useActiveSectionId.ts +1 -0
  417. package/src/hooks/useDefaultThemeSettings.ts +1 -2
  418. package/src/hooks/useFullHeight.ts +2 -1
  419. package/src/hooks/useMobileMenu.ts +2 -1
  420. package/src/hooks/useNavbarHeight.ts +1 -0
  421. package/src/hooks/useOutsideClick.ts +2 -1
  422. package/src/mocks/Link.tsx +1 -2
  423. package/src/mocks/hooks/index.ts +1 -1
  424. package/src/mocks/types.ts +8 -1
  425. package/src/settings.yaml +1 -1
  426. package/src/types/portal/src/shared/constants.d.ts +33 -33
  427. package/src/types/portal/src/shared/types/markdown.d.ts +3 -3
  428. package/src/types/portal/src/shared/types/nav.d.ts +119 -106
  429. package/src/ui/Box.tsx +3 -2
  430. package/src/ui/Burger.tsx +2 -1
  431. package/src/ui/Dropdown.tsx +1 -2
  432. package/src/ui/Flex.tsx +2 -1
  433. package/src/ui/Tiles/ThinTile.tsx +2 -1
  434. package/src/ui/Tiles/WideTile.tsx +1 -2
  435. package/src/ui/index.tsx +0 -1
  436. package/src/utils/theme-helpers.ts +1 -0
  437. package/Button/Button.js +0 -87
  438. package/Cards/Card.js +0 -25
  439. package/Cards/CardsBlock.js +0 -15
  440. package/CodeBlock/CodeBlock.js +0 -16
  441. package/CopyButton/CopyButton.js +0 -100
  442. package/EditPageButton/EditPageButton.js +0 -24
  443. package/Footer/CustomFooter.js +0 -31
  444. package/Footer/CustomFooterNavItem.js +0 -25
  445. package/Footer/Footer.js +0 -29
  446. package/Footer/FooterColumn.js +0 -31
  447. package/Footer/FooterColumns.js +0 -34
  448. package/Footer/FooterCopyright.js +0 -19
  449. package/JsonViewer/JsonViewer.js +0 -147
  450. package/LastUpdated/LastUpdated.d.ts +0 -5
  451. package/LastUpdated/LastUpdated.js +0 -27
  452. package/Layout/PageLayout.js +0 -22
  453. package/Layout/RootLayout.js +0 -24
  454. package/Markdown/Admonition.js +0 -31
  455. package/Markdown/CodeSample/CodeSample.js +0 -93
  456. package/Markdown/ContainerWrapper.js +0 -21
  457. package/Markdown/Details.js +0 -22
  458. package/Markdown/MarkdownLayout.js +0 -31
  459. package/Markdown/MarkdownWrapper.js +0 -43
  460. package/Markdown/Mermaid.js +0 -19
  461. package/Markdown/PageWrapper.js +0 -15
  462. package/Markdown/Sup.js +0 -19
  463. package/Markdown/Tabs/Tab.js +0 -24
  464. package/Markdown/Tabs/Tabs.js +0 -72
  465. package/Navbar/MobileNavbarDropdown.js +0 -21
  466. package/Navbar/MobileNavbarItem.js +0 -102
  467. package/Navbar/MobileNavbarMenu.js +0 -32
  468. package/Navbar/MobileNavbarMenuButton.js +0 -19
  469. package/Navbar/Navbar.js +0 -64
  470. package/Navbar/NavbarDropdown.js +0 -21
  471. package/Navbar/NavbarItem.js +0 -53
  472. package/Navbar/NavbarMenu.js +0 -29
  473. package/NavbarLogo/NavbarLogo.js +0 -24
  474. package/OperationBadge/OperationBadge.js +0 -16
  475. package/PageNavigation/NextPageLink.js +0 -28
  476. package/PageNavigation/PageNavigation.js +0 -27
  477. package/PageNavigation/PreviousPageLink.js +0 -28
  478. package/Panel/Panel.js +0 -23
  479. package/Panel/PanelBody.js +0 -43
  480. package/Panel/PanelHeader.js +0 -24
  481. package/Panel/PanelHeaderTitle.js +0 -15
  482. package/Profile/Profile.js +0 -59
  483. package/SamplesPanelControls/SamplesPanelControls.js +0 -27
  484. package/Search/Autocomplete.js +0 -122
  485. package/Search/ClearIcon.js +0 -32
  486. package/Search/Input.js +0 -15
  487. package/Search/Parameters.js +0 -42
  488. package/Search/Popover.js +0 -15
  489. package/Search/Search.js +0 -29
  490. package/Search/SearchIcon.js +0 -32
  491. package/Search/SearchItem.js +0 -64
  492. package/Search/SidebarSearch.js +0 -17
  493. package/Sidebar/ApiCallItem.js +0 -29
  494. package/Sidebar/ArrowBack.js +0 -21
  495. package/Sidebar/BackButton.js +0 -22
  496. package/Sidebar/Drilldown.js +0 -50
  497. package/Sidebar/DrilldownMenu.js +0 -52
  498. package/Sidebar/DrilldownMenuItem.js +0 -25
  499. package/Sidebar/ExternalIcon.js +0 -23
  500. package/Sidebar/Menu.js +0 -15
  501. package/Sidebar/MenuContainer.js +0 -15
  502. package/Sidebar/MenuGroup.js +0 -95
  503. package/Sidebar/MenuItemLabel.js +0 -19
  504. package/Sidebar/MenuLink.d.ts +0 -5
  505. package/Sidebar/MenuLink.js +0 -16
  506. package/Sidebar/MenuLinkItem.js +0 -31
  507. package/Sidebar/MobileSidebarButton.js +0 -25
  508. package/Sidebar/Separator.js +0 -23
  509. package/Sidebar/SeparatorItem.js +0 -16
  510. package/Sidebar/SeparatorLine.js +0 -15
  511. package/Sidebar/Sidebar.js +0 -24
  512. package/Sidebar/SidebarLayout.js +0 -52
  513. package/SidebarLogo/SidebarLogo.js +0 -25
  514. package/TableOfContent/TableOfContent.js +0 -81
  515. package/TableOfContent/utils.js +0 -62
  516. package/Tooltip/Tooltip.js +0 -98
  517. package/Typography/CompactTypography.js +0 -18
  518. package/Typography/Emphasis.js +0 -15
  519. package/Typography/H1.js +0 -16
  520. package/Typography/H2.js +0 -16
  521. package/Typography/H3.js +0 -16
  522. package/Typography/SectionHeader.js +0 -15
  523. package/Typography/Typography.js +0 -45
  524. package/globalStyle.js +0 -38
  525. package/hooks/__tests__/mocks/MockIntersectionObserver.js +0 -39
  526. package/hooks/useActiveHeading.js +0 -100
  527. package/hooks/useActiveSectionId.js +0 -65
  528. package/hooks/useControl.js +0 -32
  529. package/hooks/useMobileMenu.js +0 -29
  530. package/hooks/useNavbarHeight.js +0 -36
  531. package/icons/ArrowIcon/ArrowIcon.js +0 -33
  532. package/icons/ShelfIcon/ShelfIcon.js +0 -52
  533. package/mocks/Link.js +0 -27
  534. package/mocks/types.d.ts +0 -7
  535. package/src/ui/UniversalLink.tsx +0 -96
  536. package/ui/Background.js +0 -16
  537. package/ui/Box.js +0 -16
  538. package/ui/Burger.js +0 -23
  539. package/ui/Dropdown.js +0 -89
  540. package/ui/Flex.js +0 -31
  541. package/ui/Jumbotron.js +0 -44
  542. package/ui/Tiles/ThinTile.js +0 -114
  543. package/ui/Tiles/TileHeader.js +0 -15
  544. package/ui/Tiles/TileText.js +0 -15
  545. package/ui/Tiles/WideTile.js +0 -109
  546. package/ui/UniversalLink.d.ts +0 -17
  547. package/ui/UniversalLink.js +0 -97
  548. package/ui/darkColors.js +0 -10
  549. package/utils/class-names.js +0 -15
  550. package/utils/css-variables.js +0 -8
  551. package/utils/jsonToHtml.js +0 -324
  552. package/utils/media-css.js +0 -50
  553. package/utils/theme-helpers.js +0 -121
package/globalStyle.js DELETED
@@ -1,38 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.GlobalStyle = exports.styles = void 0;
8
- var styled_components_1 = require("styled-components");
9
- var darkColors_1 = require("./ui/darkColors");
10
- var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n\n --color-primary-50: #87ceeb;\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-50: #ffffff;\n --color-secondary-100: #f5f7fa;\n --color-secondary-200: #f3f4f6;\n --color-secondary-300: #e4e7eb;\n --color-secondary-400: #d5dae0;\n --color-secondary-500: #c7cdd5;\n --color-secondary-600: #b8c0ca;\n --color-secondary-700: #a9b3c0;\n --color-secondary-800: #9ba6b5;\n --color-secondary-900: #52606d;\n\n --color-emphasis-50: #ffffff;\n --color-emphasis-100: #e9eaec;\n --color-emphasis-200: #cdd0d5;\n --color-emphasis-300: #b2b6bd;\n --color-emphasis-400: #969ca6;\n --color-emphasis-500: #7a828f;\n --color-emphasis-600: #626974;\n --color-emphasis-700: #4b5058;\n --color-emphasis-800: #1f2933;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-50: #e6eef8;\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-50: #ddffe1;\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-50: #ffeda5;\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-50: #ffeaea;\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n --colors-translucent: rgb(226 230 236 / 37%);\n\n // @tokens End\n"], ["\n /* === Palette === */\n\n /**\n * @tokens Base Colors\n * @presenter Color\n */\n\n --color-primary-50: #87ceeb;\n --color-primary-100: #62a1ff;\n --color-primary-200: #4892ff;\n --color-primary-300: #2f83ff;\n --color-primary-400: #1573ff;\n --color-primary-500: #0065fb;\n --color-primary-600: #005be2;\n --color-primary-700: #0050c8;\n --color-primary-800: #0046af;\n --color-primary-900: #003c95;\n\n --color-secondary-50: #ffffff;\n --color-secondary-100: #f5f7fa;\n --color-secondary-200: #f3f4f6;\n --color-secondary-300: #e4e7eb;\n --color-secondary-400: #d5dae0;\n --color-secondary-500: #c7cdd5;\n --color-secondary-600: #b8c0ca;\n --color-secondary-700: #a9b3c0;\n --color-secondary-800: #9ba6b5;\n --color-secondary-900: #52606d;\n\n --color-emphasis-50: #ffffff;\n --color-emphasis-100: #e9eaec;\n --color-emphasis-200: #cdd0d5;\n --color-emphasis-300: #b2b6bd;\n --color-emphasis-400: #969ca6;\n --color-emphasis-500: #7a828f;\n --color-emphasis-600: #626974;\n --color-emphasis-700: #4b5058;\n --color-emphasis-800: #1f2933;\n --color-emphasis-900: #1c1e21;\n\n --color-accent-50: #e6eef8;\n --color-accent-100: #b3dcf3;\n --color-accent-200: #a6dfff;\n --color-accent-300: #8cd5ff;\n --color-accent-400: #73ccff;\n --color-accent-500: #59c3ff;\n --color-accent-600: #40baff;\n --color-accent-700: #26b1ff;\n --color-accent-800: #0da7ff;\n --color-accent-900: #009bf2;\n\n --color-success-50: #ddffe1;\n --color-success-100: #98eda0;\n --color-success-200: #82e98c;\n --color-success-300: #6ce678;\n --color-success-400: #57e264;\n --color-success-500: #41de50;\n --color-success-600: #2bda3c;\n --color-success-700: #23c933;\n --color-success-800: #1fb32d;\n --color-success-900: #1b9e28;\n\n --color-warning-50: #ffeda5;\n --color-warning-100: #ffc966;\n --color-warning-200: #ffc04d;\n --color-warning-300: #ffb733;\n --color-warning-400: #ffae1a;\n --color-warning-500: #ffa500;\n --color-warning-600: #e69400;\n --color-warning-700: #cc8400;\n --color-warning-800: #b37300;\n --color-warning-900: #996300;\n\n --color-error-50: #ffeaea;\n --color-error-100: #ffc7c7;\n --color-error-200: #ffaeae;\n --color-error-300: #ff9494;\n --color-error-400: #ff7b7b;\n --color-error-500: #ff6161;\n --color-error-600: #ff4747;\n --color-error-700: #ff2e2e;\n --color-error-800: #ff1414;\n --color-error-900: #ff0000;\n\n --colors-translucent: rgb(226 230 236 / 37%);\n\n // @tokens End\n"])));
11
- var httpColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: #4d5d86;\n\n // @tokens End\n"], ["\n /**\n * @tokens HTTP Colors\n * @presenter Color\n */\n --color-http-get: #3a9601;\n --color-http-post: #0065fb;\n --color-http-put: #93527b;\n --color-http-options: #947014;\n --color-http-patch: #bf581d;\n --color-http-delete: #c83637;\n --color-http-basic: #707070;\n --color-http-link: #07818f;\n --color-http-head: #a23dad;\n --color-http-hook: #4d5d86;\n\n // @tokens End\n"])));
12
- var typography = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --text-color: var(--color-emphasis-800);\n --text-color-inverse: var(--color-secondary-100);\n --text-color-secondary: var(--color-emphasis-500);\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --text-smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // @tokens End\n"], ["\n /* === Typography === */\n\n /**\n * @tokens Typography Colors\n * @presenter Color\n */\n --text-color: var(--color-emphasis-800);\n --text-color-inverse: var(--color-secondary-100);\n --text-color-secondary: var(--color-emphasis-500);\n\n /**\n * @tokens Font Sizes\n * @presenter FontSize\n */\n --font-size-base: 14px;\n --font-size-small: 12px;\n\n /**\n * @tokens Line Heights\n * @presenter LineHeight\n */\n --line-height-base: 1.5em;\n\n /**\n * @tokens Font Weights\n * @presenter FontWeight\n */\n --font-weight-regular: 400;\n --font-weight-bold: 600;\n --font-weight-bolder: 700;\n\n /**\n * @tokens Font Families\n * @presenter FontFamily\n */\n --font-family-base: Source Sans Pro, sans-serif;\n --font-family-monospaced: Source Code Pro, monospace;\n\n /**\n * @tokens Rendering\n */\n --text-smoothing: antialiased; // text-smoothing\n --text-rendering: optimizeSpeed; // text-rendering\n\n // @tokens End\n"])));
13
- var headingsTypography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n --heading-anchor-icon: none;\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"], ["\n * {\n box-sizing: border-box;\n }\n\n /**\n * @tokens Headings common styles\n */\n\n --heading-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n --heading-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n --heading-margin-top: 1.25em; // @presenter Spacing\n --heading-margin-bottom: 0.9em; // @presenter Spacing\n --heading-text-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Typography heading anchor icon\n */\n\n --heading-anchor-offset-right: 4px; // @presenter Spacing\n --heading-anchor-color: var(--color-primary-500); // @presenter Color\n --heading-anchor-icon: none;\n\n // TODO: implement a theme setting for heading-anchor-location: left right\n\n /**\n * @tokens Heading level 1\n */\n\n --h1-font-family: var(--heading-font-family); // @presenter FontFamily\n --h1-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h1-font-size: 36px; // @presenter FontSize\n --h1-line-height: 36px; // @presenter LineHeight\n --h1-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h1-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h1-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 2\n */\n\n --h2-font-family: var(--heading-font-family); // @presenter FontFamily\n --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h2-font-size: 28px; // @presenter FontSize\n --h2-line-height: 28px; // @presenter LineHeight\n --h2-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h2-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 3\n */\n\n --h3-font-family: var(--heading-font-family); // @presenter FontFamily\n --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h3-font-size: 18px; // @presenter FontSize\n --h3-line-height: 18px; // @presenter LineHeight\n --h3-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h3-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 4\n */\n\n --h4-font-family: var(--heading-font-family); // @presenter FontFamily\n --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h4-font-size: 16px; // @presenter FontSize\n --h4-line-height: 16px; // @presenter LineHeight\n --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h4-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h4-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 5\n */\n\n --h5-font-family: var(\n --heading-font-family\n ); /* Token Description Example @presenter FontFamily */\n --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h5-font-size: 14px; // @presenter FontSize\n --h5-line-height: 14px; // @presenter LineHeight\n --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h5-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h5-text-color: var(--heading-text-color); // @presenter Color\n\n /**\n * @tokens Heading level 6\n */\n\n --h6-font-family: var(--heading-font-family); // @presenter FontFamily\n --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight\n --h6-font-size: 12px; // @presenter FontSize\n --h6-line-height: 12px; // @presenter LineHeight\n --h6-margin-top: var(--heading-margin-top); // @presenter Spacing\n --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing\n --h6-text-color: var(--heading-text-color); // @presenter Color\n\n // @tokens End\n"])));
14
- var common = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: var(--color-secondary-50);\n --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"], ["\n /**\n * @tokens Borders\n * @presenter Border\n */\n --border-width: 1px;\n --border-style: solid;\n\n /**\n * @tokens Border Radius\n * @presenter BorderRadius\n */\n --border-radius: 4px;\n --border-radius-lg: calc(var(--border-radius) * 2);\n\n /**\n * @tokens Border Colors\n * @presenter Color\n */\n --border-color: var(--color-secondary-300);\n --border-color-secondary: var(--color-emphasis-600);\n --background-color: var(--color-secondary-50);\n --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);\n /**\n * @tokens Spacings\n * @presenter Spacing\n */\n\n --spacing-unit: 5px;\n --spacing-horizontal: calc(var(--spacing-unit) * 8);\n --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n // @tokens End\n"])));
15
- var buttons = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n /*\n * Static classnames that can be used to override styles for components:\n * download-specification-button, next-section-button, button-base\n */\n\n /**\n * @tokens Button default colors\n */\n\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-emphasis-400); // @presenter Color\n --button-border-color: var(--color-emphasis-400); // @presenter Color\n\n --button-hover-color: var(--color-emphasis-700); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-border-color: var(--color-emphasis-500); // @presenter Color\n\n --button-active-color: var(--color-emphasis-900); // @presenter Color\n --button-active-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-border-color: var(--color-emphasis-600); // @presenter Color\n\n /* TODO more styles for disabled state ??? */\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-border-color: var(--color-primary-500); // @presenter Color\n\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-hover-border-color: var(--color-primary-600); // @presenter Color\n\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-active-border-color: var(--color-primary-700); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-primary-100); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-700); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-border-color: var(--color-secondary-400); // @presenter Color\n\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-hover-border-color: var(--color-secondary-500); // @presenter Color\n\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-active-border-color: var(--color-secondary-600); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-secondary-200); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--border-radius); // @presenter BorderRadius\n --button-margin: 5px; // @presenter Spacing\n --button-box-shadow: none; // @presenter Shadow\n --button-hover-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n /**\n * @tokens Button typography\n */\n --button-font-family: inherit; // @presenter FontFamily\n --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\n\n --button-xlarge-font-size: 16px; // @presenter FontSize\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /*\n * Static classnames that can be used to override styles for components:\n * download-specification-button, next-section-button, button-base\n */\n\n /**\n * @tokens Button default colors\n */\n\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-emphasis-400); // @presenter Color\n --button-border-color: var(--color-emphasis-400); // @presenter Color\n\n --button-hover-color: var(--color-emphasis-700); // @presenter Color\n --button-hover-background-color: var(--color-emphasis-500); // @presenter Color\n --button-hover-border-color: var(--color-emphasis-500); // @presenter Color\n\n --button-active-color: var(--color-emphasis-900); // @presenter Color\n --button-active-background-color: var(--color-emphasis-600); // @presenter Color\n --button-active-border-color: var(--color-emphasis-600); // @presenter Color\n\n /* TODO more styles for disabled state ??? */\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-emphasis-200); // @presenter Color\n\n /**\n * @tokens Button primary colors\n */\n .button-color-primary {\n --button-color: var(--color-emphasis-50); // @presenter Color\n --button-background-color: var(--color-primary-500); // @presenter Color\n --button-border-color: var(--color-primary-500); // @presenter Color\n\n --button-hover-background-color: var(--color-primary-600); // @presenter Color\n --button-hover-border-color: var(--color-primary-600); // @presenter Color\n\n --button-active-background-color: var(--color-primary-700); // @presenter Color\n --button-active-border-color: var(--color-primary-700); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-primary-100); // @presenter Color\n }\n\n /**\n * @tokens Button secondary colors\n */\n .button-color-secondary {\n --button-color: var(--color-emphasis-700); // @presenter Color\n --button-background-color: var(--color-secondary-400); // @presenter Color\n --button-border-color: var(--color-secondary-400); // @presenter Color\n\n --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n --button-hover-border-color: var(--color-secondary-500); // @presenter Color\n\n --button-active-background-color: var(--color-secondary-600); // @presenter Color\n --button-active-border-color: var(--color-secondary-600); // @presenter Color\n\n --button-disabled-color: var(--button-color); // @presenter Color\n --button-disabled-background-color: var(--color-secondary-200); // @presenter Color\n }\n\n /**\n * @tokens Button borders\n */\n --button-border-radius: var(--border-radius); // @presenter BorderRadius\n --button-margin: 5px; // @presenter Spacing\n --button-box-shadow: none; // @presenter Shadow\n --button-hover-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n /**\n * @tokens Button typography\n */\n --button-font-family: inherit; // @presenter FontFamily\n --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n --button-small-font-size: 12px; // @presenter FontSize\n --button-small-padding: 8px 10px;\n --button-small-min-width: 90px; // @presenter Spacing\n\n --button-medium-font-size: 14px; // @presenter FontSize\n --button-medium-padding: 8px 20px;\n --button-medium-min-width: 120px; // @presenter Spacing\n\n --button-large-font-size: 14px; // @presenter FontSize\n --button-large-padding: 12px 24px;\n --button-large-min-width: 150px; // @presenter Spacing\n\n --button-xlarge-font-size: 16px; // @presenter FontSize\n --button-xlarge-padding: 20px 24px;\n --button-xlarge-min-width: 200px; // @presenter Spacing\n\n // @tokens End\n"])));
16
- var sidebar = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-active-background-color: var(--border-color);\n\n --sidebar-item-hover-background-color: var(--border-color);\n --sidebar-item-hover-color: var(--text-color);\n \n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n --sidebar-back-button-icon: none;\n \n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"], ["\n /* === Sidebar === */\n\n /**\n * @tokens Sidebar logo\n */\n\n --sidebar-logo-max-height: 285px;\n --sidebar-logo-max-width: 285px;\n --sidebar-logo-padding: 2px; // @presenter spacing\n\n /**\n * @tokens Sidebar typography\n */\n --sidebar-word-break: 'inherit';\n\n /**\n * @tokens Sidebar colors\n * @presenter Color\n */\n --sidebar-background-color: var(--background-color);\n --sidebar-border-color: var(--border-color);\n\n /**\n * @tokens Sidebar spacing\n * @presenter Spacing\n */\n --sidebar-width: 285px; // @presenter NO\n\n --sidebar-spacing-unit: 8px;\n --sidebar-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n\n --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n /* === Sidebar Item === */\n\n /**\n * @tokens Sidebar item typography\n */\n --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens Sidebar item colors\n * @presenter Color\n */\n --sidebar-item-text-color: var(--text-color);\n --sidebar-item-background-color: transparent;\n\n --sidebar-item-active-color: var(--text-color);\n --sidebar-item-active-background-color: var(--border-color);\n\n --sidebar-item-hover-background-color: var(--border-color);\n --sidebar-item-hover-color: var(--text-color);\n \n /**\n * @tokens Sidebar item spacing\n * @presenter Spacing\n */\n\n --sidebar-item-nested-offset: calc(var(--sidebar-spacing-unit) * 2);\n --sidebar-item-padding-vertical: var(--sidebar-spacing-unit);\n --sidebar-item-padding-horizontal: var(--sidebar-spacing-unit);\n\n /**\n * @tokens Sidebar item border\n */\n --sidebar-item-border-radius: var(--border-radius) 0 0 var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item icon\n */\n --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general\n --sidebar-item-icon-border-radius: 100%;\n\n /**\n * @tokens Sidebar item sublabel\n */\n --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general\n --sidebar-item-sublabel-font-size: 0.85rem;\n --sidebar-item-sublabel-font-weight: var(--font-weight-regular);\n --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item drilldown\n */\n\n --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);\n --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size);\n --sidebar-text-drilldown-transform: inherit;\n --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color);\n --sidebar-item-drilldown-background-color: var(--sidebar-background-color);\n\n /**\n * @tokens Sidebar item group\n */\n --sidebar-item-group-font-family: var(--sidebar-item-font-family);\n --sidebar-item-group-font-size: var(--sidebar-item-font-size);\n --sidebar-text-group-transform: inherit;\n --sidebar-item-group-text-color: var(--sidebar-item-text-color);\n --sidebar-item-group-background-color: var(--sidebar-background-color);\n --sidebar-item-group-active-text-color: var(--sidebar-item-active-color);\n --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);\n\n // we need a theme setting for chevron-location: left (default), right-compact, right, none\n // we need another theme setting for chevron-style: up-down, down-up, right-down, down-right\n\n --sidebar-group-item-chevron-size: var(--sidebar-spacing-unit);\n --sidebar-group-item-chevron-color: var(--sidebar-item-text-color);\n\n /**\n * @tokens Sidebar item separator\n */\n // does-separatorn't have active states\n --sidebar-item-separator-font-family: var(--sidebar-item-font-family);\n --sidebar-item-separator-font-size: var(--sidebar-item-font-size);\n --sidebar-item-separator-text-transform: inherit;\n --sidebar-item-separator-text-color: var(--sidebar-item-text-color);\n --sidebar-item-separator-background-color: var(--sidebar-background-color);\n --sidebar-item-separator-line-color: var(--border-color); // but has line color\n\n /**\n * @tokens Sidebar back button\n */\n --sidebar-back-button-font-family: var(--sidebar-item-font-family);\n --sidebar-back-button-font-size: var(--sidebar-item-font-size);\n --sidebar-back-button-transform: inherit;\n --sidebar-back-button-text-color: var(--sidebar-item-text-color);\n --sidebar-back-button-background-color: transparent;\n --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);\n --sidebar-back-button-hover-background-color: transparent;\n --sidebar-back-button-icon-color: var(--sidebar-item-text-color);\n --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;\n --sidebar-back-button-icon: none;\n \n //--sidebar-version-dropdown-* (input settings, see below)\n // @tokens End\n"])));
17
- var admonition = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n --admonition-info-icon: none;\n\n /**\n * @tokens Admonition type attention\n * @presenter Color\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color \n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n --admonition-attention-icon: none;\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n --admonition-warning-icon: none;\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n --admonition-danger-icon: none;\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n --admonition-success-icon: none;\n\n // @tokens End\n"], ["\n /* === Admonitions === */\n\n /**\n * @tokens Admonition typography\n */\n\n --admonition-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --admonition-line-height: var(--line-height-base); // @presenter LineHeight\n --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize\n --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing\n --admonition-heading-transform: uppercase;\n\n /**\n * @tokens Admonition spacing\n * @presenter Spacing\n */\n\n --admonition-margin-horizontal: 0;\n --admonition-margin-vertical: calc(var(--spacing-unit) * 2);\n --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);\n --admonition-padding-vertical: calc(var(--spacing-unit) * 4);\n --admonition-icon-size: 25px;\n\n // TODO this is should be changed to --border-radius-lg\n /**\n * @tokens Admonition border\n */\n\n --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --admonition-border-style: var(--border-style);\n --admonition-border-width: var(--border-width);\n\n /**\n * @tokens Admonition type info\n */\n\n --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color\n --admonition-info-heading-text-color: var(--text-color); // @presenter Color\n --admonition-info-text-color: var(--text-color); // @presenter Color\n --admonition-info-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-info-border-color: inherit; // @presenter Color\n --admonition-info-border-style: var(--admonition-border-style);\n --admonition-info-border-width: var(--admonition-border-width);\n --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)\n var(--admonition-info-border-color); // @presenter Border\n --admonition-info-icon: none;\n\n /**\n * @tokens Admonition type attention\n * @presenter Color\n */\n\n --admonition-attention-background-color: var(--color-accent-50); // @presenter Color \n --admonition-attention-text-color: var(--text-color); // @presenter Color\n --admonition-attention-heading-text-color: var(--text-color); // @presenter Color\n --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color\n --admonition-attention-border-color: inherit; // @presenter Color\n --admonition-attention-border-style: var(--admonition-border-style);\n --admonition-attention-border-width: var(--admonition-border-width);\n --admonition-attention-border: var(--admonition-attention-border-width)\n var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border\n --admonition-attention-icon: none;\n\n /**\n * @tokens Admonition type warning\n */\n\n /* warning */\n --admonition-warning-background-color: var(--color-warning-50); // @presenter Color\n --admonition-warning-text-color: var(--text-color); // @presenter Color\n --admonition-warning-heading-text-color: var(--text-color); // @presenter Color\n --admonition-warning-icon-color: var(--color-warning-700); // @presenter Color\n --admonition-warning-border-color: inherit; // @presenter Color\n --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-warning-border: var(--admonition-warning-border-width)\n var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border\n --admonition-warning-icon: none;\n\n /**\n * @tokens Admonition type danger\n */\n\n --admonition-danger-background-color: var(--color-error-50); // @presenter Color\n --admonition-danger-text-color: var(--text-color); // @presenter Color\n --admonition-danger-heading-text-color: var(--text-color); // @presenter Color\n --admonition-danger-icon-color: var(--color-error-800); // @presenter Color\n --admonition-danger-border-color: inherit; // @presenter Color\n --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-danger-border: var(--admonition-danger-border-width)\n var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border\n --admonition-danger-icon: none;\n\n /**\n * @tokens Admonition type success\n */\n\n --admonition-success-background-color: var(--color-success-50); // @presenter Color\n --admonition-success-text-color: var(--text-color); // @presenter Color\n --admonition-success-heading-text-color: var(--text-color); // @presenter Color\n --admonition-success-icon-color: var(--color-success-900); // @presenter Color\n --admonition-success-border-color: inherit; // @presenter Color\n --admonition-success-border-style: var(--admonition-border-style); // @presenter Color\n --admonition-success-border-width: var(--admonition-border-width); // @presenter Color\n --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border\n --admonition-success-icon: none;\n\n // @tokens End\n"])));
18
- var responsePanelColors = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /**\n * @tokens Response Panel Common\n */\n\n --panel-response-heading-padding: 10px 20px;\n --panel-response-heading-font-size: var(--font-size-base);\n --panel-response-heading-line-height: 20px;\n --panel-response-heading-font-weight: var(--font-weight-bold);\n --panel-response-heading-text-color: var(--text-color);\n \n --panel-response-body-text-color: var(--text-color);\n\n /**\n * @tokens Response Panel Success colors\n * @presenter Color\n */\n\n --panel-response-success-border-color: var(--color-success-100);\n --panel-response-success-heading-background-color: var(--color-success-50);\n --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-success-body-background-color: transparent;\n --panel-response-success-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-success-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Error colors\n * @presenter Color\n */\n\n --panel-response-error-border-color: var(--color-error-100);\n --panel-response-error-heading-background-color: var(--color-error-50);\n --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-error-body-background-color: transparent;\n --panel-response-error-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-error-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Redirect colors\n * @presenter Color\n */\n\n --panel-response-redirect-border-color: var(--color-warning-100);\n --panel-response-redirect-heading-background-color: var(--color-warning-50);\n --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-redirect-body-background-color: transparent;\n --panel-response-redirect-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Info colors\n * @presenter Color\n */\n\n --panel-response-info-border-color: var(--color-accent-100);\n --panel-response-info-heading-background-color: var(--color-accent-50);\n --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-info-body-background-color: transparent;\n --panel-response-info-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-info-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Callback colors\n * @presenter Color\n */\n\n --panel-response-callback-border-color: var(--color-secondary-300);\n --panel-response-callback-heading-background-color: var(--color-secondary-300);\n --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-callback-body-background-color: transparent;\n --panel-response-callback-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-callback-body-text-color: var(--panel-response-body-text-color);\n\n // @tokens End\n"], ["\n /**\n * @tokens Response Panel Common\n */\n\n --panel-response-heading-padding: 10px 20px;\n --panel-response-heading-font-size: var(--font-size-base);\n --panel-response-heading-line-height: 20px;\n --panel-response-heading-font-weight: var(--font-weight-bold);\n --panel-response-heading-text-color: var(--text-color);\n \n --panel-response-body-text-color: var(--text-color);\n\n /**\n * @tokens Response Panel Success colors\n * @presenter Color\n */\n\n --panel-response-success-border-color: var(--color-success-100);\n --panel-response-success-heading-background-color: var(--color-success-50);\n --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-success-body-background-color: transparent;\n --panel-response-success-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-success-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Error colors\n * @presenter Color\n */\n\n --panel-response-error-border-color: var(--color-error-100);\n --panel-response-error-heading-background-color: var(--color-error-50);\n --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-error-body-background-color: transparent;\n --panel-response-error-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-error-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Redirect colors\n * @presenter Color\n */\n\n --panel-response-redirect-border-color: var(--color-warning-100);\n --panel-response-redirect-heading-background-color: var(--color-warning-50);\n --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-redirect-body-background-color: transparent;\n --panel-response-redirect-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Info colors\n * @presenter Color\n */\n\n --panel-response-info-border-color: var(--color-accent-100);\n --panel-response-info-heading-background-color: var(--color-accent-50);\n --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-info-body-background-color: transparent;\n --panel-response-info-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-info-body-text-color: var(--panel-response-body-text-color);\n\n /**\n * @tokens Response Panel Callback colors\n * @presenter Color\n */\n\n --panel-response-callback-border-color: var(--color-secondary-300);\n --panel-response-callback-heading-background-color: var(--color-secondary-300);\n --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);\n --panel-response-callback-body-background-color: transparent;\n --panel-response-callback-schema-nested-background-color: var(--color-secondary-200);\n --panel-response-callback-body-text-color: var(--panel-response-body-text-color);\n\n // @tokens End\n"])));
19
- var apiReferencePanels = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n /**\n * @tokens Panels spacing\n * @presenter Spacing\n */\n\n --panel-gap-horizontal: calc(var(--spacing-unit) * 8);\n --panel-gap-vertical: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel common\n */\n\n --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --panel-border: 1px solid var(--border-color); // @presenter Border\n\n --panel-line-height: var(--line-height-base); // @presenter LineHeight\n --panel-font-size: var(--font-size-base); // @presenter FontSize\n --panel-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n /**\n * @tokens Panel heading common\n */\n\n --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-heading-font-size: 18px; // @presenter FontSize\n --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --panel-heading-padding: calc(var(--spacing-unit) * 4);\n --panel-heading-line-height: 1; // @presenter LineHeight\n --panel-heading-whit-space: 'nowrap';\n\n /**\n * @tokens Panel body common\n */\n\n --panel-body-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-body-font-size: var(--font-size-base); // @presenter FontSize\n --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --panel-body-padding: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel schemas common\n */\n\n --panel-schemas-text-color: var(--text-color); // @presenter Color\n --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-schemas-font-weight: var(--panel-font-weight); // @presenter\n --panel-schemas-background-color: var(--background-color); // @presenter Color\n --panel-schemas-border: var(--panel-border); // @presenter Border\n --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Panel schemas body common\n */\n\n --panel-schemas-body-text-color: var(--text-color); // @presenter Color\n --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--background-color); // @presenter Color\n --panel-schemas-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel schemas heading common\n */\n\n --panel-schemas-heading-text-color: var(--text-color); // @presenter Color\n --panel-schemas-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-schemas-heading-font-size: var(--panel-heading-font-size); // @presenter FontSize\n --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight\n --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight\n --panel-schemas-heading-padding: var(--panel-heading-padding);\n --panel-schemas-heading-background-color: var(--background-color); // @presenter Color\n --panel-schemas-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel default, response, callback, security schemas\n */\n\n .panel-request-schemas,\n .panel-response-schemas,\n .panel-callback-schemas,\n .panel-security-schemas,\n .panel-default {\n --panel-text-color: var(--panel-schemas-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-schemas-font-family);\n --panel-font-size-local: var(--panel-schemas-font-size);\n --panel-font-weight-local: var(--panel-schemas-font-weight);\n --panel-background-color: var(--panel-schemas-background-color); // @presenter Color\n --panel-border-local: var(--panel-schemas-border);\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color\n --panel-body-font-family-local: var(--panel-schemas-body-font-family);\n --panel-body-font-size-local: var(--panel-schemas-body-font-size);\n --panel-body-font-weight-local: var(--panel-schemas-body-font-weight);\n --panel-body-padding-local: var(--panel-schemas-body-padding);\n --panel-body-background-color: var(--panel-schemas-body-background-color); // @presenter Color\n --panel-body-border: var(--panel-schemas-body-border); // @presenter Border\n\n --panel-heading-text-color: var(--panel-schemas-heading-text-color); // @presenter Color\n --panel-heading-font-family-local: var(--panel-schemas-heading-font-family);\n --panel-heading-font-size-local: var(--panel-schemas-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);\n --panel-heading-padding-local: var(--panel-schemas-heading-padding);\n --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color\n --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border\n --panel-heading-white-space-local: var(--panel-heading-whit-space);\n }\n\n /**\n * @tokens Panel samples common\n */\n\n --panel-samples-block-background-color: var(--background-color); // @presenter Color\n --panel-samples-width: 50%;\n\n --panel-samples-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight\n --panel-samples-background-color: #52606d; // @presenter Color\n --panel-samples-border: var(--panel-border); // @presenter Border\n --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color\n\n /**\n * @tokens Panel samples body common\n */\n\n --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-samples-body-padding: var(--panel-body-padding);\n --panel-samples-body-background-color: #52606d; // @presenter Color\n --panel-samples-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel samples heading common\n */\n\n --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-samples-heading-line-height: 30px; // @presenter LineHeight\n --panel-samples-heading-padding: 0 20px;\n --panel-samples-heading-background-color: #323f4b; // @presenter Color\n --panel-samples-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel try-it, request-samples, response-samples, callback samples\n */\n\n .panel-try-it,\n .panel-request-samples,\n .panel-response-samples,\n .panel-callback-samples {\n --panel-text-color: var(--panel-samples-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-samples-font-family);\n --panel-font-size-local: var(--panel-samples-font-size);\n --panel-font-weight-local: var(--panel-samples-font-weight);\n --panel-background-color: var(--panel-samples-background-color); // @presenter Color\n --panel-border-local: var(--panel-samples-border);\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color\n --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color\n\n --panel-body-font-family-local: var(--panel-samples-body-font-family);\n --panel-body-font-size-local: var(--panel-samples-body-font-size);\n --panel-body-font-weight-local: var(--panel-samples-body-font-weight);\n --panel-body-padding-local: var(--panel-samples-body-padding);\n --panel-body-border-local: var(--panel-samples-body-border);\n\n --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color\n --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-heading-font-family-local: var(--panel-samples-heading-font-family);\n --panel-heading-font-size-local: var(--panel-samples-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-samples-heading-line-height);\n --panel-heading-padding-local: var(--panel-samples-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n }\n\n /**\n * @tokens Panel response success, info, error, redirect, callback common\n */\n\n .panel-response-success,\n .panel-response-info,\n .panel-response-error,\n .panel-response-redirect,\n .panel-response-callback {\n --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n\n --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color\n --panel-heading-font-size-local: var(--panel-response-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-response-heading-line-height);\n --panel-heading-padding-local: var(--panel-response-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n --panel-heading-white-space-local: normal;\n --panel-body-padding-local: var(--panel-body-padding);\n }\n\n /**\n * @tokens Panel response success colors\n * @presenter Color\n */\n\n .panel-response-success {\n --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-success-body-text-color);\n --panel-body-background-color: var(--panel-response-success-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-success-heading-background-color);\n --panel-heading-text-color: var(--panel-response-success-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response info colors\n * @presenter Color\n */\n\n .panel-response-info {\n --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-info-body-text-color);\n --panel-body-background-color: var(--panel-response-info-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-info-heading-background-color);\n --panel-heading-text-color: var(--panel-response-info-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response error colors\n * @presenter Color\n */\n\n .panel-response-error {\n --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-error-body-text-color);\n --panel-body-background-color: var(--panel-response-error-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-error-heading-background-color);\n --panel-heading-text-color: var(--panel-response-error-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response redirect colors\n * @presenter Color\n */\n\n .panel-response-redirect {\n --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border\n --panel-body-text-color: var(--panel-response-redirect-body-text-color);\n\n --panel-body-background-color: var(--panel-response-redirect-body-background-color);\n --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);\n --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response callback colors\n * @presenter Color\n */\n\n .panel-response-callback {\n --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-callback-body-text-color);\n --panel-body-background-color: var(--panel-response-callback-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-callback-heading-background-color);\n --panel-heading-text-color: var(--panel-response-callback-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel try-it nested common\n * @presenter Color\n */\n\n --panel-try-it-nested-text-color: var(--text-color-inverse);\n --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);\n\n --panel-try-it-nested-body-background-color: #3e4c59;\n --panel-try-it-nested-body-text-color: var(--text-color-inverse);\n --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing\n --panel-try-it-nested-body-border-color: var(--color-secondary-800);\n\n --panel-try-it-nested-heading-text-color: var(--text-color-inverse);\n --panel-try-it-nested-heading-background-color: transparent;\n --panel-try-it-nested-heading-border-color: var(--color-secondary-800);\n\n /**\n * @tokens Panel try-it nested\n * @presenter Color\n */\n\n .panel-try-it-nested {\n --panel-text-color: var(--panel-try-it-nested-text-color);\n --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);\n\n --panel-body-text-color: var(--panel-try-it-nested-body-text-color);\n --panel-body-background-color: var(--panel-try-it-nested-body-background-color);\n --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing\n\n --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);\n --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);\n }\n\n /**\n * @tokens Panel samples tabs\n */\n\n --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n\n --panel-samples-tabs-background-color: transparent; // @presenter Color\n --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color\n --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it tabs\n */\n\n --panel-try-it-tabs-font-size: 12px; // @presenter FontSize\n --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color\n\n --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color\n --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color\n\n --panel-try-it-tabs-border-color: transparent; // @presenter Color\n --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-border-color); // @presenter Color\n --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color\n\n /**\n * @tokens Panel try-it action button\n */\n\n --panel-try-it-action-button-width: auto;\n --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color\n --panel-try-it-action-button-border-color: transparent; // @presenter Color\n\n --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color\n --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color\n\n --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color\n --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color\n\n /**\n * @tokens Panel samples other styles\n */\n\n --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-dropdown-border: unset; // @presenter Border\n\n --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-input-border: unset; // @presenter Border\n\n --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-border: unset; // @presenter Border\n\n // @tokens End\n\n // TODO PUL RIGHT section - related to pull right - fix later\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --layout-right-rail-width: 50%;\n --layout-right-rail-background-color: transparent;\n"], ["\n /**\n * @tokens Panels spacing\n * @presenter Spacing\n */\n\n --panel-gap-horizontal: calc(var(--spacing-unit) * 8);\n --panel-gap-vertical: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel common\n */\n\n --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --panel-border: 1px solid var(--border-color); // @presenter Border\n\n --panel-line-height: var(--line-height-base); // @presenter LineHeight\n --panel-font-size: var(--font-size-base); // @presenter FontSize\n --panel-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n /**\n * @tokens Panel heading common\n */\n\n --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-heading-font-size: 18px; // @presenter FontSize\n --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --panel-heading-padding: calc(var(--spacing-unit) * 4);\n --panel-heading-line-height: 1; // @presenter LineHeight\n --panel-heading-whit-space: 'nowrap';\n\n /**\n * @tokens Panel body common\n */\n\n --panel-body-font-family: var(--font-family-base); // @presenter FontFamily\n --panel-body-font-size: var(--font-size-base); // @presenter FontSize\n --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --panel-body-padding: calc(var(--spacing-unit) * 4);\n\n /**\n * @tokens Panel schemas common\n */\n\n --panel-schemas-text-color: var(--text-color); // @presenter Color\n --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-schemas-font-weight: var(--panel-font-weight); // @presenter\n --panel-schemas-background-color: var(--background-color); // @presenter Color\n --panel-schemas-border: var(--panel-border); // @presenter Border\n --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color\n\n /**\n * @tokens Panel schemas body common\n */\n\n --panel-schemas-body-text-color: var(--text-color); // @presenter Color\n --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);\n --panel-schemas-body-background-color: var(--background-color); // @presenter Color\n --panel-schemas-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel schemas heading common\n */\n\n --panel-schemas-heading-text-color: var(--text-color); // @presenter Color\n --panel-schemas-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-schemas-heading-font-size: var(--panel-heading-font-size); // @presenter FontSize\n --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight\n --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight\n --panel-schemas-heading-padding: var(--panel-heading-padding);\n --panel-schemas-heading-background-color: var(--background-color); // @presenter Color\n --panel-schemas-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel default, response, callback, security schemas\n */\n\n .panel-request-schemas,\n .panel-response-schemas,\n .panel-callback-schemas,\n .panel-security-schemas,\n .panel-default {\n --panel-text-color: var(--panel-schemas-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-schemas-font-family);\n --panel-font-size-local: var(--panel-schemas-font-size);\n --panel-font-weight-local: var(--panel-schemas-font-weight);\n --panel-background-color: var(--panel-schemas-background-color); // @presenter Color\n --panel-border-local: var(--panel-schemas-border);\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n --panel-chevron-icon-color: var(--panel-schemas-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-schemas-body-text-color); // @presenter Color\n --panel-body-font-family-local: var(--panel-schemas-body-font-family);\n --panel-body-font-size-local: var(--panel-schemas-body-font-size);\n --panel-body-font-weight-local: var(--panel-schemas-body-font-weight);\n --panel-body-padding-local: var(--panel-schemas-body-padding);\n --panel-body-background-color: var(--panel-schemas-body-background-color); // @presenter Color\n --panel-body-border: var(--panel-schemas-body-border); // @presenter Border\n\n --panel-heading-text-color: var(--panel-schemas-heading-text-color); // @presenter Color\n --panel-heading-font-family-local: var(--panel-schemas-heading-font-family);\n --panel-heading-font-size-local: var(--panel-schemas-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);\n --panel-heading-padding-local: var(--panel-schemas-heading-padding);\n --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color\n --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border\n --panel-heading-white-space-local: var(--panel-heading-whit-space);\n }\n\n /**\n * @tokens Panel samples common\n */\n\n --panel-samples-block-background-color: var(--background-color); // @presenter Color\n --panel-samples-width: 50%;\n\n --panel-samples-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight\n --panel-samples-background-color: #52606d; // @presenter Color\n --panel-samples-border: var(--panel-border); // @presenter Border\n --panel-samples-chevron-icon-color: var(--text-color-inverse); // @presenter Color\n\n /**\n * @tokens Panel samples body common\n */\n\n --panel-samples-body-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily\n --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize\n --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight\n --panel-samples-body-padding: var(--panel-body-padding);\n --panel-samples-body-background-color: #52606d; // @presenter Color\n --panel-samples-body-border: unset; // @presenter Border\n\n /**\n * @tokens Panel samples heading common\n */\n\n --panel-samples-heading-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily\n --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-samples-heading-line-height: 30px; // @presenter LineHeight\n --panel-samples-heading-padding: 0 20px;\n --panel-samples-heading-background-color: #323f4b; // @presenter Color\n --panel-samples-heading-border: unset; // @presenter Border\n\n /**\n * @tokens Panel try-it, request-samples, response-samples, callback samples\n */\n\n .panel-try-it,\n .panel-request-samples,\n .panel-response-samples,\n .panel-callback-samples {\n --panel-text-color: var(--panel-samples-text-color); // @presenter Color\n --panel-font-family-local: var(--panel-samples-font-family);\n --panel-font-size-local: var(--panel-samples-font-size);\n --panel-font-weight-local: var(--panel-samples-font-weight);\n --panel-background-color: var(--panel-samples-background-color); // @presenter Color\n --panel-border-local: var(--panel-samples-border);\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color\n\n --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color\n --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color\n\n --panel-body-font-family-local: var(--panel-samples-body-font-family);\n --panel-body-font-size-local: var(--panel-samples-body-font-size);\n --panel-body-font-weight-local: var(--panel-samples-body-font-weight);\n --panel-body-padding-local: var(--panel-samples-body-padding);\n --panel-body-border-local: var(--panel-samples-body-border);\n\n --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color\n --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-heading-font-family-local: var(--panel-samples-heading-font-family);\n --panel-heading-font-size-local: var(--panel-samples-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-samples-heading-line-height);\n --panel-heading-padding-local: var(--panel-samples-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n }\n\n /**\n * @tokens Panel response success, info, error, redirect, callback common\n */\n\n .panel-response-success,\n .panel-response-info,\n .panel-response-error,\n .panel-response-redirect,\n .panel-response-callback {\n --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color\n --panel-border-radius-local: calc(1px + var(--panel-border-radius));\n\n --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color\n --panel-heading-font-size-local: var(--panel-response-heading-font-size);\n --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);\n --panel-heading-line-height-local: var(--panel-response-heading-line-height);\n --panel-heading-padding-local: var(--panel-response-heading-padding);\n\n --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border\n --panel-heading-white-space-local: normal;\n --panel-body-padding-local: var(--panel-body-padding);\n }\n\n /**\n * @tokens Panel response success colors\n * @presenter Color\n */\n\n .panel-response-success {\n --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-success-body-text-color);\n --panel-body-background-color: var(--panel-response-success-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-success-heading-background-color);\n --panel-heading-text-color: var(--panel-response-success-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response info colors\n * @presenter Color\n */\n\n .panel-response-info {\n --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-info-body-text-color);\n --panel-body-background-color: var(--panel-response-info-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-info-heading-background-color);\n --panel-heading-text-color: var(--panel-response-info-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response error colors\n * @presenter Color\n */\n\n .panel-response-error {\n --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-error-body-text-color);\n --panel-body-background-color: var(--panel-response-error-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-error-heading-background-color);\n --panel-heading-text-color: var(--panel-response-error-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response redirect colors\n * @presenter Color\n */\n\n .panel-response-redirect {\n --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border\n --panel-body-text-color: var(--panel-response-redirect-body-text-color);\n\n --panel-body-background-color: var(--panel-response-redirect-body-background-color);\n --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);\n --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel response callback colors\n * @presenter Color\n */\n\n .panel-response-callback {\n --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border\n\n --panel-body-text-color: var(--panel-response-callback-body-text-color);\n --panel-body-background-color: var(--panel-response-callback-body-background-color);\n\n --panel-heading-background-color: var(--panel-response-callback-heading-background-color);\n --panel-heading-text-color: var(--panel-response-callback-heading-text-color);\n\n --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);\n }\n\n /**\n * @tokens Panel try-it nested common\n * @presenter Color\n */\n\n --panel-try-it-nested-text-color: var(--text-color-inverse);\n --panel-try-it-nested-chevron-icon-color: var(--text-color-inverse);\n\n --panel-try-it-nested-body-background-color: #3e4c59;\n --panel-try-it-nested-body-text-color: var(--text-color-inverse);\n --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing\n --panel-try-it-nested-body-border-color: var(--color-secondary-800);\n\n --panel-try-it-nested-heading-text-color: var(--text-color-inverse);\n --panel-try-it-nested-heading-background-color: transparent;\n --panel-try-it-nested-heading-border-color: var(--color-secondary-800);\n\n /**\n * @tokens Panel try-it nested\n * @presenter Color\n */\n\n .panel-try-it-nested {\n --panel-text-color: var(--panel-try-it-nested-text-color);\n --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);\n\n --panel-body-text-color: var(--panel-try-it-nested-body-text-color);\n --panel-body-background-color: var(--panel-try-it-nested-body-background-color);\n --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing\n\n --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);\n --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);\n }\n\n /**\n * @tokens Panel samples tabs\n */\n\n --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-samples-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n\n --panel-samples-tabs-background-color: transparent; // @presenter Color\n --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color\n --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color\n --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n\n --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it tabs\n */\n\n --panel-try-it-tabs-font-size: 12px; // @presenter FontSize\n --panel-try-it-tabs-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color\n\n --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color\n --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color\n\n --panel-try-it-tabs-border-color: transparent; // @presenter Color\n --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-border-color); // @presenter Color\n --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color\n --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color\n\n /**\n * @tokens Panel try-it action button\n */\n\n --panel-try-it-action-button-width: auto;\n --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily\n --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight\n --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize\n --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color\n --panel-try-it-action-button-border-color: transparent; // @presenter Color\n\n --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color\n --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color\n --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color\n\n --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color\n --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color\n\n /**\n * @tokens Panel samples other styles\n */\n\n --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color\n --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color\n\n --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-samples-dropdown-border: unset; // @presenter Border\n\n --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n\n /**\n * @tokens Panel try-it other styles\n */\n\n --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-input-border: unset; // @presenter Border\n\n --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color\n --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color\n --panel-try-it-border: unset; // @presenter Border\n\n // @tokens End\n\n // TODO PUL RIGHT section - related to pull right - fix later\n\n --samples-panel-markdown-background-color: #3c4c5a;\n --samples-panel-markdown-border-color: #46596a;\n\n --layout-right-rail-width: 50%;\n --layout-right-rail-background-color: transparent;\n"])));
20
- var tooltip = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-text-color: var(--color-secondary-200);\n --tooltip-background-color: var(--color-emphasis-600);\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n\n --copy-button-tooltip-text-color: #000;\n --copy-button-tooltip-background-color: var(--background-color);\n\n .tooltip-copy-button {\n --tooltip-text-color: var(--copy-button-tooltip-text-color);\n --tooltip-background-color: var(--copy-button-tooltip-background-color);\n }\n\n // @tokens End\n"], ["\n /**\n * @tokens Tooltip Base\n * @presenter Color\n */\n --tooltip-text-color: var(--color-secondary-200);\n --tooltip-background-color: var(--color-emphasis-600);\n\n /**\n * @tokens Tooltip Copy Button\n * @presenter Color\n */\n\n --copy-button-tooltip-text-color: #000;\n --copy-button-tooltip-background-color: var(--background-color);\n\n .tooltip-copy-button {\n --tooltip-text-color: var(--copy-button-tooltip-text-color);\n --tooltip-background-color: var(--copy-button-tooltip-background-color);\n }\n\n // @tokens End\n"])));
21
- var code = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n --code-word-break: break-word;\n\n /**\n * @tokens Inline Code\n */\n --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n --inline-code-text-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--colors-translucent); // @presenter Color\n --inline-code-border-color: var(--border-color); // @presenter Color\n --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block\n */\n --code-block-font-size: var(--code-font-size); // @presenter FontSize\n --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n --code-block-text-color: #fff; // @presenter Color\n --code-block-background-color: #323f4b; // @presenter Color\n --code-block-border-color: var(--border-color); // @presenter Color\n --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n\n /**\n * @tokens Code Block controls\n */\n\n --code-block-controls-text-color: #fff; // @presenter Color\n --code-block-controls-hover-text-color: #fff; // @presenter Color\n --code-block-controls-background-color: transparent; // @presenter Color\n --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color\n --code-block-controls-opacity: 0.5;\n --code-block-controls-active-opacity: 1;\n --code-block-controls-padding: 0 5px; // @presenter Spacing\n --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize\n --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily\n --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block tokens\n */\n --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color\n --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n --code-block-tokens-string-color: #fee39e; // @presenter Color\n --code-block-tokens-property-string-color: #9efaa7; // @presenter Color\n --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-link-color: #4ed2ba; // @presenter Color\n --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n --code-block-tokens-deleted-color: red; // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Code base styles\n */\n --code-font-size: 13px; // @presenter FontSize\n --code-font-family: var(--font-family-monospaced); // @presenter FontFamily\n --code-font-weight: 400; // @presenter FontWeight\n --code-wrap: pre;\n --code-word-break: break-word;\n\n /**\n * @tokens Inline Code\n */\n --inline-code-font-size: var(--code-font-size); // @presenter FontSize\n --inline-code-font-family: var(--code-font-family); // @presenter FontFamily\n --inline-code-text-color: #e53935; // @presenter Color\n --inline-code-background-color: var(--colors-translucent); // @presenter Color\n --inline-code-border-color: var(--border-color); // @presenter Color\n --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block\n */\n --code-block-font-size: var(--code-font-size); // @presenter FontSize\n --code-block-font-family: var(--code-font-family); // @presenter FontFamily\n --code-block-text-color: #fff; // @presenter Color\n --code-block-background-color: #323f4b; // @presenter Color\n --code-block-border-color: var(--border-color); // @presenter Color\n --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --code-block-max-height: 600px;\n --code-block-word-break: initial;\n\n /**\n * @tokens Code Block controls\n */\n\n --code-block-controls-text-color: #fff; // @presenter Color\n --code-block-controls-hover-text-color: #fff; // @presenter Color\n --code-block-controls-background-color: transparent; // @presenter Color\n --code-block-controls-hover-background-color: rgba(255, 255, 255, 0.15); // @presenter Color\n --code-block-controls-opacity: 0.5;\n --code-block-controls-active-opacity: 1;\n --code-block-controls-padding: 0 5px; // @presenter Spacing\n --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize\n --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily\n --code-block-controls-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Code Block tokens\n */\n --code-block-tokens-default-color: var(--text-color-inverse); // @presenter Color\n --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color\n --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color\n --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color\n --code-block-tokens-boolean-color: var(--color-error-500); // @presenter Color\n --code-block-tokens-string-color: #fee39e; // @presenter Color\n --code-block-tokens-property-string-color: #9efaa7; // @presenter Color\n --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color\n --code-block-tokens-link-color: #4ed2ba; // @presenter Color\n --code-block-tokens-operator-color: #f5b83d; // @presenter Color\n --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color\n --code-block-tokens-keyword-color: #ffdbf4; // @presenter Color\n --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color\n --code-block-tokens-regex-color: #e90; // @presenter Color\n --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color\n --code-block-tokens-deleted-color: red; // @presenter Color\n\n // @tokens End\n"])));
22
- var links = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n /**\n * @tokens Links\n */\n --link-text-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --link-hover-text-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n --link-active-decoration: none;\n --link-active-text-color: var(--color-primary-500); // @presenter Color\n\n --link-visited-text-color: var(--color-primary-500); // @presenter Color\n --link-visited-decoration: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Links\n */\n --link-text-color: var(--color-primary-500); // @presenter Color\n --link-decoration: none;\n --link-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --link-hover-text-color: var(--color-primary-100); // @presenter Color\n --link-hover-decoration: underline;\n\n --link-active-decoration: none;\n --link-active-text-color: var(--color-primary-500); // @presenter Color\n\n --link-visited-text-color: var(--color-primary-500); // @presenter Color\n --link-visited-decoration: none;\n\n // @tokens End\n"])));
23
- var apiReferenceDocs = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 1em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n --schema-property-deep-link-icon: none;\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-background-color: var(--color-primary-500); // @presenter Color\n --fab-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-hover-background: var(--color-primary-500); // @presenter Color\n --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-active-background: var(--color-primary-500); // @presenter Color\n --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-icon: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\");\n\n // @tokens End\n"], ["\n /* === ref docs and graphql docs specific === */\n\n /**\n * @tokens API Reference Schemas Layout\n */\n\n --layout-controls-top-offset: 20px; // @presenter Spacing\n --layout-controls-height: 36px; // @presenter Spacing\n --layout-controls-width: 36px; // @presenter Spacing\n\n --layout-stacked-small-max-width: 90%;\n --layout-stacked-medium-max-width: 75%;\n --layout-stacked-large-max-width: 1200px;\n\n --layout-three-panel-small-max-width: 100%;\n --layout-three-panel-medium-max-width: 100%;\n --layout-three-panel-large-max-width: 1800px;\n\n --layout-panel-schemas-small-max-width: none;\n --layout-panel-schemas-medium-max-width: none;\n --layout-panel-schemas-large-max-width: none;\n\n /**\n * @tokens API Reference Schemas MimeType Dropdown\n */\n\n --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;\n --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border\n --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Discriminator Dropdown\n */\n\n --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;\n --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border\n --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize\n --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color\n\n /**\n * @tokens API Reference Schemas Titles\n */\n\n --schema-type-title-text-color: var(--text-color-secondary); // @presenter Color\n --schema-type-text-color: var(--text-color-secondary); // @presenter Color\n --schema-labels-font-size: 1em; // @presenter FontSize\n\n /**\n * @tokens API Reference Schemas Lines Color\n */\n\n --schemas-lines-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens API Reference Schema Inline code typography\n */\n\n --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily\n --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize\n --schema-inline-code-text-color: var(--text-color); // @presenter Color\n --schema-inline-background-color: var(--colors-translucent); // @presenter Color\n --schema-inline-border-color: var(--border-color); // @presenter Color\n --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border\n\n /**\n * @tokens API Reference Schema Example Label colors\n * @presenter Color\n */\n\n --schema-example-text-color: var(--schema-inline-code-text-color);\n --schema-example-background-color: var(--schema-inline-background-color);\n --schema-example-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Constraint Label colors\n * @presenter Color\n */\n\n --schema-constraint-text-color: var(--schema-inline-code-text-color);\n --schema-constraint-background-color: var(--schema-inline-background-color);\n --schema-constraint-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Enum Label colors\n * @presenter Color\n */\n\n --schema-enum-text-color: var(--schema-inline-code-text-color);\n --schema-enum-background-color: var(--schema-inline-background-color);\n --schema-enum-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Default Label colors\n * @presenter Color\n */\n\n --schema-default-text-color: var(--schema-inline-code-text-color);\n --schema-default-background-color: var(--schema-inline-background-color);\n --schema-default-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens API Reference Schema Recursive Label colors\n * @presenter Color\n */\n\n --schema-recursive-text-color: var(--color-warning-600);\n --schema-recursive-background-color: var(--schema-inline-background-color);\n --schema-recursive-border-color: var(--schema-inline-border-color);\n\n /**\n * @tokens GraphQL Docs Reference Schema Non null label\n * @presenter Color\n */\n\n --schema-non-null-text-color: var(--schema-inline-code-text-color);\n --schema-non-null-background-color: var(--schema-inline-background-color);\n --schema-non-null-border-color: var(--schema-inline-border-color);\n /**\n * @tokens API Reference Schema Nested styles\n */\n\n --schema-nested-offset: 1em; // @presenter Spacing\n --schema-nested-background-color: var(--colors-translucent); // @presenter Color\n\n /**\n * @tokens API Reference Schema Buttons\n */\n\n --schema-buttons-font-family: var(--code-font-family); // @presenter FontFamily\n --schema-buttons-font-weight: var(--code-font-weight); // @presenter FontWeight\n --schema-buttons-font-size: var(--code-font-size); // @presenter FontSize\n\n --schema-buttons-text-color: var(--color-emphasis-700); // @presenter Color\n --schema-buttons-background-color: transparent; // @presenter Color\n --schema-buttons-border-color: var(--color-secondary-500); // @presenter Color\n\n --schema-buttons-hover-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-active-background-color: var(--color-secondary-400); // @presenter Color\n\n --schema-buttons-selected-text-color: var(--schema-buttons-text-color); // @presenter Color\n --schema-buttons-selected-background-color: var(--color-secondary-300); // @presenter Color\n --schema-buttons-selected-border-color: var(--schema-buttons-border-color); // @presenter Color\n --schema-buttons-selected-hover-background-color: var(--color-secondary-400); // @presenter Color\n --schema-buttons-selected-active-background-color: var(--color-secondary-400); // @presenter Color\n\n /**\n * @tokens API Reference Schema Properties\n */\n\n --schemas-property-name-text-color: var(--text-color); //@presenter Color\n --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize\n --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily\n\n --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color\n\n --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize\n --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color\n --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color\n --schema-property-access-label-text-color: var(--text-color-secondary); // @presenter Color\n\n --schema-property-details-width: 70%;\n\n /**\n * @tokens API Reference Schema Icons\n */\n\n --schema-chevron-color: var(--text-color); // @presenter Color\n --schema-chevron-size: 9px;\n\n --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color\n --schema-property-deep-link-icon: none;\n\n /*\n * @tokens API Reference Other\n */\n\n --loading-spinner-color: var(--color-primary-500); // @presenter Color\n --linear-progress-color: var(--color-accent-500); // @presenter Color\n --linear-progress-background-color: var(--color-accent-100); // @presenter Color\n\n --fab-background-color: var(--color-primary-500); // @presenter Color\n --fab-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-hover-background: var(--color-primary-500); // @presenter Color\n --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-active-background: var(--color-primary-500); // @presenter Color\n --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow\n\n --fab-icon: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\");\n\n // @tokens End\n"])));
24
- var badges = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /**\n * @tokens Default Badge\n */\n --badge-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --badge-border-color: var(--color-primary-700); // @presenter Color\n --badge-border: 1px solid var(--badge-border-color); // @presenter Border\n --badge-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Deprecated Badge\n */\n\n --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color\n --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color\n --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border\n --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Http Badge\n */\n\n --badge-http-font-size: 12px; // @presenter FontSize\n --badge-http-line-height: 20px; // @presenter LineHeight\n --badge-http-text-color: var(--badge-text-color); // @presenter Color\n --badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item badge http\n */\n\n --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color\n --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize\n --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight\n --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n\n // @tokens End\n"], ["\n /**\n * @tokens Default Badge\n */\n --badge-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-background-color: var(--color-primary-500); // @presenter Color\n --badge-border-color: var(--color-primary-700); // @presenter Color\n --badge-border: 1px solid var(--badge-border-color); // @presenter Border\n --badge-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Deprecated Badge\n */\n\n --badge-deprecated-text-color: var(--color-emphasis-50); // @presenter Color\n --badge-deprecated-background-color: var(--color-warning-500); // @presenter Color\n --badge-deprecated-border-color: var(--color-warning-700); // @presenter Color\n --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border\n --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius\n\n /**\n * @tokens Http Badge\n */\n\n --badge-http-font-size: 12px; // @presenter FontSize\n --badge-http-line-height: 20px; // @presenter LineHeight\n --badge-http-text-color: var(--badge-text-color); // @presenter Color\n --badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --badge-http-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --badge-http-border-radius: calc(var(--border-radius-lg) * 2); // @presenter BorderRadius\n\n /**\n * @tokens Sidebar item badge http\n */\n\n --sidebar-item-badge-http-text-color: var(--badge-text-color); // @presenter Color\n --sidebar-item-badge-http-font-family: var(--code-font-family); // @presenter FontFamily\n --sidebar-item-badge-http-font-size: 8px; // @presenter FontSize\n --sidebar-item-badge-http-font-weight: normal; //@presenter FontWeight\n --sidebar-item-badge-http-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n\n // @tokens End\n"])));
25
- var footer = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n --footer-padding-vertical: 2em; // @presenter Spacing\n --footer-padding-horizontal: 20px; // @presenter Spacing\n\n --footer-font-family: var(--font-family-base); // @presenter FontFamily\n --footer-font-size: 1rem; // @presenter FontSize\n --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --footer-title-text-color: var(--footer-text-color); // @presenter Color\n --footer-title-font-size: 24px; // @presenter FontSize\n --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --footer-title-margin-vertical: 1.5em;\n\n --footer-link-text-color: var(--footer-text-color); // @presenter Color\n --footer-link-hover-color: var(--footer-text-color); // @presenter Color\n\n --footer-item-padding-vertical: 0.5em; // @presenter Spacingv\n --footer-item-padding-horizontal: 0;\n\n --footer-column-width: 20%; // @presenter Spacing\n --footer-column-margin-vertical: 20px; // @presenter Spacing\n --footer-column-margin-horizontal: 0; // @presenter Spacing\n\n --footer-container-max-width: 1200px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Footer\n */\n --footer-background-color: var(--color-primary-500); // @presenter Color\n --footer-text-color: #fff; // @presenter Color\n\n --footer-padding-vertical: 2em; // @presenter Spacing\n --footer-padding-horizontal: 20px; // @presenter Spacing\n\n --footer-font-family: var(--font-family-base); // @presenter FontFamily\n --footer-font-size: 1rem; // @presenter FontSize\n --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight\n\n --footer-title-text-color: var(--footer-text-color); // @presenter Color\n --footer-title-font-size: 24px; // @presenter FontSize\n --footer-title-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --footer-title-margin-vertical: 1.5em;\n\n --footer-link-text-color: var(--footer-text-color); // @presenter Color\n --footer-link-hover-color: var(--footer-text-color); // @presenter Color\n\n --footer-item-padding-vertical: 0.5em; // @presenter Spacingv\n --footer-item-padding-horizontal: 0;\n\n --footer-column-width: 20%; // @presenter Spacing\n --footer-column-margin-vertical: 20px; // @presenter Spacing\n --footer-column-margin-horizontal: 0; // @presenter Spacing\n\n --footer-container-max-width: 1200px; // @presenter Spacing\n\n // @tokens End\n"])));
26
- var logo = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n /**\n * @tokens Logo\n */\n\n --navbar-logo-height: 2rem; // @presenter Spacing\n --navbar-logo-width: auto;\n --navbar-logo-margin: 16px; // @presenter Spacing\n --navbar-logo-max-width: 285px; // @presenter Spacing\n --navbar-logo-max-height: 285px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Logo\n */\n\n --navbar-logo-height: 2rem; // @presenter Spacing\n --navbar-logo-width: auto;\n --navbar-logo-margin: 16px; // @presenter Spacing\n --navbar-logo-max-width: 285px; // @presenter Spacing\n --navbar-logo-max-height: 285px; // @presenter Spacing\n\n // @tokens End\n"])));
27
- var navbar = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 100%;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"], ["\n /**\n * @tokens Navbar\n */\n --navbar-height: 60px; // @presenter Spacing\n --navbar-text-color: #fff; // @presenter Color\n --navbar-background-color: var(--color-primary-500); // @presenter Color\n --navbar-container-max-width: 100%;\n\n /**\n * @tokens Navbar Item\n * */\n --navbar-item-font-family: var(--font-family-base); // @presenter FontFamily\n --navbar-item-font-size: 16px; // @presenter FontSize\n --navbar-item-padding-horizontal: 16px; // @presenter Spacing\n --navbar-item-paddin-vertical: 8px; // @presenter Spacing\n --navbar-item-margin-horizontal: 7px;\n --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius\n --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight\n --navbar-item-hover-background-color: var(--color-primary-300);\n --navbar-item-active-background-color: var(--color-primary-300); // @presenter Color\n --navbar-item-hover-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-hover-text-decoration: none;\n --navbar-item-active-text-color: var(--navbar-text-color); // @presenter Color\n --navbar-item-active-text-decoration: none;\n --navbar-item-separator-line-color: var(--border-color); // @presenter Color\n\n /**\n * @tokens Navbar dropdown\n * */\n\n --navbar-dropdown-shadow: 4px 4px 15px -2px rgba(0, 0, 0, 0.5); //should be variable\n --navbar-dropdown-background: var(--navbar-item-active-background-color);\n --navbar-dropdown-border: none;\n\n // @tokens End\n"])));
28
- var toc = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n /**\n * @tokens TOC\n * */\n\n --toc-width: 240px;\n --toc-background-color: transparent;\n --toc-border-color: var(--border-color);\n\n --toc-spacing-unit: 8px;\n --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n /**\n * @tokens TOC item typography\n */\n --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens TOC item\n */\n\n --toc-item-text-color: var(--text-color); // @presenter Color\n --toc-item-active-text-color: var(--text-color); // @presenter Color\n --toc-item-background-color: transparent; // @presenter Color\n --toc-item-active-background-color: var(--border-color); // @presenter Color\n --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n /**\n * @tokens TOC header\n */\n\n --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-heading-font-weight: bold; // @presenter FontWeight\n --toc-heading-text-color: var(--text-color); // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens TOC\n * */\n\n --toc-width: 240px;\n --toc-background-color: transparent;\n --toc-border-color: var(--border-color);\n\n --toc-spacing-unit: 8px;\n --toc-offset-top: calc(var(--toc-spacing-unit) * 2);\n\n /**\n * @tokens TOC item typography\n */\n --toc-item-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-item-font-size: var(--font-size-base); // @presenter FontSize\n\n /**\n * @tokens TOC item\n */\n\n --toc-item-text-color: var(--text-color); // @presenter Color\n --toc-item-active-text-color: var(--text-color); // @presenter Color\n --toc-item-background-color: transparent; // @presenter Color\n --toc-item-active-background-color: var(--border-color); // @presenter Color\n --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing\n --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing\n\n /**\n * @tokens TOC header\n */\n\n --toc-heading-font-size: var(--font-size-base); // @presenter FontSize\n --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily\n --toc-heading-font-weight: bold; // @presenter FontWeight\n --toc-heading-text-color: var(--text-color); // @presenter Color\n\n // @tokens End\n"])));
29
- var loadProgressBar = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\n /**\n * @tokens Load progress bar\n */\n\n --load-progress-bar-color: var(--color-secondary-500); // @presenter Color\n --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n --load-progress-bar-height: 2px; // @presenter Height\n\n // @tokens End\n \n /* Make clicks pass-through */\n #nprogress {\n pointer-events: none;\n }\n\n #nprogress .bar {\n background: var(--load-progress-bar-color);\n\n position: fixed;\n z-index: 1031;\n top: 0;\n left: 0;\n\n width: 100%;\n height: var(--load-progress-bar-height);\n }\n\n #nprogress .peg {\n display: block;\n position: absolute;\n right: 0px;\n width: 100px;\n height: 100%;\n box-shadow: var(--load-progress-bar-shadow);\n opacity: 1.0;\n\n -webkit-transform: rotate(3deg) translate(0px, -4px);\n -ms-transform: rotate(3deg) translate(0px, -4px);\n transform: rotate(3deg) translate(0px, -4px);\n }\n\n .nprogress-custom-parent {\n overflow: hidden;\n position: relative;\n }\n\n .nprogress-custom-parent #nprogress .bar {\n position: absolute;\n }\n"], ["\n\n /**\n * @tokens Load progress bar\n */\n\n --load-progress-bar-color: var(--color-secondary-500); // @presenter Color\n --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow\n --load-progress-bar-height: 2px; // @presenter Height\n\n // @tokens End\n \n /* Make clicks pass-through */\n #nprogress {\n pointer-events: none;\n }\n\n #nprogress .bar {\n background: var(--load-progress-bar-color);\n\n position: fixed;\n z-index: 1031;\n top: 0;\n left: 0;\n\n width: 100%;\n height: var(--load-progress-bar-height);\n }\n\n #nprogress .peg {\n display: block;\n position: absolute;\n right: 0px;\n width: 100px;\n height: 100%;\n box-shadow: var(--load-progress-bar-shadow);\n opacity: 1.0;\n\n -webkit-transform: rotate(3deg) translate(0px, -4px);\n -ms-transform: rotate(3deg) translate(0px, -4px);\n transform: rotate(3deg) translate(0px, -4px);\n }\n\n .nprogress-custom-parent {\n overflow: hidden;\n position: relative;\n }\n\n .nprogress-custom-parent #nprogress .bar {\n position: absolute;\n }\n"])));
30
- var inputs = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n /**\n * @tokens Inputs\n */\n --input-text-color: var(--text-color-inverse); // @presenter Color\n --input-border: none; // @presenter Border\n --input-border-radius: var(--border-radius); // @presenter BorderRadius\n --input-font-size: var(--font-size-base); // @presenter FontSize\n --input-font-family: var(--code-font-family); // @presenter FontFamily\n --input-line-height: 1.15em; // @presenter LineHeight\n --input-padding: 8px;\n\n --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n --input-hover-border: none; // @presenter Border\n --input-focus-border: none; // @presenter Border\n --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n // @tokens End\n"], ["\n /**\n * @tokens Inputs\n */\n --input-text-color: var(--text-color-inverse); // @presenter Color\n --input-border: none; // @presenter Border\n --input-border-radius: var(--border-radius); // @presenter BorderRadius\n --input-font-size: var(--font-size-base); // @presenter FontSize\n --input-font-family: var(--code-font-family); // @presenter FontFamily\n --input-line-height: 1.15em; // @presenter LineHeight\n --input-padding: 8px;\n\n --input-hover-text-color: var(--text-color-inverse); // @presenter Color\n --input-hover-border: none; // @presenter Border\n --input-focus-border: none; // @presenter Border\n --input-focus-text-color: var(--text-color-inverse); // @presenter Color\n --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color\n\n // @tokens End\n"])));
31
- var markdown = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n /**\n * @tokens Markdown Container\n */\n\n --md-container-max-width: 910px;\n --md-container-padding-vertical: 25px; // @presenter Spacing\n --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Blockquote\n */\n\n --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n --md-blockquote-padding-vertical: 0; // @presenter Spacing\n --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --md-blockquote-border-color: var(--border-color); // @presenter Color\n --md-blockquote-background-color: transparent; // @presenter Color\n --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n --md-blockquote-text-color: var(--text-color); // @presenter Color\n --md-blockquote-box-shadow: none; // @presenter Shadow\n\n /** \n * @tokens Markdown Paragraph\n */\n\n --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Table\n */\n\n --md-table-font-size: 14px; // @presenter FontSize\n --md-table-margin-vertical: 20px; // @presenter Spacing\n --md-table-background-color: transparent; // @presenter Color\n\n --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --md-table-border-width: 1px;\n --md-table-border-color: var(--border-color); // @presenter Color\n\n --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n --md-table-cell-text-color: var(--text-color); // @presenter Color\n --md-table-cell-padding: 12px; // @presenter Spacing\n\n --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n --md-table-head-text-color: var(--text-color); // @presenter Color\n --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Markdown Horizontal Rule\n */\n\n --md-hr-background-color: transparent; // @presenter Color\n --md-hr-border-color: var(--border-color); // @presenter Color\n --md-hr-height: unset;\n --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n /** \n * @tokens Markdown List\n */\n\n --md-list-left-padding: 2rem; // @presenter Spacing\n --md-list-margin: 1rem; // @presenter Spacing\n --md-list-item-margin: 0.25rem; // @presenter Spacing\n --md-list-item-style: inherit;\n\n /** \n * @tokens Markdown Numbered List\n */\n\n --md-numbered-list-number-display: none;\n --md-numbered-list-item-style: var(--md-list-item-style);\n --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n // @tokens End\n"], ["\n /**\n * @tokens Markdown Container\n */\n\n --md-container-max-width: 910px;\n --md-container-padding-vertical: 25px; // @presenter Spacing\n --md-container-padding-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Blockquote\n */\n\n --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing\n --md-blockquote-margin-horizontal: 0; // @presenter Spacing\n --md-blockquote-padding-vertical: 0; // @presenter Spacing\n --md-blockquote-padding-horizontal: calc(var(--spacing-unit) * 4); // @presenter Spacing\n --md-blockquote-border-color: var(--border-color); // @presenter Color\n --md-blockquote-background-color: transparent; // @presenter Color\n --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border\n --md-blockquote-text-color: var(--text-color); // @presenter Color\n --md-blockquote-box-shadow: none; // @presenter Shadow\n\n /** \n * @tokens Markdown Paragraph\n */\n\n --md-paragraph-margin-vertical: 10px; // @presenter Spacing\n --md-paragraph-margin-horizontal: 0px; // @presenter Spacing\n\n /**\n * @tokens Markdown Table\n */\n\n --md-table-font-size: 14px; // @presenter FontSize\n --md-table-margin-vertical: 20px; // @presenter Spacing\n --md-table-background-color: transparent; // @presenter Color\n\n --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius\n --md-table-border-width: 1px;\n --md-table-border-color: var(--border-color); // @presenter Color\n\n --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color\n\n --md-table-cell-text-color: var(--text-color); // @presenter Color\n --md-table-cell-padding: 12px; // @presenter Spacing\n\n --md-table-head-background-color: var(--color-secondary-200); // @presenter Color\n --md-table-head-text-color: var(--text-color); // @presenter Color\n --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n /**\n * @tokens Markdown Horizontal Rule\n */\n\n --md-hr-background-color: transparent; // @presenter Color\n --md-hr-border-color: var(--border-color); // @presenter Color\n --md-hr-height: unset;\n --md-hr-margin-vertical: 20px; // @presenter Spacing\n\n /** \n * @tokens Markdown List\n */\n\n --md-list-left-padding: 2rem; // @presenter Spacing\n --md-list-margin: 1rem; // @presenter Spacing\n --md-list-item-margin: 0.25rem; // @presenter Spacing\n --md-list-item-style: inherit;\n\n /** \n * @tokens Markdown Numbered List\n */\n\n --md-numbered-list-number-display: none;\n --md-numbered-list-item-style: var(--md-list-item-style);\n --md-numbered-list-number-text-color: var(--color-secondary-100); // @presenter Color\n --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize\n --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily\n --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight\n --md-numbered-list-number-background-color: var(--color-secondary-800); // @presenter Color\n --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius\n --md-numbered-list-number-margin-right: 5px; // @presenter Spacing\n --md-numbered-list-number-padding: 0 5px; // @presenter Spacing\n\n // @tokens End\n"])));
32
- var search = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n /**\n * @tokens Search\n */\n\n --search-highlight-text-color: #ffff03; // @presenter Color\n\n /**\n * @tokens Portal Search\n */\n\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n\n --search-input-border: none;\n --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n\n --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-hover-border: none; // @presenter Color\n --search-input-placeholder-color: var(--search-input-text-color);\n\n --search-popover-background-color: var(--background-color); // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n 0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n --search-popover-border: none;\n\n --search-item-padding: 8px 24px;\n --search-item-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-title-text-color: var(--text-color); // @presenter Color\n --search-item-background-color: transparent; // @presenter Color\n --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-active-title-text-color: var(--text-color); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n /**\n * @tokens Sidebar Search\n */\n\n --sidebar-search-button-background-color: transparent; // @presenter Color\n --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n --sidebar-search-button-border: var(--border-color);\n --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n --sidebar-search-button-active-background-color: transparent; // @presenter Color\n --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n /**\n * @tokens Search results modal\n * @presenter Color\n */\n\n --search-modal-background: var(--background-color);\n --search-modal-text-color: var(--text-color);\n --search-modal-border: none;\n --search-modal-box-shadow: none;\n\n --search-modal-header-border-radius: 8px;\n --search-modal-header-background-color: var(--color-secondary-100);\n --search-modal-clear-button-background-color: var(--color-secondary-300);\n --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n // @tokens End\n"], ["\n /**\n * @tokens Search\n */\n\n --search-highlight-text-color: #ffff03; // @presenter Color\n\n /**\n * @tokens Portal Search\n */\n\n --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-text-color: #fff; // @presenter Color\n\n --search-input-border: none;\n --search-input-border-radius: var(--border-radius); // @presenter BorderRadius\n --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize\n --search-input-font-family: var(--font-family-base); // @presenter FontFamily\n --search-input-line-height: 1.15em; // @presenter LineHeight\n\n --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color\n --search-input-hover-border: none; // @presenter Color\n --search-input-placeholder-color: var(--search-input-text-color);\n\n --search-popover-background-color: var(--background-color); // @presenter Color\n --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius\n --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n 0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow\n --search-popover-border: none;\n\n --search-item-padding: 8px 24px;\n --search-item-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-title-text-color: var(--text-color); // @presenter Color\n --search-item-background-color: transparent; // @presenter Color\n --search-item-active-text-color: var(--text-color-secondary); // @presenter Color\n --search-item-active-title-text-color: var(--text-color); // @presenter Color\n --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color\n\n /**\n * @tokens Sidebar Search\n */\n\n --sidebar-search-button-background-color: transparent; // @presenter Color\n --sidebar-search-button-text-color: var(--text-color); // @presenter Color\n --sidebar-search-button-border: var(--border-color);\n --sidebar-search-button-border-radius: none; // @presenter BorderRadius\n --sidebar-search-button-font-size: var(--font-size-small); // @presenter FontSize\n --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily\n --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight\n --sidebar-search-button-hover-background-color: transparent; // @presenter Color\n --sidebar-search-button-hover-border: var(--border-color); // @presenter Color\n --sidebar-search-button-active-background-color: transparent; // @presenter Color\n --sidebar-search-button-active-border: var(--border-color); // @presenter Color\n\n /**\n * @tokens Search results modal\n * @presenter Color\n */\n\n --search-modal-background: var(--background-color);\n --search-modal-text-color: var(--text-color);\n --search-modal-border: none;\n --search-modal-box-shadow: none;\n\n --search-modal-header-border-radius: 8px;\n --search-modal-header-background-color: var(--color-secondary-100);\n --search-modal-clear-button-background-color: var(--color-secondary-300);\n --search-modal-clear-button-hover-background-color: var(--color-secondary-500);\n\n // @tokens End\n"])));
33
- var dropdown = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n --dropdown-font-size: 14px;\n --dropdown-text-color: var(--text-color);\n\n --dropdown-padding-vertical: 8px;\n --dropdown-padding-left: 10px;\n --dropdown-padding-right: 26px;\n --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n --dropdown-border: none;\n"], ["\n --dropdown-font-size: 14px;\n --dropdown-text-color: var(--text-color);\n\n --dropdown-padding-vertical: 8px;\n --dropdown-padding-left: 10px;\n --dropdown-padding-right: 26px;\n --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)\n var(--dropdown-padding-vertical) var(--dropdown-padding-left);\n\n --dropdown-border: none;\n"])));
34
- var lastUpdated = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n --last-updated-text-color: var(--text-color);\n --last-updated-font-size: var(--font-size-small);\n --last-updated-font-family: var(--font-family-base);\n --last-updated-line-height: var(--line-height-base);\n"], ["\n --last-updated-text-color: var(--text-color);\n --last-updated-font-size: var(--font-size-small);\n --last-updated-font-family: var(--font-family-base);\n --last-updated-line-height: var(--line-height-base);\n"])));
35
- var tile = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n --wide-tile-background-color: var(--color-secondary-50);\n --thin-tile-background-color: var(--color-secondary-50);\n"], ["\n --wide-tile-background-color: var(--color-secondary-50);\n --thin-tile-background-color: var(--color-secondary-50);\n"])));
36
- exports.styles = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n\n :root.notransition * {\n transition: none !important; \n }\n"], ["\n :root {\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n\n :root.dark {\n ", ";\n }\n\n :root.notransition * {\n transition: none !important; \n }\n"])), baseColors, httpColors, responsePanelColors, typography, headingsTypography, common, admonition, buttons, sidebar, navbar, footer, logo, badges, toc, inputs, tooltip, code, links, markdown, search, dropdown, apiReferencePanels, apiReferenceDocs, lastUpdated, tile, loadProgressBar, darkColors_1.darkMode);
37
- exports.GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), exports.styles);
38
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
package/hooks/__tests__/mocks/MockIntersectionObserver.js DELETED
@@ -1,39 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MockIntersectionObserver = void 0;
4
- var MockIntersectionObserver = /** @class */ (function () {
5
- function MockIntersectionObserver(callback, options) {
6
- var _this = this;
7
- this.intersect = function () {
8
- _this.entries.map(function (entry) {
9
- entry.isIntersecting = _this.isInViewPort(entry.target);
10
- });
11
- _this.callback(_this.entries, _this);
12
- };
13
- this.viewPort = (options === null || options === void 0 ? void 0 : options.root) ? options.root : window;
14
- this.entries = [];
15
- this.root = null;
16
- this.rootMargin = '0px';
17
- this.thresholds = [1];
18
- this.callback = callback;
19
- this.viewPort.addEventListener('scroll', this.intersect);
20
- }
21
- MockIntersectionObserver.prototype.isInViewPort = function (target) {
22
- return target.id !== 'toc-0';
23
- };
24
- MockIntersectionObserver.prototype.observe = function (target) {
25
- this.entries.push({ isIntersecting: false, target: target });
26
- };
27
- MockIntersectionObserver.prototype.unobserve = function (target) {
28
- this.entries = this.entries.filter(function (ob) { return ob.target !== target; });
29
- };
30
- MockIntersectionObserver.prototype.disconnect = function () {
31
- this.viewPort.removeEventListener('scroll', this.intersect);
32
- this.entries = [];
33
- };
34
- MockIntersectionObserver.prototype.takeRecords = function () {
35
- return this.entries;
36
- };
37
- return MockIntersectionObserver;
38
- }());
39
- exports.MockIntersectionObserver = MockIntersectionObserver;
package/hooks/useActiveHeading.js DELETED
@@ -1,100 +0,0 @@
1
- "use strict";
2
- var __read = (this && this.__read) || function (o, n) {
3
- var m = typeof Symbol === "function" && o[Symbol.iterator];
4
- if (!m) return o;
5
- var i = m.call(o), r, ar = [], e;
6
- try {
7
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
8
- }
9
- catch (error) { e = { error: error }; }
10
- finally {
11
- try {
12
- if (r && !r.done && (m = i["return"])) m.call(i);
13
- }
14
- finally { if (e) throw e.error; }
15
- }
16
- return ar;
17
- };
18
- Object.defineProperty(exports, "__esModule", { value: true });
19
- exports.useActiveHeading = void 0;
20
- var react_1 = require("react");
21
- var react_router_dom_1 = require("react-router-dom");
22
- function useActiveHeading(contentElement, displayedHeaders) {
23
- var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
24
- var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
25
- var headingElementsRef = (0, react_1.useRef)({});
26
- var history = (0, react_router_dom_1.useHistory)();
27
- var getVisibleHeadings = function () {
28
- var visibleHeadings = [];
29
- for (var key in headingElementsRef.current) {
30
- var headingElement = headingElementsRef.current[key];
31
- if (headingElement.isIntersecting) {
32
- visibleHeadings.push(headingElement);
33
- }
34
- }
35
- return visibleHeadings;
36
- };
37
- var getIndexFromId = (0, react_1.useCallback)(function (id) {
38
- return headingElements.findIndex(function (item) { return item.id === id; });
39
- }, [headingElements]);
40
- var findHeaders = function (allContent) {
41
- var allHeaders = allContent.querySelectorAll('.heading-anchor');
42
- return Array.from(allHeaders);
43
- };
44
- var intersectionCallback = (0, react_1.useCallback)(function (headings) {
45
- var _a;
46
- headingElementsRef.current = headings.reduce(function (map, headingElement) {
47
- map[headingElement.target.id] = headingElement;
48
- return map;
49
- }, headingElementsRef.current);
50
- var totalHeight = window.scrollY + window.innerHeight;
51
- // handle bottom of the page
52
- if (totalHeight >= document.body.scrollHeight) {
53
- var newHeading = ((_a = headingElements[(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length) - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
54
- setHeading(newHeading);
55
- return;
56
- }
57
- var visibleHeadings = getVisibleHeadings();
58
- if (!visibleHeadings.length) {
59
- return;
60
- }
61
- if (visibleHeadings.length === 1) {
62
- setHeading(visibleHeadings[0].target.id);
63
- return;
64
- }
65
- visibleHeadings.sort(function (a, b) {
66
- return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
67
- });
68
- setHeading(visibleHeadings[0].target.id);
69
- }, [getIndexFromId, headingElements]);
70
- (0, react_1.useEffect)(function () {
71
- if (!contentElement) {
72
- return;
73
- }
74
- setHeadingElements(findHeaders(contentElement));
75
- var unlisten = history.listen(function () {
76
- setHeadingElements(findHeaders(contentElement));
77
- });
78
- return function () { return unlisten(); };
79
- // eslint-disable-next-line react-hooks/exhaustive-deps
80
- }, [contentElement]);
81
- (0, react_1.useEffect)(function () {
82
- if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
83
- return;
84
- }
85
- headingElementsRef.current = {};
86
- // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
87
- var observer = new IntersectionObserver(intersectionCallback, {
88
- rootMargin: '0px 0px -30% 0px',
89
- threshold: 1,
90
- });
91
- headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach(function (element) {
92
- if (displayedHeaders.includes(element.id)) {
93
- observer.observe(element);
94
- }
95
- });
96
- return function () { return observer.disconnect(); };
97
- }, [headingElements, displayedHeaders, intersectionCallback]);
98
- return heading;
99
- }
100
- exports.useActiveHeading = useActiveHeading;