@jenesei-software/jenesei-kit-react 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (272) hide show
  1. package/README.md +0 -1
  2. package/build/{area-DfCAwCiZ.js → area-3gVEQsJq.js} +20 -22
  3. package/build/area-3gVEQsJq.js.map +1 -0
  4. package/build/area-C8w6fMSn.cjs +38 -0
  5. package/build/area-C8w6fMSn.cjs.map +1 -0
  6. package/build/{area-9NUxwBGc.cjs → area-E4w7aKuZ.cjs} +2 -2
  7. package/build/{area-9NUxwBGc.cjs.map → area-E4w7aKuZ.cjs.map} +1 -1
  8. package/build/{area-BnAddPtl.js → area-EcUYP2tl.js} +2 -2
  9. package/build/{area-BnAddPtl.js.map → area-EcUYP2tl.js.map} +1 -1
  10. package/build/area-preview.cjs.js +1 -1
  11. package/build/area-preview.es.js +1 -1
  12. package/build/area-skeleton.cjs.js +1 -1
  13. package/build/area-skeleton.es.js +1 -1
  14. package/build/build-info.txt +3 -3
  15. package/build/{component-C2JFFh-k.js → component--cOriuv7.js} +103 -27
  16. package/build/component--cOriuv7.js.map +1 -0
  17. package/build/{component-CFMlaYj1.js → component-9m1Ib3fS.js} +2 -2
  18. package/build/{component-CFMlaYj1.js.map → component-9m1Ib3fS.js.map} +1 -1
  19. package/build/{component-CuiUpH8H.js → component-B1IQ5CfM.js} +10 -10
  20. package/build/component-B1IQ5CfM.js.map +1 -0
  21. package/build/{component-C52VCES6.cjs → component-BnYw0FvH.cjs} +21 -17
  22. package/build/component-BnYw0FvH.cjs.map +1 -0
  23. package/build/{component-nFn_uOy_.cjs → component-Bovatz78.cjs} +2 -2
  24. package/build/{component-nFn_uOy_.cjs.map → component-Bovatz78.cjs.map} +1 -1
  25. package/build/{component-UW1VzyvB.cjs → component-C0atFCun.cjs} +2 -2
  26. package/build/{component-UW1VzyvB.cjs.map → component-C0atFCun.cjs.map} +1 -1
  27. package/build/{component-DZxbW_Jz.js → component-CbPhVNw5.js} +30 -28
  28. package/build/component-CbPhVNw5.js.map +1 -0
  29. package/build/component-CbnBTIR5.cjs +2 -0
  30. package/build/component-CbnBTIR5.cjs.map +1 -0
  31. package/build/{component-xnEaYd4a.cjs → component-D7A-4DNQ.cjs} +2 -2
  32. package/build/{component-xnEaYd4a.cjs.map → component-D7A-4DNQ.cjs.map} +1 -1
  33. package/build/{component-CBshLNEf.js → component-DURhph1i.js} +3 -3
  34. package/build/{component-CBshLNEf.js.map → component-DURhph1i.js.map} +1 -1
  35. package/build/component-X4e7zEKk.cjs +90 -0
  36. package/build/component-X4e7zEKk.cjs.map +1 -0
  37. package/build/component-accordion.cjs.js +1 -1
  38. package/build/component-accordion.es.js +1 -1
  39. package/build/component-button-group.cjs.js +1 -1
  40. package/build/component-button-group.d.ts +5 -1
  41. package/build/component-button-group.es.js +1 -1
  42. package/build/component-button.cjs.js +1 -1
  43. package/build/component-button.d.ts +6 -2
  44. package/build/component-button.es.js +1 -1
  45. package/build/component-checkbox-group.cjs.js +1 -1
  46. package/build/component-checkbox-group.d.ts +2 -1
  47. package/build/component-checkbox-group.es.js +1 -1
  48. package/build/component-checkbox.cjs.js +1 -1
  49. package/build/component-checkbox.d.ts +2 -1
  50. package/build/component-checkbox.es.js +1 -1
  51. package/build/component-date-picker.cjs.js +1 -1
  52. package/build/component-date-picker.d.ts +93 -70
  53. package/build/component-date-picker.es.js +1 -1
  54. package/build/component-icon.cjs.js +1 -1
  55. package/build/component-icon.es.js +1 -1
  56. package/build/component-image-button.cjs.js +1 -1
  57. package/build/component-image-button.d.ts +5 -1
  58. package/build/component-image-button.es.js +1 -1
  59. package/build/component-image-select.cjs.js +1 -1
  60. package/build/component-image-select.d.ts +5 -1
  61. package/build/component-image-select.es.js +1 -1
  62. package/build/component-image-slider.cjs.js +1 -1
  63. package/build/component-image-slider.es.js +1 -1
  64. package/build/component-image.cjs.js +1 -1
  65. package/build/component-image.es.js +1 -1
  66. package/build/component-input-otp.cjs.js +1 -1
  67. package/build/component-input-otp.d.ts +31 -19
  68. package/build/component-input-otp.es.js +1 -1
  69. package/build/component-input.cjs.js +1 -1
  70. package/build/component-input.d.ts +48 -38
  71. package/build/component-input.es.js +4 -4
  72. package/build/component-map.cjs.js +1 -1
  73. package/build/component-map.es.js +1 -1
  74. package/build/component-pagination.cjs.js +1 -1
  75. package/build/component-pagination.d.ts +5 -1
  76. package/build/component-pagination.es.js +1 -1
  77. package/build/component-range.cjs.js +1 -1
  78. package/build/component-range.d.ts +28 -18
  79. package/build/component-range.es.js +1 -1
  80. package/build/component-ripple.cjs.js +1 -1
  81. package/build/component-ripple.es.js +1 -1
  82. package/build/component-select.cjs.js +1 -1
  83. package/build/component-select.d.ts +125 -230
  84. package/build/component-select.es.js +16 -20
  85. package/build/component-separator.cjs.js +1 -1
  86. package/build/component-separator.d.ts +3 -2
  87. package/build/component-separator.es.js +1 -1
  88. package/build/component-textarea.cjs.js +1 -1
  89. package/build/component-textarea.d.ts +74 -53
  90. package/build/component-textarea.es.js +4 -8
  91. package/build/component-toggle.cjs.js +1 -1
  92. package/build/component-toggle.es.js +1 -1
  93. package/build/component-tooltip.cjs.js +1 -1
  94. package/build/component-tooltip.d.ts +9 -2
  95. package/build/component-tooltip.es.js +1 -1
  96. package/build/component-typography.cjs.js +1 -1
  97. package/build/component-typography.d.ts +8 -2
  98. package/build/component-typography.es.js +1 -1
  99. package/build/{component-ByY_9Ryc.js → component-vpCWcIhC.js} +2 -2
  100. package/build/{component-ByY_9Ryc.js.map → component-vpCWcIhC.js.map} +1 -1
  101. package/build/{component.components-CaR5gfQW.cjs → component.components-1kRDD3KO.cjs} +2 -2
  102. package/build/{component.components-CaR5gfQW.cjs.map → component.components-1kRDD3KO.cjs.map} +1 -1
  103. package/build/{component.components-BAAT5GTH.js → component.components-CQ3LLnFl.js} +5 -5
  104. package/build/{component.components-BAAT5GTH.js.map → component.components-CQ3LLnFl.js.map} +1 -1
  105. package/build/{component.constants-DRvp5Bez.js → component.constants-B1rq1PLe.js} +2 -2
  106. package/build/{component.constants-DRvp5Bez.js.map → component.constants-B1rq1PLe.js.map} +1 -1
  107. package/build/{component.constants-DbNhxh0k.js → component.constants-B95xyW0s.js} +211 -207
  108. package/build/component.constants-B95xyW0s.js.map +1 -0
  109. package/build/{component.constants-BeWW8Ijx.cjs → component.constants-BLHg7rcI.cjs} +2 -2
  110. package/build/{component.constants-BeWW8Ijx.cjs.map → component.constants-BLHg7rcI.cjs.map} +1 -1
  111. package/build/component.constants-Gz2mf7IF.cjs +22 -0
  112. package/build/component.constants-Gz2mf7IF.cjs.map +1 -0
  113. package/build/{component.styles-BfvB83xM.cjs → component.styles-B-ZAk_1C.cjs} +7 -7
  114. package/build/component.styles-B-ZAk_1C.cjs.map +1 -0
  115. package/build/{component.styles-Do1NYZEO.js → component.styles-BI4OuDrG.js} +32 -20
  116. package/build/component.styles-BI4OuDrG.js.map +1 -0
  117. package/build/component.styles-BLh29xwF.cjs +10 -0
  118. package/build/component.styles-BLh29xwF.cjs.map +1 -0
  119. package/build/component.styles-BnJjm_ES.js +37 -0
  120. package/build/component.styles-BnJjm_ES.js.map +1 -0
  121. package/build/{component.styles-RkQwTlwG.js → component.styles-BoBaG6sX.js} +13 -5
  122. package/build/component.styles-BoBaG6sX.js.map +1 -0
  123. package/build/component.styles-BrGPrrEb.cjs +39 -0
  124. package/build/component.styles-BrGPrrEb.cjs.map +1 -0
  125. package/build/{component.styles-ZtwHuL4x.cjs → component.styles-Bz2vyHqK.cjs} +5 -7
  126. package/build/component.styles-Bz2vyHqK.cjs.map +1 -0
  127. package/build/{component.styles-CVBpx4fw.js → component.styles-BzNkEurr.js} +13 -13
  128. package/build/component.styles-BzNkEurr.js.map +1 -0
  129. package/build/component.styles-CLn52hJD.cjs +14 -0
  130. package/build/component.styles-CLn52hJD.cjs.map +1 -0
  131. package/build/{component.styles-DOPCUXcr.js → component.styles-CRWn1pVi.js} +11 -13
  132. package/build/component.styles-CRWn1pVi.js.map +1 -0
  133. package/build/{component.styles-CmEFZfA5.js → component.styles-CccZrbSA.js} +53 -42
  134. package/build/component.styles-CccZrbSA.js.map +1 -0
  135. package/build/component.styles-CdtZm7bl.cjs +165 -0
  136. package/build/component.styles-CdtZm7bl.cjs.map +1 -0
  137. package/build/{component.styles-BapdQNhL.js → component.styles-CiGPOpxk.js} +5 -5
  138. package/build/component.styles-CiGPOpxk.js.map +1 -0
  139. package/build/component.styles-CvJK1eif.cjs +230 -0
  140. package/build/component.styles-CvJK1eif.cjs.map +1 -0
  141. package/build/component.styles-D6KuudL3.js +1372 -0
  142. package/build/component.styles-D6KuudL3.js.map +1 -0
  143. package/build/{component.styles-DyGfo9t0.cjs → component.styles-DDUGBJle.cjs} +2 -2
  144. package/build/{component.styles-DyGfo9t0.cjs.map → component.styles-DDUGBJle.cjs.map} +1 -1
  145. package/build/{component.styles-CTo5NC52.js → component.styles-DMBvhmz6.js} +4 -4
  146. package/build/{component.styles-CTo5NC52.js.map → component.styles-DMBvhmz6.js.map} +1 -1
  147. package/build/component.styles-DWoybqna.cjs +137 -0
  148. package/build/component.styles-DWoybqna.cjs.map +1 -0
  149. package/build/component.styles-DhI3n-dL.js +213 -0
  150. package/build/component.styles-DhI3n-dL.js.map +1 -0
  151. package/build/{component.styles-DxeG9Opm.cjs → component.styles-DjLSmx3e.cjs} +2 -2
  152. package/build/{component.styles-DxeG9Opm.cjs.map → component.styles-DjLSmx3e.cjs.map} +1 -1
  153. package/build/component.styles-DqTkSP8L.js +1023 -0
  154. package/build/component.styles-DqTkSP8L.js.map +1 -0
  155. package/build/{component.styles-Dok17vPl.js → component.styles-DuIrUV9k.js} +2 -2
  156. package/build/{component.styles-Dok17vPl.js.map → component.styles-DuIrUV9k.js.map} +1 -1
  157. package/build/component.styles-DwdN7mQq.cjs +99 -0
  158. package/build/component.styles-DwdN7mQq.cjs.map +1 -0
  159. package/build/{component.styles-CV7jTFCg.js → component.styles-iWM1hPGZ.js} +62 -31
  160. package/build/component.styles-iWM1hPGZ.js.map +1 -0
  161. package/build/{component.styles-CZu2m0O4.cjs → component.styles-q4ne6jV1.cjs} +2 -2
  162. package/build/{component.styles-CZu2m0O4.cjs.map → component.styles-q4ne6jV1.cjs.map} +1 -1
  163. package/build/{component.styles-C6LohBfF.js → component.styles-uPfiNBIy.js} +3 -3
  164. package/build/{component.styles-C6LohBfF.js.map → component.styles-uPfiNBIy.js.map} +1 -1
  165. package/build/component.styles-vcNQJK0U.cjs +65 -0
  166. package/build/component.styles-vcNQJK0U.cjs.map +1 -0
  167. package/build/component.styles-w3iWQMCq.cjs +13 -0
  168. package/build/component.styles-w3iWQMCq.cjs.map +1 -0
  169. package/build/consts.cjs.js.map +1 -1
  170. package/build/consts.es.js.map +1 -1
  171. package/build/context-app.cjs.js +1 -1
  172. package/build/context-app.es.js +1 -1
  173. package/build/context-dialog.cjs.js +1 -1
  174. package/build/context-dialog.es.js +1 -1
  175. package/build/context-sonner.cjs.js +1 -1
  176. package/build/context-sonner.es.js +1 -1
  177. package/build/{context.constants-DqYjo5m4.js → context.constants-BAz35AJw.js} +5 -5
  178. package/build/{context.constants-DqYjo5m4.js.map → context.constants-BAz35AJw.js.map} +1 -1
  179. package/build/{context.constants-B29-_8v3.cjs → context.constants-BJPyze-d.cjs} +2 -2
  180. package/build/{context.constants-B29-_8v3.cjs.map → context.constants-BJPyze-d.cjs.map} +1 -1
  181. package/build/{context.constants-CsZRZ7gH.js → context.constants-COR-ReeN.js} +2 -2
  182. package/build/{context.constants-CsZRZ7gH.js.map → context.constants-COR-ReeN.js.map} +1 -1
  183. package/build/{context.constants-BaD7xj_m.cjs → context.constants-fwK8ogSf.cjs} +2 -2
  184. package/build/{context.constants-BaD7xj_m.cjs.map → context.constants-fwK8ogSf.cjs.map} +1 -1
  185. package/build/{context.hooks-gyzZSaVi.js → context.hooks-Bs1dD25S.js} +4 -4
  186. package/build/{context.hooks-gyzZSaVi.js.map → context.hooks-Bs1dD25S.js.map} +1 -1
  187. package/build/{context.hooks-CTi-CVKx.cjs → context.hooks-KAyS_7Pj.cjs} +3 -3
  188. package/build/{context.hooks-CTi-CVKx.cjs.map → context.hooks-KAyS_7Pj.cjs.map} +1 -1
  189. package/build/functions.cjs.js.map +1 -1
  190. package/build/functions.es.js +7 -4
  191. package/build/functions.es.js.map +1 -1
  192. package/build/hooks-use-deep-compare-memoize.d.ts +1 -1
  193. package/build/index.cjs.js +1 -1
  194. package/build/index.d.ts +289 -227
  195. package/build/index.es.js +133 -139
  196. package/build/{style-CEGJOjRW.js → style-Bvt_Melk.js} +32 -12
  197. package/build/style-Bvt_Melk.js.map +1 -0
  198. package/build/{style-DeAgDHyI.js → style-DjCgiI7l.js} +3 -3
  199. package/build/{style-DeAgDHyI.js.map → style-DjCgiI7l.js.map} +1 -1
  200. package/build/style-add.cjs.js +1 -1
  201. package/build/style-add.d.ts +11 -1
  202. package/build/style-add.es.js +6 -4
  203. package/build/{style-CtGd1JVB.cjs → style-eIuUYu9x.cjs} +2 -2
  204. package/build/{style-CtGd1JVB.cjs.map → style-eIuUYu9x.cjs.map} +1 -1
  205. package/build/style-error.cjs.js +1 -1
  206. package/build/style-error.es.js +1 -1
  207. package/build/{style-Dm74EPGE.cjs → style-f3_KtJIt.cjs} +30 -14
  208. package/build/style-f3_KtJIt.cjs.map +1 -0
  209. package/build/style-theme.cjs.js +1 -1
  210. package/build/style-theme.es.js +1 -1
  211. package/build/{theme.global-bN9HlSWE.js → theme.global-B46v_8eu.js} +2 -1
  212. package/build/{theme.global-bN9HlSWE.js.map → theme.global-B46v_8eu.js.map} +1 -1
  213. package/build/{theme.global-D6XU05Et.cjs → theme.global-BdZkriPJ.cjs} +2 -1
  214. package/build/{theme.global-D6XU05Et.cjs.map → theme.global-BdZkriPJ.cjs.map} +1 -1
  215. package/build/{use-BVj4dgbW.js → use-B6rT81uF.js} +6 -6
  216. package/build/{use-BVj4dgbW.js.map → use-B6rT81uF.js.map} +1 -1
  217. package/build/{use-BhofoOgk.cjs → use-BnaBipTR.cjs} +2 -2
  218. package/build/{use-BhofoOgk.cjs.map → use-BnaBipTR.cjs.map} +1 -1
  219. package/build/use-C1l0O0Qo.cjs.map +1 -1
  220. package/build/use-DT0XgvJT.js.map +1 -1
  221. package/package.json +2 -12
  222. package/build/area-ClrrGVJG.cjs +0 -40
  223. package/build/area-ClrrGVJG.cjs.map +0 -1
  224. package/build/area-DfCAwCiZ.js.map +0 -1
  225. package/build/component-BnI7BIp-.cjs +0 -2
  226. package/build/component-BnI7BIp-.cjs.map +0 -1
  227. package/build/component-C2JFFh-k.js.map +0 -1
  228. package/build/component-C52VCES6.cjs.map +0 -1
  229. package/build/component-CuiUpH8H.js.map +0 -1
  230. package/build/component-D1NPhRuV.cjs +0 -90
  231. package/build/component-D1NPhRuV.cjs.map +0 -1
  232. package/build/component-DZxbW_Jz.js.map +0 -1
  233. package/build/component.constants-D9wVZ3zy.cjs +0 -22
  234. package/build/component.constants-D9wVZ3zy.cjs.map +0 -1
  235. package/build/component.constants-DbNhxh0k.js.map +0 -1
  236. package/build/component.styles-B1DIataj.cjs +0 -10
  237. package/build/component.styles-B1DIataj.cjs.map +0 -1
  238. package/build/component.styles-BFwkFWkd.cjs +0 -39
  239. package/build/component.styles-BFwkFWkd.cjs.map +0 -1
  240. package/build/component.styles-BSEA2Dqn.cjs +0 -8
  241. package/build/component.styles-BSEA2Dqn.cjs.map +0 -1
  242. package/build/component.styles-BapdQNhL.js.map +0 -1
  243. package/build/component.styles-BfvB83xM.cjs.map +0 -1
  244. package/build/component.styles-Bn6ylF83.js +0 -859
  245. package/build/component.styles-Bn6ylF83.js.map +0 -1
  246. package/build/component.styles-BsZIuwWJ.cjs +0 -140
  247. package/build/component.styles-BsZIuwWJ.cjs.map +0 -1
  248. package/build/component.styles-CEBh8X5q.js +0 -20
  249. package/build/component.styles-CEBh8X5q.js.map +0 -1
  250. package/build/component.styles-CPsxMKVK.cjs +0 -73
  251. package/build/component.styles-CPsxMKVK.cjs.map +0 -1
  252. package/build/component.styles-CV7jTFCg.js.map +0 -1
  253. package/build/component.styles-CVBpx4fw.js.map +0 -1
  254. package/build/component.styles-CmBcHREH.cjs +0 -13
  255. package/build/component.styles-CmBcHREH.cjs.map +0 -1
  256. package/build/component.styles-CmEFZfA5.js.map +0 -1
  257. package/build/component.styles-DHIw8p8e.cjs +0 -158
  258. package/build/component.styles-DHIw8p8e.cjs.map +0 -1
  259. package/build/component.styles-DOPCUXcr.js.map +0 -1
  260. package/build/component.styles-Dj3h7jd9.cjs +0 -165
  261. package/build/component.styles-Dj3h7jd9.cjs.map +0 -1
  262. package/build/component.styles-Do1NYZEO.js.map +0 -1
  263. package/build/component.styles-DpkFoWEh.cjs +0 -81
  264. package/build/component.styles-DpkFoWEh.cjs.map +0 -1
  265. package/build/component.styles-DqsBDAEo.js +0 -202
  266. package/build/component.styles-DqsBDAEo.js.map +0 -1
  267. package/build/component.styles-Du2y0R4W.js +0 -177
  268. package/build/component.styles-Du2y0R4W.js.map +0 -1
  269. package/build/component.styles-RkQwTlwG.js.map +0 -1
  270. package/build/component.styles-ZtwHuL4x.cjs.map +0 -1
  271. package/build/style-CEGJOjRW.js.map +0 -1
  272. package/build/style-Dm74EPGE.cjs.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"component-CuiUpH8H.js","sources":["../src/components/input/component.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport { NumberFormatValues } from 'react-number-format'\n\nimport { ErrorMessage } from '@local/styles/error'\n\nimport {\n InputPostfixChildren,\n InputPrefixChildren,\n InputProps,\n StyledInput,\n StyledInputNumeric,\n StyledInputPattern,\n StyledInputWrapper\n} from '.'\n\nexport const Input = (props: InputProps) => {\n const handleOnChange = useCallback(\n (input: string | NumberFormatValues) => {\n if (props.variety === 'standard') {\n const value = typeof input === 'string' ? input : input.value\n const cleaned = props.isNoSpaces ? value.replace(/\\s+/g, '') : value\n props.onChange?.(cleaned)\n }\n\n if (props.variety === 'pattern' || props.variety === 'numeric') {\n if (typeof input !== 'string') {\n props.onChange?.(input)\n }\n }\n },\n [props]\n )\n\n return (\n <>\n <StyledInputWrapper\n $isInputEffect={props.isInputEffect}\n className={props.className}\n $isDisabled={props.isDisabled}\n $sx={props.sx}\n $size={props.size}\n $isWidthAsHeight={props.isWidthAsHeight}\n >\n {props.prefixChildren && (\n <InputPrefixChildren\n $left={props.prefixChildren.left}\n $right={props.prefixChildren.right}\n $isDisabled={props.isDisabled}\n $width={props.prefixChildren.width}\n >\n {props.prefixChildren.children}\n </InputPrefixChildren>\n )}\n {props.variety === 'pattern' ? (\n <StyledInputPattern\n $isNiceNumber={props.isNiceNumber}\n $isInputEffect={props.isInputEffect}\n $error={props?.error}\n $isLoading={props.isLoading}\n $postfixChildren={props?.postfixChildren}\n $prefixChildren={props?.prefixChildren}\n $genre={props.genre}\n $size={props.size}\n $isBold={props.isBold}\n $isDisabled={props.isDisabled}\n $isCenter={props.isCenter}\n disabled={props.isDisabled}\n readOnly={props.isReadOnly}\n required={props.isRequired}\n defaultValue={props.defaultValue}\n value={props.value}\n placeholder={props.placeholder}\n onValueChange={props => handleOnChange(props)}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onPaste={props.onPaste}\n name={props.name}\n id={props.id}\n onKeyDown={props.onKeyDown}\n inputMode={props.inputMode}\n maxLength={props.maxLength}\n minLength={props.minLength}\n tabIndex={props.tabIndex}\n {...props.propsPattern}\n />\n ) : props.variety === 'numeric' ? (\n <StyledInputNumeric\n $isNiceNumber={props.isNiceNumber}\n $isInputEffect={props.isInputEffect}\n $error={props?.error}\n $isLoading={props.isLoading}\n $postfixChildren={props?.postfixChildren}\n $prefixChildren={props?.prefixChildren}\n $genre={props.genre}\n $size={props.size}\n $isBold={props.isBold}\n $isDisabled={props.isDisabled}\n $isCenter={props.isCenter}\n disabled={props.isDisabled}\n readOnly={props.isReadOnly}\n required={props.isRequired}\n defaultValue={props.defaultValue}\n value={props.value}\n placeholder={props.placeholder}\n onValueChange={props => handleOnChange(props)}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onPaste={props.onPaste}\n name={props.name}\n id={props.id}\n onKeyDown={props.onKeyDown}\n inputMode={props.inputMode}\n maxLength={props.maxLength}\n minLength={props.minLength}\n tabIndex={props.tabIndex}\n {...props.propsNumeric}\n />\n ) : (\n <StyledInput\n $isNiceNumber={props.isNiceNumber}\n inputMode={props.inputMode}\n maxLength={props.maxLength}\n minLength={props.minLength}\n ref={props.ref}\n $error={props.error}\n $isInputEffect={props.isInputEffect}\n $isLoading={props.isLoading}\n $postfixChildren={props?.postfixChildren}\n $prefixChildren={props?.prefixChildren}\n $genre={props.genre}\n $size={props.size}\n $isBold={props.isBold}\n $isDisabled={props.isDisabled}\n $isCenter={props.isCenter}\n disabled={props.isDisabled}\n readOnly={props.isReadOnly}\n required={props.isRequired}\n defaultValue={props.defaultValue}\n value={props.value ?? ''}\n placeholder={props.placeholder}\n type={props.type}\n autoComplete={props.autocomplete}\n onInput={event => {\n const input = event.target as HTMLInputElement\n handleOnChange(input.value)\n }}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onPaste={props.onPaste}\n name={props.name}\n id={props.id}\n tabIndex={props.tabIndex}\n onKeyDown={props.onKeyDown}\n min={props.min}\n max={props.max}\n step={props.step}\n />\n )}\n\n {props.postfixChildren && (\n <InputPostfixChildren\n $left={props.postfixChildren.left}\n $right={props.postfixChildren.right}\n $isDisabled={props.isDisabled}\n $width={props.postfixChildren.width}\n >\n {props.postfixChildren.children}\n </InputPostfixChildren>\n )}\n </StyledInputWrapper>\n {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n </>\n )\n}\n\nexport function formatPhoneNumber(dialCode: string, international: string) {\n function isDigit(char: string): boolean {\n return /\\d/.test(char)\n }\n\n let formattedNumber = ''\n let placeholderNumber = ''\n let dialCodeIndex = 0\n\n if (dialCode.length === 0) {\n return { format: '', placeholder: '' }\n }\n\n for (let i = 0; i < international.length; i++) {\n const char = international.charAt(i)\n\n if (char === dialCode.charAt(dialCodeIndex)) {\n formattedNumber += char\n placeholderNumber += isDigit(char) ? '#' : char\n dialCodeIndex++\n } else {\n if (isDigit(char)) {\n formattedNumber += '#'\n placeholderNumber += '-'\n } else {\n formattedNumber += char\n placeholderNumber += char\n }\n }\n }\n\n while (dialCodeIndex < dialCode.length) {\n formattedNumber += dialCode.charAt(dialCodeIndex)\n placeholderNumber += dialCode.charAt(dialCodeIndex)\n dialCodeIndex++\n }\n\n return {\n format: formattedNumber,\n placeholder: placeholderNumber\n }\n}\n"],"names":["jsxs","Fragment","jsx","props"],"mappings":"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"}
