@feminab/box-ui 0.1.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 (295) hide show
  1. package/.babelrc +15 -0
  2. package/.storybook/main.ts +20 -0
  3. package/.storybook/preview.ts +15 -0
  4. package/README.md +46 -0
  5. package/dist/@interfaces/Badge.d.d.ts +12 -0
  6. package/dist/@interfaces/Badge.d.d.ts.map +1 -0
  7. package/dist/@interfaces/Button.d.d.ts +15 -0
  8. package/dist/@interfaces/Button.d.d.ts.map +1 -0
  9. package/dist/@interfaces/Color.d.d.ts +6 -0
  10. package/dist/@interfaces/Color.d.d.ts.map +1 -0
  11. package/dist/@interfaces/IButtonItem.d.d.ts +6 -0
  12. package/dist/@interfaces/IButtonItem.d.d.ts.map +1 -0
  13. package/dist/@interfaces/ISubNavItem.d.d.ts +9 -0
  14. package/dist/@interfaces/ISubNavItem.d.d.ts.map +1 -0
  15. package/dist/@interfaces/MobileNavProps.d.d.ts +5 -0
  16. package/dist/@interfaces/MobileNavProps.d.d.ts.map +1 -0
  17. package/dist/@interfaces/NavItem.d.d.ts +22 -0
  18. package/dist/@interfaces/NavItem.d.d.ts.map +1 -0
  19. package/dist/@interfaces/Pagination.d.d.ts +8 -0
  20. package/dist/@interfaces/Pagination.d.d.ts.map +1 -0
  21. package/dist/@interfaces/Select.d.d.ts +14 -0
  22. package/dist/@interfaces/Select.d.d.ts.map +1 -0
  23. package/dist/@interfaces/SideNavProps.d.d.ts +11 -0
  24. package/dist/@interfaces/SideNavProps.d.d.ts.map +1 -0
  25. package/dist/@interfaces/TextInput.d.d.ts +15 -0
  26. package/dist/@interfaces/TextInput.d.d.ts.map +1 -0
  27. package/dist/@interfaces/index.d.ts +12 -0
  28. package/dist/@interfaces/index.d.ts.map +1 -0
  29. package/dist/Badge.d.ts +4 -0
  30. package/dist/Badge.d.ts.map +1 -0
  31. package/dist/Button.d.ts +4 -0
  32. package/dist/Button.d.ts.map +1 -0
  33. package/dist/ButtonGroup.d.ts +9 -0
  34. package/dist/ButtonGroup.d.ts.map +1 -0
  35. package/dist/ColorBox.d.ts +4 -0
  36. package/dist/ColorBox.d.ts.map +1 -0
  37. package/dist/Header.d.ts +13 -0
  38. package/dist/Header.d.ts.map +1 -0
  39. package/dist/Nav/MobileNav.d.ts +4 -0
  40. package/dist/Nav/MobileNav.d.ts.map +1 -0
  41. package/dist/Nav/NavItem.d.ts +4 -0
  42. package/dist/Nav/NavItem.d.ts.map +1 -0
  43. package/dist/Nav/SideNav.d.ts +5 -0
  44. package/dist/Nav/SideNav.d.ts.map +1 -0
  45. package/dist/Nav/SubNavItem.d.ts +4 -0
  46. package/dist/Nav/SubNavItem.d.ts.map +1 -0
  47. package/dist/Page.d.ts +3 -0
  48. package/dist/Page.d.ts.map +1 -0
  49. package/dist/Paginate.d.ts +4 -0
  50. package/dist/Paginate.d.ts.map +1 -0
  51. package/dist/Select.d.ts +4 -0
  52. package/dist/Select.d.ts.map +1 -0
  53. package/dist/StoryLayout.d.ts +9 -0
  54. package/dist/StoryLayout.d.ts.map +1 -0
  55. package/dist/TextInput.d.ts +4 -0
  56. package/dist/TextInput.d.ts.map +1 -0
  57. package/dist/Typography.d.ts +14 -0
  58. package/dist/Typography.d.ts.map +1 -0
  59. package/dist/box-ui.cjs.development.js +1122 -0
  60. package/dist/box-ui.cjs.development.js.map +1 -0
  61. package/dist/box-ui.cjs.production.min.js +2 -0
  62. package/dist/box-ui.cjs.production.min.js.map +1 -0
  63. package/dist/box-ui.esm.js +1096 -0
  64. package/dist/box-ui.esm.js.map +1 -0
  65. package/dist/data/colors.d.ts +3 -0
  66. package/dist/data/colors.d.ts.map +1 -0
  67. package/dist/data/countries.d.ts +3 -0
  68. package/dist/data/countries.d.ts.map +1 -0
  69. package/dist/data/images/index.d.ts +5 -0
  70. package/dist/data/images/index.d.ts.map +1 -0
  71. package/dist/data/index.d.ts +6 -0
  72. package/dist/data/index.d.ts.map +1 -0
  73. package/dist/data/navItems.d.ts +4 -0
  74. package/dist/data/navItems.d.ts.map +1 -0
  75. package/dist/data/options.d.ts +5 -0
  76. package/dist/data/options.d.ts.map +1 -0
  77. package/dist/data/prices.d.ts +3 -0
  78. package/dist/data/prices.d.ts.map +1 -0
  79. package/dist/hooks/useIconClassName.d.ts +5 -0
  80. package/dist/hooks/useIconClassName.d.ts.map +1 -0
  81. package/dist/hooks/useIconProps.d.ts +5 -0
  82. package/dist/hooks/useIconProps.d.ts.map +1 -0
  83. package/dist/index.d.ts +14 -0
  84. package/dist/index.d.ts.map +1 -0
  85. package/dist/index.js +8 -0
  86. package/dist/reportWebVitals.d.ts +4 -0
  87. package/dist/reportWebVitals.d.ts.map +1 -0
  88. package/dist/setupTests.d.ts +2 -0
  89. package/dist/setupTests.d.ts.map +1 -0
  90. package/dist/stories/Badge.stories.d.ts +13 -0
  91. package/dist/stories/Badge.stories.d.ts.map +1 -0
  92. package/dist/stories/Button.stories.d.ts +16 -0
  93. package/dist/stories/Button.stories.d.ts.map +1 -0
  94. package/dist/stories/ButtonGroup.stories.d.ts +11 -0
  95. package/dist/stories/ButtonGroup.stories.d.ts.map +1 -0
  96. package/dist/stories/Colors.stories.d.ts +8 -0
  97. package/dist/stories/Colors.stories.d.ts.map +1 -0
  98. package/dist/stories/Header.stories.d.ts +20 -0
  99. package/dist/stories/Header.stories.d.ts.map +1 -0
  100. package/dist/stories/MobileNav.stories.d.ts +10 -0
  101. package/dist/stories/MobileNav.stories.d.ts.map +1 -0
  102. package/dist/stories/Page.stories.d.ts +14 -0
  103. package/dist/stories/Page.stories.d.ts.map +1 -0
  104. package/dist/stories/Paginate.stories.d.ts +11 -0
  105. package/dist/stories/Paginate.stories.d.ts.map +1 -0
  106. package/dist/stories/Select.stories.d.ts +11 -0
  107. package/dist/stories/Select.stories.d.ts.map +1 -0
  108. package/dist/stories/SideNav.stories.d.ts +10 -0
  109. package/dist/stories/SideNav.stories.d.ts.map +1 -0
  110. package/dist/stories/TextInput.stories.d.ts +11 -0
  111. package/dist/stories/TextInput.stories.d.ts.map +1 -0
  112. package/dist/stories/Typography.stories.d.ts +11 -0
  113. package/dist/stories/Typography.stories.d.ts.map +1 -0
  114. package/output.css +639 -0
  115. package/package.json +91 -0
  116. package/postcss.config.js +6 -0
  117. package/public/favicon.ico +0 -0
  118. package/public/index.html +43 -0
  119. package/public/logo192.png +0 -0
  120. package/public/logo512.png +0 -0
  121. package/public/manifest.json +25 -0
  122. package/public/robots.txt +3 -0
  123. package/src/@interfaces/Badge.d.tsx +13 -0
  124. package/src/@interfaces/Button.d.tsx +17 -0
  125. package/src/@interfaces/Color.d.tsx +5 -0
  126. package/src/@interfaces/IButtonItem.d.tsx +6 -0
  127. package/src/@interfaces/ISubNavItem.d.tsx +10 -0
  128. package/src/@interfaces/MobileNavProps.d.tsx +4 -0
  129. package/src/@interfaces/NavItem.d.tsx +22 -0
  130. package/src/@interfaces/Pagination.d.tsx +7 -0
  131. package/src/@interfaces/Select.d.tsx +12 -0
  132. package/src/@interfaces/SideNavProps.d.tsx +11 -0
  133. package/src/@interfaces/TextInput.d.tsx +13 -0
  134. package/src/@interfaces/index.tsx +11 -0
  135. package/src/Badge.tsx +44 -0
  136. package/src/Button.tsx +132 -0
  137. package/src/ButtonGroup.tsx +37 -0
  138. package/src/ColorBox.tsx +15 -0
  139. package/src/Header.tsx +55 -0
  140. package/src/Nav/MobileNav.tsx +35 -0
  141. package/src/Nav/NavItem.tsx +101 -0
  142. package/src/Nav/SideNav.tsx +165 -0
  143. package/src/Nav/SubNavItem.tsx +39 -0
  144. package/src/Page.tsx +72 -0
  145. package/src/Paginate.tsx +102 -0
  146. package/src/Select.tsx +102 -0
  147. package/src/StoryLayout.tsx +17 -0
  148. package/src/TextInput.tsx +103 -0
  149. package/src/Typography.tsx +81 -0
  150. package/src/data/colors.tsx +279 -0
  151. package/src/data/countries.tsx +57 -0
  152. package/src/data/images/be.svg +1 -0
  153. package/src/data/images/de.svg +1 -0
  154. package/src/data/images/fr.svg +1 -0
  155. package/src/data/images/in.svg +1 -0
  156. package/src/data/images/index.tsx +33 -0
  157. package/src/data/images/it.svg +1 -0
  158. package/src/data/images/logo.svg +23 -0
  159. package/src/data/images/nl.svg +1 -0
  160. package/src/data/images/ru.svg +1 -0
  161. package/src/data/images/us.svg +1 -0
  162. package/src/data/index.tsx +5 -0
  163. package/src/data/navItems.tsx +109 -0
  164. package/src/data/options.tsx +51 -0
  165. package/src/data/prices.tsx +36 -0
  166. package/src/hooks/useIconClassName.tsx +14 -0
  167. package/src/hooks/useIconProps.tsx +19 -0
  168. package/src/index.js +15 -0
  169. package/src/react-app-env.d.ts +1 -0
  170. package/src/reportWebVitals.ts +15 -0
  171. package/src/setupTests.ts +5 -0
  172. package/src/stories/Badge.stories.tsx +86 -0
  173. package/src/stories/Button.stories.tsx +104 -0
  174. package/src/stories/ButtonGroup.stories.tsx +83 -0
  175. package/src/stories/Colors.stories.tsx +31 -0
  176. package/src/stories/Configure.mdx +364 -0
  177. package/src/stories/Header.stories.ts +33 -0
  178. package/src/stories/MobileNav.stories.tsx +60 -0
  179. package/src/stories/Page.stories.ts +32 -0
  180. package/src/stories/Paginate.stories.tsx +64 -0
  181. package/src/stories/Select.stories.tsx +77 -0
  182. package/src/stories/SideNav.stories.tsx +38 -0
  183. package/src/stories/TextInput.stories.tsx +100 -0
  184. package/src/stories/Typography.stories.tsx +115 -0
  185. package/src/stories/assets/accessibility.png +0 -0
  186. package/src/stories/assets/accessibility.svg +1 -0
  187. package/src/stories/assets/addon-library.png +0 -0
  188. package/src/stories/assets/assets.png +0 -0
  189. package/src/stories/assets/avif-test-image.avif +0 -0
  190. package/src/stories/assets/context.png +0 -0
  191. package/src/stories/assets/discord.svg +1 -0
  192. package/src/stories/assets/docs.png +0 -0
  193. package/src/stories/assets/figma-plugin.png +0 -0
  194. package/src/stories/assets/github.svg +1 -0
  195. package/src/stories/assets/share.png +0 -0
  196. package/src/stories/assets/styling.png +0 -0
  197. package/src/stories/assets/testing.png +0 -0
  198. package/src/stories/assets/theming.png +0 -0
  199. package/src/stories/assets/tutorials.svg +1 -0
  200. package/src/stories/assets/youtube.svg +1 -0
  201. package/src/styles/global.css +367 -0
  202. package/storybook-static/125.65b26339.iframe.bundle.js +405 -0
  203. package/storybook-static/125.65b26339.iframe.bundle.js.LICENSE.txt +9 -0
  204. package/storybook-static/125.65b26339.iframe.bundle.js.map +1 -0
  205. package/storybook-static/13.0638081a.iframe.bundle.js +2 -0
  206. package/storybook-static/13.0638081a.iframe.bundle.js.LICENSE.txt +9 -0
  207. package/storybook-static/161.a19908ac.iframe.bundle.js +2 -0
  208. package/storybook-static/161.a19908ac.iframe.bundle.js.LICENSE.txt +9 -0
  209. package/storybook-static/161528bb6c25115b3f83.png +0 -0
  210. package/storybook-static/167.3fa3a909.iframe.bundle.js +1 -0
  211. package/storybook-static/294.ce38f65c.iframe.bundle.js +1 -0
  212. package/storybook-static/2dbc69731c3f9930a271.png +0 -0
  213. package/storybook-static/314.568bd9af.iframe.bundle.js +2 -0
  214. package/storybook-static/314.568bd9af.iframe.bundle.js.LICENSE.txt +15 -0
  215. package/storybook-static/364.0b18ef67.iframe.bundle.js +1 -0
  216. package/storybook-static/735.1625d9f4.iframe.bundle.js +2 -0
  217. package/storybook-static/735.1625d9f4.iframe.bundle.js.LICENSE.txt +9 -0
  218. package/storybook-static/742.597501f6.iframe.bundle.js +1 -0
  219. package/storybook-static/7a58d2cb9a6358f85e9b.png +0 -0
  220. package/storybook-static/844.aec20bdb.iframe.bundle.js +95 -0
  221. package/storybook-static/844.aec20bdb.iframe.bundle.js.LICENSE.txt +19 -0
  222. package/storybook-static/844.aec20bdb.iframe.bundle.js.map +1 -0
  223. package/storybook-static/9335a1a91b80ad4fec70.png +0 -0
  224. package/storybook-static/936.fd850a3f.iframe.bundle.js +1 -0
  225. package/storybook-static/961.0e5457c5.iframe.bundle.js +2 -0
  226. package/storybook-static/961.0e5457c5.iframe.bundle.js.LICENSE.txt +9 -0
  227. package/storybook-static/c720ced26387af8a9cb2.png +0 -0
  228. package/storybook-static/e93de094692245f1ec04.png +0 -0
  229. package/storybook-static/f7d8b9a8cec7528e0e36.png +0 -0
  230. package/storybook-static/favicon.ico +0 -0
  231. package/storybook-static/favicon.svg +1 -0
  232. package/storybook-static/iframe.html +511 -0
  233. package/storybook-static/index.html +185 -0
  234. package/storybook-static/index.json +1 -0
  235. package/storybook-static/logo192.png +0 -0
  236. package/storybook-static/logo512.png +0 -0
  237. package/storybook-static/main.069281cf.iframe.bundle.js +1 -0
  238. package/storybook-static/manifest.json +25 -0
  239. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  240. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  241. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  242. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  243. package/storybook-static/project.json +1 -0
  244. package/storybook-static/robots.txt +3 -0
  245. package/storybook-static/runtime~main.295ddda4.iframe.bundle.js +1 -0
  246. package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js +331 -0
  247. package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js.LEGAL.txt +51 -0
  248. package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +3 -0
  249. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +12 -0
  250. package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +402 -0
  251. package/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js +242 -0
  252. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +3 -0
  253. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +3 -0
  254. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +3 -0
  255. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +3 -0
  256. package/storybook-static/sb-addons/interactions-11/manager-bundle.js +222 -0
  257. package/storybook-static/sb-addons/links-12/manager-bundle.js +3 -0
  258. package/storybook-static/sb-addons/onboarding-9/manager-bundle.js +127 -0
  259. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  260. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  261. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  262. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  263. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  264. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  265. package/storybook-static/sb-manager/globals-module-info.js +1051 -0
  266. package/storybook-static/sb-manager/globals-runtime.js +41591 -0
  267. package/storybook-static/sb-manager/globals.js +48 -0
  268. package/storybook-static/sb-manager/runtime.js +12048 -0
  269. package/storybook-static/sb-preview/globals.js +33 -0
  270. package/storybook-static/sb-preview/runtime.js +7745 -0
  271. package/storybook-static/static/css/main.08036cd2.css +2294 -0
  272. package/storybook-static/static/css/main.08036cd2.css.map +1 -0
  273. package/storybook-static/static/media/discord.d85804c7f88be863ff119366ab74d826.svg +1 -0
  274. package/storybook-static/static/media/github.e4e8df827592b1ed0288e4678e1965ce.svg +1 -0
  275. package/storybook-static/static/media/tutorials.fde6e46fc254fa77b6e39d1118470f7c.svg +1 -0
  276. package/storybook-static/static/media/youtube.fd046a09fac357359f94cc21068d6560.svg +1 -0
  277. package/storybook-static/stories-Badge-stories.484f7206.iframe.bundle.js +1 -0
  278. package/storybook-static/stories-Button-stories.5e29be85.iframe.bundle.js +1 -0
  279. package/storybook-static/stories-ButtonGroup-stories.cc89968c.iframe.bundle.js +1 -0
  280. package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js +2 -0
  281. package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js.LICENSE.txt +15 -0
  282. package/storybook-static/stories-Configure-mdx.81346d97.iframe.bundle.js +1 -0
  283. package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js +2 -0
  284. package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js.LICENSE.txt +15 -0
  285. package/storybook-static/stories-MobileNav-stories.f04cccdd.iframe.bundle.js +1 -0
  286. package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js +2 -0
  287. package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js.LICENSE.txt +15 -0
  288. package/storybook-static/stories-Paginate-stories.3b161781.iframe.bundle.js +1 -0
  289. package/storybook-static/stories-Select-stories.7556ae0d.iframe.bundle.js +1 -0
  290. package/storybook-static/stories-SideNav-stories.093fac6a.iframe.bundle.js +1 -0
  291. package/storybook-static/stories-TextInput-stories.6d3e15c6.iframe.bundle.js +1 -0
  292. package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js +2 -0
  293. package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js.LICENSE.txt +15 -0
  294. package/tailwind.config.js +113 -0
  295. package/tsconfig.json +29 -0
