@askrjs/themes 0.0.1

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 (423) hide show
  1. package/LICENSE +201 -0
  2. package/THEMING.md +930 -0
  3. package/dist/_internal/box-layout.js +115 -0
  4. package/dist/_internal/box-layout.js.map +1 -0
  5. package/dist/_internal/classes.js +8 -0
  6. package/dist/_internal/classes.js.map +1 -0
  7. package/dist/_internal/jsx.js +12 -0
  8. package/dist/_internal/jsx.js.map +1 -0
  9. package/dist/_internal/layout.d.ts +9 -0
  10. package/dist/_internal/layout.js +156 -0
  11. package/dist/_internal/layout.js.map +1 -0
  12. package/dist/_internal/merge-props.js +50 -0
  13. package/dist/_internal/merge-props.js.map +1 -0
  14. package/dist/accessible-icon/accessible-icon.d.ts +7 -0
  15. package/dist/accessible-icon/accessible-icon.js +20 -0
  16. package/dist/accessible-icon/accessible-icon.js.map +1 -0
  17. package/dist/accessible-icon/accessible-icon.types.d.ts +9 -0
  18. package/dist/askr/dist/common/jsx.d.ts +16 -0
  19. package/dist/askr/dist/common/props.d.ts +22 -0
  20. package/dist/askr-themes/src/themes/default/index.css +3736 -0
  21. package/dist/aspect-ratio/aspect-ratio.d.ts +8 -0
  22. package/dist/aspect-ratio/aspect-ratio.js +36 -0
  23. package/dist/aspect-ratio/aspect-ratio.js.map +1 -0
  24. package/dist/aspect-ratio/aspect-ratio.types.d.ts +20 -0
  25. package/dist/aspect-ratio/index.d.ts +2 -0
  26. package/dist/badge/badge.d.ts +8 -0
  27. package/dist/badge/badge.js +26 -0
  28. package/dist/badge/badge.js.map +1 -0
  29. package/dist/badge/badge.types.d.ts +20 -0
  30. package/dist/badge/index.d.ts +2 -0
  31. package/dist/box/box.d.ts +9 -0
  32. package/dist/box/box.js +35 -0
  33. package/dist/box/box.js.map +1 -0
  34. package/dist/box/box.types.d.ts +71 -0
  35. package/dist/box/index.d.ts +2 -0
  36. package/dist/breadcrumb/breadcrumb.d.ts +18 -0
  37. package/dist/breadcrumb/breadcrumb.js +113 -0
  38. package/dist/breadcrumb/breadcrumb.js.map +1 -0
  39. package/dist/breadcrumb/breadcrumb.types.d.ts +64 -0
  40. package/dist/breadcrumb/index.d.ts +2 -0
  41. package/dist/card/card.d.ts +12 -0
  42. package/dist/card/card.js +68 -0
  43. package/dist/card/card.js.map +1 -0
  44. package/dist/card/card.types.d.ts +37 -0
  45. package/dist/card/index.d.ts +2 -0
  46. package/dist/components/_internal/box-layout.d.ts +7 -0
  47. package/dist/components/_internal/classes.d.ts +1 -0
  48. package/dist/components/_internal/jsx.d.ts +8 -0
  49. package/dist/components/_internal/layout.d.ts +31 -0
  50. package/dist/components/_internal/merge-props.d.ts +1 -0
  51. package/dist/components/_internal/style.d.ts +1 -0
  52. package/dist/components/accessible-icon/accessible-icon.d.ts +2 -0
  53. package/dist/components/accessible-icon/accessible-icon.types.d.ts +5 -0
  54. package/dist/components/accessible-icon/index.d.ts +2 -0
  55. package/dist/components/aspect-ratio/aspect-ratio.d.ts +3 -0
  56. package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +15 -0
  57. package/dist/components/aspect-ratio/index.d.ts +2 -0
  58. package/dist/components/badge/badge.a11y.d.ts +13 -0
  59. package/dist/components/badge/badge.d.ts +3 -0
  60. package/dist/components/badge/badge.types.d.ts +15 -0
  61. package/dist/components/badge/index.d.ts +3 -0
  62. package/dist/components/box/box.a11y.d.ts +10 -0
  63. package/dist/components/box/box.d.ts +4 -0
  64. package/dist/components/box/box.types.d.ts +66 -0
  65. package/dist/components/box/index.d.ts +3 -0
  66. package/dist/components/breadcrumb/breadcrumb.a11y.d.ts +13 -0
  67. package/dist/components/breadcrumb/breadcrumb.d.ts +13 -0
  68. package/dist/components/breadcrumb/breadcrumb.types.d.ts +59 -0
  69. package/dist/components/breadcrumb/index.d.ts +3 -0
  70. package/dist/components/card/card.d.ts +7 -0
  71. package/dist/components/card/card.types.d.ts +33 -0
  72. package/dist/components/card/index.d.ts +2 -0
  73. package/dist/components/container/container.a11y.d.ts +16 -0
  74. package/dist/components/container/container.d.ts +3 -0
  75. package/dist/components/container/container.types.d.ts +29 -0
  76. package/dist/components/container/index.d.ts +3 -0
  77. package/dist/components/empty-state/empty-state.d.ts +2 -0
  78. package/dist/components/empty-state/empty-state.types.d.ts +9 -0
  79. package/dist/components/empty-state/index.d.ts +2 -0
  80. package/dist/components/flex/flex.a11y.d.ts +18 -0
  81. package/dist/components/flex/flex.d.ts +4 -0
  82. package/dist/components/flex/flex.types.d.ts +41 -0
  83. package/dist/components/flex/index.d.ts +3 -0
  84. package/dist/components/grid/grid.a11y.d.ts +21 -0
  85. package/dist/components/grid/grid.d.ts +4 -0
  86. package/dist/components/grid/grid.types.d.ts +37 -0
  87. package/dist/components/grid/index.d.ts +3 -0
  88. package/dist/components/header/header.a11y.d.ts +10 -0
  89. package/dist/components/header/header.d.ts +2 -0
  90. package/dist/components/header/header.types.d.ts +5 -0
  91. package/dist/components/header/index.d.ts +3 -0
  92. package/dist/components/index.d.ts +49 -0
  93. package/dist/components/index.js +28 -0
  94. package/dist/components/inline/index.d.ts +6 -0
  95. package/dist/components/logos/create-logo.d.ts +5 -0
  96. package/dist/components/logos/github-logo.d.ts +4 -0
  97. package/dist/components/logos/google-logo.d.ts +4 -0
  98. package/dist/components/logos/index.d.ts +5 -0
  99. package/dist/components/logos/microsoft-logo.d.ts +4 -0
  100. package/dist/components/logos/types.d.ts +14 -0
  101. package/dist/components/navbar/index.d.ts +2 -0
  102. package/dist/components/navbar/navbar.d.ts +6 -0
  103. package/dist/components/navbar/navbar.types.d.ts +24 -0
  104. package/dist/components/section/index.d.ts +3 -0
  105. package/dist/components/section/section.a11y.d.ts +11 -0
  106. package/dist/components/section/section.d.ts +3 -0
  107. package/dist/components/section/section.types.d.ts +17 -0
  108. package/dist/components/separator/index.d.ts +3 -0
  109. package/dist/components/separator/separator.a11y.d.ts +13 -0
  110. package/dist/components/separator/separator.d.ts +3 -0
  111. package/dist/components/separator/separator.types.d.ts +16 -0
  112. package/dist/components/sidebar-layout/index.d.ts +3 -0
  113. package/dist/components/sidebar-layout/sidebar-layout.a11y.d.ts +15 -0
  114. package/dist/components/sidebar-layout/sidebar-layout.d.ts +2 -0
  115. package/dist/components/sidebar-layout/sidebar-layout.types.d.ts +20 -0
  116. package/dist/components/skeleton/index.d.ts +3 -0
  117. package/dist/components/skeleton/skeleton.a11y.d.ts +12 -0
  118. package/dist/components/skeleton/skeleton.d.ts +3 -0
  119. package/dist/components/skeleton/skeleton.types.d.ts +13 -0
  120. package/dist/components/spacer/index.d.ts +3 -0
  121. package/dist/components/spacer/spacer.a11y.d.ts +13 -0
  122. package/dist/components/spacer/spacer.d.ts +3 -0
  123. package/dist/components/spacer/spacer.types.d.ts +24 -0
  124. package/dist/components/spinner/index.d.ts +2 -0
  125. package/dist/components/spinner/spinner.d.ts +2 -0
  126. package/dist/components/spinner/spinner.types.d.ts +5 -0
  127. package/dist/components/stack/index.d.ts +3 -0
  128. package/dist/components/stack/stack.a11y.d.ts +14 -0
  129. package/dist/components/stack/stack.d.ts +3 -0
  130. package/dist/components/stack/stack.types.d.ts +16 -0
  131. package/dist/components/theme/index.d.ts +2 -0
  132. package/dist/components/theme/theme.d.ts +40 -0
  133. package/dist/components/topbar-layout/index.d.ts +3 -0
  134. package/dist/components/topbar-layout/topbar-layout.a11y.d.ts +13 -0
  135. package/dist/components/topbar-layout/topbar-layout.d.ts +2 -0
  136. package/dist/components/topbar-layout/topbar-layout.types.d.ts +12 -0
  137. package/dist/container/container.d.ts +8 -0
  138. package/dist/container/container.js +82 -0
  139. package/dist/container/container.js.map +1 -0
  140. package/dist/container/container.types.d.ts +28 -0
  141. package/dist/container/index.d.ts +2 -0
  142. package/dist/empty-state/empty-state.d.ts +7 -0
  143. package/dist/empty-state/empty-state.js +39 -0
  144. package/dist/empty-state/empty-state.js.map +1 -0
  145. package/dist/empty-state/empty-state.types.d.ts +13 -0
  146. package/dist/flex/flex.d.ts +9 -0
  147. package/dist/flex/flex.js +114 -0
  148. package/dist/flex/flex.js.map +1 -0
  149. package/dist/flex/flex.types.d.ts +41 -0
  150. package/dist/flex/index.d.ts +2 -0
  151. package/dist/grid/grid.d.ts +9 -0
  152. package/dist/grid/grid.js +115 -0
  153. package/dist/grid/grid.js.map +1 -0
  154. package/dist/grid/grid.types.d.ts +40 -0
  155. package/dist/grid/index.d.ts +2 -0
  156. package/dist/header/header.d.ts +7 -0
  157. package/dist/header/header.js +18 -0
  158. package/dist/header/header.js.map +1 -0
  159. package/dist/header/header.types.d.ts +9 -0
  160. package/dist/inline/index.d.ts +7 -0
  161. package/dist/inline/index.js +13 -0
  162. package/dist/inline/index.js.map +1 -0
  163. package/dist/logos/create-logo.js +75 -0
  164. package/dist/logos/create-logo.js.map +1 -0
  165. package/dist/logos/github-logo.d.ts +18 -0
  166. package/dist/logos/github-logo.js +9 -0
  167. package/dist/logos/github-logo.js.map +1 -0
  168. package/dist/logos/google-logo.d.ts +18 -0
  169. package/dist/logos/google-logo.js +23 -0
  170. package/dist/logos/google-logo.js.map +1 -0
  171. package/dist/logos/microsoft-logo.d.ts +18 -0
  172. package/dist/logos/microsoft-logo.js +35 -0
  173. package/dist/logos/microsoft-logo.js.map +1 -0
  174. package/dist/logos/types.d.ts +16 -0
  175. package/dist/navbar/index.d.ts +2 -0
  176. package/dist/navbar/navbar.d.ts +11 -0
  177. package/dist/navbar/navbar.js +57 -0
  178. package/dist/navbar/navbar.js.map +1 -0
  179. package/dist/navbar/navbar.types.d.ts +29 -0
  180. package/dist/section/index.d.ts +2 -0
  181. package/dist/section/section.d.ts +8 -0
  182. package/dist/section/section.js +40 -0
  183. package/dist/section/section.js.map +1 -0
  184. package/dist/section/section.types.d.ts +22 -0
  185. package/dist/separator/index.d.ts +2 -0
  186. package/dist/separator/separator.d.ts +8 -0
  187. package/dist/separator/separator.js +27 -0
  188. package/dist/separator/separator.js.map +1 -0
  189. package/dist/separator/separator.types.d.ts +21 -0
  190. package/dist/sidebar-layout/index.d.ts +2 -0
  191. package/dist/sidebar-layout/sidebar-layout.d.ts +7 -0
  192. package/dist/sidebar-layout/sidebar-layout.js +51 -0
  193. package/dist/sidebar-layout/sidebar-layout.js.map +1 -0
  194. package/dist/sidebar-layout/sidebar-layout.types.d.ts +20 -0
  195. package/dist/skeleton/index.d.ts +2 -0
  196. package/dist/skeleton/skeleton.d.ts +8 -0
  197. package/dist/skeleton/skeleton.js +26 -0
  198. package/dist/skeleton/skeleton.js.map +1 -0
  199. package/dist/skeleton/skeleton.types.d.ts +18 -0
  200. package/dist/spacer/index.d.ts +2 -0
  201. package/dist/spacer/spacer.d.ts +8 -0
  202. package/dist/spacer/spacer.js +47 -0
  203. package/dist/spacer/spacer.js.map +1 -0
  204. package/dist/spacer/spacer.types.d.ts +25 -0
  205. package/dist/spinner/index.d.ts +2 -0
  206. package/dist/spinner/spinner.d.ts +7 -0
  207. package/dist/spinner/spinner.js +16 -0
  208. package/dist/spinner/spinner.js.map +1 -0
  209. package/dist/spinner/spinner.types.d.ts +10 -0
  210. package/dist/stack/index.d.ts +2 -0
  211. package/dist/stack/stack.d.ts +8 -0
  212. package/dist/stack/stack.js +16 -0
  213. package/dist/stack/stack.js.map +1 -0
  214. package/dist/stack/stack.types.d.ts +21 -0
  215. package/dist/theme/index.d.ts +1 -0
  216. package/dist/theme/theme.d.ts +44 -0
  217. package/dist/theme/theme.js +159 -0
  218. package/dist/theme/theme.js.map +1 -0
  219. package/dist/topbar-layout/index.d.ts +2 -0
  220. package/dist/topbar-layout/topbar-layout.d.ts +7 -0
  221. package/dist/topbar-layout/topbar-layout.js +37 -0
  222. package/dist/topbar-layout/topbar-layout.js.map +1 -0
  223. package/dist/topbar-layout/topbar-layout.types.d.ts +13 -0
  224. package/package.json +122 -0
  225. package/scripts/new-theme.js +87 -0
  226. package/src/askr-compat.d.ts +110 -0
  227. package/src/components/_internal/box-layout.ts +156 -0
  228. package/src/components/_internal/classes.ts +5 -0
  229. package/src/components/_internal/jsx.ts +141 -0
  230. package/src/components/_internal/layout.ts +223 -0
  231. package/src/components/_internal/merge-props.ts +89 -0
  232. package/src/components/_internal/style.ts +18 -0
  233. package/src/components/accessible-icon/accessible-icon.tsx +18 -0
  234. package/src/components/accessible-icon/accessible-icon.types.ts +5 -0
  235. package/src/components/accessible-icon/index.ts +2 -0
  236. package/src/components/aspect-ratio/aspect-ratio.tsx +48 -0
  237. package/src/components/aspect-ratio/aspect-ratio.types.ts +19 -0
  238. package/src/components/aspect-ratio/index.ts +2 -0
  239. package/src/components/badge/badge.a11y.ts +15 -0
  240. package/src/components/badge/badge.tsx +21 -0
  241. package/src/components/badge/badge.types.ts +27 -0
  242. package/src/components/badge/index.ts +3 -0
  243. package/src/components/box/box.a11y.ts +11 -0
  244. package/src/components/box/box.tsx +37 -0
  245. package/src/components/box/box.types.ts +75 -0
  246. package/src/components/box/index.ts +11 -0
  247. package/src/components/breadcrumb/breadcrumb.a11y.ts +15 -0
  248. package/src/components/breadcrumb/breadcrumb.tsx +123 -0
  249. package/src/components/breadcrumb/breadcrumb.types.ts +73 -0
  250. package/src/components/breadcrumb/index.ts +24 -0
  251. package/src/components/card/card.tsx +79 -0
  252. package/src/components/card/card.types.ts +40 -0
  253. package/src/components/card/index.ts +12 -0
  254. package/src/components/container/container.a11y.ts +17 -0
  255. package/src/components/container/container.tsx +139 -0
  256. package/src/components/container/container.types.ts +35 -0
  257. package/src/components/container/index.ts +9 -0
  258. package/src/components/empty-state/empty-state.tsx +42 -0
  259. package/src/components/empty-state/empty-state.types.ts +10 -0
  260. package/src/components/empty-state/index.ts +2 -0
  261. package/src/components/flex/flex.a11y.ts +19 -0
  262. package/src/components/flex/flex.tsx +160 -0
  263. package/src/components/flex/flex.types.ts +50 -0
  264. package/src/components/flex/index.ts +16 -0
  265. package/src/components/grid/grid.a11y.ts +22 -0
  266. package/src/components/grid/grid.tsx +172 -0
  267. package/src/components/grid/grid.types.ts +45 -0
  268. package/src/components/grid/index.ts +10 -0
  269. package/src/components/header/header.a11y.ts +11 -0
  270. package/src/components/header/header.tsx +18 -0
  271. package/src/components/header/header.types.ts +6 -0
  272. package/src/components/header/index.ts +3 -0
  273. package/src/components/index.ts +107 -0
  274. package/src/components/inline/index.tsx +28 -0
  275. package/src/components/logos/create-logo.tsx +103 -0
  276. package/src/components/logos/github-logo.tsx +13 -0
  277. package/src/components/logos/google-logo.tsx +34 -0
  278. package/src/components/logos/index.ts +5 -0
  279. package/src/components/logos/microsoft-logo.tsx +10 -0
  280. package/src/components/logos/types.ts +24 -0
  281. package/src/components/navbar/index.ts +9 -0
  282. package/src/components/navbar/navbar.tsx +59 -0
  283. package/src/components/navbar/navbar.types.ts +33 -0
  284. package/src/components/section/index.ts +8 -0
  285. package/src/components/section/section.a11y.ts +12 -0
  286. package/src/components/section/section.tsx +37 -0
  287. package/src/components/section/section.types.ts +22 -0
  288. package/src/components/separator/index.ts +12 -0
  289. package/src/components/separator/separator.a11y.ts +15 -0
  290. package/src/components/separator/separator.tsx +23 -0
  291. package/src/components/separator/separator.types.ts +21 -0
  292. package/src/components/sidebar-layout/index.ts +6 -0
  293. package/src/components/sidebar-layout/sidebar-layout.a11y.ts +16 -0
  294. package/src/components/sidebar-layout/sidebar-layout.tsx +59 -0
  295. package/src/components/sidebar-layout/sidebar-layout.types.ts +22 -0
  296. package/src/components/skeleton/index.ts +3 -0
  297. package/src/components/skeleton/skeleton.a11y.ts +14 -0
  298. package/src/components/skeleton/skeleton.tsx +21 -0
  299. package/src/components/skeleton/skeleton.types.ts +17 -0
  300. package/src/components/spacer/index.ts +9 -0
  301. package/src/components/spacer/spacer.a11y.ts +14 -0
  302. package/src/components/spacer/spacer.tsx +58 -0
  303. package/src/components/spacer/spacer.types.ts +30 -0
  304. package/src/components/spinner/index.ts +2 -0
  305. package/src/components/spinner/spinner.tsx +21 -0
  306. package/src/components/spinner/spinner.types.ts +7 -0
  307. package/src/components/stack/index.ts +3 -0
  308. package/src/components/stack/stack.a11y.ts +15 -0
  309. package/src/components/stack/stack.tsx +13 -0
  310. package/src/components/stack/stack.types.ts +21 -0
  311. package/src/components/theme/index.ts +10 -0
  312. package/src/components/theme/theme.tsx +260 -0
  313. package/src/components/topbar-layout/index.ts +3 -0
  314. package/src/components/topbar-layout/topbar-layout.a11y.ts +14 -0
  315. package/src/components/topbar-layout/topbar-layout.tsx +39 -0
  316. package/src/components/topbar-layout/topbar-layout.types.ts +13 -0
  317. package/src/css.d.ts +1 -0
  318. package/src/index.css +1 -0
  319. package/src/jsx.d.ts +23 -0
  320. package/src/themes/default/index.css +48 -0
  321. package/src/themes/default/styles/actions/button.css +196 -0
  322. package/src/themes/default/styles/actions/toggle-group.css +52 -0
  323. package/src/themes/default/styles/actions/toggle.css +44 -0
  324. package/src/themes/default/styles/base/icon.css +10 -0
  325. package/src/themes/default/styles/base/typography.css +208 -0
  326. package/src/themes/default/styles/base/utilities.css +223 -0
  327. package/src/themes/default/styles/disclosure/accordion.css +62 -0
  328. package/src/themes/default/styles/disclosure/collapsible.css +47 -0
  329. package/src/themes/default/styles/display/avatar.css +25 -0
  330. package/src/themes/default/styles/display/badge.css +51 -0
  331. package/src/themes/default/styles/display/card.css +53 -0
  332. package/src/themes/default/styles/display/coverage.css +248 -0
  333. package/src/themes/default/styles/display/progress-circle.css +18 -0
  334. package/src/themes/default/styles/display/progress.css +18 -0
  335. package/src/themes/default/styles/display/scroll-area.css +34 -0
  336. package/src/themes/default/styles/display/separator.css +15 -0
  337. package/src/themes/default/styles/display/skeleton.css +6 -0
  338. package/src/themes/default/styles/display/spinner.css +9 -0
  339. package/src/themes/default/styles/display/table.css +63 -0
  340. package/src/themes/default/styles/forms/checkbox.css +64 -0
  341. package/src/themes/default/styles/forms/form.css +5 -0
  342. package/src/themes/default/styles/forms/input.css +49 -0
  343. package/src/themes/default/styles/forms/label.css +6 -0
  344. package/src/themes/default/styles/forms/radio-group.css +53 -0
  345. package/src/themes/default/styles/forms/select.css +143 -0
  346. package/src/themes/default/styles/forms/slider.css +75 -0
  347. package/src/themes/default/styles/forms/switch.css +70 -0
  348. package/src/themes/default/styles/forms/textarea.css +37 -0
  349. package/src/themes/default/styles/layout/aspect-ratio.css +5 -0
  350. package/src/themes/default/styles/layout/dashboard-layout.css +15 -0
  351. package/src/themes/default/styles/layout/docs-layout.css +10 -0
  352. package/src/themes/default/styles/layout/layout.css +946 -0
  353. package/src/themes/default/styles/layout/patterns.css +43 -0
  354. package/src/themes/default/styles/layout/responsive-layout.css +209 -0
  355. package/src/themes/default/styles/layout/sidebar.css +10 -0
  356. package/src/themes/default/styles/navigation/breadcrumb.css +39 -0
  357. package/src/themes/default/styles/navigation/menu.css +60 -0
  358. package/src/themes/default/styles/navigation/menubar.css +89 -0
  359. package/src/themes/default/styles/navigation/navigation-menu.css +90 -0
  360. package/src/themes/default/styles/navigation/tabs.css +61 -0
  361. package/src/themes/default/styles/overlays/alert-dialog.css +9 -0
  362. package/src/themes/default/styles/overlays/dialog.css +116 -0
  363. package/src/themes/default/styles/overlays/dropdown-menu.css +109 -0
  364. package/src/themes/default/styles/overlays/hover-card.css +46 -0
  365. package/src/themes/default/styles/overlays/popover.css +72 -0
  366. package/src/themes/default/styles/overlays/toast.css +123 -0
  367. package/src/themes/default/styles/overlays/tooltip.css +83 -0
  368. package/src/themes/default/styles/shell/header.css +36 -0
  369. package/src/themes/default/styles/shell/navbar.css +158 -0
  370. package/src/themes/default/styles/shell/theme.css +35 -0
  371. package/src/themes/default/tokens.css +316 -0
  372. package/templates/theme/index.css +48 -0
  373. package/templates/theme/styles/actions/button.css +196 -0
  374. package/templates/theme/styles/actions/toggle-group.css +52 -0
  375. package/templates/theme/styles/actions/toggle.css +44 -0
  376. package/templates/theme/styles/base/icon.css +10 -0
  377. package/templates/theme/styles/base/typography.css +208 -0
  378. package/templates/theme/styles/base/utilities.css +19 -0
  379. package/templates/theme/styles/disclosure/accordion.css +62 -0
  380. package/templates/theme/styles/disclosure/collapsible.css +47 -0
  381. package/templates/theme/styles/display/avatar.css +25 -0
  382. package/templates/theme/styles/display/badge.css +51 -0
  383. package/templates/theme/styles/display/card.css +53 -0
  384. package/templates/theme/styles/display/coverage.css +146 -0
  385. package/templates/theme/styles/display/progress-circle.css +18 -0
  386. package/templates/theme/styles/display/progress.css +18 -0
  387. package/templates/theme/styles/display/scroll-area.css +34 -0
  388. package/templates/theme/styles/display/separator.css +15 -0
  389. package/templates/theme/styles/display/skeleton.css +6 -0
  390. package/templates/theme/styles/display/spinner.css +9 -0
  391. package/templates/theme/styles/display/table.css +63 -0
  392. package/templates/theme/styles/forms/checkbox.css +64 -0
  393. package/templates/theme/styles/forms/form.css +5 -0
  394. package/templates/theme/styles/forms/input.css +49 -0
  395. package/templates/theme/styles/forms/label.css +6 -0
  396. package/templates/theme/styles/forms/radio-group.css +53 -0
  397. package/templates/theme/styles/forms/select.css +143 -0
  398. package/templates/theme/styles/forms/slider.css +75 -0
  399. package/templates/theme/styles/forms/switch.css +70 -0
  400. package/templates/theme/styles/forms/textarea.css +37 -0
  401. package/templates/theme/styles/layout/aspect-ratio.css +5 -0
  402. package/templates/theme/styles/layout/dashboard-layout.css +16 -0
  403. package/templates/theme/styles/layout/docs-layout.css +11 -0
  404. package/templates/theme/styles/layout/layout.css +1 -0
  405. package/templates/theme/styles/layout/patterns.css +43 -0
  406. package/templates/theme/styles/layout/responsive-layout.css +209 -0
  407. package/templates/theme/styles/layout/sidebar.css +11 -0
  408. package/templates/theme/styles/navigation/breadcrumb.css +31 -0
  409. package/templates/theme/styles/navigation/menu.css +60 -0
  410. package/templates/theme/styles/navigation/menubar.css +89 -0
  411. package/templates/theme/styles/navigation/navigation-menu.css +90 -0
  412. package/templates/theme/styles/navigation/tabs.css +61 -0
  413. package/templates/theme/styles/overlays/alert-dialog.css +9 -0
  414. package/templates/theme/styles/overlays/dialog.css +116 -0
  415. package/templates/theme/styles/overlays/dropdown-menu.css +109 -0
  416. package/templates/theme/styles/overlays/hover-card.css +46 -0
  417. package/templates/theme/styles/overlays/popover.css +72 -0
  418. package/templates/theme/styles/overlays/toast.css +123 -0
  419. package/templates/theme/styles/overlays/tooltip.css +83 -0
  420. package/templates/theme/styles/shell/header.css +36 -0
  421. package/templates/theme/styles/shell/navbar.css +158 -0
  422. package/templates/theme/styles/shell/theme.css +35 -0
  423. package/templates/theme/tokens.css +316 -0
