@feminab/box-ui 0.1.0 → 0.1.2

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 (188) hide show
  1. package/.storybook/main.ts +40 -2
  2. package/dist/@interfaces/Badge.d.d.ts.map +1 -1
  3. package/dist/@interfaces/Button.d.d.ts.map +1 -1
  4. package/dist/@interfaces/Color.d.d.ts.map +1 -1
  5. package/dist/@interfaces/IButtonItem.d.d.ts.map +1 -1
  6. package/dist/@interfaces/ISubNavItem.d.d.ts.map +1 -1
  7. package/dist/@interfaces/MobileNavProps.d.d.ts.map +1 -1
  8. package/dist/@interfaces/NavItem.d.d.ts.map +1 -1
  9. package/dist/@interfaces/Pagination.d.d.ts.map +1 -1
  10. package/dist/@interfaces/Select.d.d.ts.map +1 -1
  11. package/dist/@interfaces/SideNavProps.d.d.ts.map +1 -1
  12. package/dist/@interfaces/TextInput.d.d.ts.map +1 -1
  13. package/dist/@interfaces/index.d.ts.map +1 -1
  14. package/dist/Badge.d.ts.map +1 -1
  15. package/dist/Button.d.ts.map +1 -1
  16. package/dist/ButtonGroup.d.ts.map +1 -1
  17. package/dist/ColorBox.d.ts.map +1 -1
  18. package/dist/Header.d.ts.map +1 -1
  19. package/dist/Nav/MobileNav.d.ts.map +1 -1
  20. package/dist/Nav/NavItem.d.ts.map +1 -1
  21. package/dist/Nav/SideNav.d.ts.map +1 -1
  22. package/dist/Nav/SubNavItem.d.ts.map +1 -1
  23. package/dist/Paginate.d.ts.map +1 -1
  24. package/dist/Select.d.ts.map +1 -1
  25. package/dist/StoryLayout.d.ts.map +1 -1
  26. package/dist/TextInput.d.ts.map +1 -1
  27. package/dist/Typography.d.ts.map +1 -1
  28. package/dist/box-ui.cjs.development.js +17 -11
  29. package/dist/box-ui.cjs.development.js.map +1 -1
  30. package/dist/box-ui.cjs.production.min.js +1 -1
  31. package/dist/box-ui.cjs.production.min.js.map +1 -1
  32. package/dist/box-ui.esm.js +17 -11
  33. package/dist/box-ui.esm.js.map +1 -1
  34. package/dist/data/colors.d.ts.map +1 -1
  35. package/dist/data/countries.d.ts.map +1 -1
  36. package/dist/data/images/index.d.ts.map +1 -1
  37. package/dist/data/index.d.ts.map +1 -1
  38. package/dist/data/navItems.d.ts.map +1 -1
  39. package/dist/data/options.d.ts.map +1 -1
  40. package/dist/data/prices.d.ts.map +1 -1
  41. package/dist/hooks/useIconClassName.d.ts.map +1 -1
  42. package/dist/hooks/useIconProps.d.ts.map +1 -1
  43. package/dist/index.d.ts.map +1 -1
  44. package/dist/jest.config.d.ts +9 -0
  45. package/dist/jest.config.d.ts.map +1 -0
  46. package/dist/reportWebVitals.d.ts.map +1 -1
  47. package/dist/setupTests.d.ts.map +1 -1
  48. package/dist/stories/Badge.stories.d.ts +3 -4
  49. package/dist/stories/Badge.stories.d.ts.map +1 -1
  50. package/dist/stories/Button.stories.d.ts +3 -4
  51. package/dist/stories/Button.stories.d.ts.map +1 -1
  52. package/dist/stories/ButtonGroup.stories.d.ts +4 -4
  53. package/dist/stories/ButtonGroup.stories.d.ts.map +1 -1
  54. package/dist/stories/Colors.stories.d.ts +3 -3
  55. package/dist/stories/Colors.stories.d.ts.map +1 -1
  56. package/dist/stories/MobileNav.stories.d.ts +3 -4
  57. package/dist/stories/MobileNav.stories.d.ts.map +1 -1
  58. package/dist/stories/Paginate.stories.d.ts +3 -4
  59. package/dist/stories/Paginate.stories.d.ts.map +1 -1
  60. package/dist/stories/Select.stories.d.ts +3 -4
  61. package/dist/stories/Select.stories.d.ts.map +1 -1
  62. package/dist/stories/SideNav.stories.d.ts +3 -4
  63. package/dist/stories/SideNav.stories.d.ts.map +1 -1
  64. package/dist/stories/TextInput.stories.d.ts +3 -4
  65. package/dist/stories/TextInput.stories.d.ts.map +1 -1
  66. package/dist/stories/Typography.stories.d.ts +4 -4
  67. package/dist/stories/Typography.stories.d.ts.map +1 -1
  68. package/dist/utils/IconWrapper.d.ts +8 -0
  69. package/dist/utils/IconWrapper.d.ts.map +1 -0
  70. package/jest.config.js +13 -0
  71. package/jest.setup.ts +3 -0
  72. package/netlify.toml +3 -0
  73. package/package.json +24 -26
  74. package/src/Nav/MobileNav.tsx +2 -0
  75. package/src/Nav/SideNav.tsx +1 -0
  76. package/src/Paginate.tsx +2 -0
  77. package/src/Select.tsx +1 -1
  78. package/src/TextInput.tsx +23 -27
  79. package/src/index.js +1 -1
  80. package/src/stories/Badge.stories.tsx +6 -8
  81. package/src/stories/Button.stories.tsx +21 -8
  82. package/src/stories/ButtonGroup.stories.tsx +48 -48
  83. package/src/stories/Colors.stories.tsx +2 -4
  84. package/src/stories/MobileNav.stories.tsx +29 -19
  85. package/src/stories/Paginate.stories.tsx +36 -35
  86. package/src/stories/Select.stories.tsx +46 -43
  87. package/src/stories/SideNav.stories.tsx +18 -19
  88. package/src/stories/TextInput.stories.tsx +81 -71
  89. package/src/stories/Typography.stories.tsx +2 -4
  90. package/src/styles/global.css +1 -181
  91. package/src/tests/Badge.test.tsx +48 -0
  92. package/src/tests/Button.test.tsx +69 -0
  93. package/src/tests/ButtonGroup.test.tsx +51 -0
  94. package/src/tests/MobileNav.test.tsx +66 -0
  95. package/src/tests/Paginate.test.tsx +86 -0
  96. package/src/tests/Select.test.tsx +63 -0
  97. package/src/tests/SideNav.test.tsx +43 -0
  98. package/src/tests/TextInput.test.tsx +42 -0
  99. package/src/tests/Typography.test.tsx +41 -0
  100. package/src/tests/__snapshots__/Badge.test.tsx.snap +13 -0
  101. package/src/tests/__snapshots__/Button.test.tsx.snap +106 -0
  102. package/src/tests/__snapshots__/ButtonGroup.test.tsx.snap +228 -0
  103. package/src/tests/__snapshots__/Paginate.test.tsx.snap +580 -0
  104. package/src/tests/__snapshots__/Select.test.tsx.snap +119 -0
  105. package/src/tests/__snapshots__/TextInput.test.tsx.snap +323 -0
  106. package/src/utils/IconWrapper.tsx +11 -0
  107. package/storybook-static/{125.65b26339.iframe.bundle.js → 125.df7cc93e.iframe.bundle.js} +3 -3
  108. package/storybook-static/125.df7cc93e.iframe.bundle.js.map +1 -0
  109. package/storybook-static/13.d4c3993e.iframe.bundle.js +2 -0
  110. package/storybook-static/161.f5193502.iframe.bundle.js +2 -0
  111. package/storybook-static/167.89fa6ac2.iframe.bundle.js +1 -0
  112. package/storybook-static/294.eccdc80d.iframe.bundle.js +1 -0
  113. package/storybook-static/314.c9f9245e.iframe.bundle.js +2 -0
  114. package/storybook-static/364.1cfcaebe.iframe.bundle.js +1 -0
  115. package/storybook-static/735.c396ee77.iframe.bundle.js +2 -0
  116. package/storybook-static/742.52c662a4.iframe.bundle.js +1 -0
  117. package/storybook-static/{844.aec20bdb.iframe.bundle.js → 844.3bb89aad.iframe.bundle.js} +3 -3
  118. package/storybook-static/844.3bb89aad.iframe.bundle.js.map +1 -0
  119. package/storybook-static/936.c827da74.iframe.bundle.js +1 -0
  120. package/storybook-static/961.c3df469f.iframe.bundle.js +2 -0
  121. package/storybook-static/iframe.html +3 -3
  122. package/storybook-static/main.179173d1.iframe.bundle.js +1 -0
  123. package/storybook-static/project.json +1 -1
  124. package/storybook-static/{runtime~main.295ddda4.iframe.bundle.js → runtime~main.70344601.iframe.bundle.js} +1 -1
  125. package/storybook-static/static/css/main.08036cd2.css.map +1 -1
  126. package/storybook-static/stories-Badge-stories.a924d6d5.iframe.bundle.js +1 -0
  127. package/storybook-static/stories-Button-stories.a3c88a14.iframe.bundle.js +1 -0
  128. package/storybook-static/stories-ButtonGroup-stories.2c74e4c4.iframe.bundle.js +1 -0
  129. package/storybook-static/stories-Colors-stories.424256b4.iframe.bundle.js +2 -0
  130. package/storybook-static/stories-Configure-mdx.46ebbf59.iframe.bundle.js +1 -0
  131. package/storybook-static/stories-Header-stories.df09e844.iframe.bundle.js +2 -0
  132. package/storybook-static/stories-MobileNav-stories.eb9a0ca6.iframe.bundle.js +1 -0
  133. package/storybook-static/stories-Page-stories.ab66c885.iframe.bundle.js +2 -0
  134. package/storybook-static/stories-Paginate-stories.086f736a.iframe.bundle.js +1 -0
  135. package/storybook-static/stories-Select-stories.4c04edb3.iframe.bundle.js +1 -0
  136. package/storybook-static/stories-SideNav-stories.272a4362.iframe.bundle.js +1 -0
  137. package/storybook-static/stories-TextInput-stories.cfa81131.iframe.bundle.js +1 -0
  138. package/storybook-static/stories-Typography-stories.a31da7ce.iframe.bundle.js +2 -0
  139. package/tailwind.config.js +1 -1
  140. package/tsconfig.json +6 -3
  141. package/tsdx.config.js +14 -0
  142. package/dist/Page.d.ts +0 -3
  143. package/dist/Page.d.ts.map +0 -1
  144. package/dist/stories/Header.stories.d.ts +0 -20
  145. package/dist/stories/Header.stories.d.ts.map +0 -1
  146. package/dist/stories/Page.stories.d.ts +0 -14
  147. package/dist/stories/Page.stories.d.ts.map +0 -1
  148. package/src/Page.tsx +0 -72
  149. package/src/stories/Configure.mdx +0 -364
  150. package/src/stories/Header.stories.ts +0 -33
  151. package/src/stories/Page.stories.ts +0 -32
  152. package/storybook-static/125.65b26339.iframe.bundle.js.map +0 -1
  153. package/storybook-static/13.0638081a.iframe.bundle.js +0 -2
  154. package/storybook-static/161.a19908ac.iframe.bundle.js +0 -2
  155. package/storybook-static/167.3fa3a909.iframe.bundle.js +0 -1
  156. package/storybook-static/294.ce38f65c.iframe.bundle.js +0 -1
  157. package/storybook-static/314.568bd9af.iframe.bundle.js +0 -2
  158. package/storybook-static/364.0b18ef67.iframe.bundle.js +0 -1
  159. package/storybook-static/735.1625d9f4.iframe.bundle.js +0 -2
  160. package/storybook-static/742.597501f6.iframe.bundle.js +0 -1
  161. package/storybook-static/844.aec20bdb.iframe.bundle.js.map +0 -1
  162. package/storybook-static/936.fd850a3f.iframe.bundle.js +0 -1
  163. package/storybook-static/961.0e5457c5.iframe.bundle.js +0 -2
  164. package/storybook-static/main.069281cf.iframe.bundle.js +0 -1
  165. package/storybook-static/stories-Badge-stories.484f7206.iframe.bundle.js +0 -1
  166. package/storybook-static/stories-Button-stories.5e29be85.iframe.bundle.js +0 -1
  167. package/storybook-static/stories-ButtonGroup-stories.cc89968c.iframe.bundle.js +0 -1
  168. package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js +0 -2
  169. package/storybook-static/stories-Configure-mdx.81346d97.iframe.bundle.js +0 -1
  170. package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js +0 -2
  171. package/storybook-static/stories-MobileNav-stories.f04cccdd.iframe.bundle.js +0 -1
  172. package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js +0 -2
  173. package/storybook-static/stories-Paginate-stories.3b161781.iframe.bundle.js +0 -1
  174. package/storybook-static/stories-Select-stories.7556ae0d.iframe.bundle.js +0 -1
  175. package/storybook-static/stories-SideNav-stories.093fac6a.iframe.bundle.js +0 -1
  176. package/storybook-static/stories-TextInput-stories.6d3e15c6.iframe.bundle.js +0 -1
  177. package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js +0 -2
  178. /package/storybook-static/{125.65b26339.iframe.bundle.js.LICENSE.txt → 125.df7cc93e.iframe.bundle.js.LICENSE.txt} +0 -0
  179. /package/storybook-static/{13.0638081a.iframe.bundle.js.LICENSE.txt → 13.d4c3993e.iframe.bundle.js.LICENSE.txt} +0 -0
  180. /package/storybook-static/{161.a19908ac.iframe.bundle.js.LICENSE.txt → 161.f5193502.iframe.bundle.js.LICENSE.txt} +0 -0
  181. /package/storybook-static/{314.568bd9af.iframe.bundle.js.LICENSE.txt → 314.c9f9245e.iframe.bundle.js.LICENSE.txt} +0 -0
  182. /package/storybook-static/{735.1625d9f4.iframe.bundle.js.LICENSE.txt → 735.c396ee77.iframe.bundle.js.LICENSE.txt} +0 -0
  183. /package/storybook-static/{844.aec20bdb.iframe.bundle.js.LICENSE.txt → 844.3bb89aad.iframe.bundle.js.LICENSE.txt} +0 -0
  184. /package/storybook-static/{961.0e5457c5.iframe.bundle.js.LICENSE.txt → 961.c3df469f.iframe.bundle.js.LICENSE.txt} +0 -0
  185. /package/storybook-static/{stories-Colors-stories.f892dc75.iframe.bundle.js.LICENSE.txt → stories-Colors-stories.424256b4.iframe.bundle.js.LICENSE.txt} +0 -0
  186. /package/storybook-static/{stories-Header-stories.cf691094.iframe.bundle.js.LICENSE.txt → stories-Header-stories.df09e844.iframe.bundle.js.LICENSE.txt} +0 -0
  187. /package/storybook-static/{stories-Page-stories.0c9aa29d.iframe.bundle.js.LICENSE.txt → stories-Page-stories.ab66c885.iframe.bundle.js.LICENSE.txt} +0 -0
  188. /package/storybook-static/{stories-Typography-stories.6640f7ac.iframe.bundle.js.LICENSE.txt → stories-Typography-stories.a31da7ce.iframe.bundle.js.LICENSE.txt} +0 -0