@@ -1,90 +0,0 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),s=require("react"),i=require("styled-components"),t=require("./component.styles-BfvB83xM.cjs"),o=require("./component.styles-Dpg-__rn.cjs"),r=require("./component-xnEaYd4a.cjs"),n=require("framer-motion"),d=require("./component-C52VCES6.cjs"),l=require("./style-Dm74EPGE.cjs"),c=require("./style-fRZ6xrVp.cjs"),u=require("./theme.global-D6XU05Et.cjs"),a=i.css`
2
- ${e=>i.css`
3
- background: ${e.theme.colors.button[e.$genre].background.rest};
4
- border-color: ${e.theme.colors.button[e.$genre].border.rest};
5
- color: ${e.theme.colors.button[e.$genre].color.rest};
6
- &:hover {
7
- ${!e.$isHidden&&i.css`
8
- background: ${e.theme.colors.button[e.$genre].background.hover};
9
- border-color: ${e.theme.colors.button[e.$genre].border.hover};
10
- color: ${e.theme.colors.button[e.$genre].color.hover};
11
- `}
12
- }
13
- `};
14
- `,p=i.css`
15
- ${e=>e.$isHidden?i.css`
16
- opacity: 0.5;
17
- background: ${e.theme.colors.button[e.$genre].background.rest} !important;
18
- color: ${e.theme.colors.button[e.$genre].color.rest} !important;
19
- `:i.css`
20
- opacity: 1;
21
- `}
22
- `,$=i.css`
23
- ${e=>e.$isHiddenBorder&&i.css`
24
- border: 0px transparent !important;
25
- `}
26
- `,h=i.css`
27
- ${e=>e.$isRadius&&i.css`
28
- border-radius: 100px;
29
- `}
30
- `,x=i.css`
31
- ${e=>e.$isPlaystationEffect&&i.css`
32
- box-shadow: ${e.theme.effects.button};
33
- `}
34
- `,m=i.div`
35
- ${e=>e.$isIconGroup?i.css`
36
- display: flex;
37
- gap: ${u.KEY_SIZE_DATA[e.$size].padding-2}px;
38
- align-items: center;
39
- order: ${e.$iconGroupOrder||"initial"};
40
- `:i.css`
41
- display: contents;
42
- `}
43
- `,g=i.css`
44
- ${e=>b({...u.KEY_SIZE_DATA[e.$size],isFullSize:e.$isFullSize,isWidthAsHeight:e.$isWidthAsHeight,isMinWidthAsContent:e.$isMinWidthAsContent})};
45
- `,b=e=>i.css`
46
- height: fit-content;
47
- min-height: ${e.height}px;
48
- max-height: fit-content;
49
- padding: 2px ${e.padding}px;
50
- border-radius: ${e.radius}px;
51
- gap: ${e.padding-2}px;
52
- ${s=>d.getFontSizeStyles(e.font,700,s.theme.font.family)};
53
- ${()=>e.isFullSize&&i.css`
54
- height: 100%;
55
- width: 100%;
56
- border-radius: 0px;
57
- `};
58
- ${e.isWidthAsHeight&&i.css`
59
- width: ${e.height}px;
60
- min-width: ${e.height}px;
61
- padding: 0px;
62
- `};
63
- ${e.isMinWidthAsContent&&i.css`
64
- min-width: max-content;
65
- `};
66
- `,y=i.css`
67
- border: 1px solid transparent;
68
- `,j=i.css`
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
72
- `,z=i(n.motion.button)`
73
- cursor: pointer;
74
- user-select: none;
75
-
76
- ${y};
77
- ${g};
78
- ${a};
79
- ${p};
80
- ${$};
81
- ${h};
82
- ${x};
83
- ${j};
84
- ${o.addRippleDefault};
85
- ${l.addTransition};
86
- ${l.addOutline};
87
- ${d.addSXTypography};
88
- ${c.addSX};
89
- `;exports.Button=o=>{const n=i.useTheme(),d=s.useMemo(()=>{var s,i;return null==(i=null==(s=o.icons??[])?void 0:s.filter(e=>!e.isHidden))?void 0:i.map((s,i)=>"id"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"id",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"logo"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"logo",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"checkbox"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"checkbox",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"loading"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"loading",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"realebail"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"realebail",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):null)},[o.icons,o.size]);return e.jsxRuntimeExports.jsxs(z,{whileTap:o.isWhileTapEffect?{scale:.9,transition:{duration:.02}}:{},id:o.id,tabIndex:0,$isFullSize:o.isFullSize,$genre:o.genre,$size:o.size,$isDisabled:o.isDisabled,$isMinWidthAsContent:o.isMinWidthAsContent,$isWidthAsHeight:o.isWidthAsHeight,$isRadius:o.isRadius,$isHidden:o.isHidden,$isPlaystationEffect:o.isPlaystationEffect,$sxTypography:o.sxTypography,$isHiddenBorder:o.isHiddenBorder||o.isPlaystationEffect,disabled:o.isDisabled,type:o.type??"button",className:o.className,onClick:e=>{!o.isDisabled&&o.onClick&&o.onClick(e)},ref:o.ref,$sx:o.sx,children:[e.jsxRuntimeExports.jsx(r.Ripple,{color:n.colors.checkbox[o.genre].color.rest,isDisabled:o.isDisabled??o.isDisabledRipple,isHidden:o.isHidden}),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[!o.isOnlyIcon&&e.jsxRuntimeExports.jsx("div",{style:{order:0,display:"contents"},children:o.children&&o.children}),e.jsxRuntimeExports.jsx(m,{$size:o.size,$isIconGroup:o.isIconGroup,$iconGroupOrder:"iconGroupOrder"in o?o.iconGroupOrder:void 0,children:d})]})]})},exports.ButtonSize=g,exports.ButtonSizeConstructor=b,exports.StyledButton=z,exports.StyledButtonIconsWrapper=m;
90
- //# sourceMappingURL=component-D1NPhRuV.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component-D1NPhRuV.cjs","sources":["../src/components/button/component.styles.ts","../src/components/button/component.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addRippleDefault } from '@local/components/ripple'\nimport { addSXTypography, getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledDollarButtonIconsWrapperProps, StyledDollarButtonProps } from '.'\n\n/****************************************** Genre *************************************************/\nconst ButtonGenre = css<StyledDollarButtonProps>`\n ${props => css`\n background: ${props.theme.colors.button[props.$genre].background.rest};\n border-color: ${props.theme.colors.button[props.$genre].border.rest};\n color: ${props.theme.colors.button[props.$genre].color.rest};\n &:hover {\n ${!props.$isHidden &&\n css`\n background: ${props.theme.colors.button[props.$genre].background.hover};\n border-color: ${props.theme.colors.button[props.$genre].border.hover};\n color: ${props.theme.colors.button[props.$genre].color.hover};\n `}\n }\n `};\n`\n\n/****************************************** Disabled *************************************************/\nconst ButtonDisabled = css<StyledDollarButtonProps>`\n ${props =>\n props.$isHidden\n ? css`\n opacity: 0.5;\n background: ${props.theme.colors.button[props.$genre].background.rest} !important;\n color: ${props.theme.colors.button[props.$genre].color.rest} !important;\n `\n : css`\n opacity: 1;\n `}\n`\n/****************************************** is HiddenBorder *************************************************/\nconst ButtonIsHiddenBorder = css<StyledDollarButtonProps>`\n ${props =>\n props.$isHiddenBorder &&\n css`\n border: 0px transparent !important;\n `}\n`\n/****************************************** is Radius *************************************************/\nconst ButtonIsRadius = css<StyledDollarButtonProps>`\n ${props =>\n props.$isRadius &&\n css`\n border-radius: 100px;\n `}\n`\n/****************************************** is PlaystationEffect *************************************************/\nconst ButtonIsPlaystationEffect = css<StyledDollarButtonProps>`\n ${props =>\n props.$isPlaystationEffect &&\n css`\n box-shadow: ${props.theme.effects.button};\n `}\n`\n/****************************************** Icons Wrapper *************************************************/\nexport const StyledButtonIconsWrapper = styled.div<StyledDollarButtonIconsWrapperProps>`\n ${props =>\n props.$isIconGroup\n ? css`\n display: flex;\n gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;\n align-items: center;\n order: ${props.$iconGroupOrder || 'initial'};\n `\n : css`\n display: contents;\n `}\n`\n\n/****************************************** Size *************************************************/\nexport const ButtonSize = css<StyledDollarButtonProps>`\n ${props =>\n ButtonSizeConstructor({\n ...KEY_SIZE_DATA[props.$size],\n isFullSize: props.$isFullSize,\n isWidthAsHeight: props.$isWidthAsHeight,\n isMinWidthAsContent: props.$isMinWidthAsContent\n })};\n`\nexport const ButtonSizeConstructor = (\n props: IThemeSizePropertyDefault & {\n isFullSize?: boolean\n isWidthAsHeight?: boolean\n isMinWidthAsContent?: boolean\n }\n) => css`\n height: fit-content;\n min-height: ${props.height}px;\n max-height: fit-content;\n padding: 2px ${props.padding}px;\n border-radius: ${props.radius}px;\n gap: ${props.padding - 2}px;\n ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n ${() =>\n props.isFullSize &&\n css`\n height: 100%;\n width: 100%;\n border-radius: 0px;\n `};\n ${props.isWidthAsHeight &&\n css`\n width: ${props.height}px;\n min-width: ${props.height}px;\n padding: 0px;\n `};\n ${props.isMinWidthAsContent &&\n css`\n min-width: max-content;\n `};\n`\n/****************************************** Border *************************************************/\nconst ButtonBorder = css`\n border: 1px solid transparent;\n`\n\n/****************************************** Flex *************************************************/\nconst ButtonFlex = css<StyledDollarButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n/****************************************** Styled *************************************************/\nexport const StyledButton = styled(motion.button)<StyledDollarButtonProps>`\n cursor: pointer;\n user-select: none;\n\n ${ButtonBorder};\n ${ButtonSize};\n ${ButtonGenre};\n ${ButtonDisabled};\n ${ButtonIsHiddenBorder};\n ${ButtonIsRadius};\n ${ButtonIsPlaystationEffect};\n ${ButtonFlex};\n ${addRippleDefault};\n ${addTransition};\n ${addOutline};\n ${addSXTypography};\n ${addSX};\n`\n","import { FC, Ref, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport {\n Icon,\n TIconCheckboxNameString,\n TIconIdNameString,\n TIconLoadingNameString,\n TIconLogoNameString,\n TIconRealEbailNameString\n} from '@local/components/icon'\nimport { Ripple } from '@local/components/ripple'\n\nimport { ButtonProps, StyledButton, StyledButtonIconsWrapper } from '.'\n\nexport const Button: FC<ButtonProps> = props => {\n const theme = useTheme()\n\n const iconComponents = useMemo(\n () =>\n (props.icons ?? [])\n ?.filter(icon => !icon.isHidden)\n ?.map((icon, index) =>\n icon?.type === 'id' ? (\n <Icon\n key={index}\n name={icon?.name as TIconIdNameString}\n type=\"id\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'logo' ? (\n <Icon\n key={index}\n name={icon?.name as TIconLogoNameString}\n type=\"logo\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'checkbox' ? (\n <Icon\n key={index}\n name={icon?.name as TIconCheckboxNameString}\n type=\"checkbox\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'loading' ? (\n <Icon\n key={index}\n name={icon?.name as TIconLoadingNameString}\n type=\"loading\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'realebail' ? (\n <Icon\n key={index}\n name={icon?.name as TIconRealEbailNameString}\n type=\"realebail\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : null\n ),\n [props.icons, props.size]\n )\n\n const handleClick: ButtonProps['onClick'] = event => {\n if (!props.isDisabled && props.onClick) {\n props.onClick(event)\n }\n }\n\n return (\n <StyledButton\n whileTap={props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.02 } } : {}}\n id={props.id}\n tabIndex={0}\n $isFullSize={props.isFullSize}\n $genre={props.genre}\n $size={props.size}\n $isDisabled={props.isDisabled}\n $isMinWidthAsContent={props.isMinWidthAsContent}\n $isWidthAsHeight={props.isWidthAsHeight}\n $isRadius={props.isRadius}\n $isHidden={props.isHidden}\n $isPlaystationEffect={props.isPlaystationEffect}\n $sxTypography={props.sxTypography}\n $isHiddenBorder={props.isHiddenBorder || props.isPlaystationEffect}\n disabled={props.isDisabled}\n type={props.type ?? 'button'}\n className={props.className}\n onClick={handleClick}\n ref={props.ref as Ref<HTMLButtonElement>}\n $sx={props.sx}\n >\n <Ripple\n color={theme.colors.checkbox[props.genre].color.rest}\n isDisabled={props.isDisabled ?? props.isDisabledRipple}\n isHidden={props.isHidden}\n />\n <>\n {!props.isOnlyIcon && <div style={{ order: 0, display: 'contents' }}>{props.children && props.children}</div>}\n <StyledButtonIconsWrapper\n $size={props.size}\n $isIconGroup={props.isIconGroup}\n $iconGroupOrder={'iconGroupOrder' in props ? props.iconGroupOrder : undefined}\n >\n {iconComponents}\n </StyledButtonIconsWrapper>\n </>\n </StyledButton>\n )\n}\n"],"names":["ButtonGenre","css","props","theme","colors","button","$genre","background","rest","border","color","$isHidden","hover","ButtonDisabled","ButtonIsHiddenBorder","$isHiddenBorder","ButtonIsRadius","$isRadius","ButtonIsPlaystationEffect","$isPlaystationEffect","effects","StyledButtonIconsWrapper","styled","div","$isIconGroup","KEY_SIZE_DATA","$size","padding","$iconGroupOrder","ButtonSize","ButtonSizeConstructor","isFullSize","$isFullSize","isWidthAsHeight","$isWidthAsHeight","isMinWidthAsContent","$isMinWidthAsContent","height","radius","params","getFontSizeStyles","font","family","ButtonBorder","ButtonFlex","StyledButton","motion","addRippleDefault","addTransition","addOutline","addSXTypography","addSX","useTheme","iconComponents","useMemo","_b","_a","icons","filter","icon","isHidden","map","index","type","jsx","Icon","name","size","turn","order","jsxs","whileTap","isWhileTapEffect","scale","transition","duration","id","tabIndex","genre","$isDisabled","isDisabled","isRadius","isPlaystationEffect","$sxTypography","sxTypography","isHiddenBorder","disabled","className","onClick","event","ref","$sx","sx","children","Ripple","checkbox","isDisabledRipple","Fragment","isOnlyIcon","style","display","isIconGroup","iconGroupOrder"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"component-DZxbW_Jz.js","sources":["../src/components/button/component.styles.ts","../src/components/button/component.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addRippleDefault } from '@local/components/ripple'\nimport { addSXTypography, getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledDollarButtonIconsWrapperProps, StyledDollarButtonProps } from '.'\n\n/****************************************** Genre *************************************************/\nconst ButtonGenre = css<StyledDollarButtonProps>`\n ${props => css`\n background: ${props.theme.colors.button[props.$genre].background.rest};\n border-color: ${props.theme.colors.button[props.$genre].border.rest};\n color: ${props.theme.colors.button[props.$genre].color.rest};\n &:hover {\n ${!props.$isHidden &&\n css`\n background: ${props.theme.colors.button[props.$genre].background.hover};\n border-color: ${props.theme.colors.button[props.$genre].border.hover};\n color: ${props.theme.colors.button[props.$genre].color.hover};\n `}\n }\n `};\n`\n\n/****************************************** Disabled *************************************************/\nconst ButtonDisabled = css<StyledDollarButtonProps>`\n ${props =>\n props.$isHidden\n ? css`\n opacity: 0.5;\n background: ${props.theme.colors.button[props.$genre].background.rest} !important;\n color: ${props.theme.colors.button[props.$genre].color.rest} !important;\n `\n : css`\n opacity: 1;\n `}\n`\n/****************************************** is HiddenBorder *************************************************/\nconst ButtonIsHiddenBorder = css<StyledDollarButtonProps>`\n ${props =>\n props.$isHiddenBorder &&\n css`\n border: 0px transparent !important;\n `}\n`\n/****************************************** is Radius *************************************************/\nconst ButtonIsRadius = css<StyledDollarButtonProps>`\n ${props =>\n props.$isRadius &&\n css`\n border-radius: 100px;\n `}\n`\n/****************************************** is PlaystationEffect *************************************************/\nconst ButtonIsPlaystationEffect = css<StyledDollarButtonProps>`\n ${props =>\n props.$isPlaystationEffect &&\n css`\n box-shadow: ${props.theme.effects.button};\n `}\n`\n/****************************************** Icons Wrapper *************************************************/\nexport const StyledButtonIconsWrapper = styled.div<StyledDollarButtonIconsWrapperProps>`\n ${props =>\n props.$isIconGroup\n ? css`\n display: flex;\n gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;\n align-items: center;\n order: ${props.$iconGroupOrder || 'initial'};\n `\n : css`\n display: contents;\n `}\n`\n\n/****************************************** Size *************************************************/\nexport const ButtonSize = css<StyledDollarButtonProps>`\n ${props =>\n ButtonSizeConstructor({\n ...KEY_SIZE_DATA[props.$size],\n isFullSize: props.$isFullSize,\n isWidthAsHeight: props.$isWidthAsHeight,\n isMinWidthAsContent: props.$isMinWidthAsContent\n })};\n`\nexport const ButtonSizeConstructor = (\n props: IThemeSizePropertyDefault & {\n isFullSize?: boolean\n isWidthAsHeight?: boolean\n isMinWidthAsContent?: boolean\n }\n) => css`\n height: fit-content;\n min-height: ${props.height}px;\n max-height: fit-content;\n padding: 2px ${props.padding}px;\n border-radius: ${props.radius}px;\n gap: ${props.padding - 2}px;\n ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n ${() =>\n props.isFullSize &&\n css`\n height: 100%;\n width: 100%;\n border-radius: 0px;\n `};\n ${props.isWidthAsHeight &&\n css`\n width: ${props.height}px;\n min-width: ${props.height}px;\n padding: 0px;\n `};\n ${props.isMinWidthAsContent &&\n css`\n min-width: max-content;\n `};\n`\n/****************************************** Border *************************************************/\nconst ButtonBorder = css`\n border: 1px solid transparent;\n`\n\n/****************************************** Flex *************************************************/\nconst ButtonFlex = css<StyledDollarButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n`\n/****************************************** Styled *************************************************/\nexport const StyledButton = styled(motion.button)<StyledDollarButtonProps>`\n cursor: pointer;\n user-select: none;\n\n ${ButtonBorder};\n ${ButtonSize};\n ${ButtonGenre};\n ${ButtonDisabled};\n ${ButtonIsHiddenBorder};\n ${ButtonIsRadius};\n ${ButtonIsPlaystationEffect};\n ${ButtonFlex};\n ${addRippleDefault};\n ${addTransition};\n ${addOutline};\n ${addSXTypography};\n ${addSX};\n`\n","import { FC, Ref, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport {\n Icon,\n TIconCheckboxNameString,\n TIconIdNameString,\n TIconLoadingNameString,\n TIconLogoNameString,\n TIconRealEbailNameString\n} from '@local/components/icon'\nimport { Ripple } from '@local/components/ripple'\n\nimport { ButtonProps, StyledButton, StyledButtonIconsWrapper } from '.'\n\nexport const Button: FC<ButtonProps> = props => {\n const theme = useTheme()\n\n const iconComponents = useMemo(\n () =>\n (props.icons ?? [])\n ?.filter(icon => !icon.isHidden)\n ?.map((icon, index) =>\n icon?.type === 'id' ? (\n <Icon\n key={index}\n name={icon?.name as TIconIdNameString}\n type=\"id\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'logo' ? (\n <Icon\n key={index}\n name={icon?.name as TIconLogoNameString}\n type=\"logo\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'checkbox' ? (\n <Icon\n key={index}\n name={icon?.name as TIconCheckboxNameString}\n type=\"checkbox\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'loading' ? (\n <Icon\n key={index}\n name={icon?.name as TIconLoadingNameString}\n type=\"loading\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : icon?.type === 'realebail' ? (\n <Icon\n key={index}\n name={icon?.name as TIconRealEbailNameString}\n type=\"realebail\"\n size={icon?.size ?? props.size}\n turn={icon.turn}\n order={icon.order}\n />\n ) : null\n ),\n [props.icons, props.size]\n )\n\n const handleClick: ButtonProps['onClick'] = event => {\n if (!props.isDisabled && props.onClick) {\n props.onClick(event)\n }\n }\n\n return (\n <StyledButton\n whileTap={props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.02 } } : {}}\n id={props.id}\n tabIndex={0}\n $isFullSize={props.isFullSize}\n $genre={props.genre}\n $size={props.size}\n $isDisabled={props.isDisabled}\n $isMinWidthAsContent={props.isMinWidthAsContent}\n $isWidthAsHeight={props.isWidthAsHeight}\n $isRadius={props.isRadius}\n $isHidden={props.isHidden}\n $isPlaystationEffect={props.isPlaystationEffect}\n $sxTypography={props.sxTypography}\n $isHiddenBorder={props.isHiddenBorder || props.isPlaystationEffect}\n disabled={props.isDisabled}\n type={props.type ?? 'button'}\n className={props.className}\n onClick={handleClick}\n ref={props.ref as Ref<HTMLButtonElement>}\n $sx={props.sx}\n >\n <Ripple\n color={theme.colors.checkbox[props.genre].color.rest}\n isDisabled={props.isDisabled ?? props.isDisabledRipple}\n isHidden={props.isHidden}\n />\n <>\n {!props.isOnlyIcon && <div style={{ order: 0, display: 'contents' }}>{props.children && props.children}</div>}\n <StyledButtonIconsWrapper\n $size={props.size}\n $isIconGroup={props.isIconGroup}\n $iconGroupOrder={'iconGroupOrder' in props ? props.iconGroupOrder : undefined}\n >\n {iconComponents}\n </StyledButtonIconsWrapper>\n </>\n </StyledButton>\n )\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":"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"}
@@ -1,22 +0,0 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("framer-motion"),t=require("react"),s=require("./component-D1NPhRuV.cjs"),n=require("./component.styles-B1DIataj.cjs"),o=require("styled-components"),a=require("./component-BV_7tGiu.cjs"),l=require("./component-C52VCES6.cjs"),d=require("./context.constants-B29-_8v3.cjs"),r=require("./theme.global-D6XU05Et.cjs"),u=require("./component.styles-BfvB83xM.cjs"),c=o(i.motion.div)`
2
- display: flex;
3
- position: absolute;
4
- height: 100%;
5
- width: 100%;
6
- touch-action: pan-y;
7
- &:hover {
8
- cursor: grab;
9
- }
10
-
11
- &:active {
12
- cursor: grabbing;
13
- }
14
- `,x=o(i.motion.div)`
15
- width: 6px;
16
- height: 6px;
17
- background-color: ${e=>e.theme.palette.whiteStandard};
18
- border-radius: 5px;
19
- opacity: 0.8;
20
- cursor: pointer;
21
- `,p={initial:e=>({x:e>0?"100%":"-100%",scale:1,opacity:0}),active:{x:0,scale:1,opacity:1},exit:e=>({x:e>0?"-100%":"100%",scale:1,opacity:.2})},g={duration:.3,ease:[.56,.03,.12,1.04]},m={initial:e=>({x:e>0?"100%":"-100%",scale:1,opacity:0}),active:{x:0,scale:1,opacity:1},exit:e=>({x:e>0?"-100%":"100%",scale:1,opacity:.2})},h={duration:.3,ease:[.56,.03,.12,1.04]},v=[{id:0,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v"},{id:1,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D"},{id:2,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg"},{id:3,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"},{id:4,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"}];exports.IMAGES=v,exports.ImageSlider=o=>{var v,f,j,b;const{onIndexChange:I}=o,y=t.useMemo(()=>o.images,[o.images]),w=t.useMemo(()=>r.KEY_SIZE_DATA[o.size],[o.size]),E=t.useMemo(()=>`${w.radius}px`,[w.radius]),{isLengthZero:R,direction:k,activeImageId:S,isLengthOne:z,dragEndHandler:C,activeImageIndex:A,swipeToImage:B,skipToImage:H,handleAdd:T}=(o=>{var u;const{onIndexChange:m}=o,h=t.useMemo(()=>r.KEY_SIZE_DATA[o.size],[o.size]),v=t.useMemo(()=>`${h.radius}px`,[h.radius]),f=t.useMemo(()=>o.images,[o.images]),[{activeImageId:j,direction:b},I]=t.useState({activeImageId:(null==(u=null==f?void 0:f[0])?void 0:u.id)??null,direction:0}),y=t.useMemo(()=>1===(null==f?void 0:f.length),[f]),w=t.useMemo(()=>0===(null==f?void 0:f.length),[f]),E=t.useMemo(()=>f.findIndex(e=>e.id===j),[j,f]),R=t.useCallback(e=>{const i=(f.findIndex(e=>e.id===j)+e+f.length)%f.length;I({activeImageId:f[i].id,direction:e})},[j,f]),k=t.useCallback(e=>{const{offset:i,velocity:t}=e,s=Math.abs(i.x)*t.x;s>500||i.x>50?R(-1):(s<-500||i.x<-50)&&R(1)},[R]),S=t.useCallback(e=>{const i=f.findIndex(e=>e.id===j),t=f.findIndex(i=>i.id===e);-1!==t&&t!==i&&I({activeImageId:e,direction:t>i?1:-1})},[j,f]);t.useEffect(()=>{j&&(null==m||m(j))},[j,m]);const{add:z}=d.useDialog({br:v,dragEndHandler:k,images:f,children:o.children,activeImageIndex:E,activeImageId:j,swipeToImage:R,skipToImage:S,direction:b,genre:o.genre,size:o.size,propsDialog:{borderRadius:v,padding:"0",background:"whiteStandard"}}),C=t.useCallback(()=>{z({content:(t,d)=>{var r,u,m,h,v,f,j,b;return e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*o.imageSettings.aspect+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==t?void 0:t.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(i.AnimatePresence,{initial:!1,custom:null==t?void 0:t.direction,children:e.jsxRuntimeExports.jsxs(c,{style:{overflow:"hidden",borderRadius:null==t?void 0:t.br},custom:null==t?void 0:t.direction,variants:p,initial:"initial",animate:"active",exit:"exit",transition:g,...y?{}:{drag:"x",dragConstraints:{left:0,right:0},dragElastic:.5,onDragEnd:(e,i)=>null==t?void 0:t.dragEndHandler(i)},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:!0,sxImage:{default:{objectFit:"contain"}},alt:null==(u=null==(r=(null==t?void 0:t.images)??[])?void 0:r[(null==t?void 0:t.activeImageIndex)??0])?void 0:u.imageSrc,src:null==(h=null==(m=(null==t?void 0:t.images)??[])?void 0:m[(null==t?void 0:t.activeImageIndex)??0])?void 0:h.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.failedToLoad})}),null==(f=null==(v=(null==t?void 0:t.images)??[])?void 0:v[(null==t?void 0:t.activeImageIndex)??0])?void 0:f.children]},null==t?void 0:t.activeImageId)}),"function"==typeof(null==t?void 0:t.children)?null==(j=null==t?void 0:t.children)?void 0:j.call(t,{isDialog:!0}):null==t?void 0:t.children,e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:15,right:15}},genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>null==d?void 0:d()}),y?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{position:"absolute",bottom:15,left:15,gap:"8px"}},children:[e.jsxRuntimeExports.jsx(s.Button,{genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4",turn:90}],isWidthAsHeight:!0,isHiddenBorder:!0,isPlaystationEffect:!0,isRadius:!0,onClick:()=>{var e;return null==(e=null==t?void 0:t.swipeToImage)?void 0:e.call(t,-1)}}),e.jsxRuntimeExports.jsx(s.Button,{genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4",turn:-90}],isWidthAsHeight:!0,isHiddenBorder:!0,isPlaystationEffect:!0,isRadius:!0,onClick:()=>{var e;return null==(e=null==t?void 0:t.swipeToImage)?void 0:e.call(t,1)}})]}),e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{position:"absolute",bottom:15,left:"50%",transform:"translateX(-50%)",gap:"4px"}},children:null==(b=(null==t?void 0:t.images)??[])?void 0:b.map(i=>e.jsxRuntimeExports.jsx(x,{onClick:()=>{var e;return null==(e=null==t?void 0:t.skipToImage)?void 0:e.call(t,i.id)},initial:!1,animate:{scale:(null==t?void 0:t.activeImageId)===i.id?1.5:1,opacity:(null==t?void 0:t.activeImageId)===i.id?1:.5}},i.id))})]})]})}})},[z,y,o.imageSettings.aspect,o.locales.failedToLoad]);return{isLengthZero:w,direction:b,activeImageId:j,isLengthOne:y,dragEndHandler:k,activeImageIndex:E,swipeToImage:R,skipToImage:S,handleAdd:C}})({genre:o.genre,size:o.size,images:y,imageSettings:o.imageSettings,locales:o.locales,onIndexChange:I,children:o.children});return e.jsxRuntimeExports.jsx(a.StackMotion,{...o.propsStack,sx:e=>{var i,t,s,n,a,l,d,r,u;return{...null==(i=o.propsStack)?void 0:i.sx,default:{borderRadius:E,flexDirection:"column",alignItems:"center",overflow:"hidden",width:"auto",maxWidth:"70dvw",height:"85dvh",...(null==(t=o.propsStack)?void 0:t.sx)?"function"==typeof(null==(s=o.propsStack)?void 0:s.sx)?null==(n=o.propsStack)?void 0:n.sx(e).default:null==(a=o.propsStack)?void 0:a.sx.default:{}},tablet:{maxWidth:"95dvw",...(null==(l=o.propsStack)?void 0:l.sx)?"function"==typeof(null==(d=o.propsStack)?void 0:d.sx)?null==(r=o.propsStack)?void 0:r.sx(e).tablet:null==(u=o.propsStack)?void 0:u.sx.tablet:{}}}},children:o.isLoading?e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center"}},children:e.jsxRuntimeExports.jsx(u.Icon,{size:"large",type:"loading",primaryColor:"blueFocus",name:"Line"})}):R?e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center"}},children:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.noImagesAvailable})}):e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden"}},children:[e.jsxRuntimeExports.jsx(i.AnimatePresence,{initial:!1,custom:k,children:e.jsxRuntimeExports.jsxs(c,{style:{overflow:"hidden",borderRadius:E},custom:k,variants:m,initial:"initial",animate:"active",exit:"exit",transition:h,...z?{}:{drag:"x",dragConstraints:{left:0,right:0},dragElastic:.5,onDragEnd:(e,i)=>C(i)},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),alt:null==(v=y[A])?void 0:v.imageSrc,src:null==(f=y[A])?void 0:f.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.failedToLoad})}),null==(j=y[A])?void 0:j.children]},S)}),"function"==typeof(null==o?void 0:o.children)?null==(b=null==o?void 0:o.children)?void 0:b.call(o,{isDialog:!1}):null==o?void 0:o.children,!z&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",top:"50%",left:5,transform:"translateY(-50%)"}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Arrow4",turn:90}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>B(-1)}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",top:"50%",right:5,transform:"translateY(-50%)"}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Arrow4",turn:-90}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>B(1)}),e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{position:"absolute",bottom:5,left:"50%",transform:"translateX(-50%)",gap:"4px"}},children:y.map(i=>e.jsxRuntimeExports.jsx(x,{onClick:()=>H(i.id),initial:!1,animate:{scale:S===i.id?1.5:1,opacity:S===i.id?1:.5}},i.id))})]}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:5,right:5}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Activity"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>T()})]})})},exports.SliderDot=x,exports.SliderImage=c;
22
- //# sourceMappingURL=component.constants-D9wVZ3zy.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.constants-D9wVZ3zy.cjs","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled from 'styled-components'\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${props => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`\n","import { AnimatePresence, PanInfo, Variants } from 'framer-motion'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { Image } from '@local/components/image'\nimport { ImageSliderProps, SliderDot, SliderImage } from '@local/components/image-slider'\nimport { Stack } from '@local/components/stack'\nimport { Typography } from '@local/components/typography'\nimport { useDialog } from '@local/contexts/context-dialog'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { useImageSliderProps } from '.'\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n const br = useMemo(() => `${size.radius}px`, [size.radius])\n\n const images = useMemo(() => props.images, [props.images])\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0\n })\n const isLengthOne = useMemo(() => images?.length === 1, [images])\n const isLengthZero = useMemo(() => images?.length === 0, [images])\n\n const activeImageIndex = useMemo(() => images.findIndex(img => img.id === activeImageId), [activeImageId, images])\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex(img => img.id === activeImageId)\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection })\n },\n [activeImageId, images]\n )\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo\n const swipeThreshold = 50\n const swipePower = Math.abs(offset.x) * velocity.x\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1)\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1)\n }\n },\n [swipeToImage]\n )\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex(img => img.id === activeImageId)\n const newIndex = images.findIndex(img => img.id === imageId)\n if (newIndex === -1 || newIndex === currentIndex) return\n\n const direction = newIndex > currentIndex ? 1 : -1\n setActiveImage({ activeImageId: imageId, direction })\n },\n [activeImageId, images]\n )\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId)\n }, [activeImageId, onIndexChange])\n\n const { add } = useDialog<\n {\n br?: string\n dragEndHandler: (dragInfo: PanInfo) => void\n images: ImageSliderProps['images']\n children?: ImageSliderProps['children']\n activeImageIndex: number\n activeImageId: number | null\n swipeToImage: (swipeDirection: number) => void\n skipToImage: (imageId: number) => void\n direction: number\n } & Pick<ImageSliderProps, 'genre' | 'size'>\n >({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n genre: props.genre,\n size: props.size,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard'\n }\n })\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br\n },\n tablet: {\n maxWidth: '95dvw'\n }\n }}\n >\n <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial=\"initial\"\n animate=\"active\"\n exit=\"exit\"\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo)\n }\n : {})}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain'\n }\n }}\n alt={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15\n }\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px'\n }\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px'\n }\n }}\n >\n {(params?.images ?? [])?.map(i => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n )\n })\n }, [add, isLengthOne, props.imageSettings.aspect, props.locales.failedToLoad])\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd\n }\n}\nconst sliderVariants: Variants = {\n initial: direction => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: direction => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2\n })\n}\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04]\n}\n","import { AnimatePresence, Variants } from 'framer-motion'\nimport { FC, useMemo } from 'react'\n\nimport { useImageSlider } from '@local/hooks/use-image-slider'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.'\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { Image } from '../image'\nimport { Stack, StackMotion } from '../stack'\nimport { Typography } from '../typography'\n\nexport const ImageSlider: FC<ImageSliderProps> = props => {\n const { onIndexChange } = props\n const images = useMemo(() => props.images, [props.images])\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n const br = useMemo(() => `${size.radius}px`, [size.radius])\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children\n })\n return (\n <StackMotion\n {...props.propsStack}\n sx={theme => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {})\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {})\n }\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n }\n }}\n >\n <Icon size=\"large\" type=\"loading\" primaryColor=\"blueFocus\" name=\"Line\" />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden'\n }\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br\n }}\n custom={direction}\n variants={sliderVariants}\n initial=\"initial\"\n animate=\"active\"\n exit=\"exit\"\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo)\n }\n : {})}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)'\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)'\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px'\n }\n }}\n >\n {images.map(i => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n }\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n )\n}\nconst sliderVariants: Variants = {\n initial: direction => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: direction => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2\n })\n}\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04]\n}\n","import 'styled-components'\n\nimport { ImageSliderProps } from '.'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v'\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D'\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg'\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc: 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc: 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'\n }\n]\n"],"names":["SliderImage","styled","motion","div","SliderDot","props","theme","palette","whiteStandard","sliderVariants","initial","direction","x","scale","opacity","active","exit","sliderTransition","duration","ease","IMAGES","id","children","jsx","Stack","sx","default","justifyContent","padding","flexGrow","Button","isHiddenBorder","isDisabled","genre","size","sxTypography","weight","imageSrc","onIndexChange","images","useMemo","KEY_SIZE_DATA","br","radius","isLengthZero","activeImageId","isLengthOne","dragEndHandler","activeImageIndex","swipeToImage","skipToImage","handleAdd","setActiveImage","useState","_a","length","findIndex","img","useCallback","swipeDirection","nextIndex","dragInfo","offset","velocity","swipePower","Math","abs","imageId","currentIndex","newIndex","useEffect","add","useDialog","propsDialog","borderRadius","background","content","params","remove","jsxs","position","overflow","aspectRatio","imageSettings","aspect","width","maxWidth","height","tablet","AnimatePresence","custom","style","variants","animate","transition","drag","dragConstraints","left","right","dragElastic","onDragEnd","_","Image","sxStack","alignItems","backgroundColor","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","_b","src","_d","_c","componentFallback","Typography","variant","locales","failedToLoad","_f","_e","_g","call","isDialog","bottom","icons","type","name","isWidthAsHeight","isRadius","onClick","Fragment","gap","turn","isPlaystationEffect","transform","_h","map","i","useImageSlider","StackMotion","propsStack","flexDirection","_i","isLoading","display","Icon","primaryColor","noImagesAvailable","top"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.constants-DbNhxh0k.js","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled from 'styled-components'\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${props => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`\n","import { AnimatePresence, PanInfo, Variants } from 'framer-motion'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { Image } from '@local/components/image'\nimport { ImageSliderProps, SliderDot, SliderImage } from '@local/components/image-slider'\nimport { Stack } from '@local/components/stack'\nimport { Typography } from '@local/components/typography'\nimport { useDialog } from '@local/contexts/context-dialog'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { useImageSliderProps } from '.'\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n const br = useMemo(() => `${size.radius}px`, [size.radius])\n\n const images = useMemo(() => props.images, [props.images])\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0\n })\n const isLengthOne = useMemo(() => images?.length === 1, [images])\n const isLengthZero = useMemo(() => images?.length === 0, [images])\n\n const activeImageIndex = useMemo(() => images.findIndex(img => img.id === activeImageId), [activeImageId, images])\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex(img => img.id === activeImageId)\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection })\n },\n [activeImageId, images]\n )\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo\n const swipeThreshold = 50\n const swipePower = Math.abs(offset.x) * velocity.x\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1)\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1)\n }\n },\n [swipeToImage]\n )\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex(img => img.id === activeImageId)\n const newIndex = images.findIndex(img => img.id === imageId)\n if (newIndex === -1 || newIndex === currentIndex) return\n\n const direction = newIndex > currentIndex ? 1 : -1\n setActiveImage({ activeImageId: imageId, direction })\n },\n [activeImageId, images]\n )\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId)\n }, [activeImageId, onIndexChange])\n\n const { add } = useDialog<\n {\n br?: string\n dragEndHandler: (dragInfo: PanInfo) => void\n images: ImageSliderProps['images']\n children?: ImageSliderProps['children']\n activeImageIndex: number\n activeImageId: number | null\n swipeToImage: (swipeDirection: number) => void\n skipToImage: (imageId: number) => void\n direction: number\n } & Pick<ImageSliderProps, 'genre' | 'size'>\n >({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n genre: props.genre,\n size: props.size,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard'\n }\n })\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br\n },\n tablet: {\n maxWidth: '95dvw'\n }\n }}\n >\n <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial=\"initial\"\n animate=\"active\"\n exit=\"exit\"\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo)\n }\n : {})}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain'\n }\n }}\n alt={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15\n }\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px'\n }\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px'\n }\n }}\n >\n {(params?.images ?? [])?.map(i => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n )\n })\n }, [add, isLengthOne, props.imageSettings.aspect, props.locales.failedToLoad])\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd\n }\n}\nconst sliderVariants: Variants = {\n initial: direction => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: direction => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2\n })\n}\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04]\n}\n","import { AnimatePresence, Variants } from 'framer-motion'\nimport { FC, useMemo } from 'react'\n\nimport { useImageSlider } from '@local/hooks/use-image-slider'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.'\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { Image } from '../image'\nimport { Stack, StackMotion } from '../stack'\nimport { Typography } from '../typography'\n\nexport const ImageSlider: FC<ImageSliderProps> = props => {\n const { onIndexChange } = props\n const images = useMemo(() => props.images, [props.images])\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n const br = useMemo(() => `${size.radius}px`, [size.radius])\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children\n })\n return (\n <StackMotion\n {...props.propsStack}\n sx={theme => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {})\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {})\n }\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n }\n }}\n >\n <Icon size=\"large\" type=\"loading\" primaryColor=\"blueFocus\" name=\"Line\" />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden'\n }\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br\n }}\n custom={direction}\n variants={sliderVariants}\n initial=\"initial\"\n animate=\"active\"\n exit=\"exit\"\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo)\n }\n : {})}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)'\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)'\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px'\n }\n }}\n >\n {images.map(i => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5\n }\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n }\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n )\n}\nconst sliderVariants: Variants = {\n initial: direction => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: direction => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2\n })\n}\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04]\n}\n","import 'styled-components'\n\nimport { ImageSliderProps } from '.'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v'\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D'\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg'\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc: 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1\n }\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre=\"realebail-white\"\n size=\"medium\"\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc: 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'\n }\n]\n"],"names":["direction","jsxs","jsx","sliderVariants","sliderTransition","_a","Fragment","_b","_c","_d"],"mappings":";;;;;;;;;;;AAGO,MAAM,cAAc,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerC,MAAM,YAAY,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA,sBAGpB,CAAA,UAAS,MAAM,MAAM,QAAQ,aAAa;AAAA;AAAA;AAAA;AAAA;ACRzD,MAAM,iBAAiB,CAAC,UAA+B;;AAC5D,QAAM,EAAE,kBAAkB;AAE1B,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AAEzD,QAAM,CAAC,EAAE,eAAe,aAAa,cAAc,IAAI,SAAS;AAAA,IAC9D,iBAAe,sCAAS,OAAT,mBAAa,OAAM;AAAA,IAClC,WAAW;AAAA,EAAA,CACZ;AACD,QAAM,cAAc,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAChE,QAAM,eAAe,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAEjE,QAAM,mBAAmB,QAAQ,MAAM,OAAO,UAAU,CAAA,QAAO,IAAI,OAAO,aAAa,GAAG,CAAC,eAAe,MAAM,CAAC;AAEjH,QAAM,eAAe;AAAA,IACnB,CAAC,mBAA2B;AAC1B,YAAM,eAAe,OAAO,UAAU,CAAA,QAAO,IAAI,OAAO,aAAa;AACrE,YAAM,aAAa,eAAe,iBAAiB,OAAO,UAAU,OAAO;AAC3E,qBAAe,EAAE,eAAe,OAAO,SAAS,EAAE,IAAI,WAAW,gBAAgB;AAAA,IAAA;AAAA,IAEnF,CAAC,eAAe,MAAM;AAAA,EAAA;AAExB,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAsB;AACrB,YAAM,EAAE,QAAQ,SAAA,IAAa;AAC7B,YAAM,iBAAiB;AACvB,YAAM,aAAa,KAAK,IAAI,OAAO,CAAC,IAAI,SAAS;AAEjD,UAAI,aAAa,OAAO,OAAO,IAAI,gBAAgB;AACjD,qBAAa,EAAE;AAAA,MAAA,WACN,aAAa,QAAQ,OAAO,IAAI,CAAC,gBAAgB;AAC1D,qBAAa,CAAC;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,cAAc;AAAA,IAClB,CAAC,YAAoB;AACnB,YAAM,eAAe,OAAO,UAAU,CAAA,QAAO,IAAI,OAAO,aAAa;AACrE,YAAM,WAAW,OAAO,UAAU,CAAA,QAAO,IAAI,OAAO,OAAO;AAC3D,UAAI,aAAa,MAAM,aAAa,aAAc;AAElD,YAAMA,aAAY,WAAW,eAAe,IAAI;AAChD,qBAAe,EAAE,eAAe,SAAS,WAAAA,YAAW;AAAA,IAAA;AAAA,IAEtD,CAAC,eAAe,MAAM;AAAA,EAAA;AAGxB,YAAU,MAAM;AACd,QAAI,8DAA+B;AAAA,EAAa,GAC/C,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,EAAE,IAAA,IAAQ,UAYd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA,EACd,CACD;AACD,QAAM,YAAY,YAAY,MAAM;AAClC,QAAI;AAAA,MACF,SAAS,CAAC,QAAQ;;AAChBC,iDAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,gBACP,UAAU;AAAA,gBACV,UAAU;AAAA,gBACV,aAAa,GAAG,MAAM,cAAc,SAAS,CAAC;AAAA,gBAC9C,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,cAAc,iCAAQ;AAAA,cAAA;AAAA,cAExB,QAAQ;AAAA,gBACN,UAAU;AAAA,cAAA;AAAA,YACZ;AAAA,YAGF,UAAA;AAAA,cAAAC,sCAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,iCAAQ,WAC/C,UAAAD,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,cAAc,iCAAQ;AAAA,kBAAA;AAAA,kBAExB,QAAQ,iCAAQ;AAAA,kBAChB,UAAUE;AAAAA,kBACV,SAAQ;AAAA,kBACR,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,YAAYC;AAAAA,kBACX,GAAI,CAAC,cACF;AAAA,oBACE,MAAM;AAAA,oBACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,oBACnC,aAAa;AAAA,oBACb,WAAW,CAAC,GAAG,aAAa,iCAAQ,eAAe;AAAA,kBAAQ,IAE7D,CAAA;AAAA,kBAEJ,UAAA;AAAA,oBAAAF,kCAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,SAAS,CAAA,WAAU;AAAA,0BACjB,SAAS;AAAA,4BACP,OAAO;AAAA,4BACP,QAAQ;AAAA,4BACR,YAAY;AAAA,4BACZ,gBAAgB;AAAA,4BAChB,iBAAiB,MAAM,QAAQ;AAAA,4BAC/B,UAAU;AAAA,4BACV,eAAe;AAAA,0BAAA;AAAA,wBACjB;AAAA,wBAEF,mBAAiB;AAAA,wBACjB,SAAS;AAAA,0BACP,SAAS;AAAA,4BACP,WAAW;AAAA,0BAAA;AAAA,wBACb;AAAA,wBAEF,MAAM,MAAAG,OAAA,iCAAQ,WAAU,CAAA,MAAlB,gBAAAA,KAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,wBAC9D,MAAM,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,wBAC9D,mBACEH,kCAAAA;AAAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,IAAI;AAAA,8BACF,SAAS;AAAA,gCACP,SAAS;AAAA,8BAAA;AAAA,4BACX;AAAA,4BAGD,gBAAM,QAAQ;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACjB;AAAA,oBAAA;AAAA,qBAGF,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBApDrD,iCAAQ;AAAA,cAAA,GAsDjB;AAAA,cACC,QAAO,iCAAQ,cAAa,cAAa,sCAAQ,aAAR,gCAAmB,EAAE,UAAU,KAAA,KAAU,iCAAQ;AAAA,cAE3FA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,QAAQ;AAAA,sBACR,OAAO;AAAA,oBAAA;AAAA,kBACT;AAAA,kBAEF,QAAO,iCAAQ,UAAS;AAAA,kBACxB,OAAM,iCAAQ,SAAQ;AAAA,kBACtB,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM;AAAA,gBAAS;AAAA,cAAA;AAAA,cAEzB,CAAC,cACAD,kCAAAA,KAAAK,kBAAAA,UAAA,EACE,UAAA;AAAA,gBAAAL,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI;AAAA,sBACF,SAAS;AAAA,wBACP,UAAU;AAAA,wBACV,QAAQ;AAAA,wBACR,MAAM;AAAA,wBACN,KAAK;AAAA,sBAAA;AAAA,oBACP;AAAA,oBAGF,UAAA;AAAA,sBAAAC,kCAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,QAAO,iCAAQ,UAAS;AAAA,0BACxB,OAAM,iCAAQ,SAAQ;AAAA,0BACtB,OAAO;AAAA,4BACL;AAAA,8BACE,MAAM;AAAA,8BACN,MAAM;AAAA,8BACN,MAAM;AAAA,4BAAA;AAAA,0BACR;AAAA,0BAEF,iBAAe;AAAA,0BACf,gBAAc;AAAA,0BACd,qBAAmB;AAAA,0BACnB,UAAQ;AAAA,0BACR,SAAS,MAAA;;AAAM,oCAAAG,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,wBAAE;AAAA,sBAAA;AAAA,sBAE1CH,kCAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,QAAO,iCAAQ,UAAS;AAAA,0BACxB,OAAM,iCAAQ,SAAQ;AAAA,0BACtB,OAAO;AAAA,4BACL;AAAA,8BACE,MAAM;AAAA,8BACN,MAAM;AAAA,8BACN,MAAM;AAAA,4BAAA;AAAA,0BACR;AAAA,0BAEF,iBAAe;AAAA,0BACf,gBAAc;AAAA,0BACd,qBAAmB;AAAA,0BACnB,UAAQ;AAAA,0BACR,SAAS,MAAA;;AAAM,oCAAAG,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,wBAAC;AAAA,sBAAA;AAAA,oBACzC;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEFH,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI;AAAA,sBACF,SAAS;AAAA,wBACP,UAAU;AAAA,wBACV,QAAQ;AAAA,wBACR,MAAM;AAAA,wBACN,WAAW;AAAA,wBACX,KAAK;AAAA,sBAAA;AAAA,oBACP;AAAA,oBAGA,WAAA,uCAAQ,WAAU,CAAA,MAAlB,mBAAuB,IAAI,CAAA,MAC3BA,kCAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,SAAS,MAAA;;AAAM,kCAAAG,MAAA,iCAAQ,gBAAR,gBAAAA,IAAA,aAAsB,EAAE;AAAA;AAAA,wBAEvC,SAAS;AAAA,wBACT,SAAS;AAAA,0BACP,QAAO,iCAAQ,mBAAkB,EAAE,KAAK,MAAM;AAAA,0BAC9C,UAAS,iCAAQ,mBAAkB,EAAE,KAAK,IAAI;AAAA,wBAAA;AAAA,sBAChD;AAAA,sBALK,EAAE;AAAA,oBAAA;AAAA,kBAOV;AAAA,gBAAA;AAAA,cACH,EAAA,CACF,IACE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA;AAAA,IACN,CAEH;AAAA,EAAA,GACA,CAAC,KAAK,aAAa,MAAM,cAAc,QAAQ,MAAM,QAAQ,YAAY,CAAC;AAC7E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AACA,MAAMF,mBAA2B;AAAA,EAC/B,SAAS,CAAA,eAAc;AAAA,IACrB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAA,eAAc;AAAA,IAClB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAMC,qBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;AC9RO,MAAM,cAAoC,CAAA,UAAS;;AACxD,QAAM,EAAE,kBAAkB;AAC1B,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AACzD,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,eAAe;AAAA,IACjB,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,eAAe,MAAM;AAAA,IACrB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,EAAA,CACjB;AACD,SACEF,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG,MAAM;AAAA,MACV,IAAI,CAAA,UAAA;;AAAU;AAAA,UACZ,IAAGG,MAAA,MAAM,eAAN,gBAAAA,IAAkB;AAAA,UACrB,SAAS;AAAA,YACP,cAAc;AAAA,YACd,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,KAAIE,MAAA,MAAM,eAAN,gBAAAA,IAAkB,MAClB,SAAOC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,QAAO,cAC9BC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,GAAG,OAAO,WAC5B,WAAM,eAAN,mBAAkB,GAAG,UACvB,CAAA;AAAA,UAAC;AAAA,UAEP,QAAQ;AAAA,YACN,UAAU;AAAA,YACV,KAAI,WAAM,eAAN,mBAAkB,MAClB,SAAO,WAAM,eAAN,mBAAkB,QAAO,cAC9B,WAAM,eAAN,mBAAkB,GAAG,OAAO,UAC5B,WAAM,eAAN,mBAAkB,GAAG,SACvB,CAAA;AAAA,UAAC;AAAA,QACP;AAAA;AAAA,MAGD,gBAAM,YACLP,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA,IAAC,QAAK,MAAK,SAAQ,MAAK,WAAU,cAAa,aAAY,MAAK,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA,IAEvE,CAAC,eACHD,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAGF,UAAA;AAAA,YAAAC,kCAAAA,IAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,WACvC,UAAAD,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,cAAc;AAAA,gBAAA;AAAA,gBAEhB,QAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAY;AAAA,gBACX,GAAI,CAAC,cACF;AAAA,kBACE,MAAM;AAAA,kBACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,kBACnC,aAAa;AAAA,kBACb,WAAW,CAAC,GAAG,aAAa,eAAe,QAAQ;AAAA,gBAAA,IAErD,CAAA;AAAA,gBAEJ,UAAA;AAAA,kBAAAC,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,CAAA,WAAU;AAAA,wBACjB,SAAS;AAAA,0BACP,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,iBAAiB,MAAM,QAAQ;AAAA,0BAC/B,UAAU;AAAA,0BACV,eAAe;AAAA,wBAAA;AAAA,sBACjB;AAAA,sBAEF,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,mBACEA,kCAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,IAAI;AAAA,4BACF,SAAS;AAAA,8BACP,SAAS;AAAA,4BAAA;AAAA,0BACX;AAAA,0BAGD,gBAAM,QAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACjB;AAAA,kBAAA;AAAA,mBAGH,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,gBAAA;AAAA,cAAA;AAAA,cA9CtB;AAAA,YAAA,GAgDT;AAAA,YACC,QAAO,+BAAO,cAAa,cAAa,oCAAO,aAAP,+BAAkB,EAAE,UAAU,MAAA,KAAW,+BAAO;AAAA,YAExF,CAAC,eACAD,kCAAAA,KAAAK,kBAAAA,UAAA,EACE,UAAA;AAAA,cAAAJ,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,EAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhCA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE/BA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,QAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,WAAW;AAAA,sBACX,KAAK;AAAA,oBAAA;AAAA,kBACP;AAAA,kBAGD,UAAA,OAAO,IAAI,CAAA,MACVA,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,MAAM,YAAY,EAAE,EAAE;AAAA,sBAE/B,SAAS;AAAA,sBACT,SAAS;AAAA,wBACP,OAAO,kBAAkB,EAAE,KAAK,MAAM;AAAA,wBACtC,SAAS,kBAAkB,EAAE,KAAK,IAAI;AAAA,sBAAA;AAAA,oBACxC;AAAA,oBALK,EAAE;AAAA,kBAAA,CAOV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YAGFA,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,oBACP,UAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,OAAO;AAAA,kBAAA;AAAA,gBACT;AAAA,gBAEF,OAAO,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA,gBACZ,OAAO;AAAA,kBACL;AAAA,oBACE,MAAM;AAAA,oBACN,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,gBAEF,iBAAe;AAAA,gBACf,gBAAc;AAAA,gBACd,UAAQ;AAAA,gBACR,SAAS,MAAM,UAAA;AAAA,cAAU;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MAAA,IAGFA,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,SAAS;AAAA,gBAAA;AAAA,cACX;AAAA,cAGD,gBAAM,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AACA,MAAM,iBAA2B;AAAA,EAC/B,SAAS,CAAA,eAAc;AAAA,IACrB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAA,eAAc;AAAA,IAClB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;ACzRO,MAAM,SAAqC;AAAA,EAChD;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UAAU;AAAA,EAAA;AAAA,EAEZ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UAAU;AAAA,EAAA;AAEd;"}
@@ -1,10 +0,0 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("react"),o=require("./area-ClrrGVJG.cjs"),s=require("./component-BV_7tGiu.cjs"),n=require("styled-components"),i=require("./style-Dm74EPGE.cjs"),r=require("./style-fRZ6xrVp.cjs"),a=n.img`
2
- position: absolute;
3
- width: 100%;
4
- height: 100%;
5
- object-fit: cover;
6
- opacity: ${e=>e.$isPending?0:1};
7
- ${i.addTransition};
8
- ${r.addSX};
9
- `;exports.Image=n=>{const[i,r]=t.useState(!0),[l,c]=t.useState(!1);return t.useEffect(()=>{r(!0),c(!1)},[n.src]),e.jsxRuntimeExports.jsxs(s.Stack,{sx:e=>({...null==n?void 0:n.sxStack,default:{position:"relative",overflow:"hidden",...n.isShowBeforeImage?{"&::before":{width:"100%",height:"100%",content:'""',position:"absolute",inset:0,backgroundImage:`url(${n.src})`,backgroundRepeat:"no-repeat",backgroundSize:"cover",backgroundPosition:"center",filter:"blur(20px)",transform:"scale(1.1)",zIndex:0}}:{},...(null==n?void 0:n.sxStack)?"function"==typeof(null==n?void 0:n.sxStack)?null==n?void 0:n.sxStack(e).default:null==n?void 0:n.sxStack.default:{}}}),children:[l?null:n.componentLoading||i?e.jsxRuntimeExports.jsx(o.Skeleton,{visible:!0,sx:{default:{width:"100%",height:"100%"}}}):null,!l&&e.jsxRuntimeExports.jsx(a,{loading:"lazy",$isPending:i,src:n.src,alt:n.alt,onLoadStart:()=>r(!0),onLoad:()=>r(!1),onError:()=>c(!0),$sx:n.sxImage}),l&&n.componentFallback||null]})},exports.ImageIMG=a;
10
- //# sourceMappingURL=component.styles-B1DIataj.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.styles-B1DIataj.cjs","sources":["../src/components/image/component.styles.tsx","../src/components/image/component.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\n\nimport { ImageIMGProps } from '.'\n\nexport const ImageIMG = styled.img<ImageIMGProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: ${props => (props.$isPending ? 0 : 1)};\n ${addTransition};\n ${addSX};\n`\n","import { FC, useEffect, useState } from 'react'\n\nimport { Skeleton } from '@local/areas/skeleton'\nimport { Stack } from '@local/components/stack'\n\nimport { ImageIMG, ImageProps } from '.'\n\nexport const Image: FC<ImageProps> = props => {\n const [isPending, setIsPending] = useState(true)\n const [isError, setIsError] = useState(false)\n\n useEffect(() => {\n setIsPending(true)\n setIsError(false)\n }, [props.src])\n return (\n <Stack\n sx={theme => ({\n ...props?.sxStack,\n default: {\n position: 'relative',\n overflow: 'hidden',\n ...(props.isShowBeforeImage\n ? {\n '&::before': {\n width: '100%',\n height: '100%',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundImage: `url(${props.src})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n filter: 'blur(20px)',\n transform: 'scale(1.1)',\n zIndex: 0\n }\n }\n : {}),\n ...(props?.sxStack\n ? typeof props?.sxStack === 'function'\n ? props?.sxStack(theme).default\n : props?.sxStack.default\n : {})\n }\n })}\n >\n {!isError ? (\n props.componentLoading || isPending ? (\n <Skeleton\n visible\n sx={{\n default: {\n width: '100%',\n height: '100%'\n }\n }}\n />\n ) : null\n ) : null}\n {!isError && (\n <ImageIMG\n loading=\"lazy\"\n $isPending={isPending}\n src={props.src}\n alt={props.alt}\n onLoadStart={() => setIsPending(true)}\n onLoad={() => setIsPending(false)}\n onError={() => setIsError(true)}\n $sx={props.sxImage}\n />\n )}\n {isError ? props.componentFallback || null : null}\n </Stack>\n )\n}\n"],"names":["ImageIMG","styled","img","props","$isPending","addTransition","addSX","isPending","setIsPending","useState","isError","setIsError","useEffect","src","jsxs","Stack","sx","theme","sxStack","default","position","overflow","isShowBeforeImage","width","height","content","inset","backgroundImage","backgroundRepeat","backgroundSize","backgroundPosition","filter","transform","zIndex","children","componentLoading","jsx","Skeleton","visible","loading","alt","onLoadStart","onLoad","onError","$sx","sxImage","componentFallback"],"mappings":"wPAOaA,EAAWC,EAAOC,GAAA;;;;;aAKlBC,GAAUA,EAAMC,WAAa,EAAI;IAC1CC;IACAC;gBCPiCH,IACnC,MAAOI,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAASC,GAAcF,EAAAA,UAAS,GAMvC,OAJAG,EAAAA,UAAU,KACRJ,GAAa,GACbG,GAAW,IACV,CAACR,EAAMU,QAERC,kBAAAA,KAACC,EAAAA,MAAA,CACCC,GAAIC,IAAA,IACC,MAAAd,OAAA,EAAAA,EAAOe,QACVC,QAAS,CACPC,SAAU,WACVC,SAAU,YACNlB,EAAMmB,kBACN,CACE,YAAa,CACXC,MAAO,OACPC,OAAQ,OACRC,QAAS,KACTL,SAAU,WACVM,MAAO,EACPC,gBAAiB,OAAOxB,EAAMU,OAC9Be,iBAAkB,YAClBC,eAAgB,QAChBC,mBAAoB,SACpBC,OAAQ,aACRC,UAAW,aACXC,OAAQ,IAGZ,CAAA,MACA,MAAA9B,OAAA,EAAAA,EAAOe,SACmB,yBAAnBf,WAAOe,SACZ,MAAAf,OAAA,EAAAA,EAAOe,QAAQD,GAAOE,QACtB,MAAAhB,OAAA,EAAAA,EAAOe,QAAQC,QACjB,CAAA,KAIPe,SAAA,CAACxB,EAYE,KAXFP,EAAMgC,kBAAoB5B,IACxB6B,kBAAAA,IAACC,EAAAA,SAAA,CACCC,SAAO,EACPtB,GAAI,CACFG,QAAS,CACPI,MAAO,OACPC,OAAQ,WAIZ,MAEJd,GACA0B,EAAAA,kBAAAA,IAACpC,EAAA,CACCuC,QAAQ,OACRnC,WAAYG,EACZM,IAAKV,EAAMU,IACX2B,IAAKrC,EAAMqC,IACXC,YAAa,IAAMjC,GAAa,GAChCkC,OAAQ,IAAMlC,GAAa,GAC3BmC,QAAS,IAAMhC,GAAW,GAC1BiC,IAAKzC,EAAM0C,UAGdnC,GAAUP,EAAM2C,mBAA4B"}
@@ -1,39 +0,0 @@
1
- "use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("framer-motion"),s=require("react"),i=require("styled-components"),r=require("./consts.cjs.js"),o=require("./use-BhofoOgk.cjs"),n=require("./component-D1NPhRuV.cjs"),a=require("./component.styles-B1DIataj.cjs"),l=require("./component-BV_7tGiu.cjs"),d=require("./component-C52VCES6.cjs"),u=require("./context.constants-B29-_8v3.cjs"),c=require("./theme.global-D6XU05Et.cjs"),g=require("./style-CtGd1JVB.cjs"),p=require("./style-fRZ6xrVp.cjs"),m=i.css`
2
- ${e=>i.css`
3
- background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
4
- color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
5
- &:active {
6
- background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
7
- color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
8
- }
9
- &:focus-visible {
10
- background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
11
- color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
12
- }
13
- `};
14
- `,x=i.css`
15
- ${e=>h(c.KEY_SIZE_DATA[e.$size])};
16
- `,h=e=>i.css`
17
- padding: ${e.padding}px;
18
- border-radius: ${e.radius}px;
19
- `,j=i.css`
20
- ${e=>f(c.KEY_SIZE_DATA[e.$size])};
21
- `,f=e=>i.css`
22
- gap: ${e.padding-2}px;
23
- `,S=i.div`
24
- display: flex;
25
- flex-direction: column;
26
- width: 100%;
27
- ${j};
28
- ${g.addError};
29
- ${p.addSX};
30
- `,b=i(t.motion.div)`
31
- border: 2px dashed;
32
-
33
- display: flex;
34
- flex-direction: column;
35
- width: 100%;
36
- ${m}
37
- ${x}
38
- `;exports.ImageSelect=p=>{const{onChange:m}=p,x=s.useMemo(()=>c.KEY_SIZE_DATA[p.size],[p.size]),[h,j]=s.useState(p.images||[]),[f,v]=s.useState(!1),$=s.useRef(null),y=i.useTheme(),E=s.useCallback(e=>{e&&j(t=>{const s=e.map((e,s)=>({...e,index:t.length+s})),i=[...t,...s];return null==m||m(i),i})},[m]),z=()=>{var e;null==(e=$.current)||e.click()},{handleAddFiles:R}=o.useImageCrop({onSave:E,locale:p.locale,dialog:{button:{genre:p.propsButton.default.genre,size:p.propsButton.default.size},buttonDelete:{genre:p.propsButton.delete.genre,size:p.propsButton.delete.size}},imageSettings:{maxSize:p.imageSettings.maxSize,maxCount:p.imageSettings.maxCount-h.length,aspect:p.imageSettings.aspect},refInput:$}),{handleAdd:k}=(t=>{const i=s.useMemo(()=>c.KEY_SIZE_DATA[t.size],[t.size]),r=s.useMemo(()=>`${i.radius}px`,[i.radius]),{add:o}=u.useDialog({br:r,propsDialog:{borderRadius:r,padding:"0",background:"whiteStandard"}});return{handleAdd:s.useCallback(s=>{o({content:(i,r)=>e.jsxRuntimeExports.jsxs(l.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*t.imageSettings.aspect+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==i?void 0:i.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(a.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:!0,sxImage:{default:{objectFit:"contain"}},alt:null==s?void 0:s.imageSrc,src:null==s?void 0:s.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{variant:"h6"}},children:t.locale.imageFallback})}),e.jsxRuntimeExports.jsx(n.Button,{sx:{default:{position:"absolute",bottom:15,right:15}},genre:"realebail-white",size:"small",icons:[{type:"id",name:"Arrow4"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>null==r?void 0:r()})]})})},[o,t.imageSettings.aspect,t.locale.imageFallback])}})({size:p.size,locale:p.locale,imageSettings:p.imageSettings,genre:p.genre});return s.useEffect(()=>{j(p.images||[])},[p.images]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(S,{$genre:p.genre,$size:p.size,id:p.id,$sx:p.sx,$error:p.error,children:[e.jsxRuntimeExports.jsxs(b,{onDrop:e=>{(e=>{var t;e.preventDefault(),(null==(t=e.dataTransfer.files)?void 0:t.length)&&R(e.dataTransfer.files)})(e),v(!1)},onDragOver:e=>e.preventDefault(),onDragEnter:()=>v(!0),onDragLeave:()=>v(!1),animate:{borderColor:f?y.colors.imageSelect[p.genre].border.hover:y.colors.imageSelect[p.genre].border.rest},transition:{duration:.3},$genre:p.genre,$size:p.size,children:[e.jsxRuntimeExports.jsxs(t.motion.div,{transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},layout:!0,style:{display:"flex",flexWrap:"wrap",gap:x.padding-2+"px"},children:[h.map(s=>s.url&&e.jsxRuntimeExports.jsxs(t.motion.div,{style:{position:"relative",width:`${p.imageSettings.width}px`,height:`${p.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${x.radius}px`,flexGrow:1},layout:!0,transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},children:[e.jsxRuntimeExports.jsx(a.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:p.isContain,sxImage:{default:{objectFit:p.isContain?"contain":"cover"}},alt:s.name||"image",src:s.url,componentFallback:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{variant:"h6"}},children:p.locale.imageFallback})}),e.jsxRuntimeExports.jsx(n.Button,{sx:{default:{position:"absolute",top:5,right:5}},genre:p.genre,size:"small",icons:[{type:"id",name:"Close"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>{return e=s.id,void j(t=>{const s=t.filter(t=>t.id!==e);return null==m||m(s),s});var e}}),e.jsxRuntimeExports.jsx(n.Button,{sx:{default:{position:"absolute",bottom:5,right:5}},genre:p.genre,size:"small",icons:[{type:"id",name:"Activity"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>s.url&&k({id:s.id,imageSrc:s.url})})]},s.id)),0===h.length&&e.jsxRuntimeExports.jsx("div",{onClick:z,style:{position:"relative",width:`${p.imageSettings.width}px`,height:`${p.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${x.radius}px`,flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",cursor:"pointer"},children:e.jsxRuntimeExports.jsx(d.Typography,{style:{color:y.colors.imageSelect[p.genre].color.rest},sx:{default:{}},children:p.locale.dragAndDrop})},"empty")]}),e.jsxRuntimeExports.jsx("input",{ref:$,type:"file",accept:r.ImageSupportedFormatsForInput,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&R(e.target.files)}})]}),e.jsxRuntimeExports.jsxs(l.Stack,{sx:{default:{flexGrow:1,gap:x.padding-2+"px"}},children:[e.jsxRuntimeExports.jsx(n.Button,{type:"button",genre:p.genre,size:p.size,sx:{default:{flexGrow:3}},isRadius:!0,onClick:z,children:p.locale.buttonAdd}),e.jsxRuntimeExports.jsx(n.Button,{isRadius:!0,type:"button",sx:{default:{flexGrow:1}},onClick:()=>{j(p.defaultImages||[]),null==m||m(p.defaultImages||[])},genre:p.genre,size:p.size,children:p.locale.buttonReset})]})]}),(null==p?void 0:p.error)?e.jsxRuntimeExports.jsx(g.ErrorMessage,{...p.error,size:(null==p?void 0:p.error.size)??p.size}):null]})},exports.ImageSelectListSize=x,exports.ImageSelectListSizeConstructor=h,exports.ImageSelectListWrapper=b,exports.ImageSelectSize=j,exports.ImageSelectSizeConstructor=f,exports.ImageSelectWrapper=S;
39
- //# sourceMappingURL=component.styles-BFwkFWkd.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.styles-BFwkFWkd.cjs","sources":["../src/components/image-select/component.styles.ts","../src/components/image-select/component.tsx","../src/hooks/use-image-view/use.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { ImageSelectWrapperProps } from '.'\n\nconst ImageSelectListGenre = css<ImageSelectWrapperProps>`\n ${props => css`\n background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n &:active {\n background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n }\n &:focus-visible {\n background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n }\n `};\n`\n/****************************************** Size *************************************************/\nexport const ImageSelectListSize = css<ImageSelectWrapperProps>`\n ${props => ImageSelectListSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const ImageSelectListSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n padding: ${props.padding}px;\n border-radius: ${props.radius}px;\n`\nexport const ImageSelectSize = css<ImageSelectWrapperProps>`\n ${props => ImageSelectSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const ImageSelectSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n gap: ${props.padding - 2}px;\n`\nexport const ImageSelectWrapper = styled.div<ImageSelectWrapperProps>`\n display: flex;\n flex-direction: column;\n width: 100%;\n ${ImageSelectSize};\n ${addError};\n ${addSX};\n`\nexport const ImageSelectListWrapper = styled(motion.div)<ImageSelectWrapperProps>`\n border: 2px dashed;\n\n display: flex;\n flex-direction: column;\n width: 100%;\n ${ImageSelectListGenre}\n ${ImageSelectListSize}\n`\n","import { motion } from 'framer-motion'\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { ImageSupportedFormatsForInput } from '@local/consts'\nimport { useImageCrop } from '@local/hooks/use-image-crop'\nimport { useImageView } from '@local/hooks/use-image-view'\nimport { ErrorMessage } from '@local/styles/error'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.'\nimport { Button } from '../button'\nimport { Image } from '../image'\nimport { Stack } from '../stack'\nimport { Typography } from '../typography'\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n const { onChange } = props\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n\n const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || [])\n\n const [isDraggingOver, setIsDraggingOver] = useState(false)\n\n const refInput = useRef<HTMLInputElement | null>(null)\n\n const theme = useTheme()\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault()\n if (e.dataTransfer.files?.length) {\n handleAddFilesCrop(e.dataTransfer.files)\n }\n }\n\n const handleDelete = (id: number) => {\n setImages(prev => {\n const finalImages = prev.filter(img => img.id !== id)\n onChange?.(finalImages)\n return finalImages\n })\n }\n\n const handleOnSave = useCallback(\n (files: ImageSelectItemProps[] | null) => {\n if (files) {\n setImages(prev => {\n const newImages = files.map((file, idx) => ({\n ...file,\n index: prev.length + idx\n }))\n const finalImages = [...prev, ...newImages]\n onChange?.(finalImages)\n return finalImages\n })\n }\n },\n [onChange]\n )\n\n const openFileDialog = () => {\n refInput.current?.click()\n }\n\n const resetImages = () => {\n setImages(props.defaultImages || [])\n onChange?.(props.defaultImages || [])\n }\n\n const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n onSave: handleOnSave,\n locale: props.locale,\n dialog: {\n button: {\n genre: props.propsButton.default.genre,\n size: props.propsButton.default.size\n },\n buttonDelete: {\n genre: props.propsButton.delete.genre,\n size: props.propsButton.delete.size\n }\n },\n imageSettings: {\n maxSize: props.imageSettings.maxSize,\n maxCount: props.imageSettings.maxCount - images.length,\n aspect: props.imageSettings.aspect\n },\n refInput: refInput\n })\n\n const { handleAdd } = useImageView({\n size: props.size,\n locale: props.locale,\n imageSettings: props.imageSettings,\n genre: props.genre\n })\n\n useEffect(() => {\n setImages(props.images || [])\n }, [props.images])\n\n return (\n <>\n <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n <ImageSelectListWrapper\n onDrop={e => {\n handleDrop(e)\n setIsDraggingOver(false)\n }}\n onDragOver={e => e.preventDefault()}\n onDragEnter={() => setIsDraggingOver(true)}\n onDragLeave={() => setIsDraggingOver(false)}\n animate={{\n borderColor: isDraggingOver\n ? theme.colors.imageSelect[props.genre].border.hover\n : theme.colors.imageSelect[props.genre].border.rest\n }}\n transition={{ duration: 0.3 }}\n $genre={props.genre}\n $size={props.size}\n >\n <motion.div\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring'\n }\n }}\n layout\n style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n >\n {images.map(\n img =>\n img.url && (\n <motion.div\n key={img.id}\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1\n }}\n layout\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring'\n }\n }}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n isShowBeforeImage={props.isContain}\n sxImage={{\n default: {\n objectFit: props.isContain ? 'contain' : 'cover'\n }\n }}\n alt={img.name || 'image'}\n src={img.url}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: 5,\n right: 5\n }\n }}\n genre={props.genre}\n size=\"small\"\n icons={[\n {\n type: 'id',\n name: 'Close'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleDelete(img.id)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5\n }\n }}\n genre={props.genre}\n size=\"small\"\n icons={[\n {\n type: 'id',\n name: 'Activity'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n />\n </motion.div>\n )\n )}\n {images.length === 0 && (\n <div\n onClick={openFileDialog}\n key=\"empty\"\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n cursor: 'pointer'\n }}\n >\n <Typography\n style={{\n color: theme.colors.imageSelect[props.genre].color.rest\n }}\n sx={{\n default: {}\n }}\n >\n {props.locale.dragAndDrop}\n </Typography>\n </div>\n )}\n </motion.div>\n\n <input\n ref={refInput}\n type=\"file\"\n accept={ImageSupportedFormatsForInput}\n multiple\n style={{ display: 'none' }}\n onChange={e => {\n if (e.target.files) handleAddFilesCrop(e.target.files)\n }}\n />\n </ImageSelectListWrapper>\n <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n <Button\n type=\"button\"\n genre={props.genre}\n size={props.size}\n sx={{\n default: {\n flexGrow: 3\n }\n }}\n isRadius\n onClick={openFileDialog}\n >\n {props.locale.buttonAdd}\n </Button>\n <Button\n isRadius\n type=\"button\"\n sx={{\n default: {\n flexGrow: 1\n }\n }}\n onClick={resetImages}\n genre={props.genre}\n size={props.size}\n >\n {props.locale.buttonReset}\n </Button>\n </Stack>\n </ImageSelectWrapper>\n {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n </>\n )\n}\n","import { useCallback, useMemo } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { Image } from '@local/components/image'\nimport { SliderImageProps } from '@local/components/image-slider'\nimport { Stack } from '@local/components/stack'\nimport { Typography } from '@local/components/typography'\nimport { useDialog } from '@local/contexts/context-dialog'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { useImageViewProps } from '.'\n\nexport const useImageView = (props: useImageViewProps) => {\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size])\n const br = useMemo(() => `${size.radius}px`, [size.radius])\n\n const { add } = useDialog<{\n br?: string\n }>({\n br: br,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard'\n }\n })\n const handleAdd = useCallback(\n (image: SliderImageProps) => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br\n },\n tablet: {\n maxWidth: '95dvw'\n }\n }}\n >\n <Image\n sxStack={theme => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none'\n }\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain'\n }\n }}\n alt={image?.imageSrc}\n src={image?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6'\n }\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15\n }\n }}\n genre=\"realebail-white\"\n size=\"small\"\n icons={[\n {\n type: 'id',\n name: 'Arrow4'\n }\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n </Stack>\n )\n })\n },\n [add, props.imageSettings.aspect, props.locale.imageFallback]\n )\n return { handleAdd }\n}\n"],"names":["ImageSelectListGenre","css","props","theme","colors","imageSelect","$genre","background","rest","color","ImageSelectListSize","ImageSelectListSizeConstructor","KEY_SIZE_DATA","$size","padding","radius","ImageSelectSize","ImageSelectSizeConstructor","ImageSelectWrapper","styled","div","addError","addSX","ImageSelectListWrapper","motion","onChange","size","useMemo","images","setImages","useState","isDraggingOver","setIsDraggingOver","refInput","useRef","useTheme","handleOnSave","useCallback","files","prev","newImages","map","file","idx","index","length","finalImages","openFileDialog","_a","current","click","handleAddFiles","handleAddFilesCrop","useImageCrop","onSave","locale","dialog","button","genre","propsButton","default","buttonDelete","delete","imageSettings","maxSize","maxCount","aspect","handleAdd","br","add","useDialog","propsDialog","borderRadius","image","content","params","remove","jsxs","Stack","sx","position","overflow","aspectRatio","width","maxWidth","height","tablet","children","jsx","Image","sxStack","alignItems","justifyContent","backgroundColor","palette","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","imageSrc","src","componentFallback","Typography","variant","imageFallback","Button","bottom","right","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","useImageView","useEffect","Fragment","id","$sx","$error","error","onDrop","e","preventDefault","dataTransfer","handleDrop","onDragOver","onDragEnter","onDragLeave","animate","borderColor","border","hover","transition","duration","layout","ease","style","display","flexWrap","gap","img","url","userSelect","flexGrow","isContain","top","handleDelete","filter","textAlign","cursor","dragAndDrop","ref","accept","ImageSupportedFormatsForInput","multiple","target","buttonAdd","defaultImages","buttonReset","ErrorMessage"],"mappings":"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"}
@@ -1,8 +0,0 @@
1
- "use strict";const r=require("./jsx-runtime-BcGej2Kr.cjs"),e=require("styled-components"),t=require("./style-fRZ6xrVp.cjs"),o=e.div`
2
- height: ${r=>"horizontal"===r.$type?"1px":"100%"};
3
- width: ${r=>"vertical"===r.$type?"1px":"100%"};
4
- background: ${r=>r.$color&&r.theme.palette[r.$color]};
5
- border-radius: ${r=>r.$radius||"0px"};
6
- ${t.addSX};
7
- `;exports.Separator=e=>{const t=e.color||"grayMonica";return r.jsxRuntimeExports.jsx(o,{$radius:e.radius,$color:t,$sx:e.sx,$type:e.type})},exports.SeparatorWrapper=o;
8
- //# sourceMappingURL=component.styles-BSEA2Dqn.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.styles-BSEA2Dqn.cjs","sources":["../src/components/separator/component.styles.tsx","../src/components/separator/component.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { addSX } from '@local/styles/sx'\n\nimport { SeparatorWrapperProps } from '.'\n\nconst DEFAULT_SEPARATOR_SIZE = '1px'\n\nexport const SeparatorWrapper = styled.div<SeparatorWrapperProps>`\n height: ${props => (props.$type === 'horizontal' ? DEFAULT_SEPARATOR_SIZE : '100%')};\n width: ${props => (props.$type === 'vertical' ? DEFAULT_SEPARATOR_SIZE : '100%')};\n background: ${props => props.$color && props.theme.palette[props.$color]};\n border-radius: ${props => props.$radius || '0px'};\n ${addSX};\n`\n","import { FC } from 'react'\n\nimport { IThemePaletteKeys } from '@local/theme/theme.interface'\n\nimport { SeparatorProps, SeparatorWrapper } from '.'\n\nexport const Separator: FC<SeparatorProps> = props => {\n const color: IThemePaletteKeys = props.color || 'grayMonica'\n return <SeparatorWrapper $radius={props.radius} $color={color} $sx={props.sx} $type={props.type} />\n}\n"],"names":["SeparatorWrapper","styled","div","props","$type","$color","theme","palette","$radius","addSX","color","jsx","radius","$sx","sx","type"],"mappings":"4HAQaA,EAAmBC,EAAOC,GAAA;YAC3BC,GAA0B,eAAhBA,EAAMC,MAHG,MAG+C;WACnED,GAA0B,aAAhBA,EAAMC,MAJI,MAI4C;gBAC3DD,GAASA,EAAME,QAAUF,EAAMG,MAAMC,QAAQJ,EAAME;mBAChDF,GAASA,EAAMK,SAAW;IACzCC;oBCPyCN,IAC3C,MAAMO,EAA2BP,EAAMO,OAAS,aAChD,SAAOC,kBAAAA,IAACX,EAAA,CAAiBQ,QAASL,EAAMS,OAAQP,OAAQK,EAAOG,IAAKV,EAAMW,GAAIV,MAAOD,EAAMY"}