package/src/themes/default/styles/layout/layout.css ADDED
@@ -0,0 +1,946 @@
1
+ :where([data-ak-layout="true"]) {
2
+ display: var(--ak-display-initial);
3
+ margin: var(--ak-m-initial);
4
+ margin-block: var(--ak-my-initial);
5
+ margin-inline: var(--ak-mx-initial);
6
+ margin-top: var(--ak-mt-initial);
7
+ margin-right: var(--ak-mr-initial);
8
+ margin-bottom: var(--ak-mb-initial);
9
+ margin-left: var(--ak-ml-initial);
10
+ padding: var(--ak-p-initial);
11
+ padding-block: var(--ak-py-initial);
12
+ padding-inline: var(--ak-px-initial);
13
+ padding-top: var(--ak-pt-initial);
14
+ padding-right: var(--ak-pr-initial);
15
+ padding-bottom: var(--ak-pb-initial);
16
+ padding-left: var(--ak-pl-initial);
17
+ width: var(--ak-width-initial);
18
+ min-width: var(--ak-min-width-initial);
19
+ max-width: var(--ak-max-width-initial);
20
+ height: var(--ak-height-initial);
21
+ min-height: var(--ak-min-height-initial);
22
+ max-height: var(--ak-max-height-initial);
23
+ position: var(--ak-position-initial);
24
+ inset: var(--ak-inset-initial);
25
+ top: var(--ak-top-initial);
26
+ right: var(--ak-right-initial);
27
+ bottom: var(--ak-bottom-initial);
28
+ left: var(--ak-left-initial);
29
+ overflow: var(--ak-overflow-initial);
30
+ overflow-x: var(--ak-overflow-x-initial);
31
+ overflow-y: var(--ak-overflow-y-initial);
32
+ flex-basis: var(--ak-flex-basis-initial);
33
+ flex-grow: var(--ak-flex-grow-initial);
34
+ flex-shrink: var(--ak-flex-shrink-initial);
35
+ grid-area: var(--ak-grid-area-initial);
36
+ grid-column: var(--ak-grid-column-initial);
37
+ grid-column-start: var(--ak-grid-column-start-initial);
38
+ grid-column-end: var(--ak-grid-column-end-initial);
39
+ grid-row: var(--ak-grid-row-initial);
40
+ grid-row-start: var(--ak-grid-row-start-initial);
41
+ grid-row-end: var(--ak-grid-row-end-initial);
42
+ gap: var(--ak-gap-initial);
43
+ column-gap: var(--ak-column-gap-initial);
44
+ row-gap: var(--ak-row-gap-initial);
45
+ flex-direction: var(--ak-flex-direction-initial);
46
+ align-items: var(--ak-align-items-initial);
47
+ justify-content: var(--ak-justify-content-initial);
48
+ flex-wrap: var(--ak-flex-wrap-initial);
49
+ grid-template-areas: var(--ak-grid-template-areas-initial);
50
+ grid-template-columns: var(--ak-grid-template-columns-initial);
51
+ grid-template-rows: var(--ak-grid-template-rows-initial);
52
+ grid-auto-flow: var(--ak-grid-auto-flow-initial);
53
+ }
54
+
55
+ :where([data-slot="container"]) {
56
+ --ak-container-inline-size: 100%;
57
+ display: block;
58
+ box-sizing: border-box;
59
+ width: var(--ak-width-initial, 100%);
60
+ max-width: min(100%, var(--ak-max-width-initial, var(--ak-container-inline-size)));
61
+ margin-left: var(--ak-ml-initial, auto);
62
+ margin-right: var(--ak-mr-initial, auto);
63
+ padding-left: var(--ak-pl-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
64
+ padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
65
+ }
66
+
67
+ :where([data-slot="container"][data-fluid="true"]) {
68
+ --ak-container-inline-size: 100%;
69
+ }
70
+
71
+ :where([data-slot="container"][data-variant="default"]),
72
+ :where([data-slot="container"][data-variant="sm"]),
73
+ :where([data-slot="container"][data-variant="md"]),
74
+ :where([data-slot="container"][data-variant="lg"]),
75
+ :where([data-slot="container"][data-variant="xl"]),
76
+ :where([data-slot="container"][data-variant="xxl"]),
77
+ :where([data-slot="container"][data-variant="fluid"]) {
78
+ --ak-container-inline-size: 100%;
79
+ }
80
+
81
+ :where([data-slot="container"][data-size="initial:1"]),
82
+ :where([data-slot="container"][data-size="initial:sm"]),
83
+ :where([data-slot="container"][data-max-width="initial:1"]),
84
+ :where([data-slot="container"][data-max-width="initial:sm"]) {
85
+ --ak-container-inline-size: var(--ak-container-1);
86
+ }
87
+
88
+ :where([data-slot="container"][data-size="initial:2"]),
89
+ :where([data-slot="container"][data-size="initial:md"]),
90
+ :where([data-slot="container"][data-max-width="initial:2"]),
91
+ :where([data-slot="container"][data-max-width="initial:md"]) {
92
+ --ak-container-inline-size: var(--ak-container-2);
93
+ }
94
+
95
+ :where([data-slot="container"][data-size="initial:3"]),
96
+ :where([data-slot="container"][data-size="initial:lg"]),
97
+ :where([data-slot="container"][data-max-width="initial:3"]),
98
+ :where([data-slot="container"][data-max-width="initial:lg"]) {
99
+ --ak-container-inline-size: var(--ak-container-3);
100
+ }
101
+
102
+ :where([data-slot="container"][data-size="initial:4"]),
103
+ :where([data-slot="container"][data-size="initial:xl"]),
104
+ :where([data-slot="container"][data-max-width="initial:4"]),
105
+ :where([data-slot="container"][data-max-width="initial:xl"]) {
106
+ --ak-container-inline-size: var(--ak-container-4);
107
+ }
108
+
109
+ :where([data-slot="container"][data-align="initial:left"]) {
110
+ margin-left: var(--ak-ml-initial, 0);
111
+ margin-right: var(--ak-mr-initial, auto);
112
+ }
113
+
114
+ :where([data-slot="container"][data-align="initial:right"]) {
115
+ margin-left: var(--ak-ml-initial, auto);
116
+ margin-right: var(--ak-mr-initial, 0);
117
+ }
118
+
119
+ @media (min-width: 36rem) {
120
+ :where([data-slot="container"][data-variant="default"]),
121
+ :where([data-slot="container"][data-variant="sm"]) {
122
+ --ak-container-inline-size: 540px;
123
+ }
124
+ }
125
+
126
+ @media (min-width: 40rem) {
127
+ :where([data-ak-layout="true"]) {
128
+ display: var(--ak-display-sm, var(--ak-display-initial));
129
+ margin: var(--ak-m-sm, var(--ak-m-initial));
130
+ margin-block: var(--ak-my-sm, var(--ak-my-initial));
131
+ margin-inline: var(--ak-mx-sm, var(--ak-mx-initial));
132
+ margin-top: var(--ak-mt-sm, var(--ak-mt-initial));
133
+ margin-right: var(--ak-mr-sm, var(--ak-mr-initial));
134
+ margin-bottom: var(--ak-mb-sm, var(--ak-mb-initial));
135
+ margin-left: var(--ak-ml-sm, var(--ak-ml-initial));
136
+ padding: var(--ak-p-sm, var(--ak-p-initial));
137
+ padding-block: var(--ak-py-sm, var(--ak-py-initial));
138
+ padding-inline: var(--ak-px-sm, var(--ak-px-initial));
139
+ padding-top: var(--ak-pt-sm, var(--ak-pt-initial));
140
+ padding-right: var(--ak-pr-sm, var(--ak-pr-initial));
141
+ padding-bottom: var(--ak-pb-sm, var(--ak-pb-initial));
142
+ padding-left: var(--ak-pl-sm, var(--ak-pl-initial));
143
+ width: var(--ak-width-sm, var(--ak-width-initial));
144
+ min-width: var(--ak-min-width-sm, var(--ak-min-width-initial));
145
+ max-width: var(--ak-max-width-sm, var(--ak-max-width-initial));
146
+ height: var(--ak-height-sm, var(--ak-height-initial));
147
+ min-height: var(--ak-min-height-sm, var(--ak-min-height-initial));
148
+ max-height: var(--ak-max-height-sm, var(--ak-max-height-initial));
149
+ position: var(--ak-position-sm, var(--ak-position-initial));
150
+ inset: var(--ak-inset-sm, var(--ak-inset-initial));
151
+ top: var(--ak-top-sm, var(--ak-top-initial));
152
+ right: var(--ak-right-sm, var(--ak-right-initial));
153
+ bottom: var(--ak-bottom-sm, var(--ak-bottom-initial));
154
+ left: var(--ak-left-sm, var(--ak-left-initial));
155
+ overflow: var(--ak-overflow-sm, var(--ak-overflow-initial));
156
+ overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-initial));
157
+ overflow-y: var(--ak-overflow-y-sm, var(--ak-overflow-y-initial));
158
+ flex-basis: var(--ak-flex-basis-sm, var(--ak-flex-basis-initial));
159
+ flex-grow: var(--ak-flex-grow-sm, var(--ak-flex-grow-initial));
160
+ flex-shrink: var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial));
161
+ grid-area: var(--ak-grid-area-sm, var(--ak-grid-area-initial));
162
+ grid-column: var(--ak-grid-column-sm, var(--ak-grid-column-initial));
163
+ grid-column-start: var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial));
164
+ grid-column-end: var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial));
165
+ grid-row: var(--ak-grid-row-sm, var(--ak-grid-row-initial));
166
+ grid-row-start: var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial));
167
+ grid-row-end: var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial));
168
+ gap: var(--ak-gap-sm, var(--ak-gap-initial));
169
+ column-gap: var(--ak-column-gap-sm, var(--ak-column-gap-initial));
170
+ row-gap: var(--ak-row-gap-sm, var(--ak-row-gap-initial));
171
+ flex-direction: var(--ak-flex-direction-sm, var(--ak-flex-direction-initial));
172
+ align-items: var(--ak-align-items-sm, var(--ak-align-items-initial));
173
+ justify-content: var(--ak-justify-content-sm, var(--ak-justify-content-initial));
174
+ flex-wrap: var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial));
175
+ grid-template-areas: var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial));
176
+ grid-template-columns: var(
177
+ --ak-grid-template-columns-sm,
178
+ var(--ak-grid-template-columns-initial)
179
+ );
180
+ grid-template-rows: var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial));
181
+ grid-auto-flow: var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial));
182
+ }
183
+
184
+ :where([data-slot="container"]) {
185
+ display: block;
186
+ width: var(--ak-width-sm, var(--ak-width-initial, 100%));
187
+ max-width: min(
188
+ 100%,
189
+ var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
190
+ );
191
+ margin-left: var(--ak-ml-sm, var(--ak-ml-initial, auto));
192
+ margin-right: var(--ak-mr-sm, var(--ak-mr-initial, auto));
193
+ padding-left: var(
194
+ --ak-pl-sm,
195
+ var(--ak-pl-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
196
+ );
197
+ padding-right: var(
198
+ --ak-pr-sm,
199
+ var(--ak-pr-initial, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
200
+ );
201
+ }
202
+ }
203
+
204
+ @media (min-width: 48rem) {
205
+ :where([data-slot="container"][data-variant="default"]),
206
+ :where([data-slot="container"][data-variant="sm"]),
207
+ :where([data-slot="container"][data-variant="md"]) {
208
+ --ak-container-inline-size: 720px;
209
+ }
210
+
211
+ :where([data-ak-layout="true"]) {
212
+ display: var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)));
213
+ margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)));
214
+ margin-block: var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial)));
215
+ margin-inline: var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial)));
216
+ margin-top: var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial)));
217
+ margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial)));
218
+ margin-bottom: var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial)));
219
+ margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial)));
220
+ padding: var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)));
221
+ padding-block: var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial)));
222
+ padding-inline: var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial)));
223
+ padding-top: var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial)));
224
+ padding-right: var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial)));
225
+ padding-bottom: var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial)));
226
+ padding-left: var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial)));
227
+ width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial)));
228
+ min-width: var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)));
229
+ max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)));
230
+ height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial)));
231
+ min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)));
232
+ max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)));
233
+ position: var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)));
234
+ inset: var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial)));
235
+ top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial)));
236
+ right: var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial)));
237
+ bottom: var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial)));
238
+ left: var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial)));
239
+ overflow: var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)));
240
+ overflow-x: var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)));
241
+ overflow-y: var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)));
242
+ flex-basis: var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)));
243
+ flex-grow: var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)));
244
+ flex-shrink: var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)));
245
+ grid-area: var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)));
246
+ grid-column: var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)));
247
+ grid-column-start: var(
248
+ --ak-grid-column-start-md,
249
+ var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
250
+ );
251
+ grid-column-end: var(
252
+ --ak-grid-column-end-md,
253
+ var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial))
254
+ );
255
+ grid-row: var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)));
256
+ grid-row-start: var(
257
+ --ak-grid-row-start-md,
258
+ var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial))
259
+ );
260
+ grid-row-end: var(
261
+ --ak-grid-row-end-md,
262
+ var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial))
263
+ );
264
+ gap: var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial)));
265
+ column-gap: var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)));
266
+ row-gap: var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)));
267
+ flex-direction: var(
268
+ --ak-flex-direction-md,
269
+ var(--ak-flex-direction-sm, var(--ak-flex-direction-initial))
270
+ );
271
+ align-items: var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)));
272
+ justify-content: var(
273
+ --ak-justify-content-md,
274
+ var(--ak-justify-content-sm, var(--ak-justify-content-initial))
275
+ );
276
+ flex-wrap: var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)));
277
+ grid-template-areas: var(
278
+ --ak-grid-template-areas-md,
279
+ var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
280
+ );
281
+ grid-template-columns: var(
282
+ --ak-grid-template-columns-md,
283
+ var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
284
+ );
285
+ grid-template-rows: var(
286
+ --ak-grid-template-rows-md,
287
+ var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
288
+ );
289
+ grid-auto-flow: var(
290
+ --ak-grid-auto-flow-md,
291
+ var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial))
292
+ );
293
+ }
294
+
295
+ :where([data-slot="container"]) {
296
+ display: block;
297
+ width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)));
298
+ max-width: min(
299
+ 100%,
300
+ var(
301
+ --ak-max-width-md,
302
+ var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
303
+ )
304
+ );
305
+ margin-left: var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto)));
306
+ margin-right: var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto)));
307
+ padding-left: var(
308
+ --ak-pl-md,
309
+ var(
310
+ --ak-pl-sm,
311
+ var(
312
+ --ak-pl-initial,
313
+ var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
314
+ )
315
+ )
316
+ );
317
+ padding-right: var(
318
+ --ak-pr-md,
319
+ var(
320
+ --ak-pr-sm,
321
+ var(
322
+ --ak-pr-initial,
323
+ var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
324
+ )
325
+ )
326
+ );
327
+ }
328
+ }
329
+
330
+ @media (min-width: 62rem) {
331
+ :where([data-slot="container"][data-variant="default"]),
332
+ :where([data-slot="container"][data-variant="sm"]),
333
+ :where([data-slot="container"][data-variant="md"]),
334
+ :where([data-slot="container"][data-variant="lg"]) {
335
+ --ak-container-inline-size: 960px;
336
+ }
337
+ }
338
+
339
+ @media (min-width: 64rem) {
340
+ :where([data-ak-layout="true"]) {
341
+ display: var(
342
+ --ak-display-lg,
343
+ var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial)))
344
+ );
345
+ margin: var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial))));
346
+ margin-block: var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial))));
347
+ margin-inline: var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial))));
348
+ margin-top: var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial))));
349
+ margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial))));
350
+ margin-bottom: var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial))));
351
+ margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial))));
352
+ padding: var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial))));
353
+ padding-block: var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial))));
354
+ padding-inline: var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial))));
355
+ padding-top: var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial))));
356
+ padding-right: var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial))));
357
+ padding-bottom: var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial))));
358
+ padding-left: var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial))));
359
+ width: var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial))));
360
+ min-width: var(
361
+ --ak-min-width-lg,
362
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)))
363
+ );
364
+ max-width: var(
365
+ --ak-max-width-lg,
366
+ var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)))
367
+ );
368
+ height: var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial))));
369
+ min-height: var(
370
+ --ak-min-height-lg,
371
+ var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)))
372
+ );
373
+ max-height: var(
374
+ --ak-max-height-lg,
375
+ var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)))
376
+ );
377
+ position: var(
378
+ --ak-position-lg,
379
+ var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)))
380
+ );
381
+ inset: var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial))));
382
+ top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial))));
383
+ right: var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial))));
384
+ bottom: var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial))));
385
+ left: var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial))));
386
+ overflow: var(
387
+ --ak-overflow-lg,
388
+ var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)))
389
+ );
390
+ overflow-x: var(
391
+ --ak-overflow-x-lg,
392
+ var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)))
393
+ );
394
+ overflow-y: var(
395
+ --ak-overflow-y-lg,
396
+ var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)))
397
+ );
398
+ flex-basis: var(
399
+ --ak-flex-basis-lg,
400
+ var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)))
401
+ );
402
+ flex-grow: var(
403
+ --ak-flex-grow-lg,
404
+ var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)))
405
+ );
406
+ flex-shrink: var(
407
+ --ak-flex-shrink-lg,
408
+ var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)))
409
+ );
410
+ grid-area: var(
411
+ --ak-grid-area-lg,
412
+ var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)))
413
+ );
414
+ grid-column: var(
415
+ --ak-grid-column-lg,
416
+ var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)))
417
+ );
418
+ grid-column-start: var(
419
+ --ak-grid-column-start-lg,
420
+ var(
421
+ --ak-grid-column-start-md,
422
+ var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
423
+ )
424
+ );
425
+ grid-column-end: var(
426
+ --ak-grid-column-end-lg,
427
+ var(--ak-grid-column-end-md, var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial)))
428
+ );
429
+ grid-row: var(
430
+ --ak-grid-row-lg,
431
+ var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)))
432
+ );
433
+ grid-row-start: var(
434
+ --ak-grid-row-start-lg,
435
+ var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)))
436
+ );
437
+ grid-row-end: var(
438
+ --ak-grid-row-end-lg,
439
+ var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)))
440
+ );
441
+ gap: var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial))));
442
+ column-gap: var(
443
+ --ak-column-gap-lg,
444
+ var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)))
445
+ );
446
+ row-gap: var(
447
+ --ak-row-gap-lg,
448
+ var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial)))
449
+ );
450
+ flex-direction: var(
451
+ --ak-flex-direction-lg,
452
+ var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)))
453
+ );
454
+ align-items: var(
455
+ --ak-align-items-lg,
456
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)))
457
+ );
458
+ justify-content: var(
459
+ --ak-justify-content-lg,
460
+ var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-initial)))
461
+ );
462
+ flex-wrap: var(
463
+ --ak-flex-wrap-lg,
464
+ var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)))
465
+ );
466
+ grid-template-areas: var(
467
+ --ak-grid-template-areas-lg,
468
+ var(
469
+ --ak-grid-template-areas-md,
470
+ var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
471
+ )
472
+ );
473
+ grid-template-columns: var(
474
+ --ak-grid-template-columns-lg,
475
+ var(
476
+ --ak-grid-template-columns-md,
477
+ var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
478
+ )
479
+ );
480
+ grid-template-rows: var(
481
+ --ak-grid-template-rows-lg,
482
+ var(
483
+ --ak-grid-template-rows-md,
484
+ var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
485
+ )
486
+ );
487
+ grid-auto-flow: var(
488
+ --ak-grid-auto-flow-lg,
489
+ var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)))
490
+ );
491
+ }
492
+
493
+ :where([data-slot="container"]) {
494
+ display: block;
495
+ width: var(
496
+ --ak-width-lg,
497
+ var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%)))
498
+ );
499
+ max-width: min(
500
+ 100%,
501
+ var(
502
+ --ak-max-width-lg,
503
+ var(
504
+ --ak-max-width-md,
505
+ var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
506
+ )
507
+ )
508
+ );
509
+ margin-left: var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto))));
510
+ margin-right: var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto))));
511
+ padding-left: var(
512
+ --ak-pl-lg,
513
+ var(
514
+ --ak-pl-md,
515
+ var(
516
+ --ak-pl-sm,
517
+ var(
518
+ --ak-pl-initial,
519
+ var(
520
+ --ak-px-lg,
521
+ var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
522
+ )
523
+ )
524
+ )
525
+ )
526
+ );
527
+ padding-right: var(
528
+ --ak-pr-lg,
529
+ var(
530
+ --ak-pr-md,
531
+ var(
532
+ --ak-pr-sm,
533
+ var(
534
+ --ak-pr-initial,
535
+ var(
536
+ --ak-px-lg,
537
+ var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter))))
538
+ )
539
+ )
540
+ )
541
+ )
542
+ );
543
+ }
544
+ }
545
+
546
+ @media (min-width: 75rem) {
547
+ :where([data-slot="container"][data-variant="default"]),
548
+ :where([data-slot="container"][data-variant="sm"]),
549
+ :where([data-slot="container"][data-variant="md"]),
550
+ :where([data-slot="container"][data-variant="lg"]),
551
+ :where([data-slot="container"][data-variant="xl"]) {
552
+ --ak-container-inline-size: 1140px;
553
+ }
554
+ }
555
+
556
+ @media (min-width: 80rem) {
557
+ :where([data-ak-layout="true"]) {
558
+ display: var(
559
+ --ak-display-xl,
560
+ var(--ak-display-lg, var(--ak-display-md, var(--ak-display-sm, var(--ak-display-initial))))
561
+ );
562
+ margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-initial)))));
563
+ margin-block: var(
564
+ --ak-my-xl,
565
+ var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-initial))))
566
+ );
567
+ margin-inline: var(
568
+ --ak-mx-xl,
569
+ var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-initial))))
570
+ );
571
+ margin-top: var(
572
+ --ak-mt-xl,
573
+ var(--ak-mt-lg, var(--ak-mt-md, var(--ak-mt-sm, var(--ak-mt-initial))))
574
+ );
575
+ margin-right: var(
576
+ --ak-mr-xl,
577
+ var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial))))
578
+ );
579
+ margin-bottom: var(
580
+ --ak-mb-xl,
581
+ var(--ak-mb-lg, var(--ak-mb-md, var(--ak-mb-sm, var(--ak-mb-initial))))
582
+ );
583
+ margin-left: var(
584
+ --ak-ml-xl,
585
+ var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial))))
586
+ );
587
+ padding: var(--ak-p-xl, var(--ak-p-lg, var(--ak-p-md, var(--ak-p-sm, var(--ak-p-initial)))));
588
+ padding-block: var(
589
+ --ak-py-xl,
590
+ var(--ak-py-lg, var(--ak-py-md, var(--ak-py-sm, var(--ak-py-initial))))
591
+ );
592
+ padding-inline: var(
593
+ --ak-px-xl,
594
+ var(--ak-px-lg, var(--ak-px-md, var(--ak-px-sm, var(--ak-px-initial))))
595
+ );
596
+ padding-top: var(
597
+ --ak-pt-xl,
598
+ var(--ak-pt-lg, var(--ak-pt-md, var(--ak-pt-sm, var(--ak-pt-initial))))
599
+ );
600
+ padding-right: var(
601
+ --ak-pr-xl,
602
+ var(--ak-pr-lg, var(--ak-pr-md, var(--ak-pr-sm, var(--ak-pr-initial))))
603
+ );
604
+ padding-bottom: var(
605
+ --ak-pb-xl,
606
+ var(--ak-pb-lg, var(--ak-pb-md, var(--ak-pb-sm, var(--ak-pb-initial))))
607
+ );
608
+ padding-left: var(
609
+ --ak-pl-xl,
610
+ var(--ak-pl-lg, var(--ak-pl-md, var(--ak-pl-sm, var(--ak-pl-initial))))
611
+ );
612
+ width: var(
613
+ --ak-width-xl,
614
+ var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial))))
615
+ );
616
+ min-width: var(
617
+ --ak-min-width-xl,
618
+ var(
619
+ --ak-min-width-lg,
620
+ var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-initial)))
621
+ )
622
+ );
623
+ max-width: var(
624
+ --ak-max-width-xl,
625
+ var(
626
+ --ak-max-width-lg,
627
+ var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-initial)))
628
+ )
629
+ );
630
+ height: var(
631
+ --ak-height-xl,
632
+ var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-initial))))
633
+ );
634
+ min-height: var(
635
+ --ak-min-height-xl,
636
+ var(
637
+ --ak-min-height-lg,
638
+ var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-initial)))
639
+ )
640
+ );
641
+ max-height: var(
642
+ --ak-max-height-xl,
643
+ var(
644
+ --ak-max-height-lg,
645
+ var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-initial)))
646
+ )
647
+ );
648
+ position: var(
649
+ --ak-position-xl,
650
+ var(
651
+ --ak-position-lg,
652
+ var(--ak-position-md, var(--ak-position-sm, var(--ak-position-initial)))
653
+ )
654
+ );
655
+ inset: var(
656
+ --ak-inset-xl,
657
+ var(--ak-inset-lg, var(--ak-inset-md, var(--ak-inset-sm, var(--ak-inset-initial))))
658
+ );
659
+ top: var(
660
+ --ak-top-xl,
661
+ var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-initial))))
662
+ );
663
+ right: var(
664
+ --ak-right-xl,
665
+ var(--ak-right-lg, var(--ak-right-md, var(--ak-right-sm, var(--ak-right-initial))))
666
+ );
667
+ bottom: var(
668
+ --ak-bottom-xl,
669
+ var(--ak-bottom-lg, var(--ak-bottom-md, var(--ak-bottom-sm, var(--ak-bottom-initial))))
670
+ );
671
+ left: var(
672
+ --ak-left-xl,
673
+ var(--ak-left-lg, var(--ak-left-md, var(--ak-left-sm, var(--ak-left-initial))))
674
+ );
675
+ overflow: var(
676
+ --ak-overflow-xl,
677
+ var(
678
+ --ak-overflow-lg,
679
+ var(--ak-overflow-md, var(--ak-overflow-sm, var(--ak-overflow-initial)))
680
+ )
681
+ );
682
+ overflow-x: var(
683
+ --ak-overflow-x-xl,
684
+ var(
685
+ --ak-overflow-x-lg,
686
+ var(--ak-overflow-x-md, var(--ak-overflow-x-sm, var(--ak-overflow-x-initial)))
687
+ )
688
+ );
689
+ overflow-y: var(
690
+ --ak-overflow-y-xl,
691
+ var(
692
+ --ak-overflow-y-lg,
693
+ var(--ak-overflow-y-md, var(--ak-overflow-y-sm, var(--ak-overflow-y-initial)))
694
+ )
695
+ );
696
+ flex-basis: var(
697
+ --ak-flex-basis-xl,
698
+ var(
699
+ --ak-flex-basis-lg,
700
+ var(--ak-flex-basis-md, var(--ak-flex-basis-sm, var(--ak-flex-basis-initial)))
701
+ )
702
+ );
703
+ flex-grow: var(
704
+ --ak-flex-grow-xl,
705
+ var(
706
+ --ak-flex-grow-lg,
707
+ var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-initial)))
708
+ )
709
+ );
710
+ flex-shrink: var(
711
+ --ak-flex-shrink-xl,
712
+ var(
713
+ --ak-flex-shrink-lg,
714
+ var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-initial)))
715
+ )
716
+ );
717
+ grid-area: var(
718
+ --ak-grid-area-xl,
719
+ var(
720
+ --ak-grid-area-lg,
721
+ var(--ak-grid-area-md, var(--ak-grid-area-sm, var(--ak-grid-area-initial)))
722
+ )
723
+ );
724
+ grid-column: var(
725
+ --ak-grid-column-xl,
726
+ var(
727
+ --ak-grid-column-lg,
728
+ var(--ak-grid-column-md, var(--ak-grid-column-sm, var(--ak-grid-column-initial)))
729
+ )
730
+ );
731
+ grid-column-start: var(
732
+ --ak-grid-column-start-xl,
733
+ var(
734
+ --ak-grid-column-start-lg,
735
+ var(
736
+ --ak-grid-column-start-md,
737
+ var(--ak-grid-column-start-sm, var(--ak-grid-column-start-initial))
738
+ )
739
+ )
740
+ );
741
+ grid-column-end: var(
742
+ --ak-grid-column-end-xl,
743
+ var(
744
+ --ak-grid-column-end-lg,
745
+ var(
746
+ --ak-grid-column-end-md,
747
+ var(--ak-grid-column-end-sm, var(--ak-grid-column-end-initial))
748
+ )
749
+ )
750
+ );
751
+ grid-row: var(
752
+ --ak-grid-row-xl,
753
+ var(
754
+ --ak-grid-row-lg,
755
+ var(--ak-grid-row-md, var(--ak-grid-row-sm, var(--ak-grid-row-initial)))
756
+ )
757
+ );
758
+ grid-row-start: var(
759
+ --ak-grid-row-start-xl,
760
+ var(
761
+ --ak-grid-row-start-lg,
762
+ var(--ak-grid-row-start-md, var(--ak-grid-row-start-sm, var(--ak-grid-row-start-initial)))
763
+ )
764
+ );
765
+ grid-row-end: var(
766
+ --ak-grid-row-end-xl,
767
+ var(
768
+ --ak-grid-row-end-lg,
769
+ var(--ak-grid-row-end-md, var(--ak-grid-row-end-sm, var(--ak-grid-row-end-initial)))
770
+ )
771
+ );
772
+ gap: var(
773
+ --ak-gap-xl,
774
+ var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-initial))))
775
+ );
776
+ column-gap: var(
777
+ --ak-column-gap-xl,
778
+ var(
779
+ --ak-column-gap-lg,
780
+ var(--ak-column-gap-md, var(--ak-column-gap-sm, var(--ak-column-gap-initial)))
781
+ )
782
+ );
783
+ row-gap: var(
784
+ --ak-row-gap-xl,
785
+ var(--ak-row-gap-lg, var(--ak-row-gap-md, var(--ak-row-gap-sm, var(--ak-row-gap-initial))))
786
+ );
787
+ flex-direction: var(
788
+ --ak-flex-direction-xl,
789
+ var(
790
+ --ak-flex-direction-lg,
791
+ var(--ak-flex-direction-md, var(--ak-flex-direction-sm, var(--ak-flex-direction-initial)))
792
+ )
793
+ );
794
+ align-items: var(
795
+ --ak-align-items-xl,
796
+ var(
797
+ --ak-align-items-lg,
798
+ var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-initial)))
799
+ )
800
+ );
801
+ justify-content: var(
802
+ --ak-justify-content-xl,
803
+ var(
804
+ --ak-justify-content-lg,
805
+ var(
806
+ --ak-justify-content-md,
807
+ var(--ak-justify-content-sm, var(--ak-justify-content-initial))
808
+ )
809
+ )
810
+ );
811
+ flex-wrap: var(
812
+ --ak-flex-wrap-xl,
813
+ var(
814
+ --ak-flex-wrap-lg,
815
+ var(--ak-flex-wrap-md, var(--ak-flex-wrap-sm, var(--ak-flex-wrap-initial)))
816
+ )
817
+ );
818
+ grid-template-areas: var(
819
+ --ak-grid-template-areas-xl,
820
+ var(
821
+ --ak-grid-template-areas-lg,
822
+ var(
823
+ --ak-grid-template-areas-md,
824
+ var(--ak-grid-template-areas-sm, var(--ak-grid-template-areas-initial))
825
+ )
826
+ )
827
+ );
828
+ grid-template-columns: var(
829
+ --ak-grid-template-columns-xl,
830
+ var(
831
+ --ak-grid-template-columns-lg,
832
+ var(
833
+ --ak-grid-template-columns-md,
834
+ var(--ak-grid-template-columns-sm, var(--ak-grid-template-columns-initial))
835
+ )
836
+ )
837
+ );
838
+ grid-template-rows: var(
839
+ --ak-grid-template-rows-xl,
840
+ var(
841
+ --ak-grid-template-rows-lg,
842
+ var(
843
+ --ak-grid-template-rows-md,
844
+ var(--ak-grid-template-rows-sm, var(--ak-grid-template-rows-initial))
845
+ )
846
+ )
847
+ );
848
+ grid-auto-flow: var(
849
+ --ak-grid-auto-flow-xl,
850
+ var(
851
+ --ak-grid-auto-flow-lg,
852
+ var(--ak-grid-auto-flow-md, var(--ak-grid-auto-flow-sm, var(--ak-grid-auto-flow-initial)))
853
+ )
854
+ );
855
+ }
856
+
857
+ :where([data-slot="container"]) {
858
+ display: block;
859
+ width: var(
860
+ --ak-width-xl,
861
+ var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-initial, 100%))))
862
+ );
863
+ max-width: min(
864
+ 100%,
865
+ var(
866
+ --ak-max-width-xl,
867
+ var(
868
+ --ak-max-width-lg,
869
+ var(
870
+ --ak-max-width-md,
871
+ var(--ak-max-width-sm, var(--ak-max-width-initial, var(--ak-container-inline-size)))
872
+ )
873
+ )
874
+ )
875
+ );
876
+ margin-left: var(
877
+ --ak-ml-xl,
878
+ var(--ak-ml-lg, var(--ak-ml-md, var(--ak-ml-sm, var(--ak-ml-initial, auto))))
879
+ );
880
+ margin-right: var(
881
+ --ak-mr-xl,
882
+ var(--ak-mr-lg, var(--ak-mr-md, var(--ak-mr-sm, var(--ak-mr-initial, auto))))
883
+ );
884
+ padding-left: var(
885
+ --ak-pl-xl,
886
+ var(
887
+ --ak-pl-lg,
888
+ var(
889
+ --ak-pl-md,
890
+ var(
891
+ --ak-pl-sm,
892
+ var(
893
+ --ak-pl-initial,
894
+ var(
895
+ --ak-px-xl,
896
+ var(
897
+ --ak-px-lg,
898
+ var(
899
+ --ak-px-md,
900
+ var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))
901
+ )
902
+ )
903
+ )
904
+ )
905
+ )
906
+ )
907
+ )
908
+ );
909
+ padding-right: var(
910
+ --ak-pr-xl,
911
+ var(
912
+ --ak-pr-lg,
913
+ var(
914
+ --ak-pr-md,
915
+ var(
916
+ --ak-pr-sm,
917
+ var(
918
+ --ak-pr-initial,
919
+ var(
920
+ --ak-px-xl,
921
+ var(
922
+ --ak-px-lg,
923
+ var(
924
+ --ak-px-md,
925
+ var(--ak-px-sm, var(--ak-px-initial, var(--ak-layout-page-gutter)))
926
+ )
927
+ )
928
+ )
929
+ )
930
+ )
931
+ )
932
+ )
933
+ );
934
+ }
935
+ }
936
+
937
+ @media (min-width: 87.5rem) {
938
+ :where([data-slot="container"][data-variant="default"]),
939
+ :where([data-slot="container"][data-variant="sm"]),
940
+ :where([data-slot="container"][data-variant="md"]),
941
+ :where([data-slot="container"][data-variant="lg"]),
942
+ :where([data-slot="container"][data-variant="xl"]),
943
+ :where([data-slot="container"][data-variant="xxl"]) {
944
+ --ak-container-inline-size: 1320px;
945
+ }
946
+ }