@@ -1 +0,0 @@
1
- "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[936],{"./node_modules/@storybook/blocks/dist/Color-YHDXOIA2.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ColorControl:()=>ColorControl,default:()=>Color_default});var _chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/blocks/dist/chunk-2PTXLE6R.mjs"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),storybook_internal_components__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/core/dist/components/index.js"),storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/core/dist/theming/index.js"),_storybook_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@storybook/icons/dist/index.mjs"),require_color_name=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.P$)({"../../node_modules/color-name/index.js"(exports,module){module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),require_conversions=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.P$)({"../../node_modules/color-convert/conversions.js"(exports,module){var cssKeywords=require_color_name(),reverseKeywords={};for(let key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;var convert2={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert2;for(let model of Object.keys(convert2)){if(!("channels"in convert2[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert2[model]))throw new Error("missing channel labels property: "+model);if(convert2[model].labels.length!==convert2[model].channels)throw new Error("channel and label counts mismatch: "+model);let{channels,labels}=convert2[model];delete convert2[model].channels,delete convert2[model].labels,Object.defineProperty(convert2[model],"channels",{value:channels}),Object.defineProperty(convert2[model],"labels",{value:labels})}convert2.rgb.hsl=function(rgb){let h2,s2,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,min=Math.min(r2,g2,b2),max=Math.max(r2,g2,b2),delta=max-min;max===min?h2=0:r2===max?h2=(g2-b2)/delta:g2===max?h2=2+(b2-r2)/delta:b2===max&&(h2=4+(r2-g2)/delta),h2=Math.min(60*h2,360),h2<0&&(h2+=360);let l2=(min+max)/2;return s2=max===min?0:l2<=.5?delta/(max+min):delta/(2-max-min),[h2,100*s2,100*l2]},convert2.rgb.hsv=function(rgb){let rdif,gdif,bdif,h2,s2,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,v2=Math.max(r2,g2,b2),diff=v2-Math.min(r2,g2,b2),diffc=function(c2){return(v2-c2)/6/diff+.5};return 0===diff?(h2=0,s2=0):(s2=diff/v2,rdif=diffc(r2),gdif=diffc(g2),bdif=diffc(b2),r2===v2?h2=bdif-gdif:g2===v2?h2=1/3+rdif-bdif:b2===v2&&(h2=2/3+gdif-rdif),h2<0?h2+=1:h2>1&&(h2-=1)),[360*h2,100*s2,100*v2]},convert2.rgb.hwb=function(rgb){let r2=rgb[0],g2=rgb[1],b2=rgb[2],h2=convert2.rgb.hsl(rgb)[0],w2=1/255*Math.min(r2,Math.min(g2,b2));return b2=1-1/255*Math.max(r2,Math.max(g2,b2)),[h2,100*w2,100*b2]},convert2.rgb.cmyk=function(rgb){let r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,k2=Math.min(1-r2,1-g2,1-b2);return[100*((1-r2-k2)/(1-k2)||0),100*((1-g2-k2)/(1-k2)||0),100*((1-b2-k2)/(1-k2)||0),100*k2]},convert2.rgb.keyword=function(rgb){let reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(let keyword of Object.keys(cssKeywords)){let value=cssKeywords[keyword],distance=(y2=value,((x2=rgb)[0]-y2[0])**2+(x2[1]-y2[1])**2+(x2[2]-y2[2])**2);distance<currentClosestDistance&&(currentClosestDistance=distance,currentClosestKeyword=keyword)}var x2,y2;return currentClosestKeyword},convert2.keyword.rgb=function(keyword){return cssKeywords[keyword]},convert2.rgb.xyz=function(rgb){let r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255;return r2=r2>.04045?((r2+.055)/1.055)**2.4:r2/12.92,g2=g2>.04045?((g2+.055)/1.055)**2.4:g2/12.92,b2=b2>.04045?((b2+.055)/1.055)**2.4:b2/12.92,[100*(.4124*r2+.3576*g2+.1805*b2),100*(.2126*r2+.7152*g2+.0722*b2),100*(.0193*r2+.1192*g2+.9505*b2)]},convert2.rgb.lab=function(rgb){let xyz=convert2.rgb.xyz(rgb),x2=xyz[0],y2=xyz[1],z2=xyz[2];return x2/=95.047,y2/=100,z2/=108.883,x2=x2>.008856?x2**(1/3):7.787*x2+16/116,y2=y2>.008856?y2**(1/3):7.787*y2+16/116,z2=z2>.008856?z2**(1/3):7.787*z2+16/116,[116*y2-16,500*(x2-y2),200*(y2-z2)]},convert2.hsl.rgb=function(hsl){let t2,t3,val,h2=hsl[0]/360,s2=hsl[1]/100,l2=hsl[2]/100;if(0===s2)return val=255*l2,[val,val,val];t2=l2<.5?l2*(1+s2):l2+s2-l2*s2;let t1=2*l2-t2,rgb=[0,0,0];for(let i2=0;i2<3;i2++)t3=h2+1/3*-(i2-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i2]=255*val;return rgb},convert2.hsl.hsv=function(hsl){let h2=hsl[0],s2=hsl[1]/100,l2=hsl[2]/100,smin=s2,lmin=Math.max(l2,.01);return l2*=2,s2*=l2<=1?l2:2-l2,smin*=lmin<=1?lmin:2-lmin,[h2,100*(0===l2?2*smin/(lmin+smin):2*s2/(l2+s2)),100*((l2+s2)/2)]},convert2.hsv.rgb=function(hsv){let h2=hsv[0]/60,s2=hsv[1]/100,v2=hsv[2]/100,hi=Math.floor(h2)%6,f2=h2-Math.floor(h2),p2=255*v2*(1-s2),q2=255*v2*(1-s2*f2),t2=255*v2*(1-s2*(1-f2));switch(v2*=255,hi){case 0:return[v2,t2,p2];case 1:return[q2,v2,p2];case 2:return[p2,v2,t2];case 3:return[p2,q2,v2];case 4:return[t2,p2,v2];case 5:return[v2,p2,q2]}},convert2.hsv.hsl=function(hsv){let sl,l2,h2=hsv[0],s2=hsv[1]/100,v2=hsv[2]/100,vmin=Math.max(v2,.01);l2=(2-s2)*v2;let lmin=(2-s2)*vmin;return sl=s2*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l2/=2,[h2,100*sl,100*l2]},convert2.hwb.rgb=function(hwb){let f2,h2=hwb[0]/360,wh=hwb[1]/100,bl=hwb[2]/100,ratio=wh+bl;ratio>1&&(wh/=ratio,bl/=ratio);let i2=Math.floor(6*h2),v2=1-bl;f2=6*h2-i2,1&i2&&(f2=1-f2);let r2,g2,b2,n2=wh+f2*(v2-wh);switch(i2){default:case 6:case 0:r2=v2,g2=n2,b2=wh;break;case 1:r2=n2,g2=v2,b2=wh;break;case 2:r2=wh,g2=v2,b2=n2;break;case 3:r2=wh,g2=n2,b2=v2;break;case 4:r2=n2,g2=wh,b2=v2;break;case 5:r2=v2,g2=wh,b2=n2}return[255*r2,255*g2,255*b2]},convert2.cmyk.rgb=function(cmyk){let c2=cmyk[0]/100,m2=cmyk[1]/100,y2=cmyk[2]/100,k2=cmyk[3]/100;return[255*(1-Math.min(1,c2*(1-k2)+k2)),255*(1-Math.min(1,m2*(1-k2)+k2)),255*(1-Math.min(1,y2*(1-k2)+k2))]},convert2.xyz.rgb=function(xyz){let r2,g2,b2,x2=xyz[0]/100,y2=xyz[1]/100,z2=xyz[2]/100;return r2=3.2406*x2+-1.5372*y2+-.4986*z2,g2=-.9689*x2+1.8758*y2+.0415*z2,b2=.0557*x2+-.204*y2+1.057*z2,r2=r2>.0031308?1.055*r2**(1/2.4)-.055:12.92*r2,g2=g2>.0031308?1.055*g2**(1/2.4)-.055:12.92*g2,b2=b2>.0031308?1.055*b2**(1/2.4)-.055:12.92*b2,r2=Math.min(Math.max(0,r2),1),g2=Math.min(Math.max(0,g2),1),b2=Math.min(Math.max(0,b2),1),[255*r2,255*g2,255*b2]},convert2.xyz.lab=function(xyz){let x2=xyz[0],y2=xyz[1],z2=xyz[2];return x2/=95.047,y2/=100,z2/=108.883,x2=x2>.008856?x2**(1/3):7.787*x2+16/116,y2=y2>.008856?y2**(1/3):7.787*y2+16/116,z2=z2>.008856?z2**(1/3):7.787*z2+16/116,[116*y2-16,500*(x2-y2),200*(y2-z2)]},convert2.lab.xyz=function(lab){let x2,y2,z2;y2=(lab[0]+16)/116,x2=lab[1]/500+y2,z2=y2-lab[2]/200;let y22=y2**3,x22=x2**3,z22=z2**3;return y2=y22>.008856?y22:(y2-16/116)/7.787,x2=x22>.008856?x22:(x2-16/116)/7.787,z2=z22>.008856?z22:(z2-16/116)/7.787,x2*=95.047,y2*=100,z2*=108.883,[x2,y2,z2]},convert2.lab.lch=function(lab){let h2,l2=lab[0],a2=lab[1],b2=lab[2];return h2=360*Math.atan2(b2,a2)/2/Math.PI,h2<0&&(h2+=360),[l2,Math.sqrt(a2*a2+b2*b2),h2]},convert2.lch.lab=function(lch){let l2=lch[0],c2=lch[1],hr=lch[2]/360*2*Math.PI;return[l2,c2*Math.cos(hr),c2*Math.sin(hr)]},convert2.rgb.ansi16=function(args,saturation=null){let[r2,g2,b2]=args,value=null===saturation?convert2.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b2/255)<<2|Math.round(g2/255)<<1|Math.round(r2/255));return 2===value&&(ansi+=60),ansi},convert2.hsv.ansi16=function(args){return convert2.rgb.ansi16(convert2.hsv.rgb(args),args[2])},convert2.rgb.ansi256=function(args){let r2=args[0],g2=args[1],b2=args[2];return r2===g2&&g2===b2?r2<8?16:r2>248?231:Math.round((r2-8)/247*24)+232:16+36*Math.round(r2/255*5)+6*Math.round(g2/255*5)+Math.round(b2/255*5)},convert2.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];let mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert2.ansi256.rgb=function(args){if(args>=232){let c2=10*(args-232)+8;return[c2,c2,c2]}let rem;return args-=16,[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert2.rgb.hex=function(args){let string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert2.hex.rgb=function(args){let match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((char=>char+char)).join(""));let integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert2.rgb.hcg=function(rgb){let grayscale,hue,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,max=Math.max(Math.max(r2,g2),b2),min=Math.min(Math.min(r2,g2),b2),chroma=max-min;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r2?(g2-b2)/chroma%6:max===g2?2+(b2-r2)/chroma:4+(r2-g2)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert2.hsl.hcg=function(hsl){let s2=hsl[1]/100,l2=hsl[2]/100,c2=l2<.5?2*s2*l2:2*s2*(1-l2),f2=0;return c2<1&&(f2=(l2-.5*c2)/(1-c2)),[hsl[0],100*c2,100*f2]},convert2.hsv.hcg=function(hsv){let s2=hsv[1]/100,v2=hsv[2]/100,c2=s2*v2,f2=0;return c2<1&&(f2=(v2-c2)/(1-c2)),[hsv[0],100*c2,100*f2]},convert2.hcg.rgb=function(hcg){let h2=hcg[0]/360,c2=hcg[1]/100,g2=hcg[2]/100;if(0===c2)return[255*g2,255*g2,255*g2];let pure=[0,0,0],hi=h2%1*6,v2=hi%1,w2=1-v2,mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v2,pure[2]=0;break;case 1:pure[0]=w2,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v2;break;case 3:pure[0]=0,pure[1]=w2,pure[2]=1;break;case 4:pure[0]=v2,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w2}return mg=(1-c2)*g2,[255*(c2*pure[0]+mg),255*(c2*pure[1]+mg),255*(c2*pure[2]+mg)]},convert2.hcg.hsv=function(hcg){let c2=hcg[1]/100,v2=c2+hcg[2]/100*(1-c2),f2=0;return v2>0&&(f2=c2/v2),[hcg[0],100*f2,100*v2]},convert2.hcg.hsl=function(hcg){let c2=hcg[1]/100,l2=hcg[2]/100*(1-c2)+.5*c2,s2=0;return l2>0&&l2<.5?s2=c2/(2*l2):l2>=.5&&l2<1&&(s2=c2/(2*(1-l2))),[hcg[0],100*s2,100*l2]},convert2.hcg.hwb=function(hcg){let c2=hcg[1]/100,v2=c2+hcg[2]/100*(1-c2);return[hcg[0],100*(v2-c2),100*(1-v2)]},convert2.hwb.hcg=function(hwb){let w2=hwb[1]/100,v2=1-hwb[2]/100,c2=v2-w2,g2=0;return c2<1&&(g2=(v2-c2)/(1-c2)),[hwb[0],100*c2,100*g2]},convert2.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert2.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert2.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert2.gray.hsl=function(args){return[0,0,args[0]]},convert2.gray.hsv=convert2.gray.hsl,convert2.gray.hwb=function(gray){return[0,100,gray[0]]},convert2.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert2.gray.lab=function(gray){return[gray[0],0,0]},convert2.gray.hex=function(gray){let val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert2.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}}}),require_route=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.P$)({"../../node_modules/color-convert/route.js"(exports,module){var conversions=require_conversions();function deriveBFS(fromModel){let graph=function buildGraph(){let graph={},models=Object.keys(conversions);for(let len=models.length,i2=0;i2<len;i2++)graph[models[i2]]={distance:-1,parent:null};return graph}(),queue=[fromModel];for(graph[fromModel].distance=0;queue.length;){let current=queue.pop(),adjacents=Object.keys(conversions[current]);for(let len=adjacents.length,i2=0;i2<len;i2++){let adjacent=adjacents[i2],node=graph[adjacent];-1===node.distance&&(node.distance=graph[current].distance+1,node.parent=current,queue.unshift(adjacent))}}return graph}function link(from,to){return function(args){return to(from(args))}}function wrapConversion(toModel,graph){let path=[graph[toModel].parent,toModel],fn=conversions[graph[toModel].parent][toModel],cur=graph[toModel].parent;for(;graph[cur].parent;)path.unshift(graph[cur].parent),fn=link(conversions[graph[cur].parent][cur],fn),cur=graph[cur].parent;return fn.conversion=path,fn}module.exports=function(fromModel){let graph=deriveBFS(fromModel),conversion={},models=Object.keys(graph);for(let len=models.length,i2=0;i2<len;i2++){let toModel=models[i2];null!==graph[toModel].parent&&(conversion[toModel]=wrapConversion(toModel,graph))}return conversion}}}),require_color_convert=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.P$)({"../../node_modules/color-convert/index.js"(exports,module){var conversions=require_conversions(),route=require_route(),convert2={};Object.keys(conversions).forEach((fromModel=>{convert2[fromModel]={},Object.defineProperty(convert2[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert2[fromModel],"labels",{value:conversions[fromModel].labels});let routes=route(fromModel);Object.keys(routes).forEach((toModel=>{let fn=routes[toModel];convert2[fromModel][toModel]=function wrapRounded(fn){let wrappedFn=function(...args){let arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);let result=fn(args);if("object"==typeof result)for(let len=result.length,i2=0;i2<len;i2++)result[i2]=Math.round(result[i2]);return result};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn),convert2[fromModel][toModel].raw=function wrapRaw(fn){let wrappedFn=function(...args){let arg0=args[0];return null==arg0?arg0:(arg0.length>1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))})),module.exports=convert2}}),import_color_convert=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.f1)(require_color_convert());function u(){return(u=Object.assign||function(e2){for(var r2=1;r2<arguments.length;r2++){var t2=arguments[r2];for(var n2 in t2)Object.prototype.hasOwnProperty.call(t2,n2)&&(e2[n2]=t2[n2])}return e2}).apply(this,arguments)}function c(e2,r2){if(null==e2)return{};var t2,n2,o2={},a2=Object.keys(e2);for(n2=0;n2<a2.length;n2++)r2.indexOf(t2=a2[n2])>=0||(o2[t2]=e2[t2]);return o2}function i(e2){var t2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(e2),n2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)((function(e3){t2.current&&t2.current(e3)}));return t2.current=e2,n2.current}var s=function(e2,r2,t2){return void 0===r2&&(r2=0),void 0===t2&&(t2=1),e2>t2?t2:e2<r2?r2:e2},f=function(e2){return"touches"in e2},v=function(e2){return e2&&e2.ownerDocument.defaultView||self},d=function(e2,r2,t2){var n2=e2.getBoundingClientRect(),o2=f(r2)?function(e3,r3){for(var t3=0;t3<e3.length;t3++)if(e3[t3].identifier===r3)return e3[t3];return e3[0]}(r2.touches,t2):r2;return{left:s((o2.pageX-(n2.left+v(e2).pageXOffset))/n2.width),top:s((o2.pageY-(n2.top+v(e2).pageYOffset))/n2.height)}},h=function(e2){!f(e2)&&e2.preventDefault()},m=react__WEBPACK_IMPORTED_MODULE_0__.memo((function(o2){var a2=o2.onMove,l2=o2.onKey,s2=c(o2,["onMove","onKey"]),m2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),g2=i(a2),p2=i(l2),b2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),_2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(!1),x2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((function(){var e2=function(e3){h(e3),(f(e3)?e3.touches.length>0:e3.buttons>0)&&m2.current?g2(d(m2.current,e3,b2.current)):t2(!1)},r2=function(){return t2(!1)};function t2(t3){var n2=_2.current,o3=v(m2.current),a3=t3?o3.addEventListener:o3.removeEventListener;a3(n2?"touchmove":"mousemove",e2),a3(n2?"touchend":"mouseup",r2)}return[function(e3){var e4,r3=e3.nativeEvent,n2=m2.current;if(n2&&(h(r3),e4=r3,(!_2.current||f(e4))&&n2)){if(f(r3)){_2.current=!0;var o3=r3.changedTouches||[];o3.length&&(b2.current=o3[0].identifier)}n2.focus(),g2(d(n2,r3,b2.current)),t2(!0)}},function(e3){var r3=e3.which||e3.keyCode;r3<37||r3>40||(e3.preventDefault(),p2({left:39===r3?.05:37===r3?-.05:0,top:40===r3?.05:38===r3?-.05:0}))},t2]}),[p2,g2]),C2=x2[0],E2=x2[1],H2=x2[2];return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){return H2}),[H2]),react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",u({},s2,{onTouchStart:C2,onMouseDown:C2,className:"react-colorful__interactive",ref:m2,onKeyDown:E2,tabIndex:0,role:"slider"}))})),g=function(e2){return e2.filter(Boolean).join(" ")},p=function(r2){var t2=r2.color,n2=r2.left,o2=r2.top,a2=void 0===o2?.5:o2,l2=g(["react-colorful__pointer",r2.className]);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:l2,style:{top:100*a2+"%",left:100*n2+"%"}},react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t2}}))},b=function(e2,r2,t2){return void 0===r2&&(r2=0),void 0===t2&&(t2=Math.pow(10,r2)),Math.round(t2*e2)/t2},_={grad:.9,turn:360,rad:360/(2*Math.PI)},C=function(e2){return"#"===e2[0]&&(e2=e2.substring(1)),e2.length<6?{r:parseInt(e2[0]+e2[0],16),g:parseInt(e2[1]+e2[1],16),b:parseInt(e2[2]+e2[2],16),a:4===e2.length?b(parseInt(e2[3]+e2[3],16)/255,2):1}:{r:parseInt(e2.substring(0,2),16),g:parseInt(e2.substring(2,4),16),b:parseInt(e2.substring(4,6),16),a:8===e2.length?b(parseInt(e2.substring(6,8),16)/255,2):1}},E=function(e2,r2){return void 0===r2&&(r2="deg"),Number(e2)*(_[r2]||1)},N=function(e2){var r2=e2.s,t2=e2.l;return{h:e2.h,s:(r2*=(t2<50?t2:100-t2)/100)>0?2*r2/(t2+r2)*100:0,v:t2+r2,a:e2.a}},y=function(e2){var r2=e2.s,t2=e2.v,n2=e2.a,o2=(200-r2)*t2/100;return{h:b(e2.h),s:b(o2>0&&o2<200?r2*t2/100/(o2<=100?o2:200-o2)*100:0),l:b(o2/2),a:b(n2,2)}},q=function(e2){var r2=y(e2);return"hsl("+r2.h+", "+r2.s+"%, "+r2.l+"%)"},k=function(e2){var r2=y(e2);return"hsla("+r2.h+", "+r2.s+"%, "+r2.l+"%, "+r2.a+")"},I=function(e2){var r2=e2.h,t2=e2.s,n2=e2.v,o2=e2.a;r2=r2/360*6,t2/=100,n2/=100;var a2=Math.floor(r2),l2=n2*(1-t2),u2=n2*(1-(r2-a2)*t2),c2=n2*(1-(1-r2+a2)*t2),i2=a2%6;return{r:b(255*[n2,u2,l2,l2,c2,n2][i2]),g:b(255*[c2,n2,n2,u2,l2,l2][i2]),b:b(255*[l2,l2,c2,n2,n2,u2][i2]),a:b(o2,2)}},D=function(e2){var r2=e2.toString(16);return r2.length<2?"0"+r2:r2},K=function(e2){var r2=e2.r,t2=e2.g,n2=e2.b,o2=e2.a,a2=o2<1?D(b(255*o2)):"";return"#"+D(r2)+D(t2)+D(n2)+a2},L=function(e2){var r2=e2.r,t2=e2.g,n2=e2.b,o2=e2.a,a2=Math.max(r2,t2,n2),l2=a2-Math.min(r2,t2,n2),u2=l2?a2===r2?(t2-n2)/l2:a2===t2?2+(n2-r2)/l2:4+(r2-t2)/l2:0;return{h:b(60*(u2<0?u2+6:u2)),s:b(a2?l2/a2*100:0),v:b(a2/255*100),a:o2}},S=react__WEBPACK_IMPORTED_MODULE_0__.memo((function(r2){var t2=r2.hue,n2=r2.onChange,o2=g(["react-colorful__hue",r2.className]);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:o2},react__WEBPACK_IMPORTED_MODULE_0__.createElement(m,{onMove:function(e2){n2({h:360*e2.left})},onKey:function(e2){n2({h:s(t2+360*e2.left,0,360)})},"aria-label":"Hue","aria-valuenow":b(t2),"aria-valuemax":"360","aria-valuemin":"0"},react__WEBPACK_IMPORTED_MODULE_0__.createElement(p,{className:"react-colorful__hue-pointer",left:t2/360,color:q({h:t2,s:100,v:100,a:1})})))})),T=react__WEBPACK_IMPORTED_MODULE_0__.memo((function(r2){var t2=r2.hsva,n2=r2.onChange,o2={backgroundColor:q({h:t2.h,s:100,v:100,a:1})};return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"react-colorful__saturation",style:o2},react__WEBPACK_IMPORTED_MODULE_0__.createElement(m,{onMove:function(e2){n2({s:100*e2.left,v:100-100*e2.top})},onKey:function(e2){n2({s:s(t2.s+100*e2.left,0,100),v:s(t2.v-100*e2.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+b(t2.s)+"%, Brightness "+b(t2.v)+"%"},react__WEBPACK_IMPORTED_MODULE_0__.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t2.v/100,left:t2.s/100,color:q(t2)})))})),F=function(e2,r2){if(e2===r2)return!0;for(var t2 in e2)if(e2[t2]!==r2[t2])return!1;return!0},P=function(e2,r2){return e2.replace(/\s/g,"")===r2.replace(/\s/g,"")};function Y(e2,t2,l2){var u2=i(l2),c2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)((function(){return e2.toHsva(t2)})),s2=c2[0],f2=c2[1],v2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({color:t2,hsva:s2});(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){if(!e2.equal(t2,v2.current.color)){var r2=e2.toHsva(t2);v2.current={hsva:r2,color:t2},f2(r2)}}),[t2,e2]),(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){var r2;F(s2,v2.current.hsva)||e2.equal(r2=e2.fromHsva(s2),v2.current.color)||(v2.current={hsva:s2,color:r2},u2(r2))}),[s2,e2,u2]);var d2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e3){f2((function(r2){return Object.assign({},r2,e3)}))}),[]);return[s2,d2]}var ColorSpace2,V=typeof window<"u"?react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect:react__WEBPACK_IMPORTED_MODULE_0__.useEffect,J=new Map,Q=function(e2){V((function(){var r2=e2.current?e2.current.ownerDocument:document;if(void 0!==r2&&!J.has(r2)){var t2=r2.createElement("style");t2.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r2,t2);var n2=__webpack_require__.nc;n2&&t2.setAttribute("nonce",n2),r2.head.appendChild(t2)}}),[])},U=function(t2){var n2=t2.className,o2=t2.colorModel,a2=t2.color,l2=void 0===a2?o2.defaultColor:a2,i2=t2.onChange,s2=c(t2,["className","colorModel","color","onChange"]),f2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);Q(f2);var v2=Y(o2,l2,i2),d2=v2[0],h2=v2[1],m2=g(["react-colorful",n2]);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",u({},s2,{ref:f2,className:m2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(T,{hsva:d2,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(S,{hue:d2.h,onChange:h2,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:function(e2){return L(C(e2))},fromHsva:function(e2){return function(e2){return K(I(e2))}({h:e2.h,s:e2.s,v:e2.v,a:1})},equal:function(e2,r2){return e2.toLowerCase()===r2.toLowerCase()||F(C(e2),C(r2))}},ee=function(r2){var t2=r2.className,n2=r2.hsva,o2=r2.onChange,a2={backgroundImage:"linear-gradient(90deg, "+k(Object.assign({},n2,{a:0}))+", "+k(Object.assign({},n2,{a:1}))+")"},l2=g(["react-colorful__alpha",t2]),u2=b(100*n2.a);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:l2},react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"react-colorful__alpha-gradient",style:a2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(m,{onMove:function(e2){o2({a:e2.left})},onKey:function(e2){o2({a:s(n2.a+e2.left)})},"aria-label":"Alpha","aria-valuetext":u2+"%","aria-valuenow":u2,"aria-valuemin":"0","aria-valuemax":"100"},react__WEBPACK_IMPORTED_MODULE_0__.createElement(p,{className:"react-colorful__alpha-pointer",left:n2.a,color:k(n2)})))},re=function(t2){var n2=t2.className,o2=t2.colorModel,a2=t2.color,l2=void 0===a2?o2.defaultColor:a2,i2=t2.onChange,s2=c(t2,["className","colorModel","color","onChange"]),f2=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);Q(f2);var v2=Y(o2,l2,i2),d2=v2[0],h2=v2[1],m2=g(["react-colorful",n2]);return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",u({},s2,{ref:f2,className:m2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(T,{hsva:d2,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(S,{hue:d2.h,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_0__.createElement(ee,{hsva:d2,onChange:h2,className:"react-colorful__last-control"}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:function(e2){var r2=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e2);return r2?N({h:E(r2[1],r2[2]),s:Number(r2[3]),l:Number(r2[4]),a:void 0===r2[5]?1:Number(r2[5])/(r2[6]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:k,equal:P},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:function(e2){var r2=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e2);return r2?L({r:Number(r2[1])/(r2[2]?100/255:1),g:Number(r2[3])/(r2[4]?100/255:1),b:Number(r2[5])/(r2[6]?100/255:1),a:void 0===r2[7]?1:Number(r2[7])/(r2[8]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:function(e2){var r2=I(e2);return"rgba("+r2.r+", "+r2.g+", "+r2.b+", "+r2.a+")"},equal:P},Wrapper=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),PickerTooltip=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_3__.kR)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),TooltipContent=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_3__._)((({theme})=>({fontFamily:theme.typography.fonts.base}))),Swatches=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4.div((({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius}))),Swatch=({value,style,...props})=>{let backgroundImage=`linear-gradient(${value}, ${value}), url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>'), linear-gradient(#fff, #fff)`;return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SwatchColor,{...props,style:{...style,backgroundImage}})},Input=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_3__.lV.Input)((({theme,readOnly})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base}))),ToggleIcon=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_2__.I4)(_storybook_icons__WEBPACK_IMPORTED_MODULE_4__.QDE)((({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color}))),ColorSpace=((ColorSpace2=ColorSpace||{}).RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:function(r2){return react__WEBPACK_IMPORTED_MODULE_0__.createElement(U,u({},r2,{colorModel:W}))},rgb:function(r2){return react__WEBPACK_IMPORTED_MODULE_0__.createElement(re,u({},r2,{colorModel:Ee}))},hsl:function(r2){return react__WEBPACK_IMPORTED_MODULE_0__.createElement(re,u({},r2,{colorModel:le}))}},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value=>{let match=value?.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x2,y2,z2,a2=1]=match;return[x2,y2,z2,a2].map(Number)},parseValue=value=>{if(!value)return;let valid=!0;if(RGB_REGEXP.test(value)){let[r2,g2,b2,a2]=stringToArgs(value),[h2,s2,l2]=import_color_convert.default.rgb.hsl([r2,g2,b2])||[0,0,0];return{valid,value,keyword:import_color_convert.default.rgb.keyword([r2,g2,b2]),colorSpace:"rgb",rgb:value,hsl:`hsla(${h2}, ${s2}%, ${l2}%, ${a2})`,hex:`#${import_color_convert.default.rgb.hex([r2,g2,b2]).toLowerCase()}`}}if(HSL_REGEXP.test(value)){let[h2,s2,l2,a2]=stringToArgs(value),[r2,g2,b2]=import_color_convert.default.hsl.rgb([h2,s2,l2])||[0,0,0];return{valid,value,keyword:import_color_convert.default.hsl.keyword([h2,s2,l2]),colorSpace:"hsl",rgb:`rgba(${r2}, ${g2}, ${b2}, ${a2})`,hsl:value,hex:`#${import_color_convert.default.hsl.hex([h2,s2,l2]).toLowerCase()}`}}let plain=value.replace("#",""),rgb=import_color_convert.default.keyword.rgb(plain)||import_color_convert.default.hex.rgb(plain),hsl=import_color_convert.default.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{import_color_convert.default.keyword.hex(mapped)}catch{valid=!1}return{valid,value:mapped,keyword:import_color_convert.default.rgb.keyword(rgb),colorSpace:"hex",rgb:`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,hsl:`hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,hex:mapped}},useColorInput=(initialValue,onChange)=>{let[value,setValue]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialValue||""),[color,setColor]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)((()=>parseValue(value))),[colorSpace,setColorSpace]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(color?.colorSpace||"hex");(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"hex")}),[initialValue]);let realValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>((value,color,colorSpace)=>{if(!value||!color?.valid)return fallbackColor[colorSpace];if("hex"!==colorSpace)return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return`#${import_color_convert.default.keyword.hex(color.hex)}`}catch{return fallbackColor.hex}let short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;let[r2,g2,b2]=short[1].split("");return`#${r2}${r2}${g2}${g2}${b2}${b2}`})(value,color,colorSpace).toLowerCase()),[value,color,colorSpace]),updateValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((update=>{let parsed=parseValue(update),v2=parsed?.value||update||"";setValue(v2),""===v2&&(setColor(void 0),onChange(void 0)),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>{let next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);let update=color?.[COLOR_SPACES[next]]||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value=>value.replace(/\s*/,"").toLowerCase(),ColorControl=({name,value:initialValue,onChange,onFocus,onBlur,presetColors,startOpen=!1,argType})=>{let debouncedOnChange=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.sg)(onChange,200),[onChange]),{value,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,debouncedOnChange),{presets,addPreset}=((presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(currentColor?.valid?[currentColor]:[]);(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{void 0===currentColor&&setSelectedColors([])}),[currentColor]);let presets=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>(presetColors||[]).map((preset=>"string"==typeof preset?parseValue(preset):preset.title?{...parseValue(preset.color),keyword:preset.title}:parseValue(preset.color))).concat(selectedColors).filter(Boolean).slice(-27)),[presetColors,selectedColors]),addPreset=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((color=>{color?.valid&&(presets.some((preset=>id(preset[colorSpace])===id(color[colorSpace])))||setSelectedColors((arr=>arr.concat(color))))}),[colorSpace,presets]);return{presets,addPreset}})(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace],readonly=!!argType?.table?.readonly;return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper,{"aria-readonly":readonly},react__WEBPACK_IMPORTED_MODULE_0__.createElement(PickerTooltip,{startOpen,trigger:readonly?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>addPreset(color),tooltip:react__WEBPACK_IMPORTED_MODULE_0__.createElement(TooltipContent,null,react__WEBPACK_IMPORTED_MODULE_0__.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus,onBlur}),presets.length>0&&react__WEBPACK_IMPORTED_MODULE_0__.createElement(Swatches,null,presets.map(((preset,index)=>react__WEBPACK_IMPORTED_MODULE_0__.createElement(storybook_internal_components__WEBPACK_IMPORTED_MODULE_3__.kR,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:react__WEBPACK_IMPORTED_MODULE_0__.createElement(Note,{note:preset.keyword||preset.value})},react__WEBPACK_IMPORTED_MODULE_0__.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)}))))))},react__WEBPACK_IMPORTED_MODULE_0__.createElement(Swatch,{value:realValue,style:{margin:4}})),react__WEBPACK_IMPORTED_MODULE_0__.createElement(Input,{id:(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_1__.ZA)(name),value,onChange:e2=>updateValue(e2.target.value),onFocus:e2=>e2.target.select(),readOnly:readonly,placeholder:"Choose color..."}),value?react__WEBPACK_IMPORTED_MODULE_0__.createElement(ToggleIcon,{onClick:cycleColorSpace}):null)},Color_default=ColorControl}}]);
@@ -1,2 +0,0 @@
1
- /*! For license information please see 961.0e5457c5.iframe.bundle.js.LICENSE.txt */
2
- "use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[961],{"./node_modules/react-dom/cjs/react-dom.production.js":(__unused_webpack_module,exports,__webpack_require__)=>{var React=__webpack_require__("./node_modules/react/index.js");function formatProdErrorMessage(code){var url="https://react.dev/errors/"+code;if(1<arguments.length){url+="?args[]="+encodeURIComponent(arguments[1]);for(var i=2;i<arguments.length;i++)url+="&args[]="+encodeURIComponent(arguments[i])}return"Minified React error #"+code+"; visit "+url+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function noop(){}var Internals={d:{f:noop,r:function(){throw Error(formatProdErrorMessage(522))},D:noop,C:noop,L:noop,m:noop,X:noop,S:noop,M:noop},p:0,findDOMNode:null},REACT_PORTAL_TYPE=Symbol.for("react.portal");var ReactSharedInternals=React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;function getCrossOriginStringAs(as,input){return"font"===as?"":"string"==typeof input?"use-credentials"===input?input:"":void 0}exports.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=Internals,exports.createPortal=function(children,container){var key=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!container||1!==container.nodeType&&9!==container.nodeType&&11!==container.nodeType)throw Error(formatProdErrorMessage(299));return function createPortal$1(children,containerInfo,implementation){var key=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:REACT_PORTAL_TYPE,key:null==key?null:""+key,children,containerInfo,implementation}}(children,container,null,key)},exports.flushSync=function(fn){var previousTransition=ReactSharedInternals.T,previousUpdatePriority=Internals.p;try{if(ReactSharedInternals.T=null,Internals.p=2,fn)return fn()}finally{ReactSharedInternals.T=previousTransition,Internals.p=previousUpdatePriority,Internals.d.f()}},exports.preconnect=function(href,options){"string"==typeof href&&(options?options="string"==typeof(options=options.crossOrigin)?"use-credentials"===options?options:"":void 0:options=null,Internals.d.C(href,options))},exports.prefetchDNS=function(href){"string"==typeof href&&Internals.d.D(href)},exports.preinit=function(href,options){if("string"==typeof href&&options&&"string"==typeof options.as){var as=options.as,crossOrigin=getCrossOriginStringAs(as,options.crossOrigin),integrity="string"==typeof options.integrity?options.integrity:void 0,fetchPriority="string"==typeof options.fetchPriority?options.fetchPriority:void 0;"style"===as?Internals.d.S(href,"string"==typeof options.precedence?options.precedence:void 0,{crossOrigin,integrity,fetchPriority}):"script"===as&&Internals.d.X(href,{crossOrigin,integrity,fetchPriority,nonce:"string"==typeof options.nonce?options.nonce:void 0})}},exports.preinitModule=function(href,options){if("string"==typeof href)if("object"==typeof options&&null!==options){if(null==options.as||"script"===options.as){var crossOrigin=getCrossOriginStringAs(options.as,options.crossOrigin);Internals.d.M(href,{crossOrigin,integrity:"string"==typeof options.integrity?options.integrity:void 0,nonce:"string"==typeof options.nonce?options.nonce:void 0})}}else null==options&&Internals.d.M(href)},exports.preload=function(href,options){if("string"==typeof href&&"object"==typeof options&&null!==options&&"string"==typeof options.as){var as=options.as,crossOrigin=getCrossOriginStringAs(as,options.crossOrigin);Internals.d.L(href,as,{crossOrigin,integrity:"string"==typeof options.integrity?options.integrity:void 0,nonce:"string"==typeof options.nonce?options.nonce:void 0,type:"string"==typeof options.type?options.type:void 0,fetchPriority:"string"==typeof options.fetchPriority?options.fetchPriority:void 0,referrerPolicy:"string"==typeof options.referrerPolicy?options.referrerPolicy:void 0,imageSrcSet:"string"==typeof options.imageSrcSet?options.imageSrcSet:void 0,imageSizes:"string"==typeof options.imageSizes?options.imageSizes:void 0,media:"string"==typeof options.media?options.media:void 0})}},exports.preloadModule=function(href,options){if("string"==typeof href)if(options){var crossOrigin=getCrossOriginStringAs(options.as,options.crossOrigin);Internals.d.m(href,{as:"string"==typeof options.as&&"script"!==options.as?options.as:void 0,crossOrigin,integrity:"string"==typeof options.integrity?options.integrity:void 0})}else Internals.d.m(href)},exports.requestFormReset=function(form){Internals.d.r(form)},exports.unstable_batchedUpdates=function(fn,a){return fn(a)},exports.useFormState=function(action,initialState,permalink){return ReactSharedInternals.H.useFormState(action,initialState,permalink)},exports.useFormStatus=function(){return ReactSharedInternals.H.useHostTransitionStatus()},exports.version="19.1.0"},"./node_modules/react-dom/index.js":(module,__unused_webpack_exports,__webpack_require__)=>{!function checkDCE(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE)}catch(err){console.error(err)}}(),module.exports=__webpack_require__("./node_modules/react-dom/cjs/react-dom.production.js")}}]);
@@ -1 +0,0 @@
1
- (self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[792],{"./.storybook/preview.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>_storybook_preview});const _storybook_preview={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}}}}},"./node_modules/@storybook/instrumenter/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/instrumenter/dist sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/test/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/test/dist sync recursive",module.exports=webpackEmptyContext},"./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./stories/Configure.mdx":["./src/stories/Configure.mdx",844,187]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$",module.exports=webpackAsyncContext},"./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./stories/Badge.stories":["./src/stories/Badge.stories.tsx",314,544],"./stories/Badge.stories.tsx":["./src/stories/Badge.stories.tsx",314,544],"./stories/Button.stories":["./src/stories/Button.stories.tsx",314,791],"./stories/Button.stories.tsx":["./src/stories/Button.stories.tsx",314,791],"./stories/ButtonGroup.stories":["./src/stories/ButtonGroup.stories.tsx",314,88],"./stories/ButtonGroup.stories.tsx":["./src/stories/ButtonGroup.stories.tsx",314,88],"./stories/Colors.stories":["./src/stories/Colors.stories.tsx",471],"./stories/Colors.stories.tsx":["./src/stories/Colors.stories.tsx",471],"./stories/Header.stories":["./src/stories/Header.stories.ts",512],"./stories/Header.stories.ts":["./src/stories/Header.stories.ts",512],"./stories/MobileNav.stories":["./src/stories/MobileNav.stories.tsx",314,13,742,568],"./stories/MobileNav.stories.tsx":["./src/stories/MobileNav.stories.tsx",314,13,742,568],"./stories/Page.stories":["./src/stories/Page.stories.ts",290],"./stories/Page.stories.ts":["./src/stories/Page.stories.ts",290],"./stories/Paginate.stories":["./src/stories/Paginate.stories.tsx",314,660],"./stories/Paginate.stories.tsx":["./src/stories/Paginate.stories.tsx",314,660],"./stories/Select.stories":["./src/stories/Select.stories.tsx",314,13,707],"./stories/Select.stories.tsx":["./src/stories/Select.stories.tsx",314,13,707],"./stories/SideNav.stories":["./src/stories/SideNav.stories.tsx",314,13,742,785],"./stories/SideNav.stories.tsx":["./src/stories/SideNav.stories.tsx",314,13,742,785],"./stories/TextInput.stories":["./src/stories/TextInput.stories.tsx",314,550],"./stories/TextInput.stories.tsx":["./src/stories/TextInput.stories.tsx",314,550],"./stories/Typography.stories":["./src/stories/Typography.stories.tsx",244],"./stories/Typography.stories.tsx":["./src/stories/Typography.stories.tsx",244]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$",module.exports=webpackAsyncContext},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var external_STORYBOOK_MODULE_CHANNELS_=__webpack_require__("storybook/internal/channels"),csf=__webpack_require__("./node_modules/@storybook/core/dist/csf/index.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("storybook/internal/preview-api"),external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global");const importers=[async path=>{if(!/^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.mdx)$/.exec(path))return;const pathRemainder=path.substring(6);return __webpack_require__("./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|mjs|ts|tsx))$/.exec(path))return;const pathRemainder=path.substring(6);return __webpack_require__("./src lazy recursive ^\\.\\/.*$ include: (?%21.*node_modules)(?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$")("./"+pathRemainder)}];const channel=(0,external_STORYBOOK_MODULE_CHANNELS_.createBrowserChannel)({page:"preview"});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),"DEVELOPMENT"===external_STORYBOOK_MODULE_GLOBAL_.global.CONFIG_TYPE&&(window.__STORYBOOK_SERVER_CHANNEL__=channel);const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb((async function importFn(path){for(let i=0;i<importers.length;i++){const moduleExports=await(x=()=>importers[i](path),x());if(moduleExports)return moduleExports}var x}),(()=>{const previewAnnotations=[__webpack_require__("./node_modules/@storybook/react/dist/entry-preview.mjs"),__webpack_require__("./node_modules/@storybook/react/dist/entry-preview-docs.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/docs/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/viewport/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-interactions/dist/preview.mjs"),__webpack_require__("./node_modules/@storybook/addon-links/dist/preview.mjs"),__webpack_require__("./.storybook/preview.ts")],userPreview=previewAnnotations[previewAnnotations.length-1]?.default;return(0,csf.bU)(userPreview)?userPreview.composed:(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)(previewAnnotations)}));window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel},"@storybook/global":module=>{"use strict";module.exports=__STORYBOOK_MODULE_GLOBAL__},"storybook/internal/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"storybook/internal/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"storybook/internal/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"storybook/internal/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__},"storybook/internal/preview-errors":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__}},__webpack_require__=>{__webpack_require__.O(0,[125],(()=>{return moduleId="./storybook-config-entry.js",__webpack_require__(__webpack_require__.s=moduleId);var moduleId}));__webpack_require__.O()}]);
@@ -1 +0,0 @@
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}}}}}]);
@@ -1 +0,0 @@
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}}}}}]);
@@ -1 +0,0 @@
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}}}}}]);
@@ -1,2 +0,0 @@
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}}}}}]);
@@ -1 +0,0 @@
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)}}}]);
@@ -1,2 +0,0 @@
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}}}}}]);
@@ -1 +0,0 @@
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}}}}}]);
@@ -1,2 +0,0 @@
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}}}}}]);
@@ -1 +0,0 @@
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}}}}}]);