package/storybook-static/static/css/main.08036cd2.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"static/css/main.08036cd2.css","mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;;;;;;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;;;;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;;;;AAAA;;AAAA;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;;;AAAA;;AAAA;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;;;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;;;AAAA;;AAAA;;;;;;;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAHA;AAAA;AAAA;AAAA;AAGA;AAHA;AAAA;AAAA;AAAA;AAGA;AAxKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA4KA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AA3WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AA8WA;;AA9WA;AAAA;AA8WA;;AA9WA;AAAA;AAAA;AAAA;AA8WA;;AA9WA;;AAAA;AAAA;AA8WA;AAAA;;AA9WA;;AAAA;AAAA;AA8WA;AAAA;;AA9WA;;AAAA;AAAA;AA8WA;AAAA","sources":["webpack://box-ui/./src/styles/global.css"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\n@layer components {\n /* Badge */\n .badge-base {\n @apply inline-flex items-center rounded-2xl font-medium;\n }\n\n .badge-gray {\n @apply bg-gray-100 text-gray-700;\n }\n\n .badge-primary {\n @apply bg-primary-50 text-primary-700;\n }\n\n .badge-error {\n @apply bg-error-50 text-error-700;\n }\n\n .badge-warning {\n @apply bg-warning-50 text-warning-700;\n }\n\n .badge-success {\n @apply bg-success-50 text-success-700;\n }\n\n .badge-sm {\n @apply h-5.5 px-2 text-xs;\n }\n\n .badge-md {\n @apply h-6 px-2.5 text-xs;\n }\n\n .badge-lg {\n @apply h-7 px-3 text-sm;\n }\n\n /* Button */\n .btn-base {\n @apply flex text-center justify-center items-center rounded-lg font-medium focus:outline-none whitespace-nowrap select-none;\n }\n\n .btn-sm {\n @apply h-9 px-3.5 text-sm;\n }\n\n .btn-md {\n @apply h-10 px-4 text-sm;\n }\n\n .btn-lg {\n @apply h-11 px-4.5 text-md;\n }\n\n .btn-xl {\n @apply h-12 px-5 text-md;\n }\n\n .btn-2xl {\n @apply h-15 px-7 text-lg;\n }\n\n .btn-icon-sm {\n @apply h-9 w-9;\n }\n\n .btn-icon-md {\n @apply h-10 w-10;\n }\n\n .btn-icon-lg {\n @apply h-11 w-11;\n }\n\n .btn-icon-xl {\n @apply h-12 w-12;\n }\n\n .btn-icon-2xl {\n @apply h-15 w-15;\n }\n\n /* Primary */\n .btn-primary {\n @apply bg-primary-600 dark:bg-gray-800 text-white dark:text-white;\n }\n\n .btn-primary-hover {\n @apply hover:bg-primary-700 dark:hover:bg-gray-700;\n }\n\n .btn-primary-focus {\n @apply focus:ring-4 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;\n }\n\n .btn-primary-disabled {\n @apply bg-primary-200 dark:bg-gray-400 text-white;\n }\n\n /* Secondary */\n .btn-secondary {\n @apply shadow-sm border border-transparent dark:border-white bg-primary-50 dark:bg-opacity-20 text-primary-700 dark:text-white;\n }\n\n .btn-secondary-hover {\n @apply hover:bg-primary-100 dark:hover:bg-white dark:hover:bg-opacity-40 dark:hover:border-opacity-40 dark:hover:text-white;\n }\n\n .btn-secondary-focus {\n @apply focus:ring-4 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;\n }\n\n .btn-secondary-disabled {\n @apply shadow-sm bg-primary-25 dark:bg-white dark:bg-opacity-20 text-primary-300 dark:border-gray-300 dark:text-gray-300;\n }\n\n /* SecondaryGray */\n .btn-secondaryGray {\n @apply shadow-sm border border-gray-300 dark:border-white bg-white dark:bg-gray-900 text-gray-700 dark:text-white;\n }\n\n .btn-secondaryGray-hover {\n @apply hover:bg-gray-50 dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-300 dark:border-gray-300;\n }\n\n .btn-secondaryGray-focus {\n @apply focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;\n }\n\n .btn-secondaryGray-disabled {\n @apply shadow-sm border border-gray-200 text-gray-300 dark:bg-gray-600 dark:text-white;\n }\n\n /* Tertiary */\n .btn-tertiary {\n @apply bg-white dark:bg-gray-900 text-primary-700;\n }\n\n .btn-tertiary-hover {\n @apply hover:bg-primary-50 dark:hover:bg-white dark:hover:bg-opacity-20;\n }\n\n .btn-tertiary-disabled {\n @apply bg-white dark:bg-gray-900 text-gray-300;\n }\n\n /* TertiaryGray */\n .btn-tertiaryGray {\n @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200;\n }\n\n .btn-tertiaryGray-hover {\n @apply hover:bg-gray-50 dark:hover:bg-white dark:hover:bg-opacity-20 hover:text-gray-800 dark:hover:text-white;\n }\n\n .btn-tertiaryGray-disabled {\n @apply bg-white dark:bg-gray-900 text-gray-300 dark:text-gray-400;\n }\n\n /* Navigation */\n .navItem {\n @apply flex items-center w-full h-10 py-2 rounded-lg cursor-pointer \n text-md whitespace-nowrap select-none\n transition-all duration-100 ease-out\n hover:bg-primary-50 dark:hover:bg-gray-100 dark:hover:bg-opacity-10;\n }\n} \n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n\n\n.App {\n text-align: center;\n }\n \n .App-logo {\n height: 40vmin;\n pointer-events: none;\n }\n \n @media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n }\n \n .App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n }\n \n .App-link {\n color: #61dafb;\n }\n \n @keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n \n\n\n.storybook-button {\n display: inline-block;\n cursor: pointer;\n border: 0;\n border-radius: 3em;\n font-weight: 700;\n line-height: 1;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n .storybook-button--primary {\n background-color: #555ab9;\n color: white;\n }\n .storybook-button--secondary {\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n background-color: transparent;\n color: #333;\n }\n .storybook-button--small {\n padding: 10px 16px;\n font-size: 12px;\n }\n .storybook-button--medium {\n padding: 11px 20px;\n font-size: 14px;\n }\n .storybook-button--large {\n padding: 12px 24px;\n font-size: 16px;\n }\n \n\n .storybook-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n \n .storybook-header svg {\n display: inline-block;\n vertical-align: top;\n }\n \n .storybook-header h1 {\n display: inline-block;\n vertical-align: top;\n margin: 6px 0 6px 10px;\n font-weight: 700;\n font-size: 20px;\n line-height: 1;\n }\n \n .storybook-header button + button {\n margin-left: 10px;\n }\n \n .storybook-header .welcome {\n margin-right: 10px;\n color: #333;\n font-size: 14px;\n }\n \n\n .storybook-page {\n margin: 0 auto;\n padding: 48px 20px;\n max-width: 600px;\n color: #333;\n font-size: 14px;\n line-height: 24px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n \n .storybook-page h2 {\n display: inline-block;\n vertical-align: top;\n margin: 0 0 4px;\n font-weight: 700;\n font-size: 32px;\n line-height: 1;\n }\n \n .storybook-page p {\n margin: 1em 0;\n }\n \n .storybook-page a {\n color: inherit;\n }\n \n .storybook-page ul {\n margin: 1em 0;\n padding-left: 30px;\n }\n \n .storybook-page li {\n margin-bottom: 8px;\n }\n \n .storybook-page .tip {\n display: inline-block;\n vertical-align: top;\n margin-right: 10px;\n border-radius: 1em;\n background: #e7fdd8;\n padding: 4px 12px;\n color: #357a14;\n font-weight: 700;\n font-size: 11px;\n line-height: 12px;\n }\n \n .storybook-page .tip-wrapper {\n margin-top: 40px;\n margin-bottom: 40px;\n font-size: 13px;\n line-height: 20px;\n }\n \n .storybook-page .tip-wrapper svg {\n display: inline-block;\n vertical-align: top;\n margin-top: 3px;\n margin-right: 4px;\n width: 12px;\n height: 12px;\n }\n \n .storybook-page .tip-wrapper svg path {\n fill: #1ea7fd;\n }\n \n\n "],"names":[],"sourceRoot":""}
package/storybook-static/static/media/discord.d85804c7f88be863ff119366ab74d826.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177575)"><mask id="mask0_10031_177575" style="mask-type:luminance" width="33" height="25" x="0" y="4" maskUnits="userSpaceOnUse"><path fill="#fff" d="M32.5034 4.00195H0.503906V28.7758H32.5034V4.00195Z"/></mask><g mask="url(#mask0_10031_177575)"><path fill="#5865F2" d="M27.5928 6.20817C25.5533 5.27289 23.3662 4.58382 21.0794 4.18916C21.0378 4.18154 20.9962 4.20057 20.9747 4.23864C20.6935 4.73863 20.3819 5.3909 20.1637 5.90358C17.7042 5.53558 15.2573 5.53558 12.8481 5.90358C12.6299 5.37951 12.307 4.73863 12.0245 4.23864C12.003 4.20184 11.9614 4.18281 11.9198 4.18916C9.63431 4.58255 7.44721 5.27163 5.40641 6.20817C5.38874 6.21578 5.3736 6.22848 5.36355 6.24497C1.21508 12.439 0.078646 18.4809 0.636144 24.4478C0.638667 24.477 0.655064 24.5049 0.677768 24.5227C3.41481 26.5315 6.06609 27.7511 8.66815 28.5594C8.70979 28.5721 8.75392 28.5569 8.78042 28.5226C9.39594 27.6826 9.94461 26.7968 10.4151 25.8653C10.4428 25.8107 10.4163 25.746 10.3596 25.7244C9.48927 25.3945 8.66058 24.9922 7.86343 24.5354C7.80038 24.4986 7.79533 24.4084 7.85333 24.3653C8.02108 24.2397 8.18888 24.109 8.34906 23.977C8.37804 23.9529 8.41842 23.9478 8.45249 23.963C13.6894 26.3526 19.359 26.3526 24.5341 23.963C24.5682 23.9465 24.6086 23.9516 24.6388 23.9757C24.799 24.1077 24.9668 24.2397 25.1358 24.3653C25.1938 24.4084 25.19 24.4986 25.127 24.5354C24.3298 25.0011 23.5011 25.3945 22.6296 25.7232C22.5728 25.7447 22.5476 25.8107 22.5754 25.8653C23.0559 26.7955 23.6046 27.6812 24.2087 28.5213C24.234 28.5569 24.2794 28.5721 24.321 28.5594C26.9357 27.7511 29.5869 26.5315 32.324 24.5227C32.348 24.5049 32.3631 24.4783 32.3656 24.4491C33.0328 17.5506 31.2481 11.5584 27.6344 6.24623C27.6256 6.22848 27.6105 6.21578 27.5928 6.20817ZM11.1971 20.8146C9.62043 20.8146 8.32129 19.3679 8.32129 17.5913C8.32129 15.8146 9.59523 14.368 11.1971 14.368C12.8115 14.368 14.0981 15.8273 14.0729 17.5913C14.0729 19.3679 12.7989 20.8146 11.1971 20.8146ZM21.8299 20.8146C20.2533 20.8146 18.9541 19.3679 18.9541 17.5913C18.9541 15.8146 20.228 14.368 21.8299 14.368C23.4444 14.368 24.7309 15.8273 24.7057 17.5913C24.7057 19.3679 23.4444 20.8146 21.8299 20.8146Z"/></g></g><defs><clipPath id="clip0_10031_177575"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
package/storybook-static/static/media/github.e4e8df827592b1ed0288e4678e1965ce.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#161614" d="M16.0001 0C7.16466 0 0 7.17472 0 16.0256C0 23.1061 4.58452 29.1131 10.9419 31.2322C11.7415 31.3805 12.0351 30.8845 12.0351 30.4613C12.0351 30.0791 12.0202 28.8167 12.0133 27.4776C7.56209 28.447 6.62283 25.5868 6.62283 25.5868C5.89499 23.7345 4.8463 23.2419 4.8463 23.2419C3.39461 22.2473 4.95573 22.2678 4.95573 22.2678C6.56242 22.3808 7.40842 23.9192 7.40842 23.9192C8.83547 26.3691 11.1514 25.6609 12.0645 25.2514C12.2081 24.2156 12.6227 23.5087 13.0803 23.1085C9.52648 22.7032 5.7906 21.3291 5.7906 15.1886C5.7906 13.4389 6.41563 12.0094 7.43916 10.8871C7.27303 10.4834 6.72537 8.85349 7.59415 6.64609C7.59415 6.64609 8.93774 6.21539 11.9953 8.28877C13.2716 7.9337 14.6404 7.75563 16.0001 7.74953C17.3599 7.75563 18.7297 7.9337 20.0084 8.28877C23.0623 6.21539 24.404 6.64609 24.404 6.64609C25.2749 8.85349 24.727 10.4834 24.5608 10.8871C25.5868 12.0094 26.2075 13.4389 26.2075 15.1886C26.2075 21.3437 22.4645 22.699 18.9017 23.0957C19.4756 23.593 19.9869 24.5683 19.9869 26.0634C19.9869 28.2077 19.9684 29.9334 19.9684 30.4613C19.9684 30.8877 20.2564 31.3874 21.0674 31.2301C27.4213 29.1086 32 23.1037 32 16.0256C32 7.17472 24.8364 0 16.0001 0ZM5.99257 22.8288C5.95733 22.9084 5.83227 22.9322 5.71834 22.8776C5.60229 22.8253 5.53711 22.7168 5.57474 22.6369C5.60918 22.5549 5.7345 22.5321 5.85029 22.587C5.9666 22.6393 6.03284 22.7489 5.99257 22.8288ZM6.7796 23.5321C6.70329 23.603 6.55412 23.5701 6.45291 23.4581C6.34825 23.3464 6.32864 23.197 6.40601 23.125C6.4847 23.0542 6.62937 23.0874 6.73429 23.1991C6.83895 23.3121 6.85935 23.4605 6.7796 23.5321ZM7.31953 24.4321C7.2215 24.5003 7.0612 24.4363 6.96211 24.2938C6.86407 24.1513 6.86407 23.9804 6.96422 23.9119C7.06358 23.8435 7.2215 23.905 7.32191 24.0465C7.41968 24.1914 7.41968 24.3623 7.31953 24.4321ZM8.23267 25.4743C8.14497 25.5712 7.95818 25.5452 7.82146 25.413C7.68156 25.2838 7.64261 25.1004 7.73058 25.0035C7.81934 24.9064 8.00719 24.9337 8.14497 25.0648C8.28381 25.1938 8.3262 25.3785 8.23267 25.4743ZM9.41281 25.8262C9.37413 25.9517 9.19423 26.0088 9.013 25.9554C8.83203 25.9005 8.7136 25.7535 8.75016 25.6266C8.78778 25.5003 8.96848 25.4408 9.15104 25.4979C9.33174 25.5526 9.45044 25.6985 9.41281 25.8262ZM10.7559 25.9754C10.7604 26.1076 10.6067 26.2172 10.4165 26.2196C10.2252 26.2238 10.0704 26.1169 10.0683 25.9868C10.0683 25.8534 10.2185 25.7448 10.4098 25.7416C10.6001 25.7379 10.7559 25.8441 10.7559 25.9754ZM12.0753 25.9248C12.0981 26.0537 11.9658 26.1862 11.7769 26.2215C11.5912 26.2554 11.4192 26.1758 11.3957 26.0479C11.3726 25.9157 11.5072 25.7833 11.6927 25.7491C11.8819 25.7162 12.0512 25.7937 12.0753 25.9248Z"/></svg>
package/storybook-static/static/media/tutorials.fde6e46fc254fa77b6e39d1118470f7c.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
package/storybook-static/static/media/youtube.fd046a09fac357359f94cc21068d6560.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>
package/storybook-static/stories-Badge-stories.484f7206.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[544],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/data/images/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>images});const images={logo:"https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__",IN:"https://kapowaz.github.io/circle-flags/flags/in.svg",BE:"https://kapowaz.github.io/circle-flags/flags/be.svg",DE:"https://kapowaz.github.io/circle-flags/flags/de.svg",FR:"https://kapowaz.github.io/circle-flags/flags/fr.svg",IT:"https://kapowaz.github.io/circle-flags/flags/it.svg",NL:"https://kapowaz.github.io/circle-flags/flags/nl.svg",RU:"https://kapowaz.github.io/circle-flags/flags/ru.svg",US:"https://kapowaz.github.io/circle-flags/flags/us.svg"}},"./src/stories/Badge.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,ImageIconBadge:()=>ImageIconBadge,LeadingIconBadge:()=>LeadingIconBadge,TrailingIconBadge:()=>TrailingIconBadge,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Badge_stories});__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const BadgeSizeClasses={sm:"badge-sm",md:"badge-md",lg:"badge-lg"},BadgeVariantClasses={gray:"badge-gray",primary:"badge-primary",warning:"badge-warning",error:"badge-error",success:"badge-success"},Badge=_ref=>{let{className,children,LeadingIcon,TrailingIcon,variant,size}=_ref;const badgeVariantClassName=BadgeVariantClasses[variant],badgeSizeClassName=BadgeSizeClasses[size];return(0,jsx_runtime.jsxs)("div",{className:classnames_default()("badge-base",badgeSizeClassName,badgeVariantClassName,className),children:[LeadingIcon&&(0,jsx_runtime.jsx)("span",{className:"mr-1.5",children:LeadingIcon}),children,TrailingIcon&&(0,jsx_runtime.jsx)("span",{className:"mr-1.5",children:TrailingIcon})]})};Badge.__docgenInfo={description:"",methods:[],displayName:"Badge",props:{children:{required:!0,tsType:{name:"union",raw:"string | React.ReactElement",elements:[{name:"string"},{name:"ReactReactElement",raw:"React.ReactElement"}]},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},className:{required:!1,tsType:{name:"string"},description:""},variant:{required:!0,tsType:{name:"union",raw:'"gray" | "primary" | "warning" | "error" | "success"',elements:[{name:"literal",value:'"gray"'},{name:"literal",value:'"primary"'},{name:"literal",value:'"warning"'},{name:"literal",value:'"error"'},{name:"literal",value:'"success"'}]},description:""},size:{required:!0,tsType:{name:"union",raw:'"sm" | "md" | "lg"',elements:[{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'}]},description:""}}};var data_images=__webpack_require__("./src/data/images/index.tsx"),StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs");const Badge_stories={title:"Example/Badge",component:Badge,parameters:{layout:"centered"},tags:["autodocs"]},Default={args:{darkMode:!1,variant:"success",size:"md",children:(0,jsx_runtime.jsx)("span",{children:"Label"})}},LeadingIconBadge={args:{darkMode:!1,variant:"success",size:"md",LeadingIcon:(0,jsx_runtime.jsx)(fi.usP,{})},render:args=>(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"inline-flex flex-col space-y-2",children:(0,jsx_runtime.jsx)(Badge,{...args,children:"Label"})})},ImageIconBadge={args:{darkMode:!1,variant:"gray",size:"md",LeadingIcon:(0,jsx_runtime.jsx)("img",{src:data_images.z.NL,alt:"nl",className:"w-4 h-4"})},render:args=>(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"inline-flex flex-col space-y-2",children:(0,jsx_runtime.jsx)(Badge,{...args,children:"Newzeland"})})},TrailingIconBadge={args:{darkMode:!1,variant:"primary",size:"md",TrailingIcon:(0,jsx_runtime.jsx)(fi.dyV,{})},render:args=>(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"inline-flex flex-col space-y-2",children:(0,jsx_runtime.jsx)(Badge,{...args,children:"Label"})})},__namedExportsOrder=["Default","LeadingIconBadge","ImageIconBadge","TrailingIconBadge"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "success",\n size: "md",\n children: <span>Label</span>\n }\n}',...Default.parameters?.docs?.source}}},LeadingIconBadge.parameters={...LeadingIconBadge.parameters,docs:{...LeadingIconBadge.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "success",\n size: "md",\n LeadingIcon: <FiStar />\n },\n render: args => {\n return <StoryLayout {...args} className="inline-flex flex-col space-y-2">\n <Badge {...args}>\n Label\n </Badge>\n </StoryLayout>;\n }\n}',...LeadingIconBadge.parameters?.docs?.source}}},ImageIconBadge.parameters={...ImageIconBadge.parameters,docs:{...ImageIconBadge.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "gray",\n size: "md",\n LeadingIcon: <img src={images.NL} alt="nl" className="w-4 h-4" />\n },\n render: args => {\n return <StoryLayout {...args} className="inline-flex flex-col space-y-2">\n <Badge {...args}>\n Newzeland\n </Badge>\n </StoryLayout>;\n }\n}',...ImageIconBadge.parameters?.docs?.source}}},TrailingIconBadge.parameters={...TrailingIconBadge.parameters,docs:{...TrailingIconBadge.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "primary",\n size: "md",\n TrailingIcon: <FiArrowRight />\n },\n render: args => {\n return <StoryLayout {...args} className="inline-flex flex-col space-y-2">\n <Badge {...args}>\n Label\n </Badge>\n </StoryLayout>;\n }\n}',...TrailingIconBadge.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Button-stories.5e29be85.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[791],{"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>Button});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const buttonVariantClasses={primary:{default:"btn-primary",hover:"btn-primary-hover",focus:"btn-primary-focus shadow-grayDark",disabled:"btn-primary-disabled"},secondary:{default:"btn-secondary",hover:"btn-secondary-hover",focus:"btn-secondary-focus shadow-grayDark",disabled:"btn-secondary-disabled"},secondaryGray:{default:"btn-secondaryGray",hover:"btn-secondaryGray-hover",focus:"btn-secondaryGray-focus shadow-grayDark",disabled:"btn-secondaryGray-disabled"},tertiary:{default:"btn-tertiary",hover:"btn-tertiary-hover",focus:"btn-tertiary-focus shadow-grayDark",disabled:"btn-tertiary-disabled"},tertiaryGray:{default:"btn-tertiaryGray",hover:"btn-tertiaryGray-hover",focus:"btn-tertiaryGray-focus shadow-grayDark",disabled:"btn-tertiaryGray-disabled"}},buttonSizeClasses={sm:"btn-sm",md:"btn-md",lg:"btn-lg",xl:"btn-xl","2xl":"btn-2xl"},buttonIconSizeClasses={sm:"btn-icon-sm",md:"btn-icon-md",lg:"btn-icon-lg",xl:"btn-icon-xl","2xl":"btn-icon-2xl"},Button=_ref=>{let{children,className,variant="primary",size="md",disabled,LeadingIcon,TrailingIcon,IconOnly,...buttonProps}=_ref;const buttonVariantClassName=buttonVariantClasses[variant],buttonIconSizeClassName=buttonIconSizeClasses[size],setClassName=(icon,additionalClass)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(icon.props.className,additionalClass)}):icon;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("button",{type:"button",className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("btn-base",className,{[buttonSizeClasses[size]]:!IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonIconSizeClassName,"justify-center")]:IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.default,buttonVariantClassName.hover,buttonVariantClassName.focus)]:!disabled,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.disabled,"cursor-not-allowed")]:disabled}),...buttonProps,children:[LeadingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(LeadingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"mr-2":"2xl"!==size,"mr-3":"2xl"===size}))}),children,IconOnly&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:(icon=IconOnly,(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)&&"size"in icon.props?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{size:20}):icon)}),TrailingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(TrailingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"ml-2":"2xl"!==size,"ml-3":"2xl"===size}))})]});var icon};Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{variant:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'secondaryGray' | 'tertiary' | 'tertiaryGray'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'secondaryGray'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'tertiaryGray'"}]},description:"",defaultValue:{value:'"primary"',computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg' | 'xl' | '2xl'",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"literal",value:"'2xl'"}]},description:"",defaultValue:{value:'"md"',computed:!1}},children:{required:!1,tsType:{name:"union",raw:"string | ReactElement",elements:[{name:"string"},{name:"ReactElement"}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},IconOnly:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement<React.HTMLProps<HTMLElement>>",elements:[{name:"ReactHTMLProps",raw:"React.HTMLProps<HTMLElement>",elements:[{name:"HTMLElement"}]}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ButtonHTMLAttributes"]}},"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/stories/Button.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,IconOnlyButton:()=>IconOnlyButton,LeadingIconButton:()=>LeadingIconButton,Sizes:()=>Sizes,TrailingIconButton:()=>TrailingIconButton,Variants:()=>Variants,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/Button.tsx"),react_icons_fi__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),_StoryLayout__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/StoryLayout.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/Button",component:_Button__WEBPACK_IMPORTED_MODULE_0__.$,parameters:{layout:"centered"},tags:["autodocs"]},Default={args:{darkMode:!1,children:"Button",size:"md",variant:"primary",disabled:!1,LeadingIcon:void 0,TrailingIcon:void 0,IconOnly:void 0,className:""},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_StoryLayout__WEBPACK_IMPORTED_MODULE_1__.q,{...args,className:"flex inline-flex flex-row space-x-2",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{...args,children:"Primary"})})},Variants={args:{darkMode:!1,variant:"primary"},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_1__.q,{...args,className:"flex inline-flex flex-row space-x-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{variant:"primary",children:"Primary"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{variant:"secondary",children:"Secondary"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{variant:"secondaryGray",children:"Secondary Gray"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{variant:"tertiary",children:"Tertiary"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{variant:"tertiaryGray",children:"Tertiary Gray"})]})},Sizes={args:{darkMode:!1,variant:"primary",size:"md"},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_1__.q,{...args,className:"flex inline-flex flex-row space-x-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{size:"sm",children:"sm"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{size:"md",children:"md"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{size:"lg",children:"lg"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{size:"xl",children:"xl"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_0__.$,{size:"2xl",children:"2xl"})]})},TrailingIconButton={args:{darkMode:!1,children:"Button",TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_3__.dyV,{})}},LeadingIconButton={args:{darkMode:!1,children:"Button",LeadingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_3__.kRp,{})}},IconOnlyButton={args:{darkMode:!1,IconOnly:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_3__.usP,{})}},__namedExportsOrder=["Default","Variants","Sizes","TrailingIconButton","LeadingIconButton","IconOnlyButton"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {\n darkMode: false,\n children: \"Button\",\n size: 'md',\n variant: 'primary',\n disabled: false,\n LeadingIcon: undefined,\n TrailingIcon: undefined,\n IconOnly: undefined,\n className: ''\n },\n render: args => {\n return <StoryLayout {...args} className=\"flex inline-flex flex-row space-x-2\">\n <Button {...args}>Primary</Button>\n </StoryLayout>;\n }\n}",...Default.parameters?.docs?.source}}},Variants.parameters={...Variants.parameters,docs:{...Variants.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "primary"\n },\n render: args => {\n return <StoryLayout {...args} className="flex inline-flex flex-row space-x-2">\n <Button variant="primary">Primary</Button>\n <Button variant="secondary">Secondary</Button>\n <Button variant="secondaryGray">Secondary Gray</Button>\n <Button variant="tertiary">Tertiary</Button>\n <Button variant="tertiaryGray">Tertiary Gray</Button>\n </StoryLayout>;\n }\n}',...Variants.parameters?.docs?.source}}},Sizes.parameters={...Sizes.parameters,docs:{...Sizes.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n variant: "primary",\n size: "md"\n },\n render: args => {\n return <StoryLayout {...args} className="flex inline-flex flex-row space-x-2">\n <Button size="sm">sm</Button>\n <Button size="md">md</Button>\n <Button size="lg">lg</Button>\n <Button size="xl">xl</Button>\n <Button size="2xl">2xl</Button>\n </StoryLayout>;\n }\n}',...Sizes.parameters?.docs?.source}}},TrailingIconButton.parameters={...TrailingIconButton.parameters,docs:{...TrailingIconButton.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n children: "Button",\n TrailingIcon: <FiArrowRight />\n }\n}',...TrailingIconButton.parameters?.docs?.source}}},LeadingIconButton.parameters={...LeadingIconButton.parameters,docs:{...LeadingIconButton.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n children: "Button",\n LeadingIcon: <FiArrowLeft />\n }\n}',...LeadingIconButton.parameters?.docs?.source}}},IconOnlyButton.parameters={...IconOnlyButton.parameters,docs:{...IconOnlyButton.parameters?.docs,source:{originalSource:"{\n args: {\n darkMode: false,\n IconOnly: <FiStar />\n }\n}",...IconOnlyButton.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-ButtonGroup-stories.cc89968c.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[88],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/stories/ButtonGroup.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{IconButtonGroup:()=>IconButtonGroup,LabelButtonGroup:()=>LabelButtonGroup,LabelIconButtonGroup:()=>LabelIconButtonGroup,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ButtonGroup_stories});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ButtonGroup=_ref=>{let{options,activeOption,setActiveOption}=_ref;return(0,jsx_runtime.jsx)("div",{children:options.map(((option,index)=>(0,jsx_runtime.jsx)("button",{className:classnames_default()("inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500",{"rounded-l-lg":0===index,"rounded-r-lg":index===options.length-1,"bg-gray-50 dark:bg-gray-700":activeOption===option.value,"border-r-0":0!==index&&index!==options.length-1}),onClick:()=>setActiveOption(option.value),children:option.content},option.value)))})};ButtonGroup.__docgenInfo={description:"",methods:[],displayName:"ButtonGroup",props:{options:{required:!0,tsType:{name:"Array",elements:[{name:"IButtonItem"}],raw:"IButtonItem[]"},description:""},activeOption:{required:!0,tsType:{name:"string"},description:""},setActiveOption:{required:!0,tsType:{name:"signature",type:"function",raw:"(activeOption: string) => void",signature:{arguments:[{type:{name:"string"},name:"activeOption"}],return:{name:"void"}}},description:""}}};var StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs");const options1=[{value:"Leading",content:"Leading"},{value:"Middle",content:"Middle"},{value:"Trailing",content:"Trailing"}],options2=[{value:"first",content:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{children:(0,jsx_runtime.jsx)(fi.sxA,{size:20,className:"mr-2"})}),"First"]})},{value:"second",content:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{children:(0,jsx_runtime.jsx)(fi.sxA,{size:20,className:"mr-2"})}),"Second"]})},{value:"third",content:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{children:(0,jsx_runtime.jsx)(fi.sxA,{size:20,className:"mr-2"})}),"Third"]})}],options3=[{value:"list",content:(0,jsx_runtime.jsx)(fi.Wm,{size:20})},{value:"grid",content:(0,jsx_runtime.jsx)(fi.QPV,{size:20})}],ButtonGroup_stories={title:"Example/ButtonGroup",component:ButtonGroup,parameters:{layout:"centered"},tags:["autodocs"]},LabelButtonGroup={args:{darkMode:!1},render:args=>{const[activeItem1,setActiveItem1]=(0,react.useState)(options1[1].value);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(ButtonGroup,{options:options1,activeOption:activeItem1,setActiveOption:setActiveItem1})})})}},IconButtonGroup={args:{darkMode:!1},render:args=>{const[activeView,setViewOption]=(0,react.useState)("list");return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(ButtonGroup,{options:options3,activeOption:activeView,setActiveOption:setViewOption})})})}},LabelIconButtonGroup={args:{darkMode:!1},render:args=>{const[activeItem2,setActiveItem2]=(0,react.useState)(options2[1].value);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(ButtonGroup,{options:options2,activeOption:activeItem2,setActiveOption:setActiveItem2})})})}},__namedExportsOrder=["LabelButtonGroup","IconButtonGroup","LabelIconButtonGroup"];LabelButtonGroup.parameters={...LabelButtonGroup.parameters,docs:{...LabelButtonGroup.parameters?.docs,source:{originalSource:"{\n args: {\n darkMode: false\n },\n render: args => {\n const [activeItem1, setActiveItem1] = useState<string>(options1[1].value);\n return <StoryLayout {...args}>\n <div>\n <ButtonGroup options={options1} activeOption={activeItem1} setActiveOption={setActiveItem1} />\n </div>\n </StoryLayout>;\n }\n}",...LabelButtonGroup.parameters?.docs?.source}}},IconButtonGroup.parameters={...IconButtonGroup.parameters,docs:{...IconButtonGroup.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => {\n const [activeView, setViewOption] = useState<string>("list");\n return <StoryLayout {...args}>\n <div>\n <ButtonGroup options={options3} activeOption={activeView} setActiveOption={setViewOption} />\n </div>\n </StoryLayout>;\n }\n}',...IconButtonGroup.parameters?.docs?.source}}},LabelIconButtonGroup.parameters={...LabelIconButtonGroup.parameters,docs:{...LabelIconButtonGroup.parameters?.docs,source:{originalSource:"{\n args: {\n darkMode: false\n },\n render: args => {\n const [activeItem2, setActiveItem2] = useState<string>(options2[1].value);\n return <StoryLayout {...args}>\n <div>\n <ButtonGroup options={options2} activeOption={activeItem2} setActiveOption={setActiveItem2} />\n </div>\n </StoryLayout>;\n }\n}",...LabelIconButtonGroup.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see stories-Colors-stories.f892dc75.iframe.bundle.js.LICENSE.txt */
2
+ (self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[471],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/stories/Colors.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Colors_stories});__webpack_require__("./node_modules/react/index.js");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ColorBox=_ref=>{let{code,hex,bgClass}=_ref;return(0,jsx_runtime.jsxs)("div",{className:"flex flex-col rounded-lg shadow-lg w-26 h-39 dark:bg-white",children:[(0,jsx_runtime.jsx)("div",{className:`h-20 ${bgClass} rounded-t-lg`}),(0,jsx_runtime.jsxs)("div",{className:"mx-3 my-3",children:[code,(0,jsx_runtime.jsx)("br",{}),hex]})]},bgClass)};ColorBox.__docgenInfo={description:"",methods:[],displayName:"ColorBox",props:{bgClass:{required:!0,tsType:{name:"string"},description:""},code:{required:!0,tsType:{name:"number"},description:""},hex:{required:!0,tsType:{name:"string"},description:""}}};const colors=[{bgClass:"bg-gray-2",code:25,hex:"#FCFCF"},{bgClass:"bg-gray-50",code:50,hex:"#F9FAFB"},{bgClass:"bg-gray-100",code:100,hex:"#F2F4F7"},{bgClass:"bg-gray-200",code:200,hex:"#E4E7EC"},{bgClass:"bg-gray-300",code:300,hex:"#D0D5DD"},{bgClass:"bg-gray-400",code:400,hex:"#98A2B3"},{bgClass:"bg-gray-500",code:500,hex:"#667085"},{bgClass:"bg-gray-600",code:600,hex:"#475467"},{bgClass:"bg-gray-700",code:700,hex:"#344054"},{bgClass:"bg-gray-800",code:800,hex:"#1D2939"},{bgClass:"bg-gray-900",code:900,hex:"#101828"},{bgClass:"bg-primary-25",code:25,hex:"#F5FAFF"},{bgClass:"bg-primary-50",code:50,hex:"#EFF8FF"},{bgClass:"bg-primary-100",code:100,hex:"#D1E9FF"},{bgClass:"bg-primary-200",code:200,hex:"#B2DDFF"},{bgClass:"bg-primary-300",code:300,hex:"#84CAFF"},{bgClass:"bg-primary-400",code:400,hex:"#53B1FD"},{bgClass:"bg-primary-500",code:500,hex:"#2E90FA"},{bgClass:"bg-primary-600",code:600,hex:"#1570EF"},{bgClass:"bg-primary-700",code:700,hex:"#175CD3"},{bgClass:"bg-primary-800",code:800,hex:"#1849A9"},{bgClass:"bg-primary-900",code:900,hex:"#194185"},{bgClass:"bg-error-25",code:25,hex:"#FFFBFA"},{bgClass:"bg-error-50",code:50,hex:"#FEF3F2"},{bgClass:"bg-error-100",code:100,hex:"#FEE4E2"},{bgClass:"bg-error-200",code:200,hex:"#FECDCA"},{bgClass:"bg-error-300",code:300,hex:"#FDA29B"},{bgClass:"bg-error-400",code:400,hex:"#F97066"},{bgClass:"bg-error-500",code:500,hex:"#F04438"},{bgClass:"bg-error-600",code:600,hex:"#D92D20"},{bgClass:"bg-error-700",code:700,hex:"#B42318"},{bgClass:"bg-error-800",code:800,hex:"#912018"},{bgClass:"bg-error-900",code:900,hex:"#7A271A"},{bgClass:"bg-warning-25",code:25,hex:"#FFFCF5"},{bgClass:"bg-warning-50",code:50,hex:"#FFFAEB"},{bgClass:"bg-warning-100",code:100,hex:"#FEF0C7"},{bgClass:"bg-warning-200",code:200,hex:"#FEDF89"},{bgClass:"bg-warning-300",code:300,hex:"#FEC84B"},{bgClass:"bg-warning-400",code:400,hex:"#FDB022"},{bgClass:"bg-warning-500",code:500,hex:"#F79009"},{bgClass:"bg-warning-600",code:600,hex:"#DC6803"},{bgClass:"bg-warning-700",code:700,hex:"#B54708"},{bgClass:"bg-warning-800",code:800,hex:"#93370D"},{bgClass:"bg-warning-900",code:900,hex:"#7A2E0E"},{bgClass:"bg-success-25",code:25,hex:"#F6FEF9"},{bgClass:"bg-success-50",code:50,hex:"#ECFDF3"},{bgClass:"bg-success-100",code:100,hex:"#D1FADF"},{bgClass:"bg-success-200",code:200,hex:"#A6F4C5"},{bgClass:"bg-success-300",code:300,hex:"#6CE9A6"},{bgClass:"bg-success-400",code:400,hex:"#32D583"},{bgClass:"bg-success-500",code:500,hex:"#12B76A"},{bgClass:"bg-success-600",code:600,hex:"#039855"},{bgClass:"bg-success-700",code:700,hex:"#027A48"},{bgClass:"bg-success-800",code:800,hex:"#05603A"},{bgClass:"bg-success-900",code:900,hex:"#054F31"}];var StoryLayout=__webpack_require__("./src/StoryLayout.tsx");const Colors_stories={title:"Colors",parameters:{controls:{expanded:!0}}},Default={args:{darkMode:!1},render:args=>(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-11",children:colors.map((color=>(0,jsx_runtime.jsx)(ColorBox,{code:color.code,hex:color.hex,bgClass:color.bgClass},color.bgClass)))})},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => <StoryLayout {...args} className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-11">\n {colors.map(color => <ColorBox key={color.bgClass} code={color.code} hex={color.hex} bgClass={color.bgClass} />)}\n </StoryLayout>\n}',...Default.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js.LICENSE.txt ADDED
@@ -0,0 +1,15 @@
1
+ /*!
2
+ Copyright (c) 2018 Jed Watson.
3
+ Licensed under the MIT License (MIT), see
4
+ http://jedwatson.github.io/classnames
5
+ */
6
+
7
+ /**
8
+ * @license React
9
+ * react-jsx-runtime.production.js
10
+ *
11
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
12
+ *
13
+ * This source code is licensed under the MIT license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ */
package/storybook-static/stories-Configure-mdx.81346d97.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ (self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[187],{"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{R:()=>useMDXComponents,x:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const emptyComponents={},MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},properties.children)}},"./node_modules/@storybook/blocks/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/blocks/dist sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext},"./src/stories/Configure.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{RightArrow:()=>RightArrow,default:()=>MDXContent});__webpack_require__("./node_modules/react/index.js");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");const github=__webpack_require__.p+"static/media/github.e4e8df827592b1ed0288e4678e1965ce.svg";const discord=__webpack_require__.p+"static/media/discord.d85804c7f88be863ff119366ab74d826.svg";const youtube=__webpack_require__.p+"static/media/youtube.fd046a09fac357359f94cc21068d6560.svg";const tutorials=__webpack_require__.p+"static/media/tutorials.fde6e46fc254fa77b6e39d1118470f7c.svg",styling_namespaceObject="data:image/png;base64,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",context_namespaceObject="data:image/png;base64,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",assets_namespaceObject="data:image/png;base64,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",docs_namespaceObject=__webpack_require__.p+"f7d8b9a8cec7528e0e36.png",share_namespaceObject=__webpack_require__.p+"161528bb6c25115b3f83.png",figma_plugin_namespaceObject=__webpack_require__.p+"9335a1a91b80ad4fec70.png",testing_namespaceObject=__webpack_require__.p+"c720ced26387af8a9cb2.png",accessibility_namespaceObject=__webpack_require__.p+"2dbc69731c3f9930a271.png",theming_namespaceObject=__webpack_require__.p+"e93de094692245f1ec04.png",addon_library_namespaceObject=__webpack_require__.p+"7a58d2cb9a6358f85e9b.png",RightArrow=()=>{const _components={path:"path",svg:"svg",...(0,lib.R)()};return(0,jsx_runtime.jsx)(_components.svg,{viewBox:"0 0 14 14",width:"8px",height:"14px",style:{marginLeft:"4px",display:"inline-block",shapeRendering:"inherit",verticalAlign:"middle",fill:"currentColor","path fill":"currentColor"},children:(0,jsx_runtime.jsx)(_components.path,{d:"m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z"})})};function _createMdxContent(props){const _components={code:"code",h1:"h1",p:"p",...(0,lib.R)(),...props.components};return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Configure your project"}),"\n",(0,jsx_runtime.jsxs)("div",{className:"sb-container",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-section-title",children:[(0,jsx_runtime.jsx)(_components.h1,{id:"configure-your-project",children:"Configure your project"}),(0,jsx_runtime.jsx)(_components.p,{children:"Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community."})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:styling_namespaceObject,alt:"A wall of logos representing different styling technologies"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Add styling and CSS"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/configure/styling-and-css/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:context_namespaceObject,alt:"An abstraction representing the composition of data for a component"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Provide context and mocking"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:assets_namespaceObject,alt:"A representation of typography and image assets"}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Load assets and resources"}),(0,jsx_runtime.jsxs)("p",{className:"sb-section-item-paragraph",children:["To link static files (like fonts) to your projects and stories, use the\n",(0,jsx_runtime.jsx)(_components.code,{children:"staticDirs"})," configuration option to specify folders to load when\nstarting Storybook."]}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/configure/images-and-assets/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]})]})]})]}),"\n",(0,jsx_runtime.jsxs)("div",{className:"sb-container",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-section-title",children:[(0,jsx_runtime.jsx)(_components.h1,{id:"do-more-with-storybook",children:"Do more with Storybook"}),(0,jsx_runtime.jsx)(_components.p,{children:"Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs."})]}),(0,jsx_runtime.jsx)("div",{className:"sb-section",children:(0,jsx_runtime.jsxs)("div",{className:"sb-features-grid",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:docs_namespaceObject,alt:"A screenshot showing the autodocs tag being set, pointing a docs page being generated"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Autodocs"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Auto-generate living,\ninteractive reference documentation from your components and stories."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:share_namespaceObject,alt:"A browser window showing a Storybook being published to a chromatic.com URL"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Publish to Chromatic"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Publish your Storybook to review and collaborate with your entire team."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:figma_plugin_namespaceObject,alt:"Windows showing the Storybook plugin in Figma"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Figma Plugin"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Embed your stories into Figma to cross-reference the design and live\nimplementation in one place."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:testing_namespaceObject,alt:"Screenshot of tests passing and failing"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Testing"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Use stories to test a component in all its variations, no matter how\ncomplex."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/writing-tests/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:accessibility_namespaceObject,alt:"Screenshot of accessibility tests passing and failing"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Accessibility"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Automatically test your components for a11y issues as you develop."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-grid-item",children:[(0,jsx_runtime.jsx)("img",{src:theming_namespaceObject,alt:"Screenshot of Storybook in light and dark mode"}),(0,jsx_runtime.jsx)("h4",{className:"sb-section-item-heading",children:"Theming"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Theme Storybook's UI to personalize it to your project."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/docs/configure/theming/?renderer=react",target:"_blank",children:["Learn more",(0,jsx_runtime.jsx)(RightArrow,{})]})]})]})})]}),"\n",(0,jsx_runtime.jsxs)("div",{className:"sb-addon",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-addon-text",children:[(0,jsx_runtime.jsx)("h4",{children:"Addons"}),(0,jsx_runtime.jsx)("p",{className:"sb-section-item-paragraph",children:"Integrate your tools with Storybook to connect workflows."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/addons/",target:"_blank",children:["Discover all addons",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsx)("div",{className:"sb-addon-img",children:(0,jsx_runtime.jsx)("img",{src:addon_library_namespaceObject,alt:"Integrate your tools with Storybook to connect workflows."})})]}),"\n",(0,jsx_runtime.jsxs)("div",{className:"sb-section sb-socials",children:[(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:github,alt:"Github logo",className:"sb-explore-image"}),(0,jsx_runtime.jsx)(_components.p,{children:"Join our contributors building the future of UI development."}),(0,jsx_runtime.jsxs)("a",{href:"https://github.com/storybookjs/storybook",target:"_blank",children:["Star on GitHub",(0,jsx_runtime.jsx)(RightArrow,{})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:discord,alt:"Discord logo",className:"sb-explore-image"}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(_components.p,{children:"Get support and chat with frontend developers."}),(0,jsx_runtime.jsxs)("a",{href:"https://discord.gg/storybook",target:"_blank",children:["Join Discord server",(0,jsx_runtime.jsx)(RightArrow,{})]})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:youtube,alt:"Youtube logo",className:"sb-explore-image"}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(_components.p,{children:"Watch tutorials, feature previews and interviews."}),(0,jsx_runtime.jsxs)("a",{href:"https://www.youtube.com/@chromaticui",target:"_blank",children:["Watch on YouTube",(0,jsx_runtime.jsx)(RightArrow,{})]})]})]}),(0,jsx_runtime.jsxs)("div",{className:"sb-section-item",children:[(0,jsx_runtime.jsx)("img",{src:tutorials,alt:"A book",className:"sb-explore-image"}),(0,jsx_runtime.jsx)("p",{children:"Follow guided walkthroughs on for key workflows."}),(0,jsx_runtime.jsxs)("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",children:["Discover tutorials",(0,jsx_runtime.jsx)(RightArrow,{})]})]})]}),"\n",(0,jsx_runtime.jsx)("style",{children:"\n .sb-container {\n margin-bottom: 48px;\n }\n\n .sb-section {\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n img {\n object-fit: cover;\n }\n\n .sb-section-title {\n margin-bottom: 32px;\n }\n\n .sb-section a:not(h1 a, h2 a, h3 a) {\n font-size: 14px;\n }\n\n .sb-section-item, .sb-grid-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .sb-section-item-heading {\n padding-top: 20px !important;\n padding-bottom: 5px !important;\n margin: 0 !important;\n }\n .sb-section-item-paragraph {\n margin: 0;\n padding-bottom: 10px;\n }\n\n .sb-chevron {\n margin-left: 5px;\n }\n\n .sb-features-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-gap: 32px 20px;\n }\n\n .sb-socials {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n }\n\n .sb-socials p {\n margin-bottom: 10px;\n }\n\n .sb-explore-image {\n max-height: 32px;\n align-self: flex-start;\n }\n\n .sb-addon {\n width: 100%;\n display: flex;\n align-items: center;\n position: relative;\n background-color: #EEF3F8;\n border-radius: 5px;\n border: 1px solid rgba(0, 0, 0, 0.05);\n background: #EEF3F8;\n height: 180px;\n margin-bottom: 48px;\n overflow: hidden;\n }\n\n .sb-addon-text {\n padding-left: 48px;\n max-width: 240px;\n }\n\n .sb-addon-text h4 {\n padding-top: 0px;\n }\n\n .sb-addon-img {\n position: absolute;\n left: 345px;\n top: 0;\n height: 100%;\n width: 200%;\n overflow: hidden;\n }\n\n .sb-addon-img img {\n width: 650px;\n transform: rotate(-15deg);\n margin-left: 40px;\n margin-top: -72px;\n box-shadow: 0 0 1px rgba(255, 255, 255, 0);\n backface-visibility: hidden;\n }\n\n @media screen and (max-width: 800px) {\n .sb-addon-img {\n left: 300px;\n }\n }\n\n @media screen and (max-width: 600px) {\n .sb-section {\n flex-direction: column;\n }\n\n .sb-features-grid {\n grid-template-columns: repeat(1, 1fr);\n }\n\n .sb-socials {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .sb-addon {\n height: 280px;\n align-items: flex-start;\n padding-top: 32px;\n overflow: hidden;\n }\n\n .sb-addon-text {\n padding-left: 24px;\n }\n\n .sb-addon-img {\n right: 0;\n left: 0;\n top: 130px;\n bottom: 0;\n overflow: hidden;\n height: auto;\n width: 124%;\n }\n\n .sb-addon-img img {\n width: 1200px;\n transform: rotate(-12deg);\n margin-left: 0;\n margin-top: 48px;\n margin-bottom: -40px;\n margin-left: -24px;\n }\n }\n "})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,lib.R)(),...props.components};return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}}}]);
package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see stories-Header-stories.cf691094.iframe.bundle.js.LICENSE.txt */
2
+ (self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[512],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$:()=>Button});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const buttonVariantClasses={primary:{default:"btn-primary",hover:"btn-primary-hover",focus:"btn-primary-focus shadow-grayDark",disabled:"btn-primary-disabled"},secondary:{default:"btn-secondary",hover:"btn-secondary-hover",focus:"btn-secondary-focus shadow-grayDark",disabled:"btn-secondary-disabled"},secondaryGray:{default:"btn-secondaryGray",hover:"btn-secondaryGray-hover",focus:"btn-secondaryGray-focus shadow-grayDark",disabled:"btn-secondaryGray-disabled"},tertiary:{default:"btn-tertiary",hover:"btn-tertiary-hover",focus:"btn-tertiary-focus shadow-grayDark",disabled:"btn-tertiary-disabled"},tertiaryGray:{default:"btn-tertiaryGray",hover:"btn-tertiaryGray-hover",focus:"btn-tertiaryGray-focus shadow-grayDark",disabled:"btn-tertiaryGray-disabled"}},buttonSizeClasses={sm:"btn-sm",md:"btn-md",lg:"btn-lg",xl:"btn-xl","2xl":"btn-2xl"},buttonIconSizeClasses={sm:"btn-icon-sm",md:"btn-icon-md",lg:"btn-icon-lg",xl:"btn-icon-xl","2xl":"btn-icon-2xl"},Button=_ref=>{let{children,className,variant="primary",size="md",disabled,LeadingIcon,TrailingIcon,IconOnly,...buttonProps}=_ref;const buttonVariantClassName=buttonVariantClasses[variant],buttonIconSizeClassName=buttonIconSizeClasses[size],setClassName=(icon,additionalClass)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(icon.props.className,additionalClass)}):icon;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("button",{type:"button",className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("btn-base",className,{[buttonSizeClasses[size]]:!IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonIconSizeClassName,"justify-center")]:IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.default,buttonVariantClassName.hover,buttonVariantClassName.focus)]:!disabled,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.disabled,"cursor-not-allowed")]:disabled}),...buttonProps,children:[LeadingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(LeadingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"mr-2":"2xl"!==size,"mr-3":"2xl"===size}))}),children,IconOnly&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:(icon=IconOnly,(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)&&"size"in icon.props?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{size:20}):icon)}),TrailingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(TrailingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"ml-2":"2xl"!==size,"ml-3":"2xl"===size}))})]});var icon};Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{variant:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'secondaryGray' | 'tertiary' | 'tertiaryGray'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'secondaryGray'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'tertiaryGray'"}]},description:"",defaultValue:{value:'"primary"',computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg' | 'xl' | '2xl'",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"literal",value:"'2xl'"}]},description:"",defaultValue:{value:'"md"',computed:!1}},children:{required:!1,tsType:{name:"union",raw:"string | ReactElement",elements:[{name:"string"},{name:"ReactElement"}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},IconOnly:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement<React.HTMLProps<HTMLElement>>",elements:[{name:"ReactHTMLProps",raw:"React.HTMLProps<HTMLElement>",elements:[{name:"HTMLElement"}]}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ButtonHTMLAttributes"]}},"./src/Header.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Y:()=>Header});__webpack_require__("./node_modules/react/index.js");var _Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const Header=_ref=>{let{user,onLogin,onLogout,onCreateAccount}=_ref;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("header",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:"storybook-header",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{children:"Acme"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{children:user?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("span",{className:"welcome",children:["Welcome, ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("b",{children:user.name}),"!"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogout,children:"Log out"})]}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogin,children:"Log in"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{variant:"primary",size:"sm",onClick:onCreateAccount,children:"Sign up"})]})})]})})};Header.__docgenInfo={description:"",methods:[],displayName:"Header",props:{user:{required:!1,tsType:{name:"signature",type:"object",raw:"{\n name: string;\n}",signature:{properties:[{key:"name",value:{name:"string",required:!0}}]}},description:""},onLogin:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onLogout:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onCreateAccount:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}}},"./src/stories/Header.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{LoggedIn:()=>LoggedIn,LoggedOut:()=>LoggedOut,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_test__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/test/dist/index.mjs");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/Header",component:__webpack_require__("./src/Header.tsx").Y,tags:["autodocs"],parameters:{layout:"fullscreen"},args:{onLogin:(0,_storybook_test__WEBPACK_IMPORTED_MODULE_0__.fn)(),onLogout:(0,_storybook_test__WEBPACK_IMPORTED_MODULE_0__.fn)(),onCreateAccount:(0,_storybook_test__WEBPACK_IMPORTED_MODULE_0__.fn)()}},LoggedIn={args:{user:{name:"Jane Doe"}}},LoggedOut={},__namedExportsOrder=["LoggedIn","LoggedOut"];LoggedIn.parameters={...LoggedIn.parameters,docs:{...LoggedIn.parameters?.docs,source:{originalSource:"{\n args: {\n user: {\n name: 'Jane Doe'\n }\n }\n}",...LoggedIn.parameters?.docs?.source}}},LoggedOut.parameters={...LoggedOut.parameters,docs:{...LoggedOut.parameters?.docs,source:{originalSource:"{}",...LoggedOut.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js.LICENSE.txt ADDED
@@ -0,0 +1,15 @@
1
+ /*!
2
+ Copyright (c) 2018 Jed Watson.
3
+ Licensed under the MIT License (MIT), see
4
+ http://jedwatson.github.io/classnames
5
+ */
6
+
7
+ /**
8
+ * @license React
9
+ * react-jsx-runtime.production.js
10
+ *
11
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
12
+ *
13
+ * This source code is licensed under the MIT license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ */
package/storybook-static/stories-MobileNav-stories.f04cccdd.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[568],{"./src/stories/MobileNav.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>MobileNav_stories});var react=__webpack_require__("./node_modules/react/index.js"),SideNav=__webpack_require__("./src/Nav/SideNav.tsx"),StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),navItems=__webpack_require__("./src/data/navItems.tsx"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Typography=__webpack_require__("./src/Typography.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const MobileNavbar=_ref=>{let{open,toggleOpen}=_ref;return(0,jsx_runtime.jsxs)("div",{className:"z-40 flex items-center justify-between h-20 py-6 bg-white shadow-md dark:bg-gray-900 px-9",children:[(0,SideNav.M)(),(0,jsx_runtime.jsx)(Typography.o,{variant:"h6",customWeight:"medium",className:"select-none",children:"Box UI"}),(0,jsx_runtime.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",className:classnames_default()("text-gray-500 transition-all duration-100 ease-out cursor-pointer stroke-current hover:text-gray-900 dark:text-white dark:hover:text-gray-200",{"opacity-0":open}),onClick:toggleOpen,children:(0,jsx_runtime.jsx)("path",{d:"M4 16H22.6667M4 8H28M4 24H28",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]})};MobileNavbar.__docgenInfo={description:"",methods:[],displayName:"MobileNavbar",props:{open:{required:!0,tsType:{name:"boolean"},description:""},toggleOpen:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}};var fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs");const MobileNav_stories={title:"Example/MobileNav",component:MobileNavbar},Default={args:{darkMode:!1},render:args=>{const[open,setOpen]=(0,react.useState)(!1),handleToggle=()=>{setOpen(!open)};return(0,jsx_runtime.jsxs)(StoryLayout.q,{...args,children:[(0,jsx_runtime.jsx)(MobileNavbar,{open,toggleOpen:handleToggle}),open?(0,jsx_runtime.jsx)("div",{className:"fixed top-0 left-0 z-40 w-screen h-screen bg-gray-500 cursor-pointer bg-opacity-80",onClick:()=>setOpen(!1),children:(0,jsx_runtime.jsx)(fi.yGN,{size:40,className:"fixed text-white top-5 right-9"})}):null,open?(0,jsx_runtime.jsx)(SideNav.f,{className:"relative z-50 h-screen -mt-20",navItemsTop:navItems.p,navItemsBottom:navItems.B,open:!0,setOpen:handleToggle,username:"Veronica Woods",email:"veronica@example.com"}):null]})}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => {\n const [open, setOpen] = useState<boolean>(false);\n const handleToggle = () => {\n setOpen(!open);\n };\n return <StoryLayout {...args}>\n <MobileNavbar open={open} toggleOpen={handleToggle} />\n\n {open ? <div className="fixed top-0 left-0 z-40 w-screen h-screen bg-gray-500 cursor-pointer bg-opacity-80" onClick={() => setOpen(false)}>\n <FiX size={40} className="fixed text-white top-5 right-9" />\n </div> : null}\n\n {open ? <SideNav className="relative z-50 h-screen -mt-20" navItemsTop={navItemsTop} navItemsBottom={navItemsBottom} open={true} setOpen={handleToggle} username="Veronica Woods" email="veronica@example.com" /> : null}\n </StoryLayout>;\n }\n}',...Default.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see stories-Page-stories.0c9aa29d.iframe.bundle.js.LICENSE.txt */
2
+ (self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[290],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$:()=>Button});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const buttonVariantClasses={primary:{default:"btn-primary",hover:"btn-primary-hover",focus:"btn-primary-focus shadow-grayDark",disabled:"btn-primary-disabled"},secondary:{default:"btn-secondary",hover:"btn-secondary-hover",focus:"btn-secondary-focus shadow-grayDark",disabled:"btn-secondary-disabled"},secondaryGray:{default:"btn-secondaryGray",hover:"btn-secondaryGray-hover",focus:"btn-secondaryGray-focus shadow-grayDark",disabled:"btn-secondaryGray-disabled"},tertiary:{default:"btn-tertiary",hover:"btn-tertiary-hover",focus:"btn-tertiary-focus shadow-grayDark",disabled:"btn-tertiary-disabled"},tertiaryGray:{default:"btn-tertiaryGray",hover:"btn-tertiaryGray-hover",focus:"btn-tertiaryGray-focus shadow-grayDark",disabled:"btn-tertiaryGray-disabled"}},buttonSizeClasses={sm:"btn-sm",md:"btn-md",lg:"btn-lg",xl:"btn-xl","2xl":"btn-2xl"},buttonIconSizeClasses={sm:"btn-icon-sm",md:"btn-icon-md",lg:"btn-icon-lg",xl:"btn-icon-xl","2xl":"btn-icon-2xl"},Button=_ref=>{let{children,className,variant="primary",size="md",disabled,LeadingIcon,TrailingIcon,IconOnly,...buttonProps}=_ref;const buttonVariantClassName=buttonVariantClasses[variant],buttonIconSizeClassName=buttonIconSizeClasses[size],setClassName=(icon,additionalClass)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(icon.props.className,additionalClass)}):icon;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("button",{type:"button",className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("btn-base",className,{[buttonSizeClasses[size]]:!IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonIconSizeClassName,"justify-center")]:IconOnly,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.default,buttonVariantClassName.hover,buttonVariantClassName.focus)]:!disabled,[classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonVariantClassName.disabled,"cursor-not-allowed")]:disabled}),...buttonProps,children:[LeadingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(LeadingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"mr-2":"2xl"!==size,"mr-3":"2xl"===size}))}),children,IconOnly&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:(icon=IconOnly,(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(icon)&&"size"in icon.props?(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(icon,{size:20}):icon)}),TrailingIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{children:setClassName(TrailingIcon,classnames__WEBPACK_IMPORTED_MODULE_1___default()({"ml-2":"2xl"!==size,"ml-3":"2xl"===size}))})]});var icon};Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{variant:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'secondaryGray' | 'tertiary' | 'tertiaryGray'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'secondaryGray'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'tertiaryGray'"}]},description:"",defaultValue:{value:'"primary"',computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg' | 'xl' | '2xl'",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"literal",value:"'2xl'"}]},description:"",defaultValue:{value:'"md"',computed:!1}},children:{required:!1,tsType:{name:"union",raw:"string | ReactElement",elements:[{name:"string"},{name:"ReactElement"}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactElement"},description:""},IconOnly:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement<React.HTMLProps<HTMLElement>>",elements:[{name:"ReactHTMLProps",raw:"React.HTMLProps<HTMLElement>",elements:[{name:"HTMLElement"}]}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ButtonHTMLAttributes"]}},"./src/Header.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Y:()=>Header});__webpack_require__("./node_modules/react/index.js");var _Button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const Header=_ref=>{let{user,onLogin,onLogout,onCreateAccount}=_ref;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("header",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:"storybook-header",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{children:"Acme"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{children:user?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("span",{className:"welcome",children:["Welcome, ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("b",{children:user.name}),"!"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogout,children:"Log out"})]}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{size:"sm",onClick:onLogin,children:"Log in"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_1__.$,{variant:"primary",size:"sm",onClick:onCreateAccount,children:"Sign up"})]})})]})})};Header.__docgenInfo={description:"",methods:[],displayName:"Header",props:{user:{required:!1,tsType:{name:"signature",type:"object",raw:"{\n name: string;\n}",signature:{properties:[{key:"name",value:{name:"string",required:!0}}]}},description:""},onLogin:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onLogout:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onCreateAccount:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}}},"./src/stories/Page.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{LoggedIn:()=>LoggedIn,LoggedOut:()=>LoggedOut,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Page_stories});var dist=__webpack_require__("./node_modules/@storybook/test/dist/index.mjs"),react=__webpack_require__("./node_modules/react/index.js"),Header=__webpack_require__("./src/Header.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Page=()=>{const[user,setUser]=react.useState();return(0,jsx_runtime.jsxs)("article",{children:[(0,jsx_runtime.jsx)(Header.Y,{user,onLogin:()=>setUser({name:"Jane Doe"}),onLogout:()=>setUser(void 0),onCreateAccount:()=>setUser({name:"Jane Doe"})}),(0,jsx_runtime.jsxs)("section",{className:"storybook-page",children:[(0,jsx_runtime.jsx)("h2",{children:"Pages in Storybook"}),(0,jsx_runtime.jsxs)("p",{children:["We recommend building UIs with a"," ",(0,jsx_runtime.jsx)("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:(0,jsx_runtime.jsx)("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),(0,jsx_runtime.jsx)("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),(0,jsx_runtime.jsxs)("ul",{children:[(0,jsx_runtime.jsx)("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),(0,jsx_runtime.jsx)("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),(0,jsx_runtime.jsxs)("p",{children:["Get a guided tutorial on component-driven development at"," ",(0,jsx_runtime.jsx)("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",(0,jsx_runtime.jsx)("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),(0,jsx_runtime.jsxs)("div",{className:"tip-wrapper",children:[(0,jsx_runtime.jsx)("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",(0,jsx_runtime.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:(0,jsx_runtime.jsx)("g",{fill:"none",fillRule:"evenodd",children:(0,jsx_runtime.jsx)("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};Page.__docgenInfo={description:"",methods:[],displayName:"Page"};const Page_stories={title:"Example/Page",component:Page,parameters:{layout:"fullscreen"}},LoggedOut={},LoggedIn={play:async _ref=>{let{canvasElement}=_ref;const canvas=(0,dist.ux)(canvasElement),loginButton=canvas.getByRole("button",{name:/Log in/i});await(0,dist.E3)(loginButton).toBeInTheDocument(),await dist.Q4.click(loginButton),await(0,dist.E3)(loginButton).not.toBeInTheDocument();const logoutButton=canvas.getByRole("button",{name:/Log out/i});await(0,dist.E3)(logoutButton).toBeInTheDocument()}},__namedExportsOrder=["LoggedOut","LoggedIn"];LoggedOut.parameters={...LoggedOut.parameters,docs:{...LoggedOut.parameters?.docs,source:{originalSource:"{}",...LoggedOut.parameters?.docs?.source}}},LoggedIn.parameters={...LoggedIn.parameters,docs:{...LoggedIn.parameters?.docs,source:{originalSource:"{\n play: async ({\n canvasElement\n }) => {\n const canvas = within(canvasElement);\n const loginButton = canvas.getByRole('button', {\n name: /Log in/i\n });\n await expect(loginButton).toBeInTheDocument();\n await userEvent.click(loginButton);\n await expect(loginButton).not.toBeInTheDocument();\n const logoutButton = canvas.getByRole('button', {\n name: /Log out/i\n });\n await expect(logoutButton).toBeInTheDocument();\n }\n}",...LoggedIn.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js.LICENSE.txt ADDED
@@ -0,0 +1,15 @@
1
+ /*!
2
+ Copyright (c) 2018 Jed Watson.
3
+ Licensed under the MIT License (MIT), see
4
+ http://jedwatson.github.io/classnames
5
+ */
6
+
7
+ /**
8
+ * @license React
9
+ * react-jsx-runtime.production.js
10
+ *
11
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
12
+ *
13
+ * This source code is licensed under the MIT license found in the
14
+ * LICENSE file in the root directory of this source tree.
15
+ */
package/storybook-static/stories-Paginate-stories.3b161781.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[660],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/stories/Paginate.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DesktopPagination:()=>DesktopPagination,MobilePagination:()=>MobilePagination,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Paginate_stories});var react=__webpack_require__("./node_modules/react/index.js"),StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}const dist_clsx=function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n};function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}var usePagination=function usePagination(_ref){var currentPage=_ref.currentPage,setCurrentPage=_ref.setCurrentPage,_ref$truncableText=_ref.truncableText,truncableText=void 0===_ref$truncableText?"...":_ref$truncableText,_ref$truncableClassNa=_ref.truncableClassName,truncableClassName=void 0===_ref$truncableClassNa?"":_ref$truncableClassNa,totalPages=_ref.totalPages,edgePageCount=_ref.edgePageCount,middlePagesSiblingCount=_ref.middlePagesSiblingCount,pages=Array(totalPages).fill(0).map((function(_,i){return i+1})),hasPreviousPage=currentPage>1,hasNextPage=currentPage<totalPages,isReachedToFirst=currentPage<=middlePagesSiblingCount,isReachedToLast=currentPage+middlePagesSiblingCount>=totalPages,middlePages=react.useMemo((function(){var middlePageCount=2*middlePagesSiblingCount+1;return isReachedToFirst?pages.slice(0,middlePageCount):isReachedToLast?pages.slice(-middlePageCount):pages.slice(currentPage-middlePagesSiblingCount,currentPage+middlePagesSiblingCount+1)}),[currentPage,pages]),previousPages=react.useMemo((function(){return isReachedToFirst||function getAllPreviousPages(){return pages.slice(0,middlePages[0]-1)}().length<1?[]:pages.slice(0,edgePageCount).filter((function(p){return!middlePages.includes(p)}))}),[currentPage,pages]),getAllNextPages=react.useMemo((function(){return pages.slice(middlePages[middlePages.length-1],pages[pages.length])}),[pages,middlePages]),nextPages=react.useMemo((function(){return isReachedToLast||getAllNextPages.length<1?[]:pages.slice(pages.length-edgePageCount,pages.length).filter((function(p){return!middlePages.includes(p)}))}),[middlePages,pages]),isPreviousTruncable=react.useMemo((function(){return middlePages[0]>previousPages[previousPages.length-1]+1}),[previousPages,middlePages]),isNextTruncable=react.useMemo((function(){return middlePages[middlePages.length-1]+1<nextPages[0]}),[nextPages,middlePages]);return{currentPage,setCurrentPage,truncableText,truncableClassName,pages,hasPreviousPage,hasNextPage,previousPages,isPreviousTruncable,middlePages,isNextTruncable,nextPages}},TruncableElement=function TruncableElement(_ref3){var prev=_ref3.prev,pagination=react.useContext(PaginationContext),isPreviousTruncable=pagination.isPreviousTruncable,isNextTruncable=pagination.isNextTruncable,truncableText=pagination.truncableText,truncableClassName=pagination.truncableClassName;return isPreviousTruncable&&!0===prev||isNextTruncable&&!prev?react.createElement("li",{className:truncableClassName||void 0},truncableText):null},defaultState={currentPage:0,setCurrentPage:function setCurrentPage(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]},PaginationContext=react.createContext(defaultState),Pagination=function Pagination(_ref5){var dataTestId=_ref5.dataTestId,paginationProps=_objectWithoutPropertiesLoose(_ref5,["dataTestId"]),pagination=usePagination(paginationProps);return react.createElement(PaginationContext.Provider,{value:pagination},react.createElement("div",{className:paginationProps.className,"data-testid":dataTestId},paginationProps.children))};Pagination.PrevButton=function PrevButton(_ref){var _as$props$children,className=_ref.className,children=_ref.children,dataTestId=_ref.dataTestId,_ref$as=_ref.as,as=void 0===_ref$as?react.createElement("button",null):_ref$as,buttonProps=_objectWithoutPropertiesLoose(_ref,["className","children","dataTestId","as"]),pagination=react.useContext(PaginationContext),previous=function previous(){pagination.currentPage+1>1&&pagination.setCurrentPage(pagination.currentPage-1)},disabled=0===pagination.currentPage;return react.createElement(as.type,Object.assign({},buttonProps,as.props,{className:dist_clsx(className,as.props.className),onClick:function onClick(){return previous()},tabIndex:disabled?"-1":0,disabled,"data-testid":dataTestId,onKeyPress:function onKeyPress(event){event.preventDefault(),"Enter"!==event.key||disabled||previous()}}),null!=(_as$props$children=as.props.children)?_as$props$children:children)},Pagination.NextButton=function NextButton(_ref2){var _as$props$children2,className=_ref2.className,children=_ref2.children,dataTestId=_ref2.dataTestId,_ref2$as=_ref2.as,as=void 0===_ref2$as?react.createElement("button",null):_ref2$as,buttonProps=_objectWithoutPropertiesLoose(_ref2,["className","children","dataTestId","as"]),pagination=react.useContext(PaginationContext),next=function next(){pagination.currentPage+1<pagination.pages.length&&pagination.setCurrentPage(pagination.currentPage+1)},disabled=pagination.currentPage===pagination.pages.length-1;return react.createElement(as.type,Object.assign({},buttonProps,as.props,{className:dist_clsx(className,as.props.className),onClick:function onClick(){return next()},tabIndex:disabled?"-1":0,disabled,"data-testid":dataTestId,onKeyPress:function onKeyPress(event){event.preventDefault(),"Enter"!==event.key||disabled||next()}}),null!=(_as$props$children2=as.props.children)?_as$props$children2:children)},Pagination.PageButton=function PageButton(_ref4){var _ref4$as=_ref4.as,as=void 0===_ref4$as?react.createElement("a",null):_ref4$as,className=_ref4.className,dataTestIdActive=_ref4.dataTestIdActive,dataTestIdInactive=_ref4.dataTestIdInactive,activeClassName=_ref4.activeClassName,inactiveClassName=_ref4.inactiveClassName,renderExtraProps=_ref4.renderExtraProps,pagination=react.useContext(PaginationContext),renderPageButton=function renderPageButton(page){var _clsx;return react.createElement("li",{key:page},react.createElement(as.type,Object.assign({"data-testid":dist_clsx((_clsx={},_clsx[""+dataTestIdActive]=dataTestIdActive&&pagination.currentPage+1===page,_clsx[dataTestIdInactive+"-"+page]=dataTestIdActive&&pagination.currentPage+1!==page,_clsx))||void 0,tabIndex:0,onKeyPress:function onKeyPress(event){"Enter"===event.key&&pagination.setCurrentPage(page-1)},onClick:function onClick(){return pagination.setCurrentPage(page-1)},className:dist_clsx(className,pagination.currentPage+1===page?activeClassName:inactiveClassName)},as.props,renderExtraProps?renderExtraProps(page):{}),page))};return react.createElement(react.Fragment,null,pagination.previousPages.map(renderPageButton),react.createElement(TruncableElement,{prev:!0}),pagination.middlePages.map(renderPageButton),react.createElement(TruncableElement,null),pagination.nextPages.map(renderPageButton))};var fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Paginate=_ref=>{let{totalPages,page,isMobile,className,setPage}=_ref;const handlePageChange=page=>{setPage(page)};return isMobile?(0,jsx_runtime.jsxs)("div",{className:classnames_default()("flex w-full h-10 items-center",className),children:[(0,jsx_runtime.jsx)(fi.kRp,{size:20,className:classnames_default()("mr-3 text-gray-500 dark:text-white",{"cursor-pointer":0!==page,"opacity-50":0===page}),onClick:()=>{page>0&&handlePageChange(page-1)}}),(0,jsx_runtime.jsx)("div",{className:"flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white",children:`Page ${page} of ${totalPages}`}),(0,jsx_runtime.jsx)(fi.dyV,{size:20,className:classnames_default()("ml-3 text-gray-500 dark:text-white",{"cursor-pointer":page!==totalPages-1,"opacity-50":page===totalPages-1}),onClick:()=>{page<totalPages-1&&handlePageChange(page+1)}})]}):(0,jsx_runtime.jsxs)(Pagination,{className:classnames_default()("flex w-full items-center h-10 text-sm select-none",className),currentPage:page,totalPages,edgePageCount:2,setCurrentPage:handlePageChange,truncableText:"...",middlePagesSiblingCount:2,truncableClassName:"w-10 px-0.5 text-center dark:text-gray-500",children:[(0,jsx_runtime.jsxs)(Pagination.PrevButton,{className:classnames_default()("h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",{"cursor-pointer":0!==page,"opacity-50":0===page}),children:[(0,jsx_runtime.jsx)(fi.kRp,{size:20,className:classnames_default()("mr-3")}),"Previous"]}),(0,jsx_runtime.jsx)("div",{className:"flex items-center justify-center flex-grow list-none",children:(0,jsx_runtime.jsx)(Pagination.PageButton,{activeClassName:"bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white",inactiveClassName:"text-gray-500",className:"flex items-center justify-center h-10 w-10 rounded-full cursor-pointer font-medium"})}),(0,jsx_runtime.jsxs)(Pagination.NextButton,{className:classnames_default()("h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",{"cursor-pointer":page!==totalPages-1,"opacity-50":page===totalPages-1}),children:["Next",(0,jsx_runtime.jsx)(fi.dyV,{size:20,className:classnames_default()("ml-3")})]})]})};Paginate.__docgenInfo={description:"",methods:[],displayName:"Paginate",props:{totalPages:{required:!0,tsType:{name:"number"},description:""},page:{required:!0,tsType:{name:"number"},description:""},setPage:{required:!0,tsType:{name:"signature",type:"function",raw:"(page: number) => void",signature:{arguments:[{type:{name:"number"},name:"page"}],return:{name:"void"}}},description:""},isMobile:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!0,tsType:{name:"string"},description:""}}};const Paginate_stories={title:"Example/Pagination",component:Paginate,parameters:{layout:"centered"},tags:["autodocs"]},DesktopPagination={args:{darkMode:!1,totalPages:10},render:args=>{const[currentPage,setCurrentPage]=(0,react.useState)(0);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)(Paginate,{className:"",isMobile:!1,totalPages:args.totalPages,page:currentPage,setPage:setCurrentPage})})}},MobilePagination={args:{darkMode:!1,totalPages:10},render:args=>{const[currentPage,setCurrentPage]=(0,react.useState)(0);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,children:(0,jsx_runtime.jsx)(Paginate,{className:"",isMobile:!0,totalPages:args.totalPages,page:currentPage,setPage:setCurrentPage})})}},__namedExportsOrder=["DesktopPagination","MobilePagination"];DesktopPagination.parameters={...DesktopPagination.parameters,docs:{...DesktopPagination.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n totalPages: 10\n },\n render: args => {\n const [currentPage, setCurrentPage] = useState<number>(0);\n return <StoryLayout {...args}>\n <Paginate className="" isMobile={false} totalPages={args.totalPages} page={currentPage} setPage={setCurrentPage} />\n </StoryLayout>;\n }\n}',...DesktopPagination.parameters?.docs?.source}}},MobilePagination.parameters={...MobilePagination.parameters,docs:{...MobilePagination.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false,\n totalPages: 10\n },\n render: args => {\n const [currentPage, setCurrentPage] = useState<number>(0);\n return <StoryLayout {...args}>\n <Paginate className="" isMobile={true} totalPages={args.totalPages} page={currentPage} setPage={setCurrentPage} />\n </StoryLayout>;\n }\n}',...MobilePagination.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-Select-stories.7556ae0d.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[707],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/data/images/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>images});const images={logo:"https://media-hosting.imagekit.io/0ec1ca8b900e4e8b/logo.svg?Expires=1838348369&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=pCHsmoIdugCAGgRQuivkSFGORbcd0DMZjw-l9LQlxqEs77-19RpmN8TrGsMdYdKwLic46nDsKt44NPaRyu~mxJDKX7I0acu5x53nLqrjh-fs6s8VATv5eHASNeV83rLF3LXgXwMkXubchLy79xPaEHKlRlvJgcqrjZd3cE4C8QXC0KIG4dSjtkd0rECwtweKFuh1BrJIwcKIxiu5cEJUKgDvi4TUS22KVFh4c52c9CjBGa0ulrxxyZHMj2eXff-uQBkecyW-QYillwmsuz2i5PFf6Ud~9JZ2xYOBWwrq4VRSY-8p~c6Czqagg-w6gqyk-3xEM-f-cDfor~11~xwtTg__",IN:"https://kapowaz.github.io/circle-flags/flags/in.svg",BE:"https://kapowaz.github.io/circle-flags/flags/be.svg",DE:"https://kapowaz.github.io/circle-flags/flags/de.svg",FR:"https://kapowaz.github.io/circle-flags/flags/fr.svg",IT:"https://kapowaz.github.io/circle-flags/flags/it.svg",NL:"https://kapowaz.github.io/circle-flags/flags/nl.svg",RU:"https://kapowaz.github.io/circle-flags/flags/ru.svg",US:"https://kapowaz.github.io/circle-flags/flags/us.svg"}},"./src/stories/Select.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,SelectWithIcon:()=>SelectWithIcon,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Select_stories});var react=__webpack_require__("./node_modules/react/index.js"),useFocusRing=__webpack_require__("./node_modules/@react-aria/focus/dist/useFocusRing.mjs"),useHover=__webpack_require__("./node_modules/@react-aria/interactions/dist/useHover.mjs"),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),use_active_press=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-active-press.js");function use_by_comparator_l(e,r){return null!==e&&null!==r&&"object"==typeof e&&"object"==typeof r&&"id"in e&&"id"in r?e.id===r.id:e===r}var use_event=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-event.js");var use_iso_morphic_effect=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js");var use_disposables=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-disposables.js"),use_element_size=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-element-size.js"),disposables=__webpack_require__("./node_modules/@headlessui/react/dist/utils/disposables.js"),owner=__webpack_require__("./node_modules/@headlessui/react/dist/utils/owner.js"),use_is_top_layer=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-is-top-layer.js");let f=new Map,use_inert_others_u=new Map;function h(t){var e;let r=null!=(e=use_inert_others_u.get(t))?e:0;return use_inert_others_u.set(t,r+1),0!==r||(f.set(t,{"aria-hidden":t.getAttribute("aria-hidden"),inert:t.inert}),t.setAttribute("aria-hidden","true"),t.inert=!0),()=>use_inert_others_m(t)}function use_inert_others_m(t){var i;let r=null!=(i=use_inert_others_u.get(t))?i:1;if(1===r?use_inert_others_u.delete(t):use_inert_others_u.set(t,r-1),1!==r)return;let e=f.get(t);e&&(null===e["aria-hidden"]?t.removeAttribute("aria-hidden"):t.setAttribute("aria-hidden",e["aria-hidden"]),t.inert=e.inert,f.delete(t))}function y(t,{allowed:r,disallowed:e}={}){let i=(0,use_is_top_layer.S)(t,"inert-others");(0,use_iso_morphic_effect.s)((()=>{var d,c;if(!i)return;let a=(0,disposables.e)();for(let n of null!=(d=null==e?void 0:e())?d:[])n&&a.add(h(n));let s=null!=(c=null==r?void 0:r())?c:[];for(let n of s){if(!n)continue;let l=(0,owner.T)(n);if(!l)continue;let o=n.parentElement;for(;o&&o!==l.body;){for(let p of o.children)s.some((E=>p.contains(E)))||a.add(h(p));o=o.parentElement}}return a.dispose}),[i,r,e])}var use_latest_value=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),use_on_disappear=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-on-disappear.js"),use_outside_click=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-outside-click.js"),use_owner=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-owner.js"),use_resolve_button_type=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-resolve-button-type.js"),use_scroll_lock=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-scroll-lock.js"),use_sync_refs=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-sync-refs.js");let a=/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;function get_text_value_o(e){var r,i;let n=null!=(r=e.innerText)?r:"",t=e.cloneNode(!0);if(!(t instanceof HTMLElement))return n;let u=!1;for(let f of t.querySelectorAll('[hidden],[aria-hidden],[role="img"]'))f.remove(),u=!0;let l=u?null!=(i=t.innerText)?i:"":n;return a.test(l)&&(l=l.replace(a,"")),l}function use_text_value_s(c){let t=(0,react.useRef)(""),r=(0,react.useRef)("");return(0,use_event._)((()=>{let e=c.current;if(!e)return"";let u=e.innerText;if(t.current===u)return r.current;let n=function get_text_value_g(e){let n=e.getAttribute("aria-label");if("string"==typeof n)return n.trim();let t=e.getAttribute("aria-labelledby");if(t){let u=t.split(" ").map((l=>{let r=document.getElementById(l);if(r){let i=r.getAttribute("aria-label");return"string"==typeof i?i.trim():get_text_value_o(r).trim()}return null})).filter(Boolean);if(u.length>0)return u.join(", ")}return get_text_value_o(e).trim()}(e).trim().toLowerCase();return t.current=u,r.current=n,n}))}function t(e){return[e.screenX,e.screenY]}function use_tracked_pointer_u(){let e=(0,react.useRef)([-1,-1]);return{wasMoved(r){let n=t(r);return(e.current[0]!==n[0]||e.current[1]!==n[1])&&(e.current=n,!0)},update(r){e.current=t(r)}}}var use_transition=__webpack_require__("./node_modules/@headlessui/react/dist/hooks/use-transition.js");let e=(0,react.createContext)(void 0);function disabled_a(){return(0,react.useContext)(e)}var floating=__webpack_require__("./node_modules/@headlessui/react/dist/internal/floating.js");function form_e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))form_o(t,form_f(s,r),n);return t}function form_f(i,s){return i?i+"["+s+"]":s}function form_o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())form_o(i,form_f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):"boolean"==typeof t?i.push([s,t?"1":"0"]):"string"==typeof t?i.push([s,t]):"number"==typeof t?i.push([s,`${t}`]):null==t?i.push([s,""]):form_e(t,s,i)}var render=__webpack_require__("./node_modules/@headlessui/react/dist/utils/render.js"),internal_hidden=__webpack_require__("./node_modules/@headlessui/react/dist/internal/hidden.js");let form_fields_f=(0,react.createContext)(null);function form_fields_c({children:t}){let e=(0,react.useContext)(form_fields_f);if(!e)return react.createElement(react.Fragment,null,t);let{target:r}=e;return r?(0,react_dom.createPortal)(react.createElement(react.Fragment,null,t),r):null}function j({data:t,form:e,disabled:r,onReset:n,overrides:F}){let[i,a]=(0,react.useState)(null),p=(0,use_disposables.L)();return(0,react.useEffect)((()=>{if(n&&i)return p.addEventListener(i,"reset",n)}),[i,e,n]),react.createElement(form_fields_c,null,react.createElement(C,{setForm:a,formId:e}),form_e(t).map((([s,v])=>react.createElement(internal_hidden.j,{features:internal_hidden.u.Hidden,...(0,render.oE)({key:s,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:e,disabled:r,name:s,value:v,...F})}))))}function C({setForm:t,formId:e}){return(0,react.useEffect)((()=>{if(e){let r=document.getElementById(e);r&&t(r)}}),[t,e]),e?null:react.createElement(internal_hidden.j,{features:internal_hidden.u.Hidden,as:"input",type:"hidden",hidden:!0,readOnly:!0,ref:r=>{if(!r)return;let n=r.closest("form");n&&t(n)}})}function frozen_l(o,e){let[n,t]=(0,react.useState)(e);return!o&&n!==e&&t(e),o?n:e}let id_e=(0,react.createContext)(void 0);function id_u(){return(0,react.useContext)(id_e)}var open_closed=__webpack_require__("./node_modules/@headlessui/react/dist/internal/open-closed.js"),bugs=__webpack_require__("./node_modules/@headlessui/react/dist/utils/bugs.js");var i,calculate_active_index_c=((i=calculate_active_index_c||{})[i.First=0]="First",i[i.Previous=1]="Previous",i[i.Next=2]="Next",i[i.Last=3]="Last",i[i.Specific=4]="Specific",i[i.Nothing=5]="Nothing",i);function calculate_active_index_f(l,n){let t=n.resolveItems();if(t.length<=0)return null;let r=n.resolveActiveIndex(),s=null!=r?r:-1;switch(l.focus){case 0:for(let e=0;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 1:-1===s&&(s=t.length);for(let e=s-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 2:for(let e=s+1;e<t.length;++e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 3:for(let e=t.length-1;e>=0;--e)if(!n.resolveDisabled(t[e],e,t))return e;return r;case 4:for(let e=0;e<t.length;++e)if(n.resolveId(t[e],e,t)===l.id)return e;return r;case 5:return null;default:!function calculate_active_index_u(l){throw new Error("Unexpected object: "+l)}(l)}}var focus_management=__webpack_require__("./node_modules/@headlessui/react/dist/utils/focus-management.js"),match=__webpack_require__("./node_modules/@headlessui/react/dist/utils/match.js");let description_a=(0,react.createContext)(null);function description_f(){let r=(0,react.useContext)(description_a);if(null===r){let e=new Error("You used a <Description /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(e,description_f),e}return r}description_a.displayName="DescriptionContext";let _=(0,render.FX)((function description_C(r,e){let d=(0,react.useId)(),t=disabled_a(),{id:i=`headlessui-description-${d}`,...l}=r,n=description_f(),s=(0,use_sync_refs.P)(e);(0,use_iso_morphic_effect.s)((()=>n.register(i)),[i,n.register]);let o=t||!1,p=(0,react.useMemo)((()=>({...n.slot,disabled:o})),[n.slot,o]),D={ref:s,...n.props,id:i};return(0,render.Ci)()({ourProps:D,theirProps:l,slot:p,defaultTag:"p",name:n.name||"Description"})}));Object.assign(_,{});var keyboard=__webpack_require__("./node_modules/@headlessui/react/dist/components/keyboard.js");let label_c=(0,react.createContext)(null);function label_P(){let r=(0,react.useContext)(label_c);if(null===r){let l=new Error("You used a <Label /> component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(l,label_P),l}return r}function I(r){var a,e,o;let l=null!=(e=null==(a=(0,react.useContext)(label_c))?void 0:a.value)?e:void 0;return(null!=(o=null==r?void 0:r.length)?o:0)>0?[l,...r].filter(Boolean).join(" "):l}function label_K({inherit:r=!1}={}){let l=I(),[a,e]=(0,react.useState)([]),o=r?[l,...a].filter(Boolean):a;return[o.length>0?o.join(" "):void 0,(0,react.useMemo)((()=>function(t){let s=(0,use_event._)((i=>(e((p=>[...p,i])),()=>e((p=>{let u=p.slice(),d=u.indexOf(i);return-1!==d&&u.splice(d,1),u}))))),m=(0,react.useMemo)((()=>({register:s,slot:t.slot,name:t.name,props:t.props,value:t.value})),[s,t.slot,t.name,t.props,t.value]);return react.createElement(label_c.Provider,{value:m},t.children)}),[e])]}label_c.displayName="LabelContext";let label_U=(0,render.FX)((function G(r,l){var y;let a=(0,react.useId)(),e=label_P(),o=id_u(),g=disabled_a(),{id:t=`headlessui-label-${a}`,htmlFor:s=(null!=o?o:null==(y=e.props)?void 0:y.htmlFor),passive:m=!1,...i}=r,p=(0,use_sync_refs.P)(l);(0,use_iso_morphic_effect.s)((()=>e.register(t)),[t,e.register]);let u=(0,use_event._)((L=>{let b=L.currentTarget;if(b instanceof HTMLLabelElement&&L.preventDefault(),e.props&&"onClick"in e.props&&"function"==typeof e.props.onClick&&e.props.onClick(L),b instanceof HTMLLabelElement){let n=document.getElementById(b.htmlFor);if(n){let E=n.getAttribute("disabled");if("true"===E||""===E)return;let x=n.getAttribute("aria-disabled");if("true"===x||""===x)return;(n instanceof HTMLInputElement&&("radio"===n.type||"checkbox"===n.type)||"radio"===n.role||"checkbox"===n.role||"switch"===n.role)&&n.click(),n.focus({preventScroll:!0})}}})),d=g||!1,C=(0,react.useMemo)((()=>({...e.slot,disabled:d})),[e.slot,d]),f={ref:p,...e.props,id:t,htmlFor:s,onClick:u};return m&&("onClick"in f&&(delete f.htmlFor,delete f.onClick),"onClick"in i&&delete i.onClick),(0,render.Ci)()({ourProps:f,theirProps:i,slot:C,defaultTag:s?"label":"div",name:e.name||"Label"})})),Q=Object.assign(label_U,{});var portal=__webpack_require__("./node_modules/@headlessui/react/dist/components/portal/portal.js"),gt=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(gt||{}),Lt=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(Lt||{}),St=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(St||{}),Et=(n=>(n[n.OpenListbox=0]="OpenListbox",n[n.CloseListbox=1]="CloseListbox",n[n.GoToOption=2]="GoToOption",n[n.Search=3]="Search",n[n.ClearSearch=4]="ClearSearch",n[n.RegisterOption=5]="RegisterOption",n[n.UnregisterOption=6]="UnregisterOption",n[n.SetButtonElement=7]="SetButtonElement",n[n.SetOptionsElement=8]="SetOptionsElement",n))(Et||{});function be(e,i=o=>o){let o=null!==e.activeOptionIndex?e.options[e.activeOptionIndex]:null,r=(0,focus_management.wl)(i(e.options.slice()),(m=>m.dataRef.current.domRef.current)),a=o?r.indexOf(o):null;return-1===a&&(a=null),{options:r,activeOptionIndex:a}}let Pt={1:e=>e.dataRef.current.disabled||1===e.listboxState?e:{...e,activeOptionIndex:null,listboxState:1,__demoMode:!1},0(e){if(e.dataRef.current.disabled||0===e.listboxState)return e;let i=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,r=e.options.findIndex((a=>o(a.dataRef.current.value)));return-1!==r&&(i=r),{...e,listboxState:0,activeOptionIndex:i,__demoMode:!1}},2(e,i){var m,x,d,p,n;if(e.dataRef.current.disabled||1===e.listboxState)return e;let o={...e,searchQuery:"",activationTrigger:null!=(m=i.trigger)?m:1,__demoMode:!1};if(i.focus===calculate_active_index_c.Nothing)return{...o,activeOptionIndex:null};if(i.focus===calculate_active_index_c.Specific)return{...o,activeOptionIndex:e.options.findIndex((u=>u.id===i.id))};if(i.focus===calculate_active_index_c.Previous){let u=e.activeOptionIndex;if(null!==u){let P=e.options[u].dataRef.current.domRef,t=calculate_active_index_f(i,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:s=>s.id,resolveDisabled:s=>s.dataRef.current.disabled});if(null!==t){let s=e.options[t].dataRef.current.domRef;if((null==(x=P.current)?void 0:x.previousElementSibling)===s.current||null===(null==(d=s.current)?void 0:d.previousElementSibling))return{...o,activeOptionIndex:t}}}}else if(i.focus===calculate_active_index_c.Next){let u=e.activeOptionIndex;if(null!==u){let P=e.options[u].dataRef.current.domRef,t=calculate_active_index_f(i,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:s=>s.id,resolveDisabled:s=>s.dataRef.current.disabled});if(null!==t){let s=e.options[t].dataRef.current.domRef;if((null==(p=P.current)?void 0:p.nextElementSibling)===s.current||null===(null==(n=s.current)?void 0:n.nextElementSibling))return{...o,activeOptionIndex:t}}}}let r=be(e),a=calculate_active_index_f(i,{resolveItems:()=>r.options,resolveActiveIndex:()=>r.activeOptionIndex,resolveId:u=>u.id,resolveDisabled:u=>u.dataRef.current.disabled});return{...o,...r,activeOptionIndex:a}},3:(e,i)=>{if(e.dataRef.current.disabled||1===e.listboxState)return e;let r=""!==e.searchQuery?0:1,a=e.searchQuery+i.value.toLowerCase(),x=(null!==e.activeOptionIndex?e.options.slice(e.activeOptionIndex+r).concat(e.options.slice(0,e.activeOptionIndex+r)):e.options).find((p=>{var n;return!p.dataRef.current.disabled&&(null==(n=p.dataRef.current.textValue)?void 0:n.startsWith(a))})),d=x?e.options.indexOf(x):-1;return-1===d||d===e.activeOptionIndex?{...e,searchQuery:a}:{...e,searchQuery:a,activeOptionIndex:d,activationTrigger:1}},4:e=>e.dataRef.current.disabled||1===e.listboxState||""===e.searchQuery?e:{...e,searchQuery:""},5:(e,i)=>{let o={id:i.id,dataRef:i.dataRef},r=be(e,(a=>[...a,o]));return null===e.activeOptionIndex&&e.dataRef.current.isSelected(i.dataRef.current.value)&&(r.activeOptionIndex=r.options.indexOf(o)),{...e,...r}},6:(e,i)=>{let o=be(e,(r=>{let a=r.findIndex((m=>m.id===i.id));return-1!==a&&r.splice(a,1),r}));return{...e,...o,activationTrigger:1}},7:(e,i)=>e.buttonElement===i.element?e:{...e,buttonElement:i.element},8:(e,i)=>e.optionsElement===i.element?e:{...e,optionsElement:i.element}},Te=(0,react.createContext)(null);function Z(e){let i=(0,react.useContext)(Te);if(null===i){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,Z),o}return i}Te.displayName="ListboxActionsContext";let ee=(0,react.createContext)(null);function listbox_Q(e){let i=(0,react.useContext)(ee);if(null===i){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,listbox_Q),o}return i}function Rt(e,i){return(0,match.Y)(i.type,Pt,e,i)}ee.displayName="ListboxDataContext";let At=react.Fragment;let Le=(0,react.createContext)(!1),Ct=render.Ac.RenderStrategy|render.Ac.Static;let wt=react.Fragment;let Ut=(0,render.FX)((function ht(e,i){var me;let o=disabled_a(),{value:r,defaultValue:a,form:m,name:x,onChange:d,by:p,invalid:n=!1,disabled:u=o||!1,horizontal:P=!1,multiple:t=!1,__demoMode:s=!1,...F}=e;const M=P?"horizontal":"vertical";let h=(0,use_sync_refs.P)(i),D=function use_default_value_l(e){let[t]=(0,react.useState)(e);return t}(a),[O=(t?[]:void 0),g]=function T(l,r,c){let[i,s]=(0,react.useState)(c),e=void 0!==l,t=(0,react.useRef)(e),u=(0,react.useRef)(!1),d=(0,react.useRef)(!1);return!e||t.current||u.current?!e&&t.current&&!d.current&&(d.current=!0,t.current=e,console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")):(u.current=!0,t.current=e,console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")),[e?l:i,(0,use_event._)((n=>(e||s(n),null==r?void 0:r(n))))]}(r,d,D),[R,y]=(0,react.useReducer)(Rt,{dataRef:(0,react.createRef)(),listboxState:s?0:1,options:[],searchQuery:"",activeOptionIndex:null,activationTrigger:1,optionsVisible:!1,buttonElement:null,optionsElement:null,__demoMode:s}),B=(0,react.useRef)({static:!1,hold:!1}),w=(0,react.useRef)(new Map),_=function use_by_comparator_u(e=use_by_comparator_l){return(0,react.useCallback)(((r,t)=>{if("string"==typeof e){let o=e;return(null==r?void 0:r[o])===(null==t?void 0:t[o])}return e(r,t)}),[e])}(p),b=(0,react.useCallback)((f=>(0,match.Y)(c.mode,{1:()=>O.some((S=>_(S,f))),0:()=>_(O,f)})),[O]),c=(0,react.useMemo)((()=>({...R,value:O,disabled:u,invalid:n,mode:t?1:0,orientation:M,compare:_,isSelected:b,optionsPropsRef:B,listRef:w})),[O,u,n,t,R,w]);(0,use_iso_morphic_effect.s)((()=>{R.dataRef.current=c}),[c]);let N=0===c.listboxState;(0,use_outside_click.j)(N,[c.buttonElement,c.optionsElement],((f,S)=>{var C;y({type:1}),(0,focus_management.Bm)(S,focus_management.MZ.Loose)||(f.preventDefault(),null==(C=c.buttonElement)||C.focus())}));let L=(0,react.useMemo)((()=>({open:0===c.listboxState,disabled:u,invalid:n,value:O})),[c,u,O,n]),H=(0,use_event._)((f=>{let S=c.options.find((C=>C.id===f));S&&K(S.dataRef.current.value)})),te=(0,use_event._)((()=>{if(null!==c.activeOptionIndex){let{dataRef:f,id:S}=c.options[c.activeOptionIndex];K(f.current.value),y({type:2,focus:calculate_active_index_c.Specific,id:S})}})),oe=(0,use_event._)((()=>y({type:0}))),X=(0,use_event._)((()=>y({type:1}))),J=(0,use_disposables.L)(),ne=(0,use_event._)(((f,S,C)=>{J.dispose(),J.microTask((()=>f===calculate_active_index_c.Specific?y({type:2,focus:calculate_active_index_c.Specific,id:S,trigger:C}):y({type:2,focus:f,trigger:C})))})),ie=(0,use_event._)(((f,S)=>(y({type:5,id:f,dataRef:S}),()=>y({type:6,id:f})))),K=(0,use_event._)((f=>(0,match.Y)(c.mode,{0:()=>null==g?void 0:g(f),1(){let S=c.value.slice(),C=S.findIndex((Re=>_(Re,f)));return-1===C?S.push(f):S.splice(C,1),null==g?void 0:g(S)}}))),re=(0,use_event._)((f=>y({type:3,value:f}))),$=(0,use_event._)((()=>y({type:4}))),q=(0,use_event._)((f=>{y({type:7,element:f})})),l=(0,use_event._)((f=>{y({type:8,element:f})})),I=(0,react.useMemo)((()=>({onChange:K,registerOption:ie,goToOption:ne,closeListbox:X,openListbox:oe,selectActiveOption:te,selectOption:H,search:re,clearSearch:$,setButtonElement:q,setOptionsElement:l})),[]),[G,le]=label_K({inherit:!0}),Se={ref:h},Ee=(0,react.useCallback)((()=>{if(void 0!==D)return null==g?void 0:g(D)}),[g,D]),Pe=(0,render.Ci)();return react.createElement(le,{value:G,props:{htmlFor:null==(me=c.buttonElement)?void 0:me.id},slot:{open:0===c.listboxState,disabled:u}},react.createElement(floating.St,null,react.createElement(Te.Provider,{value:I},react.createElement(ee.Provider,{value:c},react.createElement(open_closed.El,{value:(0,match.Y)(c.listboxState,{0:open_closed.Uw.Open,1:open_closed.Uw.Closed})},null!=x&&null!=O&&react.createElement(j,{disabled:u,data:{[x]:O},form:m,onReset:Ee}),Pe({ourProps:Se,theirProps:F,slot:L,defaultTag:At,name:"Listbox"}))))))})),Nt=(0,render.FX)((function _t(e,i){var N;let o=listbox_Q("Listbox.Button"),r=Z("Listbox.Button"),a=(0,react.useId)(),m=id_u(),{id:x=m||`headlessui-listbox-button-${a}`,disabled:d=o.disabled||!1,autoFocus:p=!1,...n}=e,u=(0,use_sync_refs.P)(i,(0,floating.Xc)(),r.setButtonElement),P=(0,floating.TI)(),t=(0,use_event._)((L=>{switch(L.key){case keyboard.D.Enter:!function form_p(i){var t,r;let s=null!=(t=null==i?void 0:i.form)?t:i.closest("form");if(s){for(let n of s.elements)if(n!==i&&("INPUT"===n.tagName&&"submit"===n.type||"BUTTON"===n.tagName&&"submit"===n.type||"INPUT"===n.nodeName&&"image"===n.type))return void n.click();null==(r=s.requestSubmit)||r.call(s)}}(L.currentTarget);break;case keyboard.D.Space:case keyboard.D.ArrowDown:L.preventDefault(),(0,react_dom.flushSync)((()=>r.openListbox())),o.value||r.goToOption(calculate_active_index_c.First);break;case keyboard.D.ArrowUp:L.preventDefault(),(0,react_dom.flushSync)((()=>r.openListbox())),o.value||r.goToOption(calculate_active_index_c.Last)}})),s=(0,use_event._)((L=>{if(L.key===keyboard.D.Space)L.preventDefault()})),F=(0,use_event._)((L=>{var H;if((0,bugs.l)(L.currentTarget))return L.preventDefault();0===o.listboxState?((0,react_dom.flushSync)((()=>r.closeListbox())),null==(H=o.buttonElement)||H.focus({preventScroll:!0})):(L.preventDefault(),r.openListbox())})),M=(0,use_event._)((L=>L.preventDefault())),h=I([x]),D=function U(){var r,e;return null!=(e=null==(r=(0,react.useContext)(description_a))?void 0:r.value)?e:void 0}(),{isFocusVisible:O,focusProps:g}=(0,useFocusRing.o)({autoFocus:p}),{isHovered:R,hoverProps:y}=(0,useHover.M)({isDisabled:d}),{pressed:B,pressProps:w}=(0,use_active_press.Z)({disabled:d}),_=(0,react.useMemo)((()=>({open:0===o.listboxState,active:B||0===o.listboxState,disabled:d,invalid:o.invalid,value:o.value,hover:R,focus:O,autofocus:p})),[o.listboxState,o.value,d,R,O,B,o.invalid,p]),b=(0,render.v6)(P(),{ref:u,id:x,type:(0,use_resolve_button_type.c)(e,o.buttonElement),"aria-haspopup":"listbox","aria-controls":null==(N=o.optionsElement)?void 0:N.id,"aria-expanded":0===o.listboxState,"aria-labelledby":h,"aria-describedby":D,disabled:d||void 0,autoFocus:p,onKeyDown:t,onKeyUp:s,onKeyPress:M,onClick:F},g,y,w);return(0,render.Ci)()({ourProps:b,theirProps:n,slot:_,defaultTag:"button",name:"Listbox.Button"})})),Ht=Q,Gt=(0,render.FX)((function Ft(e,i){var $,q;let o=(0,react.useId)(),{id:r=`headlessui-listbox-options-${o}`,anchor:a,portal:m=!1,modal:x=!0,transition:d=!1,...p}=e,n=(0,floating.zn)(a),[u,P]=(0,react.useState)(null);n&&(m=!0);let t=listbox_Q("Listbox.Options"),s=Z("Listbox.Options"),F=(0,use_owner.g)(t.optionsElement),M=(0,open_closed.O_)(),[h,D]=(0,use_transition.p)(d,u,null!==M?(M&open_closed.Uw.Open)===open_closed.Uw.Open:0===t.listboxState);(0,use_on_disappear.O)(h,t.buttonElement,s.closeListbox);let O=!t.__demoMode&&(x&&0===t.listboxState);(0,use_scroll_lock.K)(O,F),y(!t.__demoMode&&(x&&0===t.listboxState),{allowed:(0,react.useCallback)((()=>[t.buttonElement,t.optionsElement]),[t.buttonElement,t.optionsElement])});let B=!function use_did_element_move_s(n,t){let e=(0,react.useRef)({left:0,top:0});if((0,use_iso_morphic_effect.s)((()=>{if(!t)return;let r=t.getBoundingClientRect();r&&(e.current=r)}),[n,t]),null==t||!n||t===document.activeElement)return!1;let o=t.getBoundingClientRect();return o.top!==e.current.top||o.left!==e.current.left}(0!==t.listboxState,t.buttonElement)&&h,_=frozen_l(h&&1===t.listboxState,t.value),b=(0,use_event._)((l=>t.compare(_,l))),c=(0,react.useMemo)((()=>{var I;if(null==n||null==(I=null==n?void 0:n.to)||!I.includes("selection"))return null;let l=t.options.findIndex((G=>b(G.dataRef.current.value)));return-1===l&&(l=0),l}),[n,t.options]),N=(()=>{if(null==n)return;if(null===c)return{...n,inner:void 0};let l=Array.from(t.listRef.current.values());return{...n,inner:{listRef:{current:l},index:c}}})(),[L,H]=(0,floating.UF)(N),te=(0,floating.G3)(),oe=(0,use_sync_refs.P)(i,n?L:null,s.setOptionsElement,P),X=(0,use_disposables.L)();(0,react.useEffect)((()=>{var I;let l=t.optionsElement;l&&0===t.listboxState&&l!==(null==(I=(0,owner.T)(l))?void 0:I.activeElement)&&(null==l||l.focus({preventScroll:!0}))}),[t.listboxState,t.optionsElement]);let J=(0,use_event._)((l=>{var I,G;switch(X.dispose(),l.key){case keyboard.D.Space:if(""!==t.searchQuery)return l.preventDefault(),l.stopPropagation(),s.search(l.key);case keyboard.D.Enter:if(l.preventDefault(),l.stopPropagation(),null!==t.activeOptionIndex){let{dataRef:le}=t.options[t.activeOptionIndex];s.onChange(le.current.value)}0===t.mode&&((0,react_dom.flushSync)((()=>s.closeListbox())),null==(I=t.buttonElement)||I.focus({preventScroll:!0}));break;case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowDown,horizontal:keyboard.D.ArrowRight}):return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Next);case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowUp,horizontal:keyboard.D.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Previous);case keyboard.D.Home:case keyboard.D.PageUp:return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.First);case keyboard.D.End:case keyboard.D.PageDown:return l.preventDefault(),l.stopPropagation(),s.goToOption(calculate_active_index_c.Last);case keyboard.D.Escape:return l.preventDefault(),l.stopPropagation(),(0,react_dom.flushSync)((()=>s.closeListbox())),void(null==(G=t.buttonElement)||G.focus({preventScroll:!0}));case keyboard.D.Tab:l.preventDefault(),l.stopPropagation(),(0,react_dom.flushSync)((()=>s.closeListbox())),(0,focus_management.p9)(t.buttonElement,l.shiftKey?focus_management.BD.Previous:focus_management.BD.Next);break;default:1===l.key.length&&(s.search(l.key),X.setTimeout((()=>s.clearSearch()),350))}})),ne=null==($=t.buttonElement)?void 0:$.id,ie=(0,react.useMemo)((()=>({open:0===t.listboxState})),[t.listboxState]),K=(0,render.v6)(n?te():{},{id:r,ref:oe,"aria-activedescendant":null===t.activeOptionIndex||null==(q=t.options[t.activeOptionIndex])?void 0:q.id,"aria-multiselectable":1===t.mode||void 0,"aria-labelledby":ne,"aria-orientation":t.orientation,onKeyDown:J,role:"listbox",tabIndex:0===t.listboxState?0:void 0,style:{...p.style,...H,"--button-width":(0,use_element_size.L)(t.buttonElement,!0).width},...(0,use_transition.B)(D)}),re=(0,render.Ci)();return react.createElement(portal.ZL,{enabled:!!m&&(e.static||h)},react.createElement(ee.Provider,{value:1===t.mode?t:{...t,isSelected:b}},re({ourProps:K,theirProps:p,slot:ie,defaultTag:"div",features:Ct,visible:B,name:"Listbox.Options"})))})),Vt=(0,render.FX)((function Bt(e,i){let o=(0,react.useId)(),{id:r=`headlessui-listbox-option-${o}`,disabled:a=!1,value:m,...x}=e,d=!0===(0,react.useContext)(Le),p=listbox_Q("Listbox.Option"),n=Z("Listbox.Option"),u=null!==p.activeOptionIndex&&p.options[p.activeOptionIndex].id===r,P=p.isSelected(m),t=(0,react.useRef)(null),s=use_text_value_s(t),F=(0,use_latest_value.Y)({disabled:a,value:m,domRef:t,get textValue(){return s()}}),M=(0,use_sync_refs.P)(i,t,(b=>{b?p.listRef.current.set(r,b):p.listRef.current.delete(r)}));(0,use_iso_morphic_effect.s)((()=>{if(!p.__demoMode&&0===p.listboxState&&u&&0!==p.activationTrigger)return(0,disposables.e)().requestAnimationFrame((()=>{var b,c;null==(c=null==(b=t.current)?void 0:b.scrollIntoView)||c.call(b,{block:"nearest"})}))}),[t,u,p.__demoMode,p.listboxState,p.activationTrigger,p.activeOptionIndex]),(0,use_iso_morphic_effect.s)((()=>{if(!d)return n.registerOption(r,F)}),[F,r,d]);let h=(0,use_event._)((b=>{var c;if(a)return b.preventDefault();n.onChange(m),0===p.mode&&((0,react_dom.flushSync)((()=>n.closeListbox())),null==(c=p.buttonElement)||c.focus({preventScroll:!0}))})),D=(0,use_event._)((()=>{if(a)return n.goToOption(calculate_active_index_c.Nothing);n.goToOption(calculate_active_index_c.Specific,r)})),O=use_tracked_pointer_u(),g=(0,use_event._)((b=>{O.update(b),!a&&(u||n.goToOption(calculate_active_index_c.Specific,r,0))})),R=(0,use_event._)((b=>{O.wasMoved(b)&&(a||u||n.goToOption(calculate_active_index_c.Specific,r,0))})),y=(0,use_event._)((b=>{O.wasMoved(b)&&(a||u&&n.goToOption(calculate_active_index_c.Nothing))})),B=(0,react.useMemo)((()=>({active:u,focus:u,selected:P,disabled:a,selectedOption:P&&d})),[u,P,a,d]),w=d?{}:{id:r,ref:M,role:"option",tabIndex:!0===a?void 0:-1,"aria-disabled":!0===a||void 0,"aria-selected":P,disabled:void 0,onClick:h,onFocus:D,onPointerEnter:g,onMouseEnter:g,onPointerMove:R,onMouseMove:R,onPointerLeave:y,onMouseLeave:y},_=(0,render.Ci)();return!P&&d?null:_({ourProps:w,theirProps:x,slot:B,defaultTag:"div",name:"Listbox.Option"})})),Kt=(0,render.FX)((function kt(e,i){let{options:o,placeholder:r,...a}=e,x={ref:(0,use_sync_refs.P)(i)},d=listbox_Q("ListboxSelectedOption"),p=(0,react.useMemo)((()=>({})),[]),n=void 0===d.value||null===d.value||1===d.mode&&Array.isArray(d.value)&&0===d.value.length,u=(0,render.Ci)();return react.createElement(Le.Provider,{value:!0},u({ourProps:x,theirProps:{...a,children:react.createElement(react.Fragment,null,r&&n?r:o)},slot:p,defaultTag:wt,name:"ListboxSelectedOption"}))})),Mo=Object.assign(Ut,{Button:Nt,Label:Ht,Options:Gt,Option:Vt,SelectedOption:Kt});var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),fi=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Select=_ref=>{let{options,selectedOption,setSelectedOption,placeholder,LeadingIcon,width}=_ref;return(0,jsx_runtime.jsx)("div",{className:classnames_default()("relative inline-block",width),children:(0,jsx_runtime.jsx)(Mo,{value:selectedOption&&selectedOption.value,onChange:setSelectedOption,children:_ref2=>{let{open}=_ref2;return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)(Nt,{className:classnames_default()("shadow-sm flex items-center text-md border border-gray-300 dark:border-gray-500 h-11 px-3.5 rounded-lg bg-white dark:bg-gray-800","focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20 whitespace-nowrap",{"text-gray-900 dark:text-white":selectedOption,"text-gray-500 dark:text-gray-300":!selectedOption},width),children:[LeadingIcon&&(0,jsx_runtime.jsx)("div",{className:"w-5 h-5 mr-2 overflow-hidden",children:(icon=LeadingIcon,iconSize=20,additionalClass=classnames_default()("text-gray-400"),(0,react.isValidElement)(icon)&&"size"in icon.props?(0,react.cloneElement)(icon,{size:iconSize,className:classnames_default()(icon.props.className,additionalClass)}):icon)}),selectedOption?selectedOption.label:placeholder,(0,jsx_runtime.jsx)(fi.fK4,{size:20,className:classnames_default()("text-gray-500 dark:text-gray-300 transform duration-100 ease-out",{"-rotate-180":open,"ml-auto":width,"ml-3.5":!width})})]}),(0,jsx_runtime.jsx)(Gt,{className:"absolute z-10 inline-flex flex-col w-full bg-white border border-gray-300 rounded-lg shadow-lg top-13 dark:border-gray-500 dark:bg-gray-800",children:null==options?void 0:options.map(((option,index)=>(0,jsx_runtime.jsx)(Vt,{as:react.Fragment,value:option.value,children:_ref3=>{let{focus,selected}=_ref3;return(0,jsx_runtime.jsxs)("li",{className:classnames_default()(classnames_default()("flex items-center pl-3.5 pr-3 justify-between h-11 text-gray-900 dark:text-white text-md cursor-pointer hover:bg-primary-25 dark:hover:bg-gray-100 dark:hover:bg-opacity-10 whitespace-nowrap",{"bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10":focus,"rounded-t-lg":0===index,"rounded-b-lg":index===options.length-1})),children:[(0,jsx_runtime.jsx)("div",{className:"flex items-center",children:option.label}),selected&&(0,jsx_runtime.jsx)(fi.YrT,{className:"ml-5 text-primary-600 dark:text-white"})]})}},option.value)))})]});var icon,iconSize,additionalClass}})})};Select.__docgenInfo={description:"",methods:[],displayName:"Select",props:{placeholder:{required:!0,tsType:{name:"string"},description:""},options:{required:!1,tsType:{name:"Array",elements:[{name:"IOption"}],raw:"IOption[]"},description:""},selectedOption:{required:!1,tsType:{name:"union",raw:"IOption | undefined",elements:[{name:"IOption"},{name:"undefined"}]},description:""},setSelectedOption:{required:!0,tsType:{name:"signature",type:"function",raw:"(option: string) => void",signature:{arguments:[{type:{name:"string"},name:"option"}],return:{name:"void"}}},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},width:{required:!1,tsType:{name:"string"},description:""}}};var StoryLayout=__webpack_require__("./src/StoryLayout.tsx"),data_images=__webpack_require__("./src/data/images/index.tsx");const countries=[{city:"Ahmedabad",countryISO:"IN"},{city:"Amsterdam",countryISO:"NL"},{city:"Rome",countryISO:"IT"},{city:"Berlin",countryISO:"DE"},{city:"Paris",countryISO:"FR"},{city:"Washington",countryISO:"US"},{city:"Moscow",countryISO:"RU"},{city:"Brussels",countryISO:"BE"}].map((country=>({value:country.countryISO,label:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("img",{src:data_images.z[country.countryISO],alt:country.countryISO.toLowerCase(),className:"w-5 h-5 mr-2"})," ",`${country.city}, ${country.countryISO}`]})}))),prices=[{label:"Any price",value:"-1"},{label:"Below 50",value:"0"},{label:"50 - 100",value:"50"},{label:"100 - 200",value:"100"},{label:"200 - 300",value:"200"},{label:"300 - 400",value:"300"},{label:"400 - 500",value:"400"},{label:"500 - 600",value:"500"}],Select_stories={title:"Example/Select",component:Select,parameters:{layout:"centered"},tags:["autodocs"]},Default={args:{darkMode:!1},render:args=>{const[selectedCountry,setSelectedCountry]=(0,react.useState)(countries[0]);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"flex",children:(0,jsx_runtime.jsx)(Select,{options:countries,selectedOption:selectedCountry,setSelectedOption:country=>{const option=countries.find((obj=>obj.value===country));setSelectedCountry(option)},placeholder:"Select country",width:"w-50"})})}},SelectWithIcon={args:{darkMode:!1},render:args=>{const[selectedPrice,setSelectedPrice]=(0,react.useState)(prices[0]);return(0,jsx_runtime.jsx)(StoryLayout.q,{...args,className:"flex",children:(0,jsx_runtime.jsx)(Select,{options:prices,selectedOption:selectedPrice,setSelectedOption:price=>{const option=prices.find((obj=>obj.value===price));setSelectedPrice(option)},placeholder:"Select a price",LeadingIcon:(0,jsx_runtime.jsx)(fi.z8N,{}),width:"w-50"})})}},__namedExportsOrder=["Default","SelectWithIcon"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => {\n const [selectedCountry, setSelectedCountry] = useState<IOption>(countries[0]);\n const handleSelectedCountry = (country: string) => {\n const option = countries.find(obj => obj.value === country) as IOption;\n setSelectedCountry(option);\n };\n return <StoryLayout {...args} className="flex">\n <Select options={countries} selectedOption={selectedCountry} setSelectedOption={handleSelectedCountry} placeholder="Select country" width="w-50" />\n </StoryLayout>;\n }\n}',...Default.parameters?.docs?.source}}},SelectWithIcon.parameters={...SelectWithIcon.parameters,docs:{...SelectWithIcon.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => {\n const [selectedPrice, setSelectedPrice] = useState<IOption>(prices[0]);\n const handleSelectedPrice = (price: string) => {\n const option = prices.find(obj => obj.value === price) as IOption;\n setSelectedPrice(option);\n };\n return <StoryLayout {...args} className="flex">\n <Select options={prices} selectedOption={selectedPrice} setSelectedOption={handleSelectedPrice} placeholder="Select a price" LeadingIcon={<FiDollarSign />} width="w-50" />\n </StoryLayout>;\n }\n}',...SelectWithIcon.parameters?.docs?.source}}}}}]);
package/storybook-static/stories-SideNav-stories.093fac6a.iframe.bundle.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[785],{"./src/stories/SideNav.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Nav/SideNav.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),_data_navItems__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/data/navItems.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/SideNav",component:_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__.f},Default={args:{darkMode:!1},render:args=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!0);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"flex flex-col h-screen",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Nav_SideNav__WEBPACK_IMPORTED_MODULE_1__.f,{...args,navItemsTop:_data_navItems__WEBPACK_IMPORTED_MODULE_3__.p,navItemsBottom:_data_navItems__WEBPACK_IMPORTED_MODULE_3__.B,open,setOpen,username:"Veronica Woods",email:"veronica@example.com"})})}},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n args: {\n darkMode: false\n },\n render: args => {\n const [open, setOpen] = useState<boolean>(true);\n return <StoryLayout {...args} className="flex flex-col h-screen">\n <SideNav {...args} navItemsTop={navItemsTop} navItemsBottom={navItemsBottom} open={open} setOpen={setOpen} username="Veronica Woods" email="veronica@example.com" />\n </StoryLayout>;\n }\n}',...Default.parameters?.docs?.source}}}}